/* FONTS-START */
/* Self-hosted, latin subset only. Generated by gen_fonts.py from
   the exact files Google serves, so the rendering is identical and
   the third-party request is gone. font-display:swap keeps text
   visible while they load. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/fraunces-italic-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;
  src:url(/assets/fonts/fraunces-italic-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/fraunces-normal-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/fonts/poppins-normal-300.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/poppins-normal-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/poppins-normal-500.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/poppins-normal-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/poppins-normal-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrics-matched fallback, so the swap changes the
   glyphs and not the geometry. Without it the text
   reflows the moment the real font lands, and that
   reflow is the layout shift. */
@font-face{font-family:'Poppins Fallback';font-style:normal;font-weight:300;src:local('Arial');
  size-adjust:112.7%;ascent-override:93.2%;descent-override:31.1%;line-gap-override:0%;}
@font-face{font-family:'Poppins Fallback';font-style:normal;font-weight:600;src:local('Arial');
  size-adjust:118.1%;ascent-override:88.9%;descent-override:29.6%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback';font-style:italic;font-weight:400;src:local('Georgia');
  size-adjust:118.4%;ascent-override:82.6%;descent-override:21.5%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback';font-style:italic;font-weight:600;src:local('Georgia');
  size-adjust:118.4%;ascent-override:82.6%;descent-override:21.5%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback';font-style:normal;font-weight:600;src:local('Georgia');
  size-adjust:111.5%;ascent-override:87.7%;descent-override:22.9%;line-gap-override:0%;}
/* FONTS-END */

/* ============================================================
   StickyPost redesign, shared stylesheet for every page EXCEPT the
   homepage (index.html keeps all its CSS inline, on purpose).
   Derived verbatim from the homepage's own stylesheet on 2026-08-18
   plus the subpage furniture at the bottom. If a token or component
   changes on the homepage, re-derive or hand-sync this file.

   TWO DELIVERY PATHS: a rule added here reaches all 30 other pages and
   silently misses the homepage. Check both before calling a change done.
   ============================================================ */

/* ============================================================
   StickyPost homepage, v2.
   Built on the Rara Business model: one ground, no item
   containers, one accent, a lot of air.
   Kept from the approved work: the centred hero, two mirrored
   photo bands, statement sections, the interactive checklist.
   Type scale, spacing tokens and palette are the approved brief's.
   ============================================================ */
:root{
  --cream:#FAF7F2; --char:#272626; --terra:#DC5A3B; --terra-dk:#c44e32;
  --teal:#30A5A5; --pale:#B2E8E3; --tint:#F3F7F5;
  /* the darker teal is the readable one on cream, used for links, the
     eyebrow tags and the quiz tiers. It lived only in _tokens.css, which no
     shipping page loads, so every var(--teal-dk) on the site was resolving to
     nothing: transparent backgrounds and inherited link colour. */
  --teal-dk:#1f7d7d;
  /* .62 measured 4.29:1 on cream and fails AA, which matters because
     this is the colour of every word of body copy on the site. .70 is
     5.45:1. Chosen from a side-by-side of the real components rather
     than from the number alone: see contrast-options.html. */
  --ink:rgba(39,38,38,.70);
  --ink-soft:rgba(39,38,38,.65);
  --cream-soft:rgba(250,247,242,.66);
  --cream-faint:rgba(250,247,242,.52);
  --hair:rgba(39,38,38,.09);
  --hair-d:rgba(250,247,242,.14);
  --t-display:60px; --t-h2:42px; --t-h3:28px; --t-card:20px;
  --t-lede:19px; --t-body:17px; --t-small:14px; --t-eyebrow:11.5px;
  --t-num:44px;
  --xs:8px; --sm:16px; --md:24px; --lg:40px; --xl:64px; --xxl:96px; --xxxl:128px;
  --r-sm:8px; --r-box:12px; --r-md:16px; --r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Poppins','Poppins Fallback',sans-serif;font-weight:300;font-size:var(--t-body);
  line-height:1.8;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
/* height:auto is REQUIRED now that every img declares width and height.
   Those attributes are what let the browser reserve space and stop the
   page jumping, but without height:auto the browser treats the attribute
   as the used height and a fluid image stops scaling. Measured: the .nine
   cards went from 167px to 604px tall and the page grew 1447px. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--md)}

/* Skip link. Off screen until it takes focus, which is the whole point: a
   keyboard user gets past the nav in one key, a mouse user never sees it.
   GO-LIVE section 4 records these as "already in place"; measured, no page had
   one. 404.html uses it now and the rest follow in the semantics pass. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--char);color:var(--cream);padding:12px 20px;
  font-size:var(--t-small);font-weight:600;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------------- section shell ---------------- */
.sec{padding:var(--xxl) 0;border-bottom:1px solid var(--hair)}
.sec[id]{scroll-margin-top:76px}
.sec--dark{background:var(--char);color:var(--cream-soft);border-bottom-color:var(--char)}
.sec--tint{background:var(--tint)}
.sec--flush{border-bottom:0}

/* ---------------- the section header ----------------
   The block is wide so the heading can run long, but the lede underneath keeps
   its own cap. A 900px paragraph at 19px is roughly 95 characters a line,
   which is well past comfortable. */
/* the heading gets the full container. The lede keeps its own cap below,
   because widening that would push it past 86 characters a line. */
.head{max-width:1180px;margin:0 auto var(--xl);text-align:center}
/* --teal is 2.78:1 on cream and fails outright. --teal-dk is 4.58:1 and
   exists for exactly this; the :root comment already said it was for
   "links, the eyebrow tags and the quiz tiers". This restores that. */
.head .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--teal-dk);margin-bottom:var(--sm)}
.sec--dark .head .eyebrow{color:var(--pale)}
/* h1 and h2 are styled identically here on purpose. .head is the section
   heading pattern (h2, eight times on the homepage) AND the page title on the
   blog index, where it must be an h1 for the page to have one at all. The
   heading LEVEL is a document-structure decision; it should not change how the
   thing looks. */
.head h1,
.head h2{font-size:var(--t-h2);line-height:1.25;font-weight:600;color:var(--char);
  letter-spacing:-.02em;text-wrap:balance}
.head h1{margin:0}
.sec--dark .head h1,
.sec--dark .head h2{color:var(--cream)}
.head p{font-size:var(--t-lede);margin-top:var(--md);text-wrap:pretty;
  max-width:64ch;margin-inline:auto}
em.s{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:400;color:var(--terra);
  letter-spacing:-.008em}
