/* ============================================================
   PROMEXON — design tokens
   Every colour, font and rhythm value in the site comes from
   this block. Do not hardcode values elsewhere.
   ============================================================ */
:root{
  /* surfaces — dark */
  --ink:#1C1C1A;          /* page background, primary dark surface */
  --ink-2:#232320;        /* raised panel on dark */
  --line:#2F2F2B;         /* divider inside dark panels */
  --hair:#6E6A62;         /* BORDER on dark. Never text: 3.17:1 */

  /* surfaces — light */
  --paper:#F5F1EC;        /* light section background */
  --paper-2:#EBE6DD;      /* tinted column */
  --paper-line:#DAD4C8;   /* border and row divider on light */
  --card:#FFFFFF;         /* card surface on light sections */

  /* accent */
  --brass:#D4C29A;        /* DARK SURFACES ONLY. 9.74:1 on ink */
  --brass-hi:#E3D4B0;     /* hover state for brass fills */
  --brass-deep:#7E6430;   /* LIGHT SURFACES ONLY. 4.98:1 on paper */

  /* text on dark */
  --t1:#EDE9E1;           /* 14.10:1 */
  --t2:#B4B0A8;           /*  7.90:1 */
  --t3:#8E8B83;           /*  5.02:1 */

  /* text on light */
  --i1:#1C1C1A;           /* 15.18:1 */
  --i2:#4A473F;           /*  8.25:1 */
  --i3:#6E6A62;           /*  4.79:1 — passes on light, fails on dark */

  /* type */
  --display:'Sora',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* rhythm */
  --gut:clamp(20px,5vw,72px);
  /* One measure for the whole page. --edge is the left/right inset that puts
     the nav, the hero, every section and the hero rule on the same two
     vertical lines, whatever the viewport. */
  --wrap:1180px;
  --edge:max(var(--gut),calc((100% - var(--wrap)) / 2));
  /* The hero measures itself against the viewport rather than a fixed
     container, so it grows on a large monitor instead of staying
     laptop-sized. --band is the height the composition lives in. */
  --wrapw:clamp(1100px,84vw,1640px);
  --band:clamp(620px,90vh,1120px);
  --sec-y:clamp(60px,7.4vw,118px);   /* section padding, top and bottom */

  /* vertical spacing scale. Four steps, smallest first. Every gap inside a
     section comes from one of these; nothing sets its own margin. */
  --sp-1:20px;                       /* heading > body copy, paragraph > paragraph */
  --sp-2:clamp(22px,2.6vw,34px);     /* section label > heading */
  --sp-3:clamp(30px,3.4vw,42px);     /* body copy > call to action */
  --sp-4:clamp(34px,4vw,52px);       /* body copy <> table, above and below */

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--t1);font-family:var(--body);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:rgba(212,194,154,.24);color:var(--t1)}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:3px}
.light :focus-visible{outline-color:var(--brass-deep)}

.skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);
      padding:10px 16px;font-family:var(--mono);font-size:12px;z-index:80}
.skip:focus{left:12px;top:12px}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px var(--gut);
     background:rgba(28,28,26,.62);
     -webkit-backdrop-filter:blur(18px) saturate(1.25);
     backdrop-filter:blur(18px) saturate(1.25);
     border-bottom:1px solid rgba(212,194,154,.10);
     transition:background .25s ease,border-color .25s ease}
.nav.solid{background:rgba(28,28,26,.92);border-bottom-color:rgba(212,194,154,.16)}
.navin{max-width:var(--wrapw);margin:0 auto;display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.brand{display:flex;align-items:center;gap:12px}
.tile{width:30px;height:30px;flex:none;background:var(--brass);color:var(--ink);
      display:grid;place-items:center;font-family:var(--display);font-weight:600;
      font-size:17px;line-height:1;padding-bottom:1px}
.word{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.28em;color:var(--t1)}
.links{display:flex;align-items:center;gap:4px;margin-left:auto;padding:5px;border-radius:100px;
       background:rgba(255,255,255,.035);border:1px solid rgba(212,194,154,.12);
       -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.links a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--t2);padding:9px 16px;border-radius:100px;
         transition:color .2s,background-color .2s}
.links a:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.navcta{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
        color:var(--ink);background:var(--brass);padding:12px 20px;border-radius:100px;
        transition:background-color .2s;white-space:nowrap}
.navcta:hover{background:var(--brass-hi)}

/* ============================ HERO ============================ */
/* The hero fills the viewport, but the composition lives inside --band, a
   height that scales with the viewport rather than a pixel cap. Two grid
   rows: the content is centred in the first, the rule is pinned to the
   second. That is what keeps the space under the rule to nothing while the
   rule still sits at the foot of the screen. */
.hero{position:relative;min-height:100svh;overflow:hidden;
      display:grid;grid-template-rows:1fr auto;align-content:stretch;
      padding:clamp(92px,9vh,124px) var(--gut) clamp(30px,3.4vh,48px)}

/* One shared stage. The nav row, the content column, the plan and the rule
   all resolve to its two vertical lines at every width. */
