/* ============================================================
   HUSH SELL
   One page. One line, drawn by your scroll, from the problem to
   the closing. Black, white, platinum. Nothing else.
   ============================================================ */

/* the display face is preloaded and same-origin, so it arrives in a few ms.
   swap let a fallback paint first, and the wordmark is sized by measuring it —
   so the hero jumped 120px once the real font landed. block removes the jump. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:block}
/* Body copy is set in a serif, not a UI sans. Archivo carries the argument;
   this carries the reading, and the two being from different families is the
   point — a heavy grotesque headline over a serif paragraph reads as two voices
   rather than one font at two sizes. Source Serif 4 is drawn for screen: low
   enough stroke contrast that hairlines do not shimmer on a near-black ground,
   which is where most editorial serifs fall down on a dark site. */
@font-face{font-family:"SerifV";src:url("fonts/serif-var.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --void:#050505;
  --white:#FFFFFF;          /* display type is plain white. no plating, no sheen. */
  --ash:#9C9A95;
  --dim:#82807A;            /* 5.2:1 on --void — WCAG AA for body text */
  --edge:rgba(255,255,255,.12);
  --edge2:rgba(255,255,255,.055);

  --hair:#8E8C87;           /* warm grey for hairlines and small marks */
  --focus:#8E8C87;          /* focus ring on the dark ground — 6.1:1 */

  /* the accent — this is where the colour lives now */
  --accent:#0B6B3A;
  --accent-hi:#12A85A;

  --f-d:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* ONE small-caps label spec. These were five different treatments doing the
     same job — 600 and 650 weight, some on the wdth 106 axis and some on the
     default, tracking anywhere from .20em to .28em. The header and the footer
     were the two that sat furthest apart, which is why they read as belonging
     to a different site than the middle of the page. Sizes still vary by
     context; the letterform does not. */
  --lbl-w:600;--lbl-wdth:"wdth" 112;--lbl-track:.24em;
  /* Display tracking is a curve, not a per-element decision: the bigger the
     type, the tighter it wants to be set. The site had six values that did not
     follow that curve at all — 80px was set tighter than 100px, and a 37px
     heading tighter than a 40px one — so headings of similar size read as
     belonging to different families. Four bands, applied by size. */
  --dsp-xl:-.05em;   /* 180px and up — the wordmark */
  --dsp-l:-.038em;   /* 70-140px */
  --dsp-m:-.030em;   /* 45-70px  */
  --dsp-s:-.024em;   /* 28-45px  */
  /* ordinal numerals: one treatment, wherever a step or card is counted */
  --ord-w:700;--ord-track:.2em;

  --f-b:"SerifV","Source Serif 4",Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;

  --gut:clamp(1.15rem,4vw,4.5rem);
  --maxw:1560px;
  --nav:70px;
  --e:cubic-bezier(.19,1,.22,1);
  --e2:cubic-bezier(.76,0,.24,1);
  /* Expo curves put 50-65% of the motion into the first fifth of the duration,
     so anything using them reads fast however long you make it — the eye sees a
     snap and then a long imperceptible creep. These travel evenly and land soft,
     which is what actually reads as unhurried. */
  --fall:cubic-bezier(.42,.02,.22,1);  /* 22% travelled at a quarter through, not 65% */
  --lift:cubic-bezier(.45,.05,.40,1);  /* for things that brighten rather than move */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--void);color:var(--white);font-family:var(--f-b);
  font-size:17.6px;line-height:1.6;font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--hair);color:var(--void)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* all line art shares one construction: hairline weight that never scales with the
   box, flat ends, square joins. mismatched stroke weights are what make an icon set
   look bought rather than drawn. */
.ico{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:butt;stroke-linejoin:miter}
.ico *{vector-effect:non-scaling-stroke}
/* the ring has to survive the inversion too — plat is only 2.9:1 on paper */
.doc{--focus:var(--focus-dark,#8E8C87)}
/* the pointer's own ground decides its colour, so .lit is set per frame in JS */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.dsp{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;
  text-transform:uppercase;letter-spacing:var(--dsp-l);line-height:.85;text-wrap:balance}

.kick{font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  font-size:.62rem;letter-spacing:var(--lbl-track);
  text-transform:uppercase;color:var(--dim)}
.lead{font-size:clamp(1.16rem,1.6vw,1.49rem);line-height:1.5;color:var(--ash);max-width:44ch;font-weight:370}
.body{color:var(--ash);max-width:56ch}

/* ---------- fixed furniture ---------- */
/* ---------- atmosphere ----------
   The black used to be one flat value from the hero to the footer, so nothing but
   the copy told you that you had travelled. This is a light source: cool and high
   at the top, sinking as you descend, then a warm one low down as you reach the
   contact. It sits under everything (.act is z2, the thread z1) and is never
   meant to be noticed on its own. */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
  transition:opacity .9s var(--e)}
.amb i{position:absolute;left:50%;top:50%;width:104vmax;height:104vmax;
  margin:-52vmax 0 0 -52vmax;will-change:transform,opacity}   /* the gradient already ends in transparent — no radius needed to clip it */
.amb__a{background:radial-gradient(closest-side,
  rgba(98,126,164,.135), rgba(98,126,164,.052) 42%, rgba(98,126,164,0) 71%)}
.amb__b{opacity:0;background:radial-gradient(closest-side,
  rgba(172,138,94,.125), rgba(172,138,94,.046) 42%, rgba(172,138,94,0) 71%)}
/* shapes the light rather than the ground — only does anything where light exists */
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;
  background:radial-gradient(125% 88% at 50% 44%, transparent 40%, rgba(0,0,0,.55) 100%)}
