/* ==========================================================================
   Total Asset Consultancy — tac.css  ·  v2
   One Partner. Total Control.
   Barlow (headings) · Inter (body) · #0B0B0C / #CBA135 / #FFFFFF
   ========================================================================== */

/* ---------- 0. Self-hosted fonts ----------
   Served from this domain, so no visitor IP is sent to Google on page load.
   Drop the seven .woff2 files into assets/fonts/ — see assets/fonts/FONTS.md.
   font-display:swap means text is readable immediately using the fallback
   while the real face loads.                                             */
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- 1. Tokens ---------- */
:root{
  --black:#0B0B0C;
  --ink:#131316;
  --ink-2:#1A1A1E;
  --ink-3:#232329;
  --white:#FFFFFF;
  --gold:#CBA135;
  --gold-soft:rgba(203,161,53,.14);
  --gold-line:rgba(203,161,53,.34);
  --blue:#2E4A6B;

  --paper:#F4F4F1;
  --paper-2:#E9E9E4;

  --t-dark:#FFFFFF;
  --t-dark-mute:rgba(255,255,255,.68);
  --t-light:#0B0B0C;
  --t-light-mute:rgba(11,11,12,.68);

  --hair-dark:rgba(255,255,255,.11);
  --hair-light:rgba(11,11,12,.11);

  --f-head:"Barlow","Arial Narrow",Arial,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(58px,7vw,108px);   /* tightened from v1 */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:74px;
}

/* ---------- 1b. Cross-document page transitions ----------
   Supported in Chrome, Edge and Safari 18+. Other browsers navigate
   normally with no fallback needed. Requires http/https, so this will
   not fire when previewing from a file:// path.                        */
@view-transition{ navigation:auto }

::view-transition-old(root),
::view-transition-new(root){ animation-duration:.42s; animation-timing-function:cubic-bezier(.16,1,.3,1) }

/* header and footer are captured separately so they hold still while
   the page body changes underneath them */
.hdr{ view-transition-name:tac-header }
.ftr{ view-transition-name:tac-footer }
::view-transition-old(tac-header),::view-transition-new(tac-header),
::view-transition-old(tac-footer),::view-transition-new(tac-footer){ animation:none;mix-blend-mode:normal }

/* body content lifts in rather than a flat crossfade */
main{ view-transition-name:tac-main }
::view-transition-old(tac-main){ animation:vtOut .26s ease both }
::view-transition-new(tac-main){ animation:vtIn .46s cubic-bezier(.16,1,.3,1) both }
@keyframes vtOut{ to{opacity:0;transform:translateY(-14px)} }
@keyframes vtIn{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }

@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip crops sideways WITHOUT creating a scroll container.
   Using `hidden` here would silently disable every position:sticky on the page. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--black);color:var(--t-dark);
  font-family:var(--f-body);font-size:clamp(16px,1.05vw,17px);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
.wrap--wide{max-width:1440px}
.wrap--tight{max-width:880px}
.section{padding-block:var(--sec-y);position:relative;isolation:isolate;overflow:hidden}
.section--dark{background:var(--black);color:var(--t-dark)}
.section--ink{background:var(--ink);color:var(--t-dark)}

/* Light sections. --paper is a second, very slightly deeper light tone so two
   light sections can sit next to each other and still separate.            */
.section--light{background:var(--paper);color:var(--t-light);--scrim:244,244,241}
.section--paper{background:var(--paper-2);--scrim:233,233,228}
.section--light .eyebrow{color:#7E6417}
.section--light .gold{color:#7E6417}
.section--light .lede{color:var(--t-light-mute)}
.section--light .rule{background:var(--hair-light)}
/* every gold-on-light case deepened to #7E6417, which clears WCAG AA on paper.
   Brand gold #CBA135 only manages 2.2:1 against a light background.        */
.section--light .dcard__n,
.section--light .vrow__k,
.section--light .panel__out,
.section--light .panel__n,
.section--light .tlink,
.section--light .split__k,
.section--light .ccard__k,
.section--light .panel.is-open .panel__t,
.section--light .faq details[open] summary,
.section--light .faq summary::after{color:#7E6417}

.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 4. Type ---------- */
.eyebrow{
  font-family:var(--f-head);font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1rem;display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none;opacity:.8}
.h-xl{font-size:clamp(2.6rem,7vw,5.1rem)}
.h-lg{font-size:clamp(2rem,4.6vw,3.35rem)}
.h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.h-sm{font-size:clamp(1.12rem,1.6vw,1.32rem);letter-spacing:-.012em}
.lede{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.6;color:var(--t-dark-mute);max-width:62ch}
.gold{color:var(--gold)}
.rule{height:1px;background:var(--hair-dark);border:0;margin:0}
.measure{max-width:66ch}

/* word-split heading reveal */
.sw .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.sw .w > i{display:inline-block;font-style:inherit;transform:translateY(108%);transition:transform .95s var(--ease-out)}
.sw.in .w > i{transform:none}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--gold);--fg:var(--black);--bd:var(--gold);
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-head);font-weight:600;font-size:.94rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:1.05rem 1.9rem;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:2px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease-out),box-shadow .45s var(--ease-out),color .3s;
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--black);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.btn:hover{box-shadow:0 16px 38px -14px rgba(203,161,53,.55);color:var(--gold)}
.btn:hover::after{transform:translateY(0)}
.btn__arrow{transition:transform .4s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(5px)}

.btn--ghost{--bg:transparent;--fg:var(--white);--bd:rgba(255,255,255,.3)}
.btn--ghost::after{background:var(--white)}
.btn--ghost:hover{color:var(--black);box-shadow:none}
.section--light .btn--ghost{--fg:var(--black);--bd:rgba(11,11,12,.26)}
.section--light .btn--ghost::after{background:var(--black)}
.section--light .btn--ghost:hover{color:var(--white)}

.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-head);font-weight:600;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.35rem;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink span:last-child{transition:transform .4s var(--ease-out)}
.tlink:hover span:last-child{transform:translateX(5px)}

/* ---------- 6. Scroll progress bar ---------- */
.prog{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:1000;
  background:linear-gradient(90deg,var(--gold),#E8CE7A);
  transform:scaleX(var(--sp,0));transform-origin:left;
  will-change:transform;pointer-events:none;
}

/* ---------- 7. Header ---------- */
/* Solid black at all times — the hero behind it is white, so a transparent
   header would leave white nav text on a white background. */
.hdr{
  position:fixed;inset:0 0 auto;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--black);border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s,box-shadow .5s;
}
.hdr.is-stuck{
  background:rgba(11,11,12,.92);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--hair-dark);
  box-shadow:0 10px 34px -20px rgba(0,0,0,.9);
}
.hdr__in{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}
.hdr__logo{display:flex;align-items:center;gap:.85rem;perspective:700px}
/* continuous slow 360 on the Y axis. backface stays visible on purpose, so
   the mark reads as a solid object turning rather than vanishing halfway. */
