/* Metric-matched fallback for the display face. Without this the pre-swap (or
   fonts-blocked) render is ~4.6% wider, which used to wrap the longest rotator
   phrase onto a second line and stack the phrases on top of each other. */
@font-face{
  font-family:"Anton fallback";
  src:local("Impact"),local("Haettenschweiler"),local("Arial Narrow Bold"),local("Arial Bold");
  size-adjust:95.6%;
  ascent-override:98%;
  descent-override:22%;
  line-gap-override:0%;
}
:root{
  /* Black and white page, one accent. #fcbe11 is reserved for the things that
     are meant to be read as a promise: the phrase that changes, the words that
     carry the offer, and the primary call to action. Spending it anywhere else
     makes it stop meaning anything. */
  --bg:#0B0B0C;
  --ink:#FFFFFF;
  --accent:#fcbe11;
  --dim:#8E8E88;        /* supporting text */
  --quiet:#8A8A84;      /* the recessive half of a contrast pair */
  --paper:#FFFFFF;      /* the inverted closing block */
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);
  --ease:cubic-bezier(.16,1,.3,1);

  --pad:      clamp(18px, 4vw, 76px);
  --rule:     max(2px, .18vw);
  --tick:     clamp(10px, 1.1vw, 20px);
  --icon:     clamp(30px, 3.1vw, 52px);
  --nav:      clamp(10px, .78vw, 13px);
  --btn-h:    clamp(44px, 3.1vw, 54px);

  --display:  clamp(34px, 11.6vw, 208px);
  --lede:     clamp(16px, 1.55vw, 25px);
  --h2:       clamp(28px, 4.4vw, 78px);
  --h3:       clamp(19px, 1.9vw, 31px);
  --body:     clamp(15px, 1.12vw, 19px);
  --small:    clamp(12px, .86vw, 15px);
  --mono:     clamp(10px, .74vw, 13px);
  /* The eyebrow above every headline is its own step, deliberately larger than
     the call-sheet mono used inside tables and rows. It has to survive as a
     label at a glance on a phone; --mono only has to be legible up close.
     Doubled at the owner's call 2026-08-02. Tracking drops to .12em at this
     size — .22em on a 24px mono label runs a long eyebrow off a phone. */
  --eyebrow:  clamp(17px, 1.43vw, 25px);

  --strip-h:  clamp(160px, 21vw, 380px);
  --border:   max(1px, .12vw);
  --sec:      clamp(64px, 9vw, 168px);
}

*,*::before,*::after{box-sizing:border-box}
/* The UA rule for [hidden] is display:none at ZERO specificity, so any class
   that sets display — .btn is inline-flex — silently un-hides the element. That
   is why the logged-out nav was still painting MY CALLSHEET off the right edge
   on a phone. Keep this above every component rule. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Anchors used to land UNDER the sticky bar — 86px of the target was covered on
   a phone. Every jump target clears the bar by its own height. */
[id]{scroll-margin-top:clamp(104px,8.6vw,134px)}
/* iOS paints a grey box over any tapped link. Killing it only works if the tap
   still gives feedback, so :active supplies it. */
a,button{-webkit-tap-highlight-color:transparent}
a:active,button:active{opacity:.65}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* overflow-x:HIDDEN on body makes body a scroll container, which kills
   position:sticky on the nav. CLIP does the same job without one. The hidden
   above stays as the fallback for anything that predates clip. */
@supports (overflow-x:clip){body{overflow-x:clip}}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

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

/* film grain — on black this reads as emulsion, not as a filter */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the utility face: call sheets are typed forms, so labels are monospaced */
.label{
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--eyebrow);letter-spacing:.12em;line-height:1.15;
  text-transform:uppercase;color:var(--dim);
}
.label b{color:var(--accent);font-weight:400}
/* An eyebrow used mid-section, above a sub-block rather than above the H2. It
   supplies its own top space and absorbs the block's, so the two do not stack. */
.section .label.mid{margin-top:clamp(30px,3.2vw,60px);margin-bottom:clamp(12px,1.2vw,20px)}
.label.mid + .chips,.label.mid + .offers,.label.mid + .sheet{margin-top:0}

/* ------------------------------------------------------------------ chrome */
/* The whole bar rides with the scroll. It needs an opaque ground or the page
   reads straight through it, and it sits under .grain (z-index 60) so the
   emulsion still covers it. */
