/* ============================================================
   BUREAU OF BAD BITCHES

   Editorial / soft neo-brutalist. Flat colour, visible structure,
   hard edges, solid offset shadows. Red is the statement colour and
   carries every large panel; pale pink and chartreuse are accents
   and never take over.

   The one exception to "no gradients" is .automagic, which is
   supposed to look like it does not belong to the rest of the page.

   PALETTE (the only five)
     --red       #AF1B08  hero, statements, major CTAs, big blocks
     --cream     #FFF3F5  main light ground, and type on red/espresso
     --espresso  #442C28  all type, outlines, borders, dark panels
     --pink      #F5CBD9  portrait outlines, stickers, smaller panels
     --chart     #CAC76A  highlighter only: badges, small callouts

   TYPE
     H1 / H2   Instrument Serif regular, -2px tracking
     H3        Instrument Serif italic,  -2px tracking
     H4/H5/H6  Gopher regular, uppercase (H6 at 2px tracking)
     body      Archivo

   Everything is sized with clamp() so the drama survives a phone.
   ============================================================ */

:root{
  --red:      #AF1B08;
  --cream:    #FFF3F5;
  --espresso: #442C28;
  --pink:     #F5CBD9;
  --chart:    #CAC76A;

  /* Derived, all from the five above */
  --ink:      var(--espresso);
  --ink-soft: #7A5F5A;                 /* 5.2:1 on cream */
  --line:     rgba(68,44,40,.20);      /* hairline rules and borders */
  --line-cream: rgba(255,243,245,.26);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-accent:  "Gopher", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --shell: 1240px;
  --pad: clamp(1.25rem, 4vw, 3.25rem);
  --radius: 3px;
  --bd: 2px solid var(--espresso);
  --header-h: 78px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px);
  -webkit-text-size-adjust:100%;
}

/* The panel takes over the viewport, so the page behind it holds still. */
html.sm-open{ overflow:hidden; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, .95rem + .22vw, 1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The staggered header is fixed, so the page starts below it. */
html.has-menu body{ padding-top:var(--header-h); }

img,svg{ max-width:100%; }
img{ height:auto; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4.5rem, 9vw, 8.5rem); }

/* ---------------- Type scale ---------------- */

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-2px; word-spacing:2px;
  margin:0 0 .4em;
  text-wrap:balance;
}
h1{ font-size:clamp(3rem, 8.2vw, 7.4rem); line-height:.9; }
h2{ font-size:clamp(2.3rem, 5.4vw, 4.5rem); line-height:.97; }
h3{ font-size:clamp(1.45rem, 2.6vw, 2.15rem); font-style:italic; line-height:1.08; }

h4,h5,h6{
  font-family:var(--font-accent);
  font-weight:400;
  text-transform:uppercase;
  margin:0 0 1rem;
  line-height:1.3;
}
h4{ font-size:clamp(.95rem, 1.25vw, 1.1rem); letter-spacing:.06em; }
h5{ font-size:clamp(.86rem, 1.05vw, .98rem); letter-spacing:.08em; }
h6{ font-size:clamp(.7rem, .82vw, .78rem); letter-spacing:2px; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

/* The eyebrow: an H6 treatment on something that is not a heading, so
   the outline stays H1 > H2 > H3 for screen readers and for search. */
.label{
  font-family:var(--font-accent);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(.7rem, .82vw, .78rem);
  letter-spacing:2px;
  line-height:1.4;
  color:var(--red);
  margin:0 0 1.35rem;
}
.label--cream{ color:var(--cream); }

/* ---------------- Accessibility ---------------- */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--espresso); color:var(--cream);
  padding:.9rem 1.3rem;
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.75rem;
  border:var(--bd);
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* Espresso ring by default; chartreuse where the ground is red or dark,
   so the indicator always clears 3:1 against what is behind it. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--espresso);
  outline-offset:3px;
  border-radius:1px;
}
.hero :focus-visible,
.ticker :focus-visible,
.statement :focus-visible,
.voice :focus-visible,
.missions :focus-visible,
.her :focus-visible,
.pricing :focus-visible,
.join :focus-visible,
.dial :focus-visible,
.site-footer :focus-visible{ outline-color:var(--chart); }

/* ---------------- Labels, tags, stickers ---------------- */

/* Printed ephemera: a rectangle, a thin espresso edge, a solid shadow. */
.tag{
  display:inline-block;
  font-family:var(--font-accent);
  text-transform:uppercase;
  font-size:clamp(.66rem, .78vw, .74rem);
  letter-spacing:2px;
  line-height:1.25;
  padding:.5rem .8rem;
  border:var(--bd);
  border-radius:var(--radius);
  box-shadow:3px 3px 0 var(--espresso);
  margin:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tag--red{ background:var(--red); color:var(--cream); }
.tag--pink{ background:var(--pink); color:var(--espresso); }
.tag--chart{ background:var(--chart); color:var(--espresso); }
.tag--cream{ background:var(--cream); color:var(--espresso); }

.tag span{
  font-family:var(--font-display);
  font-size:1.9em;
  letter-spacing:-1px;      /* -2px collides the digits at this size */
  vertical-align:-.08em;
  margin-right:.25em;
}

.sticker{
  position:absolute; z-index:4;
  display:block;
  filter:drop-shadow(0 0 0 transparent);
}

/* ---------------- Photo plates ----------------
   Every photograph is a <figure class="plate"> with a real <img>. When
   the file is missing main.js sets .is-empty and the frame below stands
   in: a flat panel, corner crop marks and a plate number. Nothing ever
   renders as a broken image.
   ------------------------------------------------------------------ */

.plate{
  position:relative;
  margin:0;
  border:var(--bd);
  border-radius:var(--radius);
  background:var(--pink);
  overflow:hidden;
  box-shadow:10px 10px 0 var(--espresso);
}
.plate img{ display:block; width:100%; height:auto; }
.plate picture{ display:block; }
.plate__caption{ display:none; }

/* A taller original held to an editorial 4:5. Nudge object-position to
   move the crop rather than re-exporting the file. */
.plate--crop:not(.is-empty) img{
  aspect-ratio:4 / 5;
  height:auto;
  object-fit:cover;
  object-position:50% 12%;
}

/* --- empty state --- */
.plate.is-empty{
  aspect-ratio:4 / 5;
  display:grid;
  place-content:center;
  gap:.6rem;
  text-align:center;
  padding:1.5rem;
  /* Flat tint, no graph paper. The crop marks below carry the placeholder
     read on their own. */
  background-color:var(--pink);
}
.plate.is-empty img{ display:none; }
.plate.is-empty::before{
  content:attr(data-plate);
  position:absolute; top:.7rem; left:.8rem;
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.66rem; letter-spacing:2px; color:var(--espresso);
}
/* corner crop marks */
.plate.is-empty::after{
  content:""; position:absolute; inset:.7rem; pointer-events:none;
  background:
    linear-gradient(var(--espresso),var(--espresso)) left top/14px 2px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) left top/2px 14px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) right top/14px 2px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) right top/2px 14px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) left bottom/14px 2px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) left bottom/2px 14px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) right bottom/14px 2px no-repeat,
    linear-gradient(var(--espresso),var(--espresso)) right bottom/2px 14px no-repeat;
}
.plate.is-empty .plate__caption{
  display:block;
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.7rem; letter-spacing:2px; line-height:1.5;
  color:var(--espresso);
  max-width:18ch;
  margin-inline:auto;
}
.plate--tall.is-empty{ aspect-ratio:3 / 4; }
.plate--pink.is-empty{ background-color:var(--pink); }
.plate--cream.is-empty{ background-color:var(--cream); }

