/* ============================================================
   EDGE — statement build
   bone / true black / safety orange · Archivo + Spline Sans Mono

   ORANGE DISCIPLINE — orange marks facts, never decoration:
     · proof numbers (.stats dd)
     · the claim in the headline (h1 em)
     · what we install (.rows h3)
     · the result inside a case-study beat (.beats b)
     · the turn in the pivot line (.pivot em, .principle em)
     · the audit price (.price.sig) and signal labels (.label.sig)
     · buttons get a 3px underline — never a fill
   Everything else is black, bone, or a real screenshot.
   ============================================================ */

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

:root{
  --bone:#F2F0EB;
  --bone-2:#E9E6DF;
  --ink:#000;
  --ink-72:rgba(0,0,0,.72);
  --ink-58:rgba(0,0,0,.58);
  --ink-40:rgba(0,0,0,.40);
  --rule:rgba(0,0,0,.16);
  --rule-soft:rgba(0,0,0,.11);

  --on-dark:#F2F0EB;
  --on-dark-62:rgba(242,240,235,.62);
  --on-dark-42:rgba(242,240,235,.42);
  --rule-dark:rgba(242,240,235,.22);
  --rule-dark-soft:rgba(242,240,235,.13);

  --sig:#FF3B00;

  --shell:1200px;
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,monospace;
}

html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--display);
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}

::selection{background:var(--sig);color:#fff}

:focus-visible{outline:3px solid var(--sig);outline-offset:3px}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-200%);
  background:var(--ink);color:var(--bone);
  padding:.7rem 1.1rem;text-decoration:none;
  font:800 .72rem var(--display);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:3px solid var(--sig);
}
.skip:focus{transform:none}

.shell{width:min(var(--shell),calc(100% - 2rem));margin-inline:auto}
@media(min-width:768px){.shell{width:min(var(--shell),calc(100% - 4rem))}}

section{padding:clamp(3.25rem,6.4vw,5.25rem) 0;position:relative}
.dark{background:var(--ink);color:var(--on-dark)}

/* ---------------- type ---------------- */
.label{
  font:500 .625rem var(--mono);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-40);
}
.dark .label{color:var(--on-dark-42)}
.label.sig,.dark .label.sig{color:var(--sig)}

h1{
  font-weight:900;
  font-size:clamp(2.35rem,7.4vw,5.1rem);
  line-height:.93;letter-spacing:-.048em;text-transform:uppercase;
  max-width:15ch;
}
/* the payoff has to land as one unit — never let it break across lines */
h1 em{font-style:normal;color:var(--sig);white-space:nowrap}

h2{
  font-weight:900;
  font-size:clamp(1.75rem,4.4vw,3.05rem);
  line-height:.99;letter-spacing:-.04em;text-transform:uppercase;
  max-width:18ch;
  margin-top:.55rem;
}

/* Same device as the hero headline: a stacked h2 sets its own line breaks
   rather than leaving them to whatever width the viewport happens to be. */
.h2-stack span{display:block}

h3{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;line-height:1.25}

.lede{
  margin-top:1.15rem;
  max-width:52ch;
  font-size:clamp(.95rem,1.5vw,1.06rem);
  line-height:1.55;font-weight:500;
  color:var(--ink-72);
}
.dark .lede{color:var(--on-dark-62)}
.lede-sm{font-size:.96rem;max-width:56ch}

/* Hero headline set as a deliberate stack — one word per line — rather than
   left to wrap. Four short lines of Archivo 900 read as a statement; the same
   words reflowing at the browser's convenience read as a sentence. */
.h1-stack .h1-line{display:block}
.h1-stack .hl{position:relative;display:inline-block}