/* the paper chapter is its own daylight; the lamp has no business there */

#thread{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* overlay blend collapsed on a near-black ground — measured stdev 0.17, i.e. invisible.
   plain compositing reads the same as screen here and costs ~40% less per frame,
   because a full-screen blend mode forces the whole page to re-composite. */
.grain{position:fixed;inset:-14%;z-index:30;pointer-events:none;opacity:.055;contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 5s steps(5) infinite}
@keyframes gr{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(0,0,0)}}
/* phones do not need the film moving; the texture alone carries it */
@media (hover:none),(pointer:coarse){.grain{animation:none}}
html.reduced .grain{animation:none}

/* the pointer sits above everything and must never be occluded.
   the ring was 2.7:1 on the void — under the 3:1 floor for interface elements,
   and it was the only pointer on screen. */
.cur,.cur__dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  transition:opacity .25s var(--e)}
.cur{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(241,240,236,.60);
  transition:width .4s var(--e),height .4s var(--e),margin .4s var(--e),
             border-color .35s var(--e),background .35s var(--e),opacity .25s var(--e)}
.cur.hot{width:58px;height:58px;margin:-29px 0 0 -29px;
  border-color:var(--accent-hi);background:rgba(18,168,90,.09)}
/* square, because that is how each route ends */
.cur__dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--white);
  transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),
             background .3s var(--e),opacity .25s var(--e)}
.cur__dot.hot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--accent-hi)}
html.nocur,html.nocur *{cursor:none!important}
@media (hover:none),(pointer:coarse){.cur,.cur__dot{display:none}}

/* ---------- the wordmark ----------
   Defined once. Anywhere the name is set as a mark, it uses this and changes
   only size and colour — otherwise the tracking drifts and one reads heavier
   than the other. */
.wordmark{font-family:var(--f-d);font-weight:700;font-variation-settings:"wdth" 112;
  text-transform:uppercase;letter-spacing:.42em;text-indent:.42em}

/* ---------- header ---------- */
/* The blur lives on a layer BEHIND the header's content, not on the header
   itself. A backdrop-filter promotes its element to a compositing layer, and
   text on that layer is rasterised with grayscale antialiasing instead of the
   normal path — which made the wordmark render visibly thinner and softer here
   than the identical letters render anywhere else on the page. Moving the blur
   to a pseudo-element behind the content keeps the frosted panel and lets the
   type rasterise normally. */
.hdr{position:fixed;inset:0 0 auto 0;z-index:25;height:var(--nav);display:flex;align-items:center;
  transition:border-color .5s;border-bottom:1px solid transparent;isolation:isolate}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(5,5,5,.72);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  opacity:0;transition:opacity .5s var(--e)}
.hdr.stuck::before{opacity:1}
.hdr.stuck{border-bottom-color:var(--edge2)}
.hdr__in{display:flex;align-items:center;justify-content:center;width:100%}
/* one control, matching the legal pages: a way back to the top, not a second wordmark */
.brand{position:relative;display:inline-flex;align-items:center;gap:.5rem;color:var(--white);
  font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  font-size:.66rem;letter-spacing:var(--lbl-track);text-transform:uppercase;
  padding-bottom:.6rem;opacity:0;transform:translateY(-6px);pointer-events:none;
  /* visibility, not just opacity: an invisible link that still takes a tab stop
     is a focus-visible failure — a keyboard user lands on nothing. Hidden while
     you are still in the hero (where it points at where you already are), and
     back in the tab order the moment the header sticks. */
  visibility:hidden;
  transition:opacity .6s var(--e),transform .6s var(--e),color .35s,visibility 0s linear .6s}
.hdr.stuck .brand{opacity:1;transform:none;pointer-events:auto;
  visibility:visible;transition-delay:0s}
/* belt and braces: if it is ever focused it is visible, whatever the header state */
.brand:focus-visible{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
/* without JS the header never sticks, so it simply stays on */
html:not(.js) .brand{opacity:1;transform:none;pointer-events:auto;visibility:visible}
/* The mark is the brand's own H, set in the same Archivo instance as the
   wordmark — not a house pictogram. A house outline is the most-used icon on
   the internet and the cliche of every property site; it says "real estate",
   which is the category, not the company. The monogram says HUSH SELL. It also
   earns its place: this header only appears once you have scrolled past the
   full wordmark, so the H is the brand persisting after the name leaves. */
.brand{color:var(--white);padding-bottom:0;opacity:0}
/* The wordmark, not a monogram — but a small wordmark is not a shrunk display
   one. The hero sets HUSH SELL at -.035em because at 21rem the letters crowd
   without it; at 15px that same negative tracking closes the counters and the
   name turns into a bar. So the tracking opens to +.06em while the weight stays at 900, so this is the
   wordmark itself at a fourteenth of the size rather than a lighter cousin. */
.brand__wm{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;
  /* a whole pixel, not .86rem — 13.76px guaranteed fractional glyph metrics, and
     every vertical stem landed across two pixels instead of on one. 16 also
     gives the mark room to sit in a 70px bar rather than floating in it. */
  font-size:16px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;display:block;transition:transform .45s var(--e)}
.brand:hover .brand__wm{transform:translateY(-2px)}
.brand:hover svg{transform:translateY(-2px)}

/* ---------- acts ---------- */
.act{position:relative;z-index:2}

/* hero */
/* the lockup gained a line, so the cue needs its lane reserved or the lead runs into it */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding-top:var(--nav);position:relative;z-index:2}
@media (min-width:761px){.hero{padding-bottom:clamp(5rem,9vh,7rem)}}
/* fitMark measures the real glyphs and overrides this. keeping the CSS estimate
   close to what it lands on means the hero does not jump when it does. */
