/* ==========================================================================
   TSJ Sourcing Ltd, design system
   Rebuilt clean. Two rules kept deliberately:
   1. No component's `position` is ever set twice. Stacking is handled in the
      STACKING block below and nowhere else.
   2. No `will-change` on repeated elements. It promotes every match to its
      own GPU layer permanently and costs far more than it saves.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bone:#FCFCFD;
  --bone-2:#F3F5F9;
  --ink:#141A2E;
  --ink-2:#333B54;
  --ink-3:#646D85;
  --ink-4:#949CB0;
  --navy:#1E2A56;
  --navy-2:#16204A;
  --navy-soft:#EDF0F8;
  --gold:#C9A227;
  --gold-deep:#8F7212;
  --slate:#6E7787;

  --bg:var(--bone);
  --bg-alt:var(--bone-2);
  --surface:#FFFFFF;
  --surface-2:var(--bone-2);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --text-4:var(--ink-4);
  --accent:var(--navy);
  --accent-hover:var(--navy-2);
  --accent-soft:var(--navy-soft);
  --btn-on-accent:#fff;
  --border:rgba(20,26,46,.11);
  --border-soft:rgba(20,26,46,.06);

  --shadow-sm:0 1px 2px rgba(20,26,46,.05);
  --shadow-md:0 6px 20px rgba(20,26,46,.06),0 1px 3px rgba(20,26,46,.04);
  --shadow-lg:0 20px 52px rgba(20,26,46,.10),0 4px 12px rgba(20,26,46,.05);

  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1200px;
  --wrap-narrow:760px;
  --gutter:clamp(20px,5vw,48px);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --nav-h:74px;
}

/* Dark palette, defined once and reused by both dark states */
[data-theme="dark"]{
  --bg:#0E1220; --bg-alt:#141A2C; --surface:#181F34; --surface-2:#20283F;
  --text:#F2F4F9; --text-2:#D3D8E5; --text-3:#9BA3B8; --text-4:#6F7893;
  --accent:#D9B443; --accent-hover:#E5C560; --accent-soft:#2A2415;
  --btn-on-accent:#101627;
  --gold:#D9B443; --gold-deep:#D9B443; --navy:#D9B443;
  --border:rgba(242,244,249,.14); --border-soft:rgba(242,244,249,.07);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1220; --bg-alt:#141A2C; --surface:#181F34; --surface-2:#20283F;
    --text:#F2F4F9; --text-2:#D3D8E5; --text-3:#9BA3B8; --text-4:#6F7893;
    --accent:#D9B443; --accent-hover:#E5C560; --accent-soft:#2A2415;
    --btn-on-accent:#101627;
    --gold:#D9B443; --gold-deep:#D9B443; --navy:#D9B443;
    --border:rgba(242,244,249,.14); --border-soft:rgba(242,244,249,.07);
    color-scheme:dark;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{margin:0;font-weight:550;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:var(--btn-on-accent)}

/* ==========================================================================
   STACKING
   Every position/z-index decision for page-level regions lives here, once.
   Nothing below this block may set `position` on these selectors again.
   ========================================================================== */
.header{position:sticky;top:0;z-index:100}
main{position:relative;z-index:1}
.footer{position:relative;z-index:1}
.drift{position:fixed;inset:-25% 0;z-index:0;pointer-events:none}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
.progress{position:fixed;top:0;left:0;z-index:300;pointer-events:none}
.drawer{position:fixed;inset:0;z-index:400}      /* above everything */
.floats{position:fixed;right:20px;bottom:20px;z-index:90}
.quotebar{position:fixed;left:0;right:0;bottom:0;z-index:95}
.sectionnav{position:fixed;left:24px;top:50%;z-index:80}
.skip-link{position:absolute;z-index:500}

/* ---------- Type ---------- */
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.03em}
.h1{font-size:clamp(2.35rem,1.5rem + 3.4vw,3.85rem);line-height:1.06}
.h2{font-size:clamp(1.95rem,1.3rem + 2.6vw,3.1rem);line-height:1.1}
.h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem);line-height:1.2}
.h4{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.3}
.lead{font-size:clamp(1.06rem,1rem + .5vw,1.32rem);line-height:1.6;color:var(--text-2)}
.small{font-size:.875rem;line-height:1.55}
.muted{color:var(--text-3)}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(68px,9vw,132px)}
.section-tight{padding-block:clamp(44px,5vw,72px)}
.section-alt{background:var(--bg-alt)}
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.stack{display:flex;flex-direction:column}
.stack-sm{gap:.75rem}.stack-md{gap:1.25rem}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.section-head{max-width:660px;margin-bottom:clamp(32px,4vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media (max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--btn-on-accent);--btn-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.82em 1.5em;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  border-radius:var(--radius-sm);font-size:.94rem;font-weight:550;cursor:pointer;text-align:center;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .16s,border-color .16s,box-shadow .16s;
}
.btn:hover{--btn-bg:var(--accent-hover);--btn-bd:var(--accent-hover);transform:translateY(-1.5px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--border)}
.btn-ghost:hover{--btn-bg:var(--surface);--btn-bd:var(--text-3)}
.btn-light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn-outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.btn-outline-light:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:rgba(255,255,255,.7)}
.btn-lg{padding:.98em 1.9em;font-size:1rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:.4em;color:var(--accent);font-weight:550;font-size:.94rem;transition:gap .18s}
.link-arrow:hover{gap:.7em}
.link-arrow svg{width:1em;height:1em}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.45em;padding:.34em .78em;
  border:1px solid var(--border);border-radius:100px;background:var(--surface);
  font-size:.78rem;font-weight:500;color:var(--text-2);white-space:nowrap;
}
.badge-accent{background:var(--accent-soft);border-color:transparent;color:var(--accent-hover)}
.badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ED598;box-shadow:0 0 0 3px rgba(62,213,152,.2)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:.85rem;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s;
}
a.card:hover,.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--text-4)}
.card-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.card-icon svg{width:22px;height:22px}
.card-num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--text-4)}
.card-media{padding:0}
.card-media .media{border:0;border-radius:0;border-bottom:1px solid var(--border)}
.card-media .card-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:.7rem}