.stage{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);
       height:var(--band);left:0;right:0;
       max-width:calc(var(--wrapw) + var(--gut) * 2);margin:0 auto;
       padding:0 var(--gut);pointer-events:none}
.plan-defs{position:absolute;width:0;height:0;pointer-events:none}

.grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,240px 240px,240px 240px;
  background-position:center;
  -webkit-mask-image:radial-gradient(62% 72% at 54% 46%,#000 12%,rgba(0,0,0,.4) 58%,transparent 92%);
  mask-image:radial-gradient(62% 72% at 54% 46%,#000 12%,rgba(0,0,0,.4) 58%,transparent 92%)}

/* right:0 would resolve to the stage's padding edge, so the plan takes the
   gutter back explicitly to land on the content edge. */
.plan{position:absolute;top:50%;transform:translateY(-50%);
      right:var(--gut);width:min(47.7%,117vh);margin-top:-2%}
.plan svg{width:100%;height:auto;display:block}
/* The soft copy is masked to the narrow strip that runs behind the type; the
   sharp copy takes the exact complement, so the drawing itself is never
   blurred. The veil sits between the two layers. */
.plan-blur{filter:blur(2px);opacity:.28;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 2%,transparent 22%);
  mask-image:linear-gradient(to right,#000 0%,#000 2%,transparent 22%)}
.plan-sharp{opacity:.9;
  -webkit-mask-image:linear-gradient(to right,transparent 2%,#000 22%,#000 100%);
  mask-image:linear-gradient(to right,transparent 2%,#000 22%,#000 100%)}

.veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    var(--ink) 28%,rgba(28,28,26,.70) 42%,
    rgba(28,28,26,.16) 56%,rgba(28,28,26,.02) 70%,rgba(28,28,26,.08) 100%)}

.hero .wrap{position:relative;z-index:3;width:100%;max-width:var(--wrapw);
            margin:0 auto;align-self:center}
.hero .col{max-width:min(560px,42%)}

.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:clamp(24px,3vw,32px)}
.eyebrow i{flex:none;width:52px;height:7px;position:relative;color:var(--brass);
  border-left:1px solid;border-right:1px solid;opacity:.85}
.eyebrow i::after{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:currentColor}

h1{font-family:var(--display);font-weight:600;
   font-size:clamp(38px,min(3.6vw,9.4vh),78px);
   line-height:1.04;letter-spacing:-.035em;color:var(--t1)}
h1 span{display:block}
h1 .two{color:var(--t2)}
.lede{margin-top:clamp(22px,2.4vh,30px);max-width:46ch;
      font-size:clamp(16px,min(1.1vw,2vh),19px);color:var(--t2)}

.act{margin-top:var(--sp-3);display:flex;flex-direction:column;align-items:flex-start;gap:17px}
.hero .act{margin-top:clamp(28px,3.2vw,38px);gap:15px}
.cta{display:inline-flex;align-items:center;gap:13px;background:var(--brass);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:15px;padding:17px 28px;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset;
  transition:background-color .2s,transform .2s}
.cta svg{transition:transform .24s var(--ease)}
.cta:hover{background:var(--brass-hi);transform:translateY(-1px)}
.cta:hover svg{transform:translateX(5px)}
.micro{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--t3);max-width:40ch}
.alt{font-size:14.5px;color:var(--t2);border-bottom:1px solid var(--hair);padding-bottom:2px;
     transition:color .2s,border-color .2s}
.alt:hover{color:var(--t1);border-bottom-color:var(--t2)}
/* Gold cannot carry a button on light. Primary action goes ink-on-paper. */
.light .cta{background:var(--i1);color:var(--paper);box-shadow:none}
.light .cta:hover{background:var(--ink-2)}
.light .micro{color:var(--i3)}
.light .alt{color:var(--i2);border-bottom-color:var(--i3)}
.light .alt:hover{color:var(--i1)}

.hrule{position:relative;z-index:3;width:100%;max-width:var(--wrapw);margin:0 auto;
       align-self:end;padding-top:20px}
.hrule::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  border-left:1px solid var(--brass);border-right:1px solid var(--brass);opacity:.55}
.hrule::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;
  background:linear-gradient(to right,rgba(212,194,154,.34),rgba(212,194,154,.10) 62%,rgba(212,194,154,.34))}
.hrule span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3)}

/* ========================== SECTIONS ========================== */
section{padding:var(--sec-y) var(--gut)}
.in{max-width:var(--wrap);margin:0 auto}
.dark{background:var(--ink);color:var(--t1)}
.light{background:var(--paper);color:var(--i1)}

.tag{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;
     letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--sp-2)}
.dark .tag{color:var(--t3)}
.light .tag{color:var(--i2)}
.tag i{flex:none;width:54px;height:7px;border-left:1px solid;border-right:1px solid;
       position:relative;opacity:.8}
.tag i::after{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:currentColor}
.dark .tag i{color:var(--brass)}
.light .tag i{color:var(--brass-deep)}

/* ---------- the sheet ----------
   Light sections are documents, so they sit on drafting paper.
   Same two-tier module as the hero grid (48px minor, 240px
   major), inverted for light and faded out before it reaches
   the body copy. */