.hdr__logo svg{
  width:74px;height:auto;transform-style:preserve-3d;will-change:transform;
  animation:hdrSpin 12s linear infinite;
}
@keyframes hdrSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.hdr__logo .mark path{fill:var(--white);transition:fill .35s}
.hdr__logo:hover .mark path{fill:var(--gold)}
.hdr__sub{font-family:var(--f-head);font-size:.58rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-dark-mute);line-height:1.3;max-width:6.5rem}
@media(max-width:520px){.hdr__sub{display:none}}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav a{font-family:var(--f-head);font-size:.82rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t-dark-mute);position:relative;padding:.4rem 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav a:hover{color:var(--white)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{border:1px solid var(--gold-line)!important;color:var(--gold)!important;
  padding:.6rem 1.15rem!important;border-radius:2px;transition:background .35s,color .35s!important}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--gold);color:var(--black)!important}

.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;position:relative;z-index:1001}
.burger i{display:block;height:1.5px;background:var(--white);margin:5px 0;transition:transform .4s var(--ease-out),opacity .3s}
.burger.is-open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.6rem;
    background:rgba(11,11,12,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
  .nav.is-open{opacity:1;visibility:visible}
  .nav a{font-size:1.5rem;letter-spacing:.06em}
  .nav__cta{margin-top:.8rem;font-size:.9rem!important}
}

/* ==========================================================================
   8. BACKGROUND MEDIA — large, animated, sits behind content
   ========================================================================== */
.bgimg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bgimg__i{
  position:absolute;inset:-14% -6%;
  background-size:cover;background-position:center;
  opacity:var(--op,.24);
  filter:grayscale(.45) contrast(1.06) brightness(.95);
  transform:translate3d(0,var(--py,0px),0);
  scale:1.06;
  animation:kenburns 30s ease-in-out infinite alternate;
  will-change:transform,scale;
}
@keyframes kenburns{
  from{scale:1.06;filter:grayscale(.5) contrast(1.06) brightness(.92)}
  to{scale:1.16;filter:grayscale(.32) contrast(1.1) brightness(1)}
}
/* readability scrim */
.bgimg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--black) 0%,rgba(11,11,12,.55) 22%,rgba(11,11,12,.55) 78%,var(--black) 100%),
    radial-gradient(ellipse 70% 60% at 30% 50%,rgba(11,11,12,.78),transparent 72%);
}
.section--ink .bgimg::after{
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(19,19,22,.5) 22%,rgba(19,19,22,.5) 78%,var(--ink) 100%),
    radial-gradient(ellipse 70% 60% at 30% 50%,rgba(19,19,22,.76),transparent 72%);
}
/* photos read stronger against light, so scale back whatever the section asked for */
.section--light .bgimg__i{opacity:calc(var(--op,.13) * .68);filter:grayscale(.72) contrast(1.02) brightness(1.04)}
.section--light .bgimg::after{
  background:
    linear-gradient(180deg,rgb(var(--scrim)) 0%,rgba(var(--scrim),.6) 24%,rgba(var(--scrim),.6) 76%,rgb(var(--scrim)) 100%),
    radial-gradient(ellipse 70% 60% at 30% 50%,rgba(var(--scrim),.82),transparent 72%);
}
/* right-weighted variant — text left, image reads right */
.bgimg--r::after{
  background:
    linear-gradient(180deg,var(--black) 0%,rgba(11,11,12,.42) 20%,rgba(11,11,12,.42) 80%,var(--black) 100%),
    linear-gradient(90deg,var(--black) 6%,rgba(11,11,12,.82) 38%,rgba(11,11,12,.15) 88%);
}

/* cursor spotlight on dark sections */
.spot{
  position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  background:radial-gradient(circle,rgba(203,161,53,.075),transparent 62%);
  pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;
  will-change:transform;
}
.spot.on{opacity:1}

/* ---------- 9. Hero ----------
   WHITE hero: light background, black text, black ambient accents.
   (Inner page heroes — .phero — remain dark; see section 9b.)          */
.hero{
  min-height:min(70svh,660px);display:flex;align-items:center;position:relative;overflow:hidden;
  padding-block:calc(var(--nav-h) + 2rem) 3.4rem;
  background:var(--white);color:var(--t-light);
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__glow{
  position:absolute;left:50%;top:34%;width:min(1250px,140vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(11,11,12,.09) 0%,rgba(11,11,12,.035) 34%,transparent 66%);
  animation:breathe 9s ease-in-out infinite alternate;will-change:transform;
}
@keyframes breathe{from{opacity:.7;scale:.94}to{opacity:1;scale:1.08}}

/* rotating conic sweep — sized to cover the whole hero, not just the middle.
   The square is larger than the section's diagonal so it stays covered at
   every rotation, and the mask only fades well outside the visible area.   */
.hero__sweep{
  position:absolute;left:50%;top:50%;width:max(190vw,210vh);aspect-ratio:1;
  transform:translate(-50%,-50%);
  /* the white patch on top hides the conic gradient's centre singularity,
     which otherwise shows as a hard pinwheel point behind the wordmark */
  background:
    radial-gradient(circle at 50% 50%,#fff 0 .5%,rgba(255,255,255,0) 4.5%),
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(11,11,12,.17) 30deg,
      transparent 68deg,
      transparent 118deg,
      rgba(11,11,12,.11) 150deg,
      transparent 192deg,
      transparent 236deg,
      rgba(11,11,12,.15) 268deg,
      transparent 310deg);
  mask-image:radial-gradient(circle,#000 0 46%,rgba(0,0,0,.7) 70%,transparent 96%);
  -webkit-mask-image:radial-gradient(circle,#000 0 46%,rgba(0,0,0,.7) 70%,transparent 96%);
  animation:spin 55s linear infinite;
  will-change:transform;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* second, slower sweep turning the other way so the motion never looks
   like a single blade going round */
.hero__sweep2{
  position:absolute;left:50%;top:50%;width:max(200vw,220vh);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%,#fff 0 .5%,rgba(255,255,255,0) 4.5%),
    conic-gradient(from 90deg,
      transparent 0deg,
      rgba(11,11,12,.10) 44deg,
      transparent 96deg,
      transparent 200deg,
      rgba(11,11,12,.08) 244deg,
      transparent 292deg);
  mask-image:radial-gradient(circle,#000 0 50%,transparent 94%);
  -webkit-mask-image:radial-gradient(circle,#000 0 50%,transparent 94%);
  animation:spinR 78s linear infinite;
  will-change:transform;
}
@keyframes spinR{to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* 3D perspective grid floor */
.hero__grid{
  position:absolute;inset:-25%;
  background-image:
    linear-gradient(rgba(11,11,12,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,12,.075) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 0%,transparent 78%);
  will-change:transform;
}
/* drifting light beams */
.hero__beams{position:absolute;inset:0}
.hero__beams i{
  position:absolute;top:-30%;width:1px;height:160%;
  background:linear-gradient(transparent,rgba(11,11,12,.32),transparent);
  opacity:0;animation:beam 11s ease-in-out infinite;
}
.hero__beams i:nth-child(1){left:18%;animation-delay:0s}
.hero__beams i:nth-child(2){left:47%;animation-delay:3.8s}
.hero__beams i:nth-child(3){left:78%;animation-delay:7.2s}
@keyframes beam{
  0%{opacity:0;transform:translateY(-24%) scaleY(.6)}
  22%{opacity:.75}
  55%{opacity:.28}
  100%{opacity:0;transform:translateY(22%) scaleY(1.15)}
}
/* floating particles */
.hero__dots{position:absolute;inset:0}
.hero__dots i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--black);
  opacity:.28;animation:float 17s ease-in-out infinite;
}
.hero__dots i:nth-child(1){left:12%;top:64%;animation-delay:0s}
.hero__dots i:nth-child(2){left:26%;top:28%;animation-delay:-2.5s;width:2px;height:2px}
.hero__dots i:nth-child(3){left:41%;top:78%;animation-delay:-5s}
.hero__dots i:nth-child(4){left:58%;top:20%;animation-delay:-7.5s;width:2px;height:2px}
.hero__dots i:nth-child(5){left:69%;top:70%;animation-delay:-10s}
.hero__dots i:nth-child(6){left:84%;top:38%;animation-delay:-12.5s}
.hero__dots i:nth-child(7){left:92%;top:82%;animation-delay:-15s;width:2px;height:2px}
.hero__dots i:nth-child(8){left:6%;top:40%;animation-delay:-8.2s;width:2px;height:2px}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0);opacity:.2}
  50%{transform:translate3d(14px,-42px,0);opacity:.65}
}
/* lightened so the sweep still reads at the bottom of the section */
.hero__vig{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.45) 100%)}
.hero__in{position:relative;z-index:2;width:100%;text-align:center}

