/* ================= SELF-HOSTED FONTS =================
   Replaces the Google Fonts stylesheet. Files in assets/fonts/, SIL OFL 1.1.
   font-display:swap — text paints immediately in the fallback and swaps when
   the webfont lands, so nothing is ever invisible. */
  @font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;}
  @font-face{font-family:'Inter';src:url('fonts/inter-var.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;}
  @font-face{font-family:'Space Mono';src:url('fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'Space Mono';src:url('fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

  :root{
    --white:#FFFFFF;
    --surface:#F6F7F8;
    --ink:#111111;
    --ink-soft:#666666;
    --navy:#173A63;
    --navy-deep:#0E2340;
    --ice:#D9F2FF;
    --dark:#0A0D11;
    --dark-2:#12161C;
    --oak:#B98A5E;
    --amber:#E8A33D;
    --line:rgba(17,17,17,0.08);
    --line-dark:rgba(255,255,255,0.10);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-0.02em;
    line-height:1.02;
  }
  .mono{font-family:'Space Mono',monospace;letter-spacing:0.04em;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--navy);color:var(--ice);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- utility ---------- */
  .wrap{max-width:1360px;margin:0 auto;padding:0 40px;}
  @media (max-width:768px){.wrap{padding:0 22px;}}
  .eyebrow{
    font-family:'Space Mono',monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--navy);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:'';width:22px;height:1px;background:var(--navy);display:inline-block;}
  .eyebrow.on-dark{color:var(--ice);}
  .eyebrow.on-dark::before{background:var(--ice);}

  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  :focus-visible{outline:2px solid var(--navy);outline-offset:3px;}

  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;border-radius:100px;
    font-size:14px;font-weight:600;letter-spacing:0.01em;
    transition:transform .5s cubic-bezier(.16,1,.3,1), background .4s, color .4s, box-shadow .5s;
  }
  .btn-primary{background:var(--navy);color:var(--white);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(23,58,99,0.55);}
  .btn-ghost{border:1px solid rgba(255,255,255,0.35);color:var(--white);}
  .btn-ghost:hover{background:rgba(255,255,255,0.10);transform:translateY(-2px);}
  .btn-light{border:1px solid rgba(17,17,17,0.18);color:var(--ink);}
  .btn-light:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);}

  /* ---------- duct rail (signature element) ---------- */
  #ductRail{
    position:fixed;top:0;right:26px;height:100vh;width:2px;z-index:60;
    display:flex;align-items:center;pointer-events:none;
  }
  @media (max-width:900px){#ductRail{display:none;}}
  #ductRail svg{height:70vh;width:2px;overflow:visible;}
  #ductRail .track{stroke:rgba(17,17,17,0.12);stroke-width:2;}
  #ductRail .flow{stroke:var(--navy);stroke-width:2;stroke-dasharray:6 10;}
  #ductRail.on-dark .track{stroke:rgba(255,255,255,0.14);}
  #ductRail .bead{
    position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
    background:var(--ice);box-shadow:0 0 10px 2px rgba(217,242,255,0.9);
  }

  /* ---------- nav ---------- */
  /* Visually hidden until keyboard-focused. Uses the clip pattern rather than a negative
     offset so the element paints no box at all when unfocused — a negative-top variant can
     still render a visible strip depending on positioning context and transition state. */
  .skip-link{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .skip-link:focus{
    position:fixed;top:0;left:16px;z-index:200;
    width:auto;height:auto;margin:0;padding:12px 20px;
    overflow:visible;clip:auto;clip-path:none;
    background:var(--navy);color:var(--white);
    border-radius:0 0 10px 10px;
    font-size:14px;font-weight:600;text-decoration:none;
    outline:2px solid var(--ice);outline-offset:2px;
  }

  header{
    position:fixed;top:0;left:0;right:0;z-index:70;
    transition:background .4s, border-color .4s, backdrop-filter .4s;
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  header .nav-row{padding:22px 0;transition:padding .4s;}
  header.scrolled .nav-row{padding:14px 0;}
  header.scrolled{
    background:rgba(255,255,255,0.72);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .utility-bar{
    background:var(--navy-deep);color:rgba(255,255,255,0.82);font-size:12px;
    overflow:hidden;max-height:38px;transition:max-height .4s ease, opacity .3s ease, padding .4s ease;
  }
  .utility-bar .wrap{padding:9px 0;}
  header.scrolled .utility-bar{max-height:0;opacity:0;}
  header.scrolled .utility-bar .wrap{padding:0;}
  .utility-hours{display:flex;align-items:center;gap:7px;}
  .utility-hours svg{opacity:0.7;flex-shrink:0;}
  .utility-phone{display:flex;align-items:center;gap:7px;color:var(--ice);font-weight:600;transition:opacity .3s;}
  .utility-phone:hover{opacity:0.8;}
  @media (max-width:640px){.utility-hours{display:none;} .utility-bar .wrap{justify-content:center;}}
  .mobile-phone{
    display:flex;align-items:center;gap:9px;font-size:22px;font-weight:600;color:var(--navy);
    padding:8px 0 20px;border-bottom:1px solid var(--line);margin-bottom:10px;
  }
  header.on-dark:not(.scrolled) .navlink, header.on-dark:not(.scrolled) .logo{color:var(--white);}
  .logo{display:flex;align-items:center;gap:11px;}
  .logo-mark{
    width:32px;height:32px;border-radius:9px;background:var(--navy);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px -4px rgba(23,58,99,0.5);
  }
  .logo-mark svg{width:16px;height:16px;}
  .logo-text{font-family:'Space Grotesk';font-weight:700;font-size:20px;letter-spacing:0.02em;color:inherit;}
  /* Real client logo (used when LOGO_FILE is configured). Height-constrained rather than
     width-constrained so any aspect ratio stays inside the header band; width:auto keeps it
     undistorted. Shrinks slightly with the header on scroll, matching the nav-row transition. */
  /* The logo is a stacked lockup (icon / wordmark / straplines), so the header band has to be
     taller than it would be for a horizontal logo. Height-constrained with width:auto so the
     aspect ratio is never distorted; shrinks on scroll alongside the nav row. */
  .logo-img-full{display:block;height:68px;width:auto;object-fit:contain;transition:height .4s ease;flex-shrink:0;margin-top:8px;}
  header.scrolled .logo-img-full{height:50px;margin-top:4px;}
  @media (max-width:860px){.logo-img-full{height:58px;} header.scrolled .logo-img-full{height:44px;}}
  @media (max-width:480px){.logo-img-full{height:50px;margin-top:6px;}}
  /* Footer has more vertical room, so the lockup can sit slightly larger. */
  .foot-logo .logo-img-full{height:70px;}
  @media (max-width:768px){.foot-logo .logo-img-full{height:60px;}}
  nav.links{display:flex;gap:28px;align-items:center;}
  @media (max-width:860px){nav.links{display:none;}}
  .navlink{font-size:14px;font-weight:500;color:var(--ink);position:relative;padding:4px 0;}
  .navlink::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s;}
  .navlink:hover::after{width:100%;}
  .navlink.is-active{color:var(--navy);}
  .navlink.is-active::after{width:100%;}
  header.on-dark:not(.scrolled) .navlink.is-active{color:var(--ice);}

  /* Every page now has a fixed, known (light) header colour — no page is dark top-to-bottom
     anymore, so this is pinned with CSS rather than left to scroll-based JS detection. */
  body[data-page="home"] header:not(.scrolled) .navlink,
  body[data-page="home"] header:not(.scrolled) .logo,
  body[data-page="services"] header:not(.scrolled) .navlink,
  body[data-page="services"] header:not(.scrolled) .logo,
  body[data-page="calculator"] header:not(.scrolled) .navlink,
  body[data-page="calculator"] header:not(.scrolled) .logo,
  body[data-page="work"] header:not(.scrolled) .navlink,
  body[data-page="work"] header:not(.scrolled) .logo,
  body[data-page="demo"] header:not(.scrolled) .navlink,
  body[data-page="demo"] header:not(.scrolled) .logo,
  body[data-page="experience"] header:not(.scrolled) .navlink,
  body[data-page="experience"] header:not(.scrolled) .logo,
  body[data-page="contact"] header:not(.scrolled) .navlink,
  body[data-page="contact"] header:not(.scrolled) .logo{color:var(--ink);}
  body[data-page="home"] header:not(.scrolled) .navlink.is-active,
  body[data-page="services"] header:not(.scrolled) .navlink.is-active,
  body[data-page="calculator"] header:not(.scrolled) .navlink.is-active,
  body[data-page="work"] header:not(.scrolled) .navlink.is-active,
  body[data-page="demo"] header:not(.scrolled) .navlink.is-active,
  body[data-page="experience"] header:not(.scrolled) .navlink.is-active,
  body[data-page="contact"] header:not(.scrolled) .navlink.is-active{color:var(--navy);}

  .mobile-menu a.navlink.is-active{color:var(--navy);}
  header .cta-mini{padding:11px 22px;font-size:13px;margin-top:3px;}
  @media (max-width:860px){header .cta-mini{display:none;}}
  .header-social{display:flex;align-items:center;gap:14px;margin-right:20px;}
  .header-social a{width:17px;height:17px;color:var(--ink);opacity:0.6;transition:opacity .3s, color .3s;display:flex;}
  .header-social a:hover{opacity:1;color:var(--navy);}
  .header-social svg{width:100%;height:100%;}
  @media (max-width:860px){.header-social{display:none;}}

  .menu-btn{
    display:none;width:38px;height:38px;border-radius:10px;
    align-items:center;justify-content:center;flex-shrink:0;
  }
  @media (max-width:860px){.menu-btn{display:flex;}}
  .menu-btn .bars{width:20px;height:14px;position:relative;}
  .menu-btn .bars span{
    position:absolute;left:0;width:100%;height:1.6px;background:var(--ink);border-radius:2px;
    transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .3s, top .4s;
  }
  header.on-dark:not(.scrolled) .menu-btn .bars span{background:var(--white);}
  .menu-btn .bars span:nth-child(1){top:0;}
  .menu-btn .bars span:nth-child(2){top:6px;}
  .menu-btn .bars span:nth-child(3){top:12px;}
  .menu-btn.open .bars span{background:var(--ink) !important;}
  .menu-btn.open .bars span:nth-child(1){top:6px;transform:rotate(45deg);}
  .menu-btn.open .bars span:nth-child(2){opacity:0;}
  .menu-btn.open .bars span:nth-child(3){top:6px;transform:rotate(-45deg);}

  .mobile-menu{
    position:fixed;inset:0;z-index:65;background:var(--white);
    display:flex;flex-direction:column;justify-content:center;padding:0 34px;
    opacity:0;pointer-events:none;transform:translateY(-14px);
    transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .mobile-menu a.navlink{font-family:'Space Grotesk';font-size:38px;font-weight:600;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);}
  .mobile-menu .btn{margin-top:30px;align-self:flex-start;}

  section{position:relative;}

  /* ================= HERO ================= */
  #hero{
    position:relative;
    background:radial-gradient(125% 125% at 50% 90%, #FFFFFF 40%, #475569 100%);
    color:var(--ink);
    /* Header is ~114px tall. The brand text uses line-height:0.78 with a negative top margin,
       so its glyphs overflow their own box upward by roughly 35px — the padding has to cover
       both, or the top of "AMAC" renders behind the fixed header. */
    padding:198px 0 90px;
  }

  .hero-content{position:relative;z-index:5;}
  .hero-content .wrap{width:100%;text-align:center;}
  .hero-eyebrow-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;opacity:0;justify-content:center;}
  .hero-tag{
    font-family:'Space Mono';font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--ink-soft);padding:7px 13px;border:1px solid var(--line);
    border-radius:100px;background:rgba(255,255,255,0.6);
  }
  .hero-kicker{margin-bottom:18px;opacity:0;}

  /* ---------- hero brand mark (click to toggle cool/heat) ---------- */
  .hero-brand{
    position:relative;display:flex;align-items:center;justify-content:center;
    margin-bottom:26px;opacity:0;perspective:900px;cursor:pointer;
    outline:none;
  }
  .hero-brand:focus-visible .hero-brand-text{box-shadow:0 0 0 3px rgba(23,58,99,0.25);border-radius:8px;}
  .hero-brand-glow{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(520px,80vw);height:220px;border-radius:50%;
    background:radial-gradient(circle, rgba(23,58,99,0.16), transparent 70%);
    filter:blur(30px);pointer-events:none;z-index:0;
    transition:background 0.5s ease;
  }
  #heroBrand.is-heat .hero-brand-glow{background:radial-gradient(circle, rgba(124,45,18,0.14), transparent 70%);}
  .hero-brand-text{
    position:relative;z-index:1;display:inline-block;
    font-family:'Space Grotesk';font-weight:700;
    font-size:clamp(64px,15vw,190px);line-height:0.78;letter-spacing:-0.03em;
    margin-top:-0.08em;
    background-image:linear-gradient(100deg, var(--navy) 15%, var(--ice) 45%, var(--navy) 75%);
    background-size:240% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:brand-shimmer 7s ease-in-out infinite;
    transition:transform .25s ease-out, background-image 0.4s ease;
    will-change:transform;
    transform-style:preserve-3d;
  }
  #heroBrand.is-heat .hero-brand-text{
    background-image:linear-gradient(100deg, #7C2D12 15%, #EA580C 45%, #7C2D12 75%);
  }
  @keyframes brand-shimmer{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  @media (max-width:640px){.hero-brand{margin-bottom:22px;} .hero-brand-glow{height:140px;}}

  /* On phones the stack above the headline (brand mark, kicker, tag pills, readout) pushes the
     value proposition and CTAs below the fold — tighten the gaps without shrinking anything. */
  @media (max-width:640px){
    #hero{padding-top:166px;padding-bottom:64px;}
    .hero-brand{margin-bottom:14px;}
    .hero-kicker{margin-bottom:12px;}
    .hero-eyebrow-row{gap:8px;margin-bottom:16px;}
    .hero-readout{margin-bottom:20px;}
    .hero-sub{margin-top:20px;}
  }

  /* ---------- live readout (reacts to #heroBrand cool/heat state via sibling selector) ---------- */
  .hero-readout{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 16px;border-radius:100px;margin:0 auto 26px;width:fit-content;
    background:rgba(255,255,255,0.7);border:1px solid var(--line);
    font-family:'Space Mono';font-size:12.5px;color:var(--ink-soft);
    opacity:0;transition:border-color .4s ease;
  }
  .hero-readout-dot{
    width:6px;height:6px;border-radius:50%;background:var(--navy);flex-shrink:0;
    box-shadow:0 0 0 3px rgba(23,58,99,0.15);
    animation:readout-pulse 2s ease-in-out infinite;
    transition:background .4s ease, box-shadow .4s ease;
  }
  @keyframes readout-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
  .hero-readout-temp{font-weight:700;color:var(--ink);}
  .hero-readout-temp span{display:inline-block;min-width:2.6ch;text-align:right;}
  .hero-readout-status{letter-spacing:0.04em;}
  #heroBrand.is-heat ~ .hero-readout .hero-readout-dot{background:#C2410C;box-shadow:0 0 0 3px rgba(194,65,12,0.15);}
  #heroBrand.is-heat ~ .hero-readout{border-color:rgba(194,65,12,0.3);}

  .hero-headline{
    font-size:clamp(40px, 6.4vw, 92px);font-weight:600;color:var(--ink);
  }
  .hero-headline .line{display:block;overflow:hidden;}
  .hero-headline .line span{display:inline-block;transform:translateY(115%);}
  .hero-headline .accent{color:var(--navy);}
  .hero-sub{
    max-width:480px;margin:26px auto 0;font-size:16.5px;line-height:1.6;color:var(--ink-soft);
    opacity:0;
  }
  .hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;opacity:0;justify-content:center;}
  .scroll-cue{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    margin:56px auto 0;opacity:0;width:fit-content;
  }
  .scroll-cue .mono{font-size:10.5px;color:var(--ink-soft);letter-spacing:0.08em;}
  .scroll-cue .track{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden;}
  .scroll-cue .track::after{
    content:'';position:absolute;left:0;top:-40px;width:100%;height:40px;background:linear-gradient(var(--navy), transparent);
    animation:cue 1.9s ease-in-out infinite;
  }
  @keyframes cue{0%{top:-40px;}100%{top:40px;}}

  /* ---------- hero device (interactive AC widget) ---------- */
  /* ---------- hero mini controller (links to demo.html) ---------- */
  .hero-mini-controller{
    position:absolute;top:150px;right:40px;z-index:6;
    width:132px;padding:14px 12px 12px;border-radius:16px;
    background:var(--panel);border:1px solid var(--panel-edge);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    box-shadow:0 20px 40px -16px rgba(10,8,20,0.45);
    text-decoration:none;opacity:0;
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .hero-mini-controller:hover{transform:translateY(-4px);box-shadow:0 28px 50px -16px rgba(10,8,20,0.55);}
  .mc-screen{
    width:100%;background:#0E1F17;border-radius:8px;padding:8px 0;
    display:flex;flex-direction:column;align-items:center;gap:2px;
  }
  .mc-mode{font-family:'Space Mono';font-size:9px;letter-spacing:0.1em;color:var(--mint-dim);}
  .mc-temp{font-family:'Space Grotesk';font-size:22px;font-weight:700;color:var(--mint);line-height:1;}
  .mc-buttons{display:flex;align-items:center;gap:8px;}
  .mc-btn{
    width:26px;height:26px;border-radius:50%;background:#26212F;color:rgba(255,255,255,0.6);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;
  }
  .mc-power{color:var(--mint);box-shadow:0 0 0 2px var(--mint), 0 0 14px 1px rgba(124,240,196,0.5);}
  .mc-power svg{width:13px;height:13px;}
  .mc-label{font-family:'Space Mono';font-size:8.5px;letter-spacing:0.12em;color:rgba(255,255,255,0.35);}
  @media (max-width:860px){.hero-mini-controller{position:static;margin:32px auto 0;top:auto;right:auto;}}



  /* ================= SECTION SHARED ================= */
  .pad{padding:150px 0;}
  @media (max-width:768px){.pad{padding:96px 0;}}
  .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:70px;}
  @media (max-width:768px){.head-row{flex-direction:column;align-items:flex-start;gap:22px;}}
  .head-row h1, .head-row h2{font-size:clamp(30px,4vw,52px);font-weight:600;max-width:640px;}
  .head-row p{max-width:340px;color:var(--ink-soft);font-size:15px;line-height:1.65;}

  .reveal{opacity:0;transform:translateY(28px);}

  .trust-bar{background:var(--surface);border-bottom:1px solid var(--line);padding:44px 0 40px;}
  .trust-bar .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
  .trust-label{font-family:'Space Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);flex-shrink:0;}
  .trust-logos{display:flex;align-items:center;gap:42px;flex-wrap:wrap;}
  .trust-logos span{font-family:'Space Grotesk';font-weight:600;font-size:16px;color:var(--ink-soft);opacity:0.75;letter-spacing:0.01em;}

  .credentials-bar{background:var(--white);border-bottom:1px solid var(--line);padding:20px 0;}
  .credentials-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
  .credential-pill{
    display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
    background:var(--surface);border:1px solid var(--line);
    font-size:12px;font-weight:600;color:var(--ink);letter-spacing:0.01em;
  }
  .credential-pill svg{width:15px;height:15px;flex-shrink:0;}
  @media (max-width:640px){.credential-pill{font-size:11.5px;padding:8px 12px;}}

  /* ================= SERVICES ================= */
  #services{background:var(--surface);}
  .svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
  @media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.svc-grid{grid-template-columns:1fr;}}
  .svc-card{
    background:rgba(255,255,255,0.7);
    border:1px solid var(--line);
    border-radius:22px;padding:26px 22px 30px;
    min-height:300px;display:flex;flex-direction:column;justify-content:space-between;
    backdrop-filter:blur(6px);cursor:pointer;outline:none;
    transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s, border-color .4s, background .4s;
  }
  .svc-card:hover, .svc-card:focus-visible{
    transform:translateY(-8px);
    box-shadow:0 30px 60px -24px rgba(17,17,17,0.18);
    border-color:rgba(23,58,99,0.25);
    background:rgba(255,255,255,0.95);
  }
  .svc-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}
  .svc-icon svg{width:100%;height:100%;transition:transform .8s cubic-bezier(.16,1,.3,1);}
  .svc-card:hover .svc-icon svg{transform:rotate(22deg) scale(1.06);}
  .svc-card h3{font-size:19px;font-weight:600;margin-bottom:8px;}
  .svc-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
  .svc-num{font-family:'Space Mono';font-size:11px;color:var(--ink-soft);}
  .svc-more{
    display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--navy);
    opacity:0.7;transition:opacity .3s, transform .3s;
  }
  .svc-card:hover .svc-more{opacity:1;transform:translateX(3px);}

  /* ================= HOW WE WORK ================= */
  .process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;}
  @media (max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.process-grid{grid-template-columns:1fr;}}
  .process-step{background:var(--white);padding:32px 24px;}
  .process-icon{
    width:38px;height:38px;border-radius:11px;background:rgba(23,58,99,0.07);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;
  }
  .process-icon svg{width:19px;height:19px;}
  .process-num{font-family:'Space Mono';font-size:12px;color:var(--navy);letter-spacing:0.04em;}
  .process-step h4{font-family:'Space Grotesk';font-size:17px;font-weight:600;margin-top:14px;margin-bottom:8px;}
  .process-step p{font-size:13px;color:var(--ink-soft);line-height:1.55;}

  /* ================= CALCULATOR ================= */
  .calc-wrap{
    display:grid;grid-template-columns:1fr 0.85fr;gap:0;
    background:var(--white);border:1px solid var(--line);border-radius:26px;overflow:hidden;
  }
  @media (max-width:860px){.calc-wrap{grid-template-columns:1fr;}}
  .calc-inputs{padding:44px;}
  .calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .calc-inputs .field{margin-bottom:18px;}
  .calc-inputs label{
    display:block;font-family:'Space Mono';font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:8px;
  }
  .calc-inputs input, .calc-inputs select{
    width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
    background:var(--surface);font-family:'Inter';font-size:14.5px;color:var(--ink);
    transition:border-color .3s, box-shadow .3s;
  }
  .calc-inputs input:focus, .calc-inputs select:focus{
    outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(23,58,99,0.12);
  }
  .calc-output{
    background:var(--navy-deep);color:var(--white);padding:44px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .calc-output .eyebrow{color:var(--ice);}
  .calc-output .eyebrow::before{background:var(--ice);}
  .calc-kw{font-family:'Space Grotesk';font-weight:700;margin-top:14px;line-height:1;}
  .calc-kw span{font-size:clamp(56px,7vw,80px);color:var(--ice);}
  .calc-kw small{font-size:22px;color:rgba(255,255,255,0.6);margin-left:8px;}
  .calc-btu{font-size:14px;color:rgba(255,255,255,0.6);margin-top:10px;}
  .calc-unit{
    margin-top:22px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);font-size:14px;
  }
  .calc-unit b{color:var(--ice);}
  .calc-disclaimer{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.6;margin:20px 0 22px;}
  .calc-output .btn-primary{width:100%;justify-content:center;}

  /* ================= PROJECTS (horizontal) ================= */
  #projects{background:var(--white);}
  #projects .head-row{padding:0 40px;}
  .proj-track-wrap{overflow:hidden;}
  .proj-track{display:flex;gap:24px;padding:0 40px;width:max-content;}
  .proj-card{
    width:min(78vw, 620px);flex:0 0 auto;
    border-radius:26px;overflow:hidden;position:relative;
    height:520px;background:var(--dark-2);
  }
  .proj-card .bg{position:absolute;inset:0;}
  .proj-card .scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,13,17,0) 30%, rgba(10,13,17,0.92) 100%);}
  .proj-card .body{position:absolute;left:0;right:0;bottom:0;padding:34px;color:var(--white);}
  .proj-card .tag{font-family:'Space Mono';font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ice);margin-bottom:10px;display:block;}
  .proj-card h3{font-size:29px;font-weight:600;margin-bottom:16px;max-width:420px;}
  .proj-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;}
  .proj-stat b{display:block;font-family:'Space Mono';font-size:22px;color:var(--ice);}
  .proj-stat span{font-size:11px;color:rgba(255,255,255,0.6);letter-spacing:0.04em;}
  .drag-hint{margin:26px 40px 0;font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;}
  .drag-hint .bar{width:120px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px;}
  .drag-hint .bar i{position:absolute;left:0;top:0;height:100%;background:var(--navy);width:22%;border-radius:2px;}

  .proj-view{
    margin-top:22px;display:inline-flex;align-items:center;gap:6px;
    color:var(--white);font-size:13px;font-weight:600;
    padding:11px 18px;border-radius:100px;border:1px solid rgba(255,255,255,0.35);
    transition:background .35s, transform .35s;
  }
  .proj-view:hover{background:rgba(255,255,255,0.14);transform:translateX(2px);}

  /* ---------- case study modal ---------- */
  .cs-modal{position:fixed;inset:0;z-index:90;opacity:0;pointer-events:none;transition:opacity .4s;}
  .cs-modal.open{opacity:1;pointer-events:auto;}
  .cs-overlay{position:absolute;inset:0;background:rgba(10,13,17,0.6);backdrop-filter:blur(6px);}
  .cs-panel{
    position:absolute;right:0;top:0;bottom:0;width:min(560px, 92vw);
    background:var(--white);overflow-y:auto;
    transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);
  }
  .cs-modal.open .cs-panel{transform:translateX(0);}
  .cs-close{
    position:absolute;top:24px;right:24px;z-index:2;width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,0.9);color:var(--ink);display:flex;align-items:center;justify-content:center;
  }
  .cs-hero{height:260px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:var(--white);}
  .cs-hero .tag{font-family:'Space Mono';font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ice);display:block;margin-bottom:8px;}
  .cs-hero h3{font-size:28px;font-weight:600;max-width:420px;}
  .cs-body{padding:34px;}
  .cs-summary{font-size:15px;line-height:1.7;color:var(--ink-soft);}
  .cs-stats{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .cs-stats div b{display:block;font-family:'Space Mono';font-size:22px;color:var(--navy);}
  .cs-stats div span{font-size:11px;color:var(--ink-soft);}
  .cs-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-bottom:26px;}
  @media (max-width:480px){.cs-cols{grid-template-columns:1fr;}}
  .cs-cols h4{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;font-family:'Space Mono';}
  .cs-cols ul{list-style:none;}
  .cs-cols li{font-size:14px;padding:8px 0 8px 20px;position:relative;border-top:1px solid var(--line);}
  .cs-cols li:first-child{border-top:none;}
  .cs-cols li::before{content:'';position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--navy);}
  .cs-timeline{font-size:14px;color:var(--ink-soft);line-height:1.6;}
  .cs-quote{font-family:'Space Grotesk';font-size:19px;font-weight:500;line-height:1.5;color:var(--ink);border-left:2px solid var(--navy);padding-left:20px;}
  .cs-quote::after{content:'';}

  /* ================= SHOWROOM ================= */
  #showroom{
    background:radial-gradient(125% 125% at 50% 90%, #FFFFFF 40%, #475569 100%);
    color:var(--ink);padding:150px 0 130px;
  }
  #showroom .head-row p{color:var(--ink-soft);}
  .units-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:900px){.units-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.units-grid{grid-template-columns:1fr;}}
  .unit-card{
    position:relative;border-radius:20px;padding:26px 22px 24px;
    background:rgba(255,255,255,0.7);
    border:1px solid var(--line);
    cursor:pointer;transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .4s, background .4s;
    overflow:hidden;min-height:290px;
  }
  .unit-card::before{
    content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:220px;height:220px;
    background:radial-gradient(circle, rgba(23,58,99,0.12), transparent 70%);opacity:0;transition:opacity .5s;
  }
  .unit-card:hover{transform:translateY(-6px);border-color:rgba(23,58,99,0.28);background:rgba(255,255,255,0.95);}
  .unit-card:hover::before{opacity:1;}
  .unit-card.active{border-color:var(--navy);background:rgba(255,255,255,0.95);}
  .unit-visual{height:120px;display:flex;align-items:center;justify-content:center;position:relative;}
  .unit-visual-media{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
  .unit-visual svg{width:150px;height:70px;}
  .unit-photo{max-width:100%;max-height:100%;object-fit:contain;display:block;}
  .unit-visual .puff{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--navy);opacity:0;}
  .unit-brand{font-family:'Space Mono';font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
  .unit-name{font-size:17px;font-weight:600;margin-top:4px;}
  .unit-meta{font-size:12px;color:var(--ink-soft);margin-top:10px;}

  .showroom-controls{margin-top:64px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;}
  @media (max-width:900px){.showroom-controls{grid-template-columns:1fr;gap:44px;}}
  .ctrl-block .eyebrow{margin-bottom:16px;}
  .chip-row{display:flex;gap:10px;flex-wrap:wrap;}
  .chip{
    padding:10px 18px;border-radius:100px;font-size:13px;border:1px solid var(--line);
    background:var(--white);color:var(--ink-soft);transition:all .35s;
  }
  .chip:hover{border-color:rgba(23,58,99,0.3);color:var(--ink);}
  .chip.active{background:var(--navy);color:var(--white);border-color:var(--navy);font-weight:600;}
  .swatches{display:flex;gap:12px;margin-top:6px;}
  .swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:transform .3s, border-color .3s;}
  .swatch:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .swatch:hover{transform:scale(1.1);}
  .swatch.active{border-color:var(--navy);transform:scale(1.12);}

  .visualiser{
    border-radius:22px;overflow:hidden;height:340px;position:relative;
    background-color:#171410;background-size:cover;background-position:center;
    transition:background-image .5s ease;
    box-shadow:0 24px 50px -24px rgba(17,17,17,0.25);
  }
  .visualiser::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(10,8,6,0.12) 0%, rgba(10,8,6,0.1) 50%, rgba(10,8,6,0.6) 100%);
  }
  .visualiser .room-unit{
    position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:150px;height:70px;
    display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));z-index:1;
  }
  .visualiser .room-label{position:absolute;left:24px;bottom:22px;font-family:'Space Mono';font-size:12px;letter-spacing:0.06em;color:rgba(255,255,255,0.9);z-index:1;}
  .visualiser .airflow-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ice);}

  .feature-cloud{display:flex;flex-wrap:wrap;gap:14px;margin-top:60px;}
  .feature-pill{
    display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:100px;
    background:var(--white);border:1px solid var(--line);font-size:13.5px;color:var(--ink);
    animation:float-y 5s ease-in-out infinite;
  }
  .feature-pill svg{width:16px;height:16px;flex-shrink:0;}
  @keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

  .showroom-cta{
    margin-top:110px;text-align:center;
  }
  .showroom-cta h3{font-size:clamp(28px,4.4vw,54px);font-weight:600;max-width:780px;margin:0 auto 18px;color:var(--ink);}
  .showroom-cta p{color:var(--ink-soft);max-width:460px;margin:0 auto 34px;font-size:15px;line-height:1.6;}

  /* ================= WHY AMAC ================= */
  #why{background:var(--white);}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden;}
  @media (max-width:768px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-cell{background:var(--white);padding:46px 30px;text-align:left;}
  .stat-cell b{font-family:'Space Grotesk';font-size:clamp(34px,4.2vw,52px);font-weight:600;display:block;color:var(--navy);}
  .stat-cell span{font-size:12.5px;color:var(--ink-soft);letter-spacing:0.03em;}

  /* ================= FINAL CTA ================= */
  #final{
    background:var(--white);padding:190px 0 150px;text-align:center;
  }
  #final h1, #final h2{font-size:clamp(34px,6vw,80px);font-weight:600;max-width:820px;margin:0 auto 44px;}
  #final .lede{max-width:480px;margin:0 auto 56px;color:var(--ink-soft);font-size:15px;line-height:1.6;}

  .enquiry{
    max-width:600px;margin:0 auto;text-align:left;
    background:var(--surface);border:1px solid var(--line);border-radius:26px;
    padding:44px;position:relative;overflow:hidden;
  }
  .enquiry-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:560px){.enquiry-row{grid-template-columns:1fr;}}
  .field{margin-bottom:18px;}
  .field label{
    display:block;font-family:'Space Mono';font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:8px;
  }
  .field input, .field select, .field textarea{
    width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
    background:var(--white);font-family:'Inter';font-size:14.5px;color:var(--ink);
    transition:border-color .3s, box-shadow .3s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(23,58,99,0.12);
  }
  .field textarea{resize:vertical;min-height:96px;}
  .field.has-error input, .field.has-error select, .field.has-error textarea{border-color:#C0392B;}
  .field .err-msg{font-size:12px;color:#C0392B;margin-top:6px;display:none;}
  .field.has-error .err-msg{display:block;}
  .enquiry .btn-primary{width:100%;justify-content:center;margin-top:6px;position:relative;}
  .enquiry .btn-primary:disabled{opacity:0.75;cursor:not-allowed;}
  .btn-spinner{
    display:none;width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;
    animation:btn-spin .7s linear infinite;
  }
  .btn-primary.is-loading .btn-label{opacity:0;}
  .btn-primary.is-loading .btn-spinner{display:block;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;}
  @keyframes btn-spin{to{transform:rotate(360deg);}}
  .enquiry-note{font-size:12px;color:var(--ink-soft);margin-top:16px;text-align:center;}
  .enquiry-error{
    display:none;margin-top:16px;padding:14px 16px;border-radius:12px;
    background:rgba(192,57,43,0.08);border:1px solid rgba(192,57,43,0.25);
    color:#9A2A1E;font-size:13.5px;line-height:1.5;
  }
  .enquiry-error.show{display:block;}
  .enquiry-success{
    position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:44px;
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .5s, transform .5s;
  }
  .enquiry-success.show{opacity:1;pointer-events:auto;transform:translateY(0);}
  .enquiry-success .check{
    width:56px;height:56px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  }
  .enquiry-success h3{font-size:20px;font-weight:600;margin-bottom:10px;}
  .enquiry-success p{color:var(--ink-soft);font-size:14px;max-width:360px;line-height:1.6;}

  footer{background:var(--navy-deep);color:rgba(255,255,255,0.7);padding:80px 0 34px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,0.1);}
  @media (max-width:768px){.foot-grid{grid-template-columns:1fr 1fr;}}
  footer h4{color:var(--white);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:18px;font-weight:600;}
  footer ul{list-style:none;}
  footer li{margin-bottom:11px;font-size:14px;}
  footer li a:hover{color:var(--white);}
  .foot-logo{display:flex;align-items:center;gap:11px;color:var(--white);margin-bottom:16px;}
  .foot-social{display:flex;gap:14px;margin-top:20px;}
  .foot-social a{width:18px;height:18px;color:rgba(255,255,255,0.6);transition:color .3s;display:flex;}
  .foot-social a:hover{color:var(--ice);}
  .foot-social svg{width:100%;height:100%;}
  footer .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:12.5px;flex-wrap:wrap;gap:14px;}
  /* Companies Act trading disclosures — required on the website, so shown on every page. */
  .foot-company{color:rgba(255,255,255,0.55);line-height:1.7;max-width:760px;}
  @media (max-width:640px){.foot-company{font-size:11.5px;}}

  /* ================= CHAT WIDGET ================= */
  .chat-launcher{
    position:fixed;bottom:26px;right:26px;z-index:95;
    width:58px;height:58px;border-radius:50%;background:var(--navy);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 34px -10px rgba(23,58,99,0.55);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .chat-launcher:hover{transform:translateY(-3px) scale(1.04);}
  .chat-launcher-dot{
    position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;
    background:#5CE39B;border:2px solid var(--navy);
  }
  .chat-launcher.open .chat-launcher-dot{display:none;}

  .chat-panel{
    position:fixed;bottom:98px;right:26px;z-index:94;width:min(370px, 90vw);height:min(560px, 72vh);
    background:var(--white);border-radius:22px;box-shadow:0 40px 90px -20px rgba(10,13,17,0.35);
    border:1px solid var(--line);
    display:flex;flex-direction:column;overflow:hidden;
    opacity:0;transform:translateY(16px) scale(0.98);pointer-events:none;
    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  }
  .chat-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  @media (max-width:480px){.chat-panel{right:14px;bottom:86px;}}

  .chat-head{
    background:var(--navy-deep);color:var(--white);padding:18px 20px;
    display:flex;align-items:center;gap:12px;flex-shrink:0;
  }
  .chat-head-avatar{
    width:36px;height:36px;border-radius:50%;background:var(--ice);color:var(--navy-deep);
    display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;flex-shrink:0;
  }
  .chat-head h4{font-size:14.5px;font-weight:600;}
  .chat-head p{font-size:11.5px;color:rgba(255,255,255,0.55);margin-top:2px;}

  .chat-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;}
  .chat-msg{
    max-width:84%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;
  }
  .chat-msg.bot{background:var(--surface);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start;}
  .chat-msg.user{background:var(--navy);color:var(--white);border-bottom-right-radius:4px;align-self:flex-end;}
  .chat-msg a{color:var(--navy);font-weight:600;text-decoration:underline;}
  .chat-msg.bot a{color:var(--navy);}
  .chat-msg.user a{color:var(--ice);}

  .chat-chips{
    display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;flex-shrink:0;
    max-height:150px;overflow-y:auto;
  }
  .chat-chip{
    font-size:12px;padding:9px 14px;border-radius:100px;
    background:var(--surface);border:1px solid var(--line);color:var(--ink);
    text-align:left;line-height:1.3;
    transition:background .3s, border-color .3s;
  }
  .chat-chip:hover{background:var(--ice);border-color:var(--ice);}

  .chat-input-row{
    display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--line);flex-shrink:0;
  }
  .chat-input-row input{
    flex:1;padding:11px 14px;border-radius:100px;border:1px solid var(--line);
    background:var(--surface);font-size:13.5px;font-family:'Inter';
  }
  .chat-input-row input:focus{outline:none;border-color:var(--navy);}
  .chat-input-row button{
    width:38px;height:38px;border-radius:50%;background:var(--navy);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }


  :root{
    --wall-top:#342A47;
    --wall-bottom:#1E1830;
    --mint:#7CF0C4;
    --mint-dim:#4FAE8C;
    --cyan:#8FE3E0;
    --panel:#1B1826;
    --panel-edge:#332C46;
  }
  .ac-frame{
    width:100%;
    max-width:920px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .ac-bezel{
    width:100%;
    border-radius:22px;
    padding:10px;
    background:linear-gradient(145deg,#3a3252,#171225);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .ac-acStage-wrap{
    width:100%;
    aspect-ratio:1200/750;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    background:var(--wall-bottom);
    touch-action: pan-y;
  }
  /* Scoped to the AC widget stage. This was previously an unscoped `svg{width:100%;height:100%}`
     rule, which overrode the width/height attributes on every icon on the site — most visibly
     the utility-bar phone icon, which rendered full-bar width. Every SVG that genuinely needs
     to fill its container (.svc-icon, .header-social, .foot-social, .process-flow, #ductRail)
     has its own sizing rule, so keep this scoped. */
  .ac-acStage-wrap svg{
    width:100%;
    height:100%;
    display:block;
  }
  .acHint{
    font-size:13px;
    letter-spacing:.02em;
    color:#a79fc4;
    text-align:center;
    opacity:1;
    transition:opacity .6s ease;
    min-height:18px;
  }
  .acHint.hidden{opacity:0;}

  /* --- nav arrows --- */
  .ac-nav-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(20,16,32,.55);
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.14);
    color:#e7e2f5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease, background .2s ease;
  }
  .ac-nav-arrow:hover{ background:rgba(20,16,32,.8); }
  .ac-nav-arrow:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
  .ac-nav-arrow.right{ right:14px; }
  .ac-nav-arrow.left{ left:14px; }
  .ac-nav-arrow.show{ opacity:1; pointer-events:auto; }

  /* --- Interactive SVG elements --- */
  .svg-btn{ cursor:pointer; }
  .svg-btn:focus-visible{ outline:none; }
  .svg-btn:focus-visible .btn-ring{
    stroke:var(--mint);
    stroke-width:2.5;
  }

  .vent-slat{
    transition:transform .7s cubic-bezier(.4,0,.2,1);
    transform-box:fill-box;
    transform-origin:center;
  }
  #acStage.active .vent-slat{
    transform:scaleY(.72) translateY(1.5px);
  }

  #led, #outdoorLed{ transition:fill .5s ease, filter .5s ease; }
  #acStage.active #led{ fill:#6CF2B0; filter:drop-shadow(0 0 4px #6CF2B0); }
  #acStage.active #outdoorLed{ fill:#6CF2B0; filter:drop-shadow(0 0 4px #6CF2B0); }

  #powerRing{ transition:fill .4s ease, stroke .4s ease, filter .4s ease; }
  #acStage.active #powerRing{
    fill:#233b34;
    stroke:var(--mint);
    filter:drop-shadow(0 0 7px rgba(124,240,196,.55));
  }
  #powerIcon{ transition:stroke .4s ease; }
  #acStage.active #powerIcon{ stroke:var(--mint); }

  .adj-btn{ transition:opacity .3s ease; opacity:.35; pointer-events:none; }
  #acStage.active .adj-btn{ opacity:1; pointer-events:auto; }

  .mist-puff{
    opacity:0;
    transition:opacity 1s ease;
    transform-box:fill-box;
    transform-origin:center;
  }
  #acStage.active .mist-puff{ opacity:.5; animation:drift 3.2s ease-in-out infinite; }
  .mist-puff:nth-child(2){animation-delay:.4s;}
  .mist-puff:nth-child(3){animation-delay:.9s;}
  .mist-puff:nth-child(4){animation-delay:1.3s;}
  @keyframes drift{
    0%{ transform:translate(0,0); opacity:0; }
    15%{ opacity:.5; }
    100%{ transform:translate(-14px, 60px); opacity:0; }
  }

  .air-streak{ opacity:0; stroke-dasharray:10 14; transition:opacity .8s ease; }
  #acStage.active .air-streak{ opacity:.55; animation:flow 1.4s linear infinite; }
  @keyframes flow{ to{ stroke-dashoffset:-48; } }

  #acStatusLabel{ transition:fill .4s ease; }
  #acStage.active #acStatusLabel{ fill:var(--mint); }

  /* outdoor unit */
  #fanBlades{
    transform-box:fill-box;
    transform-origin:center;
  }
  #acStage.active #fanBlades{ animation:spin 1.6s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .heat-puff{
    opacity:0;
    transition:opacity 1s ease;
    transform-box:fill-box;
    transform-origin:center;
  }
  #acStage.active .heat-puff{ opacity:.4; animation:rise 3s ease-in-out infinite; }
  .heat-puff:nth-child(2){animation-delay:.6s;}
  .heat-puff:nth-child(3){animation-delay:1.2s;}
  @keyframes rise{
    0%{ transform:translate(0,0); opacity:0; }
    20%{ opacity:.4; }
    100%{ transform:translate(10px,-46px); opacity:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .mist-puff, .air-streak, .vent-slat, #powerRing, #fanBlades, .heat-puff{ animation:none !important; transition-duration:.15s !important; }
  }


  /* ================= SERVICE LANDING / FAQ / LEGAL PAGES ================= */
  .breadcrumb{display:flex;align-items:center;gap:10px;font-family:'Space Mono';font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-soft);flex-wrap:wrap;}
  .breadcrumb a{color:var(--ink-soft);transition:color .3s;}
  .breadcrumb a:hover{color:var(--navy);}
  .breadcrumb span[aria-hidden]{opacity:0.45;}
  .breadcrumb [aria-current]{color:var(--navy);}

  .svc-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  @media (max-width:768px){.svc-detail-grid{grid-template-columns:1fr;}}
  .svc-detail-item{
    background:rgba(255,255,255,0.7);border:1px solid var(--line);border-radius:20px;padding:28px 26px;
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s;
  }
  .svc-detail-item:hover{transform:translateY(-4px);border-color:rgba(23,58,99,0.22);}
  .svc-detail-item h3{font-size:17px;font-weight:600;margin-bottom:10px;}
  .svc-detail-item p{font-size:14px;color:var(--ink-soft);line-height:1.6;}

  .svc-aside{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  @media (max-width:768px){.svc-aside{grid-template-columns:1fr;}}
  .svc-aside > div{background:var(--surface);border-radius:20px;padding:30px 28px;}
  .svc-aside h3{font-size:13px;letter-spacing:0.05em;text-transform:uppercase;font-family:'Space Mono';color:var(--navy);margin-bottom:12px;}
  .svc-aside p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;}

  .svc-nav-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:768px){.svc-nav-row{grid-template-columns:1fr;}}
  .svc-nav-card{
    display:block;background:rgba(255,255,255,0.7);border:1px solid var(--line);border-radius:20px;padding:26px 24px;
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s, background .4s;
  }
  .svc-nav-card:hover{transform:translateY(-5px);border-color:rgba(23,58,99,0.25);background:rgba(255,255,255,0.95);}
  .svc-nav-card h3{font-size:17px;font-weight:600;margin:8px 0 12px;}

  .faq-list{max-width:820px;margin-top:12px;}
  .faq-item{
    border-bottom:1px solid var(--line);padding:4px 0;
  }
  .faq-item summary{
    cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
    font-size:17px;font-weight:600;color:var(--ink);transition:color .3s;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:hover{color:var(--navy);}
  .faq-item summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px;}
  .faq-item summary::after{
    content:'';position:absolute;right:6px;top:50%;width:10px;height:10px;
    border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:translateY(-70%) rotate(45deg);transition:transform .35s ease;
  }
  .faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
  .faq-answer{padding:0 40px 26px 0;}
  .faq-answer p{font-size:15px;color:var(--ink-soft);line-height:1.7;}

  .legal-wrap{max-width:760px;}
  .legal-wrap h1{font-size:clamp(30px,4.4vw,52px);font-weight:600;margin-bottom:10px;}
  .legal-updated{font-family:'Space Mono';font-size:12px;color:var(--ink-soft);margin-bottom:40px;}
  .legal-wrap h2{font-size:19px;font-weight:600;margin:38px 0 12px;}
  .legal-wrap p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin-bottom:14px;}
  .legal-wrap a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
  .legal-todo{background:#FFF3CD;color:#7A5B00;padding:2px 8px;border-radius:5px;font-family:'Space Mono';font-size:12.5px;font-weight:700;}

  .foot-legal{display:flex;gap:20px;}
  .foot-legal a{color:rgba(255,255,255,0.7);transition:color .3s;}
  .foot-legal a:hover{color:var(--white);}

  /* ================= MOTION & INTERACTION ADDITIONS ================= */

  /* --- back to top --- */
  .back-to-top{
    position:fixed;right:26px;bottom:100px;z-index:60;
    width:46px;height:46px;border-radius:50%;
    background:var(--navy);color:var(--white);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 28px -10px rgba(23,58,99,0.55);
    opacity:0;pointer-events:none;transform:translateY(12px) scale(0.9);
    transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1), background .3s;
  }
  .back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .back-to-top:hover{background:var(--navy-deep);transform:translateY(-3px) scale(1.05);}
  .back-to-top:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .back-to-top svg{width:19px;height:19px;}
  @media (max-width:640px){.back-to-top{right:18px;bottom:88px;width:42px;height:42px;}}

  /* --- cursor spotlight on cards --- */
  .has-spotlight{position:relative;isolation:isolate;}
  .has-spotlight::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
               rgba(23,58,99,0.09), transparent 62%);
    opacity:0;transition:opacity .35s ease;
  }
  .has-spotlight:hover::after{opacity:1;}

  /* --- trust bar marquee --- */
  /* The viewport clips; the track holds the original row plus one duplicate and slides by
     exactly 50%, so the second copy lands where the first began — a seamless loop. */
  .trust-viewport{overflow:hidden;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  .trust-track{display:flex;width:max-content;animation:trust-scroll 38s linear infinite;will-change:transform;}
  .trust-track .trust-logos{flex-wrap:nowrap;padding-right:42px;}
  .trust-viewport:hover .trust-track{animation-play-state:paused;}
  @keyframes trust-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){
    .trust-track{animation:none;width:auto;}
    .trust-track .trust-logos[aria-hidden="true"]{display:none;}
  }

  /* --- work page: sector filters --- */
  .proj-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .proj-filters .chip{cursor:pointer;font-family:inherit;}
  .proj-count{font-family:'Space Mono';font-size:12px;color:var(--ink-soft);margin-bottom:26px;}

  /* --- richer focus ring sitewide (keyboard users) --- */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--navy);outline-offset:3px;border-radius:6px;
  }

  /* ================= SERVICES DROPDOWN ================= */
  /* Opens on hover and on keyboard focus (:focus-within), so it needs no JavaScript. */
  .navitem{position:relative;display:inline-flex;align-items:center;}
  .navitem .navlink{display:inline-flex;align-items:center;gap:5px;}
  .nav-caret{width:13px;height:13px;transition:transform .3s ease;flex-shrink:0;}
  .navitem:hover .nav-caret, .navitem:focus-within .nav-caret{transform:rotate(180deg);}
  .dropdown{
    position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
    display:flex;flex-direction:column;min-width:232px;padding:10px;
    background:var(--white);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 24px 48px -18px rgba(17,17,17,0.22);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .28s;
    z-index:40;
  }
  /* a small bridge so the pointer can travel from the link to the panel without it closing */
  .navitem::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px;}
  .navitem:hover .dropdown, .navitem:focus-within .dropdown{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,4px);
  }
  .dropdown a{
    padding:10px 14px;border-radius:10px;font-size:14px;color:var(--ink);
    transition:background .25s, color .25s, padding-left .25s;white-space:nowrap;
  }
  .dropdown a:hover{background:var(--surface);color:var(--navy);padding-left:18px;}
  .dropdown a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
  .dropdown-all{
    margin-top:6px;padding-top:14px !important;border-top:1px solid var(--line);
    border-radius:0 !important;font-weight:600;color:var(--navy) !important;font-size:13px !important;
  }
  .dropdown-all:hover{background:transparent !important;padding-left:14px !important;}
  @media (prefers-reduced-motion: reduce){
    .dropdown{transition:none;} .nav-caret{transition:none;}
  }

  /* mobile menu: nested service links */
  .mobile-sublinks{display:flex;flex-direction:column;gap:2px;margin:-6px 0 8px 16px;padding-left:14px;border-left:1px solid var(--line);}
  .mobile-sublinks a{font-size:15px;color:var(--ink-soft);padding:7px 0;transition:color .25s;}
  .mobile-sublinks a:hover{color:var(--navy);}

  /* ================= v2 CRAFT PASS ================= */

  /* thin brand scrollbar (desktop) */
  @media (pointer:fine){
    ::-webkit-scrollbar{width:10px;}
    ::-webkit-scrollbar-track{background:var(--surface);}
    ::-webkit-scrollbar-thumb{background:rgba(23,58,99,0.35);border-radius:10px;border:2px solid var(--surface);}
    ::-webkit-scrollbar-thumb:hover{background:var(--navy);}
  }

  /* split-word heading reveal (applied by JS only when motion is allowed) */
  .sw-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.12em;margin-bottom:-0.12em;}
  .sw-word{display:inline-block;transform:translateY(112%);will-change:transform;}

  /* primary button: sheen sweep + magnetic pull (fine pointers) */
  .btn{position:relative;overflow:hidden;}
  .btn-primary::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-18deg);transition:left .65s cubic-bezier(.16,1,.3,1);pointer-events:none;
  }
  .btn-primary:hover::after{left:130%;}
  @media (hover:hover) and (pointer:fine){
    .btn-primary{transform:translate(var(--tx,0px), var(--ty,0px));}
    .btn-primary:hover{transform:translate(var(--tx,0px), calc(var(--ty,0px) - 2px));}
  }

  /* process flow line — drawn by scroll, desktop only */
  .process-flow{position:relative;height:34px;margin:0 10% 30px;}
  @media (max-width:900px){.process-flow{display:none;}}
  .process-flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  .pf-track{stroke:var(--line);stroke-width:2;fill:none;}
  .pf-draw{stroke:var(--navy);stroke-width:2;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000;}
  .pf-node{
    position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
    background:var(--white);border:2px solid var(--navy);box-shadow:0 0 0 4px rgba(217,242,255,0.55);
  }

  /* closing CTA band */
  .cta-band{
    position:relative;background:var(--navy-deep);color:var(--white);
    padding:150px 0 160px;text-align:center;overflow:hidden;
  }
  .cta-band::before{
    content:'';position:absolute;left:0;right:0;top:76px;height:1px;
    background:repeating-linear-gradient(90deg, rgba(217,242,255,0.28) 0 8px, transparent 8px 20px);
    animation:cta-flow 3.2s linear infinite;opacity:0.55;
  }
  @keyframes cta-flow{to{transform:translateX(20px);}}
  .cta-glow{
    position:absolute;left:50%;top:-22%;transform:translateX(-50%);
    width:min(900px,120vw);height:520px;pointer-events:none;filter:blur(10px);
    background:radial-gradient(ellipse at center, rgba(217,242,255,0.14), transparent 65%);
  }
  .cta-band .wrap{position:relative;z-index:1;}
  .cta-band .eyebrow{justify-content:center;}
  .cta-band h2{
    font-size:clamp(38px,6.4vw,88px);font-weight:600;letter-spacing:-0.025em;
    max-width:900px;margin:22px auto 0;
  }
  .cta-sub{max-width:470px;margin:24px auto 0;color:rgba(255,255,255,0.65);font-size:15.5px;line-height:1.65;}
  .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px;}
  .cta-band .btn-primary{background:var(--ice);color:var(--navy-deep);}
  .cta-band .btn-primary:hover{box-shadow:0 14px 34px -10px rgba(217,242,255,0.45);}
  .cta-micro{
    margin-top:36px;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:rgba(255,255,255,0.42);
  }

  /* footer watermark */
  footer{position:relative;overflow:hidden;}
  footer .wrap{position:relative;z-index:1;}
  .foot-watermark{
    position:absolute;left:50%;bottom:0.04em;transform:translateX(-50%);
    font-family:'Space Grotesk';font-weight:700;line-height:1;white-space:nowrap;
    font-size:clamp(140px,26vw,380px);letter-spacing:-0.03em;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.07);
    pointer-events:none;user-select:none;
  }
  @supports not (-webkit-text-stroke:1px black){.foot-watermark{color:rgba(255,255,255,0.035);}}

  /* legal at-a-glance */
  .legal-glance{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:22px 24px;margin:0 0 36px;
  }
  .legal-glance-title{
    font-family:'Space Mono';font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--navy);margin-bottom:12px;
  }
  .legal-glance ul{list-style:none;}
  .legal-glance li{
    font-size:14px;color:var(--ink);line-height:1.6;
    padding-left:18px;position:relative;margin-bottom:8px;
  }
  .legal-glance li:last-child{margin-bottom:0;}
  .legal-glance li::before{
    content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
    border-radius:2px;background:var(--ice);border:1px solid var(--navy);
  }

  /* ================= CONTENT PLACEHOLDERS =================
     Deliberate, designed stand-ins for content that must come from the client
     (photography, verified accreditations, real figures, real quotes).
     Everything listed in CONTENT_WANTED.md renders through one of these. */
  .ph{
    position:relative;border:1.5px dashed rgba(23,58,99,0.35);border-radius:14px;
    background:
      repeating-linear-gradient(45deg, rgba(23,58,99,0.035) 0 10px, transparent 10px 20px),
      var(--surface);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;text-align:center;padding:22px 18px;
  }
  .ph-label{
    font-family:'Space Mono';font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--navy);background:var(--ice);padding:5px 12px;border-radius:100px;font-weight:700;
  }
  .ph-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.55;max-width:420px;}
  .ph-strip{width:100%;padding:18px;}
  .ph-media{position:absolute;inset:0;border-radius:0;border:none;background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px);}
  .ph-media .ph-label{background:rgba(217,242,255,0.92);}
  .ph-media .ph-desc{color:rgba(255,255,255,0.75);}
  .ph-badge{
    position:absolute;top:16px;left:16px;z-index:2;
    font-family:'Space Mono';font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--navy);background:rgba(217,242,255,0.92);padding:5px 11px;border-radius:100px;font-weight:700;
  }
  .ph-stat{min-height:100%;justify-content:center;}
  .stat-grid .ph{border-radius:0;background:
      repeating-linear-gradient(45deg, rgba(23,58,99,0.035) 0 10px, transparent 10px 20px),
      var(--white);border-width:0 0 0 0;border-style:none;outline:1.5px dashed rgba(23,58,99,0.3);outline-offset:-10px;}
  .unit-visual .ph{position:absolute;inset:8px;padding:12px;gap:4px;}
  .unit-visual .ph .ph-desc{font-size:11px;}
  .room-unit .ph{padding:10px 12px;gap:3px;background:rgba(246,247,248,0.92);}
  .room-unit .ph .ph-desc{font-size:10.5px;max-width:220px;}
  .cs-ph{margin-top:26px;}

  /* Explicit sizes for icons that previously inherited the unscoped svg rule */
  .utility-bar svg{width:13px;height:13px;flex-shrink:0;}
  .foot-social a svg, .header-social a svg{width:100%;height:100%;}
  .skip-link svg{width:14px;height:14px;}

  /* ================= HERO BRAND LOCKUP (mobile + tablet) =================
     Below 900px the hero reproduces the real logo lockup: the badge from the logo file,
     the existing gradient/shimmer AMAC wordmark in place of the logo's flat one, and the
     strapline set as live text (sharper than the raster, and readable to screen readers
     via the surrounding content). Desktop keeps the oversized wordmark alone. */
  .hero-brand-badge{display:none;}
  .hero-brand-strap{display:none;}

  @media (max-width:900px){
    .hero-brand{flex-direction:column;gap:0;}
    .hero-brand-badge{
      display:block;position:relative;z-index:1;
      width:clamp(52px,13vw,74px);height:auto;
      margin-bottom:clamp(10px,2.4vw,16px);
    }
    .hero-brand-text{
      font-size:clamp(58px,17vw,120px);
      line-height:0.9;margin-top:0;
    }
    .hero-brand-strap{
      display:flex;flex-direction:column;align-items:center;gap:3px;
      position:relative;z-index:1;margin-top:clamp(8px,2.2vw,14px);
      font-family:'Space Mono';text-transform:uppercase;
      color:var(--ink-soft);line-height:1.3;
    }
    .hero-brand-strap span:first-child{
      font-size:clamp(10px,2.6vw,12.5px);letter-spacing:0.16em;color:var(--ink);
    }
    .hero-brand-strap span:last-child{
      font-size:clamp(8.5px,2.1vw,10.5px);letter-spacing:0.2em;
    }
    /* the logo strapline replaces the near-identical kicker line on these sizes */
    .hero-kicker{display:none;}
    .hero-brand-glow{height:clamp(200px,46vw,280px);}
  }

  /* heating mode tints the strapline with the wordmark */
  #heroBrand.is-heat .hero-brand-strap span:first-child{color:#7C2D12;}

  /* ================= REVIEW-PASS ADDITIONS ================= */

  /* honeypot: off-screen, not display:none (some bots skip hidden inputs) */
  .hp-field{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}

  /* "prefer to talk?" row on the contact page */
  .talk-row{
    display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
    margin:26px auto 40px;font-size:14px;color:var(--ink-soft);
  }
  .talk-item a{color:var(--navy);font-weight:600;}
  .talk-item a:hover{opacity:0.75;}
  .talk-item{display:flex;align-items:center;gap:7px;}
  .talk-item + .talk-item::before{content:'·';color:var(--line);margin-right:19px;}

  /* consolidated page title (replaces per-page inline clamps) */
  .page-title{font-size:clamp(32px,5vw,64px);font-weight:600;letter-spacing:-0.02em;}

  /* process nodes light as the drawn line reaches them */
  .pf-node{transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;}
  .pf-node.lit{background:var(--navy);box-shadow:0 0 0 4px rgba(217,242,255,0.9);}

  /* calculator: show-the-working + sanity note */
  .calc-basis{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.55;}
  .calc-sanity{
    display:none;font-size:12.5px;color:#7C2D12;background:#FDF1EC;
    border:1px solid #F0D9CE;border-radius:10px;padding:10px 13px;margin-top:12px;
  }
  .calc-sanity.show{display:block;}

  /* CTA band email line */
  .cta-email{margin-top:18px;font-size:14px;}
  .cta-email a{color:rgba(217,242,255,0.85);font-weight:600;border-bottom:1px solid rgba(217,242,255,0.3);}
  .cta-email a:hover{border-bottom-color:rgba(217,242,255,0.8);}

  /* hero mini controller: make it read as a link */
  .mc-try{
    display:block;text-align:center;margin-top:8px;
    font-family:'Space Mono';font-size:9.5px;letter-spacing:0.14em;color:var(--navy);
    opacity:0.75;transition:opacity .3s;
  }
  .hero-mini-controller:hover .mc-try{opacity:1;}


  /* ================= COMPLETED JOBS (Work page) ================= */
  .job-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .job-count{font-family:'Space Mono';font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:30px;}
  .jobs-empty{text-align:center;color:var(--ink-soft);padding:60px 0;}

  .jobs-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:26px;padding-bottom:20px;
  }
  @media (max-width:700px){ .jobs-grid{grid-template-columns:1fr;gap:20px;} }

  .job-card{opacity:0;}
  .job-card-btn{
    display:block;width:100%;text-align:left;padding:0;border:1px solid var(--line);
    background:var(--white);border-radius:18px;overflow:hidden;cursor:pointer;
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s;
  }
  .job-card-btn:hover{transform:translateY(-5px);box-shadow:0 22px 50px -24px rgba(17,17,17,0.3);border-color:rgba(23,58,99,0.35);}
  .job-card-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}

  .job-media{
    display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface);
  }
  .job-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .job-card-btn:hover .job-media img{transform:scale(1.05);}
  .job-media .ph{position:absolute;inset:0;border-radius:0;border:none;}
  .job-photo-count{
    position:absolute;right:12px;bottom:12px;background:rgba(17,17,17,0.7);color:#fff;
    font-size:10px;letter-spacing:0.1em;padding:5px 10px;border-radius:100px;
  }

  .job-body{display:block;padding:22px 22px 26px;}
  .job-body .tag{
    display:inline-block;font-family:'Space Mono';font-size:10px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--navy);margin-bottom:10px;
  }
  .job-body h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;line-height:1.25;}
  .job-summary{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-top:10px;}
  .job-card-meta{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:14px;}
  .job-open{
    display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--navy);
    transition:transform .3s;
  }
  .job-card-btn:hover .job-open{transform:translateX(4px);}
  .job-card.is-placeholder .job-card-btn{border-style:dashed;border-color:rgba(23,58,99,0.35);}

  /* ---- job modal ---- */
  .job-modal{position:fixed;inset:0;z-index:130;display:none;}
  .job-modal.open{display:block;}
  .job-overlay{position:absolute;inset:0;background:rgba(10,16,26,0.72);backdrop-filter:blur(4px);}
  .job-panel{
    position:relative;max-width:880px;margin:4vh auto;max-height:92vh;overflow-y:auto;
    background:var(--white);border-radius:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,0.5);
  }
  @media (max-width:700px){ .job-panel{margin:0;border-radius:0;max-height:100vh;height:100vh;} }
  .job-close{
    position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
    border:none;background:rgba(255,255,255,0.92);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.16);
  }
  .job-close:hover{background:#fff;}

  .job-gallery{position:relative;background:var(--surface);aspect-ratio:16/10;overflow:hidden;}
  @media (max-width:700px){ .job-gallery{aspect-ratio:4/3;} }
  .job-stage{width:100%;height:100%;}
  .job-stage img{width:100%;height:100%;object-fit:cover;display:block;}
  .job-stage .ph{position:absolute;inset:0;border-radius:0;border:none;}
  .job-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
    border:none;background:rgba(255,255,255,0.9);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.18);
  }
  .job-nav:hover{background:#fff;}
  .job-nav.prev{left:14px;} .job-nav.next{right:14px;}
  .job-counter{
    position:absolute;left:14px;bottom:14px;background:rgba(17,17,17,0.7);color:#fff;
    font-size:10.5px;letter-spacing:0.1em;padding:5px 11px;border-radius:100px;
  }
  .job-thumbs{display:flex;gap:8px;padding:12px 14px 0;overflow-x:auto;}
  .job-thumbs:empty{display:none;}
  .job-thumbs button{
    flex:0 0 72px;height:54px;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;
    border:2px solid transparent;background:var(--surface);
  }
  .job-thumbs button.active{border-color:var(--navy);}
  .job-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}

  .job-detail{padding:26px 32px 36px;}
  @media (max-width:700px){ .job-detail{padding:22px 20px 40px;} }
  .job-detail .tag{
    display:inline-block;font-family:'Space Mono';font-size:10.5px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--navy);
  }
  .job-detail h3{font-size:clamp(22px,3.4vw,32px);font-weight:600;letter-spacing:-0.015em;margin-top:10px;}
  .job-meta{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;}
  .job-detail p{font-size:15px;line-height:1.7;color:var(--ink);margin-top:16px;}
  .job-detail h4{
    font-family:'Space Mono';font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--navy);margin-top:28px;
  }
  .job-detail ul{list-style:none;margin-top:12px;}
  .job-detail li{
    font-size:14.5px;line-height:1.6;color:var(--ink);padding-left:20px;position:relative;margin-bottom:9px;
  }
  .job-detail li::before{
    content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;
    background:var(--ice);border:1px solid var(--navy);
  }
  .job-cta{margin-top:30px;}

  /* meta lines collapse when a job has no location/date */
  .job-card-meta:empty, .job-meta:empty{display:none;}

  /* ================= RECENT WORK STRIP (homepage) =================
     Explicit pixel heights rather than aspect-ratio: predictable on every engine,
     and it keeps this band a quiet strip rather than a wall of photographs. */
  .trust-bar .wrap{display:block;}
  .recent-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:16px;
  }
  .recent-all{font-size:13px;font-weight:600;color:var(--navy);transition:transform .3s;display:inline-block;}
  .recent-all:hover{transform:translateX(4px);}

  .recent-strip{
    display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start;
  }
  .recent-item{display:block;min-width:0;}
  .recent-item img{
    display:block;width:100%;height:132px;object-fit:cover;border-radius:10px;
    background:var(--surface);
    transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s;
  }
  .recent-item:hover img{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(17,17,17,0.4);}
  .recent-cap{display:block;margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
  .recent-cap b{
    display:block;font-family:'Space Mono';font-size:9.5px;letter-spacing:0.11em;
    text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:2px;
  }

  @media (max-width:900px){
    /* Two tiles per row, small and tidy — no horizontal scroll, no oversized photos.
       The fifth tile becomes a link through to the Work page. */
    .recent-strip{grid-template-columns:1fr 1fr;gap:12px;}
    .recent-item img{height:104px;border-radius:9px;}
    .recent-item:nth-child(n+5){display:none;}
    .recent-cap{font-size:11px;margin-top:7px;}
    .recent-cap b{font-size:9px;}
  }
  @media (max-width:400px){
    .recent-item img{height:92px;}
  }

  /* Desktop: lift the footer watermark clear of the divider rule above the copyright row,
     which otherwise strikes straight through the letterforms. The offset matches the height
     of that bottom band (28px padding + line + 34px footer padding). Mobile is unaffected —
     there the watermark already sits below the line. */
  @media (min-width:769px){
    .foot-watermark{bottom:96px;}
  }

  /* ================= EXPERIENCE CENTRE — unit sizing on the room backgrounds =================
     Unit photos are all framed on a common 3:1 canvas, so the wall unit can be sized by width
     and left to find its own height. Previously fixed at 150x70px, which rendered the unit
     small and sitting too low on the wall. */
  .visualiser .room-unit{
    top:26%;
    width:clamp(96px, 23%, 215px);
    height:auto;
  }
  .visualiser .room-unit img{width:100%;height:auto;display:block;}
  @media (max-width:700px){
    .visualiser .room-unit{top:27%;width:32%;}
  }

  /* finish name under the swatches, and the finish count on each unit card */
  .swatch-note{
    margin-top:12px;font-family:'Space Mono';font-size:11px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .unit-finishes{
    margin-top:8px;font-family:'Space Mono';font-size:9.5px;letter-spacing:0.11em;
    text-transform:uppercase;color:var(--navy);opacity:0.75;
  }
  .swatch{position:relative;}
  .swatch.active::after{
    content:'';position:absolute;inset:-5px;border-radius:50%;
    border:1.5px solid var(--navy);pointer-events:none;
  }

  /* shown only when FORM_LIVE is false on the contact page */
  .form-offline{
    background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--navy);
    border-radius:12px;padding:16px 18px;margin-bottom:24px;
    font-size:14px;line-height:1.6;color:var(--ink);
  }
  .form-offline a{color:var(--navy);font-weight:600;}
  .enquiry:has(input:disabled){opacity:0.55;}

  /* ================= MOBILE MENU — layout fixes =================
     Previously: centred content that overflowed off both ends of the screen, oversized type,
     and the fixed header's logo drawing on top of the first menu item. */
  .mobile-menu{
    justify-content:flex-start;
    padding:calc(var(--header-h, 118px) + 14px) 26px 40px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .mobile-menu a.navlink{
    font-size:clamp(22px, 6.4vw, 30px);
    padding:15px 0;
    line-height:1.15;
  }
  /* The header stays above the menu so the close button works — so hide the logo instead. */
  body.menu-open header .logo{opacity:0;pointer-events:none;}
  body.menu-open header .utility-bar{max-height:0;opacity:0;}
  body.menu-open header .utility-bar .wrap{padding:0;}

  .mobile-menu .mobile-sublinks{
    display:flex;flex-direction:column;
    border-left:1px solid var(--line);
    margin:2px 0 6px;padding:8px 0 8px 16px;
  }
  .mobile-menu .mobile-sublinks a{
    font-size:15px;color:var(--ink-soft);padding:9px 0;
    transition:color .25s;
  }
  .mobile-menu .mobile-sublinks a:active{color:var(--navy);}
  .mobile-menu .mobile-phone{
    order:-1;margin-bottom:18px;font-size:14px;color:var(--navy);
  }
  .mobile-menu .btn{margin-top:26px;align-self:stretch;text-align:center;}

  /* ================= HORIZONTAL OVERFLOW GUARD =================
     A stray element wider than the viewport was making the page scroll sideways on phones,
     which left a white band down the right of every full-width section. I could not isolate
     the single culprit by inspection, so this clamps the document itself. It is a backstop,
     not a diagnosis — if the strip reappears, the element is still there and worth finding
     with the browser console.
     max-width on both html and body is deliberate: overflow-x alone on body is ignored by
     some mobile browsers when html is the scrolling element. */
  html, body{max-width:100%;overflow-x:hidden;}

  /* ================= PHOTO HERO (service pages) =================
     Ready for real photography. Add class="has-photo-hero" to <body> and set the image with
     style="--hero-image:url('assets/heroes/whatever.jpg')" on .page-hero. The header switches
     to its light logo and gains a scrim so the nav stays readable over any image. */
  .photo-hero{
    position:relative;
    background-image:linear-gradient(90deg, rgba(10,20,35,0.86) 0%, rgba(10,20,35,0.60) 48%, rgba(10,20,35,0.20) 100%), var(--hero-image);
    background-size:cover;
    background-position:center;
    color:var(--white);
  }
  @media (max-width:700px){
    /* Stronger scrim on small screens — the text sits over more of the image. */
    .photo-hero{background-image:linear-gradient(180deg, rgba(10,20,35,0.80), rgba(10,20,35,0.72)), var(--hero-image);}
  }
  .photo-hero .breadcrumb, .photo-hero .breadcrumb a{color:rgba(255,255,255,0.75);}
  .photo-hero .breadcrumb a:hover{color:var(--white);}
  .photo-hero .breadcrumb span{color:rgba(255,255,255,0.4);}
  .photo-hero h1{color:var(--white);}
  .photo-hero .lede{color:rgba(255,255,255,0.85);}
  section.photo-hero .eyebrow{color:var(--ice);}
  section.photo-hero .eyebrow::before{background:var(--ice);}
  section.photo-hero .breadcrumb{color:rgba(255,255,255,0.75);}
  section.photo-hero .breadcrumb a{color:rgba(255,255,255,0.75);}
  section.photo-hero .breadcrumb a:hover{color:var(--white);}
  section.photo-hero .page-title{color:var(--white);}
  section.photo-hero .lede{color:rgba(255,255,255,0.85);}
  .photo-hero .btn-light{background:rgba(255,255,255,0.12);color:var(--white);border-color:rgba(255,255,255,0.45);}
  .photo-hero .btn-light:hover{background:rgba(255,255,255,0.2);}

  /* Header treatment while a photo hero is behind it */
  body.has-photo-hero header:not(.scrolled){
    background:linear-gradient(180deg, rgba(10,20,35,0.6), rgba(10,20,35,0));
    border-bottom-color:transparent;
  }
  body.has-photo-hero header:not(.scrolled) .navlink,
  body.has-photo-hero header:not(.scrolled) .header-social a{color:rgba(255,255,255,0.92);}
  body.has-photo-hero header:not(.scrolled) .menu-btn .bars span{background:var(--white);}
  /* Swap to the light logo (white text) — the dark variant disappears against a photo. */
  body.has-photo-hero header:not(.scrolled) .logo-img-full{content:url('logo-full.png');}
  body.has-photo-hero header.scrolled .logo-img-full{content:url('logo-full-dark.png');}

  /* ================= SPEC TABLE (service pages) ================= */
  .spec-wrap{margin-top:28px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,0.7);}
  .spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.spec{border-collapse:collapse;width:100%;min-width:720px;font-size:14px;}
  .spec th,.spec td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;}
  .spec thead th{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);background:var(--surface);font-weight:700;}
  .spec tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;}
  .spec tbody td{color:var(--ink-soft);}
  .spec tbody tr:last-child td{border-bottom:0;}
  .spec-note{font-size:13px;color:var(--ink-soft);margin-top:14px;line-height:1.6;}
  .spec-note strong{color:var(--ink);font-weight:600;}


  /* ================= MOBILE FIXES (1 Sep 2026) =================
     --header-h is measured in main.js and kept current on resize and on the
     scrolled/unscrolled change, so nothing here depends on a magic number. */

  /* Inner-page headings were running under the fixed header on phones, because
     the inline padding-top on the first section was set for the desktop header
     height. Clear the real header instead. */
  @media (max-width:860px){
    main > section:first-child{
      padding-top:calc(var(--header-h, 150px) + 26px) !important;
    }
  }

  /* Services in the mobile menu is now a disclosure rather than a flat list. */
  .mobile-services-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .mobile-services-row > a.navlink{flex:1;}
  .mobile-sub-toggle{
    flex:none;width:44px;height:44px;margin-left:auto;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--line);border-radius:999px;
    color:var(--navy);cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s, border-color .25s;
  }
  .mobile-sub-toggle svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.16,1,.3,1);}
  .mobile-sub-toggle[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
  .mobile-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  @media (max-width:860px){
    .mobile-menu .mobile-sublinks{
      display:grid;grid-template-rows:0fr;opacity:0;
      margin:0;padding-top:0;padding-bottom:0;border-left-color:transparent;
      transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1), opacity .28s, padding .34s, margin .34s;
    }
    .mobile-menu .mobile-sublinks > *{overflow:hidden;min-height:0;}
    .mobile-menu .mobile-sublinks.open{
      grid-template-rows:1fr;opacity:1;
      margin:2px 0 6px;padding:8px 0 8px 16px;border-left-color:var(--line);
    }
    .mobile-menu .mobile-sublinks-inner{display:flex;flex-direction:column;}
  }
  @media (prefers-reduced-motion:reduce){
    .mobile-menu .mobile-sublinks{transition:none;}
  }

  @media (min-width:861px){ .mobile-sub-toggle{display:none !important;} }