.sheet{position:relative;isolation:isolate;overflow:hidden}
.sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(110,106,98,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(110,106,98,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(110,106,98,.09) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(110,106,98,.09) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,240px 240px,240px 240px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(125% 78% at 50% 0%,#000 4%,rgba(0,0,0,.5) 46%,transparent 78%);
  mask-image:radial-gradient(125% 78% at 50% 0%,#000 4%,rgba(0,0,0,.5) 46%,transparent 78%)}

/* ---------- sheet number ----------
   Drawing sets print the sheet number large in the corner.
   Decorative only; the readable number stays in the tag. */
.in{position:relative}
.sheetno{position:absolute;top:-.13em;right:-.05em;z-index:-1;pointer-events:none;
  font-family:var(--display);font-weight:600;line-height:.78;
  font-size:clamp(120px,17vw,268px);letter-spacing:-.06em;
  color:var(--paper-line);font-variant-numeric:tabular-nums}

/* ---------- the sheet, dark ----------
   Same drafting module as the light sections, drawn in light on
   dark exactly as the hero grid is. */
.dark.sheet::before{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px)}

/* On a section whose heading column is short and whose right column
   runs long, the sheet number drops into the left column and fills
   the space under the heading instead of floating in the corner. */
.sheetno--anchor{position:static;display:block;margin-top:.06em;
  font-size:clamp(110px,15vw,232px);line-height:.74}
.dark .sheetno,
.dark .sheetno--anchor{color:var(--line)}

/* ---------- editorial masthead ----------
   Heading and standfirst share one band instead of stacking in
   a narrow column with dead space beside it. Ruled off beneath
   the way a drawing sheet is. */
.masthead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.6vw,68px);align-items:end;
  padding-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--paper-line)}
.dark .masthead{border-bottom-color:var(--line)}
.masthead h2{max-width:none;font-size:clamp(32px,5vw,66px);
  letter-spacing:-.038em;line-height:.99;text-wrap:balance}
.masthead .sub{margin-top:0;max-width:42ch;font-size:clamp(16px,1.15vw,17.5px);
  padding-bottom:.4em}

/* ---------- masthead, tall variant ----------
   02 has no standfirst; the whole three-paragraph argument sits in
   the right column, so the two blocks align at the top. */
.masthead--top{align-items:start}
.masthead--top .prose{margin-top:0;max-width:none}
.masthead--top h2{padding-top:.06em}


h2{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.08;
   font-size:clamp(28px,3.6vw,46px);max-width:17ch}
.sub{margin-top:var(--sp-1);max-width:60ch;font-size:clamp(15.5px,1.05vw,17px)}
.dark .sub{color:var(--t2)}
.light .sub{color:var(--i2)}

/* ---------- 01 variance table ----------
   One grid, not two lists, so every promise sits on the line of
   what actually turned up. Row rules are grid gaps showing the
   container colour through: exact hairlines, no border maths. */
.vspec{margin-top:var(--sp-4);display:grid;
  grid-template-columns:clamp(46px,4.6vw,66px) minmax(0,1fr) minmax(0,1fr);
  gap:1px 0;background:var(--paper-line);
  border:1px solid var(--paper-line);border-top:0}
.vspec .vrow{display:contents}
.vspec>*,.vspec .vrow>*{background:var(--paper);
  padding:clamp(17px,1.7vw,22px) clamp(14px,1.6vw,28px);
  display:flex;align-items:center}

/* what arrived: tinted, grained, and divided by a single rule */
.vspec .b{background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.27'/%3E%3C/svg%3E");
  background-repeat:repeat;box-shadow:inset 1px 0 0 var(--paper-line)}

/* title block: the header band inverts, exactly as .state does
   in section 02 */
.vspec .hd{background:var(--ink);padding-top:14px;padding-bottom:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);font-weight:400}
.vspec .hd.b{background-image:none;box-shadow:none}

/* the whole comparison line answers to the cursor, not one cell */
.vspec .vrow>*{transition:background-color .18s var(--ease)}
.vspec .vrow:hover>*{background-color:var(--card)}
.vspec .vrow:hover>.b{background-color:var(--paper-2)}

/* line number, tabular so the column never shifts */
.vspec .n{font-family:var(--mono);font-size:11px;color:var(--i3);
  font-variant-numeric:tabular-nums;justify-content:flex-end;
  padding-right:clamp(11px,1.2vw,18px);align-items:flex-start;
  padding-top:calc(clamp(17px,1.7vw,22px) + 2px)}

.vspec .t{font-size:16px;line-height:1.42;color:var(--i1);display:block;
  letter-spacing:-.006em}
.vspec .b.t{color:var(--i2)}

.note{margin-top:var(--sp-4);font-size:16px;max-width:64ch}
.light .note{color:var(--i2)}
.dark .note{color:var(--t2)}
.note b{font-weight:500}
/* The middle clause is the point of the section, so it steps up to
   display type and takes its own line. Same words. */
.note--pull{position:relative;max-width:76ch}
.note--pull b{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(20px,2vw,29px);line-height:1.2;letter-spacing:-.026em;
  margin:20px 0;max-width:30ch}