/* A cutout PNG needs no frame at all: just the thick offset outline the
   art direction calls for, drawn with stacked drop-shadows. */
.plate--cutout:not(.is-empty){
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  filter:
    drop-shadow(3px 0 0 var(--pink))  drop-shadow(-3px 0 0 var(--pink))
    drop-shadow(0 3px 0 var(--pink))  drop-shadow(0 -3px 0 var(--pink))
    drop-shadow(12px 12px 0 rgba(68,44,40,.55));
}

/* ---------------- Buttons ----------------
   Admission tickets, not SaaS pills: square-ish, thin espresso edge,
   solid offset shadow, Gopher uppercase, a small arrow.
   ------------------------------------------------------------------ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-accent);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:clamp(.76rem, .9vw, .84rem);
  line-height:1;
  padding:1.05rem 1.55rem;
  border:var(--bd);
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  background:var(--cream);
  color:var(--espresso);
  box-shadow:4px 4px 0 var(--espresso);
  transition:transform .16s ease, box-shadow .16s ease,
             background-color .16s ease, color .16s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--espresso); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--espresso); }

.btn__arrow{ font-size:1.1em; line-height:0; transition:transform .16s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

.btn--red{ background:var(--red); color:var(--cream); }
.btn--dark{ background:var(--espresso); color:var(--cream); }
.btn--cream{ background:var(--cream); color:var(--espresso); }

.btn--ghost-cream{
  background:transparent; color:var(--cream);
  border-color:var(--cream); box-shadow:4px 4px 0 var(--espresso);
}
.btn--ghost-cream:hover{ background:var(--cream); color:var(--espresso); }

.btn--tilt{ transform:rotate(-1.4deg); }
.btn--tilt:hover{ transform:rotate(0deg) translate(-2px,-2px); }
.btn--tilt:active{ transform:rotate(0deg) translate(2px,2px); }

.btn--sm{ padding:.72rem 1.05rem; font-size:.72rem; box-shadow:3px 3px 0 var(--espresso); }
.btn--lg{ padding:1.35rem 2.4rem; font-size:clamp(.86rem, 1.05vw, .96rem); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; box-shadow:2px 2px 0 var(--espresso); }

/* ============================================================
   THE HEADER
   Two of them: the plain one that ships in the markup for the no-JS
   case, and the staggered menu that replaces it.
   ============================================================ */

.nojs-header{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  border-bottom:var(--bd);
}
.nojs-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:var(--header-h); flex-wrap:wrap;
}
.wordmark{ display:flex; text-decoration:none; }
.wordmark img{ display:block; width:auto; height:46px; }

.nojs-nav{ display:flex; align-items:center; gap:clamp(.9rem, 2.2vw, 2rem); flex-wrap:wrap; }
.nojs-nav a{
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.72rem;
  text-decoration:none; padding-block:.3rem;
  border-bottom:2px solid transparent;
}
.nojs-nav a:hover{ border-bottom-color:var(--red); }

/* ---------------- Staggered menu ----------------
   Upstream class names, repainted. The wrapper is fixed and inert; only
   the header bar and the panel take pointer events.
   ------------------------------------------------------------------ */

.staggered-menu-wrapper{
  position:fixed; inset:0;
  z-index:120;
  pointer-events:none;
  overflow:hidden;
}

.staggered-menu-header{
  position:absolute; top:0; left:0; width:100%;
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-inline:var(--pad);
  background:var(--cream);
  border-bottom:var(--bd);
  pointer-events:none;
  z-index:20;
}
.staggered-menu-header > *{ pointer-events:auto; }

.sm-logo{ display:flex; align-items:center; user-select:none; text-decoration:none; }
.sm-logo-img{ display:block; height:44px; width:auto; object-fit:contain; }

.sm-toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--cream);
  border:var(--bd);
  border-radius:var(--radius);
  box-shadow:3px 3px 0 var(--espresso);
  padding:.7rem 1rem;
  cursor:pointer;
  color:var(--espresso);
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.72rem;
  line-height:1;
  overflow:visible;
  transition:transform .16s ease, box-shadow .16s ease;
}
.sm-toggle:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--espresso); }
.sm-toggle:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--espresso); }

.sm-toggle-textWrap{
  position:relative; display:inline-block;
  height:1em; overflow:hidden; white-space:nowrap;
  width:4.4em; min-width:4.4em;      /* fits CLOSE at 2px tracking */
  text-align:left;
}
.sm-toggle-textInner{ display:flex; flex-direction:column; line-height:1; }
.sm-toggle-line{ display:block; height:1em; line-height:1; }

.sm-icon{
  position:relative;
  width:14px; height:14px; flex:0 0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  will-change:transform;
}
.sm-icon-line{
  position:absolute; left:50%; top:50%;
  width:100%; height:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.sm-icon-line-v{ transform:translate(-50%,-50%) rotate(90deg); }

.sm-prelayers{
  position:absolute; top:0; right:0; bottom:0;
  width:clamp(280px, 40vw, 460px);
  pointer-events:none;
  z-index:5;
}
[data-position='left'] .sm-prelayers{ right:auto; left:0; }
.sm-prelayer{
  position:absolute; top:0; right:0;
  height:100%; width:100%;
  border-left:var(--bd);
}

.staggered-menu-panel{
  position:absolute; top:0; right:0;
  width:clamp(280px, 40vw, 460px);
  height:100%;
  background:var(--cream);
  border-left:var(--bd);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 2.5rem) clamp(1.5rem,3vw,2.5rem) 2rem;
  overflow-y:auto;
  z-index:10;
  pointer-events:auto;
}
[data-position='left'] .staggered-menu-panel{ right:auto; left:0; border-left:0; border-right:var(--bd); }

.sm-panel-inner{ flex:1; display:flex; flex-direction:column; gap:1.25rem; }

.sm-panel-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.sm-panel-itemWrap{ position:relative; overflow:hidden; line-height:1; }

.sm-panel-item{
  position:relative;
  /* Block, not inline-block: the counters below hang off the right edge
     and would otherwise sit at a different x for every item. */
  display:block;
  color:var(--espresso);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.4vw, 3.1rem);
  line-height:1.06;
  letter-spacing:-2px; word-spacing:2px;
  text-decoration:none;
  cursor:pointer;
  padding-right:2.2rem;
  transition:color .25s ease;
}
.sm-panel-itemLabel{ display:inline-block; will-change:transform; transform-origin:50% 100%; }
.sm-panel-item:hover{ color:var(--sm-accent, var(--red)); }