/* — wordmark animation —
   Soft gradient wipe. The mask is three times the element's width with a
   feathered band through the middle; sliding the mask across reveals the
   mark through a gradient edge rather than a hard one.                    */
.wm{
  display:flex;flex-direction:column;align-items:center;gap:clamp(.7rem,1.2vw,1.1rem);
  perspective:1500px;perspective-origin:50% 45%;
}

.wm__mark{
  width:min(540px,66vw);
  transform-style:preserve-3d;
  -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);
          mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;  mask-position:100% 0;
  /* three layered animations:
       wmGrad   the gradient wipe (near-linear so the gradient is visible)
       wmSpin   swings in from an angle in 3D, settles flat
       wmFloat  keeps turning gently forever so the mark stays dimensional
     wmFloat is listed last so it takes over transform once it starts.      */
  animation:
    wmGrad 1.4s  cubic-bezier(.38,.12,.28,1) .25s forwards,
    wmSpin 1.75s cubic-bezier(.19,.82,.25,1) .15s both;
}
.wm__mark svg{width:100%;height:auto;display:block}
.wm__mark .mark path{fill:var(--black)}
@keyframes wmGrad{to{-webkit-mask-position:0% 0;mask-position:0% 0}}
/* kept under 40 degrees: any steeper and the mark goes edge-on at the same
   moment the gradient wipe is only half done, so neither effect reads */
@keyframes wmSpin{
  from{transform:rotateY(-38deg) rotateX(5deg) translateZ(-110px)}
  to  {transform:none}
}
/* inner wrapper carries the pointer tilt, so it never fights the entrance
   animation running on .wm__mark above it.
   NOTE: do not put a filter on this element. Any filter forces
   transform-style to compute to flat, which silently kills the 3D. */
.wm__mark-inner{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out);
}

.wm__sub{
  font-family:var(--f-head);font-size:clamp(.66rem,1.55vw,1.02rem);font-weight:500;
  letter-spacing:clamp(.28em,.72vw,.52em);text-transform:uppercase;color:var(--t-light-mute);
  padding-left:.5em;
  /* mirrored: the feathered band travels right to left */
  -webkit-mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);
          mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0% 0;    mask-position:0% 0;
  animation:wmGradR 1.2s cubic-bezier(.38,.12,.28,1) 1.05s forwards;
}
@keyframes wmGradR{to{-webkit-mask-position:100% 0;mask-position:100% 0}}

.wm__hair{width:0;height:1px;background:rgba(11,11,12,.3);animation:hairGrow .9s var(--ease-out) 1.9s forwards}
@keyframes hairGrow{to{width:min(460px,58vw)}}

.hero__tag{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.3rem,3vw,2.25rem);
  letter-spacing:-.02em;margin:clamp(1.1rem,1.9vw,1.6rem) 0 0;color:var(--black);
}
/* No opacity animation here: the h1 carries .sw, so its entrance is the
   word-by-word rise. tac.js adds .in on a timer rather than on scroll,
   because the hero is already in view when the page loads. */
