/* ============================================================
   HUSH SELL — Master stylesheet
   Restraint is the flex. Nothing here should shout.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Palette */
  --forest:        #153F2E;   /* the lighter panel tone */
  /* The ground. Overridden to #000000 by [data-palette="black"] in section 23b,
     which every page sets — so this value is the fallback, not what ships. */
  --forest-black:  #071410;
  --cream:         #F4F1E8;
  --cream-warm:    #EFEBDF;
  --cream-dim:     #E4DFD1;
  --gold:          #C2A159;
  --gold-soft:     #DFC48A;

  /* Semantic — the site is dark end to end */
  --bg:            var(--forest-black);
  --fg:            var(--cream);
  --fg-soft:       color-mix(in srgb, var(--cream) 82%, transparent);
  --fg-faint:      color-mix(in srgb, var(--cream) 64%, transparent);
  --rule:          color-mix(in srgb, var(--cream) 14%, transparent);
  --rule-strong:   color-mix(in srgb, var(--cream) 28%, transparent);
  --accent:        var(--gold);
  --accent-text:   var(--gold-soft);

  /* Type */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* The logotype face. Brand names only — HUSH SELL, THE HUSH SALE, THE HUSH
     NETWORK, THE NOT SO HUSH SALE — and never a sentence. A wordmark is a logo, not
     body text, so it is allowed its own face; the rule stays easy to hold because it
     is drawn on "is this a name?" and nothing else.
     Outfit is a geometric sans with near-circular letterforms: calmer and more even
     than Inter, which is what makes it read as considered rather than default.
     (Archivo Expanded was tried here first and rejected — it was too wide.) */
  --brand: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:    clamp(1.9rem, 10.2vw, 9.2rem);
  --t-display: clamp(2.1rem, 5.5vw, 4.5rem);
  --t-h2:      clamp(1.75rem, 3.8vw, 3rem);
  --t-h3:      clamp(1.22rem, 2vw, 1.7rem);
  --t-lead:    clamp(1.06rem, 1.55vw, 1.35rem);
  --t-body:    clamp(1rem, 1.12vw, 1.09rem);
  --t-small:   0.82rem;
  --t-micro:   0.68rem;

  /* Space */
  --gut: clamp(1.35rem, 5.2vw, 6.5rem);
  --sec-y: clamp(4.5rem, 11vh, 9.5rem);
  --maxw: 1560px;

  /* Motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.62,.03,.24,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--forest-black);
  color:var(--cream);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:350;
  line-height:1.62;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-ligatures:common-ligatures;
}

::selection{background:var(--gold);color:#000}

/* Focus — visible, never ugly */
:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:4px;
  border-radius:1px;
}

/* ---------- 3. Paper grain ---------- */
.grain{
  position:fixed;inset:-120%;
  pointer-events:none;z-index:9000;
  opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  will-change:transform;
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}    20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}  100%{transform:translate(0,0)}
}

/* ---------- 4. Custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9500;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
.cursor.is-ready{opacity:1}
.cursor__dot{
  position:absolute;inset:0;margin:auto;
  width:7px;height:7px;border-radius:50%;
  background:var(--cream);
  transition:width .45s var(--e-out),height .45s var(--e-out),opacity .3s ease,background .3s ease;
}
.cursor__key{
  position:absolute;inset:0;
  opacity:0;transform:scale(.5);
  transition:opacity .4s var(--e-out),transform .55s var(--e-out);
}
.cursor__key path,.cursor__key circle{stroke:var(--cream);fill:none;stroke-width:1.1}

.cursor.is-hover .cursor__dot{width:0;height:0;opacity:0}
.cursor.is-hover .cursor__key{opacity:1;transform:scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
/* When the custom cursor is live, the native one steps aside. */
html.cursor-on,html.cursor-on body,html.cursor-on a,html.cursor-on button,
html.cursor-on input,html.cursor-on textarea,html.cursor-on select,
html.cursor-on label,html.cursor-on .fork__side{cursor:none}

/* ---------- 5. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg)}   /* legacy aliases */
.sec--tight{padding-block:clamp(4rem,9vh,7rem)}

/* ---------- 6. Typography ---------- */
/* One family, one voice. Inter across the whole site; weight and tracking do
   all the differentiating that a second typeface used to do. Uniform by
   instruction — "not random text styles everywhere". */
h1,h2,h3{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-0.034em;
  line-height:1.0;
  text-wrap:balance;
}
.display{font-size:var(--t-display);letter-spacing:-.036em}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3);line-height:1.14}
.it{font-weight:500;color:var(--fg-faint)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--fg-soft);max-width:min(46ch,100%);font-weight:350}
.gold{color:var(--accent-text)}

.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-faint);
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{
  content:"";width:clamp(18px,3vw,42px);height:1px;
  background:var(--accent);flex:none;opacity:.8;
}

