:root{
    --navy:#131720; --navy-2:#1d202b; --ink:#0c0f16;
    --canary:#ffff99; --gold-1:#f9d678; --gold-2:#e5b848; --gold-3:#b38b35;
    --coral:#ff7a45; --off:#f9f8f6;
    --line:#292e3d;
    --display:'Archivo', system-ui, sans-serif; --body:'Inter', system-ui, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{background:var(--ink);color:var(--off);font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;line-height:1.5}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--canary);color:var(--ink)}

  /* ───────────── NAV (verbatim from index.html) ───────────── */
  .nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
       gap:18px;padding:20px clamp(20px,4vw,56px);transition:background .5s,backdrop-filter .5s,box-shadow .5s}
  .nav.scrolled{background:rgba(12,15,22,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{width:38px;height:38px;border-radius:10px}
  .brand span{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.02em;color:var(--off)}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{font-family:var(--body);font-weight:500;font-size:15px;color:#e7e6e1;opacity:.92;transition:color .2s,opacity .2s;white-space:nowrap}
  .nav-links a:hover{opacity:1;color:var(--canary)}
  .nav-right{display:flex;align-items:center;gap:14px}
  .btn-login{font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;padding:11px 20px;border-radius:999px;text-decoration:none;
             display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
             background:rgba(12,15,22,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
             border:1.5px solid var(--canary);transition:background .2s,color .2s,transform .15s,box-shadow .2s}
  .btn-login svg{width:14px;height:14px}
  .btn-login:hover{background:var(--canary);color:var(--navy);transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,255,153,.4)}
  .btn-cta{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--navy);padding:13px 24px;border-radius:999px;border:none;cursor:pointer;
           background:linear-gradient(135deg,var(--canary),var(--gold-1));box-shadow:0 6px 22px rgba(255,255,153,.34);transition:transform .15s,box-shadow .2s;white-space:nowrap}
  .btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,153,.52)}
  @media(max-width:1080px){.nav-links{display:none}.nav .btn-cta{display:none}.nav-toggle{display:inline-flex}}
  /* STAFF LOGIN STAYS ON SCREEN ON A PHONE.
   It used to be `.btn-login{display:none}` here, so the one control the
   company's own reps come to this site for was hidden on every handset. A
   copy was added to the top of the hamburger menu on 2026-08-14, which reads
   as fixed when you grep the HTML and is not: a rep should not have to open a
   marketing menu to sign in. Both now exist - this one is always visible, the
   menu one is there once the menu is open.
   Below 400px the brand WORD is dropped and the logo mark carries the brand,
   which is what buys the room for a 44px login target on a 320px screen. */
@media(max-width:560px){
  /* The logo mark carries the brand on a phone. Dropping the WORD is what
     buys room for a 44px login target plus the menu button without the row
     overflowing - measured: with the word in, the login pill clipped off the
     right edge and pushed the burger off screen entirely. */
  .brand span{display:none}
  .nav{gap:10px}
  .nav-right{gap:8px;flex:0 0 auto}
  .btn-login{
    display:inline-flex;
    font-size:13px;
    padding:10px 13px;
    min-height:44px;
    gap:6px;
    flex:0 0 auto;
  }
  .nav-toggle{flex:0 0 auto}
}
/* The WORD stays as long as it fits. Measured in a true-width iframe (headless
   Edge floors its own viewport near 489px, so --window-size lies here): the
   pill is 114px, and at 320px the row is logo 34 + login 114 + theme 56 +
   menu 46 + gaps, which fits. A login control a rep has to recognise from an
   icon is worse than one that says what it is, so the icon-only fallback is
   held back for genuinely tiny screens rather than used at 360. */