/* ---------- the marker sweep ----------
   A highlighter passes down the four lines, one lit at a time, and rests on
   the payoff before clearing and going again.

   The white text is a second copy of the line laid exactly over the first and
   revealed by an animating clip-path, so the letters turn white AS the marker
   crosses them rather than all flipping at some arbitrary midpoint. Flipping
   `color` on a timer is the lazy version of this and it looks it — you get a
   frame of white text on a bone background.

   The overlay is inset by a hair and padded back by the same amount, so its
   text lands pixel-identical to the text underneath while the orange block
   still bleeds past the glyphs the way a real marker would. Overshooting with
   box-shadow instead does not work: clip-path clips to the border box and
   would cut the bleed straight off. */
.h1-stack .hl::after{
  content:attr(data-text);
  position:absolute;
  top:-.05em;left:-.06em;
  width:calc(100% + .12em);
  height:calc(100% + .1em);
  padding:.05em .06em;
  background:var(--sig);
  color:#fff;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
}

/* Cycle 7s. Each line owns a 1380ms slot: 340 in, 560 held, 260 out, then a
   220ms gap before the next one starts.
   That gap is not padding, it is the fix for a real problem. Butted directly
   together the lines never technically overlapped, but the out-wipe is eased
   IN — slow, then whipping away — so the previous word still looked lit at
   the instant the next one began, and the eye read the two as simultaneous.
   A fifth of a second of empty is enough to separate them completely. */
@media (prefers-reduced-motion:no-preference){
  .h1-stack .hl::after{
    animation:hlSweep 7s linear infinite;
  }
  .h1-stack .h1-line:nth-child(2) .hl::after{animation-delay:1.38s}
  .h1-stack .h1-line:nth-child(3) .hl::after{animation-delay:2.76s}
  /* the payoff gets its own curve so it can hold ~1.7s — the beat that lets
     the line land before the loop restarts */
  .h1-stack .h1-line:nth-child(4) .hl::after{animation-name:hlSweepHold}
}

/* Eased, not linear. In: quick off the mark then settling, the way a hand
   moves. Out: the reverse, whipping away. A constant-speed wipe reads as
   machinery. */
@keyframes hlSweep{
  0%      {clip-path:inset(0 100% 0 0);   animation-timing-function:cubic-bezier(.16,.84,.44,1)}
  4.857%  {clip-path:inset(0 0 0 0);      animation-timing-function:linear}
  12.857% {clip-path:inset(0 0 0 0);      animation-timing-function:cubic-bezier(.55,0,.9,.35)}
  16.571% {clip-path:inset(0 0 0 100%)}
  100%    {clip-path:inset(0 0 0 100%)}
}

@keyframes hlSweepHold{
  0%      {clip-path:inset(0 100% 0 0)}
  59.143% {clip-path:inset(0 100% 0 0);   animation-timing-function:cubic-bezier(.16,.84,.44,1)}
  64%     {clip-path:inset(0 0 0 0);      animation-timing-function:linear}
  88.286% {clip-path:inset(0 0 0 0);      animation-timing-function:cubic-bezier(.55,0,.9,.35)}
  92%     {clip-path:inset(0 0 0 100%)}
  100%    {clip-path:inset(0 0 0 100%)}
}

/* The deliverables line. Not body copy — it is the list of things you buy,
   so it carries weight and full ink. Emphasis is black rather than orange:
   the headline and the stat row already spend the orange in this viewport,
   and a third orange element would flatten all three. */
.lede-hero{
  margin-top:1.25rem;
  font-weight:700;
  font-size:clamp(1.02rem,1.8vw,1.26rem);
  line-height:1.45;letter-spacing:-.015em;
  color:var(--ink);
  max-width:34ch;
}
.lede-kick{
  margin-top:.9rem;max-width:48ch;
  font-weight:800;
  font-size:clamp(.95rem,1.5vw,1.08rem);
  line-height:1.4;letter-spacing:-.02em;
  color:var(--ink);
}
/* same rule as the h1 payoff — a three-word hook that breaks in half stops
   being a hook */
.lede-kick em{font-style:normal;color:var(--sig);white-space:nowrap}