/* ---------- Media ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.media-3x2{aspect-ratio:3/2}
.media-4x3{aspect-ratio:4/3}
.media-16x9{aspect-ratio:16/9}
.media-tall{aspect-ratio:4/5}
a:hover>.media img,.card:hover .media img{transform:scale(1.04)}
figure{margin:0}

/* ---------- Skip link / topbar ---------- */
.skip-link{left:12px;top:-60px;background:var(--accent);color:var(--btn-on-accent);padding:.7em 1.2em;border-radius:var(--radius-sm);transition:top .2s;font-weight:550}
.skip-link:focus{top:12px}
.topbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.1)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar-links{display:flex;gap:1.25rem;align-items:center}
.topbar-links a,.topbar-links span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.topbar-links svg{width:13px;height:13px;opacity:.7}
@media (max-width:760px){.topbar{display:none}}

/* ---------- Header ---------- */
.header{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.header.is-stuck{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:1.5rem;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;margin-right:auto}
.brand-mark{width:48px;height:48px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:11px;padding:3px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.34rem;letter-spacing:-.02em}
.brand-sub{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3)}
.nav-menu{display:flex;align-items:center;gap:.15rem;list-style:none}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:.32em;padding:.55em .8em;border-radius:var(--radius-sm);font-size:.925rem;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color .16s,background .16s}
.nav-link:hover,.nav-item:hover>.nav-link{color:var(--text);background:var(--surface-2)}
.nav-link[aria-current="page"]{color:var(--accent);font-weight:600}
.nav-link .chev{width:11px;height:11px;opacity:.55;transition:transform .2s}
.nav-item:hover .chev{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:290px;list-style:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-item:hover>.dropdown,.dropdown:focus-within,.nav-item.is-open>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:.6rem .8rem;border-radius:var(--radius-sm);transition:background .14s}
.dropdown a:hover{background:var(--surface-2)}
.dropdown strong{display:block;font-size:.9rem;font-weight:550}
.dropdown span{display:block;font-size:.79rem;color:var(--text-3);line-height:1.4;margin-top:.1rem}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);background:transparent;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-2);transition:background .16s,color .16s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.nav-toggle{display:none}
@media (max-width:1080px){.nav-menu{display:none}.nav-toggle{display:grid}.nav-cta{display:none}}

/* ---------- Drawer ----------
   `position` is set in the STACKING block. Only appearance here. */
.drawer{visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer-scrim{position:absolute;inset:0;background:rgba(8,11,20,.62);opacity:0;transition:opacity .26s}
.drawer.is-open .drawer-scrim{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(400px,92vw);
  background:var(--bg);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.9,.3,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.drawer-body{padding:1rem 1.25rem 2rem;display:flex;flex-direction:column;gap:.2rem}
.drawer-body>a,.m-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.85rem .25rem;font-size:1.02rem;font-weight:500;border:0;background:none;border-bottom:1px solid var(--border-soft);cursor:pointer;text-align:left;color:inherit}
.m-acc-btn svg{width:14px;height:14px;transition:transform .2s;opacity:.6}
.m-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-acc-panel{display:none;padding:.4rem 0 .8rem .9rem;border-left:2px solid var(--accent-soft);margin:.3rem 0 .3rem .25rem}
.m-acc-panel.is-open{display:block}
.m-acc-panel a{display:block;padding:.5rem 0;font-size:.94rem;color:var(--text-2)}
.drawer-foot{margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.drawer-foot .theme-link{align-self:center;margin-top:.6rem;width:38px;height:38px;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-3)}

/* Scroll lock. One source of truth. */
html.nav-open{overflow:hidden}
html.nav-open .hero-slide,html.nav-open .marquee-track,html.nav-open .ticker-track{animation-play-state:paused !important}
html.nav-open .ambient,html.nav-open .drift{display:none}
html.nav-open .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:#0F1420;overflow:hidden;padding-block:clamp(56px,7vw,104px) clamp(56px,7vw,96px)}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transform:scale(1.04);transition:opacity 1.4s ease-in-out}
.hero-slide.is-prev{opacity:1;z-index:1}
.hero-slide.is-active{opacity:1;z-index:2;animation:heroDrift 9s ease-out forwards}
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.10)}}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,15,28,.90) 0%,rgba(10,15,28,.78) 34%,rgba(10,15,28,.44) 66%,rgba(10,15,28,.26) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,68px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:1.2rem;color:#fff}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lead{color:rgba(255,255,255,.84)}
.hero .lead strong{color:#fff}
.hero .eyebrow{color:var(--gold)}
.hero .btn-ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.hero .btn-ghost:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:rgba(255,255,255,.7)}
.hero-actions{margin-top:2rem}
.hero-proof{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem)}
.hero-proof-item strong{display:block;font-family:var(--font-display);font-size:1.85rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff}
.hero-proof-item span{font-size:.8rem;color:rgba(255,255,255,.62)}
.hero-member{
  display:flex;gap:.65rem;align-items:flex-start;margin-top:1.6rem;padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08);font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.82);max-width:62ch;
}
.hero-member>span{flex:1 1 auto;min-width:0}
.hero-member svg{width:19px;height:19px;color:var(--gold);flex:none;margin-top:.15em}
.hero-member a{color:var(--gold);font-weight:550;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none;transform:none}.hero-slide.is-active{animation:none;transform:none}}