.sec--dark em.s{color:#f0937a}

/* ---------------- the item. No container, ever. ---------------- */
.items{display:grid;gap:var(--xl)}
.items--2{grid-template-columns:repeat(2,1fr)}
.items--3{grid-template-columns:repeat(3,1fr);gap:var(--lg) var(--xl)}
.items--4{grid-template-columns:repeat(4,1fr);gap:var(--lg)}
.item{max-width:54ch}
.item::before{content:"";display:block;width:32px;height:2px;background:var(--teal);
  margin-bottom:var(--md)}
.item h3{font-size:var(--t-card);line-height:1.45;font-weight:600;color:var(--char);
  letter-spacing:-.01em;margin-bottom:var(--xs)}
.sec--dark .item h3{color:var(--cream)}
.item p{font-size:var(--t-body)}
/* variants of the marker, same item otherwise */
.item--num::before{content:counter(step);counter-increment:step;width:auto;height:auto;
  background:none;font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;
  font-size:var(--t-h3);color:var(--terra);line-height:1;margin-bottom:var(--sm)}
/* ---------- the jump ----------
   Before and after at sizes you can actually compare, with the growth sitting
   on the rule between them. The percentage is (now minus then) over then, run
   on the two figures printed either side of it. */
/* each client's numbers sit inside a hairline border, background untouched.
   The card answers the mouse: it lifts with the page's usual hover pair, the
   pill pops off the rule and the after-number grows a step. Not a counter,
   the page has enough of those. */
.item--stat{max-width:none;border:1px solid rgba(39,38,38,.12);
  border-radius:var(--r-box);padding:var(--lg);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.item--stat:hover{transform:translateY(-6px);border-color:var(--terra);
  box-shadow:0 20px 44px rgba(220,90,59,.16)}
.jump .to{transition:transform .3s ease}
.item--stat:hover .jump .to{transform:scale(1.07)}
.jump .pct{transition:transform .3s ease,box-shadow .3s ease}
.item--stat:hover .jump .pct{transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(31,125,125,.35)}
.item--stat::before{display:none}
.jump{display:flex;align-items:center;gap:var(--sm)}
.jump .from{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;font-size:38px;
  line-height:1;color:var(--ink-soft)}
.jump .to{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;font-size:76px;
  line-height:1;color:var(--terra)}
/* the rules run into whatever they meet: teal at the pill, terracotta at the
   number, so the row reads as one move rather than three pieces */
.jump .rule{flex:1;min-width:24px;height:2px;
  background:linear-gradient(90deg,rgba(39,38,38,.14),#1f7d7d)}
.jump .rule--out{background:linear-gradient(90deg,#1f7d7d,var(--terra))}
/* #1f7d7d rather than the lighter teal: white on #30A5A5 measures 2.97:1,
   which fails even the large-text threshold. This one is 4.89:1. */
.jump .pct{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;font-size:22px;
  line-height:1.3;color:#fff;background:#1f7d7d;border-radius:var(--r-pill);
  padding:4px 16px;white-space:nowrap}
.jump-cap{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);
  font-family:ui-monospace,Menlo,monospace;margin:10px 0 var(--md)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--md)}
.tags span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:#1f7d7d;border:1px solid rgba(48,165,165,.35);border-radius:var(--r-pill);
  padding:3px 12px;background:rgba(48,165,165,.07)}

/* ---------- boxed variant ----------
   Used only where items are compared or scanned as discrete units:
   team, fit, testimonials, pricing. Prose sections stay boxless,
   which is what stopped the page reading as clutter. */
.boxed{background:#fff;border:1px solid rgba(39,38,38,.07);border-radius:var(--r-box);
  box-shadow:0 6px 24px rgba(39,38,38,.07);padding:var(--lg);max-width:none}

/* ---------- emphasis ----------
   Body copy is deliberately soft grey, so full charcoal at 600 is enough to
   lift a phrase without introducing another colour. Used sparingly: roughly
   one phrase per paragraph, never a whole sentence in a short paragraph. */
strong{font-weight:600;color:var(--char)}
.sec--dark strong,.statement strong{color:var(--cream)}

/* ---------- one questions section, two groups ----------
   Both blocks used to be the same accordion, so nothing told a reader why
   there were two of them. Now the scope questions are simply shown, because
   their answers average thirteen words and a click that pays out thirteen
   words is a poor trade, and the practical ones stay behind a click because
   theirs average thirty-two. Three columns rather than two, to keep the
   section from running long. */
/* one list, click to open */
.qacc{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--xl)}
.qacc details{border-bottom:1px solid var(--hair)}
.qacc summary{cursor:pointer;list-style:none;padding:var(--md) 0;display:flex;
  justify-content:center;text-align:center;align-items:baseline;gap:var(--sm);
  font-size:var(--t-body);font-weight:600;color:var(--char);letter-spacing:-.01em;
  line-height:1.45;transition:color .2s}
.qacc summary::-webkit-details-marker{display:none}
.qacc summary::after{content:"+";font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;
  font-size:var(--t-h3);color:var(--terra);line-height:1;flex-shrink:0}
.qacc details[open] summary::after{content:"\2013"}
.qacc summary:hover{color:var(--terra-dk)}
.qacc summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.qacc .ans{padding:0 0 var(--md);font-size:var(--t-small);line-height:1.7;
  text-align:center}
/* the merged list: two columns centred at 1040, questions left-aligned with
   the toggle pinned right. The answer opens as a quiet card floating just
   under its question, nudged 28px to the side and a step narrower, so any
   covered row keeps its start and its plus in the open and clickable. */
.qacc--one{grid-template-columns:1fr 1fr;gap:0 64px;max-width:1040px;
  margin:0 auto;position:relative}
.qacc--one summary{justify-content:space-between;text-align:left}
.qacc--one .ans{text-align:left}
.qacc--one summary.open{color:var(--terra-dk)}
.qacc--one summary.open::after{content:"\2013"}
.qacc--one.js-pop details > .ans{display:none}   /* the card carries it */
.qpop{position:absolute;z-index:40;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-sm);box-shadow:0 10px 26px rgba(39,38,38,.09);
  padding:var(--sm) var(--md);display:none;animation:qpopin .15s ease}
.qpop.open{display:block}
@keyframes qpopin{from{opacity:0}to{opacity:1}}
.qpop p{font-size:var(--t-small);line-height:1.7}
@media(prefers-reduced-motion:reduce){.qpop{animation:none}}

/* ---------- team ---------- */
/* ---------------- the team, as a fan ----------------
   Four cards in a row are a list of job titles. The point of this section is
   that four people work on one page, so the page sits on the left and the four
   branch off it. Hover lights a branch on a mouse, tap locks one on a phone. */
.hud{position:relative;max-width:1000px;margin:0 auto;height:440px}
.hud svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node{position:absolute;right:4%;background:#fff;border:1px solid rgba(39,38,38,.07);
  border-radius:var(--r-box);box-shadow:0 6px 24px rgba(39,38,38,.07);
  padding:var(--md) var(--lg);font-size:var(--t-card);font-weight:600;color:var(--char);
  white-space:nowrap;cursor:pointer;
  transition:transform .24s ease,box-shadow .24s ease,color .24s ease}
.node:hover,.node.on{transform:scale(1.06);box-shadow:0 16px 34px rgba(39,38,38,.16);
  color:var(--terra)}
.node:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.hub{position:absolute;left:16%;top:50%;transform:translate(-50%,-50%);
  background:var(--char);color:var(--cream);border-radius:var(--r-pill);
  padding:var(--md) var(--lg);font-size:var(--t-body);font-weight:600;text-align:center;z-index:2}
/* the caption sits under the whole diagram rather than inside it. Centred
   inside the box it came within five pixels of the bottom card. */
.fan-cap{margin:var(--md) auto 0;max-width:56ch;text-align:center;font-size:var(--t-body);
  color:var(--char);min-height:56px;line-height:1.6}
.fan-cap.idle{color:var(--ink-soft)}
/* no javascript, or a browser that cannot draw the lines: the four roles are
   still there as a plain list with their sentences visible */
.hud noscript ul{display:grid;gap:var(--md)}
/* narrow screens get the same four roles as plain cards with their sentences
   already showing. Nothing sits behind a tap on a phone. */
.node .d{display:none}
.hud.stacked{height:auto;display:grid;gap:var(--md);position:static}
.hud.stacked svg{display:none}
.hud.stacked ~ .fan-cap{display:none}
.hud.stacked .node{position:static;right:auto;white-space:normal;cursor:default;
  padding:var(--lg) var(--md)}
.hud.stacked .node:hover{transform:none;box-shadow:0 6px 24px rgba(39,38,38,.07);
  color:var(--char)}
.hud.stacked .node .d{display:block;margin-top:var(--xs);font-size:var(--t-body);
  font-weight:300;color:var(--ink);line-height:1.7}
.hud.stacked .hub{position:static;transform:none;justify-self:start}

/* ---------------- process, a scroll-tracked path ----------------
   Only the path fill and the number colour respond to scroll.
   Headings and body copy are at full contrast from the first paint.
   Two steps per row, right column staggered down, number above its text.
   The number sits above the text so the connecting line has an empty lane to
   travel through, which is what stops it striking any heading. */
.steps{position:relative;max-width:1240px;margin:0 auto;padding:0 52px}
.steps .rows{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg) var(--lg)}
.steps .rows > .step:nth-child(even){margin-top:46px}   /* the stagger */
.step{position:relative;z-index:1}
.step .n{position:relative;margin-bottom:var(--sm);width:40px;height:40px;
  border-radius:var(--r-pill);background:var(--cream);border:2px solid rgba(39,38,38,.13);
  color:var(--ink-soft);font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;
  font-size:var(--t-lede);line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.step.on .n{border-color:var(--terra);color:#fff;background:var(--terra)}
.step h3{font-size:var(--t-card);line-height:1.45;font-weight:600;color:var(--char);
  letter-spacing:-.01em;margin-bottom:var(--xs)}
.step p{font-size:var(--t-body)}
.steps svg.path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0}
.steps svg.path .base{stroke:rgba(39,38,38,.13);stroke-width:2;fill:none}
.steps svg.path .fill{stroke:var(--terra);stroke-width:2;fill:none;stroke-linecap:round}

/* ---------------- statement ----------------
   Charcoal, so the pauses are the page's punctuation. */
/* was xxxl, which made these 70% padding around 110px of text. The charcoal
   already marks them as a pause; they do not also need to be 367px tall. */
.statement{padding:var(--xxl) 0;text-align:center;background:var(--char);border-bottom:0}
.statement p{font-size:var(--t-h2);line-height:1.3;font-weight:600;color:var(--cream);
  letter-spacing:-.02em;max-width:1080px;margin:0 auto;text-wrap:balance}
.statement em.s{color:#f0937a}

/* ---------------- photo band ---------------- */
.band{display:grid;grid-template-columns:1fr 1fr;gap:var(--xxl);align-items:center}
.band--flip .band-art{order:-1}
.band-art img{border-radius:var(--r-md);width:100%}
/* the founder portrait sits in an offset terracotta frame: the outline peeks
   out past the top and left, and the photo covers its lower corner */
.frame{position:relative}
.frame::before{content:"";position:absolute;top:-16px;left:-16px;right:-8px;bottom:26px;
  border:2px solid var(--terra);border-radius:28px;pointer-events:none;z-index:0}
.frame img{position:relative;z-index:1}
.band-art figcaption{font-size:var(--t-small);color:var(--ink-soft);margin-top:var(--sm)}
/* ---------- nine real posts from one client's feed ----------
   Full width, not in a band. At half width these render around 170px and the
   posts stop being readable, which defeats the point of showing them. */
.nine{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:36px 22px;max-width:1020px;margin:0 auto}
.nine .card{position:relative;border-radius:var(--r-sm);overflow:hidden;
  border:6px solid var(--cream);box-shadow:0 12px 30px rgba(39,38,38,.18);
  transition:transform .35s ease, box-shadow .35s ease}
.nine .card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.nine .card:hover{transform:rotate(0deg) scale(1.05) !important;
  box-shadow:0 26px 54px rgba(39,38,38,.26);z-index:20}
.nine .card:nth-child(1){transform:rotate(-2.6deg) translateY(0);    z-index:3}
.nine .card:nth-child(2){transform:rotate(1.8deg)  translateY(22px); z-index:5}
.nine .card:nth-child(3){transform:rotate(-1.4deg) translateY(-14px);z-index:2}
.nine .card:nth-child(4){transform:rotate(2.2deg)  translateY(-6px); z-index:6}
.nine .card:nth-child(5){transform:rotate(-1.9deg) translateY(16px); z-index:9}
.nine .card:nth-child(6){transform:rotate(2.7deg)  translateY(-18px);z-index:4}
.nine .card:nth-child(7){transform:rotate(-2.2deg) translateY(8px);  z-index:7}
.nine .card:nth-child(8){transform:rotate(1.5deg)  translateY(-10px);z-index:8}
.nine .card:nth-child(9){transform:rotate(-1.7deg) translateY(18px); z-index:1}
/* inside the band the whole stack has to fit the old four-tile footprint, so
   thinner borders, tighter gaps, and much smaller vertical nudges. Capped at
   410px so the grid's height matches the text beside it: measured 545px
   against the text column's 543. */
.band-art .nine{padding:12px 6px;gap:7px;max-width:410px;margin-inline:auto}
.band-art .nine .card{border-width:3px;box-shadow:0 6px 16px rgba(39,38,38,.16)}
.band-art .nine .card:nth-child(1){transform:rotate(-2deg)   translateY(0)}
.band-art .nine .card:nth-child(2){transform:rotate(1.5deg)  translateY(9px)}
.band-art .nine .card:nth-child(3){transform:rotate(-1.2deg) translateY(-6px)}
.band-art .nine .card:nth-child(4){transform:rotate(1.8deg)  translateY(-3px)}
.band-art .nine .card:nth-child(5){transform:rotate(-1.5deg) translateY(7px)}
.band-art .nine .card:nth-child(6){transform:rotate(2deg)    translateY(-8px)}
.band-art .nine .card:nth-child(7){transform:rotate(-1.7deg) translateY(4px)}
.band-art .nine .card:nth-child(8){transform:rotate(1.2deg)  translateY(-5px)}
.band-art .nine .card:nth-child(9){transform:rotate(-1.4deg) translateY(8px)}
/* a band heading sits in a half-width column, so it takes the sub-heading size */
.band-txt h2{font-size:var(--t-h3);line-height:1.3;font-weight:600;color:var(--char);
  letter-spacing:-.02em;margin-bottom:var(--md);text-wrap:balance}
.sec--dark .band-txt h2{color:var(--cream)}
.sec--dark .band-txt .eyebrow{color:var(--pale)}
.band-txt p{text-wrap:pretty}   /* no single-word last lines */
.band-txt p+p{margin-top:var(--md)}
.band-txt .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--teal-dk);margin-bottom:var(--sm)}
.sig{margin-top:var(--lg);font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;
  font-size:var(--t-h3);line-height:1;color:var(--char)}