/* deep gold — plain #CBA135 fails contrast on white */
.hero__tag .gold{color:#8A6E1E}
.hero__lede{margin:1rem auto 0;max-width:58ch;color:var(--t-light-mute);
  font-size:clamp(.98rem,1.25vw,1.1rem);opacity:0;transform:translateY(20px);
  animation:riseIn .9s var(--ease-out) 2.28s forwards}
.hero__btns{justify-content:center;margin-top:1.7rem;opacity:0;transform:translateY(20px);
  animation:riseIn .9s var(--ease-out) 2.46s forwards}
@keyframes riseIn{to{opacity:1;transform:none}}

/* Hidden now the hero no longer fills the viewport: the next section is
   already visible, so a "scroll" prompt is redundant and crowds the buttons.
   Change display to flex to bring it back.                                  */
.hero__scroll{
  display:none;
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:.7rem;z-index:3;
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(11,11,12,.45);opacity:0;animation:riseIn .9s var(--ease-out) 2.7s forwards;
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(rgba(11,11,12,.45),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--black);animation:scrollPulse 2.1s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* buttons sitting on the white hero */
.hero .btn--ghost{--fg:var(--black);--bd:rgba(11,11,12,.26)}
.hero .btn--ghost::after{background:var(--black)}
.hero .btn--ghost:hover{color:var(--white)}


/* ---------- 9c. First-visit smoke intro (home page only) ------------------
   Every rule below is inert unless <html class="intro"> is present, which a
   short inline script in index.html adds on a first visit only. The finished
   hero stays the default, so a returning visitor, a crawler, or anyone with
   JavaScript off gets the normal page with no flash of black.

   Timeline
     0.15s  TAC wipes in white, over black (the site's existing wmGrad)
     0.45s  "Total Asset Consultancy" wipes in right to left
     1.10s  smoke blows in from the left and right edges
     2.15s  the central plumes swell and bury the mark
     3.30s  background washes black -> white, hidden under the smoke
     3.70s  mark and subtitle snap colour in 0.1s, fully covered
     4.10s  smoke starts to clear
     4.80s  a black mark emerges on white
     5.60s  headline rises word by word, then lede and buttons
     8.20s  .intro-done drops the smoke layer entirely
   -------------------------------------------------------------------------*/

.hero__smoke{display:none}

.intro .hero{background:var(--black);animation:heroWash 1.6s ease-in-out 3.30s forwards}
@keyframes heroWash{to{background:var(--white)}}

/* the light-background furniture has nothing to show against black */
.intro .hero__bg{opacity:0;animation:heroBgIn 1.6s ease-in-out 3.30s forwards}
@keyframes heroBgIn{to{opacity:1}}

.intro .wm__mark .mark path{fill:#fff;animation:markFlip .10s linear 3.70s forwards}
@keyframes markFlip{to{fill:#0B0B0C}}

/* both of the subtitle's animations have to live in one shorthand, or the
   second rule would replace the first rather than add to it */
.intro .wm__sub{
  color:rgba(255,255,255,.78);
  animation:wmGradR 1.0s cubic-bezier(.38,.12,.28,1) .45s forwards,
            subFlip .10s linear 3.70s forwards;
}
@keyframes subFlip{to{color:var(--t-light-mute)}}

.intro .wm__hair{background:rgba(255,255,255,.3);animation-delay:5.9s}

.intro .hero__lede{animation-delay:5.85s}
.intro .hero__btns{animation-delay:6.05s}

/* -- the smoke itself --
   It sits ABOVE the wordmark (z-index 5 against the content's 4) so it
   genuinely covers it. Earlier versions put it behind, where a white mark
   merely blended into white smoke and showed straight through the instant
   it turned black. */
.intro .hero__smoke{
  display:block;position:absolute;inset:-12%;z-index:5;
  filter:url(#tacSmoke);opacity:0;pointer-events:none;will-change:opacity;
  animation:smokeOn .9s ease-out 1.10s forwards,
            smokeOut 2.0s ease-in-out 4.10s forwards;
}
@keyframes smokeOn{to{opacity:1}}
@keyframes smokeOut{to{opacity:0}}

.pf{
  position:absolute;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 32%,
    rgba(255,255,255,.58) 56%, rgba(255,255,255,.17) 76%,
    rgba(255,255,255,0) 88%);
  filter:blur(22px);will-change:transform,opacity;
  animation-duration:7s;animation-timing-function:cubic-bezier(.42,.05,.35,1);
  animation-fill-mode:forwards;
}
/* Positions put each plume's CENTRE at roughly 5, 30, 55 and 80 percent of
   the hero height. These are square boxes, so the centre sits half the width
   below the top value: get that wrong and the mass gathers low and the whole
   thing reads as smoke rising off the floor rather than blowing in sideways. */
.pf--l1{left:-44%;top:-29%;width:68%;padding-bottom:68%;animation-name:driftL;animation-delay:1.10s}
.pf--l2{left:-48%;top: -7%;width:74%;padding-bottom:74%;animation-name:driftL;animation-delay:1.22s}
.pf--l3{left:-44%;top: 19%;width:72%;padding-bottom:72%;animation-name:driftL;animation-delay:1.34s}
.pf--l4{left:-50%;top: 46%;width:68%;padding-bottom:68%;animation-name:driftL;animation-delay:1.46s}
.pf--r1{right:-44%;top:-25%;width:66%;padding-bottom:66%;animation-name:driftR;animation-delay:1.16s}
.pf--r2{right:-48%;top: -5%;width:76%;padding-bottom:76%;animation-name:driftR;animation-delay:1.28s}
.pf--r3{right:-44%;top: 21%;width:74%;padding-bottom:74%;animation-name:driftR;animation-delay:1.40s}
.pf--r4{right:-50%;top: 47%;width:70%;padding-bottom:70%;animation-name:driftR;animation-delay:1.52s}
/* the trio that swell through the middle; shorter durations so their peak
   lands on the colour flip rather than after the smoke has begun to clear */
.pf--c1{left: 8%;top:  2%;width:84%;padding-bottom:84%;animation-name:swell;animation-delay:2.15s;animation-duration:3.4s}
.pf--c2{left: 0%;top: -6%;width:100%;padding-bottom:100%;animation-name:swell;animation-delay:2.30s;animation-duration:3.6s}
.pf--c3{left:18%;top: 10%;width:66%;padding-bottom:66%;animation-name:swell;animation-delay:2.45s;animation-duration:3.2s}

/* travel is almost entirely horizontal, and the plumes stretch wider than
   they grow tall, which is what sells "blown in from the side" */
@keyframes driftL{
  0%  {transform:translate3d(-36%,1%,0) scale(.52,.60) rotate(-4deg);opacity:0}
  16% {opacity:.9}
  46% {opacity:1}
  100%{transform:translate3d(92%,-2%,0) scale(2.35,1.65) rotate(5deg);opacity:1}
}
@keyframes driftR{
  0%  {transform:translate3d(36%,-1%,0) scale(.52,.60) rotate(4deg);opacity:0}
  16% {opacity:.9}
  46% {opacity:1}
  100%{transform:translate3d(-92%,2%,0) scale(2.35,1.65) rotate(-5deg);opacity:1}
}
@keyframes swell{
  0%  {transform:scale(.40,.48) translate3d(0,2%,0);opacity:0}
  20% {opacity:.95}
  40% {transform:scale(1.28,1.06) translate3d(0,0,0);opacity:1}
  66% {transform:scale(1.52,1.26) translate3d(0,-1%,0);opacity:1}
  100%{transform:scale(1.98,1.62) translate3d(0,-4%,0);opacity:.5}
}

/* Once the reveal is over the smoke is a large filtered surface that would
   otherwise keep compositing for nothing. Drop it. */
.intro-done .hero__smoke{display:none}

/* ---------- 9b. Page heroes (inner pages) — same white treatment ---------- */
.phero{
  position:relative;overflow:hidden;
  background:var(--white);color:var(--t-light);
  padding-block:calc(var(--nav-h) + clamp(4.5rem,9vw,7.5rem)) clamp(3.5rem,6vw,5.5rem);
}
.phero__in{position:relative;z-index:2}
.phero .hero__grid{opacity:.8}
.phero h1{margin-bottom:1.3rem;color:var(--black)}
.phero .lede{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--t-light-mute)}
/* deep gold — brand #CBA135 is too low-contrast on white */
.phero .eyebrow,
.phero h1 .gold{color:#8A6E1E}

/* photo behind a light hero: lifted, flattened, white scrim */
.phero .bgimg__i{
  opacity:calc(var(--op,.26) * .5);
  filter:grayscale(.74) contrast(1.02) brightness(1.08);
}
.phero .bgimg::after{
  background:
    linear-gradient(180deg,var(--white) 0%,rgba(255,255,255,.6) 26%,rgba(255,255,255,.6) 74%,var(--white) 100%),
    linear-gradient(90deg,var(--white) 4%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.28) 92%);
}

.phero .btn--ghost{--fg:var(--black);--bd:rgba(11,11,12,.26)}
.phero .btn--ghost::after{background:var(--black)}
.phero .btn--ghost:hover{color:var(--white)}

/* ---------- 10. Splice (signature transition) ---------- */
/*  Slabs part quickly on entry — never a long blank hold.  */
.splice{position:relative;isolation:isolate}
.splice__slabs{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}
.splice__slab{
  position:absolute;left:0;right:0;height:50.5%;background:var(--black);
  border-color:var(--gold-line);will-change:transform;backface-visibility:hidden;
}
.splice__slab--t{top:0;border-bottom:1px solid transparent;transform:translate3d(0,calc(var(--p,1) * -102%),0)}
.splice__slab--b{bottom:0;border-top:1px solid transparent;transform:translate3d(0,calc(var(--p,1) * 102%),0)}
.section--ink .splice__slab{background:var(--ink)}
.section--light .splice__slab{background:var(--paper)}
.section--paper .splice__slab{background:var(--paper-2)}
.splice__body{
  position:relative;z-index:1;
  transform:perspective(1500px) translate3d(0,0,calc((1 - var(--p,1)) * -260px));
  opacity:calc(.34 + var(--p,1) * .66);
  will-change:transform,opacity;
}
html.fx .splice__slabs{display:block}
html.fx .splice__slab--t{border-bottom-color:var(--gold-line)}
html.fx .splice__slab--b{border-top-color:var(--gold-line)}

/* ---------- 11. Scroll reveals ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-38px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv-r{opacity:0;transform:translateX(38px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.rv-3d{opacity:0;transform:perspective(1200px) rotateX(15deg) translateY(44px) scale(.96);
  transform-origin:50% 100%;transition:opacity 1s var(--ease-out),transform 1.05s var(--ease-out)}
.rv-3d.in{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)}
.rv-flip{opacity:0;transform:perspective(1300px) rotateY(-16deg) translateX(-30px);
  transform-origin:left center;transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.rv-flip.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}

/* ---------- 12. Depth cards ---------- */
.grid3d{perspective:1700px}
.grid3d > *{transform-style:preserve-3d}
html.fx .grid3d{transform:rotateX(var(--rx,0deg));transition:transform .1s linear}

.dcard{
  position:relative;
  background:linear-gradient(160deg,rgba(30,30,35,.92) 0%,rgba(17,17,20,.92) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--hair-dark);border-radius:3px;
  padding:clamp(1.6rem,2.4vw,2.3rem);overflow:hidden;transform-style:preserve-3d;
  transition:border-color .5s,box-shadow .5s var(--ease-out),transform .18s var(--ease-out);
}
.dcard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(203,161,53,.15),transparent 62%);
  opacity:0;transition:opacity .45s}
.dcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.dcard:hover{border-color:var(--gold-line);box-shadow:0 32px 64px -30px rgba(0,0,0,.9)}
.dcard:hover::before{opacity:1}
.dcard:hover::after{transform:scaleX(1)}
.dcard > *{transform:translateZ(30px)}
.dcard__n{font-family:var(--f-head);font-size:.7rem;font-weight:600;letter-spacing:.24em;
  color:var(--gold);display:block;margin-bottom:.9rem}
.dcard h3{margin-bottom:.7rem}
.dcard p{color:var(--t-dark-mute);font-size:.97rem}
.section--light .dcard{background:linear-gradient(160deg,rgba(255,255,255,.94) 0%,rgba(233,233,228,.94) 100%);
  border-color:var(--hair-light)}
.section--light .dcard p{color:var(--t-light-mute)}
.section--light .dcard:hover{box-shadow:0 32px 64px -34px rgba(11,11,12,.38)}

/* ---------- 13. Splice panels (accordion) ---------- */
.panels{border-top:1px solid var(--hair-dark);perspective:1600px}
.section--light .panels{border-top-color:var(--hair-light)}
.panel{border-bottom:1px solid var(--hair-dark);position:relative;transform-style:preserve-3d}
.section--light .panel{border-bottom-color:var(--hair-light)}
.panel__btn{width:100%;background:none;border:0;color:inherit;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.5vw,2.2rem);padding:clamp(1.3rem,2.3vw,1.9rem) 0;
  transition:transform .6s var(--ease-out),padding .4s,color .4s}
.panel__n{font-family:var(--f-head);font-size:.74rem;font-weight:600;letter-spacing:.2em;
  color:var(--gold);opacity:.75;min-width:2.4rem}
.panel__t{font-family:var(--f-head);font-weight:700;font-size:clamp(1.25rem,2.5vw,2rem);
  letter-spacing:-.02em;line-height:1.12;transition:color .4s,transform .6s var(--ease-out)}
.panel__ic{width:38px;height:38px;flex:none;position:relative;border-radius:50%;
  border:1px solid var(--hair-dark);transition:border-color .45s,background .45s,transform .55s var(--ease-out)}
.section--light .panel__ic{border-color:var(--hair-light)}
.panel__ic::before,.panel__ic::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .5s var(--ease-out),opacity .4s}
.panel__ic::before{width:13px;height:1.5px}
.panel__ic::after{width:1.5px;height:13px}
.panel__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .72s var(--ease-out)}
.panel__inner{overflow:hidden}
.panel__body{padding:0 0 clamp(1.4rem,2.6vw,2.2rem);max-width:78ch;
  opacity:0;transform:translateY(18px) rotateX(-6deg);transform-origin:top;
  transition:opacity .6s var(--ease-out) .1s,transform .7s var(--ease-out) .1s}