.hero__mark{font-size:clamp(3.4rem,25vw,21rem);line-height:.78;letter-spacing:var(--dsp-xl);
  color:var(--white);width:100%}
.hero__mark .ln{padding-bottom:.06em}
/* ---------- the curtain ----------
   The mark does not animate. It is simply there, at full weight, from the first
   frame the real font exists. A blur on type is a filter applied to a design
   rather than a property of one — vector letterforms do not defocus, they bloom,
   which is why it reads as glow instead of lens. And motion implies effort:
   the most expensive thing a name can do is arrive already certain.
   So the mark is the one element on this page that never moves. Everything
   else — the routes, the light, the words — moves around it. */
/* The mark does not move. Everything else on this page does — the routes draw,
   the light rises, the tagline sets, the words light, the steps fill, the cards
   collapse — and in a page carrying that much motion the most powerful thing the
   name can do is hold still. It is the fixed point the rest assembles around.
   That is also the promise: the seller's situation is the unstable thing, and
   this is the one part of it that is not moving. */
.hero__mark .ln{overflow:visible}
.hero__mark .ln>i{transform:none;transition:none}

.hero__tag{opacity:0;letter-spacing:.66em;text-indent:.66em;
  transition:opacity 1.6s var(--lift) .16s,
             letter-spacing 2.4s var(--fall) .16s,
             text-indent 2.4s var(--fall) .16s}
html.ready .hero__tag{opacity:1;letter-spacing:.34em;text-indent:.34em}

/* the lead is lit a word at a time — the same thing the statements do further
   down, so the page opens in the language it goes on to speak */
.hero .lead .w{opacity:0;transition:opacity 1.15s var(--lift)}
html.ready .hero .lead .w{opacity:1}

.scrollcue{opacity:0;transition:opacity 1.2s var(--lift) 2.4s}
html.ready .scrollcue{opacity:1}

/* ---------- the count-in ----------
   An instrument readout, not a splash screen. It sits in the bottom corner on
   the wrap's own gutter, counts real load progress, and leaves. The wordmark is
   never covered and never moves, which is the whole point: the page is already
   there, this only says how much of it has arrived. */
.boot{position:fixed;z-index:60;pointer-events:none;
  /* Left, not right. On the right it sat directly on the lane where the
     traditional route's line is drawn, so the two read as one object. On the
     left it lands on the same gutter the content is set to, and belongs to the
     page's own grid instead of colliding with the thread. */
  left:calc(var(--gut) + env(safe-area-inset-left,0px));
  bottom:calc(clamp(1.3rem,2.8vw,2.1rem) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:.7rem;flex-direction:row-reverse;
  transition:opacity .55s var(--e)}
.boot__track{display:block;width:clamp(38px,5vw,58px);height:1px;
  background:rgba(255,255,255,.13)}
.boot__track i{display:block;height:1px;background:var(--accent-hi);opacity:.85;
  transform:scaleX(var(--p,0));transform-origin:left;will-change:transform}
.boot__n{font-family:var(--f-d);font-weight:600;font-variation-settings:"wdth" 112;
  font-size:clamp(.58rem,.75vw,.66rem);letter-spacing:.2em;color:var(--dim);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.boot__n b{font-weight:600}
.boot__n em{font-style:normal;opacity:.55;margin-left:.12em}
html.ready .boot{opacity:0}
html:not(.js) .boot,html.reduced .boot{display:none}

html:not(.js) .hero__tag{opacity:1;letter-spacing:.34em;text-indent:.34em}
html:not(.js) .hero .lead .w,html:not(.js) .scrollcue{opacity:1}
html.reduced .hero__tag{transition:opacity .4s linear;letter-spacing:.34em;text-indent:.34em}
html.reduced .hero .lead .w{transition:opacity .4s linear}

/* the lockup: mark, then the tagline, then the line that explains it */
.hero__tag{font-family:var(--f-d);font-weight:600;font-variation-settings:"wdth" 112;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;color:var(--ash);
  font-size:clamp(.6rem,1vw,.8rem);margin-top:clamp(1.2rem,2.6vw,2.1rem)}
.hero .lead{margin-top:clamp(1.1rem,2.2vw,1.7rem);max-width:34ch}
@media (min-width:901px){.hero{padding-right:calc(var(--gut) + 4.5rem);padding-left:calc(var(--gut) + 4.5rem)}}
/* the word "Scroll" under a line is on a thousand portfolio sites. the drawn line
   says the same thing and belongs to the routes. */
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(1.4rem,3vw,2.4rem);
  display:flex;flex-direction:column;align-items:center;z-index:3}
/* the cue's line fades out into a single accent point — the first green on the
   page, and it means here what it means everywhere else: this way */
.scrollcue::after{content:"";position:absolute;left:50%;bottom:-4px;width:3px;height:3px;
  margin-left:-1.5px;background:var(--accent-hi);opacity:.9}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--hair),rgba(18,168,90,.55));
  animation:cue 2.6s var(--e2) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.scrollcue{display:none}}