.sig span{display:block;font-family:'Poppins','Poppins Fallback',sans-serif;font-style:normal;
  font-size:var(--t-small);font-weight:300;color:var(--ink-soft);margin-top:var(--xs)}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;font-size:var(--t-body);font-weight:500;padding:15px 30px;
  border-radius:var(--r-pill);border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
/* white on --terra is 3.77:1 and fails; on --terra-dk it is 4.68:1.
   Only the primary BUTTON moves. --terra stays exactly as it is
   everywhere else, because it carries the accent italics, the rules
   and the logo, and none of those are white text on a fill. */
.btn-p{background:var(--terra-dk);color:#fff}
.btn-p:hover{background:var(--terra-dk)}
/* the ghost button is teal at rest (ghost-button-options B): teal outline
   and teal text, pale pair on charcoal, and the dark-teal fill on hover */
.btn-g{border-color:#1f7d7d;color:#1f7d7d}
.btn-g:hover{border-color:#1f7d7d;background:#1f7d7d;color:#fff}
.sec--dark .btn-g{border-color:rgba(178,232,227,.65);color:var(--pale)}
.sec--dark .btn-g:hover{border-color:#1f7d7d;background:#1f7d7d;color:#fff}
.btns{display:flex;gap:var(--sm);flex-wrap:wrap;margin-top:var(--lg)}
.btns--mid{justify-content:center}
.micro{font-size:var(--t-small);color:var(--ink-soft);margin-top:var(--md)}
.sec--dark .micro{color:var(--cream-faint)}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(250,247,242,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--md);padding:var(--sm) 0}
.logo{font-size:var(--t-lede);font-weight:600;color:var(--char);letter-spacing:-.02em}
.logo b{color:var(--terra);font-weight:600}
.nav-links{display:flex;gap:var(--md);font-size:var(--t-small)}
.nav-links a:hover{color:var(--char)}
/* the nav button, same reason as .btn-p: white on --terra is 3.77:1 and
   on --terra-dk it is 4.68:1. This one was missed the first time round. */
.nav-cta{background:var(--terra-dk);color:#fff;padding:10px 20px;border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:500}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--char)}
.burger span+span{margin-top:5px}

/* ---------------- hero ---------------- */
.hero{padding:var(--xxl) 0 var(--xl);text-align:center;border-bottom:0}
.hero .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--teal-dk);margin-bottom:var(--md)}
.hero h1{font-size:var(--t-display);line-height:1.1;font-weight:600;color:var(--char);
  letter-spacing:-.025em;max-width:1120px;margin:0 auto var(--md);text-wrap:balance}
/* ch overstates real characters in Poppins, so 64ch was landing at 80 a line */
.hero p{font-size:var(--t-lede);max-width:54ch;margin:0 auto}
.hero .btns{justify-content:center}
/* the line under the buttons reads quieter: a step smaller, taller leading,
   and its own cap so it wraps as a neat two-liner */
.hero .micro{font-size:13px;line-height:2;max-width:52ch;margin:20px auto 0}
/* counter styling now lives with the counter band, further down */
/* ---------------- the work marquee ----------------
   The track holds the set twice and slides exactly -50%, so the second copy
   sits where the first started and the loop has no visible seam. */
/* bottom padding stays small: the next section brings its own 96px, and the
   two stacked read as one oversized gap */
.workstrip{padding:0 0 var(--lg);border-bottom:1px solid var(--hair)}
/* overflow-x:auto rather than hidden, and the loop is driven by scrollLeft
   instead of a CSS transform. A transform animation cannot be dragged; a
   scroll container can, and it gets trackpad and keyboard for free. */
.marquee{position:relative;overflow-x:auto;overflow-y:hidden;padding:var(--xs) 0;
  cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing;user-select:none}
/* edge fade via a mask on the strip itself. It used to be two cream
   gradients painted over the tiles, which Clarisse's machine rendered as a
   stale hard-edged wash; a mask fades the strip in one compositing pass. */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 120px,
  #000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 120px,
  #000 calc(100% - 120px),transparent)}
/* padding-right matches the gap on purpose. 54 tiles have only 53 gaps between
   them, so without a trailing one, half the track width falls half a gap short
   of the distance to the duplicate and the loop jumps 7px every cycle. */
.mq-track{display:flex;gap:14px;padding-right:14px;width:max-content}
.mq-track img{height:300px;width:auto;border-radius:var(--r-sm);
  box-shadow:0 8px 22px rgba(39,38,38,.12);pointer-events:none;-webkit-user-drag:none}
.workstrip figcaption{font-size:var(--t-small);color:var(--ink-soft);margin-top:var(--md);
  text-align:center}
/* ---------------- platforms bar ----------------
   Seven platforms is one sentence of information, so it sits at the foot of the
   questions section rather than taking a whole section. Icons are the same SVG
   paths as the live site. */
.bandbar{background:var(--char);border-radius:var(--r-box);padding:var(--lg) var(--xl);
  margin-top:var(--xl);display:flex;align-items:center;justify-content:space-between;
  gap:var(--xl);flex-wrap:wrap}
.bandbar .lede{color:var(--cream);font-size:var(--t-card);font-weight:600;
  letter-spacing:-.01em;max-width:26ch;line-height:1.4}
.bandbar .lede em{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:400;color:#f0937a}
.bandbar .row{display:flex;gap:var(--lg);flex-wrap:wrap;align-items:center}
.bandbar .row > a{display:flex;flex-direction:column;align-items:center;gap:8px}
.bandbar svg{width:24px;height:24px;fill:var(--cream);opacity:.7;
  transition:opacity .25s,fill .25s}
.bandbar .row > a:hover svg{opacity:1;fill:var(--pale)}
.bandbar span{font-size:12px;color:var(--cream-faint)}

/* ---------------- the counter band ---------------- */
.statsband{background:var(--char);padding:var(--lg) 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lg)}
.stat{text-align:center}
.stat b{display:block;font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;
  font-size:var(--t-num);line-height:1;color:#f0937a;font-variant-numeric:tabular-nums}
.stat:nth-child(even) b{color:var(--pale)}
.stat span{display:block;font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--cream-faint);margin-top:var(--sm)}

/* ---------------- checklist, dark ---------------- */
/* ---------------- prose sections ----------------
   Problems 2 and 3 are pure writing, no images. Both hide a list inside a
   sentence, so the list comes out and takes the place the photo takes in the
   bands: question and paragraphs left, list right, the two centred against
   each other. The list has no container, matching everything around it, and
   gets its weight from the Fraunces numerals instead. */
/* the label is a sentence out of the copy, not a tag, so it stays sentence
   case. Set in caps it ran to two lines of tracked-out type and stopped
   reading as a sentence at all. */
.nums h4{font-size:var(--t-lede);font-weight:500;color:var(--char);line-height:1.5;
  letter-spacing:-.01em;margin-bottom:var(--md);max-width:36ch;text-wrap:pretty}
.nums ul{list-style:none}
.nums li{display:flex;gap:var(--md);align-items:baseline;
  padding:var(--sm) var(--sm) var(--sm) 0;border-bottom:1px solid var(--hair);
  font-size:var(--t-lede);color:var(--char);font-weight:400;line-height:1.5;
  border-radius:var(--r-sm);transition:padding-left .24s ease,background .24s ease}
.nums li:hover{padding-left:var(--sm);background:rgba(48,165,165,.09)}
.nums .n{flex:0 0 auto;min-width:34px;font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;
  font-weight:600;font-size:var(--t-h3);line-height:1;color:var(--teal-dk);
  transition:color .24s ease}
.nums li:hover .n{color:var(--terra)}
/* on charcoal the same list, in the colours that read there */
.sec--dark .nums h4{color:var(--cream)}
.sec--dark .nums li{color:var(--cream);border-bottom-color:var(--hair-d)}
.sec--dark .nums li:hover{background:rgba(250,247,242,.06)}
.sec--dark .nums .n{color:var(--pale)}
.sec--dark .nums li:hover .n{color:#f0937a}
/* problem 3's list: no numerals, its four things are materials rather than a
   sequence. Terracotta arrows, the polls strip's own glyph. Chosen from
   list-gallery shape 1. Rows lose the border and hover of the numbered list. */
.nums--arrows{background:#fff;border:1px solid rgba(39,38,38,.07);
  border-radius:var(--r-box);box-shadow:0 6px 24px rgba(39,38,38,.07);padding:var(--lg)}
.nums--arrows li{border-bottom:0;padding:7px 0;gap:12px}
.nums--arrows li::before{content:"\203A";font-family:'Fraunces','Fraunces Fallback',serif;font-weight:600;
  font-size:24px;line-height:1;color:var(--terra)}
.nums--arrows li:hover{background:transparent;padding-left:0}
/* and its columns flip, list left, prose right, so the three problem
   sections stop repeating one geometry. Same idea as .band--flip above. */
.band--flip .nums{order:-1}
/* the aside in problem 1, set apart from the paragraphs around it */
.aside{margin-top:var(--md);padding-left:var(--md);border-left:2px solid var(--teal);
  font-size:var(--t-body);color:var(--ink-soft)}

/* ---------------- fit, a paired comparison ----------------
   Rows are shared dimensions rather than two unrelated lists, and cells are
   noun phrases rather than sentences. Both come from Nielsen Norman Group's
   comparison-table guidance: options as columns, attributes as rows, and no
   full sentences in cells. */
/* fills the container rather than sitting inset, so the two sides get room */
.cmp{max-width:none;margin:0}
.cmp-head,.cmp-row{display:grid;grid-template-columns:180px 1fr 1fr}
.cmp-head span{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:var(--sm) var(--md)}
.cmp-head{border-bottom:2px solid var(--hair)}
.cmp-head .y{color:#1f7d7d}
.cmp-head .n{color:var(--terra-dk)}
.cmp-row{border-bottom:1px solid var(--hair);transition:background .2s ease}
.cmp-row:last-child{border-bottom:0}
.cmp-row:hover{background:rgba(39,38,38,.022)}
.cmp-row .dim{font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--char);padding:var(--md)}
.cmp-row .cell{display:flex;gap:12px;align-items:flex-start;padding:var(--md);
  font-size:var(--t-body);line-height:1.6}
.cmp-row .cell.y{border-right:1px solid var(--hair)}
/* the section sits on charcoal (picked from fit-dark-options, 2026-08-17):
   labels go cream, the column markers take the dark-side pair, hairlines and
   the row hover switch to their dark versions. Badges stay, they carry their
   own colour. */
.sec--dark .cmp-head{border-bottom-color:var(--hair-d)}
.sec--dark .cmp-head .y{color:var(--pale)}
.sec--dark .cmp-head .n{color:#f0937a}
.sec--dark .cmp-row{border-bottom-color:var(--hair-d)}
.sec--dark .cmp-row:hover{background:rgba(250,247,242,.05)}
/* on hover the good-fit side lights harder than the rest of the row */
.sec--dark .cmp-row .cell.y{transition:background .2s ease,color .2s ease}
.sec--dark .cmp-row:hover .cell.y{background:rgba(178,232,227,.12);color:var(--cream)}
.sec--dark .cmp-row .dim{color:var(--cream)}
.sec--dark .cmp-row .cell{color:var(--cream-soft)}
.sec--dark .cmp-row .cell.y{border-right-color:var(--hair-d)}
/* check and cross are drawn in CSS, so they render the same on every machine */
.badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-sm);color:#fff;margin-top:6px}
.badge.tick{background:var(--teal)}
.badge.cross{background:var(--terra)}
.badge.tick::before{content:"";display:block;width:8px;height:4px;
  border-left:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(-45deg);margin-top:-3px}
.badge.cross::before{content:"";display:block;width:9px;height:9px;
  background:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 2.2px,2.2px 100%;background-position:center,center;
  background-repeat:no-repeat;transform:rotate(45deg)}

/* ---------------- quotes ---------------- */
/* tighter gutter here, because three boxes plus 64px gaps left each quote at
   27 characters a line, which is too narrow to read comfortably */
/* Chosen from testimonial-card-options, option B: quote-mark card in this
   page's accents. Terracotta mark, teal company line, and the short teal rule
   sweeps to full terracotta width on hover. Hover pair (lift, terracotta
   border, warm shadow) matches the pricing cards, one hover language. The
   card styles itself, so the markup no longer carries .boxed. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md)}
.quote{background:#fff;border:1px solid rgba(39,38,38,.07);border-radius:var(--r-md);
  box-shadow:0 6px 24px rgba(39,38,38,.07);padding:var(--lg);
  display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.quote .mark{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:600;font-size:64px;line-height:.6;
  height:34px;color:var(--terra)}
.quote p{font-size:var(--t-body);color:var(--char);font-weight:300;line-height:1.75}
.quote .sep{width:40px;height:2px;background:var(--teal);margin:var(--md) 0;border:0;
  transition:width .35s ease,background .35s ease}
.quote footer{margin-top:auto;font-size:var(--t-small);font-weight:600;color:var(--char)}
.quote footer span{display:block;font-weight:500;color:#1f7d7d}
.quote:hover{transform:translateY(-6px);border-color:var(--terra);
  box-shadow:0 20px 44px rgba(220,90,59,.16)}
.quote:hover .sep{width:100%;background:var(--terra)}

/* ---------------- pricing ---------------- */
/* Stretch, not centre. Cards of unequal length centred on one axis start at
   three different heights and the shortest plan floats. */
.plans{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:var(--md);align-items:stretch}
.plan{background:#fff;border:1px solid rgba(39,38,38,.07);border-radius:var(--r-box);
  box-shadow:0 6px 24px rgba(39,38,38,.07);padding:var(--lg);
  display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
/* the lift alone read as nothing on a static glance, so the card also lights:
   terracotta border and a warm shadow, same pair the featured card wears */
.plan:hover{transform:translateY(-6px);border-color:var(--terra);
  box-shadow:0 20px 44px rgba(220,90,59,.16)}
.plan--feat{padding:var(--xl) var(--lg);border:2px solid var(--terra);transform:scale(1.035);
  background:linear-gradient(#fff,#FFF7F4);box-shadow:0 22px 50px rgba(220,90,59,.18);
  position:relative}
/* without this the generic hover drops the featured card back to scale 1 */
.plan--feat:hover{transform:translateY(-6px) scale(1.05)}
.plan--feat .price{color:var(--terra)}
.plan--feat .tk{background:var(--terra)}
.plan--feat .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--terra);color:#fff;font-size:var(--t-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;padding:6px 18px;border-radius:var(--r-pill);
  white-space:nowrap}
/* tick, same object as the fit comparison badges but smaller */
.tk{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:5px;margin-top:6px;background:var(--teal);color:#fff}
.tk::before{content:"";display:block;width:7px;height:3.5px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-top:-2px}

/* ---------------- polls, one strip ----------------
   Four separate figures made this section taller than anything it was
   proving. On one line the whole run reads in order and the block measures
   47px instead of 510. */
.strip{display:flex;justify-content:center;align-items:baseline;gap:var(--md);
  flex-wrap:wrap;max-width:1100px;margin:0 auto}
.strip .u{display:flex;align-items:baseline;gap:10px;
  transition:transform .25s ease}
/* the figures answer the mouse: the unit lifts and its label comes to full
   charcoal, same restraint as the numbered-list hover */
.strip .u:hover{transform:translateY(-3px)}
.strip .u span{transition:color .25s ease}
.strip .u:hover span{color:var(--char)}
.strip b{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;font-size:44px;
  line-height:1;color:#1f7d7d}
.strip .u:last-of-type b{color:var(--terra)}
.strip span{font-size:var(--t-body);color:var(--ink)}
.strip .to{color:rgba(39,38,38,.28);font-size:22px;line-height:1;padding:0 var(--xs)}
.strip-note{font-size:var(--t-lede);max-width:64ch;margin:var(--lg) auto 0;text-align:center;
  text-wrap:pretty}
/* the polls section sits on charcoal (picked from polls-dark-options,
   2026-08-17): figures take the dark-side pair, labels go soft cream */
.sec--dark .strip b{color:var(--pale)}
.sec--dark .strip .u:last-of-type b{color:#f0937a}
.sec--dark .strip span{color:var(--cream-soft)}
.sec--dark .strip .to{color:rgba(250,247,242,.3)}
.sec--dark .strip .u:hover span{color:var(--cream)}
.plan h3{font-size:var(--t-card);font-weight:600;color:var(--char)}
.price{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;font-size:52px;
  line-height:1;color:var(--char);margin:var(--xs) 0}
.price span{font-family:'Poppins','Poppins Fallback',sans-serif;font-style:normal;font-size:var(--t-small);
  font-weight:300;color:var(--ink-soft)}
.plan .what{font-size:var(--t-small);color:var(--ink-soft);margin-bottom:var(--md)}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small);
  line-height:1.7;padding:5px 0}
/* auto pushes every plan's button to a shared baseline, whatever the list length */
.plan .btn{margin-top:auto;align-self:stretch;text-align:center;
  font-size:var(--t-small);padding:13px 22px}
.plan ul{margin:var(--md) 0 var(--lg)}

/* ---------------- faq ---------------- */
/* Two columns, same shape as the questions section higher up. Eight stacked
   rows was what made this section tall, not the answer width. The column now
   sets the measure, which lands near 64 characters. */

/* ---------------- final + footer ---------------- */
/* Chosen from cta-width-options, option C: the banner. The heading runs the
   whole container at 56px, then the quiz copy and the buttons share one rule
   below it. Was a centred island capped at 18ch. */
/* shorter bottom padding: the charcoal footer follows immediately, so full
   section padding plus the footer's own padding read as one oversized gap */
.final{border-bottom:0;padding-bottom:var(--lg)}
.final h2{font-size:56px;line-height:1.12;font-weight:600;color:var(--cream);
  letter-spacing:-.02em;margin-bottom:var(--lg);text-wrap:balance}
.final .row{display:flex;gap:var(--xxl);align-items:flex-start;
  padding-top:var(--lg);border-top:1px solid var(--hair-d)}
.final .row p{flex:1;font-size:var(--t-lede);max-width:none}
.final .btncol{flex:0 0 auto}
.final .btncol .btns{margin-top:0}
.final .btncol .micro{margin-top:var(--sm)}
.final .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--pale);margin-bottom:var(--md)}
.footer{background:var(--char);color:var(--cream-soft);padding:var(--xl) 0 var(--lg)}
.foot-top{display:flex;justify-content:space-between;gap:var(--md);flex-wrap:wrap;
  align-items:center}
.footer .logo{color:var(--cream)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--md);font-size:var(--t-small)}
.foot-bot{margin-top:var(--lg);padding-top:var(--md);border-top:1px solid var(--hair-d);
  display:flex;justify-content:space-between;gap:var(--sm);flex-wrap:wrap;
  font-size:var(--t-small);color:var(--cream-faint)}

@media(max-width:1000px){
  :root{--t-display:38px;--t-h2:30px;--t-h3:24px;--t-num:34px;
        --xxl:64px;--xxxl:80px;--xl:48px}
  .items--2,.items--3,.items--4,.quotes,.band,
  .qacc{grid-template-columns:1fr}
  /* the comparison stacks: dimension label, then the yes, then the no */
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr}
  .cmp-row .cell.y{border-right:0}
  .cmp-row .dim{padding-bottom:0}
  /* stays 3 across. Dropping to 2 turns a 3x3 grid into a 2x2x2x2
     stack, which is not the thing it is meant to be. */
  .nine{grid-template-columns:repeat(3,1fr);padding:20px 10px;gap:8px}
  .band{gap:var(--lg)}
  .band--flip .band-art{order:0}
  .band--flip .nums{order:0}
  .item{max-width:none}
  .plans{grid-template-columns:1fr;gap:var(--lg)}
  .plan--feat{transform:none}
  .plan--feat:hover{transform:translateY(-6px)}
  /* the strip wraps to two rows rather than shrinking its numerals */
  .strip{gap:var(--sm)}
  .strip b{font-size:36px}
  .strip .to{display:none}
  /* the final banner: heading back to the scale of the narrow screen, and
     the copy-and-buttons rule stacks */
  .final h2{font-size:34px}
  .final .row{flex-direction:column;gap:var(--lg)}
  /* one column, no stagger. The path re-measures itself and becomes a
     simple vertical run down the numbers. */
  .steps{padding:0}
  .steps .rows{grid-template-columns:1fr;gap:var(--lg)}
  .steps .rows > .step:nth-child(even){margin-top:0}
}
/* The in-menu button exists only on phones; the header carries it on desktop.
   This base rule has to sit BEFORE the media query: same specificity means
   source order decides, and putting it after silently cancelled the mobile
   rule and left the burger menu with no call to action in it. */