.sm-panel-list[data-numbering]{ counter-reset:smItem; }
.sm-panel-list[data-numbering] .sm-panel-item::after{
  counter-increment:smItem;
  content:counter(smItem, decimal-leading-zero);
  position:absolute; top:.5em; right:0;
  font-family:var(--font-accent);
  font-size:.72rem; letter-spacing:2px;
  color:var(--sm-accent, var(--red));
  pointer-events:none; user-select:none;
  opacity:var(--sm-num-opacity, 0);
}

.sm-socials{
  margin-top:auto; padding-top:2rem;
  border-top:var(--bd);
  display:flex; flex-direction:column; gap:.75rem;
}
.sm-socials-title{
  margin:0;
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.72rem; letter-spacing:2px; font-weight:400;
  color:var(--sm-accent, var(--red));
}
.sm-socials-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.5rem;
}
.sm-socials-link{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--espresso);
  text-decoration:none;
  display:inline-block;
  border-bottom:2px solid transparent;
  transition:color .3s ease, opacity .3s ease, border-color .3s ease;
}
.sm-socials-link:hover{ color:var(--sm-accent, var(--red)); border-bottom-color:currentColor; }
.sm-socials-list:hover .sm-socials-link:not(:hover){ opacity:.4; }
.sm-socials-list:focus-within .sm-socials-link:not(:focus-visible){ opacity:.4; }

/* ============================================================
   01  HERO
   ============================================================ */

.hero{
  position:relative;
  background:var(--red);
  color:var(--cream);
  border-bottom:var(--bd);
  padding-block:clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:1; }

.hero__meta{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line-cream);
  padding-bottom:1rem;
  margin-bottom:clamp(1.75rem, 3.5vw, 3rem);
}
.hero__meta .label{ margin:0; }
.hero__meta-right{ text-align:right; }

.hero__title{ margin:0 0 clamp(1.5rem, 3vw, 2.5rem); }
.hero__title span{ display:block; }
.hero__title em{ font-style:normal; color:var(--pink); }

.hero__body{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

.hero__lede{
  font-size:clamp(1.15rem, 1.7vw, 1.55rem);
  line-height:1.4;
  max-width:34ch;
  color:var(--cream);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 1.75rem; }
.hero__micro{
  font-size:.92rem; max-width:44ch;
  color:var(--pink);
  border-left:3px solid var(--chart);
  padding-left:1rem;
}

/* The portrait is pulled up so it shares space with the headline rather
   than sitting politely under it. */
.hero__art{ position:relative; }
.hero__tag-price{ position:absolute; left:-1.5rem; bottom:26%; transform:rotate(-4deg); z-index:5; }
.hero__tag-cancel{ position:absolute; right:-.5rem; top:12%; transform:rotate(3deg); z-index:5; }
.hero__sticker{ left:-2.25rem; top:6%; width:clamp(56px, 6vw, 76px); }
.hero__art:hover .tag{ box-shadow:5px 5px 0 var(--espresso); }

/* ============================================================
   TICKERS
   ============================================================ */

.ticker{ overflow:hidden; border-bottom:var(--bd); padding-block:.9rem; }
.ticker--espresso{ background:var(--espresso); color:var(--cream); }
.ticker--chart{ background:var(--chart); color:var(--espresso); }

.ticker__track{ display:flex; width:max-content; animation:ticker-slide 46s linear infinite; }
.ticker__track--rev{ animation-direction:reverse; animation-duration:52s; }
.ticker__group{ display:flex; align-items:center; gap:2.25rem; padding-right:2.25rem; white-space:nowrap; }
.ticker__group span{
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:clamp(.76rem, .9vw, .86rem);
}
.ticker__group b{ font-size:.85rem; }
.ticker--espresso .ticker__group b{ color:var(--chart); }
.ticker--chart .ticker__group b{ color:var(--red); }
.ticker:hover .ticker__track{ animation-play-state:paused; }

@keyframes ticker-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   03  THE LEDGER
   ============================================================ */

.ledger{ background:var(--cream); border-bottom:var(--bd); }
.ledger__inner{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:start;
}
.ledger__head{ position:sticky; top:calc(var(--header-h) + 2rem); align-self:start; }
.ledger__title{ margin:0; }

.ledger__list{
  list-style:none; margin:0; padding:0;
  counter-reset:ledger;
  border-top:var(--bd);
}
.ledger__list li{
  counter-increment:ledger;
  position:relative;
  border-bottom:1px solid var(--line);
  padding:1.1rem 0 1.1rem 3.4rem;
  font-size:clamp(1.05rem, 1.55vw, 1.35rem);
  line-height:1.35;
}
.ledger__list li::before{
  content:counter(ledger, decimal-leading-zero);
  position:absolute; left:0; top:1.35rem;
  font-family:var(--font-accent);
  font-size:.72rem; letter-spacing:2px;
  color:var(--red);
}
.ledger__list li:last-child{ border-bottom:var(--bd); }
.ledger__list b{
  font-family:var(--font-display);
  font-weight:400; font-style:italic;
  letter-spacing:-1px;
  font-size:1.22em;
  color:var(--red);
}

/* ============================================================
   STATEMENTS
   ============================================================ */

.statement{
  position:relative;
  background:var(--red);
  color:var(--cream);
  border-bottom:var(--bd);
  padding-block:clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  overflow:hidden;
}
.statement__inner{ width:100%; }
.statement__intro{ position:relative; z-index:2; margin-bottom:clamp(1.5rem, 3vw, 2.5rem); }
.statement__intro .label{ margin:0; max-width:44ch; }

.mega{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-2px; word-spacing:2px;
  font-size:clamp(2.6rem, 11.4vw, 9.5rem);
  line-height:.88;
  margin:0;
  text-align:center;
  text-wrap:nowrap;
  color:var(--cream);
  text-shadow:5px 5px 0 var(--espresso);
}
.mega span{ display:block; }
.mega em{ font-style:normal; color:var(--chart); }

/* Angled flag, pinned to the top corner of the panel. */
.flag{
  position:absolute; top:clamp(1.25rem, 3vw, 2.5rem); right:clamp(-1.5rem, -.5vw, -.5rem);
  transform:rotate(9deg);
  z-index:5;
  background:var(--chart); color:var(--espresso);
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:clamp(.72rem, .9vw, .82rem);
  padding:.6rem 2.5rem;
  border:var(--bd);
  box-shadow:4px 4px 0 var(--espresso);
  margin:0;
}

.statement__sticker-a{ left:4%; top:16%; width:clamp(48px, 6vw, 86px); }
.statement__sticker-b{ right:7%; bottom:26%; width:clamp(42px, 5vw, 74px); }

.statement__foot{
  position:relative; z-index:2;
  margin-top:clamp(2rem, 4vw, 3.25rem);
  padding-top:clamp(1.5rem, 3vw, 2.25rem);
  border-top:1px solid var(--line-cream);
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:end;
}
.statement__quote{
  font-family:var(--font-display);
  font-style:italic;
  letter-spacing:-1px; word-spacing:1px;
  font-size:clamp(1.35rem, 2.2vw, 2.05rem);
  line-height:1.24;
  max-width:40ch;
  margin:0;
}
.statement__quote em{ font-style:normal; color:var(--chart); }
.statement__attr{ margin:0; text-align:right; }

/* The "off your plate" statement carries a list, so its foot is a
   three part stack rather than a quote with an attribution. */
.statement__foot--wide{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.cares{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.7rem;
  grid-row:span 2;
}
.cares li{
  position:relative;
  padding-left:1.6rem;
  font-size:clamp(.95rem, 1.1vw, 1.05rem);
  line-height:1.45;
  color:var(--pink);
}
.cares li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; background:var(--chart);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.statement__close{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.3rem, 2vw, 1.85rem);
  letter-spacing:-1px; line-height:1.25;
  max-width:32ch;
  margin:1.5rem 0 0;
}
.statement__close em{ font-style:normal; color:var(--chart); }

/* ============================================================
   05  THE MANIFESTO
   ============================================================ */

.manifesto{ background:var(--pink); border-bottom:var(--bd); }
.manifesto__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  grid-template-areas:
    "head art"
    "body art";
  column-gap:clamp(2.5rem, 6vw, 5.5rem);
  row-gap:clamp(2rem, 4vw, 3rem);
  align-items:start;
}
.manifesto__head{ grid-area:head; }
.manifesto__body{ grid-area:body; }
.manifesto__art{ grid-area:art; position:relative; align-self:start; }