/* ---------- the spine ----------
   Every section used to be centred, which is the safe choice and reads as a
   layout rather than a decision. The page now opens and closes on the axis —
   the mark, then the ask — and everything in between hangs off one left edge
   that runs unbroken from the first statement to the last card. The thread
   travels down the opposite side, so the line and the reading column are in
   conversation instead of fighting for the middle. */
.spine{max-width:var(--spine);margin-inline:0;text-align:left}
:root{--spine:min(46rem,74%)}
@media (max-width:900px){:root{--spine:100%}}

/* what we are — scroll-scrubbed statement */
.say{font-family:var(--f-d);font-weight:600;font-variation-settings:"wdth" 112;
  font-size:clamp(1.4rem,3.7vw,3.4rem);line-height:1.1;letter-spacing:var(--dsp-m);max-width:19ch;
  text-align:left;color:var(--white)}
.say--2{font-weight:500;font-size:clamp(1.1rem,2.4vw,2.1rem);max-width:26ch;line-height:1.24;
  letter-spacing:var(--dsp-s)}
.say .w{display:inline-block;opacity:.13;transition:opacity .12s linear}
.say .w.on{opacity:1}
.say em{font-style:normal}

/* act lead-ins */
.intro{text-align:left;padding-block:clamp(5rem,17vh,12rem)}
.intro .kick{margin-bottom:clamp(.9rem,2vw,1.4rem)}
.intro__h{font-size:clamp(1.7rem,5vw,4.4rem);line-height:.9;color:var(--white)}
.contact__h{font-size:clamp(2.1rem,7vw,6.4rem);line-height:.86;color:var(--white)}
.intro .lead{margin:clamp(1.4rem,3vw,2.2rem) 0 0;max-width:32ch}

/* situations reel */
.reel{position:relative}
.reel__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding-inline:var(--gut);padding-top:var(--nav)}
/* capping the measure keeps the long titles clear of the routes on the right */
.reel__items{position:relative;width:min(46rem,100%);align-self:flex-start}
@media (min-width:901px){.reel__stage{padding-inline:var(--gut)}}
.reel__stage{max-width:var(--maxw);margin-inline:auto;width:100%}
.reel__i{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;text-align:left;will-change:transform,opacity}
.num{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;
  font-size:clamp(1.9rem,5vw,4.4rem);line-height:.8;letter-spacing:var(--dsp-l);margin-bottom:clamp(.7rem,1.8vw,1.4rem);
  color:var(--accent-hi);opacity:1}
.reel__i h3{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;
  text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);line-height:.9;letter-spacing:var(--dsp-l);
  text-wrap:balance}
/* the three families: a name, a line saying what it means, then what it covers */
.reel .num{font-size:clamp(1.15rem,2vw,1.7rem);margin-bottom:clamp(.5rem,1.2vw,.9rem);letter-spacing:.06em}
.reel__lede{color:var(--ash);font-size:clamp(1.05rem,1.38vw,1.27rem);max-width:40ch;
  margin-top:clamp(.8rem,1.6vw,1.15rem);text-wrap:balance}
.reel__list{list-style:none;margin-top:clamp(1.8rem,3.4vw,2.8rem);width:100%;
  max-width:100%;text-align:left;border-top:1px solid var(--edge2)}
.reel__list li{padding:clamp(.62rem,1.2vw,.9rem) 0;border-bottom:1px solid var(--edge2);
  display:grid;gap:.14rem}
.reel__list b{font-family:var(--f-d);font-weight:600;font-variation-settings:"wdth" 112;
  font-size:clamp(.86rem,1.05vw,1rem);letter-spacing:.11em;text-transform:uppercase;color:var(--white)}
.reel__list span{font-size:clamp(.9rem,1.05vw,1.01rem);line-height:1.55;color:var(--dim)}
@media (max-width:560px){.reel__list{max-width:none}}


/* how — three beats */
/* ---------- the paper chapter: the page turns over ---------- */
/* ---------- the process chapter ----------
   This used to invert to paper. It does not any more: the ground is the same
   void as the rest of the page, so the chapter has to be made by something
   other than a colour change. Two things do that work.

   THE STAGE. A slow radial rises behind the block as it enters while the
   ambient light elsewhere pulls back — the surroundings darken as this
   brightens. The lights go down and the comparison is the only thing lit.
   Nothing moves; the exposure changes.

   THE FRAME. Each column gets a rule that draws down its left edge as the
   section arrives, so the comparison is built in front of you rather than
   simply being there. */
.act--paper{background:transparent;color:var(--white);position:relative;isolation:isolate;
  padding-block:clamp(6rem,17vh,12rem) clamp(6rem,18vh,13rem)}