.nav-links-cta{display:none}

@media(max-width:720px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);
    flex-direction:column;gap:0;padding:var(--sm) var(--md);border-bottom:1px solid var(--hair)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0}
  .burger{display:block}
  .nav-in{position:relative}
  /* The header is the logo and the burger, nothing else. The call to action
     moves into the menu rather than disappearing: it is the same link, shown
     in the one place that has room for it. */
  .nav-cta{display:none}
  .nav-links-cta{display:block;margin-top:var(--sm);text-align:center;
    background:var(--terra-dk);color:#fff;font-weight:600;
    padding:12px 20px;border-radius:var(--r-pill)}
}

@media(max-width:640px){
  /* The tiles are 300px tall at every width, so a 390px screen shows about
     one and a half of them and the strip stops reading as a body of work.
     172px shows three. Desktop is untouched. */
  .mq-track img{height:172px}
  .mq-track{gap:9px;padding-right:9px}
}

/* ================= subpage furniture ================= */
/* blog index cards: discrete scannable units, so boxed is allowed.
   Same hover pair as pricing and testimonials. */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md)}
@media(max-width:1000px){.postgrid{grid-template-columns:1fr}}
.postcard{background:#fff;border:1px solid rgba(39,38,38,.07);border-radius:var(--r-md);
  box-shadow:0 6px 24px rgba(39,38,38,.07);padding:var(--lg);
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.postcard:hover{transform:translateY(-6px);border-color:var(--terra);
  box-shadow:0 20px 44px rgba(220,90,59,.16)}
.postcard .kick{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:600;
  font-size:var(--t-card);color:var(--terra);line-height:1.3;margin-bottom:var(--sm)}
.postcard .tag{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:#1f7d7d;margin-bottom:var(--xs)}
.postcard h3{font-size:var(--t-card);font-weight:600;color:var(--char);line-height:1.4;
  letter-spacing:-.01em;margin-bottom:var(--xs)}
.postcard p{font-size:var(--t-small);line-height:1.65;color:var(--ink)}
.postcard .meta{margin-top:auto;padding-top:var(--md);font-size:12px;color:var(--ink-soft)}
/* the current page's own nav link */
.nav-links a.on{color:var(--char);font-weight:600}

/* ================= blog article furniture ================= */
.arthead{max-width:820px;margin:0 auto var(--xl);text-align:center}
.arthead .back{display:inline-block;font-size:var(--t-small);color:var(--ink-soft);
  margin-bottom:var(--lg);transition:color .2s}
.arthead .back:hover{color:var(--terra-dk)}
.arthead .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--teal-dk);margin-bottom:var(--sm)}
.arthead h1{font-size:var(--t-h2);line-height:1.25;font-weight:600;color:var(--char);
  letter-spacing:-.02em;text-wrap:balance;margin-bottom:var(--md)}