.num{font-family:var(--mono);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* The phone number, and only the phone number. Monospace gives every character
   the same advance, so the space in "(470) 470-9616" gets a full digit-width
   cell — and because the ')' glyph is narrow inside its own wide cell, the two
   together read as a gap someone accidentally typed twice. Pulling the word
   space in by a third of an em makes it a separator again. Scoped to .tel, not
   .num, because .num also wraps running text like "~30 days — or on your
   timeline", where tightening the spaces would look cramped. */
.tel{word-spacing:-.34em}

/* Placeholder convention — matches the brand doc's [bracket] notation. */
.ph{
  font-family:var(--mono);
  color:var(--accent-text);
  font-size:.92em;
  letter-spacing:-.01em;
  border-bottom:1px dotted color-mix(in srgb,var(--accent) 55%,transparent);
  padding-bottom:.06em;
}

/* ---------- 7. Wordmark ---------- */
.wordmark{
  font-family:var(--brand);
  text-transform:uppercase;
  display:inline-flex;align-items:baseline;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.wordmark .wm-h{font-weight:800;letter-spacing:-.032em}
.wordmark .wm-s{font-weight:800;letter-spacing:-.032em;margin-left:.28em}
.wordmark--sm{font-size:.96rem}
.wordmark--sm .wm-h{font-weight:800;letter-spacing:.04em}
.wordmark--sm .wm-s{font-weight:800;letter-spacing:.04em;margin-left:.32em}

/* ---------- 7b. Sub-brand lockup (HUSH NETWORK, etc.) ---------- */
.lockup{
  font-family:var(--brand);
  text-transform:uppercase;align-items:baseline;
  font-size:clamp(2.2rem,7.4vw,5.4rem);
  line-height:.94;letter-spacing:-.034em;
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:.24em;
}
.lockup .lk-the{
  font-weight:400;font-size:.42em;letter-spacing:.16em;
  align-self:center;color:var(--accent-text);
  margin-right:.1em;
}
.lockup .lk-a{font-weight:800}
.lockup .lk-b{font-weight:800}

/* ---------- 8. Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  padding-block:clamp(1rem,2.1vh,1.6rem);
  color:var(--cream);
  transition:color .5s var(--e-out),background .5s var(--e-out),backdrop-filter .5s;
  mix-blend-mode:normal;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--forest-black) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.nav__in{position:relative;display:grid;justify-items:center;gap:clamp(.4rem,1vh,.7rem)}
.nav__links{display:flex;align-items:center;justify-content:center;gap:clamp(1.1rem,2.4vw,2.4rem)}
.nav__link{
  font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  position:relative;padding-block:.35rem;color:inherit;opacity:.78;
  transition:opacity .35s ease;
}
.nav__link:hover,.nav__link:focus-visible{opacity:1}
.nav__link{transition:opacity .35s ease,letter-spacing .55s var(--e-out)}
.nav__link:hover{letter-spacing:.13em}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:.1rem;height:1px;width:100%;
  background:var(--gold-soft);transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--e-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--gold)}

.nav__burger{
  display:none;width:44px;height:44px;
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
}
.nav__burger span{
  position:absolute;left:6px;right:6px;height:1px;background:currentColor;
  transition:transform .5s var(--e-out),opacity .3s;
}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:20px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:7900;
  background:var(--forest-black);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gut);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--e-out);
  pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu a{
  font-family:var(--sans);font-size:clamp(1.5rem,6.4vw,2.6rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.015em;
  padding-block:.42em;border-bottom:1px solid color-mix(in srgb,var(--cream) 14%,transparent);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
body.menu-open .menu a{opacity:1;transform:none}
body.menu-open .menu a:nth-child(1){transition-delay:.16s}
body.menu-open .menu a:nth-child(2){transition-delay:.22s}
body.menu-open .menu a:nth-child(3){transition-delay:.28s}
body.menu-open .menu a:nth-child(4){transition-delay:.34s}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:block}
}

/* ---------- 9. Links & buttons ---------- */
.ul{
  position:relative;display:inline;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:.09em;
  transition:background-size .6s var(--e-out);
}
.ul:hover,.ul:focus-visible{background-size:100% 1px}
.ul--gold{background-image:linear-gradient(var(--accent-text),var(--accent-text));color:var(--accent-text)}

.btn{
  --btn-fg:var(--fg);
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;font-weight:450;
  color:var(--btn-fg);
  padding:1.05rem 1.9rem;
  border:1px solid color-mix(in srgb,var(--btn-fg) 30%,transparent);
  border-radius:100px;
  overflow:hidden;isolation:isolate;
  transition:color .55s var(--e-out),border-color .55s var(--e-out);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-fg);
  transform:translateY(101%);
  transition:transform .62s var(--e-out);
}
.btn:hover,.btn:focus-visible{border-color:var(--btn-fg);color:var(--bg)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn__i{width:16px;height:8px;flex:none;transition:transform .55s var(--e-out)}
.btn:hover .btn__i{transform:translateX(5px)}

/* ---------- 10. Reveal system ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);will-change:transform,opacity}
.js [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--e-out),transform 1.15s var(--e-out);
}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="rule"]{opacity:1;transform:none;transform-origin:left;scale:0 1}
.js [data-reveal="rule"].in{scale:1 1;transition:scale 1.4s var(--e-out)}

.js .line{display:block;overflow:hidden;padding-bottom:.06em}
.js .line > span{display:block;transform:translateY(105%);will-change:transform}
.js .in .line > span,
.js .line.in > span{transform:none;transition:transform 1.05s var(--e-out)}

.js [data-stagger] > *{opacity:0;transform:translateY(20px)}
.js [data-stagger].in > *{opacity:1;transform:none;transition:opacity .9s var(--e-out),transform 1s var(--e-out)}
.js [data-stagger].in > *:nth-child(1){transition-delay:.02s}
.js [data-stagger].in > *:nth-child(2){transition-delay:.10s}
.js [data-stagger].in > *:nth-child(3){transition-delay:.18s}
.js [data-stagger].in > *:nth-child(4){transition-delay:.26s}
.js [data-stagger].in > *:nth-child(5){transition-delay:.34s}
.js [data-stagger].in > *:nth-child(6){transition-delay:.42s}
.js [data-stagger].in > *:nth-child(7){transition-delay:.50s}
.js [data-stagger].in > *:nth-child(8){transition-delay:.58s}

/* ---------- 10b. Centred section heads ---------- */
.sec-head{
  max-width:min(44rem,100%);margin-inline:auto;text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;
  gap:clamp(1rem,2.2vh,1.6rem);
  margin-bottom:clamp(3rem,7vh,5.5rem);
}
.sec-head .eyebrow{justify-content:center}
.sec-head .lead{max-width:min(52ch,100%);margin-inline:auto}
.sec-head .statement,.sec-head .h2{max-width:min(20ch,100%)}
.sec-head .display{max-width:min(24ch,100%)}
.center{text-align:center}
.center .lead,.center .body-c,.center .aside-note{margin-inline:auto}
.aside-note--c{
  text-align:center;border-left:0;padding-left:0;padding-top:1.3rem;
  border-top:1px solid var(--rule);max-width:min(52ch,100%);margin-inline:auto;
}

/* ---------- 11. Hero ---------- */

.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--bg);
  overflow:hidden;
  padding-block:clamp(7rem,14vh,10rem) clamp(3rem,7vh,5rem);
  text-align:center;
}
.hero__field{position:absolute;inset:0;pointer-events:none;z-index:0}

/* the loud way — ghosted, never actually loud */
.noise-bit{
  position:absolute;
  font-family:var(--sans);
  font-size:clamp(.54rem,.78vw,.72rem);
  letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--cream) 13%,transparent);
  background:color-mix(in srgb,var(--cream) 3%,transparent);
  padding:.5rem .8rem;border-radius:3px;
  white-space:nowrap;
  opacity:0;
  will-change:transform,opacity;
}
.noise-bit--sign{
  border-radius:2px;padding:.75rem 1.05rem;
  border-color:color-mix(in srgb,var(--cream) 18%,transparent);
}
.noise-bit--bubble{border-radius:14px 14px 14px 3px}
.noise-bit--row{
  border-left:2px solid color-mix(in srgb,var(--cream) 20%,transparent);
  border-radius:0;font-family:var(--mono);letter-spacing:0;
}
.js .hero.is-resolving .noise-bit{
  animation:bitIn 1.05s var(--e-out) forwards, bitOut 1.5s var(--e-io) forwards;
}
@keyframes bitIn{
  from{opacity:0;transform:translate3d(var(--dx,0),var(--dy,0),0) scale(.94) rotate(var(--rot,0deg))}
  to{opacity:.92;transform:translate3d(0,0,0) scale(1) rotate(var(--rot,0deg))}
}
@keyframes bitOut{
  0%,52%{opacity:.92;transform:translate3d(0,0,0) scale(1) rotate(var(--rot,0deg));filter:blur(0)}
  100%{opacity:0;transform:translate3d(calc(var(--dx,0)*.42),calc(var(--dy,0)*.42 - 14px),0) scale(.985) rotate(var(--rot,0deg));filter:blur(3px)}
}

/* horizon line that settles */
.hero__horizon{
  position:absolute;left:-10%;right:-10%;bottom:-6%;height:34vh;
  background:radial-gradient(58% 100% at 50% 100%,
    color-mix(in srgb,var(--gold) 20%,transparent) 0%,
    color-mix(in srgb,var(--gold) 7%,transparent) 42%,
    transparent 72%);
  transform:scaleX(.4);transform-origin:center bottom;
  opacity:0;filter:blur(6px);
}
.js .hero.is-resolving .hero__horizon{transition:transform 2.4s 1.05s var(--e-out),opacity 2s 1.05s var(--e-out);transform:scaleX(1);opacity:1}
.hero__mark{
  font-size:var(--t-hero);
  max-width:100%;
  display:flex;align-items:baseline;justify-content:center;
  line-height:.86;
  margin-bottom:clamp(1.6rem,4vh,3rem);
}
.js .hero__mark .wm-h{opacity:0;font-variation-settings:"wght" 380;filter:blur(7px)}
.js .hero__mark .wm-s{opacity:0;font-variation-settings:"wght" 340;transform:translateY(.14em)}
.js .hero.is-resolving .hero__mark .wm-h{
  opacity:1;font-variation-settings:"wght" 800;filter:blur(0);
  transition:opacity 1.5s .95s var(--e-out),font-variation-settings 2.2s .95s var(--e-out),filter 1.6s .95s var(--e-out);
}
.js .hero.is-resolving .hero__mark .wm-s{
  opacity:1;font-variation-settings:"wght" 800;transform:none;
  transition:opacity 1.1s 1.45s var(--e-out),font-variation-settings 1.5s 1.45s var(--e-out),transform 1.3s 1.45s var(--e-out);
}
.hero__tag{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.1rem,2.5vw,2rem);
  line-height:1.22;letter-spacing:-.028em;
  max-width:min(42ch,100%);margin-inline:auto;text-wrap:balance;
}
.hero__tag .skip{color:var(--fg-faint)}
/* Gold marks the point, cream carries the mass. One gold thing per view. */
.gold{color:var(--accent-text)}
.home__brand .hero__tag .gold{transition:color .8s var(--e-out)}
@keyframes scrolldrip{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}
@media (max-width:720px){.hero__note{display:none}}