.micro{
  margin-top:.85rem;
  font:500 .78rem var(--display);
  color:var(--ink-40);
}
.dark .micro{color:var(--on-dark-42)}
.micro a{color:inherit}

/* ---------------- buttons — treatment C ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bone);
  border:0;border-bottom:3px solid var(--sig);
  border-radius:0;
  padding:.86rem 1.35rem;
  font:800 .72rem var(--display);
  letter-spacing:.055em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.btn:hover{background:#1a1a1a}
.dark .btn{background:var(--bone);color:var(--ink)}
.dark .btn:hover{background:#fff}
.btn-sm{padding:.6rem .95rem;font-size:.66rem}
.btn[disabled]{opacity:.5;cursor:progress}

.btn-quiet{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-bottom-width:3px;border-bottom-color:var(--sig);
}
.btn-quiet:hover{background:rgba(0,0,0,.06)}
.dark .btn-quiet{background:transparent;color:var(--on-dark);border-color:var(--rule-dark);border-bottom-color:var(--sig)}
.dark .btn-quiet:hover{background:rgba(242,240,235,.08)}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--bone);
  border-bottom:1px solid var(--rule);
}
.hdr.scrolled{border-bottom-color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.wm{
  font-weight:900;font-size:1.18rem;letter-spacing:-.05em;text-transform:uppercase;
  text-decoration:none;
}
.navlinks{display:flex;align-items:center;gap:1.35rem}
.navlinks>a:not(.btn){
  font:600 .7rem var(--display);
  letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.navlinks>a:not(.btn):hover{border-bottom-color:var(--sig)}

.burger{
  display:none;
  width:40px;height:34px;
  background:transparent;border:1.5px solid var(--ink);
  padding:0 8px;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0}

@media(max-width:840px){
  .burger{display:block}
  .navlinks{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bone);
    border-bottom:1px solid var(--ink);
    padding:.5rem 1rem 1.1rem;
    display:none;
  }
  .navlinks.open{display:flex}
  .navlinks>a:not(.btn){padding:.85rem 0;border-bottom:1px solid var(--rule-soft);font-size:.78rem}
  .navlinks>a:not(.btn):hover{border-bottom-color:var(--rule-soft)}
  .navlinks .btn{margin-top:.8rem;justify-content:center}
}

/* ---------------- hero ---------------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem)}
.eyebrow{
  display:block;
  padding-bottom:.6rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--rule);
}

.teardown-form{
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-top:1.5rem;max-width:540px;
}
.teardown-form input{
  flex:1 1 220px;min-width:0;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;
  padding:.82rem .95rem;
  font-family:var(--mono);font-size:.88rem;font-weight:500;
}
.teardown-form input::placeholder{color:var(--ink-40)}
.dark .teardown-form input{color:var(--on-dark);border-color:var(--rule-dark)}
.dark .teardown-form input::placeholder{color:var(--on-dark-42)}
.teardown-form input[aria-invalid="true"]{border-color:var(--sig)}

.stats{
  display:flex;flex-wrap:wrap;
  margin-top:2.1rem;
  border-top:1.5px solid var(--ink);
  padding-top:1.05rem;
}
.stats>div{
  display:flex;flex-direction:column-reverse;
  flex:1 1 140px;
  padding:0 .85rem;
  border-left:1px solid var(--rule);
}
.stats>div:first-child{border-left:0;padding-left:0}
.stats dd{
  font-weight:900;font-size:clamp(1.5rem,3.4vw,1.85rem);
  line-height:1;letter-spacing:-.045em;
  color:var(--sig);
}
/* Bold, and darker with it — 700 weight at 40% ink still reads as faint
   caption rather than a claim, so the two have to move together. */
