/* ==========================================================================
   Wylie & Washburn, LLC — Attorneys at Law
   Design system + components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand — sampled from the firm's mark and signage */
  --ink:            #141833;   /* wordmark navy */
  --ink-deep:       #0A0E1F;   /* section / scrim navy */
  --ink-soft:       #232848;
  --accent:         #2E97C7;   /* monogram blue */
  --accent-bright:  #4FB2DE;
  --accent-pale:    #D6ECF6;

  --paper:          #FBFAF8;   /* warm off-white */
  --sand:           #F1ECE5;   /* limestone / brick neutral */
  --sand-deep:      #E4DCD1;
  --white:          #FFFFFF;

  --text:           #1B1F33;
  --muted:          #5C6379;
  --muted-light:    #8A90A3;
  --line:           rgba(20,24,51,.13);
  --line-soft:      rgba(20,24,51,.07);
  --line-invert:    rgba(255,255,255,.18);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1320px;
  --maxw-narrow: 780px;
  --section-y: clamp(5rem, 11vw, 10.5rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur: .8s;

  --nav-h: 84px;
}

@media (max-width: 860px){ :root{ --nav-h: 68px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
::selection{ background:var(--accent); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--ink);
}
.d1{ font-size:clamp(2.9rem, 7.6vw, 7rem); }
.d2{ font-size:clamp(2.4rem, 5.6vw, 4.9rem); }
.d3{ font-size:clamp(1.9rem, 3.6vw, 3.1rem); line-height:1.06; }
.d4{ font-size:clamp(1.4rem, 2.1vw, 1.9rem); line-height:1.18; letter-spacing:-.01em; }

.serif-italic{ font-style:italic; font-weight:300; }

/* Small letterspaced caps — echoes the firm's signage */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1.6rem;
}
.eyebrow::before{
  content:"";
  width:clamp(24px,3vw,46px);
  height:1px;
  background:currentColor;
  opacity:.65;
  flex:none;
}
.eyebrow.is-plain::before{ display:none; }
.eyebrow.on-dark{ color:var(--accent-bright); }

.lede{
  font-size:clamp(1.075rem, 1.6vw, 1.32rem);
  line-height:1.62;
  color:var(--muted);
  font-weight:350;
}
.body-copy p + p{ margin-top:1.15em; }
.body-copy{ color:var(--muted); }
.on-dark .body-copy, .on-dark p{ color:rgba(255,255,255,.72); }

.num{
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.12em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap-narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--section-y); position:relative; }
.section-tight{ padding-block:clamp(3.5rem,7vw,6rem); }
/* Full-bleed video band: no frame around it, pulled up under the section above, and its
   foot dissolves into the tinted section that follows (gradient ends in the same --sand). */
.vband{ position:relative; margin-top:calc(clamp(5rem, 7vw, 6.5rem) - var(--section-y)); } /* breathing room below the attorneys */
.vband .media{
  border-radius:0; width:100%;
  /* explicit height, not an aspect ratio: a max-height on a ratio box transfers to its
     width and would leave the band short of the right edge on wide, shallow windows */
  aspect-ratio:auto; height:min(92vh, 56.25vw);
}
.vband__fade{
  position:absolute; left:0; right:0; bottom:-1px; height:42%; pointer-events:none;
  background:linear-gradient(180deg, rgba(241,236,229,0) 0%, rgba(241,236,229,.42) 58%, var(--sand) 100%);
}
@media (max-width: 700px){ .vband .media{ height:75vw; } }

.grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
.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; } }