@media(max-width:305px){
  .btn-login{padding:10px;width:44px;justify-content:center}
  .btn-login .lbl{display:none}
}

  /* ───────── MOBILE MENU (hamburger → full-screen cinematic overlay) ───────── */
  .nav-toggle{display:none;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.16);background:rgba(12,15,22,.55);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:13px;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;transition:border-color .2s,background .2s}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--off);border-radius:2px;transition:transform .32s cubic-bezier(.6,.1,.3,1),opacity .2s}
  .nav-toggle[aria-expanded="true"]{border-color:var(--canary)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #mobileMenu{position:fixed;inset:0;z-index:115;opacity:0;visibility:hidden;
    background:radial-gradient(120% 80% at 80% 0%,rgba(229,184,72,.10),transparent 55%),linear-gradient(180deg,rgba(12,15,22,.98),rgba(8,11,17,.99));
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;justify-content:flex-start;justify-content:safe center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:104px clamp(28px,8vw,60px) 52px}
  .anim-on #mobileMenu{transition:opacity .4s ease,visibility .4s ease,transform .4s ease;transform:translateY(-10px)}
  #mobileMenu.open{opacity:1;visibility:visible;transform:none}
  /* Staff Login at the TOP of the mobile menu - reps open this on a phone to reach the
     CRM, so it is the first thing in the sheet and never behind a scroll. The copy of it
     inside .mm-actions is kept as well. Min height 52px keeps the tap target over 44px. */
  .mm-login-top{display:flex;align-items:center;justify-content:center;gap:10px;
    box-sizing:border-box;width:100%;min-height:52px;padding:14px 18px;margin:0 0 22px;
    font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.01em;
    color:var(--canary);text-decoration:none;border:2px solid var(--canary);border-radius:999px;
    background:rgba(229,184,72,.12);flex:0 0 auto}
  .mm-login-top svg{width:19px;height:19px;flex:0 0 auto}
  .mm-login-top:active,.mm-login-top:hover{background:rgba(229,184,72,.2)}
  #mobileMenu .mm-link{font-family:var(--display);font-weight:800;font-size:clamp(30px,8.6vw,48px);letter-spacing:-.025em;line-height:1.05;
    color:var(--off);padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09);text-decoration:none;display:flex;align-items:center;justify-content:space-between}
  #mobileMenu .mm-link span{color:var(--gold-2);font-size:.42em;opacity:.6}
  #mobileMenu .mm-link:active,#mobileMenu .mm-link:hover{color:var(--canary)}
  .mm-actions{display:flex;flex-direction:column;gap:13px;margin-top:38px}
  .mm-login{font-family:var(--display);font-weight:700;font-size:17px;color:var(--off);border:1.5px solid var(--canary);border-radius:999px;
    padding:17px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px}
  .mm-login svg{width:18px;height:18px}
  .mm-cta{font-family:var(--display);font-weight:800;font-size:17px;color:var(--navy);border:none;cursor:pointer;border-radius:999px;padding:18px;
    background:linear-gradient(135deg,var(--canary),var(--gold-1));box-shadow:0 10px 30px rgba(255,255,153,.3)}
  .mm-tel{margin-top:26px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;color:#8b909c;text-align:center;text-decoration:none}
  .mm-tel b{color:var(--canary)}
  .anim-on #mobileMenu .mm-login-top,.anim-on #mobileMenu .mm-link,.anim-on #mobileMenu .mm-actions,.anim-on #mobileMenu .mm-tel{opacity:0;transform:translateY(16px);
    transition:opacity .45s ease,transform .45s ease}
  .anim-on #mobileMenu.open .mm-login-top,.anim-on #mobileMenu.open .mm-link,.anim-on #mobileMenu.open .mm-actions,.anim-on #mobileMenu.open .mm-tel{opacity:1;transform:none}
  /* the login row is child 1, so the four links are children 2 to 5 */
  .anim-on #mobileMenu.open .mm-login-top{transition-delay:.02s}
  .anim-on #mobileMenu.open .mm-link:nth-child(2){transition-delay:.08s}
  .anim-on #mobileMenu.open .mm-link:nth-child(3){transition-delay:.13s}
  .anim-on #mobileMenu.open .mm-link:nth-child(4){transition-delay:.18s}
  .anim-on #mobileMenu.open .mm-link:nth-child(5){transition-delay:.23s}
  .anim-on #mobileMenu.open .mm-actions{transition-delay:.26s}
  .anim-on #mobileMenu.open .mm-tel{transition-delay:.32s}
  @media(min-width:1081px){#mobileMenu{display:none}}

  /* ───────── BOOKING MODAL (book a consultation / Mass Save HEA) ───────── */
  #bookOverlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,48px);
    background:rgba(7,10,16,.74);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
    opacity:0;visibility:hidden}
  .anim-on #bookOverlay{transition:opacity .32s ease,visibility .32s ease}
  #bookOverlay.open{opacity:1;visibility:visible}
  .bk-modal{position:relative;width:100%;max-width:700px;max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:radial-gradient(130% 90% at 85% -10%,rgba(229,184,72,.13),transparent 55%),linear-gradient(180deg,#171b25,#0e1118);
    border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:0 40px 120px rgba(0,0,0,.6);
    transform:translateY(14px) scale(.985)}
  .anim-on #bookOverlay.open .bk-modal{transition:transform .4s cubic-bezier(.16,1,.3,1)}
  #bookOverlay.open .bk-modal{transform:none}
  @media(max-width:560px){.bk-modal{max-width:none;max-height:100dvh;height:100dvh;border-radius:0;border:none}}
  .bk-head{display:flex;align-items:flex-start;gap:16px;padding:34px clamp(28px,5vw,46px) 0}
  .bk-head .bk-mark{width:46px;height:46px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,var(--canary),var(--gold-1));
    display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:24px;color:var(--navy)}
  .bk-head .bk-htxt{flex:1;min-width:0}
  .bk-eyebrow{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
  .bk-title{font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,27px);letter-spacing:-.02em;color:var(--off);line-height:1.14;margin-top:5px}
  .bk-sub{font-size:14px;color:#aeb4c0;margin-top:8px;line-height:1.6}
  .bk-close{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);color:#c7cad2;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
  .bk-close:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
  .bk-close svg{width:18px;height:18px}
  /* step rail */
  .bk-rail{display:flex;align-items:center;gap:12px;padding:28px clamp(28px,5vw,46px) 10px}
  .bk-rail .st{flex:1;display:flex;flex-direction:column;gap:8px}
  .bk-rail .st .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .3s}
  .bk-rail .st.done .bar,.bk-rail .st.cur .bar{background:linear-gradient(90deg,var(--canary),var(--gold-1))}
  .bk-rail .st .lab{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;color:#6e7484;transition:color .3s}
  .bk-rail .st.cur .lab,.bk-rail .st.done .lab{color:var(--off)}
  /* body / steps */
  .bk-body{padding:26px clamp(28px,5vw,46px) 12px}
  .bk-step{display:none}
  .bk-step.on{display:block}
  .anim-on .bk-step.on{animation:bkStepIn .34s ease both}
  @keyframes bkStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .bk-q{font-family:var(--display);font-weight:800;font-size:20px;color:var(--off);margin-bottom:24px;letter-spacing:-.01em}
  /* service cards */
  .bk-svc{display:flex;align-items:center;gap:17px;width:100%;text-align:left;cursor:pointer;
    background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.10);border-radius:16px;padding:19px 20px;margin-bottom:15px;transition:border-color .18s,background .18s,transform .12s}
  .bk-svc:hover{border-color:rgba(255,255,153,.5);background:rgba(255,255,255,.055)}
  .bk-svc.sel{border-color:var(--canary);background:rgba(255,255,153,.09)}
  .bk-svc .ic{width:50px;height:50px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,153,.12)}
  .bk-svc .ic svg{width:25px;height:25px;stroke:var(--canary)}
  .bk-svc .txt{flex:1;min-width:0}
  .bk-svc .nm{font-family:var(--display);font-weight:800;font-size:16.5px;color:var(--off);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .bk-svc .nm .tag{font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--canary);border-radius:6px;padding:3px 7px}
  .bk-svc .ds{font-size:13px;color:#9da3b0;margin-top:6px;line-height:1.55}
  .bk-svc .chk{width:23px;height:23px;border-radius:50%;border:2px solid rgba(255,255,255,.22);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .18s,background .18s}
  .bk-svc.sel .chk{border-color:var(--canary);background:var(--canary)}
  .bk-svc .chk svg{width:13px;height:13px;opacity:0;transition:opacity .18s}
  .bk-svc.sel .chk svg{opacity:1}
  /* form fields */
  .bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
  .bk-grid .full{grid-column:1 / -1}
  @media(max-width:480px){.bk-grid{grid-template-columns:1fr;gap:18px}.bk-grid .full{grid-column:auto}}
  .bk-field label{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;color:#aeb4c0;margin-bottom:9px}
  .bk-field label .opt{color:#6e7484;font-weight:600;text-transform:none;letter-spacing:0}
  .bk-input,.bk-select{width:100%;font-family:var(--body);font-size:15px;color:var(--off);background:rgba(255,255,255,.04);
    border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;transition:border-color .18s,background .18s}
  .bk-input::placeholder{color:#6e7484}
  .bk-input:focus,.bk-select:focus{outline:none;border-color:var(--canary);background:rgba(255,255,255,.06)}
  .bk-input.err,.bk-select.err{border-color:#ff7a45}
  .bk-select{appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239da3b0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px}
  .bk-select option{background:#171b25;color:var(--off)}
  /* mobile: 16px form controls so iOS doesn't auto-zoom the booking wizard on focus */
  @media(max-width:560px){.bk-input,.bk-select{font-size:16px}}
  /* segmented toggle + time chips */
  .bk-seg{display:flex;gap:11px;flex-wrap:wrap}
  .bk-chip{font-family:var(--display);font-weight:700;font-size:13.5px;color:#c7cad2;cursor:pointer;
    background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 20px;transition:border-color .18s,background .18s,color .18s}
  .bk-chip:hover{border-color:rgba(255,255,153,.5)}
  .bk-chip.sel{border-color:var(--canary);background:rgba(255,255,153,.12);color:var(--off)}
  .bk-chip .sm{display:block;font-family:var(--body);font-weight:500;font-size:10.5px;color:#8b909c;margin-top:2px}
  .bk-chip.sel .sm{color:#aeb4c0}
  .bk-err-msg{color:#ff9b73;font-size:12.5px;margin-top:16px;display:none}
  .bk-err-msg.show{display:block}
  /* footer / nav buttons */
  .bk-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;padding:20px clamp(28px,5vw,46px) calc(28px + env(safe-area-inset-bottom));margin-top:14px;
    background:linear-gradient(180deg,transparent,#0e1118 40%)}
  .bk-back{font-family:var(--display);font-weight:700;font-size:14.5px;color:#c7cad2;background:transparent;border:none;cursor:pointer;padding:13px 8px;transition:color .2s}
  .bk-back:hover{color:var(--off)}
  .bk-next{margin-left:auto;font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--navy);cursor:pointer;border:none;
    background:linear-gradient(135deg,var(--canary),var(--gold-1));border-radius:999px;padding:16px 34px;display:inline-flex;align-items:center;gap:10px;
    box-shadow:0 10px 30px rgba(255,255,153,.3);transition:transform .15s,box-shadow .2s}
  .bk-next:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,255,153,.45)}
  .bk-next svg{width:17px;height:17px}
  /* summary (review line on step 3) + confirmation */
  .bk-recap{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:14px 16px;margin-bottom:26px}
  .bk-recap .rd{width:8px;height:8px;border-radius:50%;background:var(--canary);flex-shrink:0}
  .bk-recap .rt{font-size:13.5px;color:#c7cad2}
  .bk-recap .rt b{color:var(--off);font-weight:600}
  .bk-recap .redit{margin:-10px -6px -10px auto;padding:10px 6px;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--gold-2);background:none;border:none;cursor:pointer}
  .bk-done{text-align:center;padding:28px 6px 12px}
  .bk-done .seal{width:82px;height:82px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 35%,rgba(255,255,153,.25),rgba(255,255,153,.06));border:1.5px solid rgba(255,255,153,.5)}
  .bk-done .seal svg{width:40px;height:40px;stroke:var(--canary)}
  .anim-on #bookOverlay.open .bk-done.on .seal{animation:bkPop .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes bkPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
  .bk-done h3{font-family:var(--display);font-weight:800;font-size:clamp(23px,4vw,29px);letter-spacing:-.02em;color:var(--off)}
  .bk-done p{font-size:14.5px;color:#aeb4c0;line-height:1.65;margin-top:13px;max-width:40ch;margin-left:auto;margin-right:auto}
  .bk-ref{display:inline-block;margin-top:22px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.05em;color:var(--canary);
    background:rgba(255,255,153,.08);border:1px solid rgba(255,255,153,.3);border-radius:10px;padding:10px 18px}
  .bk-card{text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:15px;padding:20px 22px;margin:28px auto 0;max-width:440px}
  .bk-card .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:14px}
  .bk-card .row+.row{border-top:1px solid rgba(255,255,255,.07)}
  .bk-card .row .k{color:#8b909c}
  .bk-card .row .v{color:var(--off);font-weight:600;text-align:right}

  /* ───────────── HERO (verbatim from index.html) ───────────── */
  .hero{position:relative;height:100vh;height:100svh;min-height:660px;width:100%;overflow:hidden}
  .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;background:#0c0f16}
  .hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(8,6,14,.28) 0%,rgba(8,6,14,0) 26%),
      linear-gradient(90deg,rgba(8,6,14,.70) 0%,rgba(8,6,14,.32) 44%,rgba(8,6,14,0) 72%),
      linear-gradient(0deg,rgba(7,5,12,.82) 0%,rgba(7,5,12,.22) 32%,rgba(7,5,12,0) 58%)}
  .hero-content{position:absolute;z-index:3;left:0;bottom:0;padding:0 clamp(20px,4vw,60px) clamp(44px,7vh,84px);max-width:1200px;width:100%;pointer-events:none}
  .hero-content>*{pointer-events:auto}
  .eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.22em;
           text-transform:uppercase;color:var(--canary);margin-bottom:24px}
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--canary);box-shadow:0 0 14px var(--canary)}
  .eyebrow .loc{color:var(--off);opacity:.85;letter-spacing:.16em}
  .hero h1{font-family:var(--display);font-weight:900;font-size:clamp(58px,9.4vw,156px);line-height:.9;letter-spacing:-.035em;
           color:var(--off);text-shadow:0 2px 12px rgba(0,0,0,.28);margin-bottom:28px;max-width:15ch}
  .hero h1 .accent{background:linear-gradient(120deg,var(--canary) 12%,var(--gold-1) 72%);-webkit-background-clip:text;background-clip:text;
                   -webkit-text-fill-color:transparent;color:var(--canary);text-shadow:none}
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .word{display:inline-block}
  .hero-sub{font-family:var(--body);font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#f1efe9;max-width:44ch;margin-bottom:32px;
            text-shadow:0 1px 16px rgba(0,0,0,.55)}
  .hero-sub b{color:#fff;font-weight:600}
  .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:34px}
  .btn-hero{font-family:var(--display);font-size:18px;font-weight:800;color:var(--navy);background:linear-gradient(135deg,var(--canary),var(--gold-1));
            border:none;border-radius:999px;padding:18px 38px;cursor:pointer;transition:transform .2s,box-shadow .22s;
            box-shadow:0 10px 36px rgba(255,210,80,.5);display:inline-flex;align-items:center;gap:12px}
  .btn-hero:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 16px 48px rgba(255,210,80,.64)}
  .btn-hero svg{width:20px;height:20px}
  .hero-phone{display:inline-flex;align-items:center;gap:11px;color:#fff;font-family:var(--display);font-weight:700;font-size:18px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .hero-phone .ico{width:42px;height:42px;border-radius:50%;border:1.6px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:all .25s}
  .hero-phone:hover .ico{border-color:var(--canary);background:rgba(255,255,153,.12)}
  .hero-phone .ico svg{width:18px;height:18px}
  .trust-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--body);font-size:15.5px;font-weight:600;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .trust-row .item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .trust-row .item svg{width:18px;height:18px;flex-shrink:0}
  .trust-row b{color:var(--canary);font-weight:700}
  .trust-row .sep{width:5px;height:5px;border-radius:50%;background:var(--gold-2);opacity:.8}
  .scroll-cue{position:absolute;z-index:4;bottom:28px;right:clamp(20px,4vw,56px);display:flex;flex-direction:column;align-items:center;gap:10px;
              font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff;opacity:0}
  .scroll-cue .track{width:2px;height:50px;border-radius:2px;background:rgba(249,248,246,.25);position:relative;overflow:hidden}
  .scroll-cue .track::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--canary);border-radius:2px;animation:cueRun 1.9s cubic-bezier(.6,.1,.3,1) infinite}
  @keyframes cueRun{0%{transform:translateY(-110%)}60%,100%{transform:translateY(260%)}}
  @media(max-width:560px){.trust-row{font-size:14px;gap:13px}.trust-row .sep{display:none}.scroll-cue{display:none}
    .nav{padding:12px 18px}.nav .btn-cta{display:none}.hero-content{padding-right:24px}.hero-sub{max-width:38ch}
    /* mobile hero de-crowding: smaller headline + single-line eyebrow so the copy
       breathes and clears the fixed "Aventro" nav (worse on real phones where the
       URL bar shrinks the viewport) */
    .hero h1{font-size:clamp(44px,12.5vw,56px)}
    .eyebrow{font-size:11.5px;letter-spacing:.12em;gap:9px;margin-bottom:16px;flex-wrap:wrap}
    .eyebrow .loc{display:none}}

  /* ═══════════════════════════════════════════════════════════════════
     EDITORIAL CINEMATIC - one continuous dark atmospheric field.
     The whole page sits on a slow vertical gradient so sections dissolve
     into each other instead of hard-cutting. Light is gold, never flat.
     ═══════════════════════════════════════════════════════════════════ */
  .reel{position:relative;background:
        radial-gradient(120% 60% at 78% -8%, rgba(229,184,72,.10), transparent 60%),
        linear-gradient(180deg,#0c0f16 0%,#0e1119 22%,#0b0e15 50%,#0d1017 74%,#0a0d13 100%);
        overflow:hidden}

  /* shared editorial type primitives */
  .eyebrow-2{display:inline-flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;font-size:14px;
             letter-spacing:.26em;text-transform:uppercase;color:var(--gold-1)}
  .eyebrow-2 .pipe{width:46px;height:2px;border-radius:2px;background:var(--gold-1);flex-shrink:0}
  .eyebrow-2 .n{color:var(--canary)}
  .clip{display:block}                            /* headline lines (reveal = gentle fade-rise, never off-screen) */
  .clip > span{display:block}
  .sec-h2{font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.92;color:var(--off);
          font-size:clamp(44px,8vw,88px)}
  .sec-h2 .hl{color:var(--gold-1)}
  .sec-h2 .ghost{color:transparent;-webkit-text-stroke:1.4px rgba(229,184,72,.5)}
  .lead{font-size:clamp(17px,1.55vw,21px);line-height:1.6;color:#d6d8de;max-width:50ch;font-weight:400}
  .lead b{color:#fff;font-weight:600}
  .container{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}

  /* ── (B) TYPOGRAPHIC SPREAD - manifesto on near-black ── */
  .spread{position:relative;padding:clamp(110px,18vh,210px) 0 clamp(96px,14vh,170px)}
  .spread .eyebrow-2{margin-bottom:34px}
  .spread .sec-h2{max-width:17ch;margin-bottom:0}
  .spread .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,80px);align-items:end}
  .spread .right{align-self:end}
  .spread .lead{margin-bottom:30px}
  .spread .index{list-style:none;border-top:1px solid var(--line)}
  .spread .index li{display:flex;align-items:baseline;gap:18px;padding:20px 2px;border-bottom:1px solid var(--line)}
  .spread .index li .ix{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--gold-2);min-width:34px}
  .spread .index li .tx{font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,23px);color:var(--off)}
  .spread .index li .ds{font-size:14.5px;color:#9aa0ab;margin-left:auto;text-align:right;max-width:22ch}
  @media(max-width:840px){.spread .grid{grid-template-columns:1fr;gap:40px}.spread .index li .ds{display:none}}

  /* ── (A) FULL-BLEED CINEMATIC IMAGE BAND ── */
  .band{position:relative;min-height:clamp(620px,96vh,1000px);display:flex;align-items:flex-end;overflow:hidden}
  .band .bg{position:absolute;inset:-12% 0 -12% 0;z-index:0;will-change:transform}
  .band .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.04)}
  .band .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(8,10,16,.55) 0%,rgba(8,10,16,0) 26%),
      linear-gradient(90deg,rgba(7,9,14,.84) 0%,rgba(7,9,14,.42) 46%,rgba(7,9,14,0) 78%),
      linear-gradient(0deg,rgba(6,8,13,.92) 0%,rgba(6,8,13,.4) 30%,rgba(6,8,13,0) 62%)}
  .band .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(60% 70% at 84% 14%, rgba(255,206,120,.22), transparent 60%)}
  .band .inner{position:relative;z-index:2;width:100%;padding:0 clamp(20px,5vw,72px) clamp(70px,11vh,120px)}
  .band .inner .wrap{max-width:1240px;margin:0 auto}
  .band .kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:13.5px;
                letter-spacing:.24em;text-transform:uppercase;color:var(--canary);margin-bottom:22px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
  .band h1,.band h2{font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.9;color:#fff;
           font-size:clamp(46px,8.4vw,108px);text-shadow:0 4px 40px rgba(0,0,0,.55);max-width:13ch}
  .band h1 .accent,.band h2 .accent{color:var(--gold-1)}
  .band .bsub{font-size:clamp(17px,1.5vw,20px);line-height:1.58;color:#eceef2;max-width:46ch;margin-top:24px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
  .band .bsub b{color:#fff;font-weight:600}

  /* ── CINEMATIC LIFE - slow Ken Burns, living light, film grain (motion-only) ── */
  /* deeper, moodier grade on all band/CTA imagery */
  .band .bg img,.cta .bg img{filter:saturate(1.07) contrast(1.08) brightness(1.02)}
  /* slow push-in + drift so every plate breathes like film, not a flat still */
  .anim-on .band .bg img,.anim-on .cta .bg img{will-change:transform;transform-origin:50% 42%;
    animation:kenburns 40s ease-in-out infinite alternate}
  .anim-on .band:nth-of-type(2n) .bg img{animation-duration:50s;transform-origin:62% 56%}
  .anim-on .band:nth-of-type(3n) .bg img{animation-duration:34s;transform-origin:34% 30%}
  @keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.15) translate3d(-1.6%,-1.4%,0)}}
  /* living light: the warm glow slowly drifts + breathes like real sun */
  .anim-on .band .glow{animation:glowDrift 13s ease-in-out infinite}
  @keyframes glowDrift{0%,100%{opacity:.64;transform:translate3d(0,0,0) scale(1)}
    50%{opacity:1;transform:translate3d(-2.4%,1.6%,0) scale(1.08)}}
  /* a soft sun core that pulses behind the light */
  .band .glow::before{content:"";position:absolute;inset:0;
    background:radial-gradient(24% 34% at 82% 15%,rgba(255,226,154,.32),transparent 60%)}
  .anim-on .band .glow::before{animation:corePulse 7.5s ease-in-out infinite}
  @keyframes corePulse{0%,100%{opacity:.45}50%{opacity:1}}
  /* per-scene signature light layer (sits over the image, under the text) */
  .band .life{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  /* DAWN · "Catch the first light" - warm rim glow + a sunrise ray that sweeps the roof */
  .band--dawn .life{background:radial-gradient(42% 62% at 88% 6%,rgba(255,216,138,.30),transparent 58%)}
  .anim-on .band--dawn .life{animation:glowSoft 10s ease-in-out infinite}
  .band--dawn .life::before{content:"";position:absolute;top:-40%;left:-25%;width:70%;height:180%;
    background:linear-gradient(74deg,transparent 40%,rgba(255,233,182,.16) 50%,transparent 60%);filter:blur(7px);opacity:0}
  .anim-on .band--dawn .life::before{animation:raySweep 17s ease-in-out infinite}
  @keyframes raySweep{0%{transform:translateX(-40%);opacity:0}28%{opacity:.9}68%{opacity:.9}100%{transform:translateX(190%);opacity:0}}
  /* WARM · interior payoff - hearth-warm light that gently flickers like firelight */
  .band--warm .life{background:radial-gradient(54% 64% at 28% 88%,rgba(255,178,100,.28),transparent 62%)}
  .anim-on .band--warm .life{animation:hearth 6.8s ease-in-out infinite}
  @keyframes glowSoft{0%,100%{opacity:.6}50%{opacity:1}}
  @keyframes hearth{0%,100%{opacity:.52}38%{opacity:.95}52%{opacity:.74}68%{opacity:1}}
  /* GLOBAL FILM GRAIN - one fixed layer gives the whole site a living pulse */
  .filmgrain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:150px 150px}
  .anim-on .filmgrain{animation:grain 1.4s steps(3) infinite}
  @keyframes grain{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-3%,2%,0)}66%{transform:translate3d(2%,-3%,0)}100%{transform:translate3d(-2%,-1%,0)}}

  /* pull-quote as a design element, floating in negative space */
  .quote{position:relative;padding:clamp(96px,15vh,180px) 0}
  .quote blockquote{max-width:20ch;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
                    font-size:clamp(40px,6.6vw,82px);color:var(--off)}
  .quote blockquote .mark{color:var(--gold-1)}
  .quote .by{margin-top:34px;display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;
             font-size:15px;letter-spacing:.06em;color:#aab0bb}
  .quote .by .ln{width:46px;height:2px;background:var(--gold-2);border-radius:2px}

  /* ── WORK marquee (dark, cinematic film-strip) ── */
  .work{position:relative;padding:clamp(96px,14vh,160px) 0}
  .work .head{margin-bottom:56px}
  .photo-row{display:flex;white-space:nowrap;will-change:transform}
  .photo-content{display:flex;flex-shrink:0}
  .photo-item{width:min(520px,80vw);aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin:0 13px;flex-shrink:0;
              border:1px solid var(--line);position:relative}
  .photo-item img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.04)}
  .photo-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(6,8,13,.82));pointer-events:none}
  .photo-item .cap{position:absolute;left:20px;bottom:18px;font-family:var(--display);font-weight:700;font-size:13.5px;
                   letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1)}
  .photo-item .cap .sm{display:block;font-weight:500;font-size:12.5px;letter-spacing:.06em;color:#c7cad2;margin-top:5px;text-transform:none}

  /* ── BIG NUMBERS - design-element stats on near-black ── */
  .figures{position:relative;padding:clamp(96px,15vh,180px) 0}
  .figures .head{margin-bottom:64px;max-width:760px}
  .fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
  .fig{position:relative;border-top:2px solid var(--line);padding-top:30px}
  .fig .num{font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:.86;color:var(--off);
            font-size:clamp(64px,10vw,132px);font-variant-numeric:tabular-nums}
  .fig .num .u{color:var(--gold-1)}
  .fig .lbl{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,20px);color:var(--off);margin-top:22px}
  .fig .sub{font-size:15px;line-height:1.5;color:#9aa0ab;margin-top:8px;max-width:24ch}
  @media(max-width:780px){.fig-grid{grid-template-columns:1fr;gap:48px}}

  /* ── CTA - sunset close, full-bleed image, dark ── */
  .cta{position:relative;min-height:clamp(620px,96vh,940px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
  .cta .bg{position:absolute;inset:-12% 0 -12% 0;z-index:0;will-change:transform}
  .cta .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
  .cta .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 120%, rgba(255,140,70,.30), transparent 58%),
      linear-gradient(180deg,rgba(7,9,14,.78) 0%,rgba(7,9,14,.42) 40%,rgba(7,9,14,.72) 100%)}
  .cta .wrap{position:relative;z-index:2;max-width:920px;padding:0 clamp(20px,5vw,56px)}
  .cta .eyebrow-2{justify-content:center;color:var(--canary);margin-bottom:26px}
  .cta .eyebrow-2 .pipe{background:var(--canary)}
  .cta h2{font-family:var(--display);font-weight:900;font-size:clamp(46px,8vw,112px);line-height:.92;letter-spacing:-.04em;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5)}
  .cta h2 .accent{color:var(--canary)}
  .cta p{font-size:clamp(18px,1.7vw,22px);color:#eceef2;margin:28px auto 0;max-width:46ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
  .cta .btn-hero{margin-top:42px;font-size:19px;padding:20px 46px}
  .cta .fine{margin-top:22px;font-size:14.5px;color:#cfd2da;font-family:var(--display);font-weight:600;letter-spacing:.04em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .particle{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:9999}

  /* ───────────── FOOTER (premium · cinematic) ───────────── */
  footer{position:relative;z-index:2;overflow:hidden;padding:92px 0 0;
    background:radial-gradient(120% 70% at 50% 100%,rgba(229,184,72,.08),transparent 60%),linear-gradient(180deg,#0c0f16,#090c12);
    border-top:1px solid #20242f}
  .towns-row{display:flex;white-space:nowrap;will-change:transform;margin-bottom:72px;opacity:.92}
  .towns-content{display:flex;flex-shrink:0}
  .town{font-family:var(--display);font-weight:900;font-size:clamp(46px,8.5vw,104px);letter-spacing:-.03em;line-height:1;
        color:transparent;-webkit-text-stroke:1.6px rgba(229,184,72,.5);padding:0 36px;display:inline-flex;align-items:center;flex-shrink:0}
  .town .dot{width:13px;height:13px;border-radius:50%;background:var(--gold-2);margin-left:68px;opacity:.75}
  .foot-main{max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,72px);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(30px,4vw,56px)}
  .foot-brandcol{max-width:400px}
  .foot-lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
  .foot-lockup img{width:54px;height:54px;border-radius:14px;box-shadow:0 10px 28px rgba(229,184,72,.3)}
  .foot-lockup .wm{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--off)}
  .foot-blurb{font-size:16.5px;line-height:1.62;color:#aeb4c0;margin-top:22px}
  .foot-blurb b{color:var(--off);font-weight:600}
  .foot-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
  .foot-btn-primary{font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy);text-decoration:none;
    background:linear-gradient(135deg,var(--canary),var(--gold-1));padding:14px 24px;border-radius:999px;
    box-shadow:0 8px 24px rgba(255,255,153,.3);transition:transform .15s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px}
  .foot-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,255,153,.5)}
  .foot-btn-primary svg{width:17px;height:17px}
  .foot-btn-ghost{font-family:var(--display);font-weight:700;font-size:15px;color:var(--off);text-decoration:none;
    border:1.5px solid #39414f;padding:14px 22px;border-radius:999px;transition:border-color .2s,background .2s,color .2s;display:inline-flex;align-items:center;gap:8px}
  .foot-btn-ghost:hover{border-color:var(--canary);color:var(--canary);background:rgba(255,255,153,.06)}
  .foot-btn-ghost svg{width:15px;height:15px}
  .foot-col h4{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px}
  .foot-col a,.foot-col p{display:block;font-size:16px;color:#c7cad2;margin:0 0 13px;text-decoration:none;transition:color .2s;line-height:1.45}
  .foot-col a:hover{color:var(--canary)}
  .foot-col .muted{color:#7d838f;font-size:14.5px}
  .foot-watermark{font-family:var(--display);font-weight:900;font-size:clamp(54px,14vw,200px);line-height:.82;letter-spacing:-.04em;text-align:center;
    color:transparent;background:linear-gradient(180deg,rgba(249,248,246,.085),rgba(249,248,246,0));-webkit-background-clip:text;background-clip:text;
    margin-top:64px;white-space:nowrap;user-select:none;pointer-events:none}
  .foot-bottom{max-width:1240px;margin:14px auto 0;padding:26px clamp(22px,5vw,72px) 40px;border-top:1px solid #1a1e27;
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7d838f}
  .foot-bottom .partner{font-family:var(--display);font-weight:700;letter-spacing:.05em;color:var(--gold-3);display:inline-flex;align-items:center;gap:8px}
  .foot-bottom .partner i{width:7px;height:7px;border-radius:50%;background:var(--gold-2);display:inline-block}
  @media(max-width:860px){.foot-main{grid-template-columns:1fr 1fr;gap:40px}.foot-brandcol{grid-column:1 / -1;max-width:none}}
  @media(max-width:520px){.foot-main{grid-template-columns:1fr 1fr;gap:26px}.foot-bottom{flex-direction:column;align-items:flex-start}.foot-watermark{margin-top:48px}}

  /* animation-hidden states apply ONLY when motion is active (class set in <head>).
     With JS disabled or reduced-motion, none of this applies → all copy is visible. */
  .anim-on .eyebrow,.anim-on .hero-sub,.anim-on .hero-actions,.anim-on .trust-row{opacity:0}
  .anim-on .hero h1 .word{transform:translateY(112%)}
  .anim-on .clip > span{transform:translateY(110%)}
  .anim-on .reveal{opacity:0;transform:translateY(34px)}
  .anim-on .clip>span{display:inline-block;opacity:0;transform:translateY(38px);transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1)}
  .anim-on .clip.revealed>span{opacity:1;transform:none}
  .anim-on .band .bsub,.anim-on .band .kicker{opacity:0;transform:translateY(24px)}
  .anim-on .fig{opacity:0;transform:translateY(40px)}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .scroll-cue .track::after{animation:none}
  }

/* ============================================================================
   MULTI-PAGE SPLIT - active nav state + clickable services index rows
   (added with the marketing single-page → multi-page split)
   ============================================================================ */
.nav-links a.active{color:var(--gold-1)}
.mm-link.active{color:var(--gold-1)}
.index li a{display:flex;align-items:baseline;gap:18px;width:100%;color:inherit;text-decoration:none;transition:color .15s ease}
.index li a:hover .tx{color:var(--gold-1)}
.detail-head{min-height:clamp(78vh,86vh,820px)}
/* detail-page headers can sit over BRIGHT images (heat-pump, install photos), so the
   stock band scrim isn't dark enough for white headline text - strengthen it here. */
.detail-head .scrim{background:
  linear-gradient(180deg,rgba(8,10,16,.60) 0%,rgba(8,10,16,0) 30%),
  linear-gradient(90deg,rgba(7,9,14,.92) 0%,rgba(7,9,14,.66) 48%,rgba(7,9,14,.16) 86%),
  linear-gradient(0deg,rgba(6,8,13,.95) 0%,rgba(6,8,13,.58) 40%,rgba(6,8,13,0) 72%)}
/* mobile: the header image crops to its bright center on a narrow screen, so darken the
   whole bottom-anchored content zone (kicker → headline → sub → CTA) for guaranteed contrast */
@media(max-width:560px){.detail-head .scrim{background:
  linear-gradient(0deg,rgba(6,8,13,.97) 0%,rgba(6,8,13,.80) 38%,rgba(6,8,13,.40) 64%,rgba(6,8,13,.08) 100%)}}

/* ============================================================================
   DAY / NIGHT - "SUNRISE" THEME
   data-theme="night" (default, = the baseline above) | "day" (overrides below).
   Spec: docs/2026-06-16-day-night-sunrise-design.md
   The night rules above are untouched; everything here is additive.
   ============================================================================ */
:root{--theme-dur:3.3s;--theme-ease:cubic-bezier(.45,0,.25,1)}

/* ---- full-page background crossfade (two fixed layers; gradients can't tween) ---- */
.theme-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.theme-bg.is-night{opacity:1;background:
  radial-gradient(120% 60% at 78% -8%,rgba(229,184,72,.10),transparent 60%),
  linear-gradient(180deg,#0c0f16 0%,#0e1119 30%,#0b0e15 60%,#0a0d13 100%)}
.theme-bg.is-day{opacity:0;background:
  radial-gradient(120% 70% at 76% -6%,rgba(255,221,150,.5),transparent 55%),
  linear-gradient(180deg,#e9eef6 0%,#f4f2ec 42%,#f1ece4 100%)}
.anim-on .theme-bg{transition:opacity var(--theme-dur) var(--theme-ease)}
/* night layer stays solid underneath; the day layer simply crossfades in on top
   (avoids a mid-transition gap where the dark html fallback would flash through) */
[data-theme="day"] .theme-bg.is-day{opacity:1}
/* with JS the fixed sky shows through; html keeps a solid fallback for no-JS.
   the day html colour prevents a dark flash on navigation before the bg layer mounts */
html{background:#0a0d13}
[data-theme="day"] html{background:#eef1f6}
.theme-on body{background:transparent}
.theme-on .reel{background:transparent}
.theme-on footer{background:transparent}

/* ---- slow ambient recolor (only surfaces/text WITHOUT their own transition;
        interactive bits keep their fast hover transitions and snap on toggle) ---- */
.anim-on .sec-h2,.anim-on .lead,.anim-on .eyebrow-2,
.anim-on .spread .index li,.anim-on .spread .index .tx,.anim-on .spread .index .ix,.anim-on .spread .index .ds,
.anim-on .fig,.anim-on .fig .num,.anim-on .fig .lbl,.anim-on .fig .sub,
.anim-on .quote blockquote,.anim-on .quote .by,
.anim-on footer,.anim-on .foot-blurb,.anim-on .foot-col h4,.anim-on .foot-bottom,
.anim-on .foot-lockup .wm,.anim-on .foot-watermark,.anim-on .town,
.anim-on .hero-vid,.anim-on .hero-scrim,.anim-on .band .scrim,.anim-on .cta .scrim,.anim-on .detail-head .scrim,
.anim-on .band .bg img,.anim-on .cta .bg img,
.anim-on .theme-sky .tw,.anim-on .theme-sky .tw-sun,.anim-on .theme-sun{
  transition:color var(--theme-dur) var(--theme-ease),
             background-color var(--theme-dur) var(--theme-ease),
             border-color var(--theme-dur) var(--theme-ease),
             filter var(--theme-dur) var(--theme-ease),
             opacity var(--theme-dur) var(--theme-ease),
             transform var(--theme-dur) var(--theme-ease),
             -webkit-text-stroke-color var(--theme-dur) var(--theme-ease)}

/* =======================  DAY OVERRIDES  ======================= */

/* page-background text (image sections keep their light text via the :where scope) */
[data-theme="day"] :where(.spread,.figures,.work,.quote) .sec-h2{color:#16191f}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .sec-h2 .hl{color:#b97c12}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .sec-h2 .ghost{-webkit-text-stroke-color:rgba(176,118,28,.55)}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .eyebrow-2{color:#a9760f}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .eyebrow-2 .pipe{background:#c2851a}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .eyebrow-2 .n{color:#c98a00}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .lead{color:#3c424d}
[data-theme="day"] :where(.spread,.figures,.work,.quote) .lead b{color:#16191f}

/* spread services index */
[data-theme="day"] .spread .index{border-top-color:rgba(18,22,32,.16)}
[data-theme="day"] .spread .index li{border-bottom-color:rgba(18,22,32,.12)}
[data-theme="day"] .spread .index li .tx{color:#16191f}
[data-theme="day"] .spread .index li .ix{color:#b97c12}
[data-theme="day"] .spread .index li .ds{color:#5a616e}
[data-theme="day"] .index li a:hover .tx{color:#cf8f00}

/* big numbers */
[data-theme="day"] .figures .fig{border-top-color:rgba(18,22,32,.2)}
[data-theme="day"] .figures .fig .num{color:#16191f}
[data-theme="day"] .figures .fig .num .u{color:#b97c12}
[data-theme="day"] .figures .fig .lbl{color:#16191f}
[data-theme="day"] .figures .fig .sub{color:#5a616e}

/* genesis typographic header (no image behind it) */
[data-theme="day"] .quote blockquote{color:#16191f}
[data-theme="day"] .quote blockquote .mark{color:#b97c12}
[data-theme="day"] .quote .by{color:#5a616e}
[data-theme="day"] .quote .hero-phone{color:#16191f}
[data-theme="day"] .quote .hero-phone .ico{border-color:rgba(18,22,32,.32)}
[data-theme="day"] .quote .hero-phone .ico svg path{stroke:#16191f}

/* footer */
[data-theme="day"] footer{border-top-color:rgba(18,22,32,.12)}
[data-theme="day"] .foot-lockup .wm{color:#16191f}
[data-theme="day"] .foot-blurb{color:#4a505c}
[data-theme="day"] .foot-blurb b{color:#16191f}
[data-theme="day"] .foot-col h4{color:#a9760f}
[data-theme="day"] .foot-col a,[data-theme="day"] .foot-col p{color:#3f4552}
[data-theme="day"] .foot-col a:hover{color:#cf8f00}
[data-theme="day"] .foot-col .muted{color:#7a818d}
[data-theme="day"] .foot-bottom{color:#6b7280;border-top-color:rgba(18,22,32,.1)}
[data-theme="day"] .foot-btn-ghost{color:#16191f;border-color:rgba(18,22,32,.22)}
[data-theme="day"] .foot-btn-ghost:hover{border-color:#cf8f00;color:#a9740b;background:rgba(229,184,72,.12)}
[data-theme="day"] .foot-watermark{background:linear-gradient(180deg,rgba(20,24,30,.075),rgba(20,24,30,0));-webkit-background-clip:text;background-clip:text}
[data-theme="day"] .town{-webkit-text-stroke-color:rgba(176,118,28,.55)}
[data-theme="day"] .town .dot,[data-theme="day"] .foot-bottom .partner i{background:#c2851a}

/* nav - dark text reads over the bright day hero sky AND the light scrolled bar */
[data-theme="day"] .brand span{color:#16191f}
[data-theme="day"] .nav-links a{color:#2b3038}
[data-theme="day"] .nav-links a:hover{color:#a9740b}
[data-theme="day"] .nav.scrolled{background:rgba(245,243,238,.84);box-shadow:0 1px 0 rgba(18,22,32,.08)}
[data-theme="day"] .nav-toggle{border-color:rgba(18,22,32,.16);background:rgba(255,255,255,.55)}
[data-theme="day"] .nav-toggle span{background:#16191f}
[data-theme="day"] .btn-login{color:#16191f;border-color:#cf8f00;background:rgba(255,255,255,.5)}
[data-theme="day"] .btn-login:hover{background:#ffd24f;color:#16191f}

/* image sections: brighten + warm the plates by day, open the scrims a touch
   (white headline copy is kept; scrims stay strong enough for contrast) */
[data-theme="day"] .band .bg img,[data-theme="day"] .cta .bg img{filter:saturate(1.12) contrast(1.03) brightness(1.12)}
[data-theme="day"] .hero-scrim{opacity:.6}
[data-theme="day"] .band .scrim,[data-theme="day"] .cta .scrim,[data-theme="day"] .detail-head .scrim{opacity:.82}

/* =======================  SUN-IGNITE OVERLAY  ======================= */
/* home hero video grade - blue-hour at night, gold by day (cinematic path only) */
.anim-on[data-theme="night"] .hero-vid{filter:brightness(.5) saturate(.82) contrast(1.06)}
.anim-on[data-theme="day"] .hero-vid{filter:brightness(1.06) saturate(1.16) contrast(1.03)}
/* Hero motion is the rendered push-in clip itself (real parallax "ride into the
   scene"), played once and held on its last frame - see site.js. No CSS transform. */
/* mild night grade on the other sunrise plates so the page reads cohesively at night */
.anim-on[data-theme="night"] .band .bg img,.anim-on[data-theme="night"] .cta .bg img{filter:saturate(.95) contrast(1.07) brightness(.9)}

/* theme-sky: injected into the home hero, above the video, below the scrim */
.theme-sky{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
:root:not(.anim-on) .theme-sky{display:none}     /* reduced-motion / no-JS: no cinematic sky */
.theme-sky .tw{position:absolute;inset:0}
.theme-sky .tw-night{opacity:1;background:linear-gradient(180deg,rgba(8,12,30,.7),rgba(14,20,48,.34) 40%,rgba(22,30,62,.22) 66%,rgba(8,11,24,.5))}
.theme-sky .tw-day{opacity:0;mix-blend-mode:soft-light;background:linear-gradient(180deg,rgba(150,200,255,.25),rgba(255,236,190,.3) 55%,rgba(255,201,130,.42))}
.theme-sky .tw-stars{opacity:1}
.theme-sky .tw-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dfe7ff;box-shadow:0 0 4px rgba(220,230,255,.8)}
.theme-sky .tw-sun{position:absolute;left:var(--sun-x,55%);top:var(--sun-y,42%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,221,.96),rgba(255,201,110,.6) 38%,rgba(255,162,72,0) 72%);
  filter:blur(2px);opacity:.32;transform:scale(1)}
[data-theme="day"] .theme-sky .tw-night{opacity:0}
[data-theme="day"] .theme-sky .tw-day{opacity:1}
[data-theme="day"] .theme-sky .tw-stars{opacity:0}
[data-theme="day"] .theme-sky .tw-sun{opacity:1;transform:scale(8.5)}

/* softer glow for the secondary sunrise plates (CTA band, Solar header):
   sits inside .bg, beneath the section scrim, so centred white copy stays legible */
.theme-sun{position:absolute;left:var(--sun-x,52%);top:var(--sun-y,50%);width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,247,221,.92),rgba(255,201,110,.5) 40%,rgba(255,162,72,0) 72%);
  filter:blur(2px);opacity:0;transform:scale(1)}
:root:not(.anim-on) .theme-sun{display:none}
[data-theme="day"] .theme-sun{opacity:.9;transform:scale(8)}

/* ---- the sun / moon toggle (injected into the nav + mobile menu) ---- */
.theme-toggle{position:relative;width:60px;height:30px;border-radius:999px;cursor:pointer;flex:none;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);transition:background .4s,border-color .4s}
.theme-toggle .knob{position:absolute;top:50%;left:3px;width:24px;height:24px;border-radius:50%;transform:translate(0,-50%);
  background:radial-gradient(circle at 35% 30%,#fff,#cfd6e2 70%);box-shadow:inset -2px -2px 4px rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.4);
  transition:transform .8s cubic-bezier(.5,0,.2,1),background .6s ease,box-shadow .6s ease}
.theme-toggle .ti{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;line-height:1;transition:opacity .4s ease}
.theme-toggle .ti-moon{right:8px;opacity:.85}
.theme-toggle .ti-sun{left:8px;opacity:0}
.theme-toggle:hover{border-color:var(--canary)}
[data-theme="day"] .theme-toggle{background:rgba(255,255,255,.6);border-color:rgba(18,22,32,.18)}
[data-theme="day"] .theme-toggle:hover{border-color:#cf8f00}
[data-theme="day"] .theme-toggle .knob{transform:translate(30px,-50%);background:radial-gradient(circle at 35% 30%,#fff4cf,#ffcf6b 72%);box-shadow:0 0 12px rgba(255,200,90,.85)}
[data-theme="day"] .theme-toggle .ti-moon{opacity:0}
[data-theme="day"] .theme-toggle .ti-sun{opacity:1}
/* mobile-menu variant: a labelled row inside the dark overlay */
.mm-theme{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--off)}
@media(min-width:1081px){.mm-theme{display:none}}

/* ============================================================================
   NAV LINK LEGIBILITY (2026-08-13). The link row sits on the fixed, initially
   transparent nav, so before .scrolled paints the bar the light gray labels
   floated bare over whatever hero was behind them - unreadable on bright
   imagery (worst on the solar page). One shared capsule, same treatment as
   .btn-login, keeps them legible on any backdrop; it fades away once
   .scrolled darkens the whole bar so the two scrims never stack.
   ============================================================================ */
.nav-links{background:rgba(12,15,22,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:9px 22px;
  transition:background .5s,border-color .5s}
.nav.scrolled .nav-links{background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* Nav link color (2026-08-13, owner request): the gray labels blended into the
   capsule. Links now live in the gold family at rest - the same tone they
   used to turn on hover - with hover brightening to canary and the current
   page underlined so the states stay distinguishable. If this reads as too
   much gold beside the CTA, the alternative is color:#f9f8f6 at rest. */
.nav-links a{color:var(--gold-1);opacity:1}
.nav-links a:hover{color:var(--canary);opacity:1}
.nav-links a.active{color:var(--canary)}

/* Day mode nav links (2026-08-13): the old day override painted them dark ink
   for a light bar, but the links now sit on the dark capsule in every theme,
   so they were invisible in day mode. Same gold as dark mode, both themes. */
[data-theme="day"] .nav-links a{color:var(--gold-1);opacity:1}
[data-theme="day"] .nav-links a:hover{color:var(--canary)}
[data-theme="day"] .nav-links a.active{color:var(--canary)}