.bar{position:sticky;top:0;z-index:50;background:var(--bg);
  padding-bottom:clamp(8px,.9vw,14px)}
.masthead{display:flex;align-items:center;gap:clamp(9px,.9vw,16px);
  padding:clamp(16px,1.7vw,30px) var(--pad) 0}
.mark{width:var(--icon);height:auto;flex:0 0 auto}
.brand{font-family:Anton,"Anton fallback",Impact,"Arial Narrow",sans-serif;font-weight:400;
  font-size:clamp(19px,1.83vw,32px);line-height:1;letter-spacing:.012em;
  padding-top:.06em}
/* The masthead icon is larger than the footer's, so centring the wordmark on it
   floats the type high. Hanging the lockup off the BOTTOM edge instead sits the
   wordmark on the clapper's lower rail, which is how the footer lockup reads. */
.lockup{display:flex;align-items:flex-end;gap:clamp(9px,.9vw,16px);min-height:44px}
.masthead .brand{padding-top:0;padding-bottom:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.1vw,38px)}
/* 44px minimum on every nav link, at every width — tablets in the 720–1024 band
   show these links AND have a touch pointer. The box is grown, not the type. */
.nav a{font-size:var(--nav);font-weight:500;letter-spacing:.14em;white-space:nowrap;position:relative;
  display:inline-flex;align-items:center;min-height:44px}
.nav a.link{color:var(--dim);transition:color .4s var(--ease)}
.nav a.link:hover,.nav a.link:focus-visible{color:var(--ink)}
/* the rule hangs off the TEXT, not the padded box, so the extra height stays
   invisible — same trick as .tcta */
.nav a.link::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - 1.1em);height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.nav a.link:hover::after,.nav a.link:focus-visible::after{transform:scaleX(1)}
/* the current page is not a link to somewhere else — it is a position marker */
.nav a.link[aria-current="page"]{color:var(--accent)}

/* ----------------------------------------------------------- menu (mobile) */
/* Desktop never sees the button; the links are already in the bar. */
.burger{display:none;width:44px;height:44px;flex:0 0 auto;padding:0;
  align-items:center;justify-content:center;
  background:none;border:var(--border) solid var(--line);color:var(--ink);cursor:pointer}
.burger:hover,.burger:focus-visible{background:var(--ink);color:#0B0B0C;border-color:var(--ink)}
/* three bars drawn in CSS — no icon set, and it stays a word to a screen
   reader via the visually-hidden label on the button */
.burger i{display:block;position:relative;width:19px;height:2px;background:currentColor}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;
  background:currentColor}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* The panel is a plain block under the bar, not an overlay — it needs no scroll
   lock and nothing to focus-trap. The bar's own rule is its top edge, so it
   does not draw a second one. */
.menu{display:none;background:var(--bg);margin-top:clamp(8px,.9vw,14px)}
.menu ul{display:flex;flex-direction:column}
.menu li + li{border-top:var(--border) solid var(--line-soft)}
.menu a{display:flex;align-items:center;min-height:56px;padding:0 var(--pad);
  font-size:clamp(15px,4vw,19px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim)}
.menu a[aria-current="page"]{color:var(--accent)}
.menu a.cta{color:#0B0B0C;background:var(--accent);font-weight:700}

/* Buttons. No hover animation — no magnetic pull, no sliding fill, no easing
   on the swap. Hovering flips the button to its inverse immediately. Feedback
   without movement. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  height:var(--btn-h);padding:0 clamp(16px,1.7vw,30px);
  font-size:var(--nav);font-weight:700;letter-spacing:.14em;white-space:nowrap;
  border:var(--border) solid var(--accent);background:var(--accent);color:#0B0B0C;
  position:relative;
}
.btn:hover,.btn:focus-visible{background:#0B0B0C;color:var(--accent)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:#0B0B0C;border-color:var(--ink)}

/* A text CTA that draws its own underline. The box is padded to 44px so it is
   a legal tap target; the rule is positioned off the text, not the box, so the
   extra height stays invisible. */
.tcta{display:inline-flex;align-items:center;gap:.5em;font-size:var(--small);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  position:relative;min-height:46px}
.tcta::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - .95em);
  height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.tcta:hover::after,.tcta:focus-visible::after{transform:scaleX(1)}