.dark{ background:var(--ink-deep); color:#fff; }
.dark .display{ color:#fff; }
.tint{ background:var(--sand); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.dark .rule{ background:var(--line-invert); }

/* Diamond motif lifted from the monogram's negative space */
.diamond{
  width:9px; height:16px;
  background:var(--accent);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  flex:none;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--ink);
  --fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:1.05rem 2.1rem;
  background:var(--bg);
  color:var(--fg);
  font-size:.755rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .5s var(--ease-out);
  z-index:-1;
}
.btn:hover::after, .btn:focus-visible::after{ transform:translateY(0); }
.btn:hover{ box-shadow:0 14px 34px -14px rgba(46,151,199,.6); }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-accent{ --bg:var(--accent); }
.btn-accent::after{ background:var(--ink); }

.btn-ghost{
  --bg:transparent;
  --fg:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost::after{ background:var(--ink); }
.btn-ghost:hover{ color:#fff; border-color:var(--ink); box-shadow:none; }

.on-dark .btn-ghost, .dark .btn-ghost{
  --fg:#fff;
  border-color:var(--line-invert);
}
.on-dark .btn-ghost::after, .dark .btn-ghost::after{ background:#fff; }
.on-dark .btn-ghost:hover, .dark .btn-ghost:hover{ color:var(--ink); border-color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }

/* Understated text link with an animated rule */
.link-u{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.45rem;
  position:relative;
  color:var(--ink);
}
.dark .link-u, .on-dark .link-u{ color:#fff; }
.link-u::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.25;
}
.link-u::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.link-u:hover::after{ transform:scaleX(1); }
.link-u .arw{ transition:transform .45s var(--ease); }
.link-u:hover .arw{ transform:translateX(5px); }

/* --------------------------------------------------------------------------
   5. Motion primitives
   -------------------------------------------------------------------------- */

/* Masked line/word reveal, populated by JS. The mask needs room below the
   baseline, or descenders (g, p, y) are sliced off at tight line-heights;
   the negative margin gives that room back so spacing is unchanged. */
.split .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.split .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:calc(var(--i,0) * 85ms + var(--base, 0ms));
}
.split.in .line > span{ transform:translateY(0); }

/* Generic scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal].in{ opacity:1; transform:none; }

[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="scale"]{ transform:scale(.965); }

/* Image wipe-in: the picture uncovers itself from the bottom */
[data-reveal="clip"]{
  opacity:1;
  transform:none;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.25s var(--ease-out);
}
[data-reveal="clip"].in{ clip-path:inset(0 0 0 0); }

/* Media frames scale down to rest as they enter */
.media{
  position:relative;
  overflow:hidden;
  background:var(--sand-deep);
  border-radius:3px;
}
.media img, .media video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.media.zoom img, .media.zoom video{
  transform:scale(1.16);
  transition:transform 1.6s var(--ease-out);
}
.media.zoom.in img, .media.zoom.in video{ transform:scale(1); }

.ratio-4x5{ aspect-ratio:4/5; }
.ratio-3x4{ aspect-ratio:3/4; }
.ratio-1x1{ aspect-ratio:1/1; }
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-3x2{ aspect-ratio:3/2; }

/* Film grain — a light cinematic texture over dark media */
.grain::after{
  content:"";
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.16;
  pointer-events:none;
  mix-blend-mode:overlay;
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6%,3%); }
  40%{ transform:translate(4%,-5%); }
  60%{ transform:translate(-3%,6%); }
  80%{ transform:translate(5%,2%); }
}

/* --------------------------------------------------------------------------
   6. Page transition curtain + preloader
   -------------------------------------------------------------------------- */
.curtain{
  position:fixed; inset:0;
  z-index:900;
  background:var(--ink-deep);
  transform:translateY(100%);
  pointer-events:none;
}
.curtain.is-out{
  transform:translateY(0);
  transition:transform .62s var(--ease-in-out);
}
.curtain.is-in{
  transform:translateY(-100%);
  transition:transform .72s var(--ease-in-out);
}

.loader{
  position:fixed; inset:0;
  z-index:1000;
  background:var(--ink-deep);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader__inner{ display:grid; justify-items:center; gap:1.6rem; }
.loader__mark{
  width:66px; height:66px;
  opacity:0;
  animation:markIn 1s var(--ease-out) .1s forwards;
}
.loader__word{
  font-family:var(--font-display);
  color:#fff;
  font-size:1.05rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  text-indent:.42em;
  opacity:0;
  animation:markIn .9s var(--ease-out) .4s forwards;
}
.loader__bar{
  width:150px; height:1px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:barFill 1.35s var(--ease-out) .25s forwards;
}
@keyframes markIn{ to{ opacity:1; } }
@keyframes barFill{ to{ transform:scaleX(1); } }
.loader.is-done{ opacity:0; visibility:hidden; }

/* Failsafe: the intro must never depend on JavaScript to go away. If the script
   is blocked, stale in a cache, or fails to run, CSS alone clears it at 4.5s. */
.loader{ animation:loaderFailsafe .6s var(--ease) 4.5s forwards; }
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:transform .55s var(--ease), background-color .45s var(--ease),
             box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav__in{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border-radius:999px;
  transition:max-width .7s var(--ease-out), padding .7s var(--ease-out),
             background-color .5s var(--ease), box-shadow .6s var(--ease),
             backdrop-filter .5s var(--ease);
}

/* Once you leave the hero the bar condenses into a floating pill */
.nav.is-stuck .nav__in{
  max-width:calc(var(--maxw) - 2.5rem);
  padding:.42rem .48rem .42rem 1.25rem;
  /* Navy glass: the one white wordmark then works both over the hero and in the pill */
  background:rgba(10,14,31,.86);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 14px 38px -18px rgba(0,0,0,.65);
}
.nav.is-stuck{ padding-top:.55rem; }
.nav.is-stuck .nav__link, .nav.is-stuck .nav__phone{ color:#fff; }
.nav.is-stuck .burger i{ background:#fff; }
.nav.is-stuck .brand__logo{ height:34px; }
.nav.is-stuck .nav__cta .btn{ padding:.74rem 1.35rem; border-radius:999px; }
/* Inside the pill the CTA becomes solid, so it still reads as the primary action */
.nav.is-stuck .btn-ghost{ background:var(--accent); color:#fff; border-color:var(--accent); }
.nav.is-stuck .btn-ghost::after{ background:#fff; }
.nav.is-stuck .btn-ghost:hover{ color:var(--ink); border-color:#fff; }

@media (max-width: 620px){
  .nav.is-stuck .nav__in{ padding:.4rem .55rem .4rem .9rem; }
}
.nav.is-hidden{ transform:translateY(-102%); }

/* Brand lockup */
.brand{ display:flex; align-items:center; gap:.8rem; flex:none; }
.brand__logo{
  display:block; height:44px; width:auto;
  transition:transform .55s var(--ease-out);
}
.brand:hover .brand__logo{ transform:translateY(-2px); }
/* Two colourways of the wordmark: navy on light surfaces, white over the hero,
   the page headers and the footer. Only one is ever displayed. */
.foot .brand__logo{ height:46px; }
@media (max-width: 620px){ .brand__logo{ height:38px; } .nav.is-stuck .brand__logo{ height:30px; } }
@media (max-width: 420px){ .brand__logo{ height:32px; } }

/* Desktop links */
.nav__links{
  display:flex; align-items:center; gap:clamp(1rem,2.1vw,2.1rem);
}
.nav__link{
  position:relative;
  font-size:.72rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink);
  padding-block:.5rem;
  white-space:nowrap;
  transition:color .4s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:.15rem; height:1px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:left;
}
.nav__link[aria-current="page"]{ color:var(--accent); }

.nav__cta{ display:flex; align-items:center; gap:.9rem; flex:none; }
.nav__phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.76rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink);
  transition:color .4s var(--ease);
}
.nav__phone:hover{ color:var(--accent); }
.nav .btn{ padding:.82rem 1.5rem; font-size:.685rem; }

/* Over-hero (transparent) state */
.nav.is-over{ }
.nav.is-over:not(.is-stuck) .nav__link,
.nav.is-over:not(.is-stuck) .nav__phone{ color:#fff; }
.nav.is-over:not(.is-stuck) .burger i{ background:#fff; }
.nav.is-over:not(.is-stuck) .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.nav.is-over:not(.is-stuck) .btn-ghost::after{ background:#fff; }
.nav.is-over:not(.is-stuck) .btn-ghost:hover{ color:var(--ink); }

@media (max-width: 1080px){
  .nav__links{ display:none; }
  .nav__phone span{ display:none; }
}
@media (max-width: 620px){
  .nav__cta .btn{ display:none; }
}

/* Burger */
.burger{
  width:44px; height:44px;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  margin-right:-8px;
}
@media (max-width: 1080px){ .burger{ display:flex; } }
.burger i{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s var(--ease), background-color .4s var(--ease);
}
.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); }

/* Fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:490;
  background:var(--ink-deep);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-in-out);
  display:flex; flex-direction:column;
  padding-top:var(--nav-h);
  overflow-y:auto;
  visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__in{
  width:100%; max-width:var(--maxw);
  margin:auto; padding:clamp(2rem,6vw,4rem) var(--gutter);
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1.4fr 1fr;
}
@media (max-width: 820px){ .menu__in{ grid-template-columns:1fr; } }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,6.5vw,3.6rem);
  line-height:1.22;
  color:#fff;
  transform:translateY(105%);
  transition:transform .85s var(--ease-out), color .4s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.menu.is-open .menu__list a{ transform:translateY(0); }
.menu__list a:hover{ color:var(--accent-bright); }
.menu__aside{
  align-self:end;
  display:grid; gap:1.6rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease-out) .35s, transform .7s var(--ease-out) .35s;
}
.menu.is-open .menu__aside{ opacity:1; transform:none; }
.menu__office{ display:grid; gap:.3rem; }
.menu__office b{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-bright); font-weight:600;
}
.menu__office span{ color:rgba(255,255,255,.66); font-size:.92rem; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* The hero pins to the top; everything after it rides up over it as one
   rounded plane, so the footage stays put while the page moves. */
.hero{
  position:sticky;
  top:0;
  z-index:0;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
  isolation:isolate;
}

.after-hero{
  position:relative;
  z-index:2;
  background:var(--paper);
  box-shadow:0 -34px 70px -34px rgba(10,14,31,.55);
  /* `clip` keeps the first section's colour inside the radius WITHOUT creating a
     scroll container — `hidden` would do that and break every sticky column below. */
  overflow:clip;
}
@supports not (overflow: clip){
  /* Older engines: skip the clip rather than break sticky positioning. */
  .after-hero{ overflow:visible; border-radius:0; margin-top:0; }
}

/* Hero content recedes as the plane rises over it */
.hero__in{
  will-change:transform, opacity;
  transform:translate3d(0, calc(var(--hp, 0) * -9vh), 0);
  opacity:calc(1 - var(--hp, 0) * 1.45);
}
.scroll-cue{ opacity:calc(1 - var(--hp, 0) * 3); }
.hero__media{
  position:absolute; inset:0;
  z-index:-2;
  overflow:hidden;
  /* --hp is 0..1 scroll progress through the hero; --mx/--my are the pointer
     drift. Both are set by site.js. */
  transform:
    translate3d(var(--mx, 0px), var(--my, 0px), 0)
    scale(calc(1 + var(--hp, 0) * 0.14));
  will-change:transform;
}
.hero__media video, .hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.12);
  animation:kenburns 26s var(--ease-out) forwards;
}
@keyframes kenburns{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 85% at 78% 18%, rgba(46,151,199,.16) 0%, transparent 58%),
    linear-gradient(178deg,
      rgba(10,14,31,.80) 0%,
      rgba(10,14,31,.34) 32%,
      rgba(10,14,31,.52) 66%,
      rgba(10,14,31,.94) 100%);
}
.hero__in{
  position:relative;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 2rem) var(--gutter) clamp(2rem,4vw,3rem);
}
/* The message sits in the middle of the frame; the facts strip stays at the foot */
.hero__center{
  margin:auto 0;
  text-align:center;
  display:grid; justify-items:center;
  padding-block:2rem;
}
.hero__eyebrow{
  color:rgba(255,255,255,.82);
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap;
  margin-bottom:clamp(1.8rem,3.2vw,2.8rem);
}
.hero__eyebrow .diamond{ width:7px; height:12px; }
.hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-weight:300;
  /* two balanced, centred lines at every width */
  font-size:clamp(2.6rem, 7vw, 6.8rem);
  line-height:1.02;
  letter-spacing:-.022em;
  max-width:none;
}
.hero h1 br{ display:block; }
@media (max-width: 560px){ .hero h1 br{ display:none; } } /* let phones wrap naturally */
.hero h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--accent-bright);
}
.hero__actions{ margin-top:clamp(3rem,6vw,5.5rem); justify-content:center; }