/* ---------- 12. Fork ---------- */
/* the home page needs no wordmark in the bar — it is six inches below it */
.nav--home .nav__brand{display:none}

/* Hovering the brand quiets the loud half of the line and warms the glow —
   the tagline acted out rather than just written. */
.home__brand .hero__tag .skip{transition:opacity .8s var(--e-out),color .8s var(--e-out)}
.home__brand:hover .hero__tag .skip{opacity:.34}
.home__brand .hero__mark{transition:transform .9s var(--e-out)}
.home__brand:hover .hero__mark{transform:translateY(-3px)}
.home:has(.home__brand:hover) .hero__horizon{opacity:1;transform:scaleX(1.08)}
.hero__horizon{transition:transform 1.4s var(--e-out),opacity 1.2s var(--e-out)}

/* ---------- 11b. Home: the brand sits above the split, one screen ---------- */
.home{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  justify-content:stretch;
  padding-block:clamp(6.5rem,13vh,9.5rem) 0;
  text-align:center;
}
.home__brand{position:relative;z-index:3;display:grid;justify-items:center}
.home .hero__mark{margin-bottom:clamp(.8rem,2vh,1.5rem)}
.home .split{min-height:0;height:100%}
.home .split__side{padding-block:clamp(2.5rem,6vh,4.5rem)}
/* the seam starts soft, so the brand above it stays unified */
.home .split__side:first-child::after{
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--cream) 11%,transparent) 26%,
    color-mix(in srgb,var(--gold-soft) 44%,transparent) 60%,
    color-mix(in srgb,var(--cream) 11%,transparent) 88%,
    transparent 100%);
}
@media (max-width:860px){
  .home{grid-template-rows:auto auto;padding-bottom:clamp(2rem,5vh,3rem)}
  .home .split__side{min-height:44svh}
}

/* the action word above each split title */
.split__do{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(.7rem,1vw,.82rem);
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
  color:var(--accent-text);
  display:flex;align-items:center;gap:.7rem;
  transition:transform .9s var(--e-out),color .6s var(--e-out);
}
.split__do::before,.split__do::after{
  content:"";width:clamp(14px,2.4vw,26px);height:1px;flex:none;
  background:currentColor;opacity:.55;
}
/* There is no button. BEGIN and JOIN are the control: a gold rule draws under the
   word on hover, the way a link underlines. The affordance never rested on the mark
   anyway — the whole half is the <a>, and the title lifts with it. The trailing
   0.26em of letter-spacing is subtracted on the right so the rule ends under the
   last letter instead of under the empty space after it. */
.split__do .do__w{position:relative;display:inline-block}
.split__do .do__w::after{
  content:"";position:absolute;left:0;right:.26em;bottom:-.62em;height:1px;
  background:var(--gold-soft);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--e-out);
}
.split__side:hover .split__do{transform:translateY(-4px);color:var(--gold-soft)}
.split__side:hover .split__do .do__w::after,
.split__side:focus-visible .split__do .do__w::after{transform:scaleX(1)}
.split__side:focus-visible .split__do{color:var(--gold-soft)}

/* ---------- 12a. The split — no hard divider, light does the work ---------- */
.split{
  position:relative;display:flex;min-height:100svh;overflow:hidden;
  background:var(--bg);
}
.split__side{
  position:relative;isolation:isolate;
  flex:1 1 50%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4rem,10vh,7rem) clamp(1.6rem,4vw,4rem);
  text-align:center;
  transition:flex 1.15s var(--e-out),opacity .85s var(--e-out);
}
/* the seam: a hairline that dissolves at both ends, gold only in the middle */
.split__side:first-child::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--cream) 13%,transparent) 24%,
    color-mix(in srgb,var(--gold-soft) 42%,transparent) 50%,
    color-mix(in srgb,var(--cream) 13%,transparent) 76%,
    transparent 100%);
  opacity:.7;transition:opacity .9s var(--e-out);
  pointer-events:none;z-index:2;
}
.split:hover .split__side:first-child::after{opacity:1}

/* a soft light that follows the cursor across the half you're on */
.split__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .8s var(--e-out);
  background:
    radial-gradient(38% 46% at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--cream) 7%,transparent) 0%, transparent 70%),
    radial-gradient(120% 62% at 50% 116%,
      color-mix(in srgb,var(--gold) 16%,transparent) 0%, transparent 68%);
}
.split__side:hover .split__glow{opacity:1}

/* the half you aren't on steps back */
.split:hover .split__side{opacity:.4}
.split:hover .split__side:hover{opacity:1}
@media (min-width:861px){
  .split:hover .split__side{flex:1 1 46%}
  .split .split__side:hover{flex:1 1 54%}
}

.split__in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(.75rem,1.8vh,1.15rem);width:100%;max-width:min(560px,100%)}
.split__t{
  font-family:var(--brand);
  font-size:clamp(1.5rem,3.1vw,2.7rem);line-height:1.02;letter-spacing:-.03em;
  text-transform:uppercase;text-wrap:balance;
  transition:transform .9s var(--e-out);
}
.split__side:hover .split__t{transform:translateY(-4px)}
.split__d{color:var(--fg-soft);font-size:var(--t-body);max-width:min(36ch,100%);text-wrap:balance}
/* (The threshold control was removed — the action word carries it now. Both were
   pure hairline, so nothing about the system changed, only where it lives.) */

@media (max-width:860px){
  .split{flex-direction:column;min-height:0}
  .split__side{min-height:62svh;flex:none}
  .split__side:first-child::after{
    top:auto;bottom:0;left:0;right:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,
      color-mix(in srgb,var(--gold-soft) 38%,transparent) 50%,transparent);
  }
  .split:hover .split__side{opacity:1}
}
@media (min-width:861px){
  .fork--split{display:flex}
  .fork--split .fork__side{flex:1 1 50%;transition:flex .95s var(--e-out),background .8s var(--e-out)}
  .fork--split:hover .fork__side{flex:1 1 45%}
  .fork--split .fork__side:hover{flex:1 1 55%}
}
@media (max-width:860px){.fork--split .fork__side{min-height:64svh}}
@media (max-width:860px){
  .split--paths .split__side{min-height:0;padding-block:clamp(3rem,7vh,4.5rem)}
}

/* ---------- 12c. Solo screen — a whole page that is one composition ----------
   The Hush Network has one idea and one action. Splitting that across a hero
   section and a separate CTA section left a reserved-height hole between them.
   Here the heading, the paragraph and the tiles are one vertically-centred
   group, so the spacing is a deliberate interval instead of leftover room. */
.sec--solo{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(7rem,14vh,10rem);
}
.sec--solo .dial{margin-top:clamp(2.4rem,6vh,4rem)}
@media (max-width:860px){
  .sec--solo{min-height:0;padding-block:clamp(6rem,16vh,8rem)}
  .sec--solo .dial{margin-top:clamp(2.6rem,7vh,4rem)}
}