.tcta .arw{transition:transform .5s var(--ease)}
.tcta:hover .arw{transform:translateX(4px)}

/* rule with end ticks, drawn on load */
.rule{position:relative;margin:clamp(14px,1.5vw,26px) var(--pad) 0;height:var(--tick);
  display:flex;align-items:center}
.rule i{display:block;width:100%;height:var(--rule);background:var(--line);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .1s}
.rule::before,.rule::after{content:"";position:absolute;top:0;bottom:0;width:var(--rule);
  background:var(--accent);opacity:0;transition:opacity .5s var(--ease) 1s}
.rule::before{left:0}
.rule::after{right:0}
.ready .rule i{transform:scaleX(1)}
.ready .rule::before,.ready .rule::after{opacity:1}

/* -------------------------------------------------------------------- hero */
.hero{padding:clamp(30px,4.4vw,86px) var(--pad) clamp(38px,4.6vw,88px)}
.hero .label{display:block;margin-bottom:clamp(16px,1.9vw,34px)}

.h1{font-family:Anton,"Anton fallback",Impact,"Arial Narrow",sans-serif;font-weight:400;
  font-size:var(--display);line-height:.94;letter-spacing:.004em;text-transform:uppercase}
/* "LET'S GET YOU" holds steady in grey so the phrase that changes is the only
   accent-coloured thing above the fold. */