/* The hero sits on video, so ghost buttons need the light treatment */
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.hero .btn-ghost::after{ background:#fff; }
.hero .btn-ghost:hover{ color:var(--ink); border-color:#fff; }

/* (The three-fact strip at the base of the hero was removed.) */

.scroll-cue{
  position:absolute;
  right:var(--gutter); bottom:clamp(2rem,4vw,3rem);
  display:flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  writing-mode:vertical-rl;
}
.scroll-cue i{
  display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0;
  background:var(--accent-bright);
  animation:cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  55%,100%{ transform:translateY(100%); }
}
@media (max-width: 1080px){ .scroll-cue{ display:none; } }

/* --------------------------------------------------------------------------
   9. Marquee
   -------------------------------------------------------------------------- */
.marquee{
  border-block:1px solid var(--line);
  background:var(--white);
  padding-block:1.15rem;
  overflow:hidden;
  display:flex;
  user-select:none;
}
.dark .marquee{ background:transparent; border-color:var(--line-invert); }
.marquee__track{
  display:flex; align-items:center; gap:2.6rem;
  flex:none;
  padding-right:2.6rem;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-100%); } }
.marquee__item{
  display:inline-flex; align-items:center; gap:2.6rem;
  font-family:var(--font-display);
  font-size:clamp(1rem,1.55vw,1.32rem);
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}
.dark .marquee__item{ color:rgba(255,255,255,.8); }

/* --------------------------------------------------------------------------
   10. Two-column intro with stacked media
   -------------------------------------------------------------------------- */
.split-cols{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
@media (max-width: 900px){ .split-cols{ grid-template-columns:1fr; } }

.sticky-col{ position:sticky; top:calc(var(--nav-h) + 3rem); }
@media (max-width: 900px){ .sticky-col{ position:static; } }

.media-stack{ position:relative; }
.media-stack__b{
  position:absolute;
  width:62%;
  right:-8%;
  bottom:-11%;
  box-shadow:0 34px 70px -34px rgba(10,14,31,.5);
  border:7px solid var(--paper);
}
@media (max-width: 560px){
  .media-stack__b{ width:70%; right:-3%; bottom:-7%; border-width:4px; }
}

/* Stat pill overlaid on media */
.stat-card{
  position:absolute;
  left:-8%;
  bottom:12%;
  background:var(--ink-deep);
  color:#fff;
  padding:1.5rem 1.7rem;
  display:grid; gap:.25rem;
  box-shadow:0 30px 60px -30px rgba(10,14,31,.65);
  max-width:220px;
}
.stat-card b{
  font-family:var(--font-display);
  font-size:2.4rem; font-weight:500; line-height:1;
}
/* Text-only variant: a short phrase instead of a numeral */
.stat-card--label b{ font-size:1.55rem; font-weight:400; line-height:1.15; letter-spacing:.01em; }
.stat-card span{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
/* On narrow screens the inset photo owns the bottom-right, so the stat card
   moves to the top-left of the main image instead of colliding with it. */
@media (max-width: 900px){
  .stat-card{ left:0; right:auto; top:0; bottom:auto; padding:1.1rem 1.3rem; }
  .stat-card b{ font-size:1.9rem; }
}

/* --------------------------------------------------------------------------
   11. Pillars / value cards
   -------------------------------------------------------------------------- */
.pillar{
  position:relative;
  padding:clamp(1.9rem,3vw,2.6rem);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease);
  display:grid;
  gap:.9rem;
  align-content:start;
}
.pillar::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform .65s var(--ease-out);
}
.pillar:hover{
  transform:translateY(-7px);
  box-shadow:0 32px 60px -34px rgba(20,24,51,.4);
  border-color:transparent;
}
.pillar:hover::before{ transform:scaleY(1); }
.pillar__ico{
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--accent);
  margin-bottom:.3rem;
}
.pillar__ico svg{ width:32px; height:32px; }
.pillar h3{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:500; color:var(--ink);
  line-height:1.2;
}
.pillar p{ color:var(--muted); font-size:.965rem; }
.pillar__n{
  position:absolute; top:1.4rem; right:1.6rem;
  font-family:var(--font-display);
  font-size:1rem; color:var(--accent); opacity:.45;
}

/* --------------------------------------------------------------------------
   11b. Big stat — the counted number that anchors "why clients choose us"
   -------------------------------------------------------------------------- */
.bigstat{
  display:grid; justify-items:center; gap:1.1rem;
  text-align:center;
  padding-block:clamp(.5rem,1.5vw,1.25rem) clamp(2.5rem,5vw,4rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.bigstat__n{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(5.5rem, 16vw, 15rem);
  line-height:.86; letter-spacing:-.035em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  /* rides in from below as the count runs, settling exactly when it lands */
  transform:translate3d(0, calc((1 - var(--k,0)) * .12em), 0);
  will-change:transform;
}
.bigstat__label{ margin-bottom:0; justify-content:center; }

/* --------------------------------------------------------------------------
   12. Full-bleed statement band
   -------------------------------------------------------------------------- */
.band{
  position:relative;
  min-height:clamp(30rem,62vh,44rem);
  display:grid; align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink-deep);
}
.band__media{ position:absolute; inset:0; z-index:-2; }
.band__media video, .band__media img{ width:100%; height:100%; object-fit:cover; }
.band__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(10,14,31,.92) 4%, rgba(10,14,31,.62) 48%, rgba(10,14,31,.38) 100%);
}
.band__in{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:clamp(4rem,8vw,7rem) var(--gutter);
}
.band h2{
  color:#fff;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.3rem,6.2vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:17ch;
}
.band h2 strong{ font-weight:500; color:var(--accent-bright); font-style:italic; }
.band p{
  margin-top:1.6rem; max-width:46ch;
  color:rgba(255,255,255,.74);
  font-size:clamp(1rem,1.3vw,1.14rem);
}