.panel__body p{color:var(--t-dark-mute)}
.section--light .panel__body p{color:var(--t-light-mute)}
.panel__sub{margin-top:1rem;padding-left:1.2rem;border-left:1px solid var(--gold-line)}
.panel__sub strong{color:var(--white);font-weight:600}
.section--light .panel__sub strong{color:var(--black)}
.panel__out{margin-top:1.1rem;font-size:.9rem;color:var(--gold);
  font-family:var(--f-head);font-weight:500;letter-spacing:.02em}
.panel.is-open .panel__wrap{grid-template-rows:1fr}
.panel.is-open .panel__body{opacity:1;transform:none}
.panel.is-open .panel__t{color:var(--gold)}
.panel.is-open .panel__ic{border-color:var(--gold-line);background:var(--gold-soft);transform:rotate(180deg)}
.panel.is-open .panel__ic::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.panel:hover .panel__t{transform:translateX(9px)}
.panel:hover .panel__ic{border-color:var(--gold-line)}

/* ---------- 14. Step track ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);perspective:1400px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* 2-up variant, for use inside a narrow (wrap--tight) column */
.steps--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.steps--2{grid-template-columns:1fr}}
.step{background:rgba(26,26,30,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--hair-dark);border-radius:3px;padding:clamp(1.4rem,2.1vw,1.9rem);
  position:relative;overflow:hidden;transition:transform .6s var(--ease-out),border-color .5s,background .5s}
.step:hover{transform:translateY(-9px) rotateX(5deg);border-color:var(--gold-line);background:var(--ink-3)}
.step__n{font-family:var(--f-head);font-size:clamp(2.2rem,3.6vw,3rem);font-weight:700;
  color:transparent;-webkit-text-stroke:1px var(--gold-line);line-height:1;margin-bottom:.8rem;display:block}
.step h3{font-size:1.04rem;margin-bottom:.5rem}
.step p{font-size:.92rem;color:var(--t-dark-mute)}
.section--light .step{background:rgba(255,255,255,.9);border-color:var(--hair-light)}
.section--light .step p{color:var(--t-light-mute)}

/* ---------- 15. Feature (large media block) ---------- */
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.feature--flip .feature__media{order:-1}
@media(max-width:900px){.feature--flip .feature__media{order:0}}
.feature__media{
  position:relative;aspect-ratio:16/11;border-radius:3px;overflow:hidden;
  border:1px solid var(--hair-dark);background:linear-gradient(150deg,var(--ink-2),var(--black));
  display:grid;place-items:center;transform-style:preserve-3d;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.feature__media img{width:100%;height:100%;object-fit:cover;
  scale:1.04;transition:scale 1.2s var(--ease-out);will-change:scale}
.feature__media:hover img{scale:1.1}
.feature__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(203,161,53,.1),transparent 45%),
             linear-gradient(0deg,rgba(11,11,12,.5),transparent 55%)}
