:root{
    --ink:#123822;
    --charcoal:#174a2c;
    --steel:#4f6d5c;
    --paper:#ffffff;
    --paper-dim:#eef3ef;
    --blueprint:#2f5d8a;
    --blueprint-bright:#3f7fc4;
    --ochre:#2f8f5b;
    --white:#f6f7f6;
    --line:rgba(18,56,34,0.14);
    --line-light:rgba(246,247,246,0.18);
  }
  *{box-sizing:border-box;}
  /* Only `scroll-margin-top` on the sections offsets the fixed header — pairing
     it with scroll-padding-top here stacked both and landed 168px low. */
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    margin:0;
  }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  a{ color:inherit; }
  img{ display:block; max-width:100%; }
  .wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ochre);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px; background:var(--ochre); display:inline-block;
  }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(255,255,255,0.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px);
  }
  nav{
    max-width:1160px; margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    color:var(--ink);
  }
  .brand{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.04em;
    font-size:1rem; text-transform:uppercase; color:var(--ink); text-decoration:none;
    display:flex; align-items:center; gap:12px; min-width:0;
  }
  .brand .mark{
    height:34px; width:auto; flex:none; display:block;
  }
  .navlinks{ display:flex; gap:28px; font-size:0.82rem; letter-spacing:0.03em;}
  .navlinks a{ text-decoration:none; color:var(--steel); position:relative; padding:4px 0;}
  .navlinks a:hover{ color:var(--ink); }
  .navlinks a:hover::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ochre);
  }
  .navcta{
    background:var(--ochre); color:var(--white); padding:9px 18px; font-size:0.78rem;
    text-decoration:none; font-weight:600; letter-spacing:0.03em; white-space:nowrap; flex:none;
  }
  .nav-actions{ display:flex; align-items:center; gap:12px; flex:none; }
  .menu-toggle{
    display:none; background:none; border:1px solid var(--line); color:var(--ink);
    width:40px; height:40px; padding:0; cursor:pointer; flex:none;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
  }
  .menu-toggle span{
    display:block; width:18px; height:2px; background:var(--ink);
    transition:transform 0.25s ease, opacity 0.2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:flex-end;
    background:var(--ink);
    overflow:hidden;
  }
  .hero-slides{ position:absolute; inset:0; }
  .hero-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter:grayscale(1) contrast(1.15);
    /* Kept short relative to the 2s slide interval in motion.js, so each
       photo gets a real hold rather than the crossfade eating the whole cycle. */
    opacity:0; transition:opacity 0.7s ease;
  }
  /* Slide 1 ships with .is-active in the markup, so the hero is never blank
     if JS is blocked or motion.js 404s. */
  .hero-img.is-active{ opacity:0.55; }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      /* The 40% stop used to sit at .35, which was fine over one dark interior
         photo. The scroller's slides include bright sky and pale concrete, so
         this band is held darker to keep the eyebrow and headline legible on
         every slide rather than just the darkest one. */
      linear-gradient(180deg, rgba(18,56,34,0.72) 0%, rgba(18,56,34,0.66) 45%, rgba(18,56,34,0.96) 100%),
      /* This used to be rgba(47,143,91,...) -- the exact RGB of --ochre. That
         painted the eyebrow's own color across the same corner it sits in, so
         on brighter slides "BENGALURU, KARNATAKA" nearly vanished (measured
         contrast as low as 1.01:1). Using --ink here instead keeps the
         diagonal accent wash without cancelling the text over it. */
      linear-gradient(100deg, rgba(18,56,34,0.45), rgba(18,56,34,0.05) 55%);
  }
  .hero-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(246,247,246,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(246,247,246,0.06) 1px, transparent 1px);
    background-size:44px 44px;
    mix-blend-mode:screen;
  }
  .hero-content{
    position:relative; z-index:2; color:var(--white);
    max-width:1160px; margin:0 auto; padding:0 28px 90px; width:100%;
  }
  /* Everywhere else .eyebrow sits on the paper background, where ochre reads
     fine. Here it sits on a photograph: ochre is a mid-luminance hue, so no
     amount of gradient tuning gets it reliably above ~1.5:1 against five
     different slides (measured as low as 1.01:1). Matching the rest of the
     hero copy's white keeps the wide margin that already works for the
     headline and stats -- but even that only reaches 2.86:1 on the brightest
     slide (an aerial daytime shot), short of the 4.5:1 small text needs. The
     .hero::before wash darkens the whole photo, which is a moving target as
     slides are swapped later; a fixed chip behind just this line is not. */
  .hero-content .eyebrow{
    color:var(--paper-dim); margin-bottom:22px;
    display:inline-flex; width:fit-content;
    background:rgba(18,56,34,0.55); padding:7px 12px 7px 10px; border-radius:4px;
  }
  .hero-content .eyebrow::before{ background:var(--ochre); }
  .hero h1{
    font-size:clamp(2.6rem, 6.4vw, 5.6rem);
    line-height:0.98;
    color:var(--white);
  }
  /* Same root cause as the eyebrow fix above: ochre is a mid-luminance green,
     so over a green-filtered photo it can wash out to near-invisible (e.g. the
     crane/power-line slide) no matter how the overlay gradient is tuned. A
     background chip works for the small eyebrow line but would break an inline
     word inside a tight-leading heading, so this gets a dark edge instead --
     a hard stroke plus a close shadow -- that holds the letterforms apart from
     the photo regardless of which slide is behind them. */
  .hero h1 span{
    color:var(--ochre);
    -webkit-text-stroke:1px rgba(9,28,17,0.6);
    paint-order:stroke fill;
    text-shadow:0 2px 10px rgba(9,28,17,0.55);
  }
  .hero-sub{
    max-width:560px; font-size:1.02rem; color:var(--paper-dim); margin-top:22px; line-height:1.6;
  }
  .hero-stats{
    display:flex; gap:44px; margin-top:48px; flex-wrap:wrap;
    border-top:1px solid var(--line-light); padding-top:26px;
  }
  .hero-stats div{ min-width:110px; }
  .hero-stats .num{ font-family:'Oswald',sans-serif; font-size:2rem; color:var(--white); }
  .hero-stats .lbl{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-dim); margin-top:4px;}
  /* ---------- Section shells ---------- */
  section{ padding:110px 0; position:relative; scroll-margin-top:84px; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:16px; }
  .section-head p{ margin-top:18px; color:var(--steel); line-height:1.65; font-size:1rem;}
  .stamp{
    position:absolute; top:64px; right:28px; width:112px; height:112px;
    border:2px solid rgba(18,56,34,0.25); border-radius:50%;
    display:flex; align-items:center; justify-content:center; text-align:center;
    transform:rotate(-10deg); color:rgba(18,56,34,0.4);
    font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.08em;
    text-transform:uppercase; line-height:1.4; padding:10px;
    display:none;
  }
  @media(min-width:900px){ .stamp{ display:flex; } }

  /* ---------- About ---------- */
  .about{ background:var(--paper); }
  .about-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;
  }
  .about-copy p{ line-height:1.75; color:var(--charcoal); font-size:1.02rem; margin:0 0 18px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .discipline-list{ border-top:1px solid var(--line); }
  .discipline-list div{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 0; border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
  }
  .discipline-list span:first-child{ color:var(--steel); }
  .discipline-list span:last-child{ color:var(--ink); font-weight:500; }

  /* ---------- Principles / mission ---------- */
  .principles{ background:var(--ink); color:var(--white); }
  .principles .eyebrow{ color:var(--ochre); }
  .principles .section-head h2{ color:var(--white); }
  .principles .section-head p{ color:var(--paper-dim); }
  .prin-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
    background:var(--line-light); border:1px solid var(--line-light);
  }
  .prin-item{
    background:var(--ink); padding:30px 32px;
  }
  .prin-item .tick{ color:var(--ochre); font-family:'IBM Plex Mono',monospace; font-size:0.85rem; margin-bottom:10px; display:block;}
  .prin-item p{ color:var(--paper-dim); font-size:0.95rem; line-height:1.6; margin:0;}
  @media(max-width:760px){ .prin-grid{ grid-template-columns:1fr; } }

  /* ---------- Services ---------- */
  .services{ background:var(--paper); }
  .service-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line);
  }
  .service-card{
    background:var(--white); padding:32px 28px; min-height:150px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .service-card h3{ font-size:1.02rem; font-weight:500; letter-spacing:0.01em; line-height:1.3; text-transform:none; font-family:'IBM Plex Sans',sans-serif;}
  .service-card .idx{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ochre); letter-spacing:0.08em; }
  @media(max-width:860px){ .service-grid{ grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .service-grid{ grid-template-columns:1fr;} }

  /* ---------- Building types ---------- */
  .types{ background:var(--paper-dim); }
  .type-tags{ display:flex; flex-wrap:wrap; gap:12px; }
  .type-tags span{
    font-family:'IBM Plex Mono',monospace; font-size:0.82rem; letter-spacing:0.03em;
    padding:11px 20px; border:1px solid var(--line); background:var(--white);
    color:var(--charcoal);
  }

  /* ---------- Gallery ---------- */
  .gallery{ background:var(--ink); }
  .gallery .section-head h2{ color:var(--white); }
  .gallery .section-head p{ color:var(--paper-dim); }
  .gallery .eyebrow{ color:var(--ochre); }
  .gal-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; gap:6px;
  }
  .gal-grid figure{ margin:0; overflow:hidden; position:relative; grid-column:span 1; grid-row:span 1;}
  .gal-grid figure.big{ grid-column:span 2; grid-row:span 2; }
  .gal-grid figure.wide{ grid-column:span 2; grid-row:span 1; }
  .gal-grid figure.tall{ grid-column:span 1; grid-row:span 2; }
  .gal-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(0.15);}
  .gal-grid figure:hover img{ transform:scale(1.06); filter:grayscale(0); }
  @media(max-width:760px){
    .gal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
    .gal-grid figure.big{ grid-column:span 2; grid-row:span 1; }
    .gal-grid figure.wide{ grid-column:span 2; grid-row:span 1; }
  }

  /* ---------- Clients ---------- */
  .clients{ background:var(--paper); }
  .client-logos{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:8px;
  }
  .client-card{
    background:var(--white); border:1px solid var(--line); border-radius:8px;
    padding:28px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; transition:transform 0.3s ease, box-shadow 0.3s ease; gap:12px;
  }
  .client-card:hover{
    transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.06);
  }
  .client-card .logo-wrap{
    width:100%; height:46px; display:flex; align-items:center; justify-content:center;
  }
  .client-card img{
    width:100%; max-width:130px; height:42px; object-fit:contain; filter:grayscale(1); opacity:0.7; transition:filter 0.3s ease, opacity 0.3s ease;
  }
  .client-card:hover img{
    filter:grayscale(0); opacity:1;
  }
  .client-card .initial-logo{
    width:48px; height:48px; border-radius:50%; background:var(--charcoal); color:var(--white);
    font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
    filter:grayscale(1); opacity:0.7; transition:filter 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  }
  .client-card:hover .initial-logo{
    filter:grayscale(0); opacity:1; background:var(--ochre);
  }
  .client-card span{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--charcoal); font-weight:500; line-height:1.4;
  }
  .client-logos.is-collapsed .client-card:nth-child(n+13){ display:none; }
  @media(max-width:1000px){ .client-logos{ grid-template-columns:repeat(3,1fr);} }
  .clients-more{ display:flex; justify-content:center; margin-top:34px; }
  .btn-more{
    background:none; border:1px solid var(--line); color:var(--charcoal);
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.12em;
    text-transform:uppercase; padding:13px 26px; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px;
    transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .btn-more:hover{ background:var(--ochre); border-color:var(--ochre); color:var(--white); }
  .btn-more .chev{ transition:transform 0.25s ease; font-size:0.9rem; line-height:1; }
  .btn-more[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  @media(max-width:760px){ .client-logos{ grid-template-columns:repeat(2,1fr); gap:12px;}
    .client-logos.is-collapsed .client-card:nth-child(n+10){ display:none; } }

  /* ---------- Contact ---------- */
  .contact{ background:var(--charcoal); color:var(--white); }
  .contact .eyebrow{ color:var(--ochre); }
  .contact .section-head h2{ color:var(--white); }
  .contact .section-head p{ color:var(--paper-dim); }
  .contact .section-head{ max-width:640px; margin-left:auto; margin-right:auto; text-align:center; }
  .contact .section-head .eyebrow{ justify-content:center; }
  .contact-grid{ display:grid; grid-template-columns:minmax(0,720px); justify-content:center; }

  form{ display:flex; flex-direction:column; gap:20px; }
  .form-card {
    background: var(--paper);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    color: var(--ink);
  }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); font-weight: 500; }
  .field input, .field select, .field textarea{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:0.96rem;
    padding:14px 16px; outline:none; width:100%;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .field textarea{ resize:vertical; min-height:120px; line-height:1.5; }
  .field input::placeholder, .field textarea::placeholder{ color: rgba(18,56,34,0.4); }
  .field input:hover, .field select:hover, .field textarea:hover{ border-color: rgba(18,56,34,0.3); }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--ochre); background: var(--paper);
    box-shadow:0 0 0 4px rgba(47,143,91,0.12);
  }
  .field select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23123822' d='M4 6l4 4 4-4' stroke='%23123822' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; background-size:14px;
    padding-right:40px; cursor:pointer;
  }
  .field select option{ color: var(--ink); background:var(--white); }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media(max-width:640px){ .row2{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } .form-card { padding: 24px; } }

  .submit-btn{
    margin-top:12px; align-self:flex-start; width: 100%; justify-content: center;
    background:var(--ochre); color:var(--white); border:none; cursor:pointer;
    padding:16px 34px; font-family:'IBM Plex Mono',monospace; font-size:0.86rem;
    letter-spacing:0.08em; text-transform:uppercase; font-weight:600; border-radius:4px;
    display:flex; align-items:center; gap:10px; transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow:0 4px 14px rgba(47,143,91,0.24);
  }
  .submit-btn:hover{ background:#3aa86b; box-shadow:0 6px 18px rgba(47,143,91,0.32); }
  .submit-btn:active{ transform:translateY(1px); }

  /* ---------- Footer ---------- */
  footer {
    background: var(--ink);
    color: var(--white);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.25fr 1.1fr 0.9fr;
    gap: 40px;
    margin-bottom: 60px;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .footer-brand .brand {
    color: var(--white);
    font-size: 1.2rem;
  }
  .footer-brand p {
    color: var(--paper-dim);
    line-height: 1.6;
    max-width: 300px;
    margin: 0;
    font-size: 0.95rem;
  }
  .footer-col h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ochre);
    margin: 0 0 20px;
  }
  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-col a {
    color: var(--paper-dim);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
  }
  .footer-col a:hover {
    color: var(--ochre);
  }
  /* Address + contact blocks */
  .footer-office {
    margin-bottom: 26px;
  }
  .footer-office:last-child { margin-bottom: 0; }
  .footer-office .office-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
  }
  .footer-office address {
    font-style: normal;
    color: var(--paper-dim);
    font-size: 0.95rem;
    line-height: 1.65;
  }
  .footer-office .map-link {
    display: inline-block;
    margin-top: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ochre);
    text-decoration: none;
    border-bottom: 1px solid rgba(217,154,43,0.35);
    padding-bottom: 2px;
  }
  .footer-office .map-link:hover { border-bottom-color: var(--ochre); }
  .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .footer-contact .lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
  }
  .footer-contact a,
  .footer-contact .val {
    color: var(--white);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
    transition: color 0.2s ease;
  }
  .footer-contact a:hover { color: var(--ochre); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
  }
  .footer-bottom-links {
    display: flex;
    gap: 20px;
  }
  .footer-bottom-links a {
    color: inherit;
    text-decoration: none;
  }
  .footer-bottom-links a:hover {
    color: var(--white);
  }
  @media(max-width: 900px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media(max-width: 560px) {
    .footer-grid {
      grid-template-columns: 1fr;
    }
    .footer-bottom {
      flex-direction: column;
      gap: 16px;
      text-align: center;
    }
  }
  .submit-btn:disabled{ opacity:0.6; cursor:progress; box-shadow:none; }

  .form-msg{
    display:none; padding:16px 18px; font-size:0.9rem; line-height:1.5;
    font-family:'IBM Plex Mono',monospace; border-left:3px solid var(--ochre);
    background:rgba(217,154,43,0.08);
  }
  .form-msg.show{ display:block; }
  .form-msg.error{ border-left-color:#c85a4a; background:rgba(200,90,74,0.08); }
  .honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

  @media(max-width:860px){
    .about-grid{ grid-template-columns:1fr; gap:40px; }

    nav{ padding:12px 20px; }
    .menu-toggle{ display:flex; }
    /* Links leave the bar and become a drop-down panel under the header */
    .navlinks{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background:#ffffff;
      border-bottom:1px solid var(--line);
      box-shadow:0 12px 24px rgba(18,56,34,0.08);
      padding:8px 20px 16px;
      font-size:0.95rem;
      max-height:calc(100vh - 100%); overflow-y:auto;
    }
    header.nav-open .navlinks{ display:flex; }
    .navlinks a{ padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); }
    .navlinks a:last-child{ border-bottom:none; }
    .navlinks a:hover::after{ display:none; }
  }

  @media(max-width:560px){
    nav{ padding:10px 16px; gap:10px; }
    /* Wordmark wraps to two tight lines so it survives next to the CTA */
    .brand{ font-size:0.72rem; letter-spacing:0.02em; gap:8px; line-height:1.15; }
    .brand span{ max-width:88px; }
    .brand .mark{ height:30px; }
    .navcta{ padding:8px 12px; font-size:0.68rem; }
    .menu-toggle{ width:36px; height:36px; }
    section{ scroll-margin-top:66px; }
  }

  @media(max-width:300px){
    /* Below this the logo alone has to carry the brand */
    .brand span{ display:none; }
  }

  /* ---------- Loader ---------- */
  #loader{
    position:fixed; inset:0; z-index:999;
    background:#ffffff;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    transition:opacity 0.3s ease, visibility 0.3s ease;
  }
  #loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  #loader img{
    width:180px; height:auto; max-width:60vw;
    animation:loaderPop 0.5s ease;
  }
  #loader .loader-bar{
    width:160px; height:3px; background:rgba(18,56,34,0.1); margin-top:28px;
    overflow:hidden; position:relative;
  }
  #loader .loader-bar::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:40%;
    background:var(--ochre);
    animation:loaderSlide 0.9s ease-in-out infinite;
  }
  @keyframes loaderSlide{
    0%{ left:-40%; }
    100%{ left:100%; }
  }
  @keyframes loaderPop{
    from{ opacity:0; transform:scale(0.94); }
    to{ opacity:1; transform:scale(1); }
  }
  body.loading{ overflow:hidden; }

  /* ---------- Home gallery: "view all" CTA ---------- */
  .gal-more{ display:flex; justify-content:center; margin-top:34px; }
  .gallery .btn-more{
    color:var(--white); border-color:var(--line-light); text-decoration:none;
  }
  .gallery .btn-more:hover{ background:var(--ochre); border-color:var(--ochre); color:var(--white); }
  .gallery .btn-more .chev{ transform:none; }
  .gallery .btn-more:hover .chev{ transform:translateX(3px); }

  /* Current page in the nav */
  .navlinks a.is-active{ color:var(--ink); }
  .navlinks a.is-active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ochre);
  }
  /* Six links + CTA get tight before the drawer breakpoint */
  @media(max-width:1040px){ .navlinks{ gap:18px; font-size:0.78rem; } }

  /* ---------- Projects page ---------- */
  .page-head{ padding:150px 0 46px; background:var(--paper); }
  .page-head .section-head{ margin-bottom:28px; }
  .page-head-meta{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    border-top:1px solid var(--line); padding-top:18px;
    font-family:'IBM Plex Mono',monospace; font-size:0.76rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--steel);
  }
  .page-head-meta a{ color:var(--charcoal); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
  .page-head-meta a:hover{ color:var(--ochre); border-color:var(--ochre); }

  .gallery-all{ padding:56px 0 90px; }
  .grid-all{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px;
  }
  .grid-all figure{
    margin:0; overflow:hidden; position:relative; aspect-ratio:4/3;
    background:var(--charcoal); cursor:zoom-in;
  }
  .grid-all img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease, filter .5s ease; filter:grayscale(0.15);
  }
  .grid-all figure:hover img{ transform:scale(1.06); filter:grayscale(0); }
  @media(max-width:760px){
    .page-head{ padding:120px 0 36px; }
    .grid-all{ grid-template-columns:repeat(2,1fr); gap:6px; }
  }
  @media(max-width:420px){ .grid-all{ grid-template-columns:1fr; } }

  .cta-strip{ background:var(--paper-dim); padding:64px 0; }
  .cta-strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .cta-strip h3{ margin:0; font-size:clamp(1.3rem,2.4vw,1.8rem); }
  .cta-strip .btn-more{ text-decoration:none; }

  /* ---------- Lightbox ---------- */
  .lightbox{
    display:none; position:fixed; inset:0; z-index:100;
    background:rgba(9,26,16,0.94); align-items:center; justify-content:center;
    padding:56px 64px;
  }
  .lightbox.open{ display:flex; }
  .lb-img{ max-width:100%; max-height:100%; object-fit:contain; }
  .lb-close,.lb-nav{
    position:absolute; background:none; border:none; color:var(--white);
    cursor:pointer; line-height:1; padding:8px 14px; opacity:0.75;
    transition:opacity .2s ease, transform .2s ease;
  }
  .lb-close:hover,.lb-nav:hover{ opacity:1; }
  .lb-close{ top:14px; right:20px; font-size:2.2rem; }
  .lb-nav{ top:50%; transform:translateY(-50%); font-size:3rem; }
  .lb-prev{ left:8px; }
  .lb-next{ right:8px; }
  .lb-count{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.1em;
    color:var(--paper-dim); opacity:0.8;
  }
  @media(max-width:560px){
    .lightbox{ padding:52px 12px; }
    .lb-nav{ font-size:2.2rem; }
  }

  /* Loader plays on first arrival and on reload only — internal navigation skips it */
  html.skip-loader #loader{ display:none; }
  html.skip-loader body.loading{ overflow:visible; }

  /* =========================================================
     Motion — scroll reveals, nav state, page transitions.
     Everything below only engages when <html> carries .js-motion,
     which the head script sets only if IntersectionObserver exists
     and the visitor has NOT asked for reduced motion. No JS, no
     motion: the page renders fully visible.
     ========================================================= */

  /* Elements that fade up as they scroll in.
     KEEP THIS LIST IN SYNC WITH `REVEAL` IN motion.js
     :where() zeroes the list's specificity, so the `.is-in` rule below always
     wins — without it, selectors ending in a type (`.grid-all figure`) would
     out-specify `.is-in` and those tiles would never fade back in. */
  html.js-motion :where(
    .section-head,
    .stamp,
    .about-copy,
    .discipline-list,
    .service-card,
    .type-tags span,
    .prin-item,
    .gal-grid figure,
    .gal-more,
    .client-card,
    .clients-more,
    .form-card,
    .page-head-meta,
    .grid-all figure,
    .cta-strip h3,
    .cta-strip .btn-more,
    .footer-brand,
    .footer-col
  ){
    /* Shorter travel + shorter duration reads as smoother than a long slide.
       No `will-change` here on purpose: it was promoting ~130 elements to their
       own compositor layers at once, which costs memory on phones and buys
       nothing — opacity/transform are composited anyway. */
    opacity:0; transform:translateY(14px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d,0ms);
  }
  html.js-motion .is-in{ opacity:1; transform:none; }

  /* Photographs ease in as they decode instead of snapping in half-drawn */
  html.js-motion :where(.gal-grid img, .grid-all img){ opacity:0; transition:opacity .5s ease; }
  html.js-motion .img-ready{ opacity:1; }

  /* Offscreen tiles cost nothing to keep around; aspect-ratio holds their box
     so this can never shift the scroll position. */
  .grid-all figure{ content-visibility:auto; contain-intrinsic-size:auto 260px; }

  /* Header condenses and lifts off the page once you leave the top */
  header{ transition:padding .3s ease, box-shadow .3s ease, background .3s ease; }
  header.scrolled{
    box-shadow:0 6px 24px rgba(18,56,34,0.08);
    background:rgba(255,255,255,0.98);
  }
  header.scrolled nav{ padding-top:9px; padding-bottom:9px; }
  nav{ transition:padding .3s ease; }

  /* Hero: content lifts in once the loader is out of the way */
  html.js-motion .hero-content > *{ opacity:0; transform:translateY(26px); }
  html.js-motion body.ready .hero-content > *{
    animation:heroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  html.js-motion body.ready .hero-content > *:nth-child(1){ animation-delay:.05s; }
  html.js-motion body.ready .hero-content > *:nth-child(2){ animation-delay:.15s; }
  html.js-motion body.ready .hero-content > *:nth-child(3){ animation-delay:.25s; }
  html.js-motion body.ready .hero-content > *:nth-child(4){ animation-delay:.35s; }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }
  /* Parallax moves the whole stack, so promote the wrapper, not each slide. */
  .hero-slides{ will-change:transform; }

  /* Page switch: current page eases out, the next one eases in.
     Both are deliberately short — every millisecond here is time the visitor
     spends waiting on a click, and it starts from 0.35 rather than 0 so the
     incoming page is legible immediately instead of fading up from nothing. */
  html.js-motion body{ animation:pageIn .22s ease-out both; }
  @keyframes pageIn{ from{ opacity:.35; } to{ opacity:1; } }
  html.js-motion body.is-leaving{
    animation:none; opacity:0; transform:translateY(-6px);
    transition:opacity .12s ease-in, transform .12s ease-in;
  }

  /* Interactive polish */
  .service-card, .client-card, .type-tags span{
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  }
  .service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(18,56,34,0.07); }
  .type-tags span:hover{ border-color:var(--ochre); color:var(--ochre); transform:translateY(-2px); }
  .navcta{ transition:transform .25s ease, filter .25s ease; }
  .navcta:hover{ transform:translateY(-2px); filter:brightness(1.06); }
  .submit-btn{ transition:transform .25s ease, filter .25s ease; }
  .submit-btn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06); }

  /* Lightbox easing */
  .lightbox{ opacity:0; transition:opacity .28s ease; }
  .lightbox.open{ opacity:1; }
  .lb-img{ transform:scale(.965); opacity:0; transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .28s ease; }
  .lightbox.open .lb-img{ transform:none; opacity:1; }

  /* Honour the OS setting: no reveals, no parallax, no smooth scroll */
  @media(prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
  }

  /* =========================================================
     Mobile pass — sizing, reach and safe areas on phones.
     Audited at 320/360/390/414/540px: no layout overflowed, so this
     tunes legibility and touch ergonomics rather than the grid.
     ========================================================= */

  /* The hero measured 100vh, which on phones is the height WITHOUT the URL
     bar — so the stats row sat below the fold until you scrolled. svh is the
     small-viewport unit that accounts for visible browser chrome. */
  @supports (height: 100svh){
    .hero{ min-height:100svh; }
  }

  /* Notched phones: keep content clear of the rounded corners in landscape.
     `max()` keeps each breakpoint's own padding as the floor — writing this as
     one blanket rule would have forced the desktop 28px back onto phones. */
  .wrap{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
  }
  nav{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
  }
  @media(max-width:860px){
    nav{
      padding-left:max(20px, env(safe-area-inset-left));
      padding-right:max(20px, env(safe-area-inset-right));
    }
  }
  @media(max-width:560px){
    nav{
      padding-left:max(16px, env(safe-area-inset-left));
      padding-right:max(16px, env(safe-area-inset-right));
    }
  }

  @media(max-width:760px){
    /* 110px of padding per section is a lot of thumb-scrolling on a phone */
    section{ padding:68px 0; }
    .page-head{ padding-top:104px; padding-bottom:32px; }
    .gallery-all{ padding:36px 0 64px; }
    .cta-strip{ padding:48px 0; }
    .section-head{ margin-bottom:34px; }

    /* Nothing below 12px: sub-12px type is where phone reading falls apart */
    .eyebrow{ font-size:0.75rem; }
    .hero-stats .lbl, .footer-contact .lbl, .footer-office .office-tag,
    .service-card .idx, .page-head-meta, .field label,
    .btn-more, .btn-more-label{ font-size:0.75rem; }
    .type-tags span{ font-size:0.8rem; }
    .client-card span{ font-size:0.78rem; }
  }

  /* Touch reach: the 44px guideline. Only on genuinely touch-driven devices,
     so the desktop layout keeps its tighter rhythm. */
  @media(hover:none) and (pointer:coarse){
    .navcta{ padding:15px 18px; }
    .menu-toggle{ width:44px; height:44px; }
    .brand{ padding:6px 0; }
    footer ul li a, .footer-contact a{
      display:inline-block; padding:9px 0; min-height:44px;
    }
    .footer-office .map-link{ display:inline-block; padding:14px 0; }
    .btn-more{ padding:15px 26px; }
    .page-head-meta a{ display:inline-block; padding:8px 0; }
  }

  /* Lightbox: on a phone the arrows sat in the screen's clipped edge and
     overlapped the photo. Give them real buttons, inset and thumb-reachable,
     and let the visitor swipe instead. */
  @media(max-width:760px){
    .lightbox{
      padding:calc(58px + env(safe-area-inset-top)) 10px
              calc(78px + env(safe-area-inset-bottom));
    }
    .lb-close{
      top:calc(10px + env(safe-area-inset-top)); right:12px;
      width:44px; height:44px; display:flex; align-items:center; justify-content:center;
      background:rgba(18,56,34,0.55); border-radius:50%; font-size:1.7rem; padding:0;
    }
    .lb-nav{
      top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); transform:none;
      width:48px; height:48px; display:flex; align-items:center; justify-content:center;
      background:rgba(18,56,34,0.55); border-radius:50%; font-size:1.9rem; padding:0;
    }
    .lb-prev{ left:calc(50% - 92px); }
    .lb-next{ right:calc(50% - 92px); }
    .lb-count{ bottom:calc(30px + env(safe-area-inset-bottom)); }
  }