.light .note b{color:var(--i1)}
.dark .note b{color:var(--t1)}

/* ---------- 02 the real problem ---------- */
.prose{margin-top:var(--sp-1);max-width:60ch;display:grid;gap:var(--sp-1)}
.prose p{font-size:clamp(16px,1.1vw,17.5px);color:var(--t2)}
.prose p b{color:var(--t1);font-weight:500}
/* ---------- 02 the ledger ----------
   Not a comparison of equals like 01, where two claims sit at the
   same weight and the irony is that they do not match. This is a
   change of state, so the layout moves left to right: the present
   is narrow, small and grey, what becomes possible is wider,
   larger and set in display type. The layout makes the argument. */
.ledger{margin-top:var(--sp-4);display:grid;
  grid-template-columns:clamp(40px,4vw,58px) minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(18px,3vw,56px)}
.ledger .vrow{display:contents}
.ledger>*,.ledger .vrow>*{padding:clamp(15px,1.6vw,21px) 0;
  border-bottom:1px solid var(--line)}

.ledger>.hd:first-child{border-bottom:0}
.ledger .hd{padding-top:0;padding-bottom:13px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);border-bottom-color:var(--hair)}

.ledger .n{font-family:var(--mono);font-size:11px;color:var(--t3);
  font-variant-numeric:tabular-nums;
  padding-top:calc(clamp(15px,1.6vw,21px) + 1px)}

.ledger .now{font-size:15px;line-height:1.46;color:var(--t3)}
.ledger .poss{font-family:var(--display);font-weight:500;
  font-size:clamp(16px,1.35vw,19px);line-height:1.28;letter-spacing:-.018em;
  color:var(--t1)}

/* the row lifts as a whole, and only the reachable state brightens */
.ledger .vrow>*{transition:border-color .18s var(--ease)}
.ledger .vrow:hover>*{border-bottom-color:var(--hair)}
.ledger .vrow:hover .now{color:var(--t2)}

/* ---------- 02 the summation ----------
   01 annotates its closing paragraph with a rule down the side.
   This one is a conclusion, not a note in the margin, so it is
   ruled off above and the hinge clause is set at display scale. */
.summation{margin-top:var(--sp-4);padding-top:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line);max-width:none;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(20px,3.6vw,68px);align-items:start}
.summation>*{margin:0}
.summation .lead{font-size:clamp(21px,2.35vw,31px);line-height:1.18;
  font-family:var(--display);font-weight:500;letter-spacing:-.032em;
  color:var(--t2)}
.summation .lead b{color:var(--t1);font-weight:500}
.summation .rest{font-size:clamp(16px,1.15vw,17.5px);line-height:1.62;
  color:var(--t2);max-width:48ch;padding-top:.35em}


/* ---------- 03 scope of work ----------
   Every line has a title, a description and an owner. The owner is
   the argument of the section: four are ours, one is yours. So the
   owner column is a stamp at the right edge rather than a third
   text column, and the row you own breaks the run. */
.scope{margin-top:var(--sp-4);display:grid;
  grid-template-columns:clamp(56px,5.4vw,78px) minmax(0,1fr) clamp(88px,8.6vw,122px);
  gap:1px 0;background:var(--paper-line);
  border:1px solid var(--paper-line);border-top:0}
.scope .srow{display:contents}
.scope>*,.scope .srow>*{background:var(--paper);
  padding:clamp(19px,2vw,27px) clamp(14px,1.6vw,28px)}

/* title block, inverted against the section as 01's is */
.scope .hd{background:var(--ink);color:var(--brass);
  padding-top:14px;padding-bottom:14px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.scope .hd.i,.scope .hd.o{text-align:right}

.scope .srow .n{font-family:var(--mono);font-size:11px;color:var(--i3);
  font-variant-numeric:tabular-nums;text-align:right;
  padding-top:calc(clamp(19px,2vw,27px) + 4px)}

.scope .srow .w strong{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.45vw,20px);letter-spacing:-.022em;line-height:1.2;
  margin-bottom:8px;color:var(--i1)}
.scope .srow .w span{display:block;max-width:62ch;color:var(--i2);
  font-size:15px;line-height:1.52}

/* the owner stamp */
.scope .srow .o{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--i3);text-align:right;
  padding-top:calc(clamp(19px,2vw,27px) + 5px);white-space:nowrap}

/* the one line you own: tinted, grained, and its stamp in brass.
   Grain marks the row that carries the twist, as it does in 01. */
