:root{
    --ink:#161616;          /* near-black, from wordmark */
    --charcoal:#1f1f1f;     /* dark sections */
    --paper:#fbfaf8;        /* clean off-white base */
    --paper-2:#f1efea;      /* subtle panel grey */
    --orange:#ff874c;       /* brand orange (pencil) */
    --orange-deep:#e96c2e;  /* deeper orange for hovers/text on light */
    --wood:#e0b47c;         /* warm pencil wood accent */
    --grey:#6b6b6b;         /* secondary text */
    --line:#dcdad5;         /* hairlines */
    --ink-soft:#4a4a4a;     /* body text */
    --shadow:0 18px 50px -28px rgba(20,20,20,.45);
    --display:'Fraunces',Georgia,'Times New Roman',serif;
    --body:'Archivo',system-ui,sans-serif;
  }
  .amp{font-family:var(--body);font-style:normal;font-weight:400;}
  *{margin:0;padding:0;box-sizing:border-box}
  h1,h2,h3,.brand .word,blockquote{font-optical-sizing:auto}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--charcoal);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--orange);color:var(--paper)}

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(20px,5vw,64px);
    height:74px;
    background:rgba(24,22,18,.94);   /* solid base - always present */
    backdrop-filter:blur(8px);
    box-shadow:0 1px 0 rgba(244,239,230,.1);
    transition:box-shadow .4s ease;
  }
  /* Gradient overlay sits ON TOP of the solid base, only at the very top of the home page.
     When .transparent is removed (on scroll), this fades out to reveal the solid bar beneath.
     Because the solid colour is always on the header itself, there is no flicker. */
  header.nav::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(20,18,15,.85) 0%,rgba(20,18,15,.5) 55%,rgba(20,18,15,0) 100%);
    pointer-events:none;opacity:0;transition:opacity .4s ease;
  }
  header.nav>*{position:relative;z-index:1}
  /* At the very top of the home hero: hide the solid box-shadow, show the gradient */
  header.nav.transparent{box-shadow:none}
  header.nav.transparent::before{opacity:1}
  .brand{
    font-family:var(--body);
    font-weight:700;font-size:1.4rem;letter-spacing:.22em;
    color:#fff;text-decoration:none;cursor:pointer;
    display:flex;align-items:center;gap:12px;line-height:1;
  }
  .brand .logo-mark{height:40px;width:auto;flex:none}
  .brand .brand-text{display:flex;flex-direction:column}
  .brand .word{display:inline-block;padding-bottom:5px;border-bottom:2px solid var(--orange);width:fit-content}
  .brand small{font-family:var(--body);font-weight:400;font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw;display:block}
  nav.links{display:flex;gap:clamp(14px,2.5vw,34px)}
  nav.links a{
    color:#fff;text-decoration:none;font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;cursor:pointer;position:relative;padding:4px 0;opacity:.92;
  }
  nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;transition:width .35s}
  nav.links a:hover::after{width:100%}
  .nav-toggle{display:none}

  /* ---------- PAGE SYSTEM ---------- */
  .page{display:none;animation:fade .6s ease both}
  .page.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:flex-end;
    padding:0 clamp(20px,5vw,64px) clamp(40px,7vw,90px);
    background:linear-gradient(180deg,rgba(18,18,18,.25),rgba(18,18,18,.78)),
      url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=60') center/cover;
    color:var(--paper);
  }
  .hero .tag{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;margin-bottom:22px;opacity:.9}
  .hero h1{
    font-family:var(--display);font-weight:400;
    font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;max-width:16ch;
    text-wrap:balance;
  }
  .hero h1 .h1-sub{
    display:block;margin-top:18px;
    font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.2;font-weight:400;opacity:.92;max-width:24ch;
  }
  .hero h1 em{font-style:italic;color:var(--orange)}
  .hero p{max-width:46ch;margin-top:26px;font-size:1.02rem;opacity:.92}
  .hero .scroll-cue{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(40px,7vw,90px);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;opacity:.8}

  /* ---------- SECTIONS ---------- */
  section{padding:clamp(64px,9vw,130px) clamp(20px,5vw,64px)}
  .eyebrow{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;display:flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--orange)}
  .section-title{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;max-width:18ch;text-wrap:balance}

  .intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;background:var(--paper-2)}
  .intro .lead{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35}
  .intro .lead em{font-style:italic;color:var(--orange-deep)}
  .intro .body p{margin-bottom:16px;color:var(--ink-soft)}

  /* ---------- SERVICES ---------- */
  .services{background:var(--charcoal);color:var(--paper)}
  .services .eyebrow{color:var(--orange)}
  .services .eyebrow::before{background:var(--orange)}
  .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(244,239,230,.16);margin-top:50px;border:1px solid rgba(244,239,230,.16)}
  .svc{background:var(--charcoal);padding:34px 28px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s;border-top:2px solid transparent}
  .svc:hover{background:#2a2a2a;border-top-color:var(--orange)}
  .svc-top{display:flex;align-items:center;justify-content:space-between}
  .svc .num{font-family:var(--display);font-size:.85rem;color:var(--orange);opacity:.85}
  .svc-icon{width:30px;height:30px;stroke:var(--orange);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .4s}
  .svc:hover .svc-icon{transform:translateY(-3px)}
  .svc h3{font-family:var(--display);font-weight:600;font-size:1.4rem;margin-bottom:10px}
  .svc p{font-size:.86rem;opacity:.78}

  /* ---------- ONGOING SCROLL ---------- */
  .ongoing{background:var(--paper)}
  /* Currently on site strip */
  .onsite{background:var(--paper);padding-bottom:0}
  .onsite-head{display:flex;align-items:center;gap:9px}
  .onsite-dot{width:9px;height:9px;border-radius:50%;background:var(--orange-deep);position:relative;flex:none}
  .onsite-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--orange-deep);opacity:.5;animation:onsitePulse 2s ease-out infinite}
  @keyframes onsitePulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}
  .onsite-label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-deep)}
  .onsite-sub{font-size:.9rem;color:var(--ink-soft);margin-top:8px}
  .onsite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:30px}
  .onsite-card{background:var(--paper-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;cursor:pointer;transition:transform .4s,box-shadow .4s;display:flex;flex-direction:column}
  .onsite-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .onsite-card .ph{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;filter:grayscale(1);transition:filter .5s ease}
  .onsite-card:hover .ph{filter:grayscale(0)}
  .onsite-card .badge{position:absolute;top:12px;left:12px;background:var(--orange-deep);color:#fff;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:40px}
  .onsite-card .meta{padding:18px 20px}
  .onsite-card .type{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:7px}
  .onsite-card h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.15;margin-bottom:5px}
  .onsite-card .loc{font-size:.82rem;color:var(--ink-soft)}
  .onsite-card .onsite-note{font-size:.82rem;color:var(--grey);margin-top:10px;line-height:1.45}
  .ongoing-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:44px}
  .scroller{display:flex;gap:26px;overflow-x:auto;padding:8px 4px 30px;scroll-snap-type:x mandatory;cursor:grab}
  .scroller::-webkit-scrollbar{height:6px}
  .scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px}
  .scroller.drag{cursor:grabbing}
  .proj-card{
    flex:0 0 clamp(280px,33vw,420px);scroll-snap-align:start;
    background:var(--paper-2);border:1px solid var(--line);
    overflow:hidden;cursor:pointer;transition:transform .4s,box-shadow .4s;
    display:flex;flex-direction:column;
  }
  .proj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .proj-card .ph{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;filter:grayscale(1);transition:filter .5s ease}
  .proj-card:hover .ph{filter:grayscale(0)}
  .proj-card .status{position:absolute;top:16px;left:16px;background:var(--paper);color:var(--charcoal);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:40px}
  .proj-card .status.progress{background:var(--orange);color:var(--paper)}
  .proj-card .meta{padding:24px 24px 28px}
  .proj-card .type{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:8px}
  .proj-card h3{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.15;margin-bottom:6px}
  .proj-card .loc{font-size:.8rem;color:var(--ink-soft)}
  .drag-hint{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}

  /* ---------- PHILOSOPHY ---------- */
  .philosophy{background:var(--charcoal);color:var(--paper);position:relative}
  .philosophy .eyebrow{color:#dfe2d6}.philosophy .eyebrow::before{background:#dfe2d6}
  .philosophy blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.3;max-width:24ch;margin-top:20px}
  .philosophy blockquote em{font-style:italic;color:var(--orange)}

  /* ---------- STATS ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .stat{background:var(--paper);padding:44px 24px;text-align:center}
  .stat .n{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--orange-deep);line-height:1}
  .stat .l{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-top:12px;color:var(--ink-soft)}

  /* ---------- TEAM ---------- */
  .team-hero{padding-top:clamp(140px,16vw,200px);background:var(--paper-2)}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:54px}
  .member{background:var(--paper);border:1px solid var(--line)}
  .member .ph{aspect-ratio:1/1;background-size:cover;background-position:center top;filter:grayscale(1);transition:filter .5s ease}
  .member:hover .ph{filter:grayscale(0)}
  /* Touch devices: colour when the card scrolls into the middle of the screen */
  .proj-card.in-color .ph,.member.in-color .ph,.onsite-card.in-color .ph{filter:grayscale(0)}
  .member .info{padding:26px}
  .member .role{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
  .member h3{font-family:var(--display);font-weight:600;font-size:1.5rem;margin-bottom:10px}
  .member p{font-size:.85rem;color:var(--ink-soft);margin-bottom:14px}
  .member .quals{font-size:.72rem;letter-spacing:.04em;color:var(--grey);border-top:1px solid var(--line);padding-top:12px}

  /* ---------- PROJECTS PAGE ---------- */
  .projects-hero{padding-top:clamp(140px,16vw,200px);background:var(--paper-2)}
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:48px}
  .filters button{
    font-family:var(--body);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
    background:none;border:1px solid var(--line);color:var(--ink-soft);
    padding:10px 20px;border-radius:40px;cursor:pointer;transition:all .3s;
  }
  .filters button:hover{border-color:var(--orange);color:var(--orange-deep)}
  .filters button.on{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper)}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
  .pgrid .proj-card{flex:none}

  /* ---------- PROJECT DETAIL ---------- */
  .detail-hero{min-height:62vh;display:flex;align-items:flex-end;padding:0 clamp(20px,5vw,64px) clamp(40px,6vw,70px);color:var(--paper);position:relative}
  .detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,22,.2),rgba(28,26,22,.75));z-index:0}
  .detail-hero>*{position:relative;z-index:1}
  .detail-hero .type{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
  .detail-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1;max-width:18ch}
  .back{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--orange-deep);margin-bottom:40px}
  .back:hover{gap:16px;transition:gap .3s}
  .detail-body{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(34px,6vw,80px)}
  .detail-body .narrative p{margin-bottom:18px;color:var(--ink-soft);font-size:1rem}
  .detail-body .narrative h3{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:8px 0 18px}
  .specsheet{background:var(--paper-2);border:1px solid var(--line);padding:30px;height:fit-content;position:sticky;top:104px} /* 74px header + 30px gap */
  .specsheet h4{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--orange);margin-bottom:22px}
  .spec-row{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid var(--line)}
  .spec-row:last-child{border-bottom:0}
  .spec-row .k{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
  .spec-row .v{font-family:var(--display);font-size:1.05rem}
  .detail-img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;margin-top:50px;border:1px solid var(--line)}

  /* ---------- FOOTER ---------- */
  footer{background:var(--charcoal);color:var(--paper);padding:clamp(60px,8vw,100px) clamp(20px,5vw,64px) 40px}
  .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(244,239,230,.18)}
  .foot-top .brand{color:var(--paper)}
  .foot-big{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;max-width:20ch;margin-top:18px}
  footer h5{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-bottom:18px}
  footer ul{list-style:none}footer li{margin-bottom:10px}
  footer a{color:var(--paper);text-decoration:none;opacity:.85;font-size:.9rem;cursor:pointer}
  footer a:hover{opacity:1;color:var(--orange)}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:30px;font-size:.74rem;opacity:.6}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
  .reveal.in{opacity:1;transform:none}

  /* ---------- CONTACT PAGE ---------- */
  .contact-hero{padding-top:clamp(140px,16vw,200px);background:var(--paper-2)}
  .contact-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,6vw,80px);margin-top:50px;align-items:start}
  .contact-info h3{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:0 0 8px}
  .contact-info .block{margin-bottom:30px}
  .contact-info .k{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
  .contact-info a{color:var(--charcoal);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
  .contact-info a:hover{border-color:var(--orange)}
  .contact-form{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
  .field input,.field select,.field textarea{
    width:100%;font-family:var(--body);font-size:.95rem;color:var(--charcoal);
    background:var(--paper-2);border:1px solid var(--line);padding:13px 15px;border-radius:2px;
    transition:border-color .25s,background .25s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:var(--paper)}
  .field textarea{resize:vertical;min-height:130px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .submit-btn{
    font-family:var(--body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
    background:var(--charcoal);color:var(--paper);border:0;padding:16px 34px;border-radius:40px;
    cursor:pointer;transition:background .3s,transform .2s;
  }
  .submit-btn:hover{background:var(--orange-deep);transform:translateY(-2px)}
  .form-note{font-size:.82rem;color:var(--ink-soft);margin-top:16px}
  .form-success{display:none;background:#2f7d54;color:#fff;padding:18px 22px;border-radius:4px;margin-bottom:24px;font-size:.92rem}
  .form-success.show{display:block;animation:fade .5s ease both}
  .form-error{display:none;background:#b23b2e;color:#fff;padding:18px 22px;border-radius:4px;margin-bottom:24px;font-size:.92rem}
  .form-error.show{display:block;animation:fade .5s ease both}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:860px){
    .intro,.detail-body,.contact-wrap{grid-template-columns:1fr}
    #partnersWrap{grid-template-columns:1fr !important}
    .svc-grid,.team-grid,.stats,.pgrid{grid-template-columns:repeat(2,1fr)}
    .foot-top{grid-template-columns:1fr}
    .specsheet{position:static}

  }
  @media(max-width:1180px){
    /* Mobile menu: a panel that drops down directly under the solid bar.
       It shares the bar's dark background and is part of the same fixed header,
       so it can never float behind page content. */
    nav.links{
      position:absolute;top:74px;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:#141210;
      box-shadow:0 16px 30px -18px rgba(0,0,0,.7);
      max-height:0;overflow:hidden;
      transition:max-height .35s ease;
    }
    nav.links.open{max-height:520px}
    nav.links a{
      padding:16px clamp(20px,5vw,64px);
      font-size:.9rem;color:#fff;opacity:1;
      border-top:1px solid rgba(244,239,230,.1);
    }
    nav.links a::after{display:none}     /* drop the desktop underline animation */
    .nav-toggle{display:block;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;z-index:101;line-height:1}
    /* On mobile the bar is always solid so the dropdown matches it */
    header.nav.transparent{background:rgba(24,22,18,.94);box-shadow:0 1px 0 rgba(244,239,230,.1)}
    header.nav.transparent::before{opacity:0}
  }
  @media(max-width:560px){.svc-grid,.team-grid,.stats,.pgrid{grid-template-columns:1fr}.team-grid{max-width:420px;margin-left:auto;margin-right:auto}}
  @media(max-width:480px){.brand small{display:block;white-space:normal;overflow:visible;max-width:min(60vw,222px);font-size:.44rem;letter-spacing:.12em;line-height:1.55;margin-top:5px}}   /* phones: wrap onto two lines instead of hiding */

  /* ================= MULTI-PAGE ADDITIONS ================= */
  a.proj-card,a.onsite-card{color:inherit;text-decoration:none}
  a.back{text-decoration:none}
  nav.links a.active{opacity:1}
  nav.links a.active::after{width:100%;background:var(--orange)}
  .pgrid .proj-card.hide{display:none}
  .page-head{padding-top:clamp(140px,16vw,200px);background:var(--paper-2)}
  .page-head .lede{max-width:60ch;margin-top:22px;color:var(--ink-soft);font-size:1.02rem}

  /* breadcrumbs on project pages */
  .crumbs{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;opacity:.9}
  .crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
  .crumbs a:hover{border-color:var(--orange)}
  .crumbs span{margin:0 8px;opacity:.6}

  /* services page: one row per service */
  .svc-list{margin-top:50px;border-top:1px solid var(--line)}
  .svc-row{display:grid;grid-template-columns:70px 1fr 1.4fr;gap:clamp(18px,4vw,50px);padding:36px 0;border-bottom:1px solid var(--line);align-items:start}
  .svc-row .svc-icon{width:34px;height:34px;stroke:var(--orange-deep)}
  .svc-row h2{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.15}
  .svc-row .num{display:block;font-family:var(--display);font-size:.85rem;color:var(--orange-deep);margin-bottom:8px}
  .svc-row p{color:var(--ink-soft);margin-bottom:10px}
  .svc-row a{color:var(--orange-deep)}
  @media(max-width:860px){.svc-row{grid-template-columns:50px 1fr}.svc-row>div:last-child{grid-column:2}}

  /* home: construction band */
  .build-band{background:var(--orange);color:var(--ink);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
  .build-band .eyebrow{color:var(--ink)}
  .build-band .eyebrow::before{background:var(--ink)}
  .build-band p{font-size:1.02rem;max-width:52ch}
  .btn{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border:1px solid currentColor;color:inherit;transition:background .3s,color .3s,border-color .3s}
  .build-band .btn:hover{background:var(--ink);color:var(--paper)}
  .btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn.solid:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
  @media(max-width:860px){.build-band{grid-template-columns:1fr}}

  /* construction: process steps */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
  .step{background:var(--paper);padding:30px 24px}
  .step .num{font-family:var(--display);color:var(--orange-deep);font-size:.9rem}
  .step h3{font-family:var(--display);font-weight:500;font-size:1.25rem;margin:14px 0 8px}
  .step p{font-size:.88rem;color:var(--ink-soft)}
  @media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.steps{grid-template-columns:1fr}}

  /* why-us list */
  .why{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 60px;margin-top:46px}
  .why h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin-bottom:8px}
  .why p{color:var(--ink-soft)}
  @media(max-width:760px){.why{grid-template-columns:1fr}}

  /* call-to-action band */
  .cta-band{background:var(--charcoal);color:var(--paper);text-align:center}
  .cta-band .eyebrow{justify-content:center}
  .cta-band .section-title{margin:0 auto}
  .cta-band p{max-width:56ch;margin:20px auto 30px;opacity:.85}
  .cta-band .btn{color:var(--paper)}
  .cta-band .btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
  .cta-band .btn.solid{background:var(--orange);border-color:var(--orange);color:var(--ink)}
  .cta-band .btn.solid:hover{background:var(--paper);border-color:var(--paper)}
  .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  .related{background:var(--paper-2)}
  .err404{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
  .svc-row,[id]{scroll-margin-top:100px}     /* keep jump-to sections clear of the fixed header */
  @media(max-width:560px){.hero .scroll-cue{display:none}}
  /* Services page: 3 x 3 card grid */
  .svc-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .svc p+p{margin-top:10px}
  @media(max-width:860px){.svc-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.svc-grid.cols-3{grid-template-columns:1fr}}
  .svc-grid .svc{justify-content:flex-start;gap:22px}   /* titles line up across every card grid */
  /* light version of the call-to-action band (used after a dark section) */
  .cta-band.light{background:var(--paper-2);color:var(--ink)}
  .cta-band.light p{opacity:1;color:var(--ink-soft)}
  .cta-band.light .btn{color:var(--ink)}
  .cta-band.light .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .cta-band.light .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .cta-band.light .btn.solid:hover{background:var(--orange-deep);border-color:var(--orange-deep)}

  /* ---- Card photos are real images now (lighter, load as they scroll in) ---- */
  .ph{position:relative;overflow:hidden}
  .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .member .ph>img{object-position:center top}
  .ph .status,.ph .badge{z-index:1}
  /* Phones get a smaller version of the home page photo */
  @media(max-width:760px){
    .hero{background:linear-gradient(180deg,rgba(18,18,18,.25),rgba(18,18,18,.78)),
      url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=900&q=60') center/cover}
  }
  /* Project cards: reserve 2 lines for the label and 2 for the title,
     so titles and locations line up across a row (not needed on phones) */
  @media(min-width:561px){
    .proj-card .type,.onsite-card .type{line-height:1.6;min-height:3.2em}
    .proj-card h3,.onsite-card h3{min-height:2.3em}
  }
  /* Team cards: qualifications line sits at the bottom, level across each row */
  .member{display:flex;flex-direction:column}
  .member .info{flex:1;display:flex;flex-direction:column}
  .member .quals{margin-top:auto}
  .member .info p{margin-bottom:14px}
  @media(min-width:561px){.member .role{line-height:1.6;min-height:3.2em}}   /* names line up even when a role wraps */