.feature__cap{
  position:absolute;left:0;bottom:0;z-index:2;padding:1.2rem 1.4rem;
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.feature__cap::before{content:"";display:inline-block;width:20px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:.7rem}

.ticks{margin-top:1.6rem;display:grid;gap:.8rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.98rem;color:var(--t-dark-mute)}
.section--light .ticks li{color:var(--t-light-mute)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:1px solid var(--gold);transform:rotate(45deg)}

/* ---------- 16. Abstract animated viz (logistics) ---------- */
.absviz{
  position:relative;aspect-ratio:16/11;border-radius:3px;overflow:hidden;
  border:1px solid var(--hair-dark);background:radial-gradient(ellipse at 50% 50%,#17171B,#0B0B0C 72%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.absviz__grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(203,161,53,.17) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(203,161,53,.17) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 78%);
  animation:gridpan 22s linear infinite}
@keyframes gridpan{to{background-position:40px 40px,40px 40px}}
/* rotating spokes — the "one hub, many sites" read */
.absviz__spokes{position:absolute;inset:0;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(203,161,53,.22) 3deg,transparent 6deg,
             transparent 90deg,rgba(203,161,53,.22) 93deg,transparent 96deg,
             transparent 180deg,rgba(203,161,53,.22) 183deg,transparent 186deg,
             transparent 270deg,rgba(203,161,53,.22) 273deg,transparent 276deg);
  mask-image:radial-gradient(circle,transparent 12%,#000 20%,transparent 66%);
  -webkit-mask-image:radial-gradient(circle,transparent 12%,#000 20%,transparent 66%);
  animation:spin 38s linear infinite}
.absviz__ring{position:absolute;left:50%;top:50%;border:1px solid rgba(203,161,53,.65);border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;animation:pulse 5.5s ease-out infinite;
  width:24%;aspect-ratio:1}
.absviz__ring--2{animation-delay:1.8s}
.absviz__ring--3{animation-delay:3.6s}
@keyframes pulse{0%{opacity:.95;scale:.5}80%{opacity:0}100%{opacity:0;scale:3.2}}
.absviz__scan{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(203,161,53,.85),transparent);
  box-shadow:0 0 18px rgba(203,161,53,.5);
  animation:scan 6.5s ease-in-out infinite}
@keyframes scan{0%{top:-2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:102%;opacity:0}}
.absviz__node{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px rgba(203,161,53,.2),0 0 22px rgba(203,161,53,.85);
  animation:nodepulse 3.4s ease-in-out infinite}
.absviz__node--1{left:24%;top:32%;animation-delay:0s}
.absviz__node--2{left:70%;top:26%;animation-delay:.7s}
.absviz__node--3{left:62%;top:72%;animation-delay:1.4s}
.absviz__node--4{left:31%;top:68%;animation-delay:2.1s}
@keyframes nodepulse{0%,100%{opacity:.45;scale:.8}50%{opacity:1;scale:1.25}}
.absviz__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-head);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);text-align:center;line-height:2;padding:2rem 2.4rem;white-space:nowrap}
.absviz__core::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(203,161,53,.2),transparent 66%);z-index:-1}
.absviz__core b{display:block;font-size:1.55rem;letter-spacing:.04em;color:var(--white);font-weight:700;
  text-shadow:0 2px 24px rgba(0,0,0,.8)}

/* ==========================================================================
   16b. THE ROLL-UP — pinned scroll sequence
   A vertical list of five problems the business absorbs. On scroll the rows
   roll up into a single stack and resolve into the TAC mark.
   Scrubbed variables set in tac.js:
     --c   0-1  roll      (rows converge to centre and fan)
     --k   0-1  collapse  (stack shrinks away)
     --mk  0-1  mark      (TAC resolves)
     --h1/--h3  headline crossfades
   ========================================================================== */
.roll{position:relative;background:var(--black);color:var(--t-dark)}
.roll__runway{height:380vh}
.roll__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + clamp(1rem,3vh,2rem)) var(--gut) clamp(2rem,5vh,3.5rem);
}
.roll__bg{position:absolute;inset:0;pointer-events:none}
.roll__bg .hero__grid{opacity:.45}

/* headlines stacked in one cell */
.roll__heads{
  position:relative;z-index:6;flex:none;width:min(760px,94vw);
  text-align:center;pointer-events:none;display:grid;
  margin-bottom:clamp(1.4rem,3.5vh,2.6rem);
}
.roll__head{grid-area:1/1}
.roll__head--a{opacity:var(--h1,1)}
.roll__head--b{opacity:var(--h3,0)}
.roll__head h2{font-size:clamp(1.45rem,3.1vw,2.4rem);line-height:1.12}
.roll__head p{margin-top:.7rem;color:var(--t-dark-mute);font-size:clamp(.9rem,1.1vw,1.02rem)}

/* the list of problems */
.roll__list{
  position:relative;width:min(880px,94vw);
  --step:clamp(74px,10.5vh,108px);
  height:calc(var(--step) * 4);
  perspective:1400px;transform-style:preserve-3d;flex:none;
}
.roll__row{
  position:absolute;left:0;right:0;top:50%;
  display:grid;grid-template-columns:clamp(86px,12vw,146px) 1fr;
  gap:clamp(.9rem,2.2vw,1.9rem);align-items:center;
  padding:clamp(.75rem,1.5vh,1.1rem) clamp(1rem,2vw,1.5rem);
  background:linear-gradient(100deg,rgba(31,31,36,.97),rgba(15,15,18,.97));
  border:1px solid var(--hair-dark);border-left:2px solid var(--gold-line);
  border-radius:3px;box-shadow:0 22px 48px -26px rgba(0,0,0,.92);
  transform-origin:50% 50%;backface-visibility:hidden;
  will-change:transform,opacity;
  transform:
    translateY(-50%)
    translateY(calc(var(--r) * var(--step) * (1 - var(--c,0))))
    rotateX(calc(var(--c,0) * var(--r) * -13deg))
    translateZ(calc(var(--c,0) * var(--r) * -16px))
    scale(calc(1 - var(--k,0) * .46));
  opacity:calc(1 - var(--k,0) * 1.7);
}
.roll__k{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(.92rem,1.15vw,1.08rem);letter-spacing:-.01em;
  color:var(--white);
}
.roll__row p{
  margin:0;font-size:clamp(.8rem,.95vw,.92rem);line-height:1.6;
  color:rgba(255,255,255,.62);
}

/* the resolved mark, sitting behind the stack */
.roll__mark{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(370px,52vw);z-index:7;pointer-events:none;
  opacity:var(--mk,0);transform:scale(calc(.78 + var(--mk,0) * .22));
}
.roll__mark svg{width:100%;height:auto}
.roll__mark .mark path{fill:var(--white)}
.roll__mark::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:170%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(203,161,53,.24),transparent 62%);
  opacity:var(--mk,0);
}
.roll__caption{
  margin-top:clamp(1.2rem,3vh,2.2rem);flex:none;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);opacity:var(--h3,0);z-index:6;text-align:center;
}

/* beat indicator */
.roll__steps{
  position:absolute;right:clamp(.8rem,2.5vw,2.2rem);top:50%;transform:translateY(-50%);
  display:grid;gap:9px;z-index:6;list-style:none;margin:0;padding:0;
}
.roll__steps li{width:2px;height:40px;background:var(--hair-dark);position:relative;overflow:hidden}
.roll__steps li::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:top}
.roll__steps li:nth-child(1)::after{transform:scaleY(var(--b1,0))}
.roll__steps li:nth-child(2)::after{transform:scaleY(var(--b2,0))}
.roll__steps li:nth-child(3)::after{transform:scaleY(var(--b3,0))}