/* ---------- 12d. Spec list — the offer, stated as rows ----------
   Was one half of a two-up comparison. Promoted to a single centred list so the
   Hush Sale reads as the offer, not as one of two equally-weighted options. */
.offer{
  width:100%;max-width:min(33rem,100%);
  margin:clamp(1.8rem,4.5vh,2.8rem) auto 0;
}
.offer li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-block:clamp(.7rem,1.5vh,.95rem);
  border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--fg-faint);text-align:left;
}
.offer li:last-child{border-bottom:1px solid var(--rule)}
/* both cells must be allowed to shrink and wrap; a `flex:none` value cell is
   what pushed a long row past the list at narrow widths */
.offer li span,.offer li b{min-width:0;overflow-wrap:anywhere}
.offer li b{font-weight:500;color:var(--fg);text-align:right}
.offer li b .ph{font-size:1em}
/* The line the table can't hold — what actually leaves the price at closing.
   It was set at micro size and read as small print, which is the wrong signal for
   the single most important sentence about a seller's money. Now at body size, in
   the page's own voice, centred to match the lead above it. */
.offer__note{
  max-width:min(46ch,100%);margin:clamp(1.3rem,3vh,1.9rem) auto 0;
  font-size:var(--t-small);line-height:1.68;color:var(--fg-soft);
  text-align:center;text-wrap:pretty;
}
.offer__note b{font-weight:600;color:var(--fg)}
.modal__body b{font-weight:600;color:var(--fg)}
/* The panel explains a structure, so it is built as a sequence rather than prose.
   Small gold labels and numbered steps let a seller find "who pays what" without
   reading the whole thing — which is the same reason the offer table exists. */
.mlabel{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);margin-top:.6rem;
}
.mlabel:first-child{margin-top:0}
.msteps{display:grid;gap:.95rem;text-align:left;max-width:min(46ch,100%);margin-inline:auto}
.msteps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  font-size:var(--t-small);line-height:1.62;color:var(--fg-soft);
}
.msteps .mn{
  font-family:var(--mono);font-size:.68rem;line-height:1.62;color:var(--accent-text);
}
.msteps .mt{display:block;min-width:0}
.msteps li em{font-style:italic;color:var(--fg)}

/* ---------- 12f. The offer + the orb ----------
   Three columns: an empty gutter, the offer list (page-centred because the two
   1fr gutters are equal), and the orb in the right gutter. Grid rather than
   absolute positioning, so the orb can never be the thing that overflows. */
.offer-wrap{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;align-items:center;
}
@media (min-width:1100px){
  .offer-wrap{grid-template-columns:minmax(0,1fr) minmax(0,33rem) minmax(0,1fr)}
  .offer-wrap .offer{grid-column:2;margin-top:clamp(1.8rem,4.5vh,2.8rem)}
  .offer-wrap .offer__note{grid-column:2;grid-row:2}
}

/* ---------- 12g. The orb — the second route, suspended, not sold ----------
   A seller who needs certainty never has to open this. A seller with time will
   see it drifting and ask. That asymmetry is the whole point: the novation is a
   conversation we have case by case, not a package on a menu. */
.orb{
  position:relative;display:grid;justify-items:center;gap:.75rem;
  width:min(12.5rem,100%);padding:0;background:none;border:0;color:inherit;
  isolation:isolate;
  cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;
  margin-top:clamp(2.4rem,5vh,3.2rem);
}

/* ---------- 12g-i. The roaming lane ----------
   The sign used to occupy a row of its own directly above the call/text block,
   which pushed the phone numbers down the page and left it looking parked.
   Above 1280px it comes out of flow and drifts instead: the copy column is
   capped (44rem for the heading, 33rem for the offer table) so on a wide screen
   there are 200-320px of empty margin either side, and .roam reserves a corridor
   above the heading as well. That is where it travels. It never enters the text
   column — the eye tracks motion involuntarily, and a sign drifting over the h1
   would cost more in readability than it gains in charm.

   Below 1280px the margins are too narrow to hold a 176px sign, so it stays in
   flow, where it now sits between the heading and the offer table rather than
   below the note. Higher up the page either way, which was the point. */
.roam{position:relative}
/* In flow it is a fixed-width block child of .wrap, which does not centre its
   children the way .offer-wrap used to. Without this it hangs off the left edge
   on every phone and tablet. */
.orb--float{margin-inline:auto}

@media (min-width:1280px){
  /* No padding is added here on purpose. An earlier pass reserved a corridor
     above the heading for the sign to cross through, and it worked — but it
     pushed the heading and everything under it down the page, which is the
     opposite of the point. The gap the section's own top padding already leaves
     between the nav and the eyebrow is tall enough to cross in, so the sign uses
     that and the copy does not move at all. */
  .orb--float{
    /* --lx is the closest the sign may come to the copy: 22rem of heading column
       plus 5.5rem of sign = 27.5rem from centre. Fixed, because the copy column
       is capped at 44rem and does not grow.
       --sway is how much further out it can drift, which is whatever margin the
       viewport actually has: half the content box (44.8vw, capped at 676px by
       --maxw) minus 27.5rem of clearance minus 5.5rem of sign = 44.8vw - 33rem.
       45px on a 1280 laptop, ~148px once the layout hits its maximum width.
       --ly is the vertical travel, eyebrow height down to alongside the note. */
    --lx:27.5rem;
    --sway:clamp(0px,calc(44.8vw - 33rem),9.25rem);
    --ly:clamp(12rem,24vh,19rem);
    position:absolute;left:50%;top:0;z-index:3;
    width:11rem;margin:0;gap:.55rem;
    /* base position = the 0% keyframe, so a reduced-motion visitor gets it
       parked in the left lane rather than shifted half a width off centre. */
    transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .34),calc(var(--ly) * .34),0) rotate(-2deg);
  }
  .orb--float .orb__mark{width:60px;height:60px}
  .orb--float .orb__mark svg{width:56px;height:56px}
  .orb--float::before{top:21px;width:112px;height:112px}
}

/* A house, not a dot. It says what the panel is about before you open it, and a
   pitched roof with a keyhole inside is the brand's own mark rather than clip art. */
.orb__mark{
  position:relative;width:84px;height:84px;display:grid;place-items:center;
  transition:transform .8s var(--e-out);
}
.orb__mark svg{width:76px;height:76px;overflow:visible}
/* A yard sign, not a house. The house-with-a-keyhole said "discreet private
   purchase" — which is the Hush Sale, the exact opposite of what this panel opens.
   A sign on a post is the visual language of the on-market route, and it is the one
   thing every seller already associates with listing a property.
   Deliberately a single still sign, not a scatter: the hero uses this same imagery
   as noise to escape, and repeating that here would code our own second product as
   the enemy. One sign, in gold, planted at a slight angle — a route, not a racket. */
.orb__board{
  fill:none;stroke:color-mix(in srgb,var(--gold-soft) 62%,transparent);stroke-width:1.1;
  transition:stroke .6s var(--e-out);
}
.orb__sign{
  font-family:var(--brand);font-weight:800;
  font-size:8px;letter-spacing:.06em;
  fill:color-mix(in srgb,var(--gold-soft) 72%,transparent);
  transition:fill .6s var(--e-out);
}
.orb__post,.orb__ground{
  fill:none;stroke:color-mix(in srgb,var(--gold-soft) 62%,transparent);stroke-width:1.1;
  stroke-linecap:round;
  transition:stroke .6s var(--e-out);
}
/* the same bloom language as the call/text icons: light, never shadow */
.orb::before{
  content:"";position:absolute;left:50%;top:29px;width:150px;height:150px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--gold) 13%,transparent) 0%,
    color-mix(in srgb,var(--gold) 5%,transparent) 40%, transparent 70%);
  opacity:.75;transition:opacity .8s var(--e-out);
}