.act--paper .wrap{text-align:left;position:relative;z-index:1}
.stage{position:absolute;inset:-6% -14%;z-index:0;pointer-events:none;
  background:radial-gradient(56% 44% at 46% 48%,
    rgba(163,178,170,.155) 0%, rgba(132,150,140,.075) 36%,
    rgba(96,116,106,.028) 62%, transparent 78%);
  opacity:0;transition:opacity 1.6s var(--e)}
.act--paper.is-on .stage{opacity:1}
/* the page's own atmosphere steps back so the stage reads as the only light */
html.staged .amb{opacity:.35;transition:opacity 1.6s var(--e)}
html.staged .vig{opacity:.55;transition:opacity 1.6s var(--e)}
html:not(.js) .stage{display:none}
.act--paper .kick{color:var(--dim)}
.act--paper .intro__h{color:var(--white)}
.act--paper .stack__c{background:#0E100F;border-color:rgba(255,255,255,.10);
  box-shadow:0 -1px 0 rgba(255,255,255,.045), 0 -18px 40px rgba(0,0,0,.72),
             0 -2px 8px rgba(0,0,0,.5)}
.act--paper .stack__c h3{color:var(--white)}
.act--paper .stack__c p{color:var(--ash)}
.act--paper .stack__c b{color:var(--accent-hi)}
.act--paper .stack__c::after{background:linear-gradient(90deg,transparent,#12A85A,transparent);opacity:.5}
/* the card is an object sitting on the spine — narrow enough that its own
   inset still reads as part of the same column, not a second margin */
.stack{display:block;max-width:min(100%,68rem)}
.stack__c{position:sticky;top:calc(var(--nav) + clamp(1.4rem,5vh,3.2rem) + var(--i,0)*4.6rem);
  background:#0D0D0C;border:1px solid rgba(255,255,255,.09);
  padding:clamp(1.9rem,3.6vw,3rem) clamp(1.4rem,2.6vw,2.4rem);
  margin-bottom:clamp(4rem,15vh,11rem);min-height:clamp(12rem,24vh,17rem);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem;
  box-shadow:0 -1px 0 rgba(0,0,0,.7),0 -30px 60px rgba(0,0,0,.55);overflow:hidden}
.stack__c:last-child{margin-bottom:0}
.stack__c::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-hi),transparent);opacity:.5}
.stack__c b{font-family:var(--f-d);font-weight:var(--ord-w);font-variation-settings:var(--lbl-wdth);
  font-size:.62rem;letter-spacing:var(--ord-track);
  color:var(--accent-hi);margin-bottom:.9rem}
.stack__c h3{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;
  text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2.3rem);line-height:.95;
  letter-spacing:var(--dsp-s);margin-bottom:.9rem;color:var(--white)}
.stack__c p{color:var(--ash);font-size:clamp(1.01rem,1.21vw,1.12rem);line-height:1.6;max-width:40ch}

/* ---------- the two routes, in type ----------
   The canvas traces these down the whole page; this is where they are stated
   plainly, so the argument survives without JavaScript, on a phone, and for
   anyone using a screen reader. Both columns are set identically. The only
   difference between them is how far down the page they go — which is the
   entire point, and why nothing here editorialises. */
.routes{display:grid;grid-template-columns:1fr 1fr;--gap:clamp(1.4rem,5vw,4.5rem);gap:var(--gap);
  margin-top:clamp(2.6rem,6vw,4.4rem);align-items:stretch;max-width:52rem}
.routes__col{display:flex;flex-direction:column;min-width:0;position:relative}
/* THE FRAME. A rule draws down the left edge of each column as the section
   arrives — the comparison gets built in front of you. The short route's rule
   is the accent and stops where that route stops; the traditional one runs the
   full height, so the two rules alone already state the argument. */
.routes__col::before{content:"";position:absolute;left:calc(var(--gap) / -2.6);top:0;bottom:0;
  width:1px;background:rgba(255,255,255,.13);
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--fall) .12s}
.routes__col--ours::before{background:rgba(18,168,90,.36);transition-delay:.28s}
.act--paper.is-on .routes__col::before{transform:scaleY(1)}
html:not(.js) .routes__col::before,html.reduced .routes__col::before{transform:scaleY(1)}
@media (max-width:560px){.routes__col::before{display:none}}
.routes__h{font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  text-transform:uppercase;letter-spacing:var(--lbl-track);font-size:clamp(.58rem,1vw,.68rem);
  color:var(--dim);padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.19)}
.routes__col--ours .routes__h{color:var(--accent-hi);border-bottom-color:rgba(18,168,90,.5)}
.routes__l{margin-top:.15rem}
/* each step ARRIVES rather than fading up. a 7px lift on the same even curve the
   rest of the page uses, so the column reads as being travelled, not revealed. */
.routes__l li{display:flex;align-items:baseline;gap:clamp(.5rem,1.1vw,.85rem);
  padding:clamp(.5rem,1.1vw,.72rem) 0;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:.16;transform:translateY(7px);
  transition:opacity .7s var(--lift),transform .7s var(--lift)}
