:root{
    --navy: #1E1F31;
    --navy-2: #26283F;
    --navy-3: #2E3049;
    --paper: #F6F4EE;
    --paper-2: #EEEAE0;
    --rust: #D62829;
    --rust-2: #B31F20;
    --rust-light: #E85B54;
    --stone: #8A8478;
    --ink: #1B1B1B;
    --line: rgba(255,255,255,0.14);
    --line-dark: rgba(18,24,43,0.12);
    --display: 'Poppins', 'Liberation Sans', sans-serif;
    --body: 'Poppins', 'Liberation Sans', sans-serif;
    --mono: 'Poppins', 'Liberation Sans', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    max-width:1920px;
    margin:0 auto;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  /* ---------- signature ruler motif ---------- */
  .ruler{
    display:flex; align-items:center; gap:0;
    width:100%; height:18px;
    position:relative;
  }
  .ruler-line{flex:1; height:1px; background:currentColor; opacity:.35; position:relative; top:9px;}
  .ruler-ticks{position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-end;}
  .ruler-ticks span{width:1px; height:9px; background:currentColor; opacity:.35;}
  .ruler-label{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    opacity:.55; white-space:nowrap; padding:0 14px;
  }

  /* ---------- header ---------- */
  header{
    position:absolute; top:0; left:0; right:0; z-index:100;
    background:transparent;
    padding:28px 64px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid transparent;
    transition:background .3s ease, padding .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  header.is-sticky{
    position:fixed;
    background:#fff;
    padding:18px 64px;
    border-bottom:1px solid var(--line-dark);
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
  }
  .logo{display:flex; align-items:center; gap:12px;}
  .logo img{transition:opacity .2s ease;}
  .logo .logo-color{display:none;}
  .logo .logo-white{display:block;}
  header.is-sticky .logo .logo-color{display:block;}
  header.is-sticky .logo .logo-white{display:none;}
  .logo-mark{width:40px; height:40px;}
  .logo-text{color:#fff; font-family:var(--display); font-size:24px; letter-spacing:.02em; line-height:1.05;}
  .logo-text small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--rust-light); font-weight:400; margin-top:3px;}
  nav{position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:40px;}
  nav a{color:#EDEAE2; font-size:15px; letter-spacing:.03em; font-weight:400; opacity:.85; padding-bottom:4px; border-bottom:1px solid transparent; transition:color .3s ease;}
  .nav-contact-mobile{display:none;}
  nav a:hover{opacity:1; border-bottom-color:var(--rust-light);}
  nav a.is-active{opacity:1; border-bottom-color:var(--rust);}
  header.is-sticky nav a{color:var(--navy); opacity:.75;}
  header.is-sticky nav a:hover{opacity:1;}
  header.is-sticky nav a.is-active{opacity:1; border-bottom-color:var(--rust);}
  .nav-toggle{display:none;}
  .nav-toggle span{background:#fff; transition:background .3s ease;}
  header.is-sticky .nav-toggle span{background:var(--navy);}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--rust); color:#fff; font-family:var(--body); font-weight:700;
    font-size:15px; letter-spacing:.02em; padding:13px 24px; border-radius:2px;
  }
  .btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff;}

  /* ---------- hero ---------- */
  .hero{
    position:relative; background:var(--navy); color:#fff; overflow:hidden;
    padding:190px 64px 0 64px;
  }
  .hero-bg-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(18,20,35,0.92) 0%, rgba(18,20,35,0.82) 45%, rgba(18,20,35,0.55) 100%);
  }
  .blueprint-grid{
    position:absolute; inset:0; z-index:1;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.2;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
  }
  .hero-inner{position:relative; z-index:2; display:flex; gap:60px; align-items:center;}
  .hero-inner--single{display:block;}
  .hero-copy{flex:0 0 620px; max-width:900px;}
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--rust-light); margin-bottom:28px; display:flex; align-items:center; gap:12px;
  }
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--rust-light);}
  h1.hero-h{
    font-family:var(--display); font-weight:700; font-size:66px; line-height:1.04;
    letter-spacing:.005em; margin-bottom:32px;
  }
  h1.hero-h em{font-style:normal; color:var(--rust-light);}
  .hero-sub{font-size:18px; line-height:1.7; color:#CBD0DE; max-width:520px; margin-bottom:46px;}
  .hero-ctas{display:flex; gap:16px; margin-bottom:88px;}

  .hero-ruler{position:relative; z-index:2; color:#fff; padding:16px 0; border-top:1px solid var(--line); display:flex; align-items:center;}

  /* ---------- mission ---------- */
  .mission{
    background:var(--paper); padding:150px 64px; display:flex; gap:100px; align-items:center;
  }
  .mission--approach{padding:100px 64px;}
  .mission-copy{flex:0 0 520px;}
  .section-label{
    font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--rust);
    margin-bottom:18px; display:flex; align-items:center; gap:12px;
  }
  .section-label::before{content:''; width:26px; height:1px; background:var(--rust);}
  h2.mission-h{
    font-family:var(--display); font-weight:700; font-size:38px; line-height:1.15; margin-bottom:32px; color:var(--navy);
  }
  .mission-copy p{font-size:16px; line-height:1.75; color:#3A3A3A; margin-bottom:16px; max-width:480px;}
  .mission-art{flex:1; display:flex; justify-content:center;}
  .mission-photo{width:100%; max-width:420px; aspect-ratio:844/1024; object-fit:cover; background:var(--paper-2); border:1px solid var(--line-dark);}

  /* ---------- capabilities (two pillar) ---------- */
  .capabilities{background:var(--navy); color:#fff; padding:150px 64px;}
  .cap-head{max-width:640px; margin-bottom:80px;}
  .cap-head h2{font-family:var(--display); font-size:38px; font-weight:700; line-height:1.15; margin-bottom:16px;}
  .cap-head p{color:#B7BDCC; font-size:16px; line-height:1.6;}
  .pillars{display:flex; gap:40px;}
  .pillar{
    flex:1; background:var(--navy-2); border:1px solid var(--line); padding:38px 36px 34px;
    border-top:3px solid var(--rust);
  }
  .pillar-index{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--rust-light); margin-bottom:10px;}
  .pillar h3{font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:8px;}
  .pillar-desc{font-size:16px; color:#A9AFC0; line-height:1.6; margin-bottom:30px; max-width:380px;}
  .cap-flex{display:flex; align-items:center; gap:60px;}
  .cap-orbit{flex:1; display:flex; align-items:center; justify-content:flex-end; max-width:500px; padding-right:20px;}
  /* ---------- shared fill-sweep button (hover-triggered) ---------- */
  .fill-btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border:1.5px solid var(--rust);
    overflow:hidden; color:var(--rust); font-weight:700; font-size:14px;
    letter-spacing:.1em; text-transform:uppercase;
  }
  .fb-fill{
    position:absolute; left:0; top:0; bottom:0; width:0; background:var(--rust);
    transition:width .4s cubic-bezier(.65,0,.35,1); z-index:0;
  }
  .fill-btn:hover .fb-fill{width:100%;}
  .fb-arrow, .fb-text{position:relative; z-index:1; transition:color .3s ease;}
  .fb-arrow{transition:color .3s ease, transform .4s cubic-bezier(.65,0,.35,1);}
  .fill-btn:hover .fb-arrow{transform:translateX(6px);}
  .fill-btn:hover .fb-arrow, .fill-btn:hover .fb-text{color:#fff;}
  /* variant for use on the dark navy capabilities section */
  .fill-btn.on-dark{border-color:var(--rust-light); color:var(--rust-light);}
  .fill-btn.on-dark .fb-fill{background:var(--rust-light);}
  .fill-btn.on-dark:hover .fb-arrow, .fill-btn.on-dark:hover .fb-text{color:var(--navy);}

  /* ---------- precision at every stage (contained, not full width) ---------- */
  .precision{background:var(--paper); padding:100px 64px;}
  .precision-inner{max-width:1180px; margin:0 auto; background:var(--navy);}
  .precision-top{display:grid; grid-template-columns:1fr 3fr;}
  .precision-copy{padding:56px 40px; color:#fff;}
  .precision-copy h2{font-family:var(--display); font-weight:700; font-size:38px; line-height:1.15; margin-bottom:18px;}
  .precision-lead{font-weight:600; color:#fff; margin-bottom:10px; font-size:16px;}
  .precision-copy p{font-size:16px; line-height:1.7; color:#B7BDCC;}
  .precision-visual{position:relative; min-height:340px;}
  .precision-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .precision-visual::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(30,31,49,0.32) 0%, rgba(30,31,49,0.12) 60%);
    pointer-events:none;
  }
  .precision-stats{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border-top:1px solid rgba(255,255,255,.15);}
  .pstat{padding:26px 20px; border-right:1px solid rgba(255,255,255,.15); background:var(--navy-2); text-align:center;}
  .pstat:last-child{border-right:none;}
  .pstat.hi{background:var(--rust);}
  .pstat-num{font-family:var(--display); font-size:36px; font-weight:700; color:#fff; line-height:1;}
  .pstat-label{font-family:var(--body); font-size:12px; letter-spacing:.03em; color:rgba(255,255,255,.85); margin-top:8px; line-height:1.3;}

  /* ---------- craftsmen ---------- */
  .craft{
    background:var(--paper-2); padding:160px 64px; text-align:center; position:relative; overflow:hidden;
  }
  .craft-strata{position:absolute; left:0; right:0; top:0; height:100%; opacity:.5; pointer-events:none;}
  .craft-inner{position:relative; max-width:760px; margin:0 auto;}
  .craft h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); line-height:1.2; margin-bottom:24px;}
  .craft p{font-size:16px; line-height:1.75; color:#3A3A3A; margin-bottom:14px;}

  /* ---------- projects ---------- */
  .projects{background:var(--paper); padding:150px 64px;}
  .proj-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px;}
  .proj-head h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy);}
  .proj-head p{font-size:15px; color:var(--stone); max-width:320px; text-align:right; line-height:1.5;}
  .proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .proj-card{border:1px solid var(--line-dark);}
  .proj-thumb{
    height:230px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .proj-thumb{background:var(--navy-2); cursor:zoom-in;}
  .proj-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
  .proj-card .proj-meta{padding:20px 22px; background:#fff; border-top:1px solid var(--line-dark);}
  .proj-tag{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--rust); margin-bottom:8px;}
  .proj-card h4{font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:5px;}
  .proj-card .loc{font-size:14px; color:var(--stone);}
  .proj-thumb--tall{height:320px;}
  .proj-carousel-controls{display:none;}

  /* ---------- lightbox (Featured Projects / Portfolio) ---------- */
  .lightbox{
    position:fixed; inset:0; background:rgba(18,20,35,0.94); z-index:1000;
    display:none; align-items:center; justify-content:center; padding:60px;
    cursor:zoom-out;
  }
  .lightbox.is-open{display:flex;}
  .lightbox img{max-width:88vw; max-height:86vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.5);}
  .lightbox-close{
    position:absolute; top:28px; right:36px; width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); color:#fff;
    font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .lightbox-close:hover{background:var(--rust); border-color:var(--rust);}

  /* ---------- cta banner ---------- */
  .cta-banner-wrap{background:var(--paper); padding:0 64px 100px;}
  .cta-banner{
    max-width:1180px; margin:0 auto; background:var(--navy); padding:56px 60px;
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    border:1px solid var(--rust);
  }
  .cta-banner h3{font-family:var(--display); font-size:22px; color:#fff; font-weight:700; margin-bottom:8px;}
  .cta-banner p{color:#B7BDCC; font-size:16px; max-width:460px;}

  /* ---------- footer ---------- */
  footer{background:var(--paper-2); color:#5B5748; padding:96px 64px 0; border-top:1px solid var(--line-dark);}
  .foot-grid{display:flex; justify-content:space-between; gap:80px; padding-bottom:72px;}
  .foot-brand{flex:0 0 320px;}
  .foot-brand .logo{margin-bottom:18px;}
  .foot-brand p{font-size:15px; line-height:1.6; color:#847F6E;}
  .foot-col h5{font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); margin-bottom:20px;}
  .foot-col a{display:block; font-size:15px; color:#6B6754; margin-bottom:12px;}
  .foot-col .num{color:var(--navy); font-weight:600; font-family:var(--mono); font-size:15px;}
  .copyright{
    border-top:1px solid var(--line-dark); padding:22px 0; text-align:center;
    font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:#8A8576;
  }
  .portal-link{color:#8A8576; text-decoration:underline; text-underline-offset:2px;}
  .portal-link:hover{color:var(--rust);}

/* ===== Sub-page components ===== */
/* ---------- generic page hero (shorter than home) ---------- */
  .page-hero{
    position:relative; background:var(--navy); color:#fff; overflow:hidden;
    padding:150px 64px 80px; min-height:520px; display:flex; align-items:flex-start;
  }
  .page-hero-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  .page-hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(30,31,49,0.5) 0%, rgba(30,31,49,0.68) 100%);
  }
  .page-hero-inner{position:relative; z-index:2; max-width:780px;}
  h1.page-h{font-family:var(--display); font-weight:700; font-size:56px; line-height:1.05; margin-bottom:20px;}
  h1.page-h--tan{color:rgba(196,191,165,0.78); mix-blend-mode:normal;}
  .page-sub{font-size:15.5px; line-height:1.65; color:#CBD0DE; max-width:560px;}

  /* ---------- value pillar grid (approach page) ---------- */
  .value-section{background:var(--paper); padding:140px 64px;}
  .value-head{max-width:680px; margin-bottom:72px;}
  .value-head h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); margin-bottom:16px; line-height:1.15;}
  .value-head p{font-size:15px; line-height:1.7; color:#3A3A3A;}
  .value-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
  .impact-strip{max-width:1100px; margin:56px auto 0; padding:36px 44px; background:var(--navy); border-left:3px solid var(--rust);}
  .impact-head{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust-light); margin-bottom:20px;}
  .impact-row{display:flex; flex-wrap:wrap; gap:14px 40px;}
  .impact-item{flex:1 1 200px; color:#EDEAE2; font-size:14.5px; font-weight:600; line-height:1.4; position:relative; padding-left:18px;}
  .impact-item::before{content:''; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--rust-light); border-radius:50%;}
  .value-card{background:var(--paper); padding:44px 38px;}
  .value-card .vc-ic{width:36px; height:36px; margin-bottom:18px;}
  .value-card h3{font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:10px;}
  .value-card p{font-size:16px; line-height:1.65; color:#4A4A4A;}

  /* ---------- promise banner ---------- */
  .promise{background:var(--navy-2); padding:100px 64px; text-align:center;}
  .promise p{max-width:680px; margin:0 auto; font-family:var(--display); font-size:24px; line-height:1.5; color:#fff; font-weight:400;}
  .promise .sig{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust-light);}

  /* ---------- services page ---------- */
  .svc-intro{background:var(--paper); padding:130px 64px 50px;}
  .svc-intro-inner{max-width:820px;}
  .svc-intro h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); margin-bottom:18px; line-height:1.15;}
  .svc-intro p{font-size:16px; line-height:1.75; color:#3A3A3A;}
  .svc-grid{background:var(--paper); padding:50px 64px 140px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px;}
  .svc-card{border:1px solid var(--line-dark); background:#fff; padding:38px 32px; display:flex; flex-direction:column;}
  .svc-num{font-family:var(--mono); font-size:12px; color:var(--rust); letter-spacing:.14em; margin-bottom:14px;}
  .svc-card .svc-ic{width:34px; height:34px; margin-bottom:16px;}
  .svc-card h3{font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.25;}
  .svc-card p{font-size:12.5px; line-height:1.65; color:#4A4A4A; flex:1;}

  /* ---------- form mock ---------- */
  .form-section{background:var(--paper); padding:130px 64px; display:flex; gap:64px;}
  .form-main{flex:1.4;}
  .form-main h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); margin-bottom:40px;}
  .form-box{background:#EFECE4; padding:46px; border:1px solid var(--line-dark);}
  .f-row{display:flex; gap:24px; margin-bottom:28px;}
  .f-group{flex:1;}
  .f-group label{display:block; font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; letter-spacing:.02em;}
  .f-group .fake-input{background:#fff; border:1px solid var(--line-dark); height:44px; border-radius:1px;}
  .f-group .fake-textarea{background:#fff; border:1px solid var(--line-dark); height:110px; border-radius:1px;}
  .real-input, .real-textarea{
    width:100%; background:#fff; border:1px solid var(--line-dark); border-radius:1px;
    font-family:var(--body); font-size:15px; color:var(--ink); padding:0 14px;
  }
  .real-input{height:44px;}
  .real-textarea{padding:12px 14px; resize:vertical; min-height:110px;}
  .real-input:focus, .real-textarea:focus, .real-file:focus{outline:2px solid var(--rust); outline-offset:1px;}
  .real-file{width:100%; font-family:var(--body); font-size:14px; color:var(--stone); background:#fff; border:1px solid var(--line-dark); padding:10px 14px;}
  .form-alert{padding:14px 18px; margin-bottom:24px; font-size:14px; font-weight:600; border-radius:2px;}
  .form-alert.is-success{background:#E6F4EA; color:#1E7C34; border:1px solid #B7E1C2;}
  .form-alert.is-error{background:#FCEAEA; color:#B3261E; border:1px solid #F2B8B5;}
  .f-group .fake-file{display:inline-flex; align-items:center; gap:12px;}
  .f-group .fake-file .fbtn{background:var(--navy); color:#fff; font-size:12px; font-weight:700; padding:11px 18px;}
  .f-group .fake-file .fname{font-size:14px; color:var(--stone);}
  .f-check{display:flex; align-items:center; gap:10px; margin-bottom:26px; font-size:12.5px; color:#3A3A3A;}
  .f-check .box{width:16px; height:16px; border:1px solid var(--stone);}
  .form-side{flex:1; background:var(--navy); color:#fff; padding:48px 40px; align-self:flex-start;}
  .form-side h3{font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:10px; line-height:1.2;}
  .form-side .fs-sub{font-size:14px; color:#B7BDCC; margin-bottom:28px;}
  .fs-item{display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line);}
  .fs-item .fs-ic{width:30px; height:30px; flex:0 0 30px;}
  .fs-item h4{font-size:14px; font-weight:700; margin-bottom:6px;}
  .fs-item p, .fs-item a{display:block; font-size:14px; color:#CBD0DE;}

  /* ---------- split section (image + text pairs) ---------- */
  .split{display:flex; align-items:center; gap:64px; padding:100px 64px; max-width:1400px; margin:0 auto;}
  .split-media{flex:0 0 44%;}
  .split-media img{width:100%; height:auto; aspect-ratio:7/5; object-fit:cover; border:1px solid var(--line-dark); display:block;}
  .split-video{width:100%; height:auto; aspect-ratio:7/5; object-fit:cover; border:1px solid var(--line-dark); display:block;}
  .split-copy{flex:1;}
  .split-copy h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); margin-bottom:20px; line-height:1.2;}
  .split-copy p{font-size:16px; line-height:1.8; color:#3A3A3A; margin-bottom:14px;}

  /* ---------- sustainability (dark bg photo + white card) ---------- */
  .sustain{position:relative; padding:120px 64px; overflow:hidden; background:linear-gradient(150deg, #1B3A2E 0%, #234A3A 55%, #2C5744 100%);}
  .sustain-card{position:relative; z-index:2; max-width:880px; margin:0 auto; background:var(--paper); padding:64px 60px; box-shadow:0 30px 70px rgba(0,0,0,0.35);}
  .sustain-card h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--rust); margin-bottom:22px; line-height:1.2;}
  .sustain-card h3{font-family:var(--display); font-size:22px; font-weight:700; color:var(--rust); margin-top:34px; margin-bottom:14px;}
  .sustain-card p{font-size:16px; line-height:1.8; color:#3A3A3A; margin-bottom:14px;}
  .sustain-card ul{margin:0 0 14px 24px; padding:0;}
  .sustain-card li{font-size:16px; line-height:1.75; color:#3A3A3A; margin-bottom:9px;}

  /* ---------- building communities (long-form) ---------- */
  .community{max-width:900px; margin:0 auto; padding:120px 64px;}
  .community h2{font-family:var(--display); font-size:38px; font-weight:700; color:var(--rust); margin-bottom:22px; line-height:1.2;}
  .community h3{font-family:var(--display); font-size:22px; font-weight:700; color:var(--rust); margin-top:38px; margin-bottom:14px;}
  .community p{font-size:16px; line-height:1.8; color:#3A3A3A; margin-bottom:14px;}
  .community ul{margin:0 0 14px 24px; padding:0;}
  .community li{font-size:16px; line-height:1.75; color:#3A3A3A; margin-bottom:11px;}
  .community-close{font-weight:600; color:var(--navy); font-size:16px; margin-top:22px;}

  /* ---------- split section extra media (thumbnails under main image/video) ---------- */
  .split-main{width:100%; height:auto; aspect-ratio:7/5; object-fit:cover; border:1px solid var(--line-dark); display:block;}
  .split-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
  .split-thumbs img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line-dark); display:block;}

  /* ---------- portfolio filter bar ---------- */
  .filter-bar{display:flex; gap:12px; margin:-20px 0 40px;}
  .filter-btn{
    font-family:var(--body); font-size:14px; font-weight:600; letter-spacing:.02em;
    padding:10px 22px; border:1.5px solid var(--line-dark); background:transparent; color:var(--stone);
    cursor:pointer; transition:all .2s ease;
  }
  .filter-btn.is-active, .filter-btn:hover{background:var(--rust); border-color:var(--rust); color:#fff;}
  .proj-card{transition:opacity .25s ease, transform .25s ease;}
  .proj-card.is-hidden{display:none;}

  /* ---------- CTA: full-bleed video with white inset card (matches original) ---------- */
  .cta-video-section{
    position:relative; overflow:hidden; min-height:440px;
    display:flex; align-items:center; justify-content:center; padding:80px 64px;
  }
  .cta-video-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .cta-video-dim{position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(30,31,49,0.5) 0%, rgba(30,31,49,0.72) 100%);}
  .cta-white-card{
    position:relative; z-index:2; background:#fff; width:100%; max-width:820px;
    padding:56px 72px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,0.3);
  }
  .cta-white-card h3{font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:16px; line-height:1.25;}
  .cta-white-card p{font-size:15px; line-height:1.75; color:#4A4A4A; margin-bottom:30px; max-width:560px; margin-left:auto; margin-right:auto;}


  /* ---------- values page: statement rows ---------- */
  .statement-section{max-width:1200px; margin:0 auto; padding:100px 64px;}
  .statement-row{display:flex; gap:60px; padding:44px 0; border-bottom:1px solid var(--line-dark);}
  .statement-row:first-child{padding-top:0;}
  .statement-row:last-child{border-bottom:none;}
  .statement-label{flex:0 0 340px; font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy); line-height:1.15;}
  .statement-body{flex:1; padding-top:6px;}
  .statement-body p{font-size:16px; line-height:1.8; color:#4A4A4A; margin-bottom:14px;}
  .statement-body p:last-child{margin-bottom:0;}
  .statement-body ul{margin:0; padding:0 0 0 20px;}
  .statement-body li{font-size:16px; line-height:1.75; color:#4A4A4A; margin-bottom:10px;}
  .statement-body li:last-child{margin-bottom:0;}
  .statement-body li strong{color:var(--navy);}

/* ==================== RESPONSIVE (always loaded last — do not move above other CSS) ==================== */

  @media (max-width: 980px){
    /* Defensive fix: flex/grid children default to min-width:auto, which uses their
       text's natural width as a floor — with a wider font (Poppins, not loaded in
       testing) this can silently force the whole row wider than the screen even
       when every explicit width rule looks correct. Force them to actually respect
       the container instead. */
    *{min-width:0;}
    body{overflow-wrap:break-word; word-break:break-word;}
    img, video, svg{max-width:100%; height:auto;}

    /* Mobile dropdown panel is always navy — nav text must stay light regardless of sticky state */
    header.is-sticky nav a{color:#EDEAE2; opacity:.85;}
    header.is-sticky nav a:hover, header.is-sticky nav a.is-active{opacity:1;}

    header{padding:20px 24px;}
    header.is-sticky{padding:13px 24px;}
    .logo img{height:58px !important;}
    nav{position:static; transform:none; display:none; flex-direction:column; align-items:flex-start; gap:18px;
        position:fixed; top:0; right:0; height:100vh; width:min(260px, 80vw); background:var(--navy); padding:100px 32px 32px; z-index:99; overflow-y:auto;}
    nav.is-open{display:flex;}
    .nav-toggle{
      display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:26px; height:20px;
      background:none; border:none; cursor:pointer; z-index:101; flex:0 0 26px; position:relative;
    }
    .nav-toggle span{display:block; width:100%; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease; position:relative; z-index:2;}
    .nav-toggle.is-active{
      background:var(--rust); width:38px; height:38px; border-radius:50%;
      margin:-9px -6px -9px 0;
    }
    .nav-toggle.is-active span{background:#fff;}
    header.is-sticky .nav-toggle.is-active span{background:#fff;}
    .nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-toggle.is-active span:nth-child(2){opacity:0;}
    .nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .btn{padding:11px 18px; font-size:13px;}
    header > a.btn{display:none;}
    .nav-contact-mobile{
      display:block; margin-top:14px; padding-top:18px; border-top:1px solid var(--line);
      color:var(--rust-light) !important; font-weight:700;
    }

    .hero{padding:100px 24px 0;}
    h1.hero-h{font-size:38px;}
    .hero-sub{font-size:15px;}
    .hero-copy{flex-basis:auto; max-width:100%;}
    .hero-inner{flex-direction:column; align-items:flex-start;}
    .hero-ctas{flex-wrap:wrap; margin-bottom:56px;}
    .hero-ruler{flex-wrap:wrap; gap:10px;}
    .ruler-label{padding:0;}

    .mission{padding:64px 24px; flex-direction:column; gap:32px;}
    .mission--approach{padding:64px 24px;}
    .mission-copy{flex-basis:auto;}
    .mission-photo{max-width:100%;}

    .svc-intro{padding:64px 24px 32px;}

    .capabilities{padding:64px 24px;}
    .cap-flex{flex-direction:column; align-items:flex-start; gap:32px;}
    .cap-orbit{max-width:100%; width:100%; justify-content:center; padding-right:0;}

    .precision{padding:48px 24px;}
    .precision-top{grid-template-columns:1fr;}
    .precision-copy{padding:32px 24px;}
    .precision-visual{min-height:240px;}

    .craft{padding:64px 24px;}
    .craft h2{font-size:28px;}
    .craft p{font-size:15px;}

    #portfolioGrid{grid-template-columns:1fr 1fr; gap:16px;}

    /* Featured Projects: 2-row horizontal carousel on mobile, Portfolio untouched */
    #featuredProjectsGrid{
      display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:repeat(2, 150px);
      grid-auto-columns:76vw; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch; padding-bottom:6px;
      scrollbar-width:none;
    }
    #featuredProjectsGrid::-webkit-scrollbar{display:none;}
    #featuredProjectsGrid .proj-card{scroll-snap-align:start;}
    #featuredProjectsGrid .proj-thumb--tall{height:100%;}
    .proj-carousel-controls{display:flex; justify-content:center; gap:16px; margin-top:20px;}
    .proj-arrow{
      width:44px; height:44px; border-radius:50%; border:1px solid var(--line-dark);
      background:#fff; color:var(--navy); font-size:18px; display:flex; align-items:center;
      justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease;
    }
    .proj-arrow:hover, .proj-arrow:active{background:var(--rust); color:#fff; border-color:var(--rust);}
    .projects{padding:64px 24px;}
    .proj-head{flex-direction:column; align-items:flex-start; gap:12px;}
    .proj-head p{text-align:left; max-width:100%;}

    .cta-banner-wrap{padding:0 24px 48px;}
    .cta-banner{flex-direction:column; align-items:flex-start; gap:20px; padding:32px 24px;}
    .cta-white-card{padding:36px 28px;}

    footer{padding:56px 24px 0;}
    .foot-grid{flex-direction:column; gap:32px;}
    .foot-brand{flex-basis:auto;}

    .value-section{padding:64px 24px;}
    .value-grid{grid-template-columns:1fr;}
    .impact-strip{padding:24px 20px; margin-top:32px;}
    .impact-row{flex-direction:column; gap:10px;}
    .impact-item{flex:none; width:100%;}
    .svc-grid{grid-template-columns:1fr 1fr; padding:32px 24px 64px; gap:20px;}
    .pillars{flex-direction:column;}
    .filter-bar{flex-wrap:wrap; margin-top:0;}
    .form-section{flex-direction:column; padding:48px 24px; gap:32px;}
    .f-row{flex-direction:column; gap:16px;}
    .form-side{padding:32px 24px;}

    .split{flex-direction:column; padding:48px 24px; gap:24px; border-top:1px solid var(--line-dark);}
    .split:first-of-type{border-top:none;}
    .split-copy{order:1;}
    .split-media{order:2;}
    .split-media{flex-basis:auto; width:100%;}
    .sustain{padding:48px 24px;}
    .sustain-card{padding:32px 24px;}
    .sustain-card h2{font-size:26px;}
    .community{padding:48px 24px;}
    .promise{padding:48px 24px;}
    .cta-video-section{padding:56px 24px; min-height:auto;}
    .cta-white-card{padding:36px 24px;}
    .community h2{font-size:28px;}

    .statement-section{padding:48px 24px;}
    .statement-row{flex-direction:column; gap:14px; padding:28px 0;}
    .statement-label{flex-basis:auto; font-size:24px;}

    .page-hero{padding:120px 24px 60px; min-height:auto;}
    h1.page-h{font-size:36px;}
  }

  @media (max-width: 640px){
    h1.hero-h{font-size:32px;}
    .mission-h, .value-head h2, .cap-head h2, .svc-intro h2, .craft h2, .split-copy h2, .sustain-card h2, .community h2, .form-main h2, .proj-head h2{font-size:24px;}
    h1.page-h{font-size:30px;}
    .page-sub{font-size:14px;}
    .eyebrow{font-size:10px; letter-spacing:.2em;}

    .precision-stats{grid-template-columns:1fr 1fr;}
    .precision-visual{min-height:200px;}
    .pstat-num{font-size:26px;}

    #portfolioGrid{grid-template-columns:1fr;}
    .svc-grid{grid-template-columns:1fr;}

    .value-card{padding:28px 22px;}
    .svc-card{padding:26px 22px;}

    .sector-item{padding:18px 0;}

    .fill-btn{padding:12px 20px; font-size:12px;}

    .f-group .fake-input{height:40px;}
    .f-group .fake-textarea{height:90px;}

    .cta-white-card h3{font-size:22px;}
  }

  @media (max-width: 400px){
    h1.hero-h{font-size:27px;}
    h1.page-h{font-size:25px;}
    .btn{padding:10px 16px; font-size:12px;}
    .hero-ctas{gap:10px;}
    .logo img{height:48px !important;}
    .proj-thumb{height:180px;}
    .proj-thumb--tall{height:220px;}
    .statement-label{font-size:21px;}
  }

  /* Universal safety net: nothing should ever force horizontal scroll */
  img, video, svg, iframe{max-width:100%;}
  table{max-width:100%; display:block; overflow-x:auto;}