.stats dt{
  margin-top:.4rem;
  font:700 .58rem var(--mono);
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-58);
}
@media(max-width:560px){
  .stats>div{flex:1 1 46%;padding:.7rem .6rem;border-left:0;border-top:1px solid var(--rule-soft)}
  .stats>div:nth-child(-n+2){border-top:0}
  .stats>div:first-child{padding-left:.6rem}

  /* A three-up strip must not reflow to 2 + 1 — the orphan reads as a
     mistake. Three short values fit across a phone, so keep the row intact
     and just trim the type. */
  .stats-3>div{flex:1 1 0;min-width:0;padding:0 .5rem;border-top:0;border-left:1px solid var(--rule)}
  .stats-3>div:first-child{padding-left:0;border-left:0}
  .stats-3 dd{font-size:1.32rem}
  .stats-3 dt{font-size:.52rem;letter-spacing:.1em}
}

/* ---------------- services — the centrepiece ----------------
   The offer, not the portfolio. Pillar names carry the orange because the
   name of the thing you are buying is the most important word on the page. */
.pillars{border-top:1.5px solid var(--ink)}

/* ---------------- the brag block ----------------
   Where the section earns the right to list services. Every figure here is
   published and attributed in the cell beneath it — a claimed percentage with
   no source next to a teardown that shows its own method and a ±35% band
   would poison both. */
.brag{margin-top:2.1rem;padding-top:1.5rem;border-top:1.5px solid var(--ink)}
.brag-lead{max-width:64ch;font-size:1rem;line-height:1.6;color:var(--ink-72)}
.brag-lead b{color:var(--ink);font-weight:800}


/* The figures sit inside the sentence rather than being lifted out into a
   label/value grid — the copy is the client's, word for word, so the
   typography carries the emphasis instead of the layout rewriting it. */
.brag-figures{
  margin-top:1.4rem;
  max-width:52ch;
  font-size:clamp(1rem,1.9vw,1.16rem);
  line-height:1.55;font-weight:600;
  color:var(--ink-72);
}
.brag-figures em{
  font-style:normal;font-weight:900;
  font-size:1.5em;line-height:1;
  letter-spacing:-.045em;
  color:var(--sig);
}
/* ---------------- employees vs Edge ----------------
   An earlier version of this drew 268 on its own and deliberately refused a
   denominator. That was the mistake: a number with nothing on the other side
   of it cannot compare anything, which is exactly how it read. So the baseline
   is now stated out loud (336 hrs — a two-person front desk) and the two
   colours each mean one thing: ORANGE is work Edge takes, BLACK is work the
   team is left holding.

   Both bars descend at the SAME rate — see the linear flag in edge.js. The
   argument is that Edge finishes and the employee bar doesn't, so a rate that
   decelerates would quietly contradict the thing being claimed. The empty
   space below where Edge stopped is the 268 hours, and it opens in real time
   as the black bar keeps travelling past it. */
.race{margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.race-top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.35rem 1rem;margin-bottom:1rem;
}
.race-top .label{font-weight:700;color:var(--ink)}
.race-base{
  font:500 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);
}
.race-base b{color:var(--ink);font-weight:700}