/* --------------------------------------------------------------------------
   12b. Stage — a media column standing in front of an oversized headline.
        The panel sits above the type in z-order, so the middle of each line
        passes behind it and the composition reads with real depth.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   12b. Nationwide — night map of the US; home marker on South Carolina and a
        ripple of "closing" pings across the country. The map keeps its own
        aspect ratio so percentage-placed pings stay on their cities.
   -------------------------------------------------------------------------- */
.nation{
  position:relative;
  background:#050814;
  color:#fff;
  overflow:clip;
  isolation:isolate;
  display:grid;
}
.nation__map{
  position:relative;
  grid-area:1/1;
  width:100%;
  aspect-ratio:1500/844;   /* exactly the image's frame, so pins never drift */
  overflow:hidden;
}
.nation__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:62% 50%;
  transform:scale(1.08);
  transition:transform 3.5s var(--ease-out);
  filter:saturate(1.05);
}
.nation.in .nation__img{ transform:scale(1); }

/* Pings are placed against the map's natural frame */
.nation__pings{ position:absolute; inset:0; pointer-events:none; }
.ping{
  position:absolute; left:var(--x); top:var(--y);
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 12px rgba(79,178,222,.9);
  opacity:0;
  animation:pingDot 7.2s var(--ease) infinite;
  animation-delay:var(--d,0s);
}
.ping::before, .ping::after{
  content:""; position:absolute; inset:-3px;
  border-radius:50%;
  border:1px solid rgba(79,178,222,.85);
  animation:pingRing 7.2s var(--ease-out) infinite;
  animation-delay:var(--d,0s);
}
.ping::after{ animation-delay:calc(var(--d,0s) + .55s); }
@keyframes pingDot{
  0%, 6%{ opacity:0; transform:scale(.4); }
  10%{ opacity:1; transform:scale(1); }
  40%{ opacity:1; }
  55%, 100%{ opacity:0; transform:scale(.6); }
}
@keyframes pingRing{
  0%, 8%{ transform:scale(.6); opacity:0; }
  12%{ opacity:.9; }
  45%, 100%{ transform:scale(5.5); opacity:0; }
}
/* Home marker: always lit, steady breathing rings */
.ping--home{
  width:14px; height:14px; margin:-7px 0 0 -7px;
  background:#fff;
  box-shadow:0 0 18px rgba(79,178,222,1), 0 0 40px rgba(46,151,199,.7);
  animation:none; opacity:1;
}
.ping--home::before, .ping--home::after{
  border-color:rgba(255,255,255,.75);
  animation:homeRing 2.8s var(--ease-out) infinite;
}
.ping--home::after{ animation-delay:1.4s; }
@keyframes homeRing{
  0%{ transform:scale(.6); opacity:.9; }
  100%{ transform:scale(4.2); opacity:0; }
}