.scope .you>*{background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.27'/%3E%3C/svg%3E")}
.scope .srow.you .o{color:var(--brass-deep)}

/* rows answer to the cursor as a unit */
.scope .srow>*{transition:background-color .18s var(--ease)}
.scope .srow:hover>*{background-color:var(--card)}
.scope .you:hover>*{background-color:var(--paper-2)}

/* ---------- 04 the two records ----------
   Not two versions of one card: a slip torn off a pad beside a
   drawing sheet, built differently all the way down. */
.recs{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(18px,3vw,52px);margin-top:var(--sp-4);align-items:start}
.rec{display:flex;flex-direction:column}

/* ---------- the lead: a slip off a pad ---------- */
.rec--lead{border:1px solid var(--paper-line);border-top:2px dashed var(--i3);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E")}
/* Header and rows share one grid, so each heading stands over the
   column it names. The label column is a proportional rail rather
   than a tight fit: the values sit out where the heading already was,
   instead of the heading being dragged in to meet them. */
.rec--lead .rhead{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:14px;align-items:baseline;padding:15px 18px 11px;
  border-bottom:1px solid var(--paper-line);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.rec--lead .rt{color:var(--i2)}
.rec--lead .rm{color:var(--i3)}
.rec--lead .rrow{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:14px;padding:9px 18px;align-items:baseline}
.rec--lead .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--i3)}
.rec--lead .rv{font-size:14px;line-height:1.35;color:var(--i3)}
.rec--lead .rbody{padding:9px 0}
.rec--lead .rverdict{margin:0 18px 18px;padding:16px 0 0;
  border-top:1px dashed var(--paper-line);
  font-size:13.5px;line-height:1.5;color:var(--i2)}

/* ---------- the estimate: a drawing sheet ---------- */
.rec--est{border:1px solid var(--i3);background:var(--card)}
.rec--est .rhead{background:var(--ink);margin:5px;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:17px clamp(16px,1.6vw,24px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.rec--est .rt{color:var(--brass)}
.rec--est .rm{color:var(--t2);letter-spacing:.12em;white-space:nowrap}
.rec--est .rbody{padding:0 5px}
/* every field is labelled above its entry, with room around it */
.rec--est .rrow{display:block;padding:clamp(11px,1.2vw,14px) clamp(16px,1.6vw,24px);
  border-bottom:1px solid var(--paper-line)}
.rec--est .rbody .rrow:last-child{border-bottom:0}
.rec--est .rk{display:block;margin-bottom:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--i3)}
.rec--est .rv{font-size:clamp(15.5px,1.25vw,17px);line-height:1.38;color:var(--i1)}
.rec--est .rverdict{margin:0 5px 5px;padding:clamp(15px,1.6vw,20px) clamp(16px,1.6vw,24px);
  font-size:15px;line-height:1.5;color:var(--brass-deep);
  border-top:1px solid var(--brass-deep)}
/* The measure is held in with padding, not max-width: the rule above
   this line is a divider for the whole sheet and has to reach both
   edges, which max-width was cutting short. */
@media (min-width:861px){
  .rec--est .rverdict{padding-right:min(31%,225px)}
}
/* only the live record answers to the cursor */
.rec--est .rrow{transition:background-color .18s var(--ease)}
.rec--est .rrow:hover{background-color:var(--paper)}

/* ---------- the motion ----------
   Scoped under .reveal-ready, which main.js adds only when
   JavaScript runs and reduced motion is not set. */
.reveal-ready .rec--lead.reveal{transform:none}
.reveal-ready .rec--est.reveal:not(.in-view){transform:translateY(22px)}
.reveal-ready .rec--est .rrow,
.reveal-ready .rec--est .rverdict{opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),
             border-top-color .5s var(--ease)}
.reveal-ready .rec--est .rverdict{border-top-color:transparent}
.reveal-ready .rec--est.in-view .rrow,
.reveal-ready .rec--est.in-view .rverdict{opacity:1;transform:none}
.reveal-ready .rec--est.in-view .rverdict{border-top-color:var(--brass-deep)}
.rec--est.in-view .rrow:nth-child(1){transition-delay:.16s}
.rec--est.in-view .rrow:nth-child(2){transition-delay:.20s}
.rec--est.in-view .rrow:nth-child(3){transition-delay:.24s}
.rec--est.in-view .rrow:nth-child(4){transition-delay:.28s}
.rec--est.in-view .rrow:nth-child(5){transition-delay:.32s}
.rec--est.in-view .rrow:nth-child(6){transition-delay:.36s}
.rec--est.in-view .rrow:nth-child(7){transition-delay:.40s}
.rec--est.in-view .rrow:nth-child(8){transition-delay:.44s}
.rec--est.in-view .rverdict{transition-delay:.52s}

@media (prefers-reduced-motion:reduce){
  .reveal-ready .rec--est .rrow,
  .reveal-ready .rec--est .rverdict{opacity:1;transform:none}
  .reveal-ready .rec--est .rverdict{border-top-color:var(--brass-deep)}
  .reveal-ready .rec--est.reveal:not(.in-view){transform:none}
}

/* ---------- 05 what it costs ----------
   Three cost items, not three equal boxes: the retainer is ours
   and small, the fee is ours and where the business lives, and
   the ad spend is not ours at all, so it is an outline. */
.cost{display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.34fr) minmax(0,.88fr);
  gap:clamp(14px,1.8vw,26px);margin-top:var(--sp-4);align-items:stretch}

.cost-item{display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px);
  border:1px solid var(--paper-line);background:var(--paper)}
.cost-item h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--i3);font-weight:400;
  margin-bottom:clamp(12px,1.4vw,18px)}
.cost-item p{font-size:15px;line-height:1.55;color:var(--i2);max-width:34ch}