/* nowrap: a before/after that stacks has stopped being a comparison */
.race-lanes{display:flex;gap:2.4rem;flex-wrap:nowrap;max-width:520px}
.race-lane{flex:1 1 0;min-width:0}
.race-cap{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  font:700 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.race-cap .sw{width:.8rem;height:.8rem;flex:none}
.lane-team .race-cap .sw{background:var(--ink)}
.lane-edge .race-cap .sw{background:var(--sig)}

.race-track{
  position:relative;height:300px;overflow:hidden;
  border:1.5px solid var(--ink);background:var(--bone);
}
.race-fill{position:absolute;left:0;right:0;top:0;height:0}
.fill-team{background:var(--ink)}
.fill-edge{background:var(--sig)}

/* the space Edge never needed */
.race-gap{
  position:absolute;left:0;right:0;height:0;
  border-top:2px dashed var(--sig);
  display:flex;align-items:center;justify-content:center;padding:0 .4rem;
}
.race-gap b{
  font:800 .66rem var(--mono);letter-spacing:.06em;line-height:1.45;
  color:var(--sig);text-align:center;
  opacity:0;transition:opacity .3s ease;
}
.race-gap b.in{opacity:1}

.race-read{margin-top:.7rem}
.race-read .n{
  display:block;font-weight:900;font-size:clamp(1.15rem,3vw,1.55rem);
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.lane-team .race-read .n{color:var(--ink)}
.lane-edge .race-read .n{color:var(--sig)}
.race-read .t{
  display:block;margin-top:.35rem;line-height:1.5;
  font:600 .56rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);
}
.race-foot{
  margin-top:1.1rem;max-width:42ch;
  font-weight:800;font-size:1.02rem;letter-spacing:-.02em;
}
.race-foot em{font-style:normal;color:var(--sig)}

@media (max-width:560px){
  .race-lanes{gap:1.1rem}
  .race-track{height:230px}
  .race-gap b{font-size:.56rem}
}

/* ---------------- output multiplier ----------------
   The track spans 3.2 units, so the fill starting at 1x and growing to the
   end IS the claim. Ticks at 1/2/3 make it countable — the number is watched
   happening rather than asserted, and a viewer can check the bar against the
   figure. */
/* Readout head shared by the multiplier (and formerly the hours bar — these
   rules outlived it because .mult still wears them). Label and figure carry
   equal weight: full black at 700 against the orange number. */
.hours-top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-bottom:.85rem;
}
.hours-top .label{font-weight:700;color:var(--ink)}
.hours-num{
  font-weight:900;font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1;letter-spacing:-.045em;color:var(--sig);
  font-variant-numeric:tabular-nums;
}

.mult{margin-top:1.5rem}
.mult-track{
  position:relative;height:2.6rem;
  border:1px solid var(--rule);
  overflow:hidden;
}
.mult-fill{
  position:absolute;inset:0 auto 0 0;
  width:31.25%;                       /* 1.0x of a 3.2x track */
  background:var(--sig);
}
.mult-tick{
  position:absolute;top:0;bottom:0;width:1px;
  background:var(--bone);
  opacity:.9;
}
.mult-foot{
  position:relative;height:1rem;margin-top:.4rem;
  font:500 .58rem var(--mono);letter-spacing:.12em;
  color:var(--ink-40);
}
.mult-foot span{position:absolute;top:0;transform:translateX(-50%)}
.mult-foot span:first-child{transform:none}

@media(prefers-reduced-motion:reduce){
  /* revealOnce settles straight to the final values here, so the label must
     not fade in afterwards — it should already be there. */
  .race-gap b{transition:none}
}

.brag-kick{
  margin-top:1.6rem;
  font-weight:800;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  line-height:1.3;letter-spacing:-.03em;
  max-width:34ch;
}
/* the closing question — quieter than the kick above it, because a question
   asked at a shout stops being a question */
.brag-ask{
  margin-top:.85rem;
  max-width:48ch;
  font-size:.95rem;line-height:1.5;font-weight:500;
  color:var(--ink-72);
}
.brag-ask em{font-style:normal;font-weight:800;color:var(--ink)}


/* ---------------- before / after banner ----------------
   Self-contained animated SVG supplied as edge-banner.html and pasted in
   verbatim -- its keyframes and classes live inside the SVG itself (eb-
   prefixed, .edge-banner scoped), so nothing here can collide with it.
   Four services light up orange, then the flat line becomes the rising
   arrow. This block only sizes and places it. */
.banner{border-top:1.5px solid var(--ink)}
.banner svg{display:block;width:100%;max-width:640px;height:auto;margin-inline:auto}
/* The banner's neon glow was drawn for a black background; on bone it blooms
   into a smear. !important outranks the keyframe animation driving `filter`,
   so this kills the glow while keeping the colour flip and the scale pop. */
.banner .icon{filter:none!important}