/* Tracker panel, sits over photography */
.hero-panel{
  background:rgba(12,17,31,.86);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
  box-shadow:0 26px 70px rgba(0,0,0,.5);overflow:hidden;
  backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);
}
html.nav-open .hero-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07)}
.hero-panel-head span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.hero-panel-head .badge-live{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.hero-panel-body{padding:1.15rem}
.track{display:flex;flex-direction:column}
.track-row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:.72rem 0}
.track-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28)}
.track-row:not(:last-child) .track-dot::after{content:"";position:absolute;top:100%;left:50%;width:1.5px;height:calc(1.44rem + 4px);background:rgba(255,255,255,.22);transform:translateX(-50%)}
.track-row.done .track-dot{background:var(--gold);border-color:var(--gold);color:#101627}
.track-row.done .track-dot::after{background:var(--gold);opacity:.5}
.track-row.active .track-dot{background:#fff;border-color:#fff;color:#101627}
.track-dot svg{width:13px;height:13px}
.track-label{font-size:.92rem;font-weight:500;line-height:1.35;color:#fff}
.track-label small{display:block;font-weight:400;font-size:.78rem;color:rgba(255,255,255,.68);margin-top:.1rem}
.track-meta{font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.6);white-space:nowrap;padding-top:.2rem}

/* ---------- Strip / marquee ---------- */
.strip{border-block:1px solid var(--border);background:var(--bg-alt);padding-block:1.5rem;overflow:hidden}
.strip-label{text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);margin-bottom:1.1rem}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:clamp(2rem,5vw,4rem);align-items:center;padding-right:clamp(2rem,5vw,4rem);animation:marquee 38s linear infinite;flex:none}
/* the strip keeps running under the cursor: it is decoration, not a control */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee-item{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--text-3);white-space:nowrap;display:flex;align-items:center;gap:.5rem}
.marquee-item svg{width:18px;height:18px;opacity:.75;flex:none}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:clamp(20px,3vw,30px)}
.stat strong{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2vw,2.9rem);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--accent)}
.stat span{display:block;margin-top:.5rem;font-size:.86rem;color:var(--text-3);line-height:1.4}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Checklist ---------- */
.checklist{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.97rem;color:var(--text-2)}
.checklist svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:.18em}
.checklist strong{color:var(--text);font-weight:600}

/* ---------- Operations grid ---------- */
.op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.op-tile{display:flex;flex-direction:column;gap:.7rem;margin:0}
.op-media{display:block;position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);aspect-ratio:4/3}
.op-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.op-tile:hover .op-media img{transform:scale(1.05)}
.op-tile figcaption{display:flex;flex-direction:column;gap:.12rem;padding-inline:.15rem}
.op-step{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--gold-deep)}
.op-tile strong{font-size:.96rem;font-weight:600;line-height:1.3;color:var(--text)}
.op-sub{font-size:.82rem;color:var(--text-3);line-height:1.45}
@media (max-width:1000px){.op-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.op-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.op-grid{grid-template-columns:1fr}}

/* ---------- Band ---------- */
.band{position:relative;overflow:hidden;min-height:min(58vh,460px);display:grid;align-items:center}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(16,22,44,.93) 0%,rgba(16,22,44,.78) 45%,rgba(16,22,44,.45) 100%)}
.band .wrap{position:relative;z-index:2;color:#fff;padding-block:clamp(48px,7vw,84px)}
.band .lead,.band p{color:rgba(255,255,255,.8)}
.band .eyebrow{color:var(--gold)}
.band h2{color:#fff}
.band-stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.2rem);margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.2)}
.band-stats div strong{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff}
.band-stats div span{font-size:.8rem;color:rgba(255,255,255,.6)}

/* ---------- Steps ---------- */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--border)}
.step:last-child{border-bottom:1px solid var(--border)}
.step-n{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--accent);padding-top:.35rem;min-width:3.2rem}
.step-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:start}
@media (max-width:820px){.step-body{grid-template-columns:1fr;gap:.7rem}}
.step h3{margin-bottom:.5rem}
.step-deliv{font-size:.9rem;color:var(--text-3)}
.step-deliv dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);margin-bottom:.3rem}
.step-deliv dd{margin:0 0 .9rem}