/* Mobile and reduced motion: plain vertical list, no pin, no 3D. */
@media(max-width:900px){
  .roll__runway{height:auto}
  .roll__stage{position:static;height:auto;display:block;padding:var(--sec-y) var(--gut)}
  .roll__heads{width:100%;text-align:left;display:block;margin-bottom:1.8rem}
  .roll__head--b{display:none}
  .roll__head--a{opacity:1}
  .roll__list{position:static;width:100%;height:auto;display:grid;gap:12px;perspective:none;transform-style:flat}
  .roll__row{position:static;transform:none!important;opacity:1!important}
  .roll__mark{position:static;translate:none;transform:none;opacity:1!important;width:min(260px,58vw);margin:2.2rem auto 0}
  .roll__caption{opacity:1!important;margin-top:1rem}
  .roll__steps{display:none}
}
@media(prefers-reduced-motion:reduce){
  .roll__runway{height:auto}
  .roll__stage{position:static;height:auto;display:block;padding-block:var(--sec-y)}
  .roll__list{position:static;height:auto;display:grid;gap:12px}
  .roll__row{position:static;transform:none!important;opacity:1!important}
}

/* ---------- 17. Split (two-up service teaser) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-dark);border:1px solid var(--hair-dark)}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split__cell{background:var(--black);padding:clamp(1.9rem,3.6vw,3.1rem);
  position:relative;overflow:hidden;transition:background .55s var(--ease-out)}
.split__cell::before{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--gold-soft);
  transition:height .6s var(--ease-out)}
.split__cell:hover{background:var(--ink)}
.split__cell:hover::before{height:100%}
.split__cell > *{position:relative;z-index:1}
.split__k{font-family:var(--f-head);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:1rem}
.split__cell h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.5rem}
.split__cell .sub{font-style:italic;color:var(--gold);margin-bottom:1rem;font-size:.98rem}
.split__cell p{color:var(--t-dark-mute)}
.split__cell .tlink{margin-top:1.4rem}

/* ---------- 18. Value rows ---------- */
.vrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.3rem,2.2vw,1.9rem) 0;border-bottom:1px solid var(--hair-dark);
  transition:padding-left .55s var(--ease-out),background .55s}
.section--light .vrow{border-bottom-color:var(--hair-light)}
.vrow:hover{padding-left:1.1rem}
.vrow:first-child{border-top:1px solid var(--hair-dark)}
.section--light .vrow:first-child{border-top-color:var(--hair-light)}
.vrow__k{font-family:var(--f-head);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);min-width:clamp(3rem,9vw,8rem);padding-top:.4rem}
.vrow h3{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:.4rem}
.vrow p{color:var(--t-dark-mute)}
.section--light .vrow p{color:var(--t-light-mute)}