/* Text sits over the dark left third of the frame */
.nation__scrim{
  position:absolute; inset:0; grid-area:1/1; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,8,20,.92) 0%, rgba(5,8,20,.78) 32%, rgba(5,8,20,.25) 58%, rgba(5,8,20,0) 78%),
    linear-gradient(180deg, rgba(5,8,20,.35) 0%, transparent 25%, transparent 78%, rgba(5,8,20,.55) 100%);
}
.nation__in{
  position:relative; z-index:2;
  grid-area:1/1;
  align-self:center;
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding:clamp(3rem,6vw,5rem) var(--gutter);
  display:grid; gap:1.4rem; justify-items:start;
  max-width:min(var(--maxw), 100%);
}
.nation__in > *{ max-width:34rem; }
.nation__title{
  font-family:var(--font-display); font-weight:300;
  max-width:46rem; /* wider than the column cap so "We can close anywhere" holds one line */
  font-size:clamp(2.6rem, 5.6vw, 5.4rem); line-height:.98; letter-spacing:-.025em;
  color:#fff;
}
.nation__title em{ font-style:italic; color:var(--accent-bright); }
.nation__copy{ color:rgba(255,255,255,.76); font-size:clamp(.98rem,1.2vw,1.08rem); }
.nation__stat{ display:flex; align-items:baseline; gap:.6rem; margin-top:.2rem; }
.nation__n{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(3.4rem, 6vw, 5.6rem); line-height:.9; letter-spacing:-.03em;
  color:#fff; font-variant-numeric:tabular-nums lining-nums;
}
.nation__nl{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-bright); font-weight:600; }
.nation .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.nation .btn-ghost::after{ background:#fff; }
.nation .btn-ghost:hover{ color:var(--ink); }

/* Closing partners beneath the buttons: quiet, evenly weighted, white on navy */
.nation__partners{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.1rem 1.8rem;
  margin-top:clamp(1.2rem,2vw,1.8rem);
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.nation__plabel{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.55);
  flex-basis:100%;
}
.nation__partners img{
  height:32px; width:auto;
  opacity:.92;
  transition:opacity .35s var(--ease);
}
.nation__partners img:hover{ opacity:1; }
@media (min-width: 560px){ .nation__plabel{ flex-basis:auto; margin-right:.4rem; } }

@media (max-width: 900px){
  /* Stack: text first, the map beneath with its pings intact */
  .nation{ display:flex; flex-direction:column; }
  .nation__scrim{ display:none; }
  .nation__in{ position:static; order:-1; padding-bottom:1rem; }
  .nation__in > *{ max-width:none; }
  .nation__map{ min-height:0; max-height:none; }
  .nation__img{ object-position:center; }
}

/* --------------------------------------------------------------------------
   13. Practice area grid
   -------------------------------------------------------------------------- */
.pa-list{ border-top:1px solid var(--line); }
.pa{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.35rem) 0;
  border-bottom:1px solid var(--line);
  isolation:isolate;
  transition:padding-inline .6s var(--ease-out);
}
.pa::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink-deep);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .6s var(--ease-out);
}
.pa:hover{ padding-inline:clamp(1rem,2.4vw,2rem); }
.pa:hover::after{ transform:scaleY(1); transform-origin:top; }
.pa__n{
  font-family:var(--font-display); color:var(--accent); font-size:.95rem;
  align-self:start; padding-top:.72rem; /* sit on the title's x-height */
}
.pa__t{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.1vw,2.5rem);
  font-weight:400; color:var(--ink);
  line-height:1.14;
  transition:color .5s var(--ease);
}
.pa__d{
  display:block;
  font-family:var(--font-sans);
  font-size:.9rem; color:var(--muted);
  margin-top:.4rem; max-width:62ch;
  transition:color .5s var(--ease);
}
.pa__go{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--ink);
  flex:none;
  transition:background-color .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease-out);
}
.pa:hover .pa__t{ color:#fff; }
.pa:hover .pa__d{ color:rgba(255,255,255,.62); }
.pa:hover .pa__go{
  background:var(--accent); border-color:var(--accent); color:#fff;
  transform:rotate(-45deg);
}
/* floating image that follows the cursor on hover (desktop) */
.pa__peek{
  position:absolute;
  right:14%; top:50%;
  width:230px; aspect-ratio:4/3;
  transform:translate(0,-50%) scale(.86) rotate(-3deg);
  opacity:0; visibility:hidden;
  z-index:-1;
  overflow:hidden;
  transition:opacity .5s var(--ease), transform .6s var(--ease-out), visibility .5s;
  pointer-events:none;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.pa__peek img{ width:100%; height:100%; object-fit:cover; }
@media (hover:hover) and (min-width: 1100px){
  .pa:hover .pa__peek{ opacity:1; visibility:visible; transform:translate(0,-50%) scale(1) rotate(-3deg); }
}

/* --------------------------------------------------------------------------
   14. Process — sticky scrollytelling
   -------------------------------------------------------------------------- */
.process{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,6vw,6rem); }
@media (max-width: 900px){ .process{ grid-template-columns:1fr; } }

.process__visual{
  position:sticky;
  top:calc(var(--nav-h) + 2.5rem);
  align-self:start;
}
@media (max-width: 900px){ .process__visual{ position:static; } }
.process__visual .media{ box-shadow:0 40px 80px -40px rgba(10,14,31,.55); }

.process__badge{
  position:absolute; left:0; bottom:0;
  background:var(--accent);
  color:#fff;
  padding:1rem 1.4rem;
  display:flex; align-items:baseline; gap:.55rem;
  font-family:var(--font-display);
}
.process__badge b{ font-size:2.1rem; font-weight:500; line-height:1; }
.process__badge span{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-family:var(--font-sans); }

.steps{ position:relative; padding-left:clamp(2rem,4vw,3.4rem); }
.steps::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px;
  background:var(--line);
}
.steps__fill{
  position:absolute; left:0; top:.6rem; width:1px;
  background:var(--accent);
  height:0;
  transition:height .35s linear;
}
.step{
  position:relative;
  padding-block:clamp(1.5rem,3vw,2.4rem);
  opacity:.36;
  transition:opacity .6s var(--ease);
}
.step.is-active{ opacity:1; }
.step::before{
  content:"";
  position:absolute;
  left:calc(clamp(2rem,4vw,3.4rem) * -1);
  top:calc(clamp(1.5rem,3vw,2.4rem) + .55rem);
  width:9px; height:9px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--sand-deep);
  transition:background-color .5s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.step.is-active::before{
  background:var(--accent);
  transform:scale(1.35);
  box-shadow:0 0 0 5px rgba(46,151,199,.16);
}
.step h3{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  font-weight:500; color:var(--ink); line-height:1.2;
  display:flex; align-items:baseline; gap:.9rem;
}
.step h3 i{
  font-style:normal;
  font-family:var(--font-sans);
  font-size:.66rem; font-weight:600; letter-spacing:.2em;
  color:var(--accent);
}
.step p{ margin-top:.55rem; color:var(--muted); font-size:.985rem; max-width:52ch; }
.dark .step h3{ color:#fff; }
.dark .step p{ color:rgba(255,255,255,.62); }
.dark .steps::before{ background:var(--line-invert); }
.dark .step::before{ background:rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   15. Team
   -------------------------------------------------------------------------- */
.person{
  display:grid; gap:1.1rem;
  cursor:pointer;
}
.person .media{ background:var(--sand); }
.person .media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,14,31,.62) 0%, rgba(10,14,31,.05) 45%, transparent 70%);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.person:hover .media::after{ opacity:1; }
.person .media img{
  transition:transform 1.1s var(--ease-out), filter .8s var(--ease);
  filter:saturate(.92);
}
.person:hover .media img{ transform:scale(1.05); filter:saturate(1); }
.person__view{
  position:absolute;
  left:1.3rem; bottom:1.3rem;
  color:#fff;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5rem;
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease-out);
}
.person:hover .person__view{ opacity:1; transform:none; }
.person__name{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2vw,1.65rem);
  font-weight:500; color:var(--ink); line-height:1.2;
}
.dark .person__name{ color:#fff; }
.person__role{
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-top:.4rem;
}

/* Bio drawer */
.bio{
  position:fixed; inset:0; z-index:600;
  visibility:hidden;
  pointer-events:none;
}
.bio.is-open{ visibility:visible; pointer-events:auto; }
.bio__bg{
  position:absolute; inset:0;
  background:rgba(10,14,31,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .55s var(--ease);
}
.bio.is-open .bio__bg{ opacity:1; }
.bio__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(680px, 100%);
  background:var(--paper);
  transform:translateX(100%);
  transition:transform .72s var(--ease-in-out);
  overflow-y:auto;
  display:grid;
  align-content:start;
}
.bio.is-open .bio__panel{ transform:none; }
.bio__close{
  position:sticky; top:0;
  justify-self:end;
  margin:1rem 1rem 0;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  z-index:2;
  transition:background-color .4s var(--ease), transform .4s var(--ease-out);
}
.bio__close:hover{ background:var(--accent); transform:rotate(90deg); }
/* Pull the image under the sticky close button (its 46px height + 1rem margin)
   so the photo starts flush with the top of the panel. */
.bio__media{ aspect-ratio:16/10; margin-top:calc(-46px - 1rem); }
.bio__media img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.bio__body{ padding:clamp(1.8rem,4vw,3rem); display:grid; gap:1rem; }
.bio__body h3{ font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:500; color:var(--ink); line-height:1.1; }
.bio__body .person__role{ margin-top:0; }
.bio__body p{ color:var(--muted); }

/* --------------------------------------------------------------------------
   16. Locations
   -------------------------------------------------------------------------- */
.office{
  position:relative;
  padding:clamp(1.8rem,3vw,2.4rem);
  border:1px solid var(--line);
  border-radius:3px;
  display:grid; gap:.75rem; align-content:start;
  background:var(--white);
  overflow:hidden;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.dark .office{ background:rgba(255,255,255,.035); border-color:var(--line-invert); }
.office:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(20,24,51,.42); }
.office__city{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:500; color:var(--ink); line-height:1;
}
.dark .office__city{ color:#fff; }
.office__meta{ display:grid; gap:.45rem; font-size:.93rem; color:var(--muted); }
.dark .office__meta{ color:rgba(255,255,255,.66); }
.office__meta a:hover{ color:var(--accent); }
.office__tag{
  position:absolute; top:1.4rem; right:1.5rem;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid currentColor;
  padding:.28rem .6rem; border-radius:2px;
}
.office__row{ display:flex; gap:.6rem; align-items:flex-start; }
.office__row svg{ width:15px; height:15px; flex:none; margin-top:.32rem; color:var(--accent); }

/* --------------------------------------------------------------------------
   17. Big CTA
   -------------------------------------------------------------------------- */
.cta{
  position:relative;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.cta__phone{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,7.5vw,6rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  margin-block:clamp(1.5rem,3vw,2.2rem);
  position:relative;
}
.cta__phone::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:1px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.cta__phone:hover::after{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.foot{
  background:var(--ink-deep); color:#fff;
  padding-top:clamp(3.5rem,7vw,6rem);
  border-top:1px solid rgba(255,255,255,.08); /* separates it from a dark CTA above */
}
.foot__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:clamp(1.8rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (max-width: 980px){ .foot__top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .foot__top{ grid-template-columns:1fr; } }
.foot h4, .foot .foot__h{
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-bright); font-weight:600; margin-bottom:1.15rem;
}
.foot li + li{ margin-top:.6rem; }
.foot a{ color:rgba(255,255,255,.68); font-size:.93rem; transition:color .35s var(--ease); }
.foot a:hover{ color:#fff; }
.foot__brand{ display:grid; gap:1.1rem; align-content:start; }
.foot__brand p{ color:rgba(255,255,255,.6); font-size:.93rem; max-width:34ch; }
.foot__bottom{
  border-top:1px solid var(--line-invert);
  padding-block:1.6rem clamp(1.6rem,3vw,2.2rem);
  display:flex; flex-wrap:wrap; gap:1rem 1.6rem;
  align-items:center; justify-content:space-between;
  font-size:.78rem; color:rgba(255,255,255,.45);
}
.social{ display:flex; gap:.6rem; }
.social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-invert);
  display:grid; place-items:center;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.social a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-3px); }
.social svg{ width:15px; height:15px; }

.disclaimer{
  font-size:.72rem; line-height:1.6;
  color:rgba(255,255,255,.36);
  max-width:92ch;
  padding-bottom:clamp(1.5rem,3vw,2rem);
}

/* --------------------------------------------------------------------------
   19. Page header (inner pages)
   -------------------------------------------------------------------------- */
.phead{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(4rem,9vw,8rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
  background:var(--ink-deep);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.phead__media{ position:absolute; inset:0; z-index:-2; }
.phead__media img, .phead__media video{ width:100%; height:100%; object-fit:cover; }
.phead__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,14,31,.86) 0%, rgba(10,14,31,.62) 55%, rgba(10,14,31,.9) 100%);
}
.phead h1{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.4rem,6.4vw,5.2rem);
  line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.phead p{ margin-top:1.3rem; max-width:52ch; color:rgba(255,255,255,.7); }

.crumb{
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:1.6rem;
}
.crumb a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   20. Prose / checklist / accordion
   -------------------------------------------------------------------------- */
.prose h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.4vw,2.7rem);
  font-weight:500; color:var(--ink); line-height:1.15;
  margin-top:2.6rem; margin-bottom:1rem;
}
.prose h3{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  font-weight:500; color:var(--ink);
  margin-top:2rem; margin-bottom:.7rem;
}
.prose p{ color:var(--muted); }
.prose p + p{ margin-top:1.1em; }
.prose > *:first-child{ margin-top:0; }