.orb__l{
  font-family:var(--brand);
  font-size:.76rem;font-weight:800;text-transform:uppercase;
  line-height:1.2;letter-spacing:.03em;
  color:var(--fg-soft);transition:color .6s var(--e-out);
}
.orb__k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);
  transition:color .6s var(--e-out);
}
.orb:hover .orb__mark,.orb:focus-visible .orb__mark{transform:translateY(-3px)}
.orb:hover .orb__board,.orb:focus-visible .orb__board,
.orb:hover .orb__post,.orb:focus-visible .orb__post,
.orb:hover .orb__ground,.orb:focus-visible .orb__ground{stroke:var(--gold-soft)}
.orb:hover .orb__sign,.orb:focus-visible .orb__sign{fill:var(--gold-soft)}
.orb:hover::before,.orb:focus-visible::before{opacity:1}
.orb:hover .orb__l{color:var(--fg)}
.orb:hover .orb__k{color:var(--gold-soft)}

/* The wander. The sign travels the width of its lane rather than jittering in
   place: uneven waypoints with holds between them and a slight sway, so it
   reads as something alive choosing where to go next rather than a loop.
   Distance is in vw so it scales with the viewport and can never overshoot —
   the element is centred in a full-width lane, so the reach stays on-page at
   every size. Two separate animation NAMES rather than redefining one inside a
   media query: a duplicate @keyframes name wins globally by source order and
   would silently override the narrow-screen version at every width. */
@keyframes orbWander{
  0%   {transform:translate3d(-30vw,0,0)    rotate(-2deg)}
  7%   {transform:translate3d(-30vw,-6px,0) rotate(-2deg)}
  18%  {transform:translate3d(-8vw,-14px,0) rotate(1.5deg)}
  24%  {transform:translate3d(-8vw,-10px,0) rotate(1.5deg)}
  36%  {transform:translate3d(22vw,-4px,0)  rotate(-1deg)}
  43%  {transform:translate3d(22vw,-9px,0)  rotate(-1deg)}
  54%  {transform:translate3d(32vw,-18px,0) rotate(2deg)}
  61%  {transform:translate3d(32vw,-12px,0) rotate(2deg)}
  73%  {transform:translate3d(4vw,-16px,0)  rotate(-1.5deg)}
  79%  {transform:translate3d(4vw,-8px,0)   rotate(-1.5deg)}
  90%  {transform:translate3d(-18vw,-5px,0) rotate(1deg)}
  100% {transform:translate3d(-30vw,0,0)    rotate(-2deg)}
}
/* Narrow screens have no gutters to cross. Same behaviour, shorter reach. */
@keyframes orbWanderNarrow{
  0%   {transform:translate3d(-15vw,0,0)    rotate(-2deg)}
  18%  {transform:translate3d(-4vw,-10px,0) rotate(1.5deg)}
  36%  {transform:translate3d(11vw,-4px,0)  rotate(-1deg)}
  54%  {transform:translate3d(16vw,-13px,0) rotate(2deg)}
  73%  {transform:translate3d(2vw,-11px,0)  rotate(-1.5deg)}
  90%  {transform:translate3d(-9vw,-4px,0)  rotate(1deg)}
  100% {transform:translate3d(-15vw,0,0)    rotate(-2deg)}
}
.js .orb{animation:orbWanderNarrow 34s cubic-bezier(.45,.05,.55,.95) infinite}
@media (min-width:1100px){ .js .orb{animation-name:orbWander} }

/* ---------- the roam, 1280px and up ----------
   It does not travel across the page — it leaves one margin and returns in the
   other. That solves the problem a continuous path could not: crossing means
   passing through the copy column, and the only heights where that column is
   absent are a 15-40px sliver above the eyebrow and a 40px band above the phone
   numbers, neither of which fits a 110px sign. Fading out and back in needs no
   corridor at all, so the heading and the phone numbers stay where they are, and
   the sign uses both margins instead of favouring one.

   Each side gets a long visible stretch with a slow drift inside it — enough that
   it is clearly alive, not so much that it pulls the eye off the sentence — then
   a slow fade, a beat of nothing, and it is on the other side. The jump happens
   at zero opacity, so it is never seen travelling.

   visibility is stepped alongside opacity so the sign is not an invisible click
   target while it is away. Both are restored on hover and focus below, otherwise
   a keyboard visitor could tab to something they cannot see. */
@keyframes orbBlink{
  /* --- left --- */
  0%   {opacity:0;pointer-events:none;visibility:visible;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .30),calc(var(--ly) * .30),0) rotate(-2deg)}
  1%   {opacity:.08;pointer-events:auto;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .31),calc(var(--ly) * .31),0) rotate(-2deg)}
  4%   {opacity:1;pointer-events:auto;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .34),calc(var(--ly) * .34),0) rotate(-2deg)}
  16%  {opacity:1;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .78),calc(var(--ly) * .17),0) rotate(1deg)}
  22%  {opacity:1;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .72),calc(var(--ly) * .22),0) rotate(1deg)}
  34%  {opacity:1;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .22),calc(var(--ly) * .74),0) rotate(-1.5deg)}
  40%  {opacity:1;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .30),calc(var(--ly) * .68),0) rotate(-1.5deg)}
  44%  {opacity:.08;pointer-events:auto;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .38),calc(var(--ly) * .62),0) rotate(-1.5deg)}
  45%  {opacity:0;pointer-events:none;visibility:hidden;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .40),calc(var(--ly) * .60),0) rotate(-1.5deg)}
  /* --- away: the jump happens here, unseen --- */
  47%  {opacity:0;pointer-events:none;visibility:hidden;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .30),calc(var(--ly) * .78),0) rotate(2deg)}
  50%  {opacity:0;pointer-events:none;visibility:visible;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .30),calc(var(--ly) * .78),0) rotate(2deg)}
  /* --- right --- */
  51%  {opacity:.08;pointer-events:auto;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .31),calc(var(--ly) * .77),0) rotate(2deg)}
  54%  {opacity:1;pointer-events:auto;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .34),calc(var(--ly) * .72),0) rotate(2deg)}
  66%  {opacity:1;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .80),calc(var(--ly) * .42),0) rotate(-1deg)}
  72%  {opacity:1;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .74),calc(var(--ly) * .47),0) rotate(-1deg)}
  84%  {opacity:1;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .24),calc(var(--ly) * .14),0) rotate(1.5deg)}
  90%  {opacity:1;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .32),calc(var(--ly) * .20),0) rotate(1.5deg)}
  94%  {opacity:.08;pointer-events:auto;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .40),calc(var(--ly) * .25),0) rotate(1.5deg)}
  95%  {opacity:0;pointer-events:none;visibility:hidden;transform:translate3d(calc(-50% + var(--lx) + var(--sway) * .42),calc(var(--ly) * .26),0) rotate(1.5deg)}
  97%  {opacity:0;pointer-events:none;visibility:hidden;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .30),calc(var(--ly) * .30),0) rotate(-2deg)}
  100% {opacity:0;visibility:visible;transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .30),calc(var(--ly) * .30),0) rotate(-2deg)}
}
@media (min-width:1280px){
  .js .orb--float{animation:orbBlink 44s linear infinite}
  /* never leave a keyboard visitor focused on something invisible, and never
     let it fade out from under a cursor that is reaching for it */
  .js .orb--float:hover,.js .orb--float:focus-visible,
  .js .orb--float[aria-expanded="true"]{opacity:1;visibility:visible;pointer-events:auto}
}

/* it settles the moment you reach for it — a drifting click target is a bad
   click target, and holding still is also the more polite gesture */
.js .orb:hover,.js .orb:focus-visible,.js .orb[aria-expanded="true"]{animation-play-state:paused}