.pillar-list{margin-top:2rem}
.pillar-list>li{
  display:grid;grid-template-columns:1fr;gap:1.1rem;
  padding:1.9rem 0;
  border-top:1px solid var(--rule);
}
.pillar-list>li:first-child{border-top:1.5px solid var(--ink)}
@media(min-width:880px){
  .pillar-list>li{grid-template-columns:21rem 1fr;gap:3.2rem;padding:2.3rem 0}
}

.pillar-n{
  display:block;
  font:500 .62rem var(--mono);letter-spacing:.16em;
  color:var(--ink-40);margin-bottom:.5rem;
}
.pillar-head h3{
  font-weight:900;
  font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:.98;letter-spacing:-.048em;text-transform:uppercase;
  color:var(--sig);
}
.pillar-say{
  margin-top:.6rem;
  font-weight:800;font-size:1rem;line-height:1.3;letter-spacing:-.02em;
  max-width:24ch;
}
/* a pillar-say written as separate claims stacks them, rather than running
   them together as one sentence with full stops doing the separating */
.pillar-say span{display:block}
.pillar-say span+span{margin-top:.18rem}

.pillar-detail{border-top:1px solid var(--rule-soft)}
.pillar-detail li{
  padding:.68rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:.92rem;line-height:1.45;color:var(--ink-72);
}
/* Searchable phrases carry full ink so they read as the subject of the line
   rather than jargon buried mid-sentence. Black, not orange — the pillar name
   beside them already holds the colour for this row. */
.pillar-detail li b{color:var(--ink);font-weight:800}

/* Each pillar's outbound link — one page per pillar, sent as the outreach URL
   for that service. Lives in the head column, under the name and say-lines,
   so the route to "more" sits with the pillar's identity rather than at the
   bottom of its detail list. */
.pillar-more{margin-top:1.3rem}

.pillar-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  margin-top:2.1rem;padding-top:1.4rem;
  border-top:1.5px solid var(--ink);
}
.pillar-cta p{font-weight:800;font-size:1.02rem;letter-spacing:-.02em}

/* ---------------- hero actions ---------------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}

/* ---------------- teardown invite ---------------- */
.teardown-invite{max-width:60ch}
#teardownPanel:not([hidden]){margin-top:2rem}

/* ---------------- case study ---------------- */
/* ---------------- the work showcase ----------------
   Two-up, not four. At four across each window is about 280px wide, which is
   too small to show off a hero anybody would call beautiful — the whole point
   of the section is that the work can be looked at. */
.works{
  display:grid;gap:2.2rem 1.6rem;
  grid-template-columns:1fr;
  margin-top:2rem;
}
@media(min-width:840px){.works{grid-template-columns:repeat(2,1fr);gap:2.6rem 1.8rem}}

.work{margin:0}

/* a plain window: chrome bar, then the work. No card, no shadow, no rounding
   — the frame should read as a screen, not a product tile. */