/* the line the business actually runs on: white stock, a drawn
   edge, its label in brass and its copy at full strength */
.cost-item--main{background:var(--card);border-color:var(--i3)}
.cost-item--main h3{color:var(--brass-deep)}
.cost-item--main p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.5;
  color:var(--i1);max-width:38ch}

/* money that never touches us: an outline, not a filled card */
.cost-item--pass{background:transparent;border-style:dashed;
  border-color:var(--i3)}

/* ---------- 05 closing paragraph ----------
   01 pulls its middle clause into display type, 02 splits into a
   lead and its support. This one stays a single paragraph and
   marks only the four words that matter. */
.paynote{margin-top:var(--sp-4);padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid var(--paper-line);
  max-width:66ch;font-size:clamp(16px,1.15vw,17.5px);line-height:1.6;
  color:var(--i2)}
.paynote b{color:var(--brass-deep);font-weight:500}

/* ---------- 06 who we help ----------
   Four refusals standing as a square, not a list. Dark, so it is
   open: rules and type, no boxes. --hair is used as a border here,
   which is what it is for on dark. */
.refuse{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.4vw,52px) clamp(30px,5vw,84px);
  margin-top:var(--sp-4)}

.refuse-item{border-top:1px solid var(--hair);
  padding-top:clamp(17px,1.9vw,25px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(13px,1.5vw,20px);align-items:baseline}

.rn{font-family:var(--mono);font-size:clamp(17px,1.6vw,23px);
  color:var(--brass);font-variant-numeric:tabular-nums;line-height:1}

.refuse-item h3{font-family:var(--display);font-weight:500;
  font-size:clamp(17.5px,1.55vw,21px);line-height:1.22;
  letter-spacing:-.022em;color:var(--t1)}

.refuse-item p{grid-column:2;margin-top:clamp(9px,1vw,13px);
  font-size:15px;line-height:1.55;color:var(--t2);max-width:46ch}

/* ---------- 06 closing statement ----------
   The door opening again after four refusals. It is the only
   closing paragraph on the page with no emphasised clause inside
   it, so the whole sentence carries at display scale. */
.stand{margin-top:var(--sp-4);padding-top:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line);
  font-family:var(--display);font-weight:500;
  font-size:clamp(18px,1.9vw,25px);line-height:1.3;
  letter-spacing:-.026em;color:var(--t2);max-width:36ch}

/* ---------- 07 the call ----------
   Prose and the call to action down the left, the schedule beside
   them. Twenty minutes is the headline, so the card shows twenty
   minutes as a measured quantity: each item carries a bar marking
   where it falls in the call and how long it runs. */
.callgrid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4.4vw,72px);margin-top:var(--sp-4);align-items:start}

.callbody{display:grid;gap:clamp(16px,1.6vw,21px);max-width:56ch}
.callbody p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;color:var(--i2)}
#call .act{margin-top:clamp(26px,3vw,38px)}
#call .cta{font-size:16px;padding:19px 32px}

/* ---------- the schedule ---------- */
.sched{border:1px solid var(--i3);background:var(--card)}
.sched .ah{background:var(--ink);display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;padding:16px clamp(17px,1.7vw,25px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}

.sched li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(13px,1.5vw,20px);
  padding:clamp(15px,1.6vw,20px) clamp(17px,1.7vw,25px);
  border-bottom:1px solid var(--paper-line)}
.sched li:last-child{border-bottom:0}
.sched .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--brass-deep);font-variant-numeric:tabular-nums;padding-top:2px}
.sched .e{font-size:clamp(15px,1.15vw,16px);line-height:1.45;color:var(--i1)}

/* the bar: a full-width track with the segment marked on it, so the
   four items read as one twenty-minute run rather than four rows */
.sched .bar{grid-column:1 / -1;position:relative;height:3px;
  margin-top:clamp(12px,1.3vw,16px);background:var(--paper-line)}
.sched .bar i{position:absolute;top:0;bottom:0;background:var(--brass-deep)}
.sched li:nth-child(1) .bar i{left:0;width:30%}
.sched li:nth-child(2) .bar i{left:30%;width:25%}
.sched li:nth-child(3) .bar i{left:55%;width:25%}
.sched li:nth-child(4) .bar i{left:80%;width:20%}

/* ============================ FOOTER ============================ */
/* The last thing on a drawing set is the title block: the panel in the
   corner carrying the sheet index and the project data. That is what this
   is. Hairline rules, mono fields, no boxes floating on the surface —
   the borders themselves do the dividing, the way they do on paper. */

footer{background:var(--ink);color:var(--t1);
  padding:clamp(52px,6vw,84px) var(--edge) clamp(26px,2.6vw,34px);
  border-top:1px solid var(--line);position:relative}

/* the dimension line that opens every section, drawn once across the top
   of the footer so the set closes the way it began */
footer::before{content:"";position:absolute;left:var(--edge);right:var(--edge);top:15px;height:7px;
  color:var(--brass);opacity:.5;border-left:1px solid;border-right:1px solid}