/* ---------- 12h. The panel the orb opens ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:8600;display:grid;place-items:center;padding:var(--gut)}
.modal__scrim{
  position:absolute;inset:0;background:color-mix(in srgb,#000 72%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s var(--e-out);
}
/* The box itself does not scroll — .modal__scroll inside it does. That keeps the close
   button pinned instead of scrolling away with the text, and gives the box a fixed
   edge to hang the bottom fade on. */
.modal__box{
  position:relative;width:min(38rem,100%);max-height:86svh;
  display:flex;flex-direction:column;overflow:hidden;
  background:#0A0908;
  border:1px solid color-mix(in srgb,var(--gold-soft) 26%,transparent);
  text-align:center;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .55s var(--e-out),transform .7s var(--e-out);
}
.modal__scroll{
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(2rem,4.5vw,3.2rem) clamp(1.5rem,4vw,3.2rem) clamp(3.6rem,7vw,5.2rem);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--gold-soft) 55%,transparent) transparent;
}
.modal__scroll::-webkit-scrollbar{width:11px}
.modal__scroll::-webkit-scrollbar-track{background:transparent}
.modal__scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--gold-soft) 48%,transparent);
  border-radius:11px;border:3.5px solid transparent;background-clip:content-box;
}
.modal__scroll::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--gold-soft) 80%,transparent);background-clip:content-box;
}
/* the only cue that there is more below — it fades out once you reach the end */
.modal__fade{
  position:absolute;left:1px;right:1px;bottom:1px;height:clamp(3rem,6vw,4.4rem);
  pointer-events:none;
  background:linear-gradient(180deg,transparent,#0A0908 82%);
  opacity:1;transition:opacity .45s var(--e-out);
}
.modal.is-end .modal__fade{opacity:0}
.modal.is-open .modal__scrim{opacity:1}
.modal.is-open .modal__box{opacity:1;transform:none}
.modal__t{
  font-family:var(--brand);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,3.1vw,2.15rem);line-height:1.02;letter-spacing:-.028em;
  margin-top:.9rem;text-wrap:balance;
}
.modal__sub{
  margin-top:.7rem;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
}
.modal__body{margin-top:clamp(1.6rem,3.4vh,2.2rem);display:grid;gap:1.05rem}
.modal__body p{
  font-size:var(--t-small);line-height:1.66;color:var(--fg-soft);
  max-width:min(48ch,100%);margin-inline:auto;text-wrap:pretty;
}
.modal__body .ph{font-size:1em}
.modal__x{
  position:absolute;top:.6rem;right:.6rem;width:44px;height:44px;z-index:2;
  /* the panel scrolls underneath this button, so it needs a soft plate or the text
     runs straight through the X */
  background:radial-gradient(closest-side,#0A0908 58%,transparent 100%);
  border:0;color:var(--fg-faint);cursor:pointer;
  display:grid;place-items:center;transition:color .5s var(--e-out);
}
.modal__x:hover{color:var(--fg)}
.modal__x svg{width:14px;height:14px}
body.is-locked{overflow:hidden}

/* ---------- 12i. Messaging disclosure ----------
   Small, but it is doing real work: US carriers want the consent disclosure at the
   point of collection, and with no forms on this site the Text tile IS the point of
   collection. Without this line the A2P 10DLC registration has nothing to point at. */
p.dial__terms{
  max-width:min(52ch,100%);margin:clamp(1.6rem,3.5vh,2.4rem) auto 0;
  font-size:.75rem;line-height:1.7;color:var(--fg-faint);text-align:center;
  text-wrap:pretty;
}
p.dial__terms .ul{display:block;margin-top:.7rem;white-space:nowrap}
@media (max-width:860px){.fork{grid-template-columns:1fr}}
@media (max-width:860px){
  .fork__side{border-right:0;border-bottom:1px solid var(--rule)}
}

/* ---------- 12c. The dial — icons that float, no box ---------- */
.dial{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(2.6rem,9vw,7.5rem);
  width:100%;margin:clamp(2.6rem,6vh,4.2rem) auto 0;
}
.dial__i{
  position:relative;display:grid;justify-items:center;
  /* wide enough that the revealed number never sticks out past the link */
  min-width:clamp(160px,17vw,250px);
  padding-bottom:clamp(2.6rem,5vh,3.4rem);
  text-align:center;
}

/* On a near-black ground a black shadow is invisible. Elevation here comes from
   a soft bloom of light behind the icon, plus a tight contact shadow beneath. */
.dial__i::before{
  content:"";position:absolute;left:50%;top:calc(clamp(72px,10.5vw,132px) * .46);
  width:clamp(150px,17vw,240px);height:clamp(150px,17vw,240px);
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--cream) 7%,transparent) 0%,
    color-mix(in srgb,var(--cream) 3%,transparent) 38%,
    transparent 70%);
  opacity:.9;pointer-events:none;
  transition:opacity .7s var(--e-out),background .7s var(--e-out),transform .7s var(--e-out);
}
.dial__i:hover::before{
  opacity:1;transform:translate(-50%,-56%) scale(1.06);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--gold) 20%,transparent) 0%,
    color-mix(in srgb,var(--gold) 8%,transparent) 40%,
    transparent 72%);
}

/* the contact shadow — this is what sells the float */
.dial__shadow{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(clamp(72px,10.5vw,132px) + 6px);
  width:clamp(58px,8vw,104px);height:clamp(12px,1.6vw,20px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 45%, transparent 72%);
  filter:blur(6px);opacity:.9;
  transition:width .6s var(--e-out),opacity .6s var(--e-out),filter .6s var(--e-out);
  pointer-events:none;
}

.dial__ico{
  display:block;
  width:clamp(72px,10.5vw,132px);height:clamp(72px,10.5vw,132px);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.75));
  transition:transform .65s var(--e-out),filter .65s var(--e-out);
  will-change:transform;
}
.dial__ico svg{width:100%;height:100%;display:block;overflow:visible}
.dial__ico path,.dial__ico rect,.dial__ico circle{
  fill:none;stroke:var(--cream);stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .5s var(--e-out);
}
.dial__i:hover .dial__ico{
  transform:translateY(-14px);
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.8))
         drop-shadow(0 0 22px color-mix(in srgb,var(--gold) 42%,transparent));
}
.dial__i:hover .dial__shadow{width:clamp(44px,6vw,78px);opacity:1;filter:blur(10px)}
.dial__i:hover .dial__ico path,
.dial__i:hover .dial__ico rect,
.dial__i:hover .dial__ico circle{stroke:var(--gold-soft)}

.dial__lbl{
  margin-top:clamp(1.4rem,2.6vh,2rem);
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--fg-faint);
  transition:transform .6s var(--e-out),color .5s var(--e-out);
}
.dial__i:hover .dial__lbl{transform:translateY(-8px);color:var(--fg-soft)}

.dial__num{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,10px);
  white-space:nowrap;
  font-family:var(--mono);font-weight:300;
  font-size:clamp(.9rem,1.35vw,1.15rem);letter-spacing:-.01em;
  color:var(--gold-soft);
  opacity:0;transition:opacity .5s var(--e-out),transform .6s var(--e-out);
  pointer-events:none;
}
.dial__num .ph{border-bottom:0;color:inherit;font-size:1em}
.dial__i:hover .dial__num,.dial__i:focus-visible .dial__num{opacity:1;transform:translate(-50%,0)}