.manifesto__title{ margin:0; }
.manifesto__title em{ color:var(--red); font-style:normal; }
.manifesto__tag{ position:absolute; left:-1.25rem; bottom:2rem; transform:rotate(-3deg); z-index:5; }

.manifesto__lede{
  font-size:clamp(1.05rem, 1.4vw, 1.28rem);
  line-height:1.5;
  max-width:52ch;
  margin-bottom:2rem;
}
.manifesto__body p{ color:#5B3B39; max-width:56ch; }

/* The three one-line beats, set big and stacked. */
.manifesto__stack{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.6vw, 2.25rem);
  line-height:1.12; letter-spacing:-2px; word-spacing:2px;
  color:var(--espresso) !important;
  margin-bottom:.6em;
  max-width:22ch !important;
}
.manifesto__stack--hot{
  color:var(--red) !important;
  border-left:4px solid var(--red);
  padding-left:1rem;
  margin-top:1.6rem;
}

.swap{
  list-style:none; margin:2.25rem 0 0; padding:0;
  border-top:var(--bd);
}
.swap li{ border-bottom:1px solid var(--espresso); padding:1.25rem 0; }
.swap li:last-child{ border-bottom:var(--bd); }
.swap__you{
  font-family:var(--font-body);
  font-style:normal; font-weight:600;
  letter-spacing:0;
  font-size:clamp(1rem, 1.2vw, 1.12rem);
  line-height:1.3;
  margin:0 0 .35rem;
  color:var(--espresso);
}
.swap li p{ margin:0; font-size:.97rem; line-height:1.55; }

.manifesto__kicker{
  background:var(--red);
  color:var(--cream) !important;
  border:var(--bd);
  padding:1.35rem 1.5rem;
  margin-top:2rem;
  box-shadow:6px 6px 0 var(--espresso);
  max-width:none !important;
}
.manifesto__kicker em{ font-style:normal; color:var(--chart); }

/* ============================================================
   06  THE METHOD  (and the one Automagically)
   ============================================================ */

.method{ background:var(--cream); border-bottom:var(--bd); }
.method__head{ max-width:36ch; margin-bottom:clamp(2.5rem, 5vw, 3.75rem); }
.method__head h2{ margin-bottom:.3em; }
.method__lede{ font-size:clamp(1.02rem, 1.25vw, 1.18rem); color:var(--ink-soft); }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:var(--bd);
  border-left:var(--bd);
}
.step{
  border-right:var(--bd);
  border-bottom:var(--bd);
  padding:clamp(1.5rem, 2.6vw, 2.25rem);
  background:var(--cream);
  transition:background-color .2s ease;
}
.step:hover{ background:var(--pink); }
.step__num{
  font-family:var(--font-accent);
  font-size:.72rem; letter-spacing:2px;
  color:var(--red);
  margin:0 0 1.25rem;
}
.step__name{
  font-family:var(--font-display);
  font-style:normal;
  letter-spacing:-2px; word-spacing:2px;
  font-size:clamp(1.7rem, 2.4vw, 2.2rem);
  line-height:1.02;
  margin:0 0 .5rem;
}
.step__lead{
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  margin-bottom:.75rem;
}
.step__body{ font-size:.95rem; line-height:1.55; color:var(--ink-soft); }
.step__tail{
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.7rem; letter-spacing:2px; line-height:1.5;
  color:var(--red);
  margin:1.1rem 0 0;
  padding-top:.9rem;
  border-top:1px solid var(--line);
}

.equation{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  border:var(--bd);
  border-radius:var(--radius);
  background:var(--espresso);
  color:var(--cream);
  padding:clamp(1.75rem, 4vw, 3rem);
  box-shadow:10px 10px 0 var(--red);
  text-align:center;
}
.equation__line{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3.4vw, 3rem);
  line-height:1.12;
  letter-spacing:-2px; word-spacing:2px;
  margin:0 0 1.25rem;
}
.equation__line span[aria-hidden]{ color:var(--pink); padding-inline:.15em; }
.equation__note{
  max-width:62ch; margin-inline:auto;
  font-size:clamp(.97rem, 1.1vw, 1.06rem);
  line-height:1.55;
  color:var(--pink);
}

/* ---------------- Automagically ----------------
   The one gradient on the site, and the only element that animates its
   own paint. background-clip:text needs the transparent fill, and the
   over-wide background is what gives the sweep something to move
   through. Falls back to chartreuse where background-clip is not
   supported, and holds still under reduced motion.
   ------------------------------------------------------------------ */

.automagic{
  position:relative;
  display:inline-block;
  color:var(--chart);
  font-style:italic;
  cursor:pointer;
  outline-offset:6px;
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  .automagic{
    background-image:linear-gradient(
      100deg,
      #FF4D4D 0%, #FF9E2C 14%, #FFE234 28%, #64D96B 42%,
      #35C6E8 56%, #6D6BF5 70%, #C55BF0 84%, #FF4D4D 100%
    );
    background-size:260% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:automagic-sweep 6s linear infinite;
  }
}

.automagic:hover,
.automagic:focus-visible{ animation-duration:1.6s; }

@keyframes automagic-sweep{
  from{ background-position:0% 50%; }
  to{ background-position:260% 50%; }
}

/* The confetti lives in a fixed layer above everything and never takes
   a click. Particles are positioned from the top left and moved with
   translate3d, so they never trigger layout. */
.confetti-layer{
  position:fixed; inset:0;
  z-index:400;
  pointer-events:none;
  overflow:hidden;
}
.confetti-bit{
  position:absolute; top:0; left:0;
  display:block;
  border-radius:1px;
  will-change:transform, opacity;
}

/* ============================================================
   07  THE VOICE
   ============================================================ */