.h1 > .split{color:#9E9E98}

/* every phrase shares one grid cell, so the block is sized by the longest
   one and the layout cannot jump as the words change */
.rot{display:grid;margin-top:.02em}
/* the padding band is INSIDE an overflow:hidden box, so a plain translateY(100%)
   leaves the top of the next phrase visible through it. Clear the padding too. */
.rw{grid-area:1/1;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;color:var(--accent)}
.rw i{display:block;font-style:normal;white-space:nowrap;
  transform:translateY(calc(100% + .22em));
  transition:transform .8s var(--ease)}
.rw.on i{transform:translateY(0)}
.rw.out i{transform:translateY(calc(-100% - .22em))}

.lede{margin:clamp(22px,2.5vw,44px) 0 0;max-width:34em;
  font-size:var(--lede);line-height:1.45;color:#D6D6D0}
.lede b{color:var(--ink);font-weight:600}

.acts{display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,16px);margin-top:clamp(24px,2.6vw,46px)}
/* The two hero CTAs run 1.4x the standard button — box and label together, so
   the proportions hold. Only the hero: the closing block's buttons stay
   standard or nothing on the page reads as bigger than anything else. */
.hero .acts .btn{height:clamp(62px,4.34vw,76px);padding:0 clamp(22px,2.38vw,42px);
  font-size:clamp(14px,1.09vw,18px)}
/* The three objections this product exists to answer. It was set at --small,
   which buried it directly under the primary CTA where it does the most work. */
.assure{margin-top:clamp(16px,1.7vw,30px);font-size:clamp(16px,1.45vw,24px);
  line-height:1.4;color:#C9C9C3}
.assure span{color:var(--accent)}

/* ------------------------------------------------- the filmstrip: signature */
.stripbar{padding:0 var(--pad) clamp(10px,1vw,18px)}
.stripbar .label{display:block}
.strip{
  margin:0 var(--pad);
  border:var(--border) solid var(--line);
  display:flex;height:var(--strip-h);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.3s var(--ease) .25s;
}
.ready .strip{clip-path:inset(0 0 0 0)}

.frame{
  flex:var(--f) 1 0%;
  position:relative;overflow:hidden;min-width:0;margin:0;
}
.frame + .frame{border-left:var(--border) solid var(--line)}
/* Real production stills, shown as shot: full colour, no filter. */
.frame img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------- filmstrip hover
   POINTER-GUARDED. A phone gets none of this and loses nothing: the caption
   is fully visible at rest on every device, so nothing here puts content
   behind a hover a touch user cannot perform. Transform and opacity only. */
@media (hover:hover) and (pointer:fine){
  .frame img{transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
  .frame:hover img{transform:scale(1.07)}
  /* the rest recede, so the one under the pointer is the one you read */
  .strip:hover .frame:not(:hover) img{opacity:.5}

  /* An accent rule wipes across the caption from the side the pointer actually
     arrived from — --ox is set to 0% or 100% by site.js on pointerenter. */
  .frame .cap::after{content:"";position:absolute;left:0;right:0;
    top:calc(var(--border) * -1);height:var(--border);background:var(--accent);
    transform:scaleX(0);transform-origin:var(--ox,0%) 50%;
    transition:transform .6s var(--ease)}
  .frame:hover .cap::after{transform:scaleX(1)}

  .frame .cap{transition:transform .7s var(--ease)}
  .frame:hover .cap{transform:translateY(-2px)}
  .frame .cap b{transition:color .45s var(--ease)}
  .frame:hover .cap b{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .frame img,.strip:hover .frame:not(:hover) img{transform:none!important;opacity:1!important}
  .frame .cap::after{display:none}
}

.cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(9px,.9vw,16px) clamp(11px,1.1vw,20px);
  background:rgba(11,11,12,.82);border-top:var(--border) solid var(--accent);
  display:flex;align-items:baseline;gap:10px;text-align:left;
}
@supports (backdrop-filter:blur(6px)){
  .cap{background:rgba(11,11,12,.55);backdrop-filter:blur(12px) saturate(1.2)}
}
.cap b{font-size:clamp(11px,.95vw,17px);font-weight:700;white-space:nowrap}
.cap span{font-family:"Space Mono",ui-monospace,monospace;
  font-size:clamp(9px,.66vw,12px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.cap.async span{color:var(--accent);font-weight:700}

/* ---------------------------------------------------------------- sections */
.section{padding:var(--sec) var(--pad)}
.head{max-width:22ch}
.h2{font-family:Anton,"Anton fallback",Impact,"Arial Narrow",sans-serif;font-weight:400;
  font-size:var(--h2);line-height:.98;letter-spacing:.006em;text-transform:uppercase}
/* the turn inside a headline — the clause that flips it from a condition into a
   promise. .split copies this class onto each word shell, so it survives. */
.h2 .hi{color:var(--accent)}
.sub{margin-top:clamp(16px,1.6vw,30px);max-width:46ch;font-size:var(--body);
  line-height:1.55;color:#C9C9C3}
.section .label{display:block;margin-bottom:clamp(14px,1.5vw,28px)}

/* the nine channels */
.chips{display:flex;flex-wrap:wrap;gap:clamp(7px,.6vw,11px);margin-top:clamp(28px,3vw,56px)}
.chips li{border:var(--border) solid var(--line);padding:clamp(8px,.7vw,13px) clamp(12px,1.1vw,20px);
  font-size:var(--small);color:#C9C9C3;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.chips li:hover{background:var(--ink);color:#0B0B0C;border-color:var(--ink)}

.turn{margin-top:clamp(30px,3.2vw,60px);padding-top:clamp(24px,2.4vw,44px);
  border-top:var(--border) solid var(--line);
  display:flex;flex-wrap:wrap;gap:clamp(18px,2vw,40px);align-items:flex-end}
.turn p{flex:1 1 340px;font-size:clamp(19px,2.1vw,36px);line-height:1.24;font-weight:600;
  letter-spacing:-.015em;color:var(--quiet)}
.turn p em{font-style:normal;color:var(--accent);font-weight:700}

/* The stacked turn: statement, then the action centred directly beneath it
   rather than parked out on the right margin where the eye has to go find it. */
.turn.stack{flex-direction:column;align-items:center;text-align:center;
  gap:clamp(20px,2.2vw,38px)}
.turn.stack p{flex:0 1 auto;max-width:24ch}
.turn.stack .tcta{align-self:center}

/* ------------------------------------------------------------ partner row */
/* Owner's call 2026-08-02: bigger caption, bigger marks, shorter band. The
   three pull against each other — the padding is squeezed to the floor to buy
   back the height the 1.5x logos and the 3x caption spend. */
.partners{padding:clamp(13px,1.35vw,22px) 0;background:#fff;color:#0B0B0C}
/* set in the body face at H3 scale, not the mono label — a caption this large
   in tracked monospace reads as a headline competing with the section above */
.partners .label{display:block;padding:0 var(--pad);margin-bottom:clamp(7px,.75vw,13px);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(18px,2.03vw,32px);font-weight:700;letter-spacing:-.015em;line-height:1.1;
  color:#6A6A62}
.partners .label b{color:#0B0B0C;font-weight:700}
/* The rail is deliberately narrower than the page. Fewer marks on screen at
   once, each one bigger — a partner row reads as a claim, and a claim you
   cannot see is not one. The mask still eats the edges, so it never looks cut. */
.mq{position:relative;display:flex;overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  /* the track is taller than the tallest mark so nothing clips at the top */
  padding:clamp(3px,.35vw,6px) 0}
.mq-track{display:flex;align-items:center;flex:0 0 auto;min-width:max-content;
  animation:mq 46s linear infinite;will-change:transform}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.lg{flex:0 0 auto;padding:0 clamp(16px,1.9vw,38px);display:flex;align-items:center;
  justify-content:center;height:clamp(81px,8.55vw,141px);
  opacity:1;transition:opacity .45s var(--ease)}
.mq:hover .lg{opacity:.4}
.mq .lg:hover{opacity:1}
.lg svg{height:calc(100% * var(--k,1));width:auto;max-width:none;flex:0 0 auto}
/* MOFT publishes no public vector mark, so it is set as type at the same
   optical weight as the drawn logos rather than pulled in as a bitmap */
.lg.type{font-weight:800;font-size:clamp(39px,4.13vw,69px);letter-spacing:-.02em;
  line-height:1;color:#0B0B0C}

/* ------------------------------------------------------------ testimonials */
/* Sits directly under the partner band, so it goes back to the page black —
   the white band ends the moment the logos do. The section itself is unpadded
   so the deck can run to the screen edges and the arrows can sit on them. */
.quotes{background:var(--bg);padding:clamp(48px,6vw,110px) 0}
.quotes .label,.quotes .h2{padding:0 var(--pad)}
.quotes .label{display:block;margin-bottom:clamp(12px,1.3vw,24px)}

.qbox{position:relative;margin-top:clamp(30px,3.2vw,58px)}
/* clips the deck at the screen edges. Above 720 a mask dissolves the cards on
   the way out so there is no hard cut; below it the card is nearly the full
   width and the mask would eat the edges of the one you are reading. */
.qviewport{overflow:hidden;padding:clamp(14px,1.6vw,30px) 0;
  /* we take the horizontal axis for swipe; the page keeps the vertical one, so
     scrolling down through the section is never intercepted */
  touch-action:pan-y}
@media (min-width:721px){
  .qviewport{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
}

/* Every card occupies the SAME cell, so they cannot push each other around and
   the deck reads as depth rather than a row. site.js eases the stage to fit
   whichever cards are showing. */
.qstage{position:relative;display:grid;align-items:start;
  transition:height .55s var(--ease)}

.q{grid-area:1/1;justify-self:center;margin:0;
  width:min(100% - clamp(96px,14vw,320px), 780px);
  background:#141416;border:var(--border) solid var(--line);
  padding:clamp(24px,2.9vw,56px);
  display:grid;grid-template-columns:auto 1fr;align-content:start;
  gap:clamp(12px,1.8vw,34px);align-items:start;
  opacity:0;visibility:hidden;transform:scale(.8);
  transition:transform .6s var(--ease),opacity .6s var(--ease),
             border-color .6s var(--ease),filter .6s var(--ease),
             visibility 0s linear .6s}

/* the one you are reading is lifted off the page; the shadow is what makes it
   a card sitting ON the black rather than a panel cut into it */
.q.on{opacity:1;visibility:visible;transform:none;z-index:3;filter:none;
  border-color:rgba(252,190,17,.5);
  box-shadow:0 clamp(14px,1.6vw,30px) clamp(40px,4.4vw,84px) rgba(0,0,0,.72);
  transition-delay:0s,0s,0s,0s,0s}
/* The ones either side are scenery, not reading material. At .22 and sharp
   they competed with the card in front — dimmer and softened, they read as
   depth instead of as three quotes fighting for the same eye. */
.q.side{opacity:.13;visibility:visible;z-index:2;filter:blur(3px);
  box-shadow:none;border-color:var(--line-soft)}
.q.prev{transform:translateX(-58%) scale(.88)}
.q.next{transform:translateX(58%) scale(.88)}

.qmark{font-size:clamp(50px,6.4vw,110px);line-height:.78;font-weight:800;
  color:var(--accent);user-select:none}
.q blockquote{font-size:var(--h3);line-height:1.45;font-weight:400;color:#E4E4DE}
/* name, role and city are the bold part, right-aligned under the quote */
.q figcaption{margin-top:clamp(16px,1.7vw,30px);text-align:right;
  font-size:var(--h3);line-height:1.35;color:var(--ink)}
.q figcaption b{font-weight:700}
/* owner's call: 20% down, not 10% — everything else in this rule stands */
.q figcaption .qcity{display:inline-block;margin-top:3px;font-weight:400;font-size:.8em;color:var(--dim)}
.q figcaption .dash{margin-right:.7em;color:var(--dim);font-weight:400}

/* arrows live on the screen edges, flanking the deck */
.qbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(48px,3.6vw,60px);height:clamp(48px,3.6vw,60px);
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(11,11,12,.72);border:var(--border) solid var(--line);color:var(--ink);
  font-size:clamp(17px,1.4vw,23px);line-height:1;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.qbtn:hover,.qbtn:focus-visible{background:var(--accent);color:#0B0B0C;border-color:var(--accent)}
.qprev{left:clamp(10px,1.8vw,34px)}
.qnext{right:clamp(10px,1.8vw,34px)}

.qcount{display:block;margin-top:clamp(16px,1.7vw,28px);text-align:center;
  font-family:"Space Mono",ui-monospace,monospace;font-size:var(--mono);
  letter-spacing:.2em;color:var(--dim)}
.qcount b{color:var(--accent);font-weight:400}

@media (max-width:720px){
  /* A phone cannot spare the width for edge arrows AND a readable card, so the
     arrows sit below it. Same controls, same order, still 48px. */
  .q{width:min(100% - clamp(36px,10vw,64px),780px);grid-template-columns:1fr;gap:0}
  .qmark{font-size:clamp(44px,13vw,66px);margin-bottom:-.1em}
  .q figcaption{text-align:left}
  .q.prev{transform:translateX(-84%) scale(.9)}
  .q.next{transform:translateX(84%) scale(.9)}
  .qbtn{position:static;transform:none}
  .qbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:clamp(12px,3vw,20px)}
  .qviewport{flex:1 1 100%;order:1}
  .qprev{order:2}
  .qcount{order:3;margin-top:0}
  .qnext{order:4}
}

@media (prefers-reduced-motion:reduce){
  .q{transition:none!important}
  .qstage{transition:none!important}
}

/* ------------------------------------------------------- what you get: 3 up */
.offers{display:grid;gap:var(--border);margin-top:clamp(34px,3.6vw,68px);
  background:var(--line);border:var(--border) solid var(--line)}
@media (min-width:900px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{background:var(--bg);padding:clamp(24px,2.4vw,46px);
  display:flex;flex-direction:column;gap:clamp(12px,1.1vw,20px);
  transition:background .5s var(--ease)}
.offer:hover{background:#131315}
/* These three headlines ARE the offer, so they carry the accent — same rule as
   the rotator: the accent marks the promise, never the furniture. */
.offer h3{font-size:var(--h3);line-height:1.16;font-weight:700;letter-spacing:-.02em;
  color:var(--accent)}
.offer p{font-size:var(--body);line-height:1.55;color:#C9C9C3}
.offer .tcta{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------- the call sheet */
.brief{border-left:3px solid var(--ink);padding:clamp(12px,1.1vw,20px) 0 clamp(12px,1.1vw,20px) clamp(16px,1.5vw,28px);
  margin:clamp(30px,3.2vw,60px) 0 0;font-size:clamp(16px,1.5vw,25px);line-height:1.45;
  max-width:40em;color:#E4E4DE}
.brief cite{display:block;margin-top:.7em;font-style:normal;
  font-family:"Space Mono",ui-monospace,monospace;font-size:var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

.sheet{width:100%;border-collapse:collapse;margin-top:clamp(26px,2.6vw,50px)}
.sheet th,.sheet td{padding:clamp(11px,1vw,19px) clamp(10px,.9vw,18px);
  border-bottom:var(--border) solid var(--line);text-align:left;font-size:var(--body)}
.sheet thead th{font-family:"Space Mono",ui-monospace,monospace;font-size:var(--mono);
  font-weight:400;letter-spacing:.2em;color:var(--dim);border-bottom-color:var(--ink)}
.sheet th:first-child,.sheet td:first-child{padding-left:0}
.sheet .role{font-weight:600}
.sheet .where{text-align:right;white-space:nowrap;font-family:"Space Mono",ui-monospace,monospace;
  font-size:var(--small);letter-spacing:.1em;color:var(--quiet)}
.sheet .where.async{color:var(--accent);font-weight:700}
.sheet tbody tr{transition:background .35s var(--ease)}
.sheet tbody tr:hover{background:rgba(255,255,255,.04)}
.punch{margin-top:clamp(22px,2.2vw,42px);font-size:clamp(18px,1.9vw,32px);line-height:1.3;
  font-weight:600;letter-spacing:-.015em;max-width:26ch;color:var(--quiet)}
.punch em{font-style:normal;color:var(--accent);font-weight:700}

/* --------------------------------------------------------------- who it's for */
.rows{margin-top:clamp(30px,3.2vw,60px);border-top:var(--border) solid var(--line)}
.rows li{border-bottom:var(--border) solid var(--line)}

/* The row header is a real <button>: tab-reachable, Enter/Space for free, and
   it carries aria-expanded for the panel underneath. */
.rows .rowhead{
  width:100%;padding:clamp(18px,1.9vw,36px) 0;
  background:none;border:0;text-align:left;cursor:pointer;font:inherit;
  font-size:clamp(18px,2.2vw,38px);line-height:1.24;font-weight:600;letter-spacing:-.018em;
  display:flex;gap:clamp(14px,1.5vw,30px);align-items:baseline;color:var(--dim);
  transition:padding-left .55s var(--ease),color .45s var(--ease)}
.rows .rowhead:hover,.rows .rowhead:focus-visible{padding-left:clamp(10px,1.1vw,22px);color:var(--accent)}
.rows li.open .rowhead{color:var(--accent)}
.rows .rowhead b{font-family:"Space Mono",ui-monospace,monospace;font-size:var(--mono);
  font-weight:400;letter-spacing:.2em;color:var(--dim);flex:0 0 auto;
  transition:color .45s var(--ease)}
.rows .rowhead:hover b,.rows .rowhead:focus-visible b,.rows li.open .rowhead b{color:var(--accent)}
.rows .rowline{flex:1 1 auto;min-width:0}

/* a plus that becomes a minus — drawn, because there is no icon set here */
.rowmark{flex:0 0 auto;position:relative;align-self:center;
  width:clamp(15px,1.3vw,22px);height:clamp(15px,1.3vw,22px)}
.rowmark::before,.rowmark::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:var(--border);background:currentColor;transition:transform .5s var(--ease)}
.rowmark::after{transform:rotate(90deg)}
.rows li.open .rowmark::after{transform:rotate(0deg)}

/* 0fr -> 1fr animates a genuinely unknown height. max-height would need a
   magic number and would ease wrong on every row that is not that tall. */
.rowpanel{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease)}
.rowpanel > div{overflow:hidden}
.rows li.open .rowpanel{grid-template-rows:1fr;opacity:1}
.rowpanel p{max-width:56ch;padding:0 0 clamp(20px,2.1vw,40px);
  font-size:var(--body);line-height:1.6;font-weight:400;letter-spacing:0;color:#C9C9C3}
/* the row list already closes with a rule, so the turn line below it should
   not draw a second one a few pixels later */
.rows + .turn,.blk + .turn{border-top:0;margin-top:clamp(22px,2.2vw,42px);padding-top:0}

/* ------------------------------------------- what makes us different */
.blk{margin-top:clamp(44px,5vw,96px)}
.subhead{margin-top:clamp(14px,1.4vw,26px);
  font-family:Anton,"Anton fallback",Impact,"Arial Narrow",sans-serif;font-weight:400;
  font-size:clamp(24px,3.3vw,56px);line-height:1;letter-spacing:.006em;
  text-transform:uppercase;max-width:20ch}

/* Same hairline-grid construction as .offers: the gap IS the rule, so no cell
   ever needs its own border. One column on a phone, by default. */
.diffs{display:grid;gap:var(--border);margin-top:clamp(26px,2.8vw,52px);
  background:var(--line);border:var(--border) solid var(--line)}
@media (min-width:640px){.diffs{grid-template-columns:repeat(2,1fr)}
  /* the closed loop is the one nobody else can copy — give it the full width */
  .diffs li:last-child{grid-column:1/-1}}
.diff{background:var(--bg);padding:clamp(20px,2vw,40px);
  display:flex;flex-direction:column;gap:clamp(7px,.7vw,13px);
  transition:background .5s var(--ease)}
.diff:hover{background:#131315}
.diff b{font-family:"Space Mono",ui-monospace,monospace;font-size:var(--mono);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.diff h4{margin:0;font-size:var(--h3);line-height:1.16;font-weight:700;letter-spacing:-.02em}
.diff p{font-size:var(--body);line-height:1.55;color:#C9C9C3}

/* ------------------------------------------------------------- closing CTA */
/* Owner's call 2026-08-02: the closing block is black like the rest of the page.
   The partner band is now the only inverted surface on the site, which is the
   point — one white band, and it is the one carrying somebody else's logos. */
/* The homepage closer. It sits under the testimonials on the same black, so a
   hairline separates them rather than a colour change, and it is centred: one
   line and one button, nothing to scan past. */
.lastcall{padding:clamp(52px,6.5vw,120px) var(--pad);text-align:center;
  border-top:var(--border) solid var(--line)}
/* wide enough to hold one line on a desktop; balance stops "FOR" being
   orphaned on its own line when it does wrap */
.lastcall .h2{max-width:26ch;margin:0 auto;text-wrap:balance}
.lastcall .btn{margin-top:clamp(24px,2.8vw,46px);
  height:clamp(56px,3.9vw,68px);padding:0 clamp(26px,2.6vw,46px);
  font-size:clamp(13px,1vw,16px)}

.close{background:var(--bg);color:var(--ink);padding:clamp(56px,7vw,140px) var(--pad)}
.close .h2{max-width:16ch}
.close p{margin-top:clamp(18px,1.8vw,34px);max-width:42ch;font-size:var(--body);
  line-height:1.55;color:#C9C9C3}

.foot{border-top:var(--border) solid var(--line);
  padding:clamp(34px,3.4vw,64px) var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.foot .mark{width:clamp(26px,2.4vw,40px)}
.foot p{font-size:var(--small);color:var(--dim)}
/* The studio line takes the middle and centres in it. It used to be pushed
   right with margin-left:auto and ragged-right, which read as slanted. */
.foot .who{flex:1 1 auto;text-align:center;margin:0}
.foot .legal{margin-left:auto;text-align:right}
/* terms + data notice are 15px tall as inline text; grow the hit box to 44 */
.foot a{display:inline-flex;align-items:center;min-height:44px}

/* ------------------------------------------------------------ motion layer */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.split .w > i{display:inline-block;font-style:normal;transform:translateY(112%);
  transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.split.in .w > i,.ready .h1 .w > i{transform:translateY(0)}

.rise{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.rise.in{opacity:1;transform:none}
.ready .hero .rise{opacity:1;transform:none}

.reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms)}
.reveal-group.in .reveal{clip-path:inset(0 0 0 0)}

/* ---------------------------------------------------------------- ≤ 720px */
@media (max-width:720px){
  /* Everything moves into the menu, LOG IN and JOIN FREE included. Keeping the
     CTA in the bar alongside a burger overflows a 320px phone, and a returning
     user still has LOG IN one tap away with a real word on it. */
  .nav > a{display:none}
  .burger{display:flex}
  .menu.open{display:block}
  .nav{gap:14px}
  .hero .label .seg-mid{display:none}
  .strip{flex-wrap:wrap;height:auto}
  .frame{flex:1 1 50%;height:var(--strip-h)}
  .frame:nth-child(3){border-left:0}
  .frame:nth-child(3),.frame:nth-child(4){border-top:var(--border) solid var(--line)}
  /* a half-width panel cannot hold the title and the meta on one line */
  .cap{flex-direction:column;align-items:flex-start;gap:3px}
  .acts .btn{flex:1 1 100%}
  .head{max-width:none}
  .rows .rowhead{flex-wrap:wrap;gap:6px}
  .rows .rowline{flex:1 1 100%;order:3}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .split .w > i,.rise{transform:none!important;opacity:1!important}
  .strip,.reveal{clip-path:none!important}
  .rule i{transform:scaleX(1)!important}
  .rule::before,.rule::after{opacity:1!important}
  .rw i{transform:translateY(0)!important}
  .rw:not(.on){visibility:hidden}
  .mq-track{transform:none!important}
}