/* ---------- 19. Keyword ticker ---------- */
.ticker{
  position:relative;overflow:hidden;padding:1.1rem 0;
  border-block:1px solid var(--hair-dark);background:var(--black);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__t{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
.ticker__t span{
  font-family:var(--f-head);font-size:clamp(.8rem,1.1vw,.95rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);
  padding:0 1.6rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1.6rem;
}
.ticker__t span::after{content:"";width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);flex:none;opacity:.85}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 20. Statement band ---------- */
.band{position:relative;overflow:hidden;background:var(--black);
  padding-block:clamp(4rem,7vw,7rem);text-align:center;isolation:isolate}
.band__q{font-family:var(--f-head);font-weight:700;font-size:clamp(1.7rem,4.2vw,3.1rem);
  letter-spacing:-.024em;line-height:1.14;max-width:20ch;margin-inline:auto}
.band__sub{margin-top:1.4rem;color:var(--t-dark-mute);max-width:56ch;margin-inline:auto}

/* ---------- 21. CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(4.5rem,8vw,7.5rem);
  background:linear-gradient(180deg,var(--black) 0%,var(--ink) 100%);border-top:1px solid var(--hair-dark);isolation:isolate}
.cta__glow{position:absolute;left:50%;bottom:-45%;width:min(1000px,120vw);aspect-ratio:1;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(203,161,53,.18),transparent 62%);
  pointer-events:none;animation:breathe 8s ease-in-out infinite alternate}
.cta__in{position:relative;z-index:2}
.cta h2{margin-bottom:1.1rem}
.cta .lede{margin-inline:auto}
.cta .btn-row{justify-content:center}
.cta__alt{margin-top:1.6rem;font-size:.94rem;color:var(--t-dark-mute)}
.cta__alt a{color:var(--gold);border-bottom:1px solid var(--gold-line);transition:border-color .3s}
.cta__alt a:hover{border-color:var(--gold)}

/* ---------- 22. Contact ---------- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:860px){.ccards{grid-template-columns:1fr}}
.ccard{background:rgba(19,19,22,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--hair-dark);border-radius:3px;padding:clamp(1.6rem,2.4vw,2.2rem);
  transform-style:preserve-3d;transition:transform .18s var(--ease-out),border-color .5s,box-shadow .5s}
.ccard:hover{border-color:var(--gold-line);box-shadow:0 28px 58px -30px rgba(0,0,0,.9)}
.ccard__k{font-family:var(--f-head);font-size:.7rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.85rem}
.ccard a,.ccard address{font-style:normal;font-size:1.02rem;color:var(--white);line-height:1.6;word-break:break-word}
.ccard a{border-bottom:1px solid var(--gold-line);transition:border-color .3s,color .3s}
.ccard a:hover{color:var(--gold);border-color:var(--gold)}
.ccard .muted{color:var(--t-dark-mute);font-size:.92rem}

.formwrap{border:1px solid var(--hair-dark);border-radius:3px;overflow:hidden;background:var(--ink)}
.formwrap iframe{width:100%;min-height:900px;border:0;display:block}
.formph{padding:clamp(2.2rem,5vw,4rem) clamp(1.5rem,4vw,3rem);text-align:center;
  border:1px dashed var(--gold-line);border-radius:3px;background:rgba(19,19,22,.8)}
.formph h3{margin-bottom:.8rem}
.formph p{color:var(--t-dark-mute);max-width:52ch;margin-inline:auto}
.formph code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  background:rgba(203,161,53,.1);color:var(--gold);padding:.2rem .5rem;border-radius:2px}
/* light-section variants */
.section--light .formwrap{background:#fff;border-color:var(--hair-light)}
.section--light .formph{background:rgba(255,255,255,.75);border-color:rgba(126,100,23,.4)}
.section--light .formph p{color:var(--t-light-mute)}
.section--light .formph code{background:rgba(126,100,23,.1);color:#7E6417}

/* ---------- 22b. Email block ---------- */
.mailbox{text-align:center;border:1px solid var(--hair-dark);border-radius:3px;
  background:rgba(19,19,22,.6);padding:clamp(2rem,4.5vw,3.4rem) clamp(1.4rem,4vw,3rem)}
.section--light .mailbox{background:#fff;border-color:var(--hair-light)}
.mailbox__k{display:block;font-family:var(--f-head);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.section--light .mailbox__k{color:#7E6417}
.mailbox__a{display:inline-block;font-family:var(--f-head);font-weight:600;line-height:1.15;
  font-size:clamp(1.05rem,3.2vw,1.95rem);letter-spacing:-.01em;word-break:break-word;
  border-bottom:1px solid transparent;transition:border-color .35s var(--ease-out)}
.mailbox__a:hover{border-bottom-color:currentColor}
.mailbox__note{max-width:44ch;margin:1.1rem auto 0;font-size:.95rem;color:var(--t-dark-mute)}
.section--light .mailbox__note{color:var(--t-light-mute)}
.mailbox .btn-row{justify-content:center}

/* ---------- 23. FAQ ---------- */
.faq{border-top:1px solid var(--hair-dark)}
.section--light .faq{border-top-color:var(--hair-light)}
.faq details{border-bottom:1px solid var(--hair-dark);padding:1.2rem 0}
.section--light .faq details{border-bottom-color:var(--hair-light)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;font-family:var(--f-head);font-weight:600;font-size:clamp(1rem,1.5vw,1.18rem);transition:color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-head);font-size:1.4rem;color:var(--gold);
  transition:transform .45s var(--ease-out);flex:none;line-height:1}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin-top:.9rem;color:var(--t-dark-mute);font-size:.99rem;max-width:76ch}
.section--light .faq details p{color:var(--t-light-mute)}

/* ---------- 23b. Legal pages (privacy, cookies) ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:2.6rem 0 .9rem}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:clamp(1.02rem,1.35vw,1.14rem);margin:1.7rem 0 .5rem}
.legal p{color:var(--t-light-mute)}
.legal ul{margin:0 0 1.1em;display:grid;gap:.55rem}
.legal ul li{position:relative;padding-left:1.5rem;color:var(--t-light-mute)}
.legal ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border:1px solid #7E6417;transform:rotate(45deg)}
.legal a{color:#7E6417;border-bottom:1px solid rgba(126,100,23,.45);transition:border-color .3s}
.legal a:hover{border-color:#7E6417}
.legal__meta{
  font-size:.88rem;color:var(--t-light-mute);
  padding:1rem 0 1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--hair-light);
}
.legal table{border-collapse:collapse;width:100%;margin:.6rem 0 1.4rem;font-size:.94rem}
.legal th,.legal td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--hair-light);
  vertical-align:top;color:var(--t-light-mute)}
.legal th{font-family:var(--f-head);font-weight:600;color:var(--t-light);white-space:nowrap}

/* ---------- 24. Footer ---------- */
.ftr{background:var(--black);border-top:1px solid var(--hair-dark);padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:2.6rem}
@media(max-width:820px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__top{grid-template-columns:1fr}}
.ftr__logo svg{width:110px;height:auto;margin-bottom:1.1rem}
.ftr__logo .mark path{fill:var(--white)}
.ftr__tag{font-family:var(--f-head);font-weight:600;letter-spacing:.03em;color:var(--gold);
  font-size:1rem;margin-bottom:.9rem}
.ftr p,.ftr address{color:var(--t-dark-mute);font-size:.93rem;font-style:normal;line-height:1.75}
.ftr h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white);
  margin-bottom:1.1rem;font-weight:600}
.ftr__links{display:grid;gap:.65rem}
.ftr__links a{color:var(--t-dark-mute);font-size:.94rem;transition:color .3s,padding-left .35s}
.ftr__links a:hover{color:var(--gold);padding-left:.35rem}
.ftr__bot{border-top:1px solid var(--hair-dark);padding-top:1.6rem;display:flex;flex-wrap:wrap;
  gap:1rem;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.44)}
.ftr__bot a{color:inherit;transition:color .3s}
.ftr__bot a:hover{color:var(--gold)}
.ftr__legal a{color:rgba(255,255,255,.66);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.ftr__legal a:hover{color:var(--gold);border-bottom-color:var(--gold-line)}


/* ---------- 25. Utility ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--gold);color:var(--black);
  padding:.9rem 1.4rem;font-family:var(--f-head);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.8rem}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:1.8rem}.mt-3{margin-top:clamp(2rem,3.4vw,3rem)}
.center{text-align:center}
.head-block{max-width:70ch;margin-bottom:clamp(2rem,3.6vw,3.2rem)}
.head-block.center{margin-inline:auto}
.head-block h2{margin-bottom:1rem}


/* adaptive muted text + gold link, so inline colours never fight a
   section that has been flipped from dark to light */
.dim{color:var(--t-dark-mute)}
.section--light .dim{color:var(--t-light-mute)}
.goldlink{color:var(--gold);border-bottom:1px solid var(--gold-line);transition:border-color .3s}
.goldlink:hover{border-color:var(--gold)}
.section--light .goldlink{color:#7E6417;border-bottom-color:rgba(126,100,23,.45)}
.section--light .goldlink:hover{border-bottom-color:#7E6417}

/* ---------- 26. Motion / device guards ---------- */
@media(max-width:900px){
  /* calm on mobile — no 3D, no splice, cheap fades only */
  .splice__slabs{display:none!important}
  .splice__body{transform:none!important;opacity:1!important}
  .rv-3d{transform:translateY(24px)}
  .rv-3d.in{transform:none}
  .rv-l,.rv-r,.rv-flip{transform:translateY(24px)}
  .rv-l.in,.rv-r.in,.rv-flip.in{transform:none}
  .dcard > *{transform:none}
  .dcard::before{display:none}
  .step:hover,.dcard:hover{transform:none}
  .grid3d{transform:none!important;perspective:none}
  .bgimg__i{animation:none;scale:1.02;opacity:.2}
  .hero__sweep,.hero__sweep2,.hero__beams,.hero__dots{display:none}
  /* keep the entrance swing, drop the perpetual float and the shadow */
  .wm__mark{animation:
    wmGrad 1.4s cubic-bezier(.38,.12,.28,1) .25s forwards,
    wmSpin 1.6s cubic-bezier(.19,.82,.25,1) .15s both}
  .wm__mark-inner{filter:none;transform:none!important}
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 4.5rem) 4.5rem}
  .hero__scroll{display:none}
  .spot{display:none}
  .feature__media,.absviz{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv,.rv-l,.rv-r,.rv-3d,.rv-flip{opacity:1!important;transform:none!important}
  .sw .w > i{transform:none!important}
  .wm__mark,.wm__sub{-webkit-mask-image:none!important;mask-image:none!important}
  .wm__mark{animation:none!important;transform:none!important}
  .wm__mark-inner{transform:none!important;filter:none}
  .wm__hair{width:min(560px,64vw)!important}
  .hero__tag,.hero__lede,.hero__btns,.hero__scroll{opacity:1!important;transform:none!important}
  .splice__slabs{display:none!important}
  .splice__body{transform:none!important;opacity:1!important}
  .ticker__t{animation:none}
  .spot{display:none}
  /* first-visit intro: skip it entirely and render the finished hero */
  .intro .hero{background:var(--white)!important;animation:none!important}
  .intro .hero__bg{opacity:1!important;animation:none!important}
  .intro .hero__smoke{display:none!important}
  .intro .wm__mark .mark path{fill:var(--black)!important;animation:none!important}
  .intro .wm__sub{color:var(--t-light-mute)!important}
  .intro .wm__hair{background:rgba(11,11,12,.3)!important}
}
@media print{
  .hdr,.hero__bg,.splice__slabs,.hero__scroll,.bgimg,.ticker,.prog,.spot{display:none!important}
  body{background:#fff;color:#000}
}