.routes__l li.lit{opacity:1;transform:none}
html:not(.js) .routes__l li{opacity:1;transform:none}
.routes__l i{font-family:var(--f-d);font-weight:var(--ord-w);font-variation-settings:var(--lbl-wdth);
  font-style:normal;font-size:clamp(.52rem,.8vw,.6rem);letter-spacing:var(--ord-track);color:var(--dim);flex:none;   /* 5.09:1 on the void */
  min-width:1.4em}
.routes__l span{font-family:var(--f-d);font-weight:600;font-variation-settings:"wdth" 112;
  text-transform:uppercase;letter-spacing:.11em;font-size:clamp(.68rem,1.15vw,.85rem);
  color:var(--white);line-height:1.25}
.routes__l--ours i{color:var(--accent-hi)}
/* where the short route stops, the page keeps going. the gap is the argument,
   so it gets drawn rather than left as blank space.

   THE CUT. The moment the short column finishes, a single line is drawn at that
   height and carried LEFT across both columns — accent under the short route,
   ink under the traditional one. The remaining steps of the traditional sale are
   then, literally, below the line. Width maths: the columns are equal 1fr, so
   100% of this column is the width of the other one; the gradient hands over at
   colw + gap, which is 50% of the full span plus half a gap. */
.routes__cut{flex:none;height:1px;margin-top:-1px;
  width:calc(200% + var(--gap));margin-left:calc(-100% - var(--gap));
  background:linear-gradient(90deg,rgba(255,255,255,.26) 0 calc(50% + var(--gap)/2),
    rgba(18,168,90,.7) calc(50% + var(--gap)/2) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .95s var(--fall)}
.routes__l--ours.done~.routes__cut{transform:scaleX(1)}
html:not(.js) .routes__cut{transform:none}

/* THE MEASURE. The empty space under the short route is the point of the whole
   section, so it is dimensioned like a drawing: a hairline that grows down to
   the foot of the longer column, and one line of type against it. flex:1 makes
   it take exactly the leftover height, so the rule always lands on the last
   traditional step whatever the type does. Count is 9 - 4. */
.routes__gap{flex:1;position:relative;padding-left:0;
  padding-top:clamp(.9rem,2vw,1.3rem);font-size:clamp(.73rem,1.05vw,.84rem);
  line-height:1.5;color:var(--dim);opacity:0;transition:opacity .8s var(--e) .4s}
.routes__l--ours.done~.routes__gap{opacity:1}
html:not(.js) .routes__gap{opacity:1}
.routes__more{margin-top:clamp(3.2rem,8vw,5.5rem);color:var(--dim)}
.act--paper .routes__more+.stack{margin-top:clamp(1.4rem,3vw,2.2rem)}

/* contact */
.contact{display:flex;flex-direction:column;justify-content:center;text-align:center;
  position:relative;z-index:2;padding-block:clamp(5rem,16vh,12rem)}
/* the contact moment is the type itself */
.contact__link{display:inline-flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,3.5vw,2.6rem);
  color:var(--white)}
.contact__h{transition:transform .7s var(--e)}
.contact__link:hover .contact__h{transform:translateY(-4px)}
.contact__cue{position:relative;display:inline-flex;align-items:center;gap:clamp(.7rem,1.2vw,1.1rem);
  font-family:var(--f-d);font-weight:700;font-variation-settings:"wdth" 112;
  font-size:clamp(1rem,1.7vw,1.6rem);letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;color:var(--ash);padding-bottom:clamp(.6rem,1vw,.85rem);
  transition:color .5s var(--e)}
.contact__cue svg{width:clamp(24px,2.6vw,38px);height:auto;flex:none;overflow:visible;
  transition:transform .6s var(--e),color .5s var(--e)}
.contact__cue::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-hi);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e)}
.contact__link:hover .contact__cue{color:var(--white)}
.contact__link:hover .contact__cue svg{transform:translateY(-3px);color:var(--accent-hi)}
.contact__link:hover .contact__cue::after{transform:scaleX(1)}
html.reduced .contact__h,html.reduced .contact__cue svg{transition:none}
/* what the link is about to do, said once, quietly */
.contact__note{margin-top:clamp(2rem,4.5vw,3.2rem);font-size:.9rem;line-height:1.75;color:var(--dim);
  max-width:34ch;margin-inline:auto;text-wrap:balance}
.contact__copy{display:block;margin:.5rem auto 0;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  font-size:.6rem;letter-spacing:var(--lbl-track);text-transform:uppercase;
  color:var(--ash);border-bottom:1px solid var(--edge);padding-bottom:.2rem;
  transition:color .3s var(--e),border-color .3s var(--e)}
.contact__copy:hover{color:var(--white);border-bottom-color:var(--accent-hi)}
.contact__copy[data-done]{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}
html.nocur .contact__copy{cursor:none}

/* footer */
/* No rule here. The footer's own rule lives on .ftr__in, above the notice —
   having one on both put two hairlines 200px apart with nothing between them,
   which is what made the notice look boxed in. */
.ftr{position:relative;z-index:2;padding-block:clamp(2.4rem,5vw,3.6rem) 2rem}
/* the notice sits centred under a single rule, with the accent tick centred on it */
.ftr__in{display:flex;align-items:center;justify-content:center;
  padding-top:1.35rem;border-top:1px solid var(--edge);position:relative}