/* the ring: a handset shaking in its cradle */
@keyframes hs-ring{
  0%,62%,100%{transform:rotate(0)}
  6%{transform:rotate(-13deg)}  12%{transform:rotate(11deg)}
  18%{transform:rotate(-9deg)}  24%{transform:rotate(7deg)}
  30%{transform:rotate(-5deg)}  36%{transform:rotate(4deg)}
  42%{transform:rotate(-2deg)}  48%{transform:rotate(1deg)}
}
@keyframes hs-buzz{
  0%,70%,100%{transform:translate3d(0,0,0)}
  8%{transform:translate3d(-2px,1px,0)}   16%{transform:translate3d(2px,-1px,0)}
  24%{transform:translate3d(-2px,-1px,0)} 32%{transform:translate3d(2px,1px,0)}
  40%{transform:translate3d(-1.4px,1px,0)}48%{transform:translate3d(1.4px,-1px,0)}
  56%{transform:translate3d(-.7px,0,0)}
}
.dial__i--call:hover .dial__ico svg{animation:hs-ring 1.5s var(--e-io) infinite;transform-origin:52% 62%}
.dial__i--text:hover .dial__ico svg{animation:hs-buzz 1.5s var(--e-io) infinite}

@media (hover:none),(pointer:coarse){
  .dial__num{display:none}
  .dial__i{padding-bottom:0}
  .dial__i:active .dial__ico{transform:translateY(-6px)}
}
@media (max-width:520px){
  /* narrow screens: tapping dials, so the number is redundant and the wide
     hit area it needs isn't either */
  .dial{gap:1.4rem}
  .dial__i{min-width:0;flex:1 1 0;padding-bottom:0}
  .dial__num{display:none}
  /* keep the light bloom inside the narrowed column */
  .dial__i::before{width:118px;height:118px}
}
@media (max-width:860px){.ledger{grid-template-columns:1fr;gap:2.8rem}.ledger__rule{display:none}}

/* ---------- 14. Statement blocks ---------- */
.statement{max-width:min(22ch,100%);font-size:var(--t-display);line-height:.99;letter-spacing:-.036em}
.aside-note{
  font-size:var(--t-small);color:var(--fg-faint);max-width:min(38ch,100%);
  padding-left:1.2rem;border-left:1px solid var(--rule);line-height:1.6;
}
@media (max-width:860px){.paths__cards{grid-template-columns:1fr}}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:2.6rem}}
.step{position:relative;padding-top:2.6rem;border-top:1px solid var(--rule);text-align:center}
.step p{margin-inline:auto}
.step h3{font-size:var(--t-h3);margin-bottom:.85rem}
.step p{max-width:min(32ch,100%)}
.step p{color:var(--fg-soft);font-size:var(--t-body);max-width:min(34ch,100%)}
@media (max-width:760px){.promises{columns:1}}
@media (max-width:860px){.proofs{grid-template-columns:1fr}}
@media (max-width:760px){.counters{grid-template-columns:1fr;gap:2rem}}
@media (max-width:860px){.nos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.nos{grid-template-columns:1fr}}
@media (max-width:860px){.nos li{border-bottom:1px solid var(--rule)}.nos li:nth-child(2n){border-right:0}}
.sit{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,3.4vw,2.8rem);
  border-bottom:1px solid var(--rule);
  align-items:baseline;
  transition:background .7s var(--e-out),padding-left .7s var(--e-out);
}
.sit:hover{background:color-mix(in srgb,var(--cream) 4%,transparent);padding-left:clamp(.6rem,1.6vw,1.4rem)}
@media (max-width:760px){.sit{grid-template-columns:1fr;gap:.8rem}}
.sit h3{font-size:clamp(1.35rem,2.4vw,2rem)}
.sit p{color:var(--fg-soft);max-width:min(48ch,100%)}
.field{position:relative;display:block}
.field label{
  display:block;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:.9rem;
}
.field input,.field textarea,.field select{
  width:100%;padding:.55rem 0 .95rem;
  border-bottom:1px solid var(--rule-strong);
  font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:350;
  color:var(--fg);border-radius:0;
  transition:border-color .6s var(--e-out);
}
.field select{cursor:pointer}
.field select option{background:var(--forest);color:var(--cream)}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
@media (max-width:660px){.form__row{grid-template-columns:1fr}}

/* ---------- 20. Hush List / dashboard ---------- */
.deal{
  border:1px solid var(--rule);
  padding:clamp(1.4rem,2.4vw,2rem);
  display:grid;gap:1.5rem;
  transition:border-color .7s var(--e-out),background .7s var(--e-out),transform .7s var(--e-out);
}
.deal:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--cream) 4%,transparent);transform:translateY(-3px)}
@media (max-width:660px){.deal__grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}}

/* ---------- 21. Legal ---------- */
.legal-wrap{max-width:min(860px,100%);margin-inline:auto}
.legal-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.3rem clamp(1rem,2.2vw,1.8rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:1.2rem;margin-bottom:clamp(2.8rem,7vh,4.5rem);
}
.legal-nav a{
  font-size:.76rem;letter-spacing:.04em;color:var(--fg-faint);
  transition:color .4s ease;
}
.legal-nav a:hover,.legal-nav a.on{color:var(--accent-text)}
.legal-body h2{font-size:clamp(1.4rem,2.4vw,1.95rem);letter-spacing:-.032em;margin-bottom:1.6rem;text-align:center}
.legal-body h3{font-size:1.06rem;font-family:var(--sans);font-weight:500;letter-spacing:0;margin:2.2rem auto .8rem;max-width:min(62ch,100%);text-align:center}
.legal-body p,.legal-body li{color:var(--fg-soft);max-width:min(62ch,100%);margin-inline:auto;font-size:.98rem;line-height:1.72;text-align:center}
.legal-body p + p{margin-top:1rem}
.legal-body ul + p{margin-top:1.3rem}
.legal-body p + ul{margin-top:1rem}
.legal-body ul{margin:1.1rem auto 0;max-width:min(62ch,100%);display:grid;gap:.8rem}
.legal-body ul li{padding-left:0}
.legal-sec{padding-block:clamp(2.4rem,5vw,3.6rem);border-bottom:1px solid var(--rule)}
.legal-sec:first-child{padding-top:0}
.callout{
  border-left:0;border-top:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  padding:clamp(1.3rem,2.6vw,2rem);
  margin:1.8rem auto;max-width:min(62ch,100%);text-align:center;
}
.callout p{color:var(--fg);max-width:min(64ch,100%);margin-inline:auto}

/* ---------- 22. Footer ---------- */
.foot--min{text-align:center}
.foot--min .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}

.foot{background:var(--forest-black);border-top:1px solid color-mix(in srgb,var(--cream) 9%,transparent);color:var(--cream);padding-block:clamp(2.6rem,5.5vh,4rem)}
.foot a{color:color-mix(in srgb,var(--cream) 80%,transparent);transition:color .4s ease}
.foot a:hover{color:var(--cream)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr 1fr;gap:2.4rem}.foot__brand{grid-column:1/-1}}

/* one quiet line of necessary detail — not a note box */
.fine{
  margin:clamp(2.4rem,5vh,3.4rem) auto 0;
  max-width:min(56ch,100%);text-align:center;
  font-size:var(--t-small);color:var(--fg-faint);line-height:1.65;
}

/* the footer, one line */
.foot__line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.45rem clamp(.8rem,1.8vw,1.4rem);
  font-size:var(--t-small);color:var(--fg-faint);text-align:center;
}
.foot__line .dot{
  width:3px;height:3px;border-radius:50%;background:currentColor;
  opacity:.45;flex:none;
}
.foot__line a{color:var(--fg-soft)}
.foot__line a:hover{color:var(--cream)}
@media (max-width:560px){
  .foot__line .dot{display:none}
  .foot__line{flex-direction:column;gap:.5rem}
}

