@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--navy:#082A43;--navy2:#061E31;--gold:#C59632;--gold2:#E0B85A;--blue:#0D527E;--ink:#101923;--muted:#687789;--line:#DCE3E9;--paper:#F6F8FA;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"DM Sans",sans-serif}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.nav{height:84px;padding:0 6vw;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}.brand{display:flex;width:150px;height:84px;align-items:center;overflow:hidden}.brand img{display:block;width:100%;height:78px;object-fit:contain;object-position:left center}nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:700}nav a{transition:.2s}nav a:hover{color:var(--gold)}.nav-cta{background:var(--navy);color:#fff;padding:13px 18px;border-radius:3px}.nav-cta:hover{background:var(--gold);color:#fff}
.hero{min-height:720px;padding:85px 6vw 70px;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;background:#fff}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700;color:var(--gold);margin:0 0 18px}.hero h1{font:700 clamp(50px,6.4vw,88px)/.96 "Space Grotesk";letter-spacing:-5px;margin:0 0 25px;color:var(--navy)}.hero h1 span{color:var(--gold)}.lead{font-size:19px;line-height:1.65;color:var(--muted);max-width:610px}.actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 21px;border:1px solid var(--navy);border-radius:3px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}.btn b{font-size:17px}.gold{background:var(--gold);border-color:var(--gold);color:#fff}.gold:hover{background:var(--navy);border-color:var(--navy)}.outline{background:#fff;color:var(--navy)}.outline:hover{background:var(--navy);color:#fff}.hero-meta{display:flex;align-items:center;gap:12px;margin-top:55px;color:#9BA7B3;font-size:10px;letter-spacing:1.5px;font-weight:700}.hero-meta i{display:block;width:55px;height:1px;background:var(--gold)}
.hero-visual{height:500px;position:relative;display:flex;align-items:center;justify-content:center}
.hero-frame{position:relative;width:min(100%,560px);height:500px;overflow:hidden;background:#EEF2F3}
.hero-frame:before{content:"";position:absolute;left:0;top:0;width:72%;height:100%;background:#fff;z-index:0}
.hero-building{position:absolute;right:0;top:0;width:78%;height:100%;object-fit:cover;object-position:center;border-left:10px solid #fff;z-index:1}
.hero-worker{position:absolute;left:3%;top:7%;width:31%;height:31%;z-index:4;overflow:hidden;border:8px solid #fff;box-shadow:0 16px 35px rgba(8,42,67,.15)}
.hero-worker img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-tag{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;font-size:10px;line-height:1.45;letter-spacing:2.5px;font-weight:700}
.hero-tag-top{right:9%;top:10%;color:#52697A}
.hero-tag-bottom{left:4%;bottom:10%;background:var(--gold);color:#fff;padding:22px 25px;min-width:145px;box-shadow:0 12px 28px rgba(8,42,67,.12)}
.hero-plus{position:absolute;z-index:6;left:45%;top:47%;font:400 42px/1 "Space Grotesk";color:var(--gold);background:#fff;width:48px;height:48px;display:grid;place-items:center}
.hero-stamp{position:absolute;z-index:5;right:5%;bottom:6%;display:flex;align-items:center;gap:12px;color:#fff;font-size:9px;letter-spacing:1.5px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-stamp b{color:var(--gold2);font-size:11px}
.section{padding:115px 6vw}.section-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:55px}.section h2,.projects h2,.about h2,.quote h2{font:700 clamp(38px,4.6vw,65px)/1.02 "Space Grotesk";letter-spacing:-3.5px;margin:0;color:var(--navy)}h2 em{font-style:normal;color:var(--gold)}.section-intro{max-width:410px;color:var(--muted);line-height:1.65;margin:0}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service{min-height:235px;padding:28px 25px 32px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}.service:nth-child(3n+2),.service:nth-child(3n+3){padding-left:25px;border-left:1px solid var(--line)}.service span{font-size:11px;color:var(--gold);font-weight:700}.service h3{font:600 23px "Space Grotesk";color:var(--navy);margin:32px 0 9px}.service p{color:var(--muted);line-height:1.55;margin:0;max-width:390px}.service a{margin-top:auto;padding-top:22px;font-size:12px;font-weight:700;color:var(--gold)}.service a:hover{color:var(--navy)}
.projects{padding:115px 6vw;background:var(--navy);color:#fff}.projects h2{color:#fff}.projects .section-intro{color:#B6C4D0}.project-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:16px}.project{min-height:430px;position:relative;overflow:hidden;background:#123B58}.project-large{min-height:520px}.project-bg{position:absolute;inset:0;transition:transform .5s}.project:hover .project-bg{transform:scale(1.05)}.bg1{background:linear-gradient(135deg,#184C6E,#091C2E 65%),repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.06) 30px),repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.06) 30px)}.bg2{background:linear-gradient(135deg,#B27D24,#1A3850 60%)}.bg3{background:linear-gradient(145deg,#234C5E,#0A263B)}.project-info{position:absolute;left:25px;right:25px;bottom:25px;z-index:2}.project-info small{color:#E0B85A;font-weight:700;letter-spacing:1.7px;font-size:10px}.project-info h3{font:600 27px "Space Grotesk";margin:8px 0 0}.project-info p{color:#C6D1DB;margin:7px 0 0}.portfolio-note{text-align:center;border-top:1px solid rgba(255,255,255,.15);margin-top:55px;padding-top:22px;color:#8FA8BC;font-size:10px;letter-spacing:2px}
.about{display:grid;grid-template-columns:.7fr 1.3fr;gap:9vw;background:#fff}.about-side{border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding-right:30px;min-height:390px}.about-side span{font:700 120px "Space Grotesk";letter-spacing:-10px;color:#E7ECEF}.about-side div{width:70px;height:4px;background:var(--gold)}.about-side strong{color:#9AA6B1;letter-spacing:2px;font-size:12px}.about-copy>p:not(.eyebrow){max-width:720px;color:var(--muted);font-size:17px;line-height:1.75}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;border-top:1px solid var(--line);padding-top:22px}.values div{display:flex;flex-direction:column;gap:8px}.values b{color:var(--gold);font-size:11px}.values span{font-weight:700;color:var(--navy);font-size:13px}
.quote{padding:110px 6vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;background:#EEF4F7}.quote h2{color:var(--navy)}.quote-copy>p:not(.eyebrow){max-width:510px;color:var(--muted);line-height:1.7}.contact-card{border-left:2px solid var(--gold);padding-left:15px;margin-top:24px;display:flex;flex-direction:column;gap:4px}.contact-card span{font-size:9px;letter-spacing:2px;color:#8D99A4;font-weight:700}.contact-card strong{font-size:14px;color:var(--navy)}form{background:#fff;padding:36px;border:1px solid var(--line);box-shadow:0 20px 55px rgba(8,42,67,.08)}label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:18px}input,select,textarea{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid #CBD5DE;border-radius:2px;background:#fff;color:var(--ink);outline:none;font-size:14px}input:focus,select:focus,textarea:focus{border-color:var(--gold)}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{width:100%;margin-top:3px}.form-note{font-size:10px!important;color:#98A3AE;margin:12px 0 0}
.cta-strip{padding:60px 6vw;background:var(--gold);display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-strip .eyebrow{color:#fff;margin-bottom:8px}.cta-strip h2{font:700 36px "Space Grotesk";color:#fff;margin:0}.cta-strip .btn{background:var(--navy);border-color:var(--navy)}
footer{padding:38px 6vw;background:#061E31;color:#9EB0BE;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px}.footer-brand{width:118px;height:118px;display:block;flex:0 0 118px}.official-footer-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}.footer-center{text-align:center}.footer-center p{margin:0 0 7px;color:#fff;font-weight:700}.footer-center small{color:#7F95A5}.whatsapp{color:#E0B85A;font-weight:700}.wa-float{position:fixed;right:24px;bottom:24px;width:72px;height:72px;border-radius:50%;display:block;overflow:hidden;z-index:40;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));transition:transform .2s ease,filter .2s ease}.wa-float img{display:block;width:100%;height:100%;object-fit:cover}.wa-float:hover{transform:scale(1.06);filter:drop-shadow(0 11px 24px rgba(0,0,0,.22))}@media(max-width:600px){.wa-float{right:18px;bottom:18px;width:66px;height:66px}}
@media(max-width:850px){.nav{height:72px}.brand{width:118px;height:72px}.brand img{height:66px}nav{gap:10px}nav a:not(.nav-cta){display:none}.nav-cta{padding:10px 12px;font-size:11px}.hero{grid-template-columns:1fr;padding-top:60px}.hero-visual{height:390px}.section-head{display:block}.section-intro{margin-top:20px}.services,.project-grid,.about,.quote{grid-template-columns:1fr}.service:nth-child(3n+2),.service:nth-child(3n+3){padding-left:0;border-left:0}.service{min-height:210px}.project,.project-large{min-height:360px}.about-side{border-right:0;border-bottom:1px solid var(--line);padding:0 0 30px;min-height:230px}.form-row{grid-template-columns:1fr}.cta-strip{display:block}.cta-strip .btn{margin-top:25px}footer{flex-direction:column;align-items:flex-start}.footer-center{text-align:left}}

/* V5 — About section */
.about-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding-right:40px;min-height:390px;border-right:1px solid var(--line)}
.about-emblem{width:min(230px,70%);height:auto;object-fit:contain;object-position:left center;margin-top:10px}
.about-rule{width:72px;height:4px;background:var(--gold);margin-top:25px}
.about-caption{display:flex;flex-direction:column;gap:7px}
.about-caption strong{font:700 16px "Space Grotesk";color:var(--navy)}
.about-caption span{font-size:9px;letter-spacing:1.5px;color:#8997A4}
input[type=file]{padding:10px;background:#fff;cursor:pointer}
@media(max-width:850px){.about-side{border-right:0;border-bottom:1px solid var(--line);padding:0 0 30px;min-height:260px}.about-emblem{width:190px}}

/* CIVLAB creative hero + responsive about polish */
.about-side{position:relative;background:var(--navy);border-right:0;padding:38px;min-height:390px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.about-side:before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.about-side:after{content:"CIVLAB";position:absolute;right:-20px;bottom:-30px;font:700 110px/1 "Space Grotesk";letter-spacing:-7px;color:rgba(255,255,255,.035);pointer-events:none}
.about-emblem{position:relative;z-index:2;width:150px;height:150px;object-fit:contain;margin:0}
.about-rule{position:relative;z-index:2;width:72px;height:4px;background:var(--gold);margin:18px 0}
.about-caption{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px}
.about-caption strong{font:700 18px "Space Grotesk";color:#fff}
.about-caption span{font-size:9px;letter-spacing:1.5px;color:#B8C7D2}
@media(max-width:850px){
  .hero{padding-top:42px;gap:38px}
  .hero h1{font-size:clamp(48px,13vw,68px);letter-spacing:-3.5px}
  .hero-visual{height:355px}
  .hero-frame{height:355px}
  .hero-worker{width:30%;height:32%;top:5%}
  .hero-tag-top{right:7%;top:8%}
  .hero-tag-bottom{left:3%;bottom:7%;padding:16px 18px;min-width:125px;font-size:9px}
  .hero-plus{left:43%;top:45%;width:40px;height:40px;font-size:34px}
  .hero-stamp{right:5%;bottom:4%;font-size:8px}
  .about-side{min-height:190px;height:190px;padding:22px 24px;display:grid;grid-template-columns:110px 1fr;grid-template-rows:1fr auto;column-gap:18px;align-items:center}
  .about-side:before{inset:12px}
  .about-side:after{font-size:70px;right:-12px;bottom:-10px}
  .about-emblem{width:105px;height:105px;grid-row:1 / span 2}
  .about-rule{width:55px;height:3px;margin:0 0 8px}
  .about-caption{gap:4px}
  .about-caption strong{font-size:15px}
  .about-caption span{font-size:7px;line-height:1.35;max-width:210px}
}

/* V7 — visual cleanup: no overlapping layers, cleaner About card, mobile-safe layout */
.hero-frame{overflow:hidden;border:0;background:#f7f8f8;box-shadow:0 22px 55px rgba(8,42,67,.08)}
.hero-frame:before{width:34%;background:rgba(255,255,255,.92);z-index:2}
.hero-building{width:78%;border-left:0;z-index:1}
.hero-worker{left:4%;top:8%;width:29%;height:30%;z-index:4}
.hero-tag-top{right:8%;top:9%;z-index:5;background:rgba(255,255,255,.78);padding:8px 10px}
.hero-tag-bottom{left:4%;bottom:8%;z-index:5}
.hero-plus{left:43%;top:48%;z-index:6}
.hero-stamp{right:5%;bottom:5%;z-index:6}

/* About: replace the old navy panel with an editorial image collage */
.about{align-items:stretch}
.about-side{position:relative;background:#fff!important;border:0!important;padding:0!important;min-height:430px;height:430px;overflow:visible!important}
.about-side:before,.about-side:after{display:none!important}
.about-collage{position:relative;width:100%;height:100%;min-height:430px;overflow:visible}
.about-building{position:absolute;right:3%;top:0;width:72%;height:88%;object-fit:cover;object-position:center;display:block}
.about-worker-card{position:absolute;left:0;top:8%;width:36%;height:31%;background:#fff;padding:8px;box-shadow:0 16px 35px rgba(8,42,67,.14);z-index:3}
.about-worker-card img{display:block;width:100%;height:100%;object-fit:cover}
.about-gold-card{position:absolute;left:7%;bottom:5%;z-index:4;background:var(--gold);color:#fff;padding:20px 24px;min-width:145px;box-shadow:0 14px 30px rgba(8,42,67,.13);display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.45;letter-spacing:2.2px;font-weight:700}
.about-gold-card:after{content:"";position:absolute;right:-55px;bottom:-48px;width:110px;height:110px;border:1px solid var(--gold);z-index:-1}
.about-mark{position:absolute;right:0;bottom:0;background:#fff;padding:13px 15px 11px;z-index:5;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(8,42,67,.08)}
.about-mark b{font:700 20px/1 "Space Grotesk";color:var(--navy)}
.about-mark span{font-size:7px;letter-spacing:1.2px;color:#7f8e9b;white-space:nowrap}
.about-copy{position:relative;z-index:2}
.values div{position:relative;padding-left:0}

/* FormSubmit: use the user's email field as the Reply-To source */
form input[name="email"]{background:#fff}

@media(max-width:850px){
  .hero{padding-top:42px;gap:30px}
  .hero-visual{height:330px}
  .hero-frame{height:330px;width:100%}
  .hero-frame:before{width:30%}
  .hero-building{width:80%}
  .hero-worker{left:3%;top:6%;width:31%;height:31%;border-width:6px}
  .hero-tag-top{right:5%;top:7%;padding:6px 8px;font-size:8px;letter-spacing:1.8px}
  .hero-tag-bottom{left:3%;bottom:6%;padding:13px 15px;min-width:115px;font-size:8px;letter-spacing:1.8px}
  .hero-plus{left:42%;top:44%;width:38px;height:38px;font-size:30px}
  .hero-stamp{right:4%;bottom:4%;font-size:7px;letter-spacing:1px}

  .about{gap:48px}
  .about-side{height:300px;min-height:300px;padding:0!important}
  .about-collage{height:300px;min-height:300px}
  .about-building{right:2%;top:0;width:78%;height:82%}
  .about-worker-card{left:0;top:7%;width:39%;height:32%;padding:6px}
  .about-gold-card{left:4%;bottom:2%;padding:14px 16px;min-width:115px;font-size:8px;letter-spacing:1.6px}
  .about-gold-card:after{right:-35px;bottom:-30px;width:70px;height:70px}
  .about-mark{right:0;bottom:0;padding:10px 11px 9px}
  .about-mark b{font-size:15px}
  .about-mark span{font-size:5.5px;letter-spacing:.8px}
  .about-copy>p:not(.eyebrow){font-size:16px;line-height:1.65}
  .values{gap:14px;margin-top:30px}
  .values span{font-size:12px}
}


/* V8 FINAL — clean editorial layout, no overlapping elements */
.hero-visual.clean-hero{height:500px;position:relative;display:block;max-width:560px;margin:0 auto;padding:0 22px 28px 28px}
.hero-photo-card{position:absolute;inset:0 22px 28px 28px;background:#fff;border:1px solid #e4e9ed;box-shadow:0 24px 60px rgba(8,42,67,.10);overflow:hidden}
.hero-photo-card>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-photo-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,42,67,0) 55%,rgba(8,42,67,.72) 100%)}
.hero-photo-label{position:absolute;z-index:2;left:24px;right:24px;bottom:20px;display:flex;align-items:center;gap:12px;color:#fff;font-size:10px;letter-spacing:2px}
.hero-photo-label span{color:var(--gold2);font-weight:700;font-size:12px}
.hero-photo-label strong{font-size:9px;letter-spacing:1.8px}
.hero-field-card{position:absolute;z-index:4;left:0;top:34px;width:180px;background:#fff;border:1px solid #e2e7eb;box-shadow:0 18px 40px rgba(8,42,67,.14);padding:8px}
.hero-field-card img{display:block;width:100%;height:145px;object-fit:cover;object-position:center}
.hero-field-card>div{padding:11px 8px 10px;display:flex;flex-direction:column;gap:3px}
.hero-field-card small{font-size:8px;letter-spacing:2px;color:#8795a2;font-weight:700}
.hero-field-card b{font:700 13px/1.1 "Space Grotesk";color:var(--navy)}
.hero-gold-note{position:absolute;z-index:5;right:0;bottom:0;background:var(--gold);color:#fff;padding:20px 24px;font-size:10px;line-height:1.55;letter-spacing:2px;font-weight:700;box-shadow:0 14px 30px rgba(8,42,67,.12)}

.about-side{position:relative!important;background:#fff!important;border:0!important;padding:0!important;min-height:500px!important;height:500px!important;overflow:visible!important;display:flex!important;flex-direction:column!important;gap:16px!important}
.about-photo-main{height:365px;width:100%;overflow:hidden;background:#edf1f3}
.about-photo-main img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.about-photo-footer{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:stretch;height:119px}
.about-photo-small{overflow:hidden;border:1px solid #e1e6ea;background:#fff}
.about-photo-small img{display:block;width:100%;height:100%;object-fit:cover}
.about-photo-text{border-left:3px solid var(--gold);padding:15px 18px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#f7f9fa}
.about-photo-text span{font-size:10px;color:var(--gold);font-weight:700}
.about-photo-text strong{font:700 15px/1.25 "Space Grotesk";color:var(--navy);letter-spacing:1px}

@media(max-width:850px){
  .hero-visual.clean-hero{height:365px;width:100%;padding:0 10px 18px 34px}
  .hero-photo-card{inset:0 10px 18px 34px}
  .hero-photo-label{left:16px;right:16px;bottom:14px;gap:8px}
  .hero-photo-label strong{font-size:7px;letter-spacing:1.2px}
  .hero-field-card{left:0;top:24px;width:125px;padding:5px}
  .hero-field-card img{height:98px}
  .hero-field-card>div{padding:7px 5px 6px;gap:2px}
  .hero-field-card small{font-size:6px;letter-spacing:1.2px}
  .hero-field-card b{font-size:10px}
  .hero-gold-note{right:0;bottom:0;padding:13px 15px;font-size:7px;letter-spacing:1.3px}

  .about-side{height:auto!important;min-height:0!important;gap:12px!important}
  .about-photo-main{height:275px}
  .about-photo-footer{height:92px;grid-template-columns:105px 1fr;gap:10px}
  .about-photo-text{padding:10px 12px;gap:5px}
  .about-photo-text strong{font-size:11px;letter-spacing:.7px}
}


/* =====================================================
   SOBRE CIVLAB — V9
   Editorial, limpio y responsive
===================================================== */
.about-civlab {
  width: 100%;
  background: #fff;
  padding: 110px 6vw;
  overflow: hidden;
}

.about-civlab-container {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(45px, 7vw, 90px);
  align-items: center;
}

.about-civlab-visual {
  min-width: 0;
}

.about-civlab-image-wrap {
  width: 100%;
  overflow: hidden;
  background: #eef1f3;
  box-shadow: 0 24px 60px rgba(8,42,67,.10);
}

.about-civlab-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

.about-civlab-image-wrap:hover .about-civlab-image {
  transform: scale(1.015);
}

.about-civlab-content {
  min-width: 0;
}

.about-civlab-content .eyebrow {
  margin-bottom: 18px;
}

.about-civlab-content h2 {
  margin: 0 0 30px;
  color: var(--navy);
  font: 700 clamp(42px, 4.5vw, 68px)/.99 "Space Grotesk";
  letter-spacing: -3.2px;
}

.about-civlab-content h2 em {
  color: var(--gold);
  font-style: normal;
}

.about-civlab-content p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.about-civlab-content .about-civlab-intro {
  color: #3f566a;
  font-size: 19px;
  line-height: 1.65;
}

.about-civlab-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 46px;
  padding-top: 27px;
  border-top: 1px solid var(--line);
}

.about-civlab-value {
  min-width: 0;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-civlab-value:first-child {
  padding-left: 0;
}

.about-civlab-value:last-child {
  padding-right: 0;
  border-right: 0;
}

.about-civlab-value b {
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 13px;
}

.about-civlab-icon {
  width: 45px;
  height: 45px;
  display: block;
  color: var(--navy);
  margin-bottom: 13px;
}

.about-civlab-icon svg {
  width: 100%;
  height: 100%;
}

.about-civlab-value > span:last-child {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

@media (max-width: 850px) {
  .about-civlab {
    padding: 80px 6vw;
  }

  .about-civlab-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-civlab-content h2 {
    font-size: clamp(42px, 9vw, 60px);
  }
}

@media (max-width: 600px) {
  .about-civlab {
    padding: 65px 18px;
  }

  .about-civlab-container {
    gap: 38px;
  }

  .about-civlab-image {
    aspect-ratio: 4 / 5;
  }

  .about-civlab-content h2 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .about-civlab-content .about-civlab-intro {
    font-size: 17px;
  }

  .about-civlab-content p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.7;
  }

  .about-civlab-values {
    grid-template-columns: 1fr;
    margin-top: 34px;
    padding-top: 0;
    border-top: 0;
  }

  .about-civlab-value,
  .about-civlab-value:first-child,
  .about-civlab-value:last-child {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .about-civlab-value:last-child {
    border-bottom: 0;
  }
}

/* PORTAFOLIO CIVLAB V11 */
.portfolio{width:min(1400px,92%);margin:0 auto;padding:110px 0 90px;background:#fff}
.portfolio-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:70px;align-items:end;margin-bottom:34px}
.portfolio-head .section-eyebrow{display:block;margin-bottom:16px;color:#C59632;font-size:13px;font-weight:700;letter-spacing:4px}
.portfolio-head h2{margin:0;color:#082A43;font-size:clamp(42px,5.2vw,68px);line-height:1;letter-spacing:-2.5px}
.portfolio-head h2 span{color:#C59632}
.portfolio-head>p{margin:0;padding-left:28px;border-left:1px solid #D9E0E6;color:#6A7B8D;font-size:17px;line-height:1.6}
.portfolio-filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.portfolio-filter{border:1px solid #DCE3E9;background:#fff;color:#082A43;border-radius:999px;padding:12px 26px;font:inherit;font-size:15px;cursor:pointer;transition:.2s ease}
.portfolio-filter:hover{border-color:#C59632}
.portfolio-filter.active{background:#082A43;border-color:#082A43;color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.portfolio-card{min-width:0;background:#fff;border:1px solid #E4E9ED;overflow:hidden;box-shadow:0 8px 24px rgba(8,42,67,.045);transition:transform .25s ease,box-shadow .25s ease}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(8,42,67,.10)}
.portfolio-image{aspect-ratio:1.45/1;overflow:hidden;background:#EEF2F4}
.portfolio-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.portfolio-card:hover .portfolio-image img{transform:scale(1.035)}
.portfolio-info{position:relative;padding:20px 22px 24px;min-height:152px}
.portfolio-info>span{display:block;margin-bottom:11px;color:#082A43;font-size:11px;font-weight:700;letter-spacing:1.3px}
.portfolio-info>span:before{content:"";display:inline-block;width:25px;height:2px;margin:0 10px 3px 0;background:#C59632}
.portfolio-info h3{margin:0 35px 7px 0;color:#082A43;font-size:20px;line-height:1.2}
.portfolio-info p{margin:0;color:#718194;font-size:14px;line-height:1.5}
.portfolio-info b{position:absolute;right:20px;bottom:21px;color:#082A43;font-size:27px;font-weight:400}
.portfolio-more{display:flex;justify-content:center;margin-top:34px}
.btn-outline-gold{display:inline-flex;align-items:center;gap:30px;padding:14px 28px;border:1px solid #C59632;color:#C59632;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.4px;transition:.2s ease}
.btn-outline-gold:hover{background:#C59632;color:#fff}
.btn-outline-gold span{font-size:24px;line-height:.7}
@media(max-width:1100px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-head{grid-template-columns:1fr;gap:24px}.portfolio-head>p{padding-left:0;border-left:0;max-width:700px}}
@media(max-width:600px){.portfolio{width:min(100% - 36px,520px);padding:70px 0}.portfolio-head{gap:20px;margin-bottom:28px}.portfolio-head h2{font-size:43px;letter-spacing:-1.5px}.portfolio-head>p{font-size:15px}.portfolio-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.portfolio-filters::-webkit-scrollbar{display:none}.portfolio-filter{flex:0 0 auto;padding:10px 18px;font-size:13px}.portfolio-grid{grid-template-columns:1fr;gap:16px}.portfolio-info{min-height:145px;padding:18px 19px 22px}}

/* PORTAFOLIO CIVLAB V12 */
.portfolio{width:min(1400px,92%);margin:0 auto;padding:110px 0 90px;background:#fff}
.portfolio-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:70px;align-items:end;margin-bottom:34px}
.portfolio-head .section-eyebrow{display:block;margin-bottom:16px;color:#C59632;font-size:13px;font-weight:700;letter-spacing:4px}
.portfolio-head h2{margin:0;color:#082A43;font-size:clamp(42px,5.2vw,68px);line-height:1;letter-spacing:-2.5px}
.portfolio-head h2 span{color:#C59632}
.portfolio-head>p{margin:0;padding-left:28px;border-left:1px solid #D9E0E6;color:#6A7B8D;font-size:17px;line-height:1.6}
.portfolio-filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.portfolio-filter{border:1px solid #DCE3E9;background:#fff;color:#082A43;border-radius:999px;padding:12px 26px;font:inherit;font-size:15px;cursor:pointer;transition:.2s ease}
.portfolio-filter:hover{border-color:#C59632}
.portfolio-filter.active{background:#082A43;border-color:#082A43;color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.portfolio-card{min-width:0;background:#fff;border:1px solid #E4E9ED;overflow:hidden;box-shadow:0 8px 24px rgba(8,42,67,.045);transition:transform .25s ease,box-shadow .25s ease}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(8,42,67,.10)}
.portfolio-image{aspect-ratio:1.45/1;overflow:hidden;background:#EEF2F4}
.portfolio-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}
.portfolio-card:hover .portfolio-image img{transform:scale(1.035)}
.portfolio-info{position:relative;padding:20px 22px 24px;min-height:152px}
.portfolio-info>span{display:block;margin-bottom:11px;color:#082A43;font-size:10px;font-weight:700;letter-spacing:1.1px}
.portfolio-info>span:before{content:"";display:inline-block;width:25px;height:2px;margin:0 10px 3px 0;background:#C59632}
.portfolio-info h3{margin:0 35px 7px 0;color:#082A43;font-size:20px;line-height:1.2}
.portfolio-info p{margin:0;color:#718194;font-size:14px;line-height:1.5}
.portfolio-detail{position:absolute;right:17px;bottom:15px;border:0;background:none;padding:4px;color:#082A43;font-size:28px;line-height:1;cursor:pointer}
.portfolio-detail:hover{color:#C59632}
.portfolio-more{display:flex;justify-content:center;margin-top:34px}
.btn-outline-gold{display:inline-flex;align-items:center;gap:30px;padding:14px 28px;border:1px solid #C59632;color:#C59632;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.4px}
.btn-outline-gold:hover{background:#C59632;color:#fff}
.btn-outline-gold span{font-size:24px;line-height:.7}
.portfolio-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:24px}
.portfolio-modal.is-open{display:flex}
.portfolio-modal-backdrop{position:absolute;inset:0;background:rgba(6,30,49,.68)}
.portfolio-modal-box{position:relative;z-index:1;width:min(620px,100%);background:#fff;padding:42px;border-top:4px solid #C59632;box-shadow:0 25px 70px rgba(0,0,0,.22)}
.portfolio-modal-box .section-eyebrow{display:block;margin-bottom:12px;color:#C59632;font-size:11px;font-weight:700;letter-spacing:3px}
.portfolio-modal-box h3{margin:0 45px 15px 0;color:#082A43;font-size:30px;line-height:1.1}
.portfolio-modal-box p{margin:0;color:#52677A;font-size:17px;line-height:1.7}
.portfolio-modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#082A43;font-size:32px;cursor:pointer}
@media(max-width:1100px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-head{grid-template-columns:1fr;gap:24px}.portfolio-head>p{padding-left:0;border-left:0;max-width:700px}}
@media(max-width:600px){.portfolio{width:min(100% - 36px,520px);padding:70px 0}.portfolio-head{gap:20px;margin-bottom:28px}.portfolio-head h2{font-size:43px;letter-spacing:-1.5px}.portfolio-head>p{font-size:15px}.portfolio-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.portfolio-filters::-webkit-scrollbar{display:none}.portfolio-filter{flex:0 0 auto;padding:10px 18px;font-size:13px}.portfolio-grid{grid-template-columns:1fr;gap:16px}.portfolio-info{min-height:145px;padding:18px 19px 22px}.portfolio-modal-box{padding:34px 25px}.portfolio-modal-box h3{font-size:25px}}

/* V13: corrected image/service matching */
.portfolio-card .portfolio-detail{font-family:inherit}