footer::after{content:"";position:absolute;left:var(--edge);right:var(--edge);top:18px;height:1px;
  background:linear-gradient(to right,rgba(212,194,154,.42),rgba(212,194,154,.06))}

.fin{max-width:var(--wrap);margin:0 auto}

.fgrid{display:grid;gap:clamp(34px,4vw,56px);
  grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
  padding-bottom:clamp(34px,4vw,52px);border-bottom:1px solid var(--line)}

/* ---------- column label: the small rule, reused ---------- */
.flabel{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:22px}
.flabel i{flex:none;width:34px;height:7px;position:relative;color:var(--brass);
  border-left:1px solid;border-right:1px solid;opacity:.8}
.flabel i::after{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:currentColor}

/* ---------- mark ---------- */
.fmark{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.fmark .brand{display:flex;align-items:center;gap:12px}
.fmark .tile{width:34px;height:34px;font-size:19px}
.fmark .word{font-size:14px;letter-spacing:.28em}
.fcontact{margin-top:clamp(30px,3.2vw,42px)}
.fcontact .flabel{margin-bottom:16px}
.fmail,.ftel{display:block;width:max-content;max-width:100%;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em;color:var(--t1);
  border-bottom:1px solid var(--hair);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.ftel{margin-top:14px;font-variant-numeric:tabular-nums}
.fmail:hover,.ftel:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* ---------- sheet index ----------
   Seven numbered rows, the same numbering the sections carry. The rule
   under each row is the sheet line; it lifts to brass on hover. */
.findex{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;column-gap:clamp(24px,3.4vw,56px)}
.findex a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:baseline;gap:4px;
  padding:10px 0;border-bottom:1px solid var(--line);
  transition:border-color .2s}
.findex li:nth-child(1) a,.findex li:nth-child(5) a{border-top:1px solid var(--line)}
.findex .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--t3);
  font-variant-numeric:tabular-nums;transition:color .2s}
.findex .e{font-size:14.5px;line-height:1.4;color:var(--t2);transition:color .2s,transform .24s var(--ease)}
.findex a:hover{border-bottom-color:var(--hair)}
.findex a:hover .n{color:var(--brass)}
.findex a:hover .e{color:var(--t1);transform:translateX(3px)}

/* ---------- baseline ---------- */
.fbase{display:flex;align-items:center;gap:20px;padding-top:clamp(20px,2.2vw,28px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3)}
.fdim{flex:1 1 auto;min-width:24px;height:7px;color:var(--hair);
  border-left:1px solid;border-right:1px solid;position:relative;opacity:.7}
.fdim::after{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:currentColor}
.ftop{display:inline-flex;align-items:center;gap:9px;color:var(--t3);transition:color .2s}
.ftop svg{transition:transform .24s var(--ease)}
.ftop:hover{color:var(--t1)}
.ftop:hover svg{transform:translateY(-3px)}

@media (max-width:900px){
  /* the mark takes the full width; the index keeps its two runs beneath it */
  .fgrid{grid-template-columns:1fr}
  .fmark{flex-direction:row;flex-wrap:wrap;align-items:flex-start;
         justify-content:flex-start;gap:clamp(28px,5vw,64px)}
  .fmark .brand{padding-top:2px}
  .fcontact{margin-top:0}
}
@media (max-width:640px){
  .fmark{flex-direction:column;align-items:flex-start;gap:0}
  .fcontact{margin-top:clamp(30px,3.2vw,42px)}
  .findex{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .findex li:nth-child(5) a{border-top:0}
  .fbase{flex-wrap:wrap;gap:14px 18px}
  .fdim{display:none}
  .ftop{margin-left:auto}
}

/* ============================ MOTION ============================ */
.r{opacity:0;transform:translateY(14px);animation:r .7s var(--ease) forwards}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}
.d4{animation-delay:.30s}.d5{animation-delay:.42s}
@keyframes r{to{opacity:1;transform:none}}

/* progressive enhancement: JS adds .reveal-ready, then .in-view on scroll.
   main.js sets an inline transition-delay for the stagger. */