.voice{ background:var(--espresso); color:var(--cream); border-bottom:var(--bd); }
.voice__inner{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.voice__art{ position:relative; }
.voice__art .plate{ box-shadow:10px 10px 0 var(--red); }
.voice__tag{ position:absolute; right:-1.25rem; top:8%; transform:rotate(3deg); z-index:5; max-width:12rem; }
.voice__sticker{ left:-1.75rem; bottom:-1.75rem; width:clamp(56px, 6vw, 76px); }

.voice__title{ color:var(--cream); margin-bottom:.5em; }
.voice__title em{ font-style:normal; color:var(--chart); }
.voice__body p{ color:var(--pink); max-width:58ch; }

.voice__pull{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.45rem, 2.4vw, 2.1rem); line-height:1.22;
  letter-spacing:-1px; word-spacing:1px;
  color:var(--chart) !important;
  border-top:1px solid var(--line-cream);
  border-bottom:1px solid var(--line-cream);
  padding-block:1.25rem;
  margin-bottom:2rem !important;
  max-width:30ch !important;
}
.voice__kicker{
  background:var(--red);
  color:var(--cream) !important;
  border:2px solid var(--cream);
  padding:1.35rem 1.5rem;
  margin-top:2rem;
  box-shadow:6px 6px 0 var(--chart);
}

/* ============================================================
   08  THE MISSIONS  (depth carousel)
   ============================================================ */

.missions{ background:var(--red); color:var(--cream); border-bottom:var(--bd); }
.missions__head{ max-width:44ch; margin-bottom:clamp(2.5rem, 5vw, 3.5rem); }
.missions__head h2{ color:var(--cream); margin-bottom:.3em; }
.missions__lede{ color:var(--pink); font-size:clamp(1.02rem, 1.25vw, 1.18rem); max-width:52ch; }

.missions__stage{ position:relative; }

/* Before the carousel exists, and forever if JS never runs, the three
   missions are an ordinary card row. */
.missions__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.25rem, 2.2vw, 1.75rem);
}
.mission{
  background:var(--cream);
  color:var(--ink);
  border:var(--bd);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 2.2vw, 1.9rem);
  box-shadow:6px 6px 0 var(--espresso);
}

/* Once main.js has built the carousel the stage owns its own height and
   the cards paint themselves. */
.missions__stage.is-carousel{ height:clamp(560px, 74vh, 660px); }

.depth-carousel{
  position:relative;
  width:100%; height:100%;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
  perspective:var(--dc-perspective, 1400px);
  perspective-origin:50% 50%;
  touch-action:pan-y;
  outline:none;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.depth-carousel:active{ cursor:grabbing; }
.depth-carousel:focus-visible{ outline:3px solid var(--chart); outline-offset:6px; }

.depth-carousel__stage{ position:absolute; inset:0; transform-style:preserve-3d; }

.depth-carousel__card{
  position:absolute; top:50%; left:50%;
  transform-origin:center center;
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:var(--cream);
  color:var(--ink);
  border:var(--bd);
  /* The one place the house's hard offset shadow is wrong: on a stack
     that recedes in 3D it reads as a black slab behind each card, not
     as depth. A soft shadow is what separates them here. */
  box-shadow:0 26px 50px -26px rgba(23,8,5,.85);
  will-change:transform, opacity, filter;
  cursor:pointer;
}
.depth-carousel__img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
}
.depth-carousel__tint{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  mix-blend-mode:multiply;
}
.depth-carousel__body{
  position:relative; z-index:1;
  height:100%;
  overflow:hidden;
  padding:clamp(1.1rem, 1.6vw, 1.5rem);
  display:flex; flex-direction:column;
}

.depth-carousel__arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:3000;
  width:46px; height:46px;
  display:grid; place-items:center;
  border:var(--bd);
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--espresso);
  cursor:pointer;
  box-shadow:3px 3px 0 var(--espresso);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.depth-carousel__arrow:hover{ background:var(--chart); }
.depth-carousel__arrow:active{ transform:translateY(-50%) translate(2px,2px); box-shadow:1px 1px 0 var(--espresso); }
.depth-carousel__arrow--prev{ left:0; }
.depth-carousel__arrow--next{ right:0; }

.depth-carousel__dots{
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  z-index:3000;
  display:flex; gap:8px;
  padding:8px 12px;
  border:var(--bd);
  border-radius:var(--radius);
  background:var(--cream);
  box-shadow:3px 3px 0 var(--espresso);
}
.depth-carousel__dot{
  width:8px; height:8px; padding:0;
  border:none; border-radius:0;
  background:rgba(68,44,40,.3);
  cursor:pointer;
  transition:width .25s ease, background-color .25s ease;
}
.depth-carousel__dot.is-active{ width:22px; background:var(--red); }

/* --- the card contents, shared by the list and the carousel --- */
.mission .plate,
.depth-carousel__card .plate{
  box-shadow:4px 4px 0 var(--espresso);
  margin-bottom:1rem;
}
.plate--mission:not(.is-empty) img{ aspect-ratio:16 / 9; object-fit:cover; }
.plate--mission.is-empty{ aspect-ratio:16 / 9; padding:1rem; }
.plate--mission.is-empty .plate__caption{ font-size:.62rem; }

.mission__num{
  font-family:var(--font-accent);
  font-size:.72rem; letter-spacing:2px;
  color:var(--red);
  margin:0 0 .5rem;
}
.mission__name{
  font-family:var(--font-display);
  font-style:normal;
  letter-spacing:-2px; word-spacing:2px;
  font-size:clamp(1.5rem, 2vw, 1.85rem);
  line-height:1.02;
  margin:0 0 .6rem;
}
.mission__copy{ font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin-bottom:.8rem; }
.mission__roles{ font-size:.85rem; line-height:1.5; color:var(--ink-soft); margin-bottom:.8rem; }
.mission__kicker{
  margin:auto 0 0;
  padding-top:.8rem;
  border-top:1px solid var(--line);
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.66rem; letter-spacing:2px; line-height:1.5;
  color:var(--red);
}
.mission__kicker em{ font-style:normal; }

/* ============================================================
   10  FROM ZERO
   ============================================================ */

.zero{ background:var(--cream); border-bottom:var(--bd); }
.zero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.zero__head h2{ margin-bottom:.3em; }
.zero__head em{ font-style:normal; color:var(--red); }
.zero__lede{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing:-1px;
  color:var(--red);
  margin:0;
}
.zero__body p{ color:var(--ink-soft); max-width:52ch; }

.nots{
  list-style:none; margin:0 0 1.75rem; padding:0;
  border-top:var(--bd);
}
.nots li{
  border-bottom:1px solid var(--line);
  padding:.8rem 0 .8rem 1.8rem;
  position:relative;
  font-size:1rem;
  line-height:1.4;
}
.nots li:last-child{ border-bottom:var(--bd); }
/* A struck-through cross, because every line is something you do NOT need. */
.nots li::before{
  content:"";
  position:absolute; left:0; top:1.2em;
  width:12px; height:2px;
  background:var(--red);
}
.zero__kicker{
  background:var(--chart);
  color:var(--espresso) !important;
  border:var(--bd);
  padding:1.35rem 1.5rem;
  margin-top:2rem;
  box-shadow:6px 6px 0 var(--espresso);
  max-width:none !important;
}

/* ============================================================
   12  THE INTEGRATION LAYER
   ============================================================ */