.ticks{ display:grid; gap:.85rem; margin-top:1.4rem; }
.ticks li{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  align-items:start;
  color:var(--muted);
}
.ticks li::before{
  content:"";
  width:8px; height:14px; margin-top:.36rem;
  background:var(--accent);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.dark .ticks li{ color:rgba(255,255,255,.7); }

/* `columns` is ignored on a grid container, so any list that opts into two
   columns has to drop back to block flow and space its items with margin. */
.cols-2,
.ticks.cols-2,
.acc__a ul.cols-2{
  display:block;
  columns:2;
  column-gap:clamp(1.5rem,4vw,3.5rem);
}
.cols-2 li{ break-inside:avoid; margin-bottom:.8rem; }
.acc__a ul.cols-2 li{ margin-bottom:.55rem; }
@media (max-width: 700px){
  .cols-2, .ticks.cols-2, .acc__a ul.cols-2{ columns:1; }
}

/* Accordion */
.acc{ border-top:1px solid var(--line); }
.acc__item{
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + 1.5rem); /* deep links land below the fixed bar */
}
.acc__q{
  width:100%;
  display:grid; grid-template-columns:1fr auto;
  gap:1.5rem; align-items:start;
  padding-block:clamp(1.15rem,2.2vw,1.6rem);
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-weight:500;
  color:var(--ink);
  line-height:1.35;
  transition:color .4s var(--ease);
}
.acc__q:hover{ color:var(--accent); }
.acc__ico{
  width:26px; height:26px; position:relative; flex:none; margin-top:.28rem;
}
.acc__ico::before, .acc__ico::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease-out), opacity .35s var(--ease);
}
.acc__ico::before{ width:13px; height:1.5px; }
.acc__ico::after{ width:1.5px; height:13px; }
.acc__item.is-open .acc__ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acc__a{
  overflow:hidden;
  height:0;
  transition:height .55s var(--ease-out);
}
.acc__a > div{
  padding-bottom:clamp(1.2rem,2.4vw,1.8rem);
  padding-right:clamp(0rem,6vw,3.5rem);
  color:var(--muted);
}
.acc__a p + p{ margin-top:.9em; }
.acc__a ul{ display:grid; gap:.55rem; margin-top:.9rem; }
.acc__a ul li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; }
.acc__a ul li::before{ content:""; width:5px; height:5px; margin-top:.62rem; border-radius:50%; background:var(--accent); }

/* Tabs */
.tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.tab{
  padding:.75rem 1.5rem;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--muted);
  transition:all .45s var(--ease);
}
.tab:hover{ color:var(--ink); border-color:var(--ink); }
.tab.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tabpanel[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */
.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.5rem; }
.field label{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.field input, .field select, .field textarea{
  width:100%;
  padding:.95rem 1.1rem;
  font:inherit; font-size:.97rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,151,199,.14);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width: 620px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.78rem; color:var(--muted-light); line-height:1.6; }

/* --------------------------------------------------------------------------
   22. Wire-fraud alert
   -------------------------------------------------------------------------- */
.alert{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  padding:clamp(1.3rem,2.6vw,1.9rem);
  background:rgba(46,151,199,.07);
  border:1px solid rgba(46,151,199,.28);
  border-radius:3px;
}
.alert svg{ width:26px; height:26px; color:var(--accent); margin-top:.15rem; }
.alert b{ display:block; color:var(--ink); font-size:.98rem; margin-bottom:.35rem; }
.alert p{ font-size:.9rem; color:var(--muted); }
.dark .alert{ background:rgba(46,151,199,.12); border-color:rgba(79,178,222,.32); }
.dark .alert b{ color:#fff; }
.dark .alert p{ color:rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   23. Custom cursor (fine pointers only)
   -------------------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0;
  width:34px; height:34px;
  border:1px solid rgba(20,24,51,.4);
  border-radius:50%;
  pointer-events:none;
  z-index:800;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-out), height .35s var(--ease-out),
             background-color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
  opacity:0;
  mix-blend-mode:difference;
  display:none;
}
@media (hover:hover) and (pointer:fine) and (min-width: 1100px){
  .cursor{ display:block; }
}
.cursor.is-on{ opacity:.55; }
.cursor.is-hot{
  width:62px; height:62px;
  background:var(--accent);
  border-color:transparent;
  opacity:.85;
}

/* ==========================================================================
   CINEMATIC SCENES
   Pinned, scroll-driven set pieces. Each exposes a 0..1 progress custom
   property (set by site.js) that the CSS below consumes. Below 820px and
   under prefers-reduced-motion every scene collapses to a static layout.
   ========================================================================== */

/* Two-tone headline: second clause recedes */
.tone{ color:var(--muted-light); }
.dark .tone, .on-dark .tone, .cloud .tone, .ctac .tone{ color:rgba(255,255,255,.42); }

/* Sections that rise over the previous one as a rounded plane */
.plane{
  position:relative; z-index:2;
  background:var(--paper);
  overflow:clip;
}
.plane--dark{ background:var(--ink-deep); }

/* Rise-in reveal for large cards */
[data-reveal="rise"]{ transform:translateY(70px) scale(.965); transition-duration:1.25s; }
[data-reveal="rise"].in{ transform:none; }

/* Pointer tilt — set by site.js */
[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ease-out);
  will-change:transform;
}
[data-tilt].is-tilting{ transition:transform .08s linear; }

/* --------------------------------------------------------------------------
   S1. 3D carousel with a marquee running behind the cards
   -------------------------------------------------------------------------- */