.arthead .meta{font-size:var(--t-small);color:var(--ink-soft)}
.article{max-width:720px;margin:0 auto}
.article p{margin-bottom:var(--md);text-wrap:pretty}
.article .intro{font-size:var(--t-lede)}
.article h2{font-size:var(--t-h3);line-height:1.35;font-weight:600;color:var(--char);
  letter-spacing:-.015em;margin:var(--xl) 0 var(--sm);text-wrap:balance}
.article h3{font-size:var(--t-card);line-height:1.4;font-weight:600;color:var(--char);
  margin:var(--lg) 0 var(--xs)}
.article ul,.article ol{margin:0 0 var(--md)}
.article li{position:relative;padding:4px 0 4px 26px}
.article ul li::before{content:"\2022";position:absolute;left:6px;top:1px;
  font-family:'Fraunces','Fraunces Fallback',serif;font-weight:600;font-size:22px;line-height:1.4;
  color:var(--terra)}
.article ol{counter-reset:artli}
.article ol li::before{counter-increment:artli;content:counter(artli);
  position:absolute;left:0;top:6px;font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;
  font-weight:600;font-size:var(--t-body);color:var(--terra)}
.article a{color:var(--teal-dk);font-weight:500;border-bottom:1px solid rgba(48,165,165,.4);
  transition:color .2s,border-color .2s}