.layer{ background:var(--pink); border-bottom:var(--bd); }
.layer__inner{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.layer__head h2{ margin:0; }
.layer__head em{ font-style:normal; color:var(--red); }
.layer__body p{ color:#5B3B39; max-width:54ch; }
.layer__body em{ font-style:normal; font-weight:600; color:var(--red); }

.layer__lede{
  font-size:clamp(1.08rem, 1.45vw, 1.32rem);
  line-height:1.45;
  color:var(--espresso) !important;
  margin-bottom:1.5rem;
}
.layer__shout{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 3vw, 2.6rem);
  line-height:1.06; letter-spacing:-2px; word-spacing:2px;
  color:var(--red) !important;
  border-left:4px solid var(--red);
  padding-left:1rem;
  margin-block:1.5rem;
  max-width:20ch !important;
}
.layer__kicker{
  background:var(--espresso);
  color:var(--cream) !important;
  border:var(--bd);
  padding:1.35rem 1.5rem;
  margin-top:2rem;
  box-shadow:6px 6px 0 var(--red);
  max-width:none !important;
  font-size:1.05rem;
}

/* ============================================================
   13  WHAT WE DO NOT AUTOMATE
   ============================================================ */

.keep{ background:var(--cream); border-bottom:var(--bd); }
.keep__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  grid-template-areas:
    "head art"
    "body art";
  column-gap:clamp(2.5rem, 6vw, 5rem);
  row-gap:clamp(2rem, 4vw, 3rem);
  align-items:start;
}
.keep__head{ grid-area:head; }
.keep__body{ grid-area:body; }
.keep__art{ grid-area:art; position:relative; align-self:start; }

.keep__title{ margin:0 0 .3em; }
.keep__title em{ font-style:normal; color:var(--red); }
.keep__lede{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.35rem, 2.2vw, 1.95rem);
  letter-spacing:-1px; line-height:1.2;
  color:var(--red);
  margin:0;
}
.keep__body p{ color:var(--ink-soft); max-width:56ch; }
.keep__pull{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.3vw, 2rem);
  line-height:1.15; letter-spacing:-2px; word-spacing:2px;
  color:var(--espresso) !important;
  border-top:var(--bd);
  padding-top:1.25rem;
  margin-block:1.75rem;
  max-width:34ch !important;
}

/* Three tiers of work, colour coded from "yours" to "gone". */
.tiers{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
}
.tier{
  border:var(--bd);
  border-radius:var(--radius);
  padding:1.25rem 1.4rem;
  box-shadow:5px 5px 0 var(--espresso);
}
.tier__label{
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.7rem; letter-spacing:2px;
  margin:0 0 .5rem;
}
.tier__copy{ margin:0; font-size:.95rem; line-height:1.5; max-width:none !important; }
.tier--keep{ background:var(--chart); }
.tier--keep .tier__label{ color:var(--espresso); }
.tier--keep .tier__copy{ color:var(--espresso) !important; }
.tier--teach{ background:var(--pink); }
.tier--teach .tier__label{ color:var(--red); }
.tier--teach .tier__copy{ color:#5B3B39 !important; }
.tier--gone{ background:var(--espresso); }
.tier--gone .tier__label{ color:var(--chart); }
.tier--gone .tier__copy{ color:var(--pink) !important; }

/* ============================================================
   14  WHO IT IS FOR
   ============================================================ */

.her{ background:var(--espresso); color:var(--cream); border-bottom:var(--bd); }
.her__inner{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.her__art{ position:relative; }
.her__art .plate{ box-shadow:10px 10px 0 var(--red); }
.her__tag-name{ position:absolute; left:-1.25rem; top:16%; transform:rotate(-4deg); z-index:5; }
.her__tag-role{ position:absolute; right:-1.5rem; bottom:2%; transform:rotate(2.5deg); z-index:5; max-width:15rem; }
.her__art:hover .tag{ box-shadow:5px 5px 0 var(--espresso); }

.her__title{ color:var(--cream); margin-bottom:.5em; }
.her__title em{ font-style:italic; color:var(--chart); }
.her__body p{ color:var(--pink); max-width:58ch; }
.her__pull{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.45rem, 2.4vw, 2.1rem); line-height:1.22;
  letter-spacing:-1px; word-spacing:1px;
  color:var(--chart) !important;
  border-top:1px solid var(--line-cream);
  border-bottom:1px solid var(--line-cream);
  padding-block:1.25rem;
  margin-bottom:2rem !important;
  max-width:30ch !important;
}
.her__kicker{
  background:var(--red);
  color:var(--cream) !important;
  border:2px solid var(--cream);
  padding:1.35rem 1.5rem;
  margin-top:2rem;
  box-shadow:6px 6px 0 var(--chart);
}

/* ============================================================
   15  PRICING
   ============================================================ */

.pricing{ background:var(--red); color:var(--cream); border-bottom:var(--bd); }
.pricing__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.pricing__head .label{ color:var(--chart); }
.pricing__title{ color:var(--cream); margin-bottom:.15em; }
.pricing__figure{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing:-2px;
  color:var(--chart);
  margin-bottom:1.5rem;
  line-height:1;
}
.pricing__figure span{
  display:block;
  font-size:clamp(4.5rem, 12vw, 8.5rem);
  line-height:.9;
  text-shadow:5px 5px 0 var(--espresso);
}
.pricing__lede{ color:var(--pink); max-width:44ch; font-size:1.02rem; }

.pricing__card{
  background:var(--cream);
  color:var(--ink);
  border:var(--bd);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3vw, 2.4rem);
  box-shadow:12px 12px 0 var(--espresso);
}
.pricing__sub{
  font-family:var(--font-accent); font-style:normal;
  text-transform:uppercase; font-size:.74rem; letter-spacing:2px;
  color:var(--red);
  margin:0 0 1.25rem;
}
.ticklist{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.7rem; }
.ticklist li{
  position:relative; padding-left:1.7rem;
  font-size:.97rem; line-height:1.45;
}
.ticklist li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:10px; height:10px; background:var(--chart);
  border:1px solid var(--espresso);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.pricing__note{
  font-size:.93rem; line-height:1.55; color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  margin-bottom:1.5rem;
}
.pricing__fine{
  margin:1rem 0 0; text-align:center;
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.68rem; letter-spacing:2px; color:var(--ink-soft);
}

/* ============================================================
   16  THE DESK
   ============================================================ */

.desk{ background:var(--cream); border-bottom:var(--bd); }
.desk__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.desk__intro{ max-width:46ch; color:var(--ink-soft); margin-bottom:2rem; }

.form{
  background:var(--cream);
  border:var(--bd);
  border-radius:var(--radius);
  padding:clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:10px 10px 0 var(--espresso);
}
.hp{ position:absolute; left:-9999px; }

.field{ margin-bottom:1.15rem; }
.field label{
  display:block; margin-bottom:.45rem;
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.68rem;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff;
  border:2px solid rgba(68,44,40,.35);
  border-radius:var(--radius);
  padding:.8rem .9rem;
  transition:border-color .15s ease;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--espresso); }
.field.is-invalid input,.field.is-invalid textarea{ border-color:var(--red); }