.work-frame{border:1px solid var(--rule-dark)}
.work-chrome{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .7rem;
  border-bottom:1px solid var(--rule-dark);
  background:rgba(242,240,235,.04);
}
.work-chrome i{
  width:7px;height:7px;border-radius:50%;
  background:var(--on-dark-42);opacity:.5;flex:none;
}
.work-chrome span{
  margin-left:.45rem;
  font:500 .58rem var(--mono);letter-spacing:.1em;
  color:var(--on-dark-42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.work-frame img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}

.work figcaption{margin-top:.95rem}
.work figcaption h3{margin-top:.4rem;font-size:1.05rem}
.work figcaption p{
  margin-top:.4rem;
  font-size:.87rem;line-height:1.5;
  color:var(--on-dark-62);
  max-width:44ch;
}

.work-proof{
  margin-top:2.4rem;padding-top:1.3rem;
  border-top:1px solid var(--rule-dark);
  font-size:.95rem;line-height:1.6;
  color:var(--on-dark-62);
  max-width:70ch;
}
.work-proof b{color:var(--sig);font-weight:800}

/* ---------------- pricing ladder ---------------- */
.ladder{
  display:grid;gap:0;
  grid-template-columns:1fr;
  margin-top:1.9rem;
  border-top:1.5px solid var(--ink);
}
@media(min-width:720px){
  .ladder{grid-template-columns:repeat(4,1fr)}
}
.ladder li{
  padding:1.15rem .95rem 1.3rem;
  border-bottom:1px solid var(--rule-soft);
}
.ladder li:first-child{padding-left:0}
@media(min-width:720px){
  .ladder li{border-bottom:0;border-left:1px solid var(--rule)}
  .ladder li:first-child{border-left:0}
}
.ladder h3{margin-top:.5rem}
.ladder .price{
  margin-top:.5rem;
  font-weight:900;font-size:1.7rem;letter-spacing:-.045em;line-height:1;
}
.ladder .price.sig{color:var(--sig)}
.ladder p:last-child{
  margin-top:.55rem;font-size:.83rem;line-height:1.45;color:var(--ink-58);
}

/* ---------------- why ---------------- */
.why-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:860px){
  .why-grid{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
}
.why-copy p{
  font-size:.95rem;line-height:1.62;color:var(--ink-72);
}
.why-copy p+p{margin-top:1rem}

/* ---------------- footer ---------------- */
.foot{padding:2.2rem 0}
.foot-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;
  justify-content:space-between;
}
.foot p{font-size:.82rem;color:var(--on-dark-62)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.foot nav a{
  font:600 .66rem var(--display);letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;
}
.foot nav a:hover{border-bottom-color:var(--sig)}

/* ============================================================
   THE TEARDOWN — the signature element
   ============================================================ */
.teardown{background:var(--bone-2);border-top:1.5px solid var(--ink)}

.tp{border:1.5px solid var(--ink);background:var(--bone-2)}

.tp-head{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;
  align-items:center;justify-content:space-between;
  padding:.8rem 1rem;
  background:var(--ink);color:var(--on-dark);
}
.tp-head .t{
  font:500 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-62);
}
.tp-head .u{
  font:600 .8rem var(--mono);letter-spacing:-.01em;
  word-break:break-all;
}
.tp-close{
  background:transparent;border:1px solid var(--rule-dark);color:var(--on-dark);
  font:500 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .7rem;cursor:pointer;
}
.tp-close:hover{border-color:var(--sig)}

/* scan readout — the one orchestrated motion moment */
.tp-scan{padding:1.1rem 1rem;font-family:var(--mono);font-size:.76rem}
.tp-scan li{
  display:flex;gap:.6rem;align-items:baseline;
  padding:.2rem 0;color:var(--ink-58);
  opacity:0;transform:translateY(4px);
  transition:opacity .28s ease,transform .28s ease;
}
.tp-scan li.in{opacity:1;transform:none}
.tp-scan li::before{content:"›";color:var(--sig);font-weight:600}
.tp-scan li.done{color:var(--ink)}

.tp-err{padding:1.1rem 1rem;font-size:.88rem;color:var(--ink-72)}
.tp-err b{color:var(--sig)}

/* results */
.tp-body{padding:1.1rem 1rem 1.3rem}

.tp-verdict{
  display:grid;gap:1rem;
  grid-template-columns:1fr;
  padding-bottom:1.2rem;border-bottom:1.5px solid var(--ink);
}
@media(min-width:720px){.tp-verdict{grid-template-columns:1.1fr 1fr;gap:2rem;align-items:end}}
.tp-verdict .big{
  font-weight:900;font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:.95;letter-spacing:-.05em;color:var(--sig);
}
.tp-verdict .cap{
  margin-top:.4rem;font:500 .6rem var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);
}
.tp-verdict .say{font-size:.9rem;line-height:1.5;color:var(--ink-72)}

.tp-preview{margin-top:1.2rem}
.tp-preview iframe{
  width:100%;height:260px;border:1px solid var(--rule);background:#fff;
}
.tp-preview .cap{
  margin-top:.45rem;font:500 .58rem var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);
}