.article a:hover{color:var(--terra-dk);border-color:var(--terra)}
.article .pull-quote{font-family:'Fraunces','Fraunces Fallback',serif;font-style:italic;font-weight:400;
  font-size:var(--t-h3);line-height:1.45;color:var(--char);letter-spacing:-.01em;
  border-left:2px solid var(--teal);padding-left:var(--md);margin:var(--xl) 0}
.article .pull-quote p{margin:0;font-size:inherit}
/* the in-article ask, one dark card. Covers both live variants. */
.article .cta-box,.article .cta-card{background:var(--char);border-radius:var(--r-box);
  padding:var(--xl) var(--lg);text-align:center;margin:var(--xl) 0 0}
.article .cta-box h3,.article .cta-card h3{color:var(--cream);margin:0 0 var(--xs)}
.article .cta-box p,.article .cta-card p{color:var(--cream-soft);margin-bottom:var(--md)}
.article .cta-box strong,.article .cta-card strong{color:var(--cream)}
.article .cta-button,.article .cta-btn{display:inline-block;font-size:var(--t-body);
  font-weight:500;padding:15px 30px;border-radius:var(--r-pill);background:var(--terra);
  color:#fff;border:0;transition:background .2s}
.article .cta-button:hover,.article .cta-btn:hover{background:var(--terra-dk)}

/* FOOTER-CSS-START */
/* ---- footer sitemap ----
   Replaced a single row of links. The brand column is wider than the rest so the
   line under the logo has somewhere to sit; the four link columns share what is
   left. Under 900px it folds to two columns and the brand runs full width. */
.foot-map{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr 1fr;gap:var(--lg);
  padding-bottom:var(--lg)}
.foot-brand p{font-size:13px;line-height:1.6;color:var(--cream-faint);max-width:30ch;
  margin:12px 0 10px}
.foot-mail{font-size:13px;color:var(--pale);border-bottom:1px solid rgba(178,232,227,.35);
  padding-bottom:1px;display:inline-block;min-height:24px;line-height:22px}
.foot-mail:hover{color:var(--cream);border-color:var(--cream)}
/* TAP TARGETS. Every footer link measured 19px tall (13.5px at a 1.4
   line-height) and the mail link 21px. That WAS the whole of the site's
   "16 tap targets under 24px" finding: it is the shared chrome, so it
   appeared identically on all 32 pages. WCAG 2.2 asks for 24px.
   The gap pays for the padding: 3px each side plus a 3px gap is the same
   28px rhythm as 9px of gap around a 19px link, so the footer looks the
   same and the targets clear the bar. */
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.foot-col h3{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--pale);margin-bottom:2px}
.foot-col a{font-size:13.5px;line-height:1.4;color:var(--cream-soft);
  transition:color .18s;padding:3px 0;min-height:24px;
  display:flex;align-items:center}