.field__error{ margin:.4rem 0 0; font-size:.82rem; color:var(--red); font-weight:600; }

.form__status{ margin:1rem 0 0; font-size:.92rem; font-weight:600; }
.form__status.is-error{ color:var(--red); }
.form__status.is-ok{ color:#1F6B3F; }

.form.is-sent .field,.form.is-sent .btn{ display:none; }
.form__sent{ text-align:center; padding:1rem 0; }
.form__sent h3{ margin-bottom:.3em; }
.form__sent p{ color:var(--ink-soft); }

.desk__aside{ margin-top:2rem; border-top:var(--bd); padding-top:1.5rem; }
.desk__aside-head{
  font-family:var(--font-accent); font-style:normal;
  text-transform:uppercase; font-size:.72rem; letter-spacing:2px;
  margin:0 0 .6rem;
}
.desk__aside a{ color:var(--red); text-underline-offset:4px; }
.desk__sig{
  font-family:var(--font-display); font-style:italic;
  font-size:1.7rem; letter-spacing:-2px; word-spacing:2px;
  color:var(--red); margin-top:.75rem;
}

/* ============================================================
   17  FINAL CTA
   ============================================================ */

.join{
  background:var(--red);
  color:var(--cream);
  border-bottom:var(--bd);
  padding-block:clamp(4.5rem, 10vw, 9rem);
  text-align:center;
}
.join__inner{ display:grid; justify-items:center; }
.join__title{
  font-size:clamp(2.5rem, 8.4vw, 7rem);
  line-height:.92;
  color:var(--cream);
  margin:0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.join__title span{ display:block; }
.join__title em{ font-style:normal; color:var(--chart); }

.join__copy{ max-width:60ch; margin-bottom:2.25rem; }
.join__copy p{ color:var(--pink); font-size:1.02rem; }

.deal{
  list-style:none; margin:0 0 1.25rem; padding:0;
  counter-reset:deal;
  display:grid; gap:.75rem;
  text-align:left;
  max-width:44rem; width:100%;
}
.deal li{
  counter-increment:deal;
  position:relative;
  padding:1rem 1.2rem 1rem 3.6rem;
  border:2px solid var(--cream);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 2vw, 1.7rem);
  line-height:1.15; letter-spacing:-1px; word-spacing:1px;
}
.deal li::before{
  content:counter(deal, decimal-leading-zero);
  position:absolute; left:1.2rem; top:1.35rem;
  font-family:var(--font-accent);
  font-size:.7rem; letter-spacing:2px;
  color:var(--chart);
}

.join__deal-note{
  font-family:var(--font-accent); text-transform:uppercase;
  font-size:.72rem; letter-spacing:2px; color:var(--pink);
  margin:0 0 clamp(2.5rem, 5vw, 4rem);
}

.join__mark{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4vw, 3rem);
  letter-spacing:-2px; word-spacing:2px;
  margin:0 0 .1em;
}
.join__tagline{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing:-1px;
  color:var(--chart);
  margin:0 0 2rem;
}
.join__fine{
  margin-top:1.75rem;
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.72rem; color:var(--pink);
  max-width:40ch;
}

/* ============================================================
   18  THE NEWSLETTER DOME
   The two curved things share BBB.ARC_RATIO in components.js, so the
   arch of the looping text and the bend of the email field are the
   same curve at every width. Do not set a bend here.
   ============================================================ */

.dial{ background:var(--cream); padding-top:clamp(3rem, 7vw, 6rem); }