.carousel{
  position:relative;
  padding-block:var(--section-y) clamp(3rem,6vw,5rem);
  background:var(--paper);
  overflow:clip;
}
.carousel__head{
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
@media (max-width: 780px){ .carousel__head{ grid-template-columns:1fr; } }

.carousel__stage{
  position:relative;
  height:clamp(480px, 56vw, 600px);
  perspective:1400px;
}

/* Giant type behind the cards, two rows drifting opposite ways */
.carousel__marquee{
  position:absolute; inset:0; z-index:0;
  display:grid; align-content:center; gap:.1em;
  pointer-events:none;
  font-family:var(--font-display);
  font-size:clamp(4.5rem, 12.5vw, 12rem);
  line-height:.9; letter-spacing:-.02em;
  /* An ambient texture behind photo cards, not a competing headline */
  color:rgba(20,24,51,.16);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cmq{ display:flex; white-space:nowrap; width:max-content; }
.cmq span{ display:inline-block; padding-right:.3em; }
.cmq--a{ animation:cmqA 48s linear infinite; }
.cmq--b{ animation:cmqB 60s linear infinite; color:rgba(20,24,51,.10); }
@keyframes cmqA{ to{ transform:translateX(-50%); } }
@keyframes cmqB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* Deliberately NOT preserve-3d: in that mode the browser depth-sorts by 3D
   position and a rotated neighbour's inner edge pokes in front of the active
   card. Flat mode keeps perspective (from the stage) but honours z-index. */
.carousel__track{
  position:absolute; inset:0; z-index:1;
}
.ccard{
  position:absolute; left:50%; top:50%;
  width:clamp(220px, 23vw, 320px);
  aspect-ratio:3/4;
  margin:calc(clamp(220px,23vw,320px) * -.6667) 0 0 calc(clamp(220px,23vw,320px) * -.5);
  border-radius:16px;
  overflow:hidden;
  background:var(--ink-deep);
  box-shadow:0 30px 70px -32px rgba(10,14,31,.7), 0 2px 0 rgba(255,255,255,.08) inset;
  transform:translate3d(var(--tx,0px),0,0) rotateY(var(--ry,0deg)) scale(var(--s,1));
  opacity:var(--o,1);
  z-index:var(--z,1);
  transition:transform .95s var(--ease-out), opacity .6s var(--ease), box-shadow .6s var(--ease);
  will-change:transform;
}
.ccard.is-active{ box-shadow:0 50px 100px -36px rgba(10,14,31,.75), 0 0 0 1px rgba(255,255,255,.12) inset; }
.ccard__link{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.35rem;
  color:#fff;
}
.ccard__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.2s var(--ease-out);
  filter:saturate(.85);
}
.ccard.is-active:hover .ccard__img{ transform:scale(1.1); }
.ccard__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,31,.28) 0%, rgba(10,14,31,.05) 32%, rgba(10,14,31,.72) 72%, rgba(10,14,31,.94) 100%);
}
/* Tonal tints so the row reads like a set of distinct objects */
.ccard--navy  .ccard__scrim{ background:linear-gradient(180deg, rgba(20,24,51,.3), rgba(20,24,51,.1) 35%, rgba(20,24,51,.92)); }
.ccard--blue  .ccard__scrim{ background:linear-gradient(180deg, rgba(46,151,199,.25), rgba(20,24,51,.15) 35%, rgba(12,40,72,.94)); }
.ccard--green .ccard__scrim{ background:linear-gradient(180deg, rgba(20,60,50,.3), rgba(20,40,40,.15) 35%, rgba(8,30,28,.94)); }
.ccard--slate .ccard__scrim{ background:linear-gradient(180deg, rgba(60,70,90,.35), rgba(40,48,66,.15) 35%, rgba(24,28,42,.94)); }
.ccard--ink   .ccard__scrim{ background:linear-gradient(180deg, rgba(10,14,31,.35), rgba(10,14,31,.15) 35%, rgba(10,14,31,.96)); }
.ccard--warm  .ccard__scrim{ background:linear-gradient(180deg, rgba(70,50,40,.3), rgba(50,40,40,.15) 35%, rgba(30,22,26,.94)); }

.ccard__top, .ccard__body{ position:relative; display:block; }
.ccard__top{ display:flex; justify-content:space-between; align-items:center; }
.ccard__eyebrow{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  padding:.38rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.ccard__n{ font-family:var(--font-display); font-size:.95rem; color:rgba(255,255,255,.6); }
.ccard__title{
  display:block;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.4rem, 1.9vw, 1.9rem); line-height:1.1;
  margin-bottom:.5rem;
}
.ccard__text{ display:block; font-size:.86rem; color:rgba(255,255,255,.72); line-height:1.5; max-width:26ch; }
.ccard__more{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.9rem;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.ccard.is-active .ccard__more{ opacity:1; transform:none; }
.ccard:not(.is-active) .ccard__link{ cursor:pointer; }

.carousel__ctrl{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  z-index:3;
  display:flex; align-items:center; gap:1rem;
}
.cbtn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  display:grid; place-items:center;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.cbtn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.cdots{ display:flex; gap:.5rem; }
.cdots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:background-color .4s var(--ease), transform .4s var(--ease-out);
}
.cdots button[aria-current="true"]{ background:var(--accent); transform:scale(1.35); }

/* Small screens: an honest snap scroller, no perspective */
@media (max-width: 820px){
  .carousel__stage{ height:auto; perspective:none; }
  .carousel__marquee{ display:none; }
  .carousel__track{
    position:relative; inset:auto;
    display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 var(--gutter) 1.5rem; scrollbar-width:none;
  }
  .carousel__track::-webkit-scrollbar{ display:none; }
  .ccard{
    position:relative; left:auto; top:auto; margin:0;
    flex:0 0 min(78vw, 300px); scroll-snap-align:center;
    transform:none !important; opacity:1 !important;
  }
  .ccard__more{ opacity:1; transform:none; }
  .carousel__ctrl{ display:none; }
}

/* --------------------------------------------------------------------------
   S2. Pinned scene — split headline, growing diamond, office facts, wipe
   -------------------------------------------------------------------------- */
/* (The "Anywhere in the state/country" scene was removed; the nationwide
   night-map band in 12b now carries that message.) */

/* --------------------------------------------------------------------------
   S3. Horizontal scroll — team
   -------------------------------------------------------------------------- */