/* ---------- Spec list ---------- */
.spec{display:flex;flex-direction:column;margin:0}
.spec>div{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;padding:.85rem 0;border-top:1px solid var(--border-soft)}
.spec>div:last-child{border-bottom:1px solid var(--border-soft)}
.spec dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-4);padding-top:.25em}
.spec dd{margin:0;font-size:.94rem;color:var(--text-2);line-height:1.6}
@media (max-width:640px){.spec>div{grid-template-columns:1fr;gap:.3rem}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:600px}
thead th{text-align:left;padding:.9rem 1.1rem;background:var(--surface-2);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;white-space:nowrap}
tbody td{padding:.9rem 1.1rem;border-bottom:1px solid var(--border-soft);vertical-align:top;color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody td:first-child{font-weight:550;color:var(--text)}
.table-note{font-size:.83rem;color:var(--text-3);margin-top:.85rem}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--border)}
.acc-item{border-bottom:1px solid var(--border)}
.acc-btn{display:flex;width:100%;gap:1rem;align-items:flex-start;justify-content:space-between;padding:1.25rem 0;background:none;border:0;cursor:pointer;text-align:left;font-size:1.05rem;font-weight:550;line-height:1.45;color:var(--text);transition:color .16s}
.acc-btn:hover{color:var(--accent)}
.acc-btn .plus{position:relative;width:18px;height:18px;flex:none;margin-top:.3em}
.acc-btn .plus::before,.acc-btn .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);border-radius:2px;transform:translate(-50%,-50%);transition:transform .24s cubic-bezier(.3,.9,.3,1)}
.acc-btn .plus::before{width:16px;height:2px}
.acc-btn .plus::after{width:2px;height:16px}
.acc-btn[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.9,.3,1)}
.acc-panel.is-open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p,.acc-panel ul{padding-bottom:1.35rem;color:var(--text-2);max-width:72ch}
.acc-panel ul{padding-left:1.15rem}
.acc-panel li{margin-bottom:.4rem}
.acc-panel a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:1.15rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label,.field .label{font-size:.86rem;font-weight:550;color:var(--text-2)}
.field .req{color:var(--accent)}
.field .hint{font-size:.78rem;color:var(--text-4);line-height:1.4}
.input,.select,.textarea{width:100%;padding:.75em .9em;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;appearance:none;transition:border-color .16s,box-shadow .16s}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-4)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input::placeholder,.textarea::placeholder{color:var(--text-4)}
.textarea{resize:vertical;min-height:120px;line-height:1.55}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646D85' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:15px;padding-right:2.4em}
.field-error .input,.field-error .select,.field-error .textarea{border-color:#D33B33;box-shadow:0 0 0 3px rgba(211,59,51,.14)}
.err-msg{font-size:.79rem;color:#D33B33;display:none}
.field-error .err-msg{display:block}
.checkgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.55rem}
.checkbox{display:flex;align-items:flex-start;gap:.6rem;padding:.68rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;background:var(--surface);line-height:1.4;transition:border-color .14s,background .14s}
.checkbox:hover{border-color:var(--text-4)}
.checkbox input{margin:.22em 0 0;accent-color:var(--accent);width:15px;height:15px;flex:none}
.checkbox:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.form-note{font-size:.82rem;color:var(--text-3);line-height:1.55}
.form-status{padding:.9rem 1.1rem;border-radius:var(--radius-sm);font-size:.92rem;display:none}
.form-status.is-ok{display:block;background:#E7F5EE;color:#14603F;border:1px solid #B7E0CB}
.form-status.is-err{display:block;background:#FCEBEA;color:#8E2019;border:1px solid #F2C4C0}
[data-theme="dark"] .form-status.is-ok{background:#0F2A1E;color:#7BD7AA;border-color:#1D4634}
[data-theme="dark"] .form-status.is-err{background:#2B1211;color:#F0A9A3;border-color:#5A2420}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Page head ---------- */
.pagehead{padding-block:clamp(44px,6vw,80px) clamp(32px,4vw,52px);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(700px 340px at 82% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%)}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{margin-bottom:1rem;max-width:20ch}
.pagehead .lead{max-width:62ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.82rem;color:var(--text-3);margin-bottom:1.4rem;list-style:none}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li:not(:last-child)::after{content:"/";color:var(--text-4)}
.crumbs a:hover{color:var(--accent)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:#141A2E;color:#fff;border-radius:var(--radius-lg)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 340px at 82% 15%,rgba(201,162,39,.30),transparent 62%),radial-gradient(500px 300px at 10% 100%,rgba(46,62,119,.45),transparent 60%)}
.cta-inner{position:relative;z-index:1;padding:clamp(36px,5vw,68px);display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:880px){.cta-inner{grid-template-columns:1fr}}
.cta h2{margin-bottom:.9rem;color:#fff}
.cta p{color:rgba(255,255,255,.74)}
.cta .eyebrow{color:var(--gold)}
.cta-actions{display:flex;flex-direction:column;gap:.7rem}
.cta-actions .small{color:rgba(255,255,255,.55);text-align:center}

/* ---------- Footer ---------- */
.footer{background:#141A2E;color:rgba(255,255,255,.7);padding-block:clamp(48px,6vw,76px) 0;font-size:.92rem}
.footer a{transition:color .16s}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h4,.footer .footer-h{color:#fff;font-size:.76rem;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:500}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:rgba(255,255,255,.45)}
.footer-about{max-width:38ch;margin:1.2rem 0 1.4rem;line-height:1.6}
.footer-contact{display:flex;flex-direction:column;gap:.7rem;font-style:normal}
.footer-contact div{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start}
.footer-contact svg{width:15px;height:15px;opacity:.55;margin-top:.28em;flex:none}
.member-badge{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;padding:.75rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);background:rgba(255,255,255,.05)}
.member-badge svg{width:22px;height:22px;color:var(--gold);flex:none}
.member-badge span{font-size:.78rem;line-height:1.4}
.member-badge strong{display:block;color:#fff;font-size:.82rem;font-weight:600}
.socials{display:flex;gap:.55rem;margin-top:1.4rem}
.socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);transition:background .16s,border-color .16s}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.socials svg{width:17px;height:17px}
.footer-bar{margin-top:clamp(36px,5vw,56px);padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.82rem}
.footer-bar ul{flex-direction:row;gap:1.3rem;flex-wrap:wrap}

/* Bangladesh flag, official 10:6 proportions */
.flag{width:21px;aspect-ratio:10/6;height:auto;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.made-in{display:flex;align-items:center;gap:.55em;flex-wrap:wrap}
.made-in .flag{width:18px}
.footer-contact .flag,.footer .flag{opacity:1;margin-top:0}

/* Theme toggle, icon only */
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:inline}
}
.theme-link{display:inline-flex;align-items:center;gap:.45em;background:none;border:0;padding:0;cursor:pointer;font-size:inherit;color:inherit;font-family:inherit}
.theme-link svg{width:15px;height:15px;opacity:.75;flex:none}
.footer .theme-link:hover{color:#fff}

/* ---------- Blog ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.79rem;color:var(--text-4);font-family:var(--font-mono)}
.prose{max-width:70ch;font-size:1.06rem;line-height:1.75;color:var(--text-2)}
.prose>*+*{margin-top:1.3em}
.prose h2{font-size:1.6rem;margin-top:2.2em;color:var(--text)}
.prose h3{font-size:1.24rem;margin-top:1.8em;color:var(--text)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.5em}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:1.8em 0;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--accent);font-family:var(--font-display);font-size:1.2rem;font-style:italic;color:var(--text)}

/* ---------- Industry ticker ---------- */
.ticker{display:flex;align-items:stretch;border-block:1px solid var(--border);background:var(--bg-alt);overflow:hidden}
.ticker-label{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.15rem;flex:none;background:var(--navy);color:var(--btn-on-accent);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker-label .dot{width:7px;height:7px;border-radius:50%;background:#3ED598;flex:none;box-shadow:0 0 0 3px rgba(62,213,152,.22);animation:tickpulse 2.4s ease-in-out infinite}
@keyframes tickpulse{0%,100%{opacity:1}50%{opacity:.45}}
.ticker-view{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
.ticker-track{display:flex;align-items:center;gap:2.6rem;list-style:none;white-space:nowrap;padding:.85rem 1.4rem;animation:tickscroll 64s linear infinite;width:max-content}
.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tickscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-item{display:inline-flex;align-items:center;gap:.6rem;font-size:.86rem}
.tick-item a{display:inline-flex;align-items:center;gap:.6rem;color:inherit}
.tick-item a:hover .tick-text{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tick-date{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--slate);padding:.2em .55em;border-radius:4px;flex:none}
[data-theme="dark"] .tick-date{background:var(--surface-2);color:var(--text-3)}
.tick-text{color:var(--text-2)}
.tick-src{font-size:.74rem;color:var(--text-4);flex:none}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;width:auto;overflow-x:auto}.ticker-view{-webkit-mask-image:none;mask-image:none;overflow-x:auto}}
@media (max-width:760px){.ticker{flex-direction:column}.ticker-label{justify-content:center;padding:.55rem 1rem}}

/* ---------- Ambient (dark, pointer devices, wide screens only) ---------- */
.ambient{
  opacity:0;transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(217,180,67,.10) 0%,rgba(217,180,67,.05) 32%,transparent 68%);
}
[data-theme="dark"] .ambient{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ambient{opacity:1}}
@media (hover:none),(prefers-reduced-motion:reduce),(max-width:1080px){.ambient{display:none}}

.progress{height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),#E8D08A);opacity:.9}

/* ---------- Floating actions ---------- */
.floats{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.totop{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;border:1px solid var(--border);box-shadow:var(--shadow-lg);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.totop.is-vis{opacity:1;visibility:visible;transform:none}
.totop svg{width:18px;height:18px}
.wa{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#25D366;color:#fff;box-shadow:var(--shadow-lg);transition:transform .2s;flex:none}
.wa:hover{transform:scale(1.07)}
.wa svg{width:24px;height:24px}
@media (max-width:600px){.floats{right:14px;bottom:14px;gap:.5rem}.floats .wa,.floats .totop{width:44px;height:44px}}

/* ---------- Utilities ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid var(--border);margin-block:clamp(2rem,4vw,3.5rem)}

@media print{
  .header,.topbar,.footer,.floats,.drawer,.cta,.ambient,.progress{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1rem}
}


/* ==========================================================================
   Footer priority
   The footer is read top down, so it is ordered by what a buyer needs:
   who we are, then the membership that qualifies us, then contact, then
   navigation, then legal. The clock is the lowest-value item on the page,
   so it sits last in the bottom bar at footnote size.
   ========================================================================== */
.footer-brand{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;position:relative;
  padding-bottom:clamp(24px,3vw,34px);margin-bottom:clamp(28px,3.5vw,44px);
}
/* the stitched hem now underlines the company name, not the clock */
.footer-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,
    rgba(217,180,67,.5) 0 10px, transparent 10px 20px);
}
.brand-lg{gap:1.05rem;text-decoration:none}
.brand-lg .brand-mark{width:64px;height:64px;border-radius:14px;padding:4px}
.footer .brand-lg .brand-name{
  font-size:clamp(1.65rem,1.15rem + 1.4vw,2.15rem);letter-spacing:-.025em;line-height:1.05;
}
.footer .brand-lg .brand-sub{
  font-size:.7rem;letter-spacing:.17em;color:var(--gold);margin-top:.55rem;
}
.footer-brand .member-badge{margin-top:0;max-width:340px}

/* Dhaka clock: last item, footnote size, quieter than every link near it */
.footer-clock{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;
  font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.4);
}
.clock-city{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.32);
}
.clock-time{color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.clock-sep{color:rgba(255,255,255,.22)}
.clock-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--slate);transition:background .3s,box-shadow .3s}
.clock-dot.is-open{background:#3ED598;box-shadow:0 0 0 3px rgba(62,213,152,.12);animation:clockPulse 3s ease-in-out infinite}
.clock-dot.is-appt{background:var(--gold);box-shadow:0 0 0 3px rgba(217,180,67,.12)}
.clock-dot.is-shut{background:#6E7787;box-shadow:0 0 0 3px rgba(110,119,135,.12)}
@keyframes clockPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.clock-dot.is-open{animation:none}}
@media (max-width:760px){
  .footer-brand{gap:20px}
  .footer-brand .member-badge{max-width:none}
}

/* ==========================================================================
   Hero trust chips
   Four things a buyer checks before reading anything else. Each one is
   stated elsewhere on the site, so nothing here is a new claim.
   ========================================================================== */
.hero-chips{
  display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin:1.6rem 0 0;padding:0;list-style:none;
}
.hero-chips li{
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;
  border:1px solid rgba(255,255,255,.2);border-radius:100px;background:rgba(255,255,255,.07);
  font-size:.78rem;color:rgba(255,255,255,.88);white-space:nowrap;
}
.hero-chips svg{width:14px;height:14px;color:var(--gold);flex:none}

/* ==========================================================================
   Company film
   preload="none" and a cover that sits over the video: the file is only
   fetched when a buyer presses play, so it costs nothing on first paint.
   ========================================================================== */
.film{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#16204A 0%,#1E2A56 48%,#0F1733 100%);
  border:1px solid var(--border);box-shadow:var(--shadow-lg);
}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:#0F1733}
.film-cover{
  position:absolute;inset:0;display:block;padding:0;cursor:pointer;border:0;
  text-align:left;color:#fff;font:inherit;background:#0F1733;overflow:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.film-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.film-cover:hover .film-poster,.film-cover:focus-visible .film-poster{transform:scale(1.03)}
/* a soft floor so the play button and label stay legible over the frame */
.film-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(8,12,26,.55) 0%, rgba(8,12,26,.14) 26%, transparent 52%);
}
.film.is-playing .film-cover{opacity:0;visibility:hidden}
.film-play{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  width:clamp(62px,7.5vw,86px);height:clamp(62px,7.5vw,86px);border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:#101627;
  box-shadow:0 14px 40px rgba(0,0,0,.42);transition:transform .25s ease;z-index:2;
}
.film-play svg{width:38%;height:38%;margin-left:8%}
.film-cover:hover .film-play,.film-cover:focus-visible .film-play{transform:translate(-50%,-50%) scale(1.08)}
.film-play::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.film-copy{
  position:absolute;right:clamp(14px,2.4vw,26px);bottom:clamp(12px,2vw,20px);z-index:2;
  display:flex;align-items:baseline;gap:.5rem;
}
.film-eyebrow{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}
.film-meta{font-size:.78rem;color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){
  .film-cover,.film-play{transition:none}
}

/* ==========================================================================
   Programme tracker
   Each stage opens to explain what actually happens, so the panel teaches
   the process instead of implying a live order.
   ========================================================================== */
.track-row{position:relative;padding:0}
.track-btn{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;
  width:100%;padding:.72rem 0;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;border-radius:8px;
}
.track-btn:hover .track-label,.track-btn:focus-visible .track-label{color:#fff}
.track-row:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:34px;bottom:2px;width:1.5px;
  background:rgba(255,255,255,.22);transform:translateX(-50%);
}
.track-row.done:not(:last-child)::after{background:var(--gold);opacity:.5}
.track-row:not(:last-child) .track-dot::after{display:none}
.track-detail{
  margin:0 0 .6rem 2.3rem;padding:.75rem .9rem;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.track-detail p{margin:0;font-size:.84rem;line-height:1.55;color:rgba(255,255,255,.76)}
.track-note{
  margin:1rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.76rem;color:rgba(255,255,255,.5);
}
.track-note a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Multi-step quotation form
   Three short steps read better on a phone than one long column, and each
   step validates before it advances so errors surface next to their field.
   ========================================================================== */
.steps-bar{margin-bottom:.9rem}
.steps-progress{display:block;height:3px;border-radius:3px;background:var(--border);overflow:hidden}
.steps-progress span{display:block;height:100%;width:33.33%;background:var(--gold);transition:width .35s ease}
.steps-bar ol{display:flex;justify-content:space-between;gap:.5rem;margin:.6rem 0 0;padding:0;list-style:none}
.steps-bar li{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);transition:color .25s;
}
.steps-bar li.is-on{color:var(--gold)}
.steps-count{margin:0 0 1.3rem;font-size:.78rem;color:var(--text-3)}
.form-step{border:0;padding:0;margin:0;min-width:0}
.form-step[hidden]{display:none}
.form-nav{display:flex;gap:.7rem;align-items:center;margin-top:.4rem}
.form-nav .btn{flex:1 1 auto;justify-content:center}
.form-nav .btn-ghost{flex:0 0 auto}
.form-hint{margin:.55rem 0 0;font-size:.8rem;color:var(--text-3)}
.checkbox-req{align-items:flex-start}
.checkbox-req a{text-decoration:underline;text-underline-offset:2px}

/* file upload */
.drop{position:relative;display:block;border:1.5px dashed var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);transition:border-color .2s,background .2s}
.drop.is-over,.drop:hover{border-color:var(--gold);background:var(--accent-soft)}
.drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-face{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.5rem 1rem;text-align:center;pointer-events:none}
.drop-face svg{width:24px;height:24px;color:var(--gold)}
.drop-main{font-weight:550;font-size:.92rem}
.drop-sub{font-size:.78rem;color:var(--text-3)}
.drop-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.drop-list li{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;
  padding:.45rem .7rem;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-2)}
.drop-list li.is-big{background:rgba(199,58,58,.1);color:#B23A3A}
.drop-list span{font-variant-numeric:tabular-nums;color:var(--text-3);flex:none}

/* what-helps-us-quote checklist */
.pack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pack-item{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem .95rem;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);transition:border-color .2s,background .2s}
.pack-item:hover{border-color:var(--gold)}
.pack-item input{margin-top:.15rem;accent-color:var(--gold);width:17px;height:17px;flex:none}
.pack-item span{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem;color:var(--text-2)}
.pack-item strong{font-size:.92rem;color:var(--text)}
.pack-item input:checked ~ span strong{color:var(--gold-deep)}
.pack-item:has(input:checked){background:var(--accent-soft);border-color:transparent}
.pack-score{margin:.9rem 0 0;font-size:.82rem;color:var(--text-3)}

/* numbered "what happens next" */
.flow-steps{counter-reset:fs;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.flow-steps li{counter-increment:fs;display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  font-size:.9rem;color:var(--text-2)}
.flow-steps li::before{
  content:counter(fs);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#101627;font-family:var(--font-mono);font-size:.7rem;font-weight:600;
}

/* simplified mobile menu */
.m-primary{display:flex !important;align-items:center;justify-content:space-between;gap:.8rem;
  margin-bottom:.4rem;padding:.95rem 1.05rem !important;border-radius:var(--radius-sm);
  background:var(--navy);color:#fff !important;border-bottom:0 !important}
.m-primary strong{font-weight:600}
.m-primary svg{width:17px;height:17px}
.m-divider{margin:1.3rem 0 .2rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3)}
.m-more{display:flex;flex-wrap:wrap;gap:.45rem}
.m-more a{padding:.5rem .8rem !important;border:1px solid var(--border);border-radius:100px;
  font-size:.82rem !important;font-weight:450 !important;border-bottom:1px solid var(--border) !important}

/* ==========================================================================
   Contact cards and copy buttons
   ========================================================================== */
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.contact-value{margin:0;font-size:.95rem;color:var(--text-2);line-height:1.5}
.contact-value a{color:var(--text);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.contact-value a:hover{text-decoration-color:var(--gold)}
.copy-btn{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;padding:.4rem .75rem;
  border:1px solid var(--border);border-radius:100px;background:var(--surface);
  font-size:.76rem;color:var(--text-3);cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.copy-btn:hover{border-color:var(--gold);color:var(--text)}
.copy-btn svg{width:13px;height:13px}
.copy-btn.is-done{border-color:transparent;background:var(--accent-soft);color:var(--gold-deep)}

/* ==========================================================================
   Time zone panel
   Office hours converted to the visitor's own clock. Computed live from the
   device, so daylight saving can never make it wrong.
   ========================================================================== */
.tz{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);
  max-width:820px;margin-inline:auto;padding:clamp(22px,3.4vw,36px);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);
}
.tz-face{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.tz-label{margin:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.tz-name{text-transform:none;letter-spacing:0;color:var(--text-3)}
.tz-time{
  margin:0;font-family:var(--font-display);font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.tz-zone{margin:0;font-size:.8rem;color:var(--text-3)}
.tz-state{
  grid-column:1/-1;display:inline-flex;align-items:center;gap:.6rem;align-self:start;
  padding:.55rem 1rem;border:1px solid var(--border);border-radius:100px;background:var(--surface-2);
  font-size:.86rem;color:var(--text-2);width:max-content;max-width:100%;
}
.tz-window{
  grid-column:1/-1;margin:0;padding-top:1rem;border-top:1px solid var(--border);
  font-size:.9rem;color:var(--text-2);line-height:1.6;
}
.tz-window strong{color:var(--text);font-weight:600}
@media (max-width:620px){.tz{grid-template-columns:1fr}}

/* ==========================================================================
   FAQ filter
   ========================================================================== */
.faq-filter{position:relative;margin-bottom:.8rem}
.faq-filter .input{padding-left:2.7rem}
.faq-filter-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none}
.faq-filter-icon svg{width:17px;height:17px;color:var(--text-3)}
.faq-count{margin:0 0 1.8rem;font-size:.82rem;color:var(--text-3);min-height:1.2em}
.acc-item[hidden],.faq-group[hidden]{display:none}
mark.faq-hit{background:var(--accent-soft);color:var(--gold-deep);padding:0 .15em;border-radius:3px}
.faq-empty{padding:1.5rem;border:1px dashed var(--border);border-radius:var(--radius-sm);
  text-align:center;color:var(--text-3);font-size:.92rem}
.faq-empty a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Sticky quote bar, phones only
   A buyer arriving from an email or LinkedIn on a phone should never have to
   hunt for the quotation form. Appears once the hero is behind them, and
   stands down while the menu is open.
   ========================================================================== */
.quotebar{
  display:none;gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  transform:translateY(110%);transition:transform .3s ease;
}
.quotebar.is-up{transform:translateY(0)}
.quotebar-cta{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1rem;border-radius:var(--radius-sm);background:var(--navy);color:#fff;
  font-weight:550;font-size:.95rem;
}
.quotebar-cta svg{width:16px;height:16px}
.quotebar-wa{
  flex:none;width:50px;display:grid;place-items:center;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:#25D366;
}
.quotebar-wa svg{width:22px;height:22px}
@media (max-width:860px){
  .quotebar{display:flex}
  /* keep the floating buttons clear of the bar */
  .floats{bottom:84px}
}
html.nav-open .quotebar{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.quotebar{transition:none}}
@media print{.quotebar{display:none !important}}

/* ==========================================================================
   Statistic labels
   The caption under each figure was set at .8rem on a dark ground at 62%
   opacity, which reads as an afterthought next to a 30px number. Bigger,
   brighter, and given room to breathe.
   ========================================================================== */
.hero-proof{gap:clamp(1.8rem,4vw,3.4rem)}
.hero-proof-item strong{font-size:clamp(1.9rem,1.5rem + 1vw,2.3rem);margin-bottom:.4rem}
.hero-proof-item > span{
  display:block;font-size:.95rem;line-height:1.35;color:rgba(255,255,255,.85);
  max-width:14ch;
}
/* the counter span lives inside <strong>; it must keep the figure's size */
.hero-proof-item strong span{font-size:inherit;color:inherit;max-width:none;display:inline}
.band-stats div strong{margin-bottom:.4rem}
.band-stats div > span{
  display:block;font-size:.95rem;line-height:1.35;color:rgba(255,255,255,.82);max-width:16ch;
}
.band-stats div strong span{font-size:inherit;color:inherit;max-width:none;display:inline}
.stat > span{font-size:.95rem;color:var(--text-2)}
/* the animated counter sits inside <strong>; it must keep the figure's size */
.stat strong span{font-size:inherit;color:inherit;display:inline}
@media (max-width:520px){
  .hero-proof-item > span,.band-stats div > span{max-width:none}
}

/* ==========================================================================
   Factory cluster explorer
   The four clusters were a static row of captions. Each one now opens to
   show what is actually made there, taken from the capacity table on About.
   ========================================================================== */
.clusters{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.2)}
.cluster-tabs{display:flex;flex-wrap:wrap;gap:.6rem}
.cluster-tab{
  flex:1 1 180px;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;
  padding:.9rem 1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06);color:#fff;text-align:left;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.cluster-tab:hover{background:rgba(255,255,255,.12)}
.cluster-tab strong{font-family:var(--font-display);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.cluster-tab span{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.35}
.cluster-tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#101627}
.cluster-tab[aria-selected="true"] span{color:rgba(16,22,39,.78)}
.cluster-panel{
  margin-top:1rem;padding:1.3rem 1.5rem;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.cluster-panel[hidden]{display:none}
.cluster-lead{margin:0;font-size:1.02rem;color:#fff;line-height:1.5}
.cluster-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 0;padding:0;list-style:none}
.cluster-tags li{
  padding:.35rem .8rem;border-radius:100px;background:rgba(255,255,255,.12);
  font-size:.82rem;color:rgba(255,255,255,.92);
}
.cluster-note{margin:.9rem 0 0;font-size:.88rem;color:rgba(255,255,255,.66)}
.cluster-foot{margin:1rem 0 0;font-size:.84rem;color:rgba(255,255,255,.6)}
.cluster-foot a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.cluster-tab{flex:1 1 100%}}

/* ==========================================================================
   Section navigation
   Built by script from the sections a page already has, so no page carries
   a hand-written duplicate of its own table of contents. Desktop only: on a
   phone the sticky quote bar occupies that attention instead.
   ========================================================================== */
.sectionnav{
  transform:translateY(-50%);display:none;flex-direction:column;gap:.1rem;
  padding:.5rem;border-radius:100px;border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .3s;
}
.sectionnav.is-on{opacity:1;visibility:visible}
.sectionnav a{
  position:relative;display:flex;align-items:center;gap:.6rem;padding:.42rem;
  border-radius:100px;color:var(--text-3);text-decoration:none;
}
.sectionnav .dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--border-strong);
  transition:background .2s,transform .2s;
}
.sectionnav .tip{
  position:absolute;left:calc(100% + 10px);white-space:nowrap;font-size:.8rem;
  padding:.3rem .65rem;border-radius:var(--radius-sm);background:var(--ink);color:#fff;
  opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity .18s,transform .18s;
}
.sectionnav a:hover .tip,.sectionnav a:focus-visible .tip{opacity:1;transform:translateX(0)}
.sectionnav a:hover .dot{background:var(--gold)}
.sectionnav a.is-here .dot{background:var(--gold);transform:scale(1.5)}
@media (min-width:1180px){.sectionnav{display:flex}}
@media (prefers-reduced-motion:reduce){.sectionnav,.sectionnav .dot,.sectionnav .tip{transition:none}}
@media print{.sectionnav{display:none !important}}

/* ==========================================================================
   Entry sequence
   The opening screen composes itself once, then responds to the scroll:
   the frame drifts and the words lift away as the page moves. Everything is
   transform and opacity, so it stays on the compositor and costs no layout.
   ========================================================================== */
/* Only hide the opening copy when JavaScript is there to bring it back.
   Without this gate a crawler, or anyone with scripting off, would be served
   the headline at opacity 0. */
html.js [data-rise]{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.hero.is-entered [data-rise]{opacity:1;transform:none}
.hero.is-entered [data-rise="1"]{transition-delay:.05s}
.hero.is-entered [data-rise="2"]{transition-delay:.14s}
.hero.is-entered [data-rise="3"]{transition-delay:.26s}
.hero.is-entered [data-rise="4"]{transition-delay:.36s}
.hero.is-entered [data-rise="5"]{transition-delay:.44s}
.hero.is-entered [data-rise="6"]{transition-delay:.52s}
.hero.is-entered [data-rise="7"]{transition-delay:.3s}
/* once the opening has played, drop the hint so scrolling stays cheap */
/* Settling removes the transition entirely, so the final state holds even
   if the animation never ran: a tab opened in the background freezes
   transitions, and the words must not be stuck at opacity 0. */
.hero.is-settled [data-rise]{opacity:1;transform:none;transition:none;will-change:auto}
/* once settled the script drives the frame, so the transition must stand aside */
.hero.is-settled .hero-slides{transition:none}

/* the frame itself settles out of a slow push-in */
.hero-slides{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.hero.is-entered .hero-slides{transform:scale(1)}

/* scroll cue */
.hero-cue{
  position:absolute;left:50%;bottom:clamp(18px,3vh,34px);transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:.6rem;
  color:rgba(255,255,255,.62);text-decoration:none;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transition:opacity .6s ease .9s, color .2s;
}
.hero.is-entered .hero-cue{opacity:1}
.hero.is-settled .hero-cue{opacity:1;transition:none}
.hero-cue:hover{color:#fff}
.hero-cue-line{
  width:1px;height:clamp(28px,4vh,46px);background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7));
  animation:cueDrift 2.4s ease-in-out infinite;
}
@keyframes cueDrift{0%,100%{transform:scaleY(.55);transform-origin:top;opacity:.5}50%{transform:scaleY(1);transform-origin:top;opacity:1}}
@media (min-height:680px){.hero-cue{display:flex}}

@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1;transform:none;transition:none}
  .hero-slides,.hero.is-entered .hero-slides{transform:none;transition:none}
  .hero-cue{opacity:1;transition:none}
  .hero-cue-line{animation:none}
}

/* ==========================================================================
   Drift
   A single very faint wash behind everything. It slides a little as the page
   scrolls and lifts slightly while the page is actually moving, so scrolling
   feels answered rather than inert. Two gradients, one transform, no layout.
   ========================================================================== */
.drift{
  opacity:.62;
  transform:translate3d(0, calc(var(--drift, 0) * 1px), 0);
  transition:opacity .55s ease;
  background:
    radial-gradient(62vw 46vh at 14% 16%, rgba(30,42,86,.13), transparent 70%),
    radial-gradient(56vw 42vh at 86% 78%, rgba(201,162,39,.12), transparent 70%);
}
.drift.is-moving{opacity:1}
[data-theme="dark"] .drift{
  background:
    radial-gradient(62vw 46vh at 14% 16%, rgba(120,150,230,.15), transparent 70%),
    radial-gradient(56vw 42vh at 86% 78%, rgba(201,162,39,.13), transparent 70%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .drift{
    background:
      radial-gradient(62vw 46vh at 14% 16%, rgba(120,150,230,.15), transparent 70%),
      radial-gradient(56vw 42vh at 86% 78%, rgba(201,162,39,.13), transparent 70%);
  }
}
/* no movement when movement is unwelcome; the wash simply stays put */
@media (prefers-reduced-motion:reduce){
  .drift{transform:none;transition:none;opacity:.62}
  .drift.is-moving{opacity:.62}
}
@media print{.drift{display:none !important}}

/* ==========================================================================
   The telephone number
   Printed once on the site, under the address in the footer. Email is the
   route we want buyers to take, so the number is quiet rather than hidden.
   ========================================================================== */
.addr-tel{
  display:inline-block;margin-top:.35rem;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.62);text-decoration:none;
}
.addr-tel:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}