.dial__dome{
  position:relative;
  background:var(--espresso);
  color:var(--cream);
  border:var(--bd);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 16% 16% 0 0;
  padding-block:clamp(1.25rem, 3vw, 2.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow:hidden;
  text-align:center;
}

.dial__loop{ margin-bottom:clamp(.5rem, 2vw, 1.5rem); }

.text-loop{ position:relative; width:100%; overflow:hidden; }
.text-loop-svg{ display:block; width:100%; height:auto; }
.text-loop-text{ user-select:none; font-family:var(--font-accent); }
.text-loop-measure{ visibility:hidden; pointer-events:none; font-family:var(--font-accent); }

.dial__body{ position:relative; z-index:2; }
.dial__title{ color:var(--cream); margin-bottom:.4em; }
.dial__lede{
  color:var(--pink);
  max-width:52ch; margin-inline:auto;
  font-size:1.02rem;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}

.dial__form{ display:grid; justify-items:center; }
/* Scoped past .curved-input, which sets its own width:100% and is
   declared later in this file. */
.dial__form .dial__input{ width:min(100%, 34rem); }

/* The plain field, only ever seen when JS has not run. */
.dial__fallback{ display:grid; gap:1rem; justify-items:center; width:min(100%, 26rem); }
.dial__fallback .field{ width:100%; margin:0; text-align:left; }
.dial__fallback label{ color:var(--cream); }

/* Only ever inserted below 760px, where the curved bar drops its own
   button to leave room for the address. */
.dial__submit{ margin-top:1.5rem; }

.news__fine{
  margin:1.5rem auto 0; max-width:46ch;
  font-size:.8rem; line-height:1.5; color:var(--pink);
}
.news__fine.is-error{ color:var(--chart); font-weight:600; }
.news__fine.is-ok{ color:var(--chart); font-weight:600; }
.dial__form.is-sent .dial__input,
.dial__form.is-sent .dial__submit{ display:none; }
.news__sent h3{ color:var(--cream); margin-bottom:.25em; }
.news__sent p{ color:var(--pink); max-width:44ch; margin-inline:auto; }

/* ---------------- Curved input ---------------- */

.curved-input{ position:relative; display:block; width:100%; max-width:100%; margin:0; }
.curved-input__svg{
  display:block; overflow:visible;
  width:100%; height:auto;
  cursor:text;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.curved-input__svg text{ font-family:var(--font-body); }
.curved-input__ring{ opacity:0; transition:opacity .25s ease; }
.curved-input--focused .curved-input__ring{ opacity:.32; }
.curved-input__button{ cursor:pointer; outline:none; }
/* The measuring node must be styled identically to the real label, or
   the button is sized for a string that is not the one drawn. */
.curved-input__button text,
.curved-input__measure{
  font-family:var(--font-accent);
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.curved-input__button-bg{ transition:filter .2s ease; }
.curved-input__button:hover .curved-input__button-bg{ filter:brightness(1.14); }
.curved-input__button:active .curved-input__button-bg{ filter:brightness(.92); }
.curved-input__button:focus-visible .curved-input__button-bg{ filter:brightness(1.2); }
.curved-input__caret{ animation:curved-caret 1.06s step-end infinite; }

@keyframes curved-caret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }

/* The real field: invisible, but it owns focus, selection and the
   mobile keyboard. Never display:none, or none of that works. */
.curved-input__field{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  border:0; padding:0; margin:0;
  background:transparent;
  color:transparent; caret-color:transparent;
  font-size:16px;                /* 16px stops iOS zooming on focus */
  pointer-events:none;
  outline:none;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{ background:var(--espresso); color:var(--cream); padding-block:3.5rem; }
.footer-inner{ display:grid; gap:1.75rem; justify-items:center; text-align:center; }
.footer__brand{ display:grid; justify-items:center; gap:1rem; }
/* Black artwork on a dark ground, so it is inverted to read as cream. */
.footer__seal{ display:block; width:88px; height:auto; filter:invert(1); opacity:.92; }
.footer__mark{ font-family:var(--font-display); font-size:1.8rem; letter-spacing:-2px; word-spacing:2px; margin:0; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
.footer__nav a{
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:2px; font-size:.72rem;
  text-decoration:none; color:var(--pink);
  border-bottom:2px solid transparent;
}
.footer__nav a:hover{ color:var(--chart); border-bottom-color:var(--chart); }
.footer__nav--tools{
  padding-top:1.25rem;
  border-top:1px solid var(--line-cream);
  width:min(100%, 44rem);
}
.footer__nav--tools a{ color:var(--chart); }
.footer__nav--tools a:hover{ color:var(--cream); border-bottom-color:var(--cream); }
.footer__fine{ margin:0; font-size:.8rem; color:rgba(245,203,217,.65); }

/* ============================================================
   MOTION
   ============================================================ */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* Big type comes up from behind its own baseline, line by line. The
   padding gives descenders room inside the overflow box; the negative
   margin takes the space straight back out of the line rhythm. */
[data-reveal-lines] span{
  display:block; overflow:hidden;
  padding-bottom:.16em; margin-bottom:-.16em;
}
[data-reveal-lines] span > i{
  display:block; font-style:inherit;
  transform:translateY(120%);
  transition:transform .9s cubic-bezier(.22,.75,.25,1);
}
[data-reveal-lines].is-visible span > i{ transform:none; }
[data-reveal-lines].is-visible span:nth-child(2) > i{ transition-delay:.09s; }
[data-reveal-lines].is-visible span:nth-child(3) > i{ transition-delay:.18s; }

@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%{ transform:translateY(-9px) rotate(4deg); }
}
@keyframes drift{
  0%,100%{ transform:rotate(-9deg); }
  50%{ transform:rotate(9deg); }
}
.sticker--float{ animation:bob 6s ease-in-out infinite; }
.sticker--spin{ animation:drift 9s ease-in-out infinite; }

/* Parallax: main.js writes --shift, the element just consumes it. */
[data-parallax]{ transform:translate3d(0, var(--shift, 0px), 0); will-change:transform; }

/* ============================================================
   RESPONSIVE
   The phone is composed, not squeezed: the overlaps unwind, the grids
   stack in reading order, decorative movement drops away.
   ============================================================ */

@media (min-width:1100px){
  /* Pulled up into the headline, then pushed down far enough that she
     runs off the bottom of the red panel. The section's overflow does
     the cropping, so the cutout reads as a bleed rather than as a shape
     with a flat outlined edge along the bottom. */
  .hero__art{ margin-top:clamp(-15rem, -12vw, -6rem); margin-bottom:-4rem; top:4rem; }
  .manifesto__art{ margin-top:2.5rem; }
  /* The portraits ride alongside the essays instead of leaving a hole. */
  .voice__art,.her__art{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
}

@media (max-width:1099px){
  .hero__body{ grid-template-columns:1fr; }
  .hero__art{ max-width:26rem; margin-inline:auto; }
  .hero__tag-price{ left:-1rem; }

  .ledger__inner{ grid-template-columns:1fr; }
  .ledger__head{ position:static; }

  .manifesto__inner,.keep__inner{
    grid-template-columns:1fr;
    grid-template-areas:"head" "art" "body";
  }
  .manifesto__art,.keep__art{ max-width:30rem; }

  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .missions__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }

  .voice__inner,.her__inner,.zero__inner,.layer__inner,
  .pricing__inner,.desk__inner{ grid-template-columns:1fr; }
  .voice__art,.her__art{ max-width:26rem; }

  .statement__foot,.statement__foot--wide{ grid-template-columns:1fr; align-items:start; }
  .statement__attr{ text-align:left; }
  .cares{ grid-row:auto; }
}

@media (max-width:760px){
  :root{ --header-h:66px; }

  .sm-logo-img{ height:36px; }
  .staggered-menu-panel,.sm-prelayers{ width:100%; }
  .staggered-menu-panel{ border-left:0; }
  .sm-prelayer{ border-left:0; }
  .sm-panel-item{ padding-right:2em; }

  .nojs-header__inner{ padding-block:.75rem; }
  .nojs-nav{ gap:.9rem 1.1rem; }
  .wordmark img{ height:36px; }

  .hero__meta-right{ text-align:left; }

  .steps{ grid-template-columns:1fr; }
  .missions__list{ grid-template-columns:1fr; }
  .missions__stage.is-carousel{ height:660px; }

  /* Arrows move off the cards' edges, or they sit on top of the artwork. */
  .depth-carousel__arrow{ width:40px; height:40px; }
  .depth-carousel__arrow--prev{ left:-.35rem; }
  .depth-carousel__arrow--next{ right:-.35rem; }

  .dial__dome{ border-radius:50% 50% 0 0 / 7% 7% 0 0; }
  .dial__form .dial__input{ width:100%; }

  /* Solid shadows shrink so nothing runs off a narrow screen. */
  .form{ box-shadow:6px 6px 0 var(--espresso); }
  .plate{ box-shadow:7px 7px 0 var(--espresso); }
  .voice__art .plate,.her__art .plate{ box-shadow:7px 7px 0 var(--red); }
  .pricing__card{ box-shadow:7px 7px 0 var(--espresso); }
  .equation{ box-shadow:6px 6px 0 var(--red); }
  .manifesto__kicker,.voice__kicker,.zero__kicker,.layer__kicker{ box-shadow:4px 4px 0 var(--espresso); }

  /* Stickers must never sit on top of words at this width. */
  .hero__sticker,.statement__sticker-a,.statement__sticker-b,.voice__sticker{ display:none; }

  /* The flag sits above the headline instead of leaning on it. */
  .flag{
    position:static;
    display:block; width:max-content;
    margin:0 auto clamp(1.5rem, 5vw, 2.25rem);
    transform:rotate(-3deg);
    padding-inline:1.75rem;
  }

  .mega{ text-wrap:wrap; text-shadow:3px 3px 0 var(--espresso); font-size:clamp(2.6rem, 12.5vw, 6rem); }

  /* Every pinned label comes off its absolute position and joins the flow. */
  .hero__tag-price,.hero__tag-cancel,.manifesto__tag,
  .voice__tag,.her__tag-name,.her__tag-role{
    position:static; transform:rotate(-2deg);
    display:inline-block;
    margin-top:1rem; margin-left:0;
    max-width:none;
  }
  .hero__tag-cancel,.her__tag-role{ transform:rotate(2deg); margin-left:.6rem; }

  .deal li{ padding-left:3.2rem; }
  .footer__nav{ gap:1rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ticker__track{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  [data-reveal-lines] span > i{ transform:none; }
  [data-parallax]{ transform:none; }
  .sticker--float,.sticker--spin{ animation:none; }
  .automagic{ animation:none; background-position:30% 50%; }
  .curved-input__caret{ animation:none; opacity:1; }
}