.reveal-ready .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-ready .reveal.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none;animation:none}
  .reveal-ready .reveal{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:820px){
  .refuse{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
  .refuse-item p{max-width:60ch}
  .stand{max-width:none}
}


@media (max-width:980px){
  /* the two Promexon lines stay side by side, the pass-through
     drops beneath them where it reads as a separate matter */
  .cost{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .cost-item--pass{grid-column:1 / -1}
  .cost-item--pass p{max-width:60ch}
}
@media (max-width:640px){
  .cost{grid-template-columns:1fr}
  .cost-item p,.cost-item--main p{max-width:60ch}
}


/* the slip stays cramped as far down as it can; that crampedness is
   the point, so it only gives up its two columns at the very bottom */
@media (max-width:359px){
  .rec--lead .rrow,.rec--lead .rhead{grid-template-columns:1fr;gap:2px}
}


@media (min-width:861px){
  .note--pull{padding-left:clamp(22px,2.6vw,40px);border-left:1px solid var(--paper-line)}
}


@media (max-width:860px){
  .masthead{grid-template-columns:1fr;gap:0;align-items:start}
  .masthead .sub{margin-top:var(--sp-1);max-width:60ch;padding-bottom:0}
  .sheetno{font-size:clamp(88px,24vw,134px);top:-.26em;right:-.17em}

  /* Stacked: number in a narrow left rail spanning its pair, the two
     statements beneath each other. The tint and grain are what tell
     them apart once the columns are gone, so both labels stay. */
  .vspec{grid-template-columns:clamp(42px,10vw,56px) minmax(0,1fr)}
  .vspec>.hd:not(.s1):not(.s2){display:none}
  .vspec>.hd.s1,.vspec>.hd.s2{grid-column:1 / -1;justify-content:flex-start;
    padding-left:clamp(14px,1.6vw,28px)}
  .vspec .n{grid-column:1;grid-row:span 2;justify-content:flex-start;
    padding-left:clamp(14px,1.6vw,28px)}
  .vspec .t{grid-column:2;padding-bottom:8px}
  .vspec .b.t{grid-column:2;padding-top:8px;box-shadow:none}
  .note--pull b{max-width:none}

  .masthead--top .prose{margin-top:var(--sp-1)}
  .sheetno--anchor{font-size:clamp(84px,23vw,128px)}

  /* Stacked: both labels stay as a legend at the top, since without
     columns the reader still needs to know which line is which. The
     type contrast carries it from there. */
  .ledger{grid-template-columns:clamp(38px,9vw,50px) minmax(0,1fr);
    column-gap:clamp(14px,3vw,20px)}
  .ledger>.hd:first-child{display:none}
  .ledger .hd{grid-column:1 / -1;border-bottom:0;padding-bottom:5px}
  .ledger .hd.s2{padding-bottom:14px;border-bottom:1px solid var(--hair)}
  .ledger .now{grid-column:2;border-bottom:0;padding-bottom:7px}
  .ledger .poss{grid-column:2;padding-top:0}
  .ledger .n{grid-column:1;grid-row:span 2}

  .summation{grid-template-columns:1fr;gap:var(--sp-1)}
  .summation .rest{padding-top:0;max-width:none}

  /* Number rail on the left, everything else stacked in one column
     with the owner stamp dropping under its description. */
  .scope{grid-template-columns:clamp(46px,11vw,62px) minmax(0,1fr)}
  .scope>.hd.i,.scope>.hd.o{display:none}
  .scope>.hd{grid-column:1 / -1;text-align:left}
  .scope .srow .n{grid-column:1;grid-row:span 2;text-align:left;
    padding-right:0;padding-bottom:0}
  .scope .srow .w{grid-column:2;padding-bottom:10px}
  .scope .srow .o{grid-column:2;text-align:left;padding-top:0}

  .recs{grid-template-columns:1fr}

  .callgrid{grid-template-columns:1fr;gap:var(--sp-4)}
  .callbody{max-width:60ch}
}

@media (max-width:960px){
  /* with the anchor pill hidden the CTA has nothing pushing it over, so it
     keeps the right edge itself */
  .links{display:none}
  .navcta{margin-left:auto}
  .hero{min-height:auto;padding:100px var(--gut) 64px;
        grid-template-rows:auto auto;align-content:start}
  .stage{position:absolute;top:0;transform:none;height:100%;padding:0}
  .hero .col{max-width:none}
  /* Stacked, there is no type beside the drawing, so it stops being a bleed
     and becomes a plate: the whole plan, squared to the same two edges as the
     text, sitting under the block. No blur pass and no side mask -- those
     exist to soften the drawing where it runs past the headline. */
  .plan{left:auto;right:var(--gut);top:auto;bottom:10px;
        width:min(calc(100% - var(--gut) * 2),372px);
        transform:none;margin-top:0}
  .plan-blur{display:none}
  /* No hard top edge: the drawing comes up out of the dark instead of
     starting on a wall line halfway down the block. */
  .plan-sharp{opacity:.55;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%)}
  .veil{background:linear-gradient(180deg,var(--ink) 24%,rgba(28,28,26,.84) 44%,
        rgba(28,28,26,.56) 60%,rgba(28,28,26,.56) 100%)}
  .grid{-webkit-mask-image:radial-gradient(90% 52% at 50% 34%,#000 10%,transparent 92%);
        mask-image:radial-gradient(90% 52% at 50% 34%,#000 10%,transparent 92%)}
  /* the dimension tick stays beside the label and the label wraps in what is
     left, rather than the tick stranding on a line of its own */
  .eyebrow,.tag{flex-wrap:nowrap;align-items:flex-start;gap:12px}
  .eyebrow i,.tag i{margin-top:6px}
  h2{max-width:none}
}
@media (max-width:520px){
  .nav{padding:12px var(--gut)}
  .word{font-size:11.5px;letter-spacing:.22em}
  .navcta{padding:10px 14px;font-size:10px;letter-spacing:.1em}
  h1{font-size:clamp(31px,7.6vw,40px);letter-spacing:-.03em}
  /* tighter label so the eyebrow holds one line on a phone */
  .eyebrow{font-size:10.5px;letter-spacing:.15em}
  .eyebrow i{width:36px}
  .lede{font-size:15.5px}
}