.ftr__in::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:-1px;width:26px;height:1px;background:var(--accent-hi);opacity:.85}

/* One treatment for the whole footer. The notice and the links are set
   identically — same face, weight, size, tracking — and simply stacked, so the
   block reads as one quiet line of small caps rather than a row of parts with a
   divider holding them together. */
.ftr__c{display:block;font-family:var(--f-d);font-weight:var(--lbl-w);
  font-variation-settings:var(--lbl-wdth);text-transform:uppercase;
  font-size:clamp(.6rem,.75vw,.68rem);letter-spacing:var(--lbl-track);color:var(--dim)}
.ftr__c b{font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);letter-spacing:var(--lbl-track);
  font-size:inherit;color:inherit}

/* reveals */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .95s var(--e),transform .95s var(--e);
  transition-delay:var(--d,0s)}
[data-rv].is-in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.09em}
.ln>i{display:block;font-style:normal;transform:translateY(108%);transition:transform 1.1s var(--e);
  transition-delay:var(--d,0s)}
.is-in .ln>i{transform:none}
html.reduced [data-rv],html.reduced .ln>i{opacity:1!important;transform:none!important;transition:none!important}
html.reduced .say .w{opacity:1!important}
html:not(.js) [data-rv]{opacity:1;transform:none}
html:not(.js) #thread{display:none}
html:not(.js) .say .w{opacity:1}
html:not(.js) .reel__i{position:static;margin-bottom:2.5rem}
html:not(.js) .reel__stage{position:static;height:auto;display:block;padding-block:4rem}
html:not(.js) .reel__items{height:auto}

/* no loading screen — the page arrives live */
.skip{position:absolute;left:-9999px;top:0;z-index:70;background:var(--hair);color:var(--void);
  padding:.75rem 1.1rem;font-family:var(--f-d);font-weight:var(--lbl-w);
  font-variation-settings:var(--lbl-wdth);font-size:.68rem;letter-spacing:var(--lbl-track);
  text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}


/* ============================================================
   Legal documents — /disclosures /privacy /terms
   Printed on the same paper as the process chapter.
   ============================================================ */
/* The legal pages sit on the same void as everything else now, so the site has
   one ground from top to bottom. */
body.doc{background:var(--void);color:var(--white)}
.doc .dochdr{position:sticky;top:0;z-index:10;isolation:isolate;
  border-bottom:1px solid rgba(255,255,255,.08)}
.doc .dochdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,5,5,.78);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.doc .dochdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--nav)}
/* one link, one label. the wordmark lives in the footer copyright, once. */
.doc .docwhich{font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  font-size:.6rem;letter-spacing:var(--lbl-track);
  text-transform:uppercase;color:var(--dim)}
/* this is the brand now, not a text link, so it sits in ink and loses the
   underline — the same lift on hover the home page uses. The .brand__wm rule
   carries the type; only the colour changes on this ground. */
.doc .docback{display:inline-flex;align-items:center;color:var(--white);
  transition:opacity .35s var(--e)}
.doc .docback:hover{opacity:.62}
.doc main{padding-block:clamp(3rem,9vh,6rem) clamp(4rem,12vh,8rem)}
.doc .docwrap{max-width:70ch;margin-inline:auto;padding-inline:var(--gut)}
.doc .dockick{font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  font-size:.6rem;letter-spacing:var(--lbl-track);
  text-transform:uppercase;color:var(--dim)}
.doc h1{font-family:var(--f-d);font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:.9;letter-spacing:var(--dsp-m);margin:1rem 0 .9rem}
.doc .docdate{font-size:.88rem;color:var(--dim)}
.doc .docrule{height:1px;background:rgba(255,255,255,.13);border:0;margin:clamp(2rem,4vw,3rem) 0}
.doc h2{font-family:var(--f-d);font-weight:800;font-variation-settings:"wdth" 112;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.02em;margin:clamp(2rem,4vw,2.8rem) 0 .8rem;
  display:flex;align-items:baseline;gap:.8rem}
.doc h2 i{font-family:var(--f-d);font-weight:var(--ord-w);font-variation-settings:var(--lbl-wdth);
  font-style:normal;font-size:.6rem;letter-spacing:var(--ord-track);color:var(--accent-hi);flex:none}
.doc p{color:var(--ash);font-size:1.08rem;line-height:1.72;margin-bottom:1.05rem;max-width:60ch}
.doc ul{margin:0 0 1rem;padding:0}
.doc li{display:flex;gap:.8rem;color:var(--ash);font-size:1.08rem;line-height:1.72;margin-bottom:.55rem}
.doc li::before{content:"—";color:var(--accent-hi);flex:none}
.doc strong{color:var(--white);font-weight:500}
.doc a.inline{color:var(--accent-hi);border-bottom:1px solid rgba(18,168,90,.45)}
.doc a.inline:hover{border-bottom-color:var(--accent-hi)}
/* same single ruled line as the home page footer */
/* the end of a legal page uses the page gutter, not the reading measure, so the
   rail and the notice line up with the home page */
.doc .docend{margin-top:clamp(3.5rem,8vw,6rem)}
.doc .docfoot{border-top:1px solid rgba(255,255,255,.12);margin-top:0;
  padding-top:1.35rem;display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center}