.tp-findings{margin-top:1.4rem;border-top:1px solid var(--rule)}
.tp-findings li{
  display:grid;grid-template-columns:1.4rem 1fr;gap:.2rem .75rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule-soft);
}
.tp-findings .ic{
  font:600 .8rem var(--mono);line-height:1.5;
}
.tp-findings .warn .ic,.tp-findings .opportunity .ic{color:var(--sig)}
.tp-findings .good .ic{color:var(--ink-40)}
.tp-findings h4{margin:0;font-weight:800;font-size:.92rem;letter-spacing:-.015em}
.tp-findings p{grid-column:2/3;font-size:.83rem;line-height:1.45;color:var(--ink-58);margin-top:.15rem}
.tp-findings .cost{
  grid-column:2/3;margin-top:.35rem;
  font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sig);
}
.tp-findings .good h4{color:var(--ink-58);font-weight:600}

.tp-assume{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-end;
}
.tp-assume label{display:block}
.tp-assume .lab{
  display:block;margin-bottom:.35rem;
  font:500 .58rem var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);
}
.tp-assume input{
  width:8.5rem;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;
  padding:.5rem .6rem;font-family:var(--mono);font-size:.85rem;font-weight:500;
}

.tp-cost{
  margin-top:1.3rem;padding:1rem;
  background:var(--ink);color:var(--on-dark);
}
.tp-cost .t{
  font:500 .6rem var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-42);
}
.tp-cost .n{
  margin-top:.35rem;font-weight:900;font-size:1.5rem;letter-spacing:-.04em;line-height:1.1;
}
.tp-cost .n em{font-style:normal;color:var(--sig)}
.tp-cost p{margin-top:.5rem;font-size:.82rem;line-height:1.45;color:var(--on-dark-62)}

.tp-next{
  margin-top:1.3rem;padding-top:1.2rem;border-top:1.5px solid var(--ink);
}
.tp-next h3{font-size:1.05rem}
.tp-next p{margin-top:.4rem;font-size:.87rem;color:var(--ink-58);max-width:52ch}
.tp-lead{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.95rem;max-width:540px}
.tp-lead input{
  flex:1 1 220px;min-width:0;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;
  padding:.8rem .95rem;font-family:var(--mono);font-size:.86rem;font-weight:500;
}
.tp-lead input::placeholder{color:var(--ink-40)}

.tp-note{
  margin-top:1rem;font-size:.72rem;line-height:1.5;color:var(--ink-40);max-width:64ch;
}

/* ---------------- legal page ---------------- */
.legal h1{max-width:16ch;margin-top:.6rem}
.legal-date{display:block;margin-top:1rem}
.legal-copy{margin-top:2.2rem;max-width:62ch;border-top:1.5px solid var(--ink)}
.legal-copy h2{
  font-size:1rem;font-weight:800;letter-spacing:-.015em;text-transform:none;
  margin-top:1.8rem;max-width:none;
}
.legal-copy p{margin-top:.5rem;font-size:.94rem;line-height:1.62;color:var(--ink-72)}
.legal-copy a{color:var(--sig)}
.legal-back{margin-top:2.4rem}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,180%);
  z-index:300;
  background:var(--ink);color:var(--bone);
  border-bottom:3px solid var(--sig);
  padding:.85rem 1.2rem;
  font:600 .8rem var(--display);
  max-width:calc(100% - 2rem);
  /* hidden outright rather than merely shifted — a transform-only hide still
     composites into element screenshots and can catch a stray tap */
  visibility:hidden;opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .3s;
}
.toast.show{
  transform:translate(-50%,0);
  visibility:visible;opacity:1;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s;
}

/* ---------------- reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .tp-scan li{opacity:1;transform:none}
}

/* ---------------- print ---------------- */
@media print{
  .hdr,.toast,.teardown-form,.tp-lead{display:none}
  .dark{background:#fff;color:#000}
  body{background:#fff}
}