.foot-col a:hover{color:var(--cream)}
@media(max-width:900px){
  .foot-map{grid-template-columns:repeat(2,1fr);gap:var(--md) var(--lg)}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:520px){ .foot-map{grid-template-columns:1fr} }

/* The CTA band and the footer are both charcoal, so back to back they read as
   one long dark block with a hole in the middle. The hairline gives the seam an
   edge and the reduced padding closes the hole. */
.artcta + .footer{padding-top:var(--lg);border-top:1px solid var(--hair-d)}
/* FOOTER-CSS-END */

/* The eyebrow is 11.5px, and it is the site's ONLY source of text under 12px:
   72 instances across the site, every one of them this single token (the card
   tags, the section eyebrows, the counter labels, the footer column heads).
   It is a deliberate style, uppercase and tracked and 600 weight, and it earns
   its size on a desktop. On anything handheld it sits under the readable
   floor. Half a pixel buys the threshold and nobody can see the difference.
   Desktop keeps 11.5px exactly as approved. */
@media(max-width:768px){ :root{--t-eyebrow:12px} }

/* ---------------- the phone ----------------
   Added 2026-08-20. The homepage scrolled sideways 240px at 390 and 216px at
   414 because three desktop layouts had no breakpoint. The marquee was NOT the
   cause; it is clipped by its own container and always was.

   min-width:0 appears twice on purpose. Grid and flex items default to
   min-width:auto, which means "never shrink below your content", and that is
   what pushes a track past the screen no matter what the column count says. */