.hscroll-wrap{ position:relative; background:var(--paper); }
.hscroll{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  display:grid; align-content:center;
  /* Pin the column to the viewport: otherwise the max-content track below
     would size it thousands of px wide and drag the heading off-screen. */
  grid-template-columns:100%;
  gap:clamp(1.5rem,3vh,2.5rem);
}
.hscroll > *{ min-width:0; }
.hscroll__track{ justify-self:start; }
.hscroll__head{ position:relative; z-index:1; }
.hscroll__track{
  display:flex; align-items:stretch; gap:clamp(1.2rem,2vw,2rem);
  width:max-content;
  transform:translate3d(var(--x,0px),0,0);
  will-change:transform;
}
.hscroll__pad{ flex:0 0 calc(var(--gutter) + (100vw - var(--maxw)) / 2); min-width:var(--gutter); }
.hscroll__pad:last-child{ flex-basis:var(--gutter); } /* end on a gutter, not a second content inset */
.hcard{
  /* Sized by viewport height as much as width: on tall laptop screens the
     portraits grow to fill the pinned stage instead of floating in white. */
  flex:0 0 clamp(240px, min(26vw, 44vh), 400px);
}
.hcard .media{ box-shadow:0 30px 60px -34px rgba(10,14,31,.45); }
.hcard__n{ font-family:var(--font-display); color:var(--accent); font-size:.9rem; margin-bottom:.35rem; }
.hcard--end{
  display:grid; place-items:center;
  background:var(--ink-deep); color:#fff;
  border-radius:3px; aspect-ratio:4/5; align-self:start;
  padding:2rem; text-align:center;
  transition:background-color .5s var(--ease);
}
.hcard--end:hover{ background:var(--ink); }
.hcard__end-in{ display:grid; gap:1.4rem; justify-items:center; }
.hcard--end .display{ color:#fff; }
.hcard--end .link-u{ color:#fff; }
.hscroll__hint{
  position:absolute; right:var(--gutter); bottom:clamp(1.2rem,3vh,2rem);
  display:flex; align-items:center; gap:.6rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-light);
}
.hscroll__hint i{ display:block; width:44px; height:1px; background:var(--accent); animation:hintX 2s var(--ease-in-out) infinite; }
@keyframes hintX{ 0%{ transform:scaleX(0); transform-origin:left; } 50%{ transform:scaleX(1); transform-origin:left; } 51%{ transform-origin:right; } 100%{ transform:scaleX(0); transform-origin:right; } }

/* Static: a native snap scroller */
.hscroll-wrap.is-static .hscroll{ position:relative; height:auto; padding-block:var(--section-y); }
.hscroll-wrap.is-static .hscroll__track{
  width:auto; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; scrollbar-width:none; transform:none;
}
.hscroll-wrap.is-static .hscroll__track::-webkit-scrollbar{ display:none; }
.hscroll-wrap.is-static .hcard{ scroll-snap-align:start; flex-basis:min(74vw, 290px); }
.hscroll-wrap.is-static .hscroll__hint{ display:none; }

/* --------------------------------------------------------------------------
   S4. Depth cloud — title-insurance protections
   -------------------------------------------------------------------------- */
.cloud-wrap{ height:220vh; }
.cloud{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(46,151,199,.14), transparent 70%),
    var(--ink-deep);
  display:grid; place-items:center;
  isolation:isolate;
}
.cloud__field{ position:absolute; inset:0; z-index:0; }
.tile{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  /* depth: 1 = nearest. Near tiles are bigger, sharper and travel further */
  --near:var(--d);
  transform:
    translate3d(
      calc((var(--px,0) * var(--near)) * 26px),
      calc((var(--p,0) * -1 * (40 + var(--near) * 140)) * 1px + (var(--py,0) * var(--near)) * 18px),
      0)
    scale(calc(.72 + var(--near) * .45));
  filter:blur(calc((1 - var(--near)) * 2.6px));
  opacity:calc(.28 + var(--near) * .72);
  will-change:transform;
}
.tile span{
  display:inline-block;
  padding:.8rem 1.15rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.86rem; white-space:nowrap;
  color:rgba(255,255,255,.9);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.cloud__core{
  position:relative; z-index:5;
  max-width:44rem; padding-inline:var(--gutter);
  text-align:center;
  display:grid; gap:1.25rem; justify-items:center;
  transform:translate3d(0, calc((.5 - var(--p,0)) * 40px), 0);
}
.cloud__core .display{ color:#fff; }
.cloud__core p{ color:rgba(255,255,255,.7); max-width:50ch; }
.cloud__core .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.cloud__core .btn-ghost::after{ background:#fff; }
.cloud__core .btn-ghost:hover{ color:var(--ink); }

.cloud-wrap.is-static{ height:auto; }
.cloud-wrap.is-static .cloud{ position:relative; height:auto; padding:var(--section-y) 0; display:grid; gap:2.5rem; }
.cloud-wrap.is-static .cloud__field{
  position:relative; inset:auto; order:2;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  padding-inline:var(--gutter);
}
.cloud-wrap.is-static .tile{ position:static; transform:none; filter:none; opacity:1; }
.cloud-wrap.is-static .tile span{ white-space:normal; }
.cloud-wrap.is-static .cloud__core{ transform:none; }

/* --------------------------------------------------------------------------
   S5. CTA card
   -------------------------------------------------------------------------- */
/* Full-bleed, square-cornered closing band */
.ctac{ background:var(--paper); padding:0; }
.ctac__card{
  position:relative;
  padding:clamp(3.5rem,7vw,6rem) 0;
  background:
    radial-gradient(70% 90% at 85% 20%, rgba(46,151,199,.35), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 70%);
  color:#fff;
  overflow:hidden;
}
.ctac__grid{
  display:grid; grid-template-columns:1.3fr .7fr; align-items:center;
  gap:clamp(2rem,4vw,4rem);
}
@media (max-width: 900px){ .ctac__grid{ grid-template-columns:1fr; } .ctac__obj{ order:-1; } }
.ctac__in{ position:relative; z-index:1; }
.ctac__in .display{ color:#fff; }
.ctac__copy{ color:rgba(255,255,255,.7); max-width:52ch; }
.ctac .cta__phone{ margin-block:clamp(1.2rem,2.4vw,1.8rem); font-size:clamp(2.2rem,5.4vw,4.4rem); }
.ctac .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.ctac .btn-ghost::after{ background:#fff; }
.ctac .btn-ghost:hover{ color:var(--ink); }

.ctac__obj{ position:relative; display:grid; place-items:center; min-height:260px; }
.ctac__halo{
  position:absolute; width:min(70%, 360px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,178,222,.45), rgba(79,178,222,0) 70%);
  filter:blur(18px);
  animation:halo 6s var(--ease-in-out) infinite alternate;
}
@keyframes halo{ from{ transform:scale(.9); opacity:.7; } to{ transform:scale(1.1); opacity:1; } }
.ctac__mark{
  position:relative; z-index:1;
  width:min(58%, 300px); aspect-ratio:1/1;
  border-radius:18px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.ctac__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.ctac__glare{
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,25%), rgba(255,255,255,.34), rgba(255,255,255,0) 55%);
  mix-blend-mode:soft-light; pointer-events:none;
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:.6rem; }
.mt-2{ margin-top:1.2rem; }
.mt-3{ margin-top:2rem; }
.mt-4{ margin-top:3rem; }
.mb-3{ margin-bottom:2rem; }
.maxw-60{ max-width:60ch; }
.maxw-50{ max-width:50ch; }
.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;
}
.skip{
  position:absolute; top:-100px; left:1rem; z-index:1000;
  background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:2px;
  transition:top .3s var(--ease);
}
.skip:focus{ top:1rem; }

.section-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
  margin-bottom:clamp(2.2rem,5vw,4rem);
}
@media (max-width: 780px){
  .section-head{ grid-template-columns:1fr; align-items:start; }
}

/* --------------------------------------------------------------------------
   25. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .split .line > span{ transform:none !important; }
  .media.zoom img, .media.zoom video{ transform:none !important; }
  .hero__media video, .hero__media img{ transform:none !important; animation:none !important; }
  .hero__media, .hero__in{ transform:none !important; opacity:1 !important; }
  .scroll-cue{ opacity:1 !important; }
  /* Scenes fall back to their static layouts; nothing pins or drifts */
  .cmq, .ctac__halo, .hscroll__hint i{ animation:none !important; }
  [data-tilt]{ transform:none !important; }
  .ccard{ transition:none !important; }
  .hscroll-wrap, .cloud-wrap{ height:auto !important; }
  .marquee__track{ animation:none !important; }
  .grain::after{ animation:none !important; }
  .loader{ display:none !important; }
  .curtain{ display:none !important; }
  .cursor{ display:none !important; }
}