/* ---------- 22b. Overflow net ---------- */
.wrap > *{max-width:100%}
.sec,.hero,.split,.foot{max-width:100vw}
.mt-2{margin-top:clamp(1.4rem,2.6vw,2.2rem)}
@media (max-width:860px){
  .col-6,.col-5,.col-7,.col-4,.col-8,.start-7,.start-6{grid-column:1/-1}
}
.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}
.page-top{padding-top:clamp(9rem,20vh,15rem)}

/* ---------- 23b. The ground ----------
   Three colours: black, cream, gold. That is the whole system.

   Green used to sit here as a fourth. It was retired on purpose. At the strength
   restraint allowed, it was invisible — it wasn't earning a slot, and the fix for a
   colour that isn't earning its slot is to remove it, not to turn it up. Everything
   green used to do is now done by gold, which means every accent on the site points
   at the same place instead of two.

   To go back to the old green-black ground, remove data-palette="black" from <html>
   in build_site.py's head() and revert the theme-colour and favicon fill to #071410. */
[data-palette="black"]{
  --forest-black:#000000;
  /* warm-neutral hairlines: cream carries a trace of the gold's warmth so rules and
     type feel like one family rather than grey lines under gold text */
  --rule:        color-mix(in srgb, #E8DFC8 15%, transparent);
  --rule-strong: color-mix(in srgb, #E8DFC8 30%, transparent);
}
/* Depth without a second hue: a very low gold wash under each screen. Large area,
   low intensity — you read it as the room having a floor, not as a colour. */
[data-palette="black"] .sec--solo,
[data-palette="black"] .home,
[data-palette="black"] .split{
  background-image:radial-gradient(135% 62% at 50% 114%,
    color-mix(in srgb, var(--gold) 9%, transparent) 0%,
    color-mix(in srgb, var(--gold) 3%, transparent) 44%, transparent 76%);
}
/* the raised surface is a warm near-black, not a tinted one */
[data-palette="black"] .modal__box{background:#0A0908}
[data-palette="black"] .dial__i::before{
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--cream) 8%,transparent) 0%,
    color-mix(in srgb,var(--gold) 5%,transparent) 40%, transparent 70%);
}

/* the 404's short centred block — was an inline <style> on that page only */
.mini{min-height:70svh;display:flex;flex-direction:column;justify-content:center}

/* ---------- 23c. The sheen ----------
   A single band of gold light crosses each display title once, then the title goes
   back to plain cream. It fires once per page view and never loops — a looping
   shimmer is the difference between light catching metal and a banner ad, and it
   would also fight the hero's loud-to-hush resolve for attention.

   Engineered so it cannot break the text. Clipping a gradient to glyphs requires
   making the text itself transparent, which means a failure leaves an invisible
   heading. So the clip only exists while `.is-lit` is on the element — JS adds it,
   removes it on animationend — and it is gated behind both the `.js` hook and a real
   @supports test. Before and after, the heading is ordinary cream text.

   Contrast never drops: the band runs cream (18.6:1) to gold-soft (12.4:1), both far
   above AA on black. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .js [data-sheen].is-lit{
    background-image:linear-gradient(100deg,
      var(--cream) 40%,
      var(--gold-soft) 50%,
      var(--cream) 60%);
    background-size:280% 100%;
    background-repeat:no-repeat;
    background-position:0% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:sheen 2.1s cubic-bezier(.42,0,.3,1) 1 both;
  }
  /* the wordmark's two halves inherit the clip, so they must not repaint themselves */
  .js [data-sheen].is-lit .wm-h,
  .js [data-sheen].is-lit .wm-s,
  .js [data-sheen].is-lit .lk-a,
  .js [data-sheen].is-lit .lk-b,
  .js [data-sheen].is-lit .line,
  .js [data-sheen].is-lit .line > span{color:inherit;-webkit-text-fill-color:inherit}
  /* "The" stays gold rather than being washed out by the pass */
  .js [data-sheen].is-lit .lk-the{-webkit-text-fill-color:var(--accent-text)}
}
/* With background-size:280% and no-repeat, only positions between 0% and 100% keep
   the image over the box at all. 170% and -70% pushed it completely off, leaving the
   clipped text with no background to show — i.e. invisible headings. 0%→100% keeps it
   covered end to end, and because the gold stop sits at 50% of a 280%-wide image,
   both ends of the sweep land on pure cream. */
@keyframes sheen{
  from{background-position:0% 0}
  to{background-position:100% 0}
}

/* ---------- 22b. Touch targets ----------
   Audited across seven real device profiles. Everything interactive now clears
   24x24 (WCAG 2.2 AA) and the standalone controls clear 44x44. The padding buys
   hit area without changing where anything appears. */
@media (hover:none),(pointer:coarse){
  .nav__brand{display:inline-flex;align-items:center;min-height:44px;padding-block:.5rem}
  .ul{display:inline-block;padding-block:.62rem;padding-bottom:.68em}
  .foot__line .ul{padding-block:.72rem}
  .legal-nav a{padding-block:.78rem;padding-inline:.35rem;display:inline-block}
  .modal__sub{font-size:.74rem}
  .dial__terms .ul{padding-block:.7rem}
  /* the disclosure is a legal notice — it should not be the smallest thing on a phone */
  p.dial__terms{font-size:.8rem;line-height:1.7}
  .eyebrow,.orb__k{font-size:.72rem}
}

/* On touch there is no hover, so a hover-only control is an invisible control.
   BEGIN and JOIN carry their rule permanently on coarse pointers. */
@media (hover:none),(pointer:coarse){
  .split__do .do__w::after{transform:scaleX(1)}
  .split__side:active .split__do{color:var(--gold-soft)}
}

/* ---------- 24. Reduced motion — fully respected ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .grain{animation:none}
  .cursor{display:none !important}
  .js [data-reveal],.js [data-stagger] > *{opacity:1 !important;transform:none !important}
  .js [data-reveal="rule"]{scale:1 1 !important}
  .js .line > span{transform:none !important}
  .js .hero__mark .wm-h{opacity:1;filter:none;font-variation-settings:"wght" 800}
  .js .hero__mark .wm-s{opacity:1;transform:none;font-variation-settings:"wght" 800}
  .hero__horizon{transform:scaleX(1);opacity:1}
  .noise-bit{display:none}
  .dial__i--call:hover .dial__ico svg,
  .dial__i--text:hover .dial__ico svg{animation:none}
  .dial__num{opacity:1;transform:none}
}

/* ---------- 24b. Centred aside (overrides the base .aside-note) ---------- */
.aside-note--c{
  text-align:center;border-left:0;padding-left:0;
  padding-top:1.3rem;border-top:1px solid var(--rule);
  max-width:min(52ch,100%);margin-inline:auto;
}

/* ---------- 25. Hand-authored line stagger ---------- */
.js .in .line:nth-child(1) > span{transition-delay:.02s}
.js .in .line:nth-child(2) > span{transition-delay:.10s}
.js .in .line:nth-child(3) > span{transition-delay:.18s}
.js .in .line:nth-child(4) > span{transition-delay:.26s}
.js .in .line:nth-child(5) > span{transition-delay:.34s}

/* Menu open — nav always reads on the forest panel */
body.menu-open .nav.is-stuck{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- last word: reduced motion parks the roaming sign ----------
   The reduced-motion block above sets transform:none !important on every
   [data-reveal] element. The roaming sign is absolutely positioned at left:50%
   and relies on its transform to sit anywhere sensible, so that rule would
   leave it hanging half a width right of centre. This has to come last to win
   the !important tie: park it centred in the corridor above the heading, which
   reads as a deliberate resting place rather than a stopped animation. */
@media (prefers-reduced-motion:reduce){
  @media (min-width:1280px){
    .js .orb--float{transform:translate3d(calc(-50% - var(--lx) - var(--sway) * .34),calc(var(--ly) * .34),0) rotate(-2deg) !important;
                    opacity:1 !important;visibility:visible !important}
  }
}