@media(max-width:640px){
  /* the counter band: four columns cannot fit a phone */
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--md) var(--sm)}
  .stat{min-width:0}
  .stat b{font-size:32px}

  /* the client proof cards. The jump is from -> rule -> percent -> rule -> to,
     which is far wider than a phone at 76px numerals, so it wraps and the
     type comes down to a size that fits. */
  .item--stat{padding:var(--md)}
  .jump{flex-wrap:wrap;gap:var(--xs) var(--sm);min-width:0}
  .jump .from{font-size:26px}
  .jump .to{font-size:46px}
  .jump .rule{min-width:12px}
  .jump .pct{font-size:16px;padding:3px 12px}
  /* left at 12px: 11px would drop below the readable floor, and the row
     already fits once the numerals come down */
  .jump-cap{font-size:12px}
}

/* ---- contrast, WCAG AA. Added 2026-08-21 after axe found three failures
   that were masked by two larger ones. Each is scoped to the failing element,
   not the token, because every one of these colours also appears somewhere it
   already passes. ---- */
.tags span{color:#1a6b6b}                 /* 4.28 -> 5.47 on the pale tint */
.aside em.s{color:#b8462c}                /* 3.53 -> 4.97 at body size */
.plan--feat .flag{background:var(--terra-dk)}  /* white 3.77 -> 4.68 */