.doc .docfoot::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:-1px;width:26px;height:1px;background:var(--accent-hi);opacity:.85}
/* the document column is a reading measure, not the full page, so it runs out
   of room for one line sooner than the home page does */
@media (max-width:900px){
  .doc .docfoot{flex-direction:column;justify-content:center;text-align:center;gap:1rem}
  .doc .docfoot::before{left:50%;transform:translateX(-50%)}
}
/* Same small-caps treatment as the home-page footer, so the legal block reads
   identically wherever it appears. Paper ink instead of ash. */
.doc .docfoot p,.doc .docfoot a{font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  text-transform:uppercase;font-size:clamp(.6rem,.75vw,.68rem);letter-spacing:var(--lbl-track);color:var(--dim)}
.doc .docfoot nav{display:flex;gap:.7rem clamp(1.5rem,2.6vw,2.4rem);flex-wrap:wrap;justify-content:center}
.doc .docfoot a{padding-bottom:.25rem;border-bottom:1px solid transparent;transition:color .3s var(--e),border-color .3s var(--e)}
.doc .docfoot a:hover{color:var(--white);border-bottom-color:var(--accent-hi)}

/* ---------- what you don't deal with — struck through as you arrive ---------- */
.without{text-align:left;padding-block:clamp(4.5rem,15vh,11rem)}
.without .kick{margin-bottom:clamp(2rem,5vw,3.4rem)}
/* one left edge means the strike-throughs start on the same axis */
.strike{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.55rem,1.4vw,1.1rem)}
.strike li{font-family:var(--f-d);font-weight:800;font-variation-settings:"wdth" 112;
  text-transform:uppercase;font-size:clamp(.98rem,2.9vw,2.5rem);line-height:1.06;letter-spacing:var(--dsp-s);
  max-width:100%}
.strike span{position:relative;display:inline-block;color:var(--white);
  transition:color .7s var(--e) .3s}
.strike span::after{content:"";position:absolute;left:-2.5%;right:-2.5%;top:53%;height:2px;
  background:var(--accent-hi);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--e)}
/* struck is its own state, set by scroll position — not by the reveal.
   The item arrives bright, is legible on its own, and only then gets crossed. */
.strike li.struck span{color:rgba(255,255,255,.68)}
.strike li.struck span::after{transform:scaleX(1)}
.without__end{margin:clamp(2.2rem,5vw,3.4rem) 0 0;max-width:38ch}
html.reduced .strike span,html.reduced .strike span::after{transition:none}
html.reduced .strike li{}

html:not(.js) .strike span::after{transform:scaleX(1)}
html:not(.js) .strike span{color:rgba(255,255,255,.68)}

/* ---------- touch targets ----------
   The standalone links on this site are small-caps set at 10-11px, so their
   boxes come out around 20px tall — under the 24px minimum a finger needs
   (WCAG 2.5.8) and well under Apple's 44px guidance. Rather than pad them and
   push the layout around, each gets an invisible ::before that extends the hit
   area vertically. Nothing moves; the tap just gets easier to land.
   Inline links inside a sentence are deliberately left alone — the spec exempts
   them, and enlarging them would have them stealing taps from the lines above
   and below. */
.rail a,.contact__copy,.doc .docfoot a,.doc .docback,.brand{position:relative}
/* keyed on any-pointer:coarse, so a hybrid laptop with both a trackpad and a
   touchscreen still gets the finger-sized target; a mouse-only machine does not,
   where an oversized invisible box would only trigger hover states early. */
@media (any-pointer:coarse){
  .rail a::before,.contact__copy::before,.doc .docfoot a::before,
  .doc .docback::before,.brand::before{content:"";position:absolute;
    left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
}

/* ---------- the legal rail ----------
   First attempt put these in a fixed bottom-left corner. That does not work on
   this page: the content is left-aligned to the same gutter edge to edge, so
   fixed chrome there lands on top of the type. There is no empty corner on this
   layout, so the rail lives in the flow instead — but as its own block with air
   around it, not three links crushed onto one line under a rule, which is what
   made the old footer feel squeezed.

   Each link carries a hairline that fills as you point at it. The fill is
   anticipation, not a gate: the link opens the moment you click, and the rule is
   only showing you what you are about to open. Making someone hold a button to
   reach a privacy policy would be hostile; making it feel considered is free. */
.rail{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(.7rem,1.4vw,1rem);margin-bottom:clamp(2.6rem,6vw,4rem)}
.rail a{position:relative;display:block;padding-bottom:.4rem;min-width:8.5rem;
  font-family:var(--f-d);font-weight:var(--lbl-w);font-variation-settings:var(--lbl-wdth);
  text-transform:uppercase;font-size:clamp(.6rem,.75vw,.68rem);letter-spacing:var(--lbl-track);
  color:var(--dim);transition:color .4s var(--e)}
.rail a:hover,.rail a:focus-visible{color:var(--white)}
.rail a i{position:absolute;left:0;right:0;bottom:0;height:1px;display:block;
  background:rgba(255,255,255,.13);overflow:hidden}
.rail a i::after{content:"";position:absolute;inset:0;background:var(--accent-hi);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.rail a:hover i::after,.rail a:focus-visible i::after{transform:scaleX(1)}
@media (max-width:560px){.rail a{min-width:7.5rem}}