/* ============================================================
   Cherry Peach Plum — Growth Partners
   Three fruits, three colours, never blended.
   ============================================================ */

/* Self-hosted from Google Fonts (SIL Open Font License). Latin + Latin Extended (for ₹). */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/archivo-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/archivo-400-800-latin.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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plexmono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plexmono-400-latin.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plexmono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plexmono-500-latin.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-400-700-latin.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; }
/* Metric-matched fallbacks (measured against the web fonts in Chrome) so text does not
   reflow when the fonts arrive — the layout-shift source on slow connections. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98.61%; ascent-override: 89.24%; descent-override: 21.30%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.02%; ascent-override: 90.64%; descent-override: 22.43%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 27.00%; line-gap-override: 0%; }

/* ---- 1. Reset & global traps ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* TRAP: a component display rule must never beat the hidden attribute */
[hidden] { display: none !important; }

/* TRAP: a fixed height must never stretch a photograph */
img, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---- 2. Tokens --------------------------------------------- */
:root {
  /* the brand triad, sampled from the logo itself */
  --cherry: #ED217C;          /* decoration only: rules, dots, borders */
  --cherry-ink: #D0186D;      /* any surface carrying white text, or cherry used as text
                                 5.21:1 on white text, 4.90:1 as text on paper */
  --damson: #9F1F63;
  --plum:   #662D91;

  --ink:        #14111A;
  --ink-muted:  #514C5B;
  --ink-faint:  #6E6879;
  --paper:      #F8F8F7;
  --paper-pure: #FFFFFF;
  --rule:       #DEDCDA;
  --rule-soft:  #EBE9E7;

  --shell: 1280px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  /* deliberately more than one radius and more than one shadow */
  --r-sharp: 2px;
  --r-soft: 10px;
  --r-full: 999px;
  --lift-low: 0 1px 2px rgba(20,17,26,.07);
  --lift-mid: 0 6px 24px -10px rgba(20,17,26,.22);
  --lift-high: 0 24px 60px -24px rgba(20,17,26,.34);

  --f-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- 3. Base ----------------------------------------------- */
body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* deliberately NOT overflow-x:hidden — that hides real overflow instead of
     preventing it, and makes scrollWidth lie. The marquee clips itself. */
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }

.display {
  font-size: clamp(2.05rem, 7.4vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 0.96;
}

/* long single words (Accelerating, Templates) must break rather than overflow */
h1, h2, h3, h4, .display, .work-problem { overflow-wrap: break-word; }

/* hard line breaks in headlines are a wide-screen luxury */
.br-lg { display: none; }
@media (min-width: 700px) { .br-lg { display: inline; } }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -0.03em; }
.h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.12; }

.lede { font-size: clamp(1.06rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-muted); }
.prose p + p { margin-top: 1.05em; }
.muted { color: var(--ink-muted); }

/* meta labels — mono, small, tracked */
.meta {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- 4. Focus (visible, never removed) --------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: var(--r-sharp);
}
/* visually hidden, still read by screen readers — never reuse .skip for this */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: var(--gut); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sharp); transition: top .15s;
}
.skip:focus { top: .6rem; }

/* ---- 5. The arc device ------------------------------------- */
/* The logo is a circle and two half-discs. It is the section marker. */
.arcs { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.arcs i { display: block; width: 11px; height: 11px; background: var(--cherry); border-radius: var(--r-full); }
.arcs i:nth-child(2) { background: var(--plum);   border-radius: 0 var(--r-full) var(--r-full) 0; width: 6px; }
.arcs i:nth-child(3) { background: var(--damson); border-radius: 0 var(--r-full) var(--r-full) 0; width: 6px; }

/* ---- 6. Header --------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(248,248,247,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.hdr-in { display: flex; align-items: center; gap: 1.1rem; min-height: 68px; }
.brandmark { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brandmark img { width: 132px; }
.hdr-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.hdr-nav a {
  text-decoration: none; padding: .48rem .62rem; border-radius: var(--r-sharp);
  font-size: .875rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
}
.hdr-nav a:hover { color: var(--ink); background: var(--rule-soft); }
.hdr-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cherry); }

.hdr-act { display: flex; align-items: center; gap: .4rem; margin-left: .4rem; flex: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 40px; min-width: 40px; padding: 0 .7rem;
  border: 1px solid var(--rule); border-radius: var(--r-full);
  background: var(--paper-pure); font-size: .85rem; font-weight: 500;
  box-shadow: var(--lift-low);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.cart-count {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--cherry-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.burger { display: none; }

/* ---- 7. Buttons -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.35rem; border-radius: var(--r-full);
  font-weight: 600; font-size: .94rem; text-decoration: none;
  border: 1px solid transparent; transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--lift-mid); }
.btn-primary:hover { background: #2A2333; }
.btn-cherry { background: var(--cherry-ink); color: #fff; box-shadow: var(--lift-mid); }
.btn-cherry:hover { background: var(--damson); }
.btn-ghost { border-color: var(--rule); background: var(--paper-pure); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---- 8. Hero (left-weighted, never full-viewport) ----------- */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(0, 3.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.hero h1 { margin-bottom: 1.5rem; }
.hero .kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-aside { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.8rem); }
.hero-aside dl { display: grid; gap: 1.35rem; }
.hero-aside dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .18rem; }
.hero-aside dd { font-family: var(--f-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.hero-aside dd small { display: block; font-family: var(--f-body); font-size: .84rem; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); line-height: 1.4; margin-top: .2rem; }

/* the one bold move: an oversized triad rule under the masthead */
.triad { display: grid; grid-template-columns: 3fr 2fr 2fr; height: 7px; margin: 0; border-radius: var(--r-full); overflow: hidden; }
.triad span:nth-child(1) { background: var(--cherry); }
.triad span:nth-child(2) { background: var(--damson); }
.triad span:nth-child(3) { background: var(--plum); }

/* ---- 9. Sections ------------------------------------------- */
.sec { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); flex-wrap: wrap; }
.sec-head .meta { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; }
.rule-top { border-top: 1px solid var(--rule); }

/* ---- 10. Client marquee ------------------------------------ */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding: 1.4rem 0; background: var(--paper-pure); }
.marquee-track { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); width: max-content; animation: slide 62s linear infinite; }
.marquee img { height: 34px; width: auto; opacity: .62; filter: grayscale(1); flex: none; }
.marquee img:hover { opacity: 1; filter: none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ---- 11. Product grid (deliberately uneven) ---------------- */
.shop-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.75rem; }
.search-wrap { position: relative; flex: 1 1 300px; max-width: 460px; }
.search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none; }
.search-in {
  width: 100%; padding: .78rem 1rem .78rem 2.5rem;
  border: 1px solid var(--rule); border-radius: var(--r-full);
  background: var(--paper-pure); font-size: 1rem; min-height: 44px;
}
.search-in:focus-visible { border-color: var(--plum); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .48rem .9rem; border: 1px solid var(--rule); border-radius: var(--r-full);
  font-size: .82rem; font-weight: 500; background: var(--paper-pure); color: var(--ink-muted);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.grid-products { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.card { grid-column: span 4; display: flex; flex-direction: column; }
/* the free brief earns more room — structure encodes the offer */
.card.is-lead { grid-column: span 6; }
.card.is-wide { grid-column: span 6; }
.card.is-third { grid-column: span 3; }

.card-media {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-soft);
  background: var(--paper-pure); aspect-ratio: 1 / 1;
}
.card.is-lead .card-media { aspect-ratio: 16 / 11; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.035); }
.card-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--fam, var(--cherry)); opacity: 0; transition: opacity .2s; }
.card:hover .card-media::after { opacity: 1; }

.tag-free {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--cherry-ink); color: #fff; font-family: var(--f-mono);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--r-sharp);
}
.card-body { padding: .95rem .15rem 0; display: flex; flex-direction: column; flex: 1; }
.card-fam { display: inline-flex; align-items: center; gap: .42rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .5rem; }
.card-fam::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--fam, var(--cherry)); flex: none; }
.card h3 { font-size: 1.16rem; margin-bottom: .35rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { box-shadow: inset 0 -2px 0 var(--fam, var(--cherry)); }
.card h3 small { display: block; font-family: var(--f-body); font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); margin-top: .18rem; }
.card p { font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }
.card-foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.price { font-family: var(--f-mono); font-size: 1.02rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price.is-free { color: var(--damson); }
.btn-add { padding: .58rem 1rem; font-size: .85rem; border: 1px solid var(--ink); border-radius: var(--r-full); background: var(--paper-pure); font-weight: 600; }
.btn-add:hover { background: var(--ink); color: #fff; }
.btn-add.is-done { background: var(--damson); border-color: var(--damson); color: #fff; }

.empty { grid-column: 1 / -1; padding: 3.5rem 1rem; text-align: center; border: 1px dashed var(--rule); border-radius: var(--r-soft); }

/* ---- 12. Product detail ------------------------------------ */
.pdp { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(1.8rem, 4vw, 4rem); padding-top: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.pdp-media { border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper-pure); overflow: hidden; position: sticky; top: 92px; }
.pdp-media img { width: 100%; padding: 7%; }
.pdp h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: .55rem 0 .8rem; }
.pdp h1 small { display: block; font-family: var(--f-body); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); margin-top: .35rem; }
.pdp-hook { font-size: 1.15rem; line-height: 1.5; color: var(--ink); font-weight: 500; padding-left: 1.1rem; border-left: 3px solid var(--fam, var(--cherry)); margin-bottom: 1.5rem; }
.pdp-buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 0; margin: 1.5rem 0; border-block: 1px solid var(--rule); }
.pdp-buy .price { font-size: 1.75rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-full); background: var(--paper-pure); }
.qty button { width: 38px; height: 40px; font-size: 1.1rem; line-height: 1; border-radius: var(--r-full); }
.qty button:hover { background: var(--rule-soft); }
.qty span { min-width: 32px; text-align: center; font-family: var(--f-mono); font-size: .95rem; font-variant-numeric: tabular-nums; }
.inside { display: grid; gap: .7rem; margin-top: .4rem; }
.inside li { display: flex; gap: .75rem; font-size: .95rem; line-height: 1.5; }
.inside li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55rem; border-radius: var(--r-full); background: var(--fam, var(--cherry)); }

/* ---- 13. Work ---------------------------------------------- */
.work-list { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.work-item { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(1.2rem, 3vw, 2.75rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--rule); }
.work-item:last-child { border-bottom: 0; padding-bottom: 0; }
.work-item:nth-child(even) .work-media { order: 2; }
.work-media { border-radius: var(--r-soft); overflow: hidden; background: var(--paper-pure); border: 1px solid var(--rule); }
.work-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.work-body .meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.work-problem, .work-client { font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.14; margin-bottom: .85rem; }
.work-result { display: inline-block; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; padding: .34rem .72rem; border-radius: var(--r-sharp); background: var(--plum); color: #fff; margin-bottom: 1rem; }
.work-body p { font-size: .96rem; color: var(--ink-muted); }
blockquote { margin-top: 1.15rem; padding-left: 1.1rem; border-left: 3px solid var(--cherry); font-size: .96rem; line-height: 1.55; }
blockquote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-faint); }

/* ---- 13b. Career timeline ---------------------------------- */
/* Deliberately NOT .work-item: that layout reserves a column for a photograph,
   and there are no photographs here. */
.timeline { border-top: 1px solid var(--rule); }
.tl-item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.tl-year {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.tl-org { font-size: 1.18rem; margin-bottom: .7rem; }
.tl-item ul { display: grid; gap: .55rem; }
.tl-item li { display: flex; gap: .7rem; font-size: .93rem; line-height: 1.5; color: var(--ink-muted); }
.tl-item li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .55rem;
  border-radius: var(--r-full); background: var(--plum);
}
@media (max-width: 640px) {
  .tl-item { grid-template-columns: 1fr; gap: .55rem; }
}

/* ---- 14. Services / engagements ---------------------------- */
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.svc { background: var(--paper); padding: 1.5rem 1.35rem; }
.svc h3 { font-size: 1.03rem; margin-bottom: .5rem; }
.svc p { font-size: .875rem; color: var(--ink-muted); line-height: 1.52; }
.svc-fam { display: inline-block; width: 22px; height: 5px; border-radius: var(--r-full); background: var(--fam); margin-bottom: .85rem; }

.eng-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem,2vw,1.5rem); }
.eng { padding: 1.5rem 1.4rem; border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper-pure); box-shadow: var(--lift-low); }
.eng:nth-child(1) { border-top: 4px solid var(--cherry); }
.eng:nth-child(2) { border-top: 4px solid var(--damson); }
.eng:nth-child(3) { border-top: 4px solid var(--plum); }
.eng:nth-child(4) { border-top: 4px solid var(--ink); }
.eng h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.eng .dur { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-faint); letter-spacing: .06em; }
.eng p { font-size: .875rem; color: var(--ink-muted); margin-top: .8rem; line-height: 1.52; }

/* ---- 15. Team ---------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.member img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-soft); background: var(--rule-soft); margin-bottom: .8rem; }
.member h3 { font-size: 1.02rem; }
.member .role { font-family: var(--f-mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--damson); margin: .25rem 0 .5rem; }
.member p { font-size: .845rem; color: var(--ink-muted); line-height: 1.5; }

/* ---- 16. FAQ accordion ------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q { display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: left; padding: 1.25rem .25rem; font-family: var(--f-display); font-size: clamp(1rem, 1.6vw, 1.18rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.faq-q:hover { color: var(--damson); }
.faq-n { font-family: var(--f-mono); font-size: .76rem; font-weight: 400; letter-spacing: .04em; color: var(--ink-faint); padding-top: .32rem; flex: none; }
.faq-ico { margin-left: auto; flex: none; width: 20px; height: 20px; margin-top: .28rem; transition: transform .2s; }
.faq-q[aria-expanded="true"] .faq-ico { transform: rotate(45deg); }
.faq-a { padding: 0 .25rem 1.4rem 2.55rem; font-size: .95rem; color: var(--ink-muted); line-height: 1.6; max-width: 68ch; }

/* ---- 17. Video --------------------------------------------- */
.reel { position: relative; border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--rule); background: var(--ink); }
.reel video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* ---- 18. Cart drawer --------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(20,17,26,.45); z-index: 100; opacity: 0; transition: opacity .2s; }
.scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(420px, 100%); background: var(--paper);
  display: flex; flex-direction: column;
  box-shadow: var(--lift-high);
  transform: translateX(100%); transition: transform .25s ease;
}
.drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none; } }
.drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.drawer-hd h2 { font-size: 1.15rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; }
.drawer-ft { padding: 1.1rem 1.25rem; border-top: 1px solid var(--rule); background: var(--paper-pure); }
.line { display: grid; grid-template-columns: 62px 1fr auto; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.line img { width: 62px; height: 62px; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--r-sharp); background: var(--paper-pure); padding: 4px; }
.line h4 { font-family: var(--f-body); font-size: .9rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.line .price { font-size: .88rem; }
.line-rm { font-size: .76rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; margin-top: .35rem; }
.line-rm:hover { color: var(--cherry-ink); }
.qty-sm { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r-full); margin-top: .45rem; background: var(--paper-pure); }
.qty-sm button { width: 28px; height: 28px; font-size: .95rem; line-height: 1; border-radius: var(--r-full); }
.qty-sm button:hover { background: var(--rule-soft); }
.qty-sm span { min-width: 26px; text-align: center; font-family: var(--f-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.totals { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9rem; }
.totals .price { font-size: 1.35rem; }

/* ---- 19. Checkout ------------------------------------------ */
.co { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: clamp(1.8rem,4vw,3.5rem); align-items: start; padding-top: 1.5rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .34rem; }
.field input, .field select {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--rule);
  border-radius: var(--r-sharp); background: var(--paper-pure);
  font-size: 1rem; /* 16px — below this iOS zooms the page on focus */
  min-height: 44px;
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--plum); }
.field .err { display: block; font-size: .78rem; color: var(--damson); margin-top: .3rem; font-weight: 500; }
.field input[aria-invalid="true"] { border-color: var(--damson); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.summary { border: 1px solid var(--rule); border-radius: var(--r-soft); padding: 1.3rem; background: var(--paper-pure); box-shadow: var(--lift-low); position: sticky; top: 92px; }
.note { font-size: .8rem; color: var(--ink-faint); line-height: 1.5; margin-top: .9rem; }
.receipt { max-width: 560px; margin-inline: auto; text-align: center; padding: clamp(2.5rem,6vw,4.5rem) 0; }
.receipt-ico { width: 62px; height: 62px; border-radius: var(--r-full); background: var(--damson); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; }

/* ---- 20. Footer -------------------------------------------- */
.ftr { background: var(--ink); color: #EDEAF0; padding: clamp(2.75rem,5vw,4.25rem) 0 2rem; margin-top: clamp(3rem,6vw,5rem); }
.ftr a { color: #EDEAF0; }
.ftr-grid { display: grid; grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
.ftr h4 { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: #A79FB4; font-weight: 400; margin-bottom: .9rem; }
.ftr li { margin-bottom: .5rem; }
.ftr li a { font-size: .9rem; text-decoration: none; opacity: .88; }
.ftr li a:hover { opacity: 1; box-shadow: inset 0 -1px 0 var(--cherry); }
.ftr-note { font-size: .88rem; color: #A79FB4; line-height: 1.6; max-width: 34ch; }
.ftr-bot { margin-top: clamp(2rem,4vw,3rem); padding-top: 1.3rem; border-top: 1px solid #2E2838; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: #A79FB4; }
.ftr .triad { margin-bottom: 1.2rem; max-width: 132px; }

/* ---- 21. Toast --------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%);
  z-index: 120; background: var(--ink); color: #fff;
  padding: .8rem 1.2rem; border-radius: var(--r-full); font-size: .88rem; font-weight: 500;
  box-shadow: var(--lift-high); transition: transform .22s ease;
  max-width: calc(100vw - 2rem);
}
.toast.is-up { transform: translate(-50%, 0); }

/* ---- 22. Responsive ---------------------------------------- */
/* Aligned with the bottom-nav breakpoint below. At 1080 these were mismatched:
   between 861 and 1080 the bottom bar was gone AND the top nav was collapsed,
   so Home was reachable only through the burger. The full nav fits to ~880. */
@media (max-width: 900px) {
  .hdr-nav { display: none; }
  .hdr-act { margin-left: auto; }
  .burger { display: inline-flex; }
  .hdr-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .6rem var(--gut) 1rem; gap: .1rem; box-shadow: var(--lift-mid);
    max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
  }
  .hdr-nav.is-open a { padding: .72rem .5rem; font-size: .98rem; }

  /* Inside the phone menu, Services and About expand in place (accordion) instead of
     using the desktop floating dropdown, which covered the links below and was clipped. */
  .hdr-nav.is-open .nav-group { position: static; }
  .hdr-nav.is-open .nav-parent {
    display: flex; width: 100%; justify-content: space-between;
    padding: .72rem .5rem; min-height: 48px; font-size: .98rem; color: var(--ink-muted);
    border-radius: var(--r-sharp); background: transparent; text-align: left;
  }
  .hdr-nav.is-open .nav-parent[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .hdr-nav.is-open .nav-parent .nav-chev { width: 16px; height: 16px; }
  .hdr-nav.is-open .nav-pop {
    position: static; transform: none; min-width: 0; width: auto;
    margin: 0 0 .4rem .5rem; padding: 0 0 0 .75rem; gap: 0;
    background: transparent; border: 0; border-left: 2px solid var(--rule); border-radius: 0; box-shadow: none;
    animation: navAcc 200ms var(--ease-out);
  }
  .hdr-nav.is-open .nav-pop a { padding: .6rem .5rem; font-size: .95rem; min-height: 48px; align-content: center; }
  .hdr-nav.is-open .nav-pop a[aria-current="page"] { background: transparent; box-shadow: none; color: var(--cherry-ink); }
  .hdr-nav.is-open .nav-pop a[aria-current="page"] strong { color: var(--cherry-ink); }
  .hdr-nav.is-open .nav-pop strong { font-size: .95rem; font-weight: 500; }
  .hdr-nav.is-open .nav-pop span { font-size: .8rem; }
}
@keyframes navAcc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .hdr-nav.is-open .nav-pop { animation: none; } }
/* touch screens keep :hover after a tap; only paint hover backgrounds where hover is real */
@media (hover: none) {
  .nav-parent:hover, .hdr-nav a:hover { background: transparent; }
}
@media (max-width: 900px) {
  .hero-grid, .pdp, .work-item, .co { grid-template-columns: 1fr; }
  .hero-aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.5rem; }
  .hero-aside dl { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
  .work-item:nth-child(even) .work-media { order: 0; }
  .pdp-media, .summary { position: static; }
  .card, .card.is-lead, .card.is-wide, .card.is-third { grid-column: span 6; }
  .card.is-lead .card-media { aspect-ratio: 1/1; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .card, .card.is-lead, .card.is-wide, .card.is-third { grid-column: span 12; }
  .row-2 { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .brandmark img { width: 112px; }
  .hero-aside dl { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PART 2 — Editorial imagery, hire flow, motion
   ============================================================ */

/* ---- 23. Motion tokens & scroll reveal --------------------- */
:root { --ease-out: cubic-bezier(.22,.7,.24,1); --dur: 260ms; }

/* Scoped to .js: if JavaScript never runs, nothing is left invisible. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.reveal[data-d="1"].is-in { transition-delay: 70ms; }
.reveal[data-d="2"].is-in { transition-delay: 140ms; }
.reveal[data-d="3"].is-in { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ---- 24. Header scroll state ------------------------------- */
.hdr { transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.hdr.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 10px 30px -22px rgba(20,17,26,.5); }

/* ---- 25. Editorial figures --------------------------------- */
.figure { position: relative; border-radius: var(--r-soft); overflow: hidden; background: var(--rule-soft); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem .85rem; font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  /* Stops, not a plain fade: the text band never drops below .78 alpha, so the
     caption clears 4.5:1 over ANY photograph, not just a mid-tone one. */
  background: linear-gradient(to top, rgba(12,10,16,.90) 0%, rgba(12,10,16,.78) 55%, rgba(12,10,16,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* hero gains a photographic anchor */
/* Scoped to desktop. Unscoped, this came after the <=900px override in source
   order and won at every width, so the hero never collapsed on phones. */
@media (min-width: 901px) { .hero-grid { grid-template-columns: minmax(0, 6.6fr) minmax(0, 4fr); } }
.hero-side { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); align-content: end; }
.hero-art { display: grid; gap: 1.25rem; }
/* 4:3 suits a room shot; a square crop threw away the slide. Rounded via
   .figure's own radius, and the caption sits below so there is no scrim. */
.hero-art .figure { aspect-ratio: 4 / 3; box-shadow: var(--lift-high); border-radius: var(--r-soft); }
.hero-art .note { margin-top: var(--flow-1); }
.hero-aside { border-left: 0; padding-left: 0; }

/* full-bleed band image */
.band { position: relative; border-radius: var(--r-soft); overflow: hidden; margin-top: 2.2rem; }
.band img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
@media (max-width: 700px) { .band img { aspect-ratio: 16/10; } }

/* ---- 26. Card polish -------------------------------------- */
.card { transition: transform var(--dur) var(--ease-out); }
.card-media { transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card:hover .card-media { border-color: var(--ink); box-shadow: var(--lift-mid); }
.card:hover { transform: translateY(-3px); }
.card:focus-within .card-media { border-color: var(--plum); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transform: none; transition: none; } }
.btn-add { transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); min-height: 40px; }

/* bigger, thumb-friendly quantity controls */
.qty button { width: 44px; height: 44px; }
.qty-sm button { width: 34px; height: 34px; }

/* ---- 28. Home hire teaser --------------------------------- */
.teaser { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } }

/* ============================================================
   PART 3 — SaaS surfaces & motion refinement
   ============================================================ */

/* header CTA: persistent, but yields room on the smallest screens */
.hdr-cta { padding: .58rem 1.05rem; font-size: .86rem; box-shadow: none; min-height: 44px; }
@media (max-width: 560px) { .hdr-cta { display: none; } }

/* ---- 29. Eyebrow pill (SaaS section marker) ---------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .34rem .7rem .34rem .5rem; border-radius: var(--r-full);
  border: 1px solid var(--rule); background: var(--paper-pure);
  font-family: var(--f-mono); font-size: .67rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); box-shadow: var(--lift-low);
}
.hire .eyebrow { background: #1C1826; border-color: #3A3346; color: #C9C2D4; box-shadow: none; }

/* ---- 30. Stagger children of a revealed grid --------------- */
.js .stagger > * { opacity: 0; transform: translateY(14px); }
.js .stagger.is-in > * { opacity: 1; transform: none; transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); }
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 55ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 110ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 165ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 220ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 275ms; }
.stagger.is-in > *:nth-child(n+7) { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .js .stagger > *, .js .stagger.is-in > * { opacity: 1; transform: none; transition: none; }
}

/* ---- 31. Accordion motion (runs as [hidden] is removed) ---- */
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-a:not([hidden]) { animation: faqIn 240ms var(--ease-out); }
.faq-q { transition: color var(--dur) var(--ease-out); }
.faq-ico { transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.faq-q[aria-expanded="true"] { color: var(--damson); }
.faq-q[aria-expanded="true"] .faq-ico { color: var(--cherry-ink); }
@media (prefers-reduced-motion: reduce) { .faq-a:not([hidden]) { animation: none; } }

/* ---- 32. Button & link micro-interaction ------------------- */
.btn { transition: transform 120ms var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.btn-primary:hover, .btn-cherry:hover { box-shadow: var(--lift-high); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }

/* animated nav underline */
.hdr-nav a { position: relative; }
.hdr-nav a::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .28rem; height: 2px;
  background: var(--cherry-ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-nav a[aria-current="page"] { box-shadow: none; }
.hdr-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- 33. Surface refinement ------------------------------- */
.eng, .summary, .hire-aside, .svc-list, .card-media, .figure, .band { will-change: auto; }
.eng { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.eng:hover { transform: translateY(-3px); box-shadow: var(--lift-mid); }
.svc { transition: background var(--dur) var(--ease-out); }
.svc:hover { background: var(--paper-pure); }
.member img { transition: transform 420ms var(--ease-out); }
.member:hover img { transform: scale(1.03); }
.work-media img { transition: transform 520ms var(--ease-out); }
.work-item:hover .work-media img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .eng:hover, .member:hover img, .work-item:hover .work-media img { transform: none; }
}

/* ---- 34. Home hire teaser band ---------------------------- */
.teaser-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #2E2838; border: 1px solid #2E2838; border-radius: var(--r-soft); overflow: hidden; }
.teaser-proof div { background: #1A1622; padding: 1.15rem 1.1rem; }
.teaser-proof dt { font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.teaser-proof dd { font-size: .78rem; color: #A79FB4; margin-top: .4rem; line-height: 1.4; }
.teaser-proof div:nth-child(1) dt { color: var(--cherry); }
.teaser-proof div:nth-child(2) dt { color: #E06BA8; }
.teaser-proof div:nth-child(3) dt { color: #B48BD6; }

/* ============================================================
   PART 4 — Refero-derived patterns, mobile nav, checkout
   ============================================================ */

/* ---- 35. Grouped navigation (ref: Resend) ------------------ */
.nav-group { position: relative; }
.nav-parent {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  padding: .48rem .62rem; border-radius: var(--r-sharp);
  font-size: .875rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  min-height: 40px;
}
.nav-parent:hover { color: var(--ink); background: var(--rule-soft); }
.nav-parent[data-active] { color: var(--ink); font-weight: 600; }
.nav-chev { transition: transform var(--dur) var(--ease-out); }
.nav-parent[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nav-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 95; min-width: 264px; padding: .45rem;
  background: var(--paper-pure); border: 1px solid var(--rule);
  border-radius: var(--r-soft); box-shadow: var(--lift-high);
  display: grid; gap: 2px;
  animation: popIn 180ms var(--ease-out);
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .nav-pop { animation: none; } }
.nav-pop a {
  display: grid; gap: .1rem; padding: .6rem .7rem; border-radius: var(--r-sharp);
  text-decoration: none; color: var(--ink);
}
.nav-pop a:hover { background: var(--rule-soft); }
.nav-pop a[aria-current="page"] { background: var(--rule-soft); box-shadow: inset 2px 0 0 var(--cherry-ink); }
.nav-pop strong { font-size: .9rem; font-weight: 600; }
.nav-pop span { font-size: .78rem; color: var(--ink-muted); line-height: 1.35; }

/* ---- 36. Mobile bottom navigation -------------------------- */
.botnav { display: none; }
@media (max-width: 900px) {
  .botnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(248,248,247,.96);
    backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .botnav a {
    display: grid; justify-items: center; gap: .18rem;
    padding: .6rem .3rem .55rem; min-height: 56px;
    text-decoration: none; color: var(--ink-faint); font-size: .68rem;
    font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  }
  .botnav svg { width: 21px; height: 21px; }
  .botnav a[aria-current="page"] { color: var(--cherry-ink); }
  /* keep the footer clear of the bar */
  body { padding-bottom: 66px; }
  .toast { bottom: 78px; }
}

/* ---- 37. Search overlay (header + mobile) ------------------ */
.search-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(20,17,26,.5); backdrop-filter: blur(3px);
  padding: clamp(1rem, 8vh, 6rem) var(--gut) 2rem;
  overscroll-behavior: contain;
}
.search-panel {
  max-width: 640px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-soft); box-shadow: var(--lift-high);
  overflow: hidden; max-height: min(70vh, 640px); display: flex; flex-direction: column;
}
.search-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
.search-head > svg { width: 19px; height: 19px; color: var(--ink-faint); flex: none; }
.search-head input {
  flex: 1; border: 0; background: none; font-size: 1.05rem; padding: .5rem 0; min-height: 44px;
}
.search-head input:focus-visible { outline: none; }
.search-results { overflow-y: auto; padding: .45rem; }
.search-hit {
  display: grid; grid-template-columns: 46px 1fr auto; gap: .8rem; align-items: center;
  padding: .6rem .65rem; border-radius: var(--r-sharp); text-decoration: none; color: var(--ink);
}
.search-hit:hover, .search-hit:focus-visible { background: var(--rule-soft); }
.search-hit img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--r-sharp); background: var(--paper-pure); padding: 3px; }
.search-hit h4 { font-family: var(--f-body); font-size: .92rem; font-weight: 600; letter-spacing: 0; }
.search-hit p { font-size: .78rem; color: var(--ink-muted); line-height: 1.35; }
.search-none { padding: 1.6rem .8rem; color: var(--ink-muted); font-size: .92rem; }

/* ---- 38. Active criteria (ref: Bloomberg) ------------------ */
.criteria { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.criteria-list { display: flex; gap: .4rem; flex-wrap: wrap; }
.criteria-chip {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .38rem .5rem .38rem .75rem; border-radius: var(--r-full);
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 500; min-height: 32px;
}
.criteria-chip[data-fam="brand"] { background: var(--cherry-ink); border-color: var(--cherry-ink); }
.criteria-chip[data-fam="marketing"] { background: var(--damson); border-color: var(--damson); }
.criteria-chip[data-fam="sales"] { background: var(--plum); border-color: var(--plum); }
.criteria-chip svg { width: 13px; height: 13px; }
.criteria-chip:hover { filter: brightness(1.15); }
.criteria-clear { font-size: .8rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.criteria-clear:hover { color: var(--cherry-ink); }

/* ---- 39. Plate: tracked type over photography (ref: Open) -- */
.plate { position: relative; border-radius: var(--r-soft); overflow: hidden; }
.plate img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
@media (max-width: 700px) { .plate img { aspect-ratio: 4/3; } }
/* .48, not .28: the blossom photograph is pale, and white large text needs the
   underlying pixels at or below ~rgb(149) to clear 3:1. Measured, not guessed. */
.plate::after { content: ""; position: absolute; inset: 0; background: rgba(20,17,26,.48); }
.plate-word {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 5rem); letter-spacing: .34em;
  text-indent: .34em; color: #fff; text-transform: lowercase;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
/* The corner labels are 10px, so they need 4.5:1 — and the blossom photograph is
   pale. The .48 page scrim alone measured 3.58:1 at the worst pixel, so each label
   carries its own backing. Combined alpha ~.80 puts the worst case near 9.8:1
   without darkening the whole photograph. */
.plate-tl, .plate-br {
  position: absolute; z-index: 2; font-family: var(--f-mono);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(20,17,26,.62);
  padding: .34rem .6rem; border-radius: var(--r-full);
  backdrop-filter: blur(2px);
}
.plate-tl { top: .9rem; left: 1rem; }
.plate-br { bottom: .9rem; right: 1rem; }
@media (max-width: 560px) {
  .plate-tl, .plate-br { font-size: .58rem; padding: .28rem .5rem; }
  .plate-tl { top: .6rem; left: .6rem; }
  .plate-br { bottom: .6rem; right: .6rem; }
}

/* ---- 40. Checkout: payment tabs, promo -------------------- */
.paytabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.1rem; flex-wrap: wrap; }
.paytabs button {
  cursor: pointer; padding: .7rem .95rem; min-height: 44px;
  font-size: .9rem; font-weight: 500; color: var(--ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.paytabs button:hover { color: var(--ink); }
.paytabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--cherry-ink); }
.demo-flag {
  font-size: .82rem; line-height: 1.5; color: var(--damson);
  background: #FBEFF5; border: 1px solid #F0CFE0;
  padding: .6rem .75rem; border-radius: var(--r-sharp); margin-bottom: 1rem;
}
.paypane input[disabled], .paypane select[disabled] { opacity: .5; cursor: not-allowed; background: var(--rule-soft); }
.promo { display: flex; gap: .5rem; margin-top: 1rem; }
.promo input { flex: 1; min-width: 0; padding: .7rem .8rem; min-height: 44px; border: 1px solid var(--rule); border-radius: var(--r-sharp); background: var(--paper-pure); font-size: 1rem; }
.promo .btn { padding: .7rem 1rem; font-size: .86rem; min-height: 44px; }
.promo-msg { font-size: .82rem; margin-top: .5rem; font-weight: 500; }
.promo-msg.is-ok { color: var(--damson); }
.promo-msg.is-bad { color: var(--cherry-ink); }
#brief-preview {
  text-align: left; white-space: pre-wrap; margin-top: 1.6rem; padding: 1.1rem;
  border: 1px solid #2E2838; border-radius: var(--r-soft); background: #14111A;
  color: #C9C2D4; font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; overflow-x: auto;
}

/* ---- 41. Mobile viewport units ---------------------------- */
.search-overlay { min-height: 100dvh; }

/* ============================================================
   PART 5 — Typographic system
   Replaces ~100 ad-hoc inline styles with one scale and one rhythm.
   ============================================================ */

:root {
  /* type scale — one ratio, clamped, nothing off-scale */
  --t-display: clamp(2.05rem, 7.4vw, 5.75rem);
  --t-h1:      clamp(2.1rem, 4.2vw, 3.5rem);
  --t-h2:      clamp(1.7rem, 3vw, 2.45rem);
  --t-h3:      clamp(1.18rem, 1.7vw, 1.45rem);
  --t-h4:      clamp(1rem, 1.2vw, 1.1rem);
  --t-lede:    clamp(1.09rem, 1.45vw, 1.3rem);
  --t-body:    1rem;
  --t-small:   .875rem;

  /* vertical flow — spacing is chosen from this, never invented inline */
  --flow-1: .45rem;
  --flow-2: .9rem;
  --flow-3: 1.5rem;
  --flow-4: clamp(2rem, 3.4vw, 2.75rem);
  --flow-5: clamp(3rem, 5.5vw, 4.5rem);

  /* measure */
  --m-prose: 66ch;
  --m-lede: 54ch;
  --m-title: 20ch;
}

/* ---- 42. Optical refinements ------------------------------ */
h1, h2, h3, h4, .display, .work-problem, .tl-org, .plate-word {
  text-wrap: balance;               /* no one-word last lines in headings */
}
p, li, dd, figcaption, blockquote {
  text-wrap: pretty;                /* pushes orphans off the last line */
}
body { hanging-punctuation: first last; }

/* tracking should tighten as type grows, not sit at one value */
.display { font-size: var(--t-display); letter-spacing: -0.038em; }
.h1, .pdp h1, .founder h1 { font-size: var(--t-h1); letter-spacing: -0.032em; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.018em; line-height: 1.18; }

/* numerals: lining + proportional in prose, tabular only where columns align */
.prose, p, li { font-variant-numeric: proportional-nums lining-nums; }
.price, .qty span, .qty-sm span, .tl-year, .proof dt, .teaser-proof dt { font-variant-numeric: tabular-nums lining-nums; }

/* links in running text earn a considered underline */
.prose a, .faq-a a, .ftr-note a, blockquote a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color var(--dur) var(--ease-out);
}
.prose a:hover, .faq-a a:hover { text-decoration-color: currentColor; }

/* ---- 43. Page head (one component, was 16 inline blocks) --- */
.page-head { max-width: var(--m-title); }
.page-head.is-wide { max-width: none; }
.eyebrow-line {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: var(--flow-2);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.page-head h1 { margin-bottom: var(--flow-3); }
.page-head .triad { max-width: 220px; }
.page-lede {
  font-size: var(--t-lede); line-height: 1.55; color: var(--ink-muted);
  max-width: var(--m-lede); margin-top: var(--flow-3);
}
.page-lede.is-long { max-width: 62ch; }

/* ---- 44. Prose rhythm ------------------------------------- */
/* A heading belongs to what follows it, so the space above is large and the
   space below is small. Previously both were roughly equal, which is why the
   policy pages read as an undifferentiated wall. */
.prose { max-width: var(--m-prose); font-size: var(--t-body); line-height: 1.7; }
.prose > * + * { margin-top: var(--flow-2); }
.prose h2, .prose .h2, .prose h3, .prose .h3 { margin-top: var(--flow-4); margin-bottom: var(--flow-1); }
.prose h2 + p, .prose .h3 + p, .prose h3 + p { margin-top: var(--flow-1); }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--ink-muted); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: var(--flow-1); padding-left: 1.1rem; }
.prose li { list-style: disc; color: var(--ink-muted); }
.prose code {
  font-family: var(--f-mono); font-size: .86em;
  background: var(--rule-soft); padding: .12em .38em; border-radius: var(--r-sharp);
}
.prose .note { margin-top: var(--flow-4); }

/* a lead paragraph inside prose reads larger */
.prose .lead {
  font-size: var(--t-lede); line-height: 1.58; color: var(--ink);
  max-width: var(--m-lede);
}

/* ---- 45. Editorial column for text-only pages ------------- */
/* The policy and story pages previously sat as a narrow block pinned left in a
   1280 shell, with nothing in the right two-thirds. Now the column is offset
   against a labelled margin on wide screens, and simply centred below that. */
.column { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, var(--m-prose)); gap: clamp(2rem, 6vw, 5.5rem); }
.column-aside { position: sticky; top: 96px; align-self: start; }
.column-aside .meta { display: block; line-height: 1.6; }
.column-aside hr { border: 0; border-top: 1px solid var(--rule); margin: var(--flow-2) 0; }
@media (max-width: 1000px) {
  .column { grid-template-columns: 1fr; gap: var(--flow-4); }
  /* Content first. Stacked above, the policy nav forced the reader past a list
     of links before reaching the heading. */
  .column-aside { position: static; order: 2; padding-top: var(--flow-3); border-top: 1px solid var(--rule); }
  .column-aside .eyebrow-line { display: none; }
  .column > div { order: 1; }
  .side-nav { grid-auto-flow: row; }
}

/* ---- 46. Section heads ------------------------------------ */
.sec-head { margin-bottom: var(--flow-4); }
.sec-head h2 { max-width: 24ch; }
.sec-head .meta { margin-bottom: var(--flow-1); }

/* ---- 47. Inline-style replacements ------------------------ */
.stack-1 { margin-top: var(--flow-1); }
.stack-2 { margin-top: var(--flow-2); }
.stack-3 { margin-top: var(--flow-3); }
.stack-4 { margin-top: var(--flow-4); }
.stack-5 { margin-top: var(--flow-5); }
.measure { max-width: var(--m-prose); }
.measure-lede { max-width: var(--m-lede); }
.measure-title { max-width: var(--m-title); }
.shell-narrow { max-width: 940px; }
.pad-top-0 { padding-top: 0; }
.pad-bot-0 { padding-bottom: 0; }
.on-dark { color: #fff; }

/* ---- 48. Blockquote, refined ------------------------------ */
blockquote {
  position: relative;
  font-size: 1rem; line-height: 1.6;
  padding-left: 1.25rem; border-left: 3px solid var(--cherry);
}
blockquote cite {
  display: block; margin-top: var(--flow-2);
  font-style: normal; font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .08em; color: var(--ink-faint);
}
.pdp-hook { max-width: 46ch; }

/* ---- 49. Remaining utilities ------------------------------ */
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: var(--flow-3); }
.btn-row.is-centred { justify-content: center; }
.hint { margin: calc(var(--flow-1) * -1) 0 var(--flow-2); max-width: 68ch; }
.totals-sep { margin-top: var(--flow-2); padding-top: var(--flow-2); border-top: 1px solid var(--rule); }
.totals-grand { border-top: 2px solid var(--ink); padding-top: .8rem; }
.cart-sep { margin-top: var(--flow-3); padding-top: var(--flow-3); border-top: 2px solid var(--ink); }
.btn-quiet { background: transparent; border-color: #3A3346; color: #EDEAF0; }
.btn-quiet:hover { border-color: #6E6480; color: #fff; }
.centred { margin-inline: auto; }
.hire h3.on-dark { margin-bottom: var(--flow-2); }

/* the pull-quote on Why The Name */
.pull {
  border-left-width: 4px;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  letter-spacing: -.02em; line-height: 1.32;
}
.stack-0 { margin-bottom: var(--flow-2); }

/* side navigation inside the editorial margin */
.side-nav { display: grid; gap: .1rem; margin-bottom: var(--flow-2); }
.side-nav a {
  font-size: .88rem; text-decoration: none; color: var(--ink-muted);
  padding: .3rem 0; border-bottom: 1px solid transparent;
}
.side-nav a:hover { color: var(--ink); }
.side-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.column-aside .meta a { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: .85rem; }

/* ---- 50. The triad is a mark, not a rule ------------------ */
/* Left full-width it reads as a divider and competes with the headline.
   Held short it reads as the logo's own geometry, which is what it is. */
.display + .triad,
h1 + .triad,
.page-head .triad { max-width: 208px; margin-top: var(--flow-3); }
.triad + .page-lede,
.triad + .lede,
.triad + .prose,
.triad + .faq { margin-top: var(--flow-3); }
.hero .triad { margin-top: var(--flow-3); }

/* headline sizes want a little more room beneath them */
.display { margin-bottom: 0; }
.sec-head h2 + * { margin-top: var(--flow-2); }
/* a heading followed by a list owns that list */
.h3 + .inside, .h3 + ul, .h3 + ol { margin-top: var(--flow-2); }
.stack-4 + .inside { margin-top: var(--flow-2); }

/* ---- 52. Banner figure caption ---------------------------- */
/* Caption sits below the image, not over it — no scrim, no contrast risk,
   and the photograph is never obscured. */
.band figcaption { margin-top: var(--flow-1); }
.band { margin-bottom: 0; }

/* ============================================================
   PART 6 — Challenges and engagement models, on the dark band
   ============================================================ */

/* ============================================================
   PART 7 — Contact page
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* light-theme textarea, to match .field input */
.field textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--rule);
  border-radius: var(--r-sharp); background: var(--paper-pure);
  font-size: 1rem; line-height: 1.55; min-height: 150px; resize: vertical;
}
.field textarea:focus-visible { border-color: var(--plum); }
.field textarea[aria-invalid="true"] { border-color: var(--damson); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.contact-aside { display: grid; gap: var(--flow-3); }
.contact-card {
  padding: 1.4rem 1.35rem; border-radius: var(--r-soft);
  border: 1px solid var(--rule); background: var(--paper-pure); box-shadow: var(--lift-low);
}
.contact-card.is-lead { border-top: 4px solid var(--cherry); }
.contact-card p { font-size: .9rem; color: var(--ink-muted); line-height: 1.55; }

.contact-direct { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.contact-direct > div { padding: .95rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--paper-pure); }
.contact-direct > div:last-child { border-bottom: 0; }
.contact-direct dt {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .28rem;
}
.contact-direct dd { font-size: .95rem; font-weight: 500; }
.contact-direct dd span { display: block; font-size: .82rem; font-weight: 400; color: var(--ink-muted); line-height: 1.45; margin-top: .18rem; }

.contact-sent {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--rule); border-radius: var(--r-soft);
  background: var(--paper-pure); box-shadow: var(--lift-low);
}
.contact-sent #contact-preview {
  white-space: pre-wrap; margin-top: var(--flow-3); padding: 1rem;
  border: 1px solid var(--rule); border-radius: var(--r-sharp);
  background: var(--paper); color: var(--ink-muted);
  font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; overflow-x: auto;
}

/* ============================================================
   PART 8 — Work with us, on paper
   Was a dark band led by an oversized headline. A visitor landing here
   needs to see the offer, not a masthead, so the headline is compact and
   the engagement models come first.
   ============================================================ */

.hire { background: var(--paper); padding: 0; margin: 0; }
.hire .hire-lede { color: var(--ink-muted); max-width: 56ch; font-size: var(--t-lede); line-height: 1.55; }
.hire h2, .hire h3 { color: var(--ink); }
.hire .note { color: var(--ink-faint); }

/* compact page head — h1 sits at heading size, not display size */
.hire-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.03em; }
.hire-head .triad { max-width: 168px; margin-top: var(--flow-2); }
.hire-head .page-lede { margin-top: var(--flow-2); }

/* ---- Engagement models: the offer, leading the page -------- */
.eng-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.eng-opt {
  display: grid; gap: .3rem; align-content: start; text-align: left; cursor: pointer;
  padding: 0 0 1.2rem; overflow: hidden; min-height: 44px;
  border-radius: var(--r-soft); border: 1px solid var(--rule);
  background: var(--paper-pure); box-shadow: var(--lift-low);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.eng-opt:hover { border-color: var(--ink); box-shadow: var(--lift-mid); transform: translateY(-3px); }
.eng-opt::before { content: ""; display: block; height: 4px; margin-bottom: 1.1rem; background: var(--cherry); }
.eng-opt[data-i="1"]::before { background: var(--damson); }
.eng-opt[data-i="2"]::before { background: var(--plum); }
.eng-opt[data-i="3"]::before { background: var(--ink); }
.eng-head { display: flex; align-items: center; gap: .5rem; padding: 0 1.15rem; }
.eng-name { font-family: var(--f-mono); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.eng-opt .eng-tick { margin-left: auto; width: 17px; height: 17px; color: var(--cherry-ink); opacity: 0; transform: scale(.6); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.eng-dur { padding: 0 1.15rem; margin-top: .3rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.028em; line-height: 1.08; color: var(--ink); }
.eng-scope { padding: 0 1.15rem; font-size: .855rem; color: var(--ink-muted); line-height: 1.4; }
.eng-mode { justify-self: start; margin: .75rem 1.15rem .2rem; font-family: var(--f-mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding: .3rem .6rem; border-radius: var(--r-full); border: 1px solid var(--rule); background: var(--paper); }
.eng-body { padding: .55rem 1.15rem 0; font-size: .85rem; line-height: 1.55; color: var(--ink-muted); }
.eng-opt[aria-pressed="true"] { border-color: var(--cherry-ink); box-shadow: 0 0 0 1px var(--cherry-ink), var(--lift-mid); }
.eng-opt[aria-pressed="true"] .eng-tick { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .eng-opt, .eng-opt:hover { transform: none; transition: none; } }

/* ---- Challenge cards --------------------------------------- */
.chal { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.chal-card {
  display: grid; gap: .3rem; text-align: left; cursor: pointer; min-height: 44px;
  padding: 1rem 1.05rem; border-radius: var(--r-soft);
  border: 1px solid var(--rule); background: var(--paper-pure);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.chal-card:hover { border-color: var(--ink); box-shadow: var(--lift-low); }
.chal-top { display: flex; align-items: center; gap: .55rem; }
.chal-label { font-weight: 600; font-size: .96rem; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; }
.chal-label::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--cherry); flex: none; }
.chal-card[data-fam="marketing"] .chal-label::before { background: var(--damson); }
.chal-card[data-fam="sales"] .chal-label::before { background: var(--plum); }
.chal-q { font-size: .86rem; line-height: 1.45; color: var(--ink-muted); }
.chal-card .eng-tick { margin-left: auto; width: 16px; height: 16px; color: var(--cherry-ink); opacity: 0; transform: scale(.6); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.chal-card[aria-pressed="true"] { border-color: var(--cherry-ink); box-shadow: 0 0 0 1px var(--cherry-ink); }
.chal-card[aria-pressed="true"] .eng-tick { opacity: 1; transform: scale(1); }

/* ---- Proof row --------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.proof div { background: var(--paper-pure); padding: 1.35rem 1.2rem; }
.proof dt { font-family: var(--f-display); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.proof dd { font-size: .83rem; line-height: 1.45; color: var(--ink-muted); margin-top: .5rem; }
.proof div:nth-child(1) dt { color: var(--cherry-ink); }
.proof div:nth-child(2) dt { color: var(--damson); }
.proof div:nth-child(3) dt { color: var(--plum); }

/* ---- The brief form ---------------------------------------- */
.brief { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: clamp(1.5rem,4vw,3.25rem); align-items: start; }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }
.brief-fields { display: grid; gap: 1rem; }
.hire-aside { border: 1px solid var(--rule); border-radius: var(--r-soft); padding: 1.4rem 1.3rem; background: var(--paper-pure); box-shadow: var(--lift-low); }
.hire-aside h3 { font-size: 1.05rem; margin-bottom: var(--flow-2); }
.hire-steps { display: grid; gap: .9rem; counter-reset: s; }
.hire-steps li { display: flex; gap: .8rem; font-size: .89rem; color: var(--ink-muted); line-height: 1.5; }
.hire-steps li::before {
  counter-increment: s; content: counter(s); flex: none;
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: .72rem;
  display: grid; place-items: center; margin-top: .08rem;
}
.hire-sent { text-align: center; padding: clamp(2rem,5vw,3.5rem) 1rem; border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper-pure); }
#brief-preview {
  text-align: left; white-space: pre-wrap; margin-top: var(--flow-3); padding: 1.1rem;
  border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper);
  color: var(--ink-muted); font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; overflow-x: auto;
}
/* The brief as a card: gradient hairline border, faint brand tint, rounded fields */
.brief-card {
  position: relative; border-radius: 22px; padding: clamp(1.25rem, 3.2vw, 2.1rem);
  border: 1px solid transparent;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(237,33,124,.07), transparent 70%) padding-box,
    radial-gradient(480px 280px at 0% 100%, rgba(102,45,145,.07), transparent 70%) padding-box,
    linear-gradient(var(--paper-pure), var(--paper-pure)) padding-box,
    linear-gradient(135deg, rgba(237,33,124,.55), rgba(159,31,99,.35) 45%, rgba(102,45,145,.55)) border-box;
  box-shadow: 0 1px 2px rgba(20,17,26,.04), 0 30px 60px -32px rgba(102,45,145,.32), 0 18px 40px -30px rgba(237,33,124,.28);
}
.brief-group {
  display: flex; align-items: center; gap: .6rem; margin: .2rem 0 -.15rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.brief-group span {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--cherry-ink), var(--plum)); color: #fff; font-size: .66rem; letter-spacing: 0;
}
.brief-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); }
.brief-group ~ .brief-group { margin-top: .6rem; }
.brief-card .field label { font-size: .8rem; color: var(--ink-muted); margin-bottom: .42rem; }
.brief-card .field input, .brief-card .field select, .brief-card .field textarea {
  border: 1px solid var(--rule-soft); border-radius: 12px; background: #FBFAF9;
  padding: .85rem 1rem; min-height: 52px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.brief-card .field textarea { min-height: 170px; }
.brief-card .field input:hover, .brief-card .field select:hover, .brief-card .field textarea:hover { border-color: var(--rule); background: #fff; }
.brief-card .field input:focus-visible, .brief-card .field select:focus-visible, .brief-card .field textarea:focus-visible {
  outline: none; background: #fff; border-color: rgba(208,24,109,.55);
  box-shadow: 0 0 0 4px rgba(237,33,124,.12), 0 8px 22px -14px rgba(102,45,145,.45);
}
.brief-card .field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23662D91' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.brief-card .btn-block {
  margin-top: .4rem; min-height: 56px; border-radius: 14px; border: 0;
  background: linear-gradient(120deg, var(--cherry-ink) 0%, var(--damson) 55%, var(--plum) 100%);
  background-size: 160% 100%; background-position: 0% 50%;
  box-shadow: 0 14px 30px -14px rgba(208,24,109,.7);
  transition: background-position .4s ease, box-shadow .2s ease, transform .2s ease;
}
.brief-card .btn-block:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(102,45,145,.65); }
.brief-card .note { text-align: center; margin-top: .1rem; }

/* The aside: a deep brand panel beside the light form */
.brief .hire-aside {
  position: relative; overflow: hidden; border: 0; border-radius: 22px; padding: clamp(1.4rem, 3vw, 2rem);
  color: #fff;
  background:
    radial-gradient(380px 240px at 100% 0%, rgba(237,33,124,.55), transparent 65%),
    radial-gradient(360px 260px at 0% 100%, rgba(102,45,145,.75), transparent 65%),
    linear-gradient(160deg, #2A1233 0%, #1B1022 100%);
  box-shadow: 0 30px 60px -30px rgba(42,18,51,.6);
}
.brief .hire-aside h3 { color: #fff; font-size: 1.15rem; }
.brief .hire-steps { gap: 1.05rem; }
.brief .hire-steps li { color: rgba(255,255,255,.8); }
.brief .hire-steps li::before {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28);
  width: 26px; height: 26px;
}
.brief .hire-aside .note { color: rgba(255,255,255,.66); border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; margin-top: 1.4rem; }
.brief .hire-aside a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.brief .hire-aside a:hover { text-decoration-color: #fff; }
@media (min-width: 901px) { .brief .hire-aside { position: sticky; top: 100px; } }

/* step numbering for the three stages */
.step-h { display: flex; align-items: baseline; gap: .7rem; }
.step-n { font-family: var(--f-mono); font-size: .8rem; color: var(--cherry-ink); font-weight: 500; }

/* ---- Homepage call-to-action panel ------------------------- */
/* Was a dark band. Light now, but still punctuated — a tinted panel with a
   cherry rule, so the page keeps a rhythm without going black. */
.cta-panel {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--rule); border-top: 4px solid var(--cherry);
  border-radius: var(--r-soft); background: var(--paper-pure);
  box-shadow: var(--lift-low);
}
.teaser-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.teaser-proof div { background: var(--paper); padding: 1.15rem 1.1rem; }
.teaser-proof dt { font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.teaser-proof dd { font-size: .78rem; color: var(--ink-muted); margin-top: .4rem; line-height: 1.4; }
.teaser-proof div:nth-child(1) dt { color: var(--cherry-ink); }
.teaser-proof div:nth-child(2) dt { color: var(--damson); }
.teaser-proof div:nth-child(3) dt { color: var(--plum); }

/* ---- Our People gallery ------------------------------------ */
/* Four items: auto-fit gave 3 + 1 with an orphan, and the cells were too small
   for these collage photographs to read. A 2x2 fills evenly and doubles the size. */
.people-grid { display: grid; grid-template-columns: 1fr; gap: clamp(.9rem, 2vw, 1.4rem); }
@media (min-width: 700px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
.people-grid figure { margin: 0; border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--rule); background: var(--rule-soft); }
.people-grid img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform 420ms var(--ease-out); }
.people-grid figure:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .people-grid figure:hover img { transform: none; } }

/* ---- FAQ sub-points ---------------------------------------- */
.faq-points { display: grid; gap: var(--flow-2); margin-top: var(--flow-2); padding: 0; }
.faq-points li { list-style: none; font-size: .93rem; line-height: 1.6; color: var(--ink-muted); padding-left: 1rem; border-left: 2px solid var(--rule); }
.faq-points strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }

/* ============================================================
   PART 9 — Mobile layout
   Written after rendering every page at phone width. Deliberately the LAST
   block in the file: earlier, an unscoped .hero-grid rule sat after its own
   mobile override and silently won at every width.
   ============================================================ */

@media (max-width: 560px) {

  /* ---- Product grid: two-up, not full-width squares -------- */
  /* One card per row made each template ~500px tall — two per screen, and six
     screens of scrolling for the shop. Two-up with the free brief featured
     across the top gets most of the range on screen at once. */
  .grid-products { gap: .7rem; }
  .card, .card.is-third, .card.is-wide { grid-column: span 6; }
  .card.is-lead { grid-column: span 12; }
  .card .card-media { aspect-ratio: 1 / 1; border-radius: 12px; }
  .card.is-lead .card-media { aspect-ratio: 16 / 10; }
  .card-media img { padding: 7%; }
  .tag-free { top: 8px; left: 8px; font-size: .58rem; padding: .22rem .45rem; }

  .card-body { padding: .6rem .1rem 0; }
  .card-fam { font-size: .56rem; letter-spacing: .08em; margin-bottom: .28rem; }
  .card h3 { font-size: .9rem; line-height: 1.22; margin-bottom: .25rem; letter-spacing: -.012em; }
  .card h3 small { font-size: .7rem; margin-top: .1rem; }
  .card p {
    font-size: .78rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-foot { padding-top: .55rem; gap: .35rem; flex-wrap: wrap; }
  .price { font-size: .9rem; }
  .btn-add { min-height: 44px; padding: 0 .85rem; font-size: .78rem; }

  /* the featured card reads as a proper feature */
  .card.is-lead h3 { font-size: 1.1rem; }
  .card.is-lead p { -webkit-line-clamp: 3; font-size: .85rem; }

  /* ---- Section heads: the button tucks under the heading ---- */
  .sec-head { gap: .55rem; margin-bottom: 1.1rem; }
  /* Scoped to .btn-ghost. As plain .btn this also stripped the background off the
     solid cherry "Write us a brief" button on What we do, leaving white on paper. */
  .sec-head .btn { min-height: 44px; padding: 0 1rem; font-size: .84rem; }
  .sec-head .btn-ghost { background: transparent; border-color: var(--rule); box-shadow: none; }

  /* ---- Engagement cards: less dead space ------------------- */
  .eng { padding: 1.05rem 1.05rem; }
  .eng h3 { font-size: 1rem; }
  .eng p { font-size: .84rem; margin-top: .45rem; }
  .eng-list { gap: .6rem; }
  .eng-opt { padding-bottom: 1rem; }
  .eng-opt::before { margin-bottom: .85rem; }
  .eng-dur { font-size: 1.28rem; }
  .eng-body { font-size: .83rem; }

  /* ---- Hero stats: tighter stack --------------------------- */
  .hero-aside dl { gap: 1rem; }
  .hero-aside dd { font-size: 1.55rem; }
  .hero-aside dd small { font-size: .8rem; }
  .hero-art .note { font-size: .78rem; }

  /* ---- Footer: two-up, thumb-sized ------------------------- */
  .ftr { padding-top: 2.25rem; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .ftr-grid > div:first-child { grid-column: 1 / -1; }
  .ftr h4 { margin-bottom: .35rem; }
  .ftr li { margin: 0; }
  .ftr li a { display: flex; align-items: center; min-height: 44px; font-size: .92rem; }
  .ftr-bot { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .ftr-bot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Case studies: collapse on phones --------------------- */
/* Each case study ran to ~1,080px, making the page 28 screens long. The body and
   quote collapse behind a toggle. Scoped to .js, so without JavaScript every case
   study stays fully expanded and nothing is lost. */
.work-toggle { display: none; }
.work-detail > p + blockquote { margin-top: var(--flow-2); }

@media (max-width: 560px) {
  .work-media img { aspect-ratio: 16 / 10; }
  .work-problem, .work-client { font-size: 1.15rem; margin-bottom: .6rem; }
  .work-result { margin-bottom: .7rem; font-size: .7rem; }
  .work-item { gap: .9rem; padding-bottom: 1.6rem; }
  .work-list { gap: 1.6rem; }

  .js .work-detail p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .js .work-detail blockquote { display: none; }
  .js .work-item.is-open .work-detail p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .js .work-item.is-open .work-detail blockquote { display: block; }

  .js .work-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; margin-top: .35rem; padding: 0;
    font-size: .88rem; font-weight: 600; color: var(--cherry-ink);
  }
  .js .work-toggle::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--dur) var(--ease-out);
  }
  .js .work-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
  .work-toggle .wt-less { display: none; }
  .work-toggle[aria-expanded="true"] .wt-more { display: none; }
  .work-toggle[aria-expanded="true"] .wt-less { display: inline; }

  /* ---- Team: thumbnail beside the name, bio in full -------- */
  /* A full-width square portrait made each person 535px. The photo shrinks to a
     thumbnail; the bio is untouched, so nothing about anyone is cut. */
  .team-grid { gap: 1.5rem; }
  .member {
    display: grid; grid-template-columns: 72px 1fr; column-gap: .9rem;
    align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
  }
  .member:last-child { border-bottom: 0; padding-bottom: 0; }
  .member img {
    grid-row: 1 / span 2; width: 72px; height: 72px;
    aspect-ratio: 1 / 1; margin: 0; border-radius: 14px;
  }
  .member h3 { grid-column: 2; align-self: end; font-size: 1.02rem; }
  .member .role { grid-column: 2; align-self: start; margin: .18rem 0 0; font-size: .64rem; }
  .member p:last-child { grid-column: 1 / -1; margin-top: .8rem; font-size: .88rem; }
}

@media (max-width: 560px) {
  /* The thumbnail layout assumes a full-width row. minmax(215px) let two columns in
     from ~490px, squeezing every bio into ~120px. One column, always, on phones. */
  .team-grid { grid-template-columns: 1fr; }

  /* An odd count in a two-up grid strands the last card. Where there is no featured
     lead card (the related-products row), let the last one span as a feature.
     The shop and homepage carry a lead, so their pairs are left alone. */
  .grid-products:not(:has(.is-lead)) > .card:last-child:nth-child(odd) { grid-column: span 12; }
  .grid-products:not(:has(.is-lead)) > .card:last-child:nth-child(odd) .card-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
  /* last standalone targets under 44px on phones */
  .icon-btn { min-width: 44px; height: 44px; }
  .chip { min-height: 44px; padding: 0 1rem; display: inline-flex; align-items: center; }
  .contact-direct dd > a { display: inline-flex; align-items: center; min-height: 44px; }
  .pdp + * nav .meta a, nav[aria-label="Breadcrumb"] a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* inline links in running sentences are exempt from target size, but a little
     vertical padding makes them kinder to a thumb without disturbing the line */
  .note a, .prose a { padding: .35rem 0; }
}

@media (max-width: 900px) {
  /* cart quantity controls are where a mis-tap costs most */
  .qty-sm button { width: 44px; height: 44px; font-size: 1.05rem; }
  .qty-sm span { min-width: 30px; }
  .line-rm { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .1rem; }
  .line { grid-template-columns: 58px 1fr auto; gap: .8rem; }
  .line img { width: 58px; height: 58px; }
  .side-nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .contact-direct dd span a { padding: .35rem 0; }
}

/* Phone hero: two equal full-width buttons instead of a ragged stack */
@media (max-width: 560px) {
  .hero-cta { flex-direction: column; gap: .6rem; margin-top: 1.6rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* Contact: email and phone up top, one tap from the page head */
.contact-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 860px; }
.cq-card {
  display: flex; align-items: center; gap: .95rem; min-height: 76px;
  padding: 1rem 1.15rem; text-decoration: none; color: var(--ink);
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft);
  box-shadow: var(--lift-low); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cq-card:hover { border-color: var(--cherry); box-shadow: var(--lift-mid); transform: translateY(-1px); }
.cq-card:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 2px; }
.cq-ico {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-full); background: #FCE8F1; color: var(--cherry-ink);
}
.cq-ico svg { width: 21px; height: 21px; }
.cq-text { display: grid; min-width: 0; line-height: 1.3; }
.cq-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cq-value { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; overflow-wrap: break-word; }
.cq-sub { font-size: .8rem; color: var(--ink-muted); }
.cq-go { flex: none; margin-left: auto; color: var(--ink-faint); display: grid; }
.cq-card:hover .cq-go { color: var(--cherry-ink); }
@media (max-width: 700px) {
  .contact-quick { grid-template-columns: 1fr; gap: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .cq-card, .cq-card:hover { transition: none; transform: none; } }
@media (max-width: 420px) {
  .cq-card { gap: .8rem; padding: .95rem 1rem; }
  .cq-go { display: none; }
  .cq-value { font-size: 1rem; }
}

/* ============================================================
   PART 10 — Creatives, podcast, in the news
   ============================================================ */
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--cherry-ink); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-row .h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: .5rem; max-width: 22ch; }
.chip-n { font-family: var(--f-mono); font-size: .72rem; opacity: .62; margin-left: .15rem; }

/* filter bar shared by creatives + news */
.cr-sec { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cr-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cr-status { margin: 0; }

/* ---- creatives ---- */
.cr-group + .cr-group { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.cr-group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 2.5rem; align-items: end; margin-bottom: 1.4rem; }
.cr-group-head p { color: var(--ink-muted); font-size: .95rem; line-height: 1.55; max-width: 60ch; }
.cr-count { font-family: var(--f-mono); font-size: .8rem; font-weight: 500; color: var(--ink-faint); vertical-align: super; margin-left: .2rem; letter-spacing: 0; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); }
.cr-card { min-width: 0; }
.cr-link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.cr-link:hover { border-color: #cfccc9; box-shadow: var(--lift-mid); transform: translateY(-2px); }
.cr-link:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 3px; }
.cr-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--rule-soft); overflow: hidden; }
.cr-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.cr-link:hover .cr-media img { transform: scale(1.035); }
.cr-play {
  position: absolute; left: .75rem; bottom: .75rem; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(20,17,26,.78); color: #fff;
  backdrop-filter: blur(6px);
}
.cr-play svg { width: 16px; height: 16px; margin-left: 2px; }
.cr-body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.05rem; flex: 1; }
.cr-cat { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cherry-ink); }
.cr-title { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.012em; line-height: 1.2; }
.cr-desc { font-size: .88rem; line-height: 1.5; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .7rem; font-size: .78rem; color: var(--ink-faint); }
.cr-open { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--ink); }
.cr-link:hover .cr-open { color: var(--cherry-ink); }

.cr-dialog {
  width: min(1080px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto;
  border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--lift-high);
}
.cr-dialog::backdrop { background: rgba(20,17,26,.55); backdrop-filter: blur(3px); }
.cr-dialog[open] { animation: crIn .26s var(--ease-out, ease) both; }
@keyframes crIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.cr-d-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.cr-d-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; background: rgba(248,248,247,.96); border-bottom: 1px solid var(--rule); }
.cr-d-head .h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: .2rem; }
.cr-d-body { overflow-y: auto; padding: 1.25rem; display: grid; gap: 1.25rem; overscroll-behavior: contain; }
.cr-d-text { display: grid; gap: .8rem; max-width: 70ch; }
.cr-d-text p { color: var(--ink-muted); line-height: 1.65; }
.cr-d-text .note { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.cr-d-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.cr-d-media > * { margin: 0; border-radius: var(--r-soft); overflow: hidden; background: #111; border: 1px solid var(--rule); }
.cr-d-media > .is-wide { grid-column: 1 / -1; }
.cr-d-media > .is-img { background: var(--rule-soft); }
.cr-d-media video, .cr-d-media img { width: 100%; height: auto; display: block; }
.cr-d-media video { max-height: 78dvh; }
body.dialog-open { overflow: hidden; }

/* ---- podcast ---- */
.pod-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pod-art { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--lift-high); border: 1px solid var(--rule); max-width: 460px; justify-self: end; transform: rotate(1.5deg); }
.pod-art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pod-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pod-about .h2 { margin-top: .5rem; max-width: 18ch; }
.pod-learn { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.pod-learn li { padding: .5rem .9rem; border-radius: var(--r-full); background: var(--paper-pure); border: 1px solid var(--rule); font-size: .88rem; font-weight: 500; }
.pod-learn li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); margin-right: .5rem; vertical-align: middle; }
.pod-learn li:nth-child(3n+1)::before { background: var(--cherry); }
.pod-learn li:nth-child(3n+2)::before { background: var(--damson); }
.pod-host { padding: 1.4rem; border-radius: var(--r-soft); background: var(--paper-pure); border: 1px solid var(--rule); border-top: 4px solid var(--plum); }
.pod-host p:not(.meta) { margin-top: .6rem; font-size: .93rem; line-height: 1.65; color: var(--ink-muted); }
.pod-note { margin: -.5rem 0 1.25rem; }
.ep-list { display: grid; gap: .75rem; padding: 0; }
.ep {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "art body btn" "player player player";
  gap: .2rem 1.1rem; align-items: center; padding: .8rem; list-style: none;
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ep:hover { border-color: #cfccc9; box-shadow: var(--lift-low); }
.ep-art { grid-area: art; width: 88px; height: 88px; border-radius: 8px; object-fit: cover; }
.ep-body { grid-area: body; min-width: 0; }
.ep-num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: .5rem; }
.ep-new { padding: .1rem .45rem; border-radius: var(--r-full); background: var(--cherry-ink); color: #fff; font-size: .64rem; letter-spacing: .06em; }
.ep-title { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; margin-top: .2rem; }
.ep-guest { font-size: .84rem; color: var(--ink-muted); margin-top: .15rem; line-height: 1.4; }
.ep-btn {
  grid-area: btn; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.05rem;
  border-radius: var(--r-full); background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem;
}
.ep-btn svg { width: 14px; height: 14px; }
.ep-btn:hover { background: var(--cherry-ink); }
.ep-btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.ep-player { grid-area: player; margin-top: .7rem; }
.ep-player iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.ep.is-latest { border-top: 4px solid var(--cherry); }

/* ---- in the news ---- */
.nw-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.nw-stats > div { padding: .85rem 1.2rem; border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper-pure); min-width: 120px; }
.nw-stats dt { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.nw-stats dd { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; margin-top: .2rem; }
.nw-stats > div:nth-child(1) dd { color: var(--cherry-ink); }
.nw-stats > div:nth-child(2) dd { color: var(--damson); }
.nw-stats > div:nth-child(3) dd { color: var(--plum); }
.nw-outlets { border-block: 1px solid var(--rule); margin-top: clamp(2rem, 4vw, 3rem); background: var(--paper-pure); }
.nw-outlets ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.6rem; padding: 1.1rem 0; }
.nw-outlets li { font-family: var(--f-display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: var(--ink-faint); white-space: nowrap; }
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); }
.nw { display: flex; flex-direction: column; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; min-width: 0; }
.nw-media { display: block; aspect-ratio: 16 / 9; background: var(--rule-soft); overflow: hidden; }
.nw-media img { width: 100%; height: 100%; object-fit: cover; }
.nw-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.05rem; flex: 1; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .78rem; color: var(--ink-faint); }
.nw-outlet { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding: .2rem .5rem; border-radius: var(--r-sharp); background: var(--ink); color: #fff; }
.nw-title { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.28; letter-spacing: -.01em; }
.nw-read { margin-top: auto; padding-top: .35rem; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .86rem; font-weight: 600; color: var(--cherry-ink); text-decoration: none; }
.nw-read:hover { text-decoration: underline; text-underline-offset: 3px; }
.nw-read.is-off { color: var(--ink-faint); font-weight: 400; font-style: italic; }
@media (min-width: 901px) {
  .nw.is-lead { grid-column: span 2; flex-direction: row; }
  .nw.is-lead .nw-media { aspect-ratio: auto; flex: 1.35; min-height: 300px; }
  .nw.is-lead .nw-body { flex: 1; justify-content: center; padding: 1.6rem; }
  .nw.is-lead .nw-title { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
}

/* tablet */
@media (max-width: 900px) {
  .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw.is-lead { grid-column: 1 / -1; }
  .pod-grid, .pod-about { grid-template-columns: 1fr; }
  .pod-art { justify-self: start; max-width: 380px; transform: none; }
  .cr-group-head { grid-template-columns: 1fr; gap: .4rem; }
}

/* phone */
@media (max-width: 640px) {
  .chips-scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut); scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%); }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-scroll .chip { flex: none; scroll-snap-align: start; }
  .cr-bar { gap: .6rem; }
  .cr-status { width: 100%; }
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .cr-body { padding: .7rem .75rem .8rem; gap: .2rem; }
  .cr-title { font-size: .98rem; }
  .cr-cat { font-size: .62rem; }
  .cr-desc { font-size: .8rem; -webkit-line-clamp: 2; }
  .cr-foot { font-size: .7rem; padding-top: .5rem; }
  .cr-open { display: none; }
  .cr-play { width: 34px; height: 34px; left: .5rem; bottom: .5rem; }
  .cr-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .cr-d-inner { max-height: 100dvh; height: 100%; }
  .cr-d-head { padding: .85rem var(--gut); }
  .cr-d-body { padding: 1rem var(--gut) 2rem; }
  .cr-d-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .cr-d-media > .is-land, .cr-d-media > .is-wide { grid-column: 1 / -1; }
  .cr-group .cr-cat { display: none; }
  .pod-art { max-width: none; width: 100%; }
  .ep { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art body" "btn btn" "player player"; gap: .65rem .85rem; padding: .75rem; }
  .ep-art { width: 64px; height: 64px; }
  .ep-title { font-size: .98rem; }
  .ep-btn { justify-content: center; width: 100%; }
  .nw-grid { grid-template-columns: 1fr; gap: .6rem; }
  .nw:not(.is-lead) { flex-direction: row; align-items: stretch; }
  .nw:not(.is-lead) .nw-media { flex: 0 0 96px; aspect-ratio: auto; }
  .nw:not(.is-lead) .nw-body { padding: .7rem .8rem .5rem; gap: .3rem; }
  .nw:not(.is-lead) .nw-title { font-size: .92rem; line-height: 1.3; }
  .nw:not(.is-lead) .nw-meta { font-size: .7rem; }
  .nw:not(.is-lead) .nw-outlet { font-size: .6rem; padding: .15rem .4rem; }
  .nw:not(.is-lead) .nw-read { font-size: .8rem; padding-top: 0; }
  .nw-outlets ul { justify-content: flex-start; gap: .3rem 1.1rem; }
  .nw-outlets li { font-size: .88rem; }
  .nw-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: .5rem; }
  .nw-stats > div { min-width: 0; padding: .7rem .75rem; }
  .nw-stats dt { font-size: .62rem; letter-spacing: .06em; }
  .nw-stats dd { font-size: 1.3rem; white-space: nowrap; }
  .nw-stats > div:nth-child(3) dd { font-size: 1.15rem; line-height: 1.35; }
  .cta-row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 339px) { .cr-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cr-link, .cr-link:hover, .cr-media img, .cr-link:hover .cr-media img { transition: none; transform: none; }
  .cr-dialog[open] { animation: none; }
  .pod-art { transform: none; }
}

/* ---- homepage: creatives / podcast / news spotlight ---- */
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); }
.spot {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0;
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.spot:hover { border-color: #cfccc9; box-shadow: var(--lift-mid); transform: translateY(-2px); }
.spot:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 3px; }
.spot-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rule-soft); }
.spot-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.spot:hover .spot-media img { transform: scale(1.035); }
.spot-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.spot-kicker { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cherry-ink); }
.spot:nth-child(2) .spot-kicker { color: var(--damson); }
.spot:nth-child(3) .spot-kicker { color: var(--plum); }
.spot-title { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.012em; }
.spot-go { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.spot:hover .spot-go { color: var(--cherry-ink); }
@media (max-width: 900px) { .spot-grid { grid-template-columns: 1fr; } .spot { flex-direction: row; } .spot-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 140px; } }
@media (max-width: 560px) { .spot-media { flex-basis: 34%; min-height: 128px; } .spot-body { padding: .85rem .95rem; gap: .3rem; } .spot-title { font-size: 1rem; } .spot-go { min-height: 44px; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .spot, .spot:hover, .spot-media img, .spot:hover .spot-media img { transition: none; transform: none; } }

/* Seven top-level nav entries since Creatives joined: tighten the header between
   the burger breakpoint and ~1100px so it never overflows. */
@media (min-width: 901px) and (max-width: 1100px) {
  .hdr-in { gap: .55rem; }
  .brandmark img { width: 112px; }
  .hdr-nav { gap: 0; }
  .hdr-nav a, .nav-parent { padding-left: .42rem; padding-right: .42rem; font-size: .835rem; }
  .hdr-act { gap: .3rem; margin-left: .2rem; }
  .hdr-cta { padding: .5rem .8rem; font-size: .82rem; }
}

/* meta labels with the three-dot mark outside a .sec-head */
.pod-about .meta, .cta-row .meta { display: flex; align-items: center; gap: .65rem; }

/* odd card out in a two-up creatives group spans the row */
@media (max-width: 640px) and (min-width: 340px) {
  .cr-grid > .cr-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cr-grid > .cr-card:last-child:nth-child(odd) .cr-media { aspect-ratio: 16 / 9; }
  .cr-grid > .cr-card:last-child:nth-child(odd) .cr-desc { -webkit-line-clamp: 3; }
}

/* podcast on phones: round play button beside the title, not a full-width bar */
@media (max-width: 640px) {
  .ep { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "art body btn" "player player player"; gap: .4rem .8rem; }
  .ep-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .ep-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ep-btn svg { width: 15px; height: 15px; margin-left: 2px; }
  .ep-btn[aria-expanded="true"] svg { margin-left: 0; }
}

/* ============================================================
   PART 11 — Checkout, payments, receipt
   ============================================================ */
.line-t { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.line-t a { text-decoration: none; color: var(--ink); }
.line-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.line-sub { font-size: .76rem; color: var(--ink-faint); margin-top: .15rem; }
.line .line-rm { margin-top: .35rem; }
.price.is-free { color: var(--damson); }

.co-sec { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.co-head { display: grid; gap: .35rem; }
.co-head .h2 { margin: 0; }
.co-steps { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--ink-faint); }
.co-steps li { display: inline-flex; align-items: center; gap: .45rem; }
.co-steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); font-family: var(--f-mono); font-size: .7rem; background: var(--paper-pure); }
.co-steps .is-done { color: var(--ink-muted); }
.co-steps .is-done span { background: var(--damson); border-color: var(--damson); color: #fff; }
.co-steps .is-now { color: var(--ink); font-weight: 600; }
.co-steps .is-now span { border-color: var(--ink); background: var(--ink); color: #fff; }
.co-mode { margin: 1.2rem 0 0; padding: .75rem 1rem; border-radius: var(--r-soft); background: #FFF6DB; border: 1px solid #EBD28A; color: #5B4410; font-size: .88rem; line-height: 1.5; }
.co { padding-top: 1.4rem; }
.co-block { border: 0; margin: 0 0 1.6rem; padding: 1.3rem; min-width: 0; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.co-block legend { float: left; width: 100%; padding: 0; margin: 0 0 .25rem; }
.co-block legend + * { clear: both; }
.co-block > .note { margin: 0 0 1rem; }
.co-block > .field:last-child { margin-bottom: 0; }
.opt { font-weight: 400; color: var(--ink-faint); font-size: .76rem; margin-left: .25rem; }
.field abbr { text-decoration: none; color: var(--cherry-ink); margin-left: .1rem; }
.err { display: block; font-size: .8rem; color: var(--cherry-ink); margin-top: .35rem; font-weight: 500; }
.err[hidden] { display: none !important; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--cherry-ink); box-shadow: 0 0 0 3px rgba(208,24,109,.12); }

.paym { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.paym-opt { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .7rem .85rem; border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.paym-opt:hover { border-color: #c9c5c1; }
.paym-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paym-opt:has(input:checked) { border-color: var(--ink); background: var(--paper-pure); box-shadow: inset 0 0 0 1px var(--ink); }
.paym-opt:has(input:focus-visible) { outline: 2px solid var(--cherry-ink); outline-offset: 2px; }
.paym-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--rule-soft); color: var(--ink); }
.paym-ico svg { width: 20px; height: 20px; }
.paym-opt:has(input:checked) .paym-ico { background: var(--ink); color: #fff; }
.paym-txt { display: grid; line-height: 1.25; min-width: 0; }
.paym-txt strong { font-size: .93rem; }
.paym-txt small { font-size: .76rem; color: var(--ink-faint); }
.co-secure { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; }
.co-free { margin: .4rem 0 0; color: var(--ink-muted); }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; line-height: 1.5; color: var(--ink-muted); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--ink); }
.check a { color: var(--ink); }
.co-agree { margin: 0 0 1.2rem; }
.co-alert { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--r-soft); background: #FDECF3; border: 1px solid #F3B8D2; color: #7A0F40; font-size: .88rem; font-weight: 500; line-height: 1.45; }
.co-pay { position: relative; min-height: 54px; font-size: 1rem; }
.co-pay .spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.co-pay.is-busy .co-pay-label { visibility: hidden; }
.co-pay.is-busy .spinner { display: block; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); }
.co-pay:disabled { cursor: progress; opacity: .92; }
@keyframes spin { to { transform: rotate(360deg); } }
.co-fine { margin-top: .6rem; text-align: center; }

.co-summary { display: grid; gap: .2rem; }
.co-summary .h3 { margin-bottom: .4rem; }
.co-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); }
.co-line img { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--rule-soft); object-fit: cover; background: #fff; }
.co-line-t { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.co-line-t span { font-weight: 400; color: var(--ink-muted); }
.co-line .line-rm { min-height: 32px; padding: 0; margin-top: .1rem; }
.co-line .price { font-size: .95rem; }
.co-totals { margin: .9rem 0 0; display: grid; gap: .45rem; }
.co-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9rem; color: var(--ink-muted); }
.co-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
#co-discount-row dd, #rc-discount-row dd { color: var(--damson); }
.co-totals .co-grand { margin-top: .35rem; padding-top: .75rem; border-top: 2px solid var(--ink); font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.co-totals .co-grand dd { font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.co-assure { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--rule-soft); display: grid; gap: .35rem; font-size: .8rem; color: var(--ink-muted); }
.co-assure li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--damson); margin-right: .55rem; vertical-align: middle; }
.co-mini { display: none; }
.co-empty { max-width: 560px; padding: 2rem 0 3rem; }

.co-receipt { max-width: 620px; }
.eyebrow-line.is-centred { justify-content: center; }
.rc-card { margin-top: 1.6rem; padding: 1.3rem 1.4rem; text-align: left; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); box-shadow: var(--lift-low); }
.rc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-soft); }
.rc-meta dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.rc-meta dd { margin: .15rem 0 0; font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.rc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rc-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.rc-lines small { color: var(--ink-muted); }

/* test-mode payment window */
.tg { width: min(460px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto; border: 0; border-radius: 16px; background: var(--paper-pure); color: var(--ink); box-shadow: var(--lift-high); }
.tg::backdrop { background: rgba(20,17,26,.6); backdrop-filter: blur(3px); }
.tg[open] { animation: crIn .22s var(--ease-out) both; }
.tg-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); margin: 0; }
.tg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--ink); color: #fff; }
.tg-head .icon-btn { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.tg-badge { display: inline-block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: #FFE08A; color: #3D2E05; }
.tg-head h2 { font-family: var(--f-display); font-size: 1.15rem; margin: .5rem 0 0; }
.tg-amt { margin: .15rem 0 0; font-size: .85rem; color: #CFC8D8; }
.tg-amt strong { color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tg-body { padding: 1rem 1.2rem .4rem; overflow-y: auto; }
.tg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; padding: .25rem; margin-bottom: 1rem; border-radius: 10px; background: var(--rule-soft); }
.tg-tabs button { min-height: 40px; border-radius: 8px; font-size: .82rem; font-weight: 500; color: var(--ink-muted); }
.tg-tabs button[aria-selected="true"] { background: var(--paper-pure); color: var(--ink); font-weight: 600; box-shadow: var(--lift-low); }
.tg-tabs button:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 1px; }
.tg-hint { font-size: .8rem; color: var(--ink-muted); line-height: 1.6; margin: .2rem 0 .8rem; }
.tg-fill { display: inline; padding: .1rem .35rem; border-radius: 5px; background: var(--rule-soft); font-family: var(--f-mono); font-size: .76rem; color: var(--ink); }
.tg-fill:hover { background: var(--rule); }
.tg-outcome { border: 0; padding: 0; margin: .3rem 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.tg-outcome legend { font-size: .82rem; font-weight: 600; margin-bottom: .4rem; padding: 0; width: 100%; }
.tg-outcome .check { align-items: center; min-height: 40px; }
.tg-foot { padding: .6rem 1.2rem 1.1rem; border-top: 1px solid var(--rule-soft); }
.tg-note { font-size: .74rem; color: var(--ink-faint); text-align: center; margin-top: .55rem; line-height: 1.45; }

@media (max-width: 900px) {
  .co-mini { display: block; margin: 1rem 0 0; border: 1px solid var(--rule); border-radius: var(--r-soft); background: var(--paper-pure); }
  .co-mini summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; padding: .6rem 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; }
  .co-mini summary::-webkit-details-marker { display: none; }
  .co-mini summary span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .co-mini[open] summary span::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .co-mini summary small { font-weight: 400; color: var(--ink-faint); }
  .co-mini-body { padding: 0 1rem .6rem; border-top: 1px solid var(--rule-soft); }
  .co { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 1rem; }
  .co-summary { order: -1; }
  .co-summary > .h3, .co-summary > [data-co-lines] { display: none; }
  .co-summary .promo { margin-top: 0; }
}
@media (max-width: 560px) {
  .co-block { padding: 1rem; }
  .paym { grid-template-columns: 1fr; }
  .paym-opt { min-height: 58px; }
  .rc-meta { grid-template-columns: 1fr; }
  .co-steps { font-size: .78rem; gap: .35rem 1rem; }
  .tg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .tg-inner { max-height: 100dvh; height: 100%; }
  .tg-body { flex: 1; }
  .tg-tabs button { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .tg[open] { animation: none; } .co-pay .spinner { animation-duration: 2s; } }
@media print {
  .hdr, .ftr, .botnav, .drawer, .scrim, .search-overlay, .skip, .btn-row, #co-pane, #co-empty, .toast { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .co-receipt { padding: 0; max-width: none; }
  .rc-card { box-shadow: none; }
}

/* ============================================================
   PART 12 — Sweep fixes (desktop + phone)
   ============================================================ */
/* step headings on Work with us: the hint was pulled up into the heading */
.step-h + .hint { margin-top: .45rem; }
.step-h .step-n { position: relative; top: -.12em; }
/* six challenge cards: three per row instead of four-plus-two */
@media (min-width: 900px) { .chal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* side-by-side shop cards share one media shape so their text lines up */
.card.is-wide .card-media { aspect-ratio: 16 / 11; }
@media (max-width: 900px) { .card.is-wide .card-media { aspect-ratio: 1 / 1; } }
/* the whole product card is the link; Add stays its own button above it */
.card { position: relative; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card .btn-add { position: relative; z-index: 2; }
.card h3 a:focus-visible { outline: none; }
.card:has(h3 a:focus-visible) { outline: 2px solid var(--cherry-ink); outline-offset: 4px; border-radius: var(--r-soft); }
/* product page closing note sat on the section rule */
.pdp-note { padding-bottom: .5rem; }
/* footer links are thumb-sized on every touch width, not just phones */
@media (max-width: 900px) {
  .ftr li a { display: flex; align-items: center; min-height: 44px; }
  .ftr-bot a { display: inline-flex; align-items: center; min-height: 44px; }
}
.ftr .ftr-h { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: #A79FB4; font-weight: 400; margin: 0 0 .9rem; }
@media (max-width: 560px) { .ftr .ftr-h { margin-bottom: .35rem; } }
/* small source thumbnails in the press grid: show at natural size on a quiet ground, never blown up */
.nw-media.is-small { display: grid; place-items: center; background: var(--rule-soft); }
.nw-media.is-small img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* 404 */
.nf { max-width: 640px; padding: clamp(2rem, 6vw, 4rem) 0; }
.nf-code { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; color: var(--cherry-ink); }
.nf-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
/* checkout polish from review */
.co-block legend.h3 { font-family: var(--f-display); font-weight: 700; color: var(--ink); }
.field label.check { display: flex; font-size: .88rem; font-weight: 400; margin: 0; }
.co-block .row-2 { row-gap: 1rem; margin-bottom: 1rem; }
.co-block .row-2 .field { margin-bottom: 0; }
/* brief + contact forms: one rhythm between every field, stacked or side by side */
.brief-fields { gap: 1.1rem; }
.brief-fields .field { margin-bottom: 0; }
.brief-fields .row-2 { row-gap: 1.1rem; }
.tg-tabs button { white-space: nowrap; }
@media (max-width: 560px) { .tg-tabs button { font-size: .72rem; padding: 0 .2rem; } }

/* ============================================================
   PART 13 — SEO pages and components
   ============================================================ */
/* <picture> wraps images for WebP; it must not become a layout box of its own */
picture { display: contents; }

.crumbs { padding-top: clamp(1rem, 2.5vw, 1.6rem); margin-bottom: .6rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule); }
.crumbs a { color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); display: inline-flex; align-items: center; min-height: 32px; }
.sec.pad-top-0 { padding-top: 0; }

/* case-study summaries on the index */
.work-media { display: block; }
.work-problem a, .work-client a { color: inherit; text-decoration: none; }
.work-problem a:hover, .work-client a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.work-excerpt { color: var(--ink-muted); line-height: 1.65; max-width: 62ch; margin-top: .6rem; }
.work-more { margin-top: .5rem; }

/* case-study page */
.cs-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cs-problem { font-family: var(--f-display); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.35; color: var(--ink-muted); margin-top: 1.2rem; max-width: 40ch; }
.cs-media { margin: 0; border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--rule); background: var(--paper-pure); }
.cs-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cs-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cs-body .prose p { margin-top: .8rem; }
.cs-quote { margin: 1.6rem 0 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--cherry); background: var(--paper-pure); border-radius: 0 var(--r-soft) var(--r-soft) 0; }
.cs-quote p { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }
.cs-quote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--f-mono); font-size: .74rem; color: var(--ink-faint); }
.cs-aside { position: sticky; top: 92px; display: grid; gap: .9rem; padding: 1.2rem; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.cs-aside dl { margin: 0; display: grid; gap: .7rem; }
.cs-aside dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cs-aside dd { margin: .1rem 0 0; font-weight: 600; }
.cs-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.cs-more a { display: grid; gap: .25rem; padding: 1rem 1.1rem; min-height: 44px; text-decoration: none; color: var(--ink); background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.cs-more a:hover { border-color: var(--ink); }
.cs-more strong { font-family: var(--f-display); font-size: 1.05rem; }
.cs-more span { font-size: .86rem; color: var(--ink-muted); }

/* creative project page */
.cr-page-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.cr-page-media figure { margin: 0; border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--rule); background: #111; }
.cr-page-media figure.is-img { background: var(--rule-soft); }
.cr-page-media figure.is-land:first-child:not(.is-img) { grid-column: 1 / -1; }
.cr-page-media video, .cr-page-media img { display: block; width: 100%; height: auto; }

/* services ↔ templates */
.svc-tpl { margin-top: .7rem; font-size: .8rem; color: var(--ink-faint); }
.svc-tpl a { color: var(--ink); }
.pdp-service { margin-top: 1.4rem; padding: .9rem 1rem; border-radius: var(--r-soft); background: var(--paper-pure); border: 1px solid var(--rule); font-size: .92rem; color: var(--ink-muted); }
.pdp-service a { color: var(--ink); font-weight: 600; }

/* homepage: as featured in */
.featured { border-bottom: 1px solid var(--rule); background: var(--paper); }
.featured-in { display: flex; align-items: center; gap: .6rem 1.6rem; flex-wrap: wrap; padding-block: 1.1rem; }
.featured-h { margin: 0; font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.featured-in ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; flex: 1; }
.featured-in li { font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: var(--ink-muted); white-space: nowrap; }
.featured-in .link-arrow { font-size: .88rem; }

@media (max-width: 900px) {
  .cs-head, .cs-body { grid-template-columns: 1fr; }
  .cs-aside { position: static; }
  .cs-more { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cr-page-media { grid-template-columns: 1fr; }
  .featured-in { gap: .5rem; }
  .featured-in li { font-size: .84rem; }
}

/* ============================================================
   PART 14 — Client changes, 15 Sept 2026
   ============================================================ */
/* client logos on case studies */
.work-logo, .cs-logo, .cs-more-logo {
  display: block; width: auto; object-fit: contain; background: #fff;
  border: 1px solid var(--rule); border-radius: 8px;
}
.work-logo { height: 48px; max-width: 160px; padding: 6px 10px; margin-bottom: .9rem; }
.cs-logo { height: 64px; max-width: 200px; padding: 8px 12px; margin-bottom: 1.1rem; }
.cs-more-logo { height: 40px; max-width: 140px; padding: 5px 8px; margin-bottom: .45rem; }
.cs-body .prose p + p { margin-top: .9rem; }

/* creatives: description sits under the heading, three larger cards per row */
.cr-group-head { grid-template-columns: 1fr; gap: .4rem; align-items: start; }
@media (min-width: 901px) { .cr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* templates page: hover flips the card to the full description (pointer devices only) */
.card-back { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card.has-flip { perspective: 1400px; }
  .card.has-flip > .card-media, .card.has-flip > .card-body {
    backface-visibility: hidden; transition: transform .6s var(--ease-out);
  }
  .card-back {
    display: flex; flex-direction: column; gap: .6rem;
    position: absolute; inset: 0; z-index: 3; padding: 1.1rem 1.15rem 1rem;
    background: var(--paper-pure); border: 1px solid var(--ink); border-radius: var(--r-soft);
    box-shadow: var(--lift-mid);
    transform: rotateY(-180deg); backface-visibility: hidden; pointer-events: none;
    transition: transform .6s var(--ease-out);
  }
  .card.has-flip:hover > .card-media, .card.has-flip:hover > .card-body { transform: rotateY(180deg); pointer-events: none; }
  .card.has-flip:hover > .card-back { transform: rotateY(0deg); pointer-events: auto; }
  .card-back-title { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
  .card-back-title small { display: block; font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: var(--ink-muted); }
  .card-back-text { flex: 1; min-height: 0; overflow-y: auto; font-size: .84rem; line-height: 1.55; color: var(--ink-muted); padding-right: .3rem; scrollbar-width: thin; }
  .card-back-text p + p, .card-back-text p + ul, .card-back-text ul + p { margin-top: .55rem; }
  .card-back-text ul { margin: .4rem 0 0; padding-left: 1.1rem; list-style: disc; }
  .card-back-text li + li { margin-top: .2rem; }
  .card-back .card-foot { padding-top: .6rem; border-top: 1px solid var(--rule-soft); }
  .card-back-link { margin-left: auto; margin-right: .5rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .card.has-flip > .card-media, .card.has-flip > .card-body, .card-back { transition: opacity .2s; transform: none !important; }
  .card-back { opacity: 0; }
  .card.has-flip:hover > .card-back { opacity: 1; }
}

/* publication logos: homepage "As featured in" and the In the news strip */
.press-logo { display: flex; align-items: center; }
.press-logo img { display: block; height: 26px; width: auto; max-width: 150px; object-fit: contain; }
.featured-in ul { align-items: center; gap: .9rem 1.8rem; }
.nw-outlets ul { align-items: center; gap: 1rem 2.2rem; padding-block: 1.4rem; }
.nw-outlets .press-logo img { height: 30px; max-width: 170px; }
@media (max-width: 560px) {
  .press-logo img { height: 22px; max-width: 120px; }
  .nw-outlets .press-logo img { height: 24px; max-width: 130px; }
  .featured-in ul { gap: .8rem 1.3rem; }
  .nw-outlets ul { gap: .9rem 1.4rem; justify-content: center; }
}

/* client logo on creative project cards and pages */
.cr-logo { display: block; height: 30px; width: auto; max-width: 120px; object-fit: contain; object-position: left center; margin-bottom: .5rem; }
@media (max-width: 640px) { .cr-logo { height: 24px; max-width: 96px; margin-bottom: .35rem; } }
@media (max-width: 560px) {
  .featured-in { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .featured-in ul { width: 100%; }
}

/* ---- client logo wall (replaces the old single grey marquee) ---- */
.logo-wall { background: var(--paper-pure); border-block: 1px solid var(--rule); padding: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.4vw, 2.3rem); overflow: hidden; }
.logo-wall-head { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.logo-wall-head .meta { display: flex; align-items: center; gap: .65rem; margin: 0; font-weight: 400; }
.logo-row {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.logo-row + .logo-row { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
.logo-track { display: flex; width: max-content; animation: logoScroll 70s linear infinite; }
.logo-row.is-reverse .logo-track { animation-direction: reverse; animation-duration: 82s; }
.logo-row:hover .logo-track { animation-play-state: paused; }
.logo-set { display: flex; align-items: center; gap: clamp(2.6rem, 5vw, 4.6rem); margin: 0; padding: 0 clamp(2.6rem, 5vw, 4.6rem) 0 0; list-style: none; }
.logo-set li { display: flex; align-items: center; justify-content: center; min-height: 58px; }
.logo-set img { display: block; max-width: none; filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.logo-set li:hover img { filter: none; opacity: 1; transform: scale(1.04); }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .logo-set { gap: 2.2rem; padding-right: 2.2rem; }
  .logo-set img { zoom: .78; }
  .logo-set li { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; }
  .logo-set { flex-wrap: wrap; justify-content: center; padding: 0 var(--gut); row-gap: 1.2rem; }
  .logo-set[aria-hidden="true"] { display: none; }
  .logo-row { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================================
   PART 15. Homepage carousels: case studies, testimonials
   Native horizontal scroll with snap (swipe on touch); arrow buttons step it.
   ========================================================================= */
.sec-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.car { position: relative; }
.car-track {
  display: grid; grid-auto-flow: column; gap: clamp(.9rem, 1.8vw, 1.4rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 .25rem;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 4px; border-radius: var(--r-soft); }
.car-item { scroll-snap-align: start; min-width: 0; }
.car-ctrl { display: none; align-items: center; gap: .5rem; }
.js .car-ctrl { display: inline-flex; }
.car-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--paper-pure); color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.car-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.car-btn:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 2px; }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-count { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--ink-muted); min-width: 4.5ch; text-align: center; font-variant-numeric: tabular-nums; }

/* case study cards */
.wc-track { grid-auto-columns: calc((100% - 2 * clamp(.9rem, 1.8vw, 1.4rem)) / 3); }
.wc { display: flex; flex-direction: column; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; }
.wc-media { display: block; overflow: hidden; background: var(--rule-soft); }
.wc-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease-out); }
.wc:hover .wc-media img { transform: scale(1.035); }
.wc-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.wc-logo { height: 32px; width: auto; max-width: 120px; object-fit: contain; object-position: left center; }
.wc-client { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.wc-client a { color: inherit; text-decoration: none; }
.wc-client a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-intro { font-size: .9rem; line-height: 1.55; color: var(--ink-muted); }
.wc-more { margin-top: auto; padding-top: .35rem; font-size: .88rem; }
.wc-all { background: var(--ink); border-color: var(--ink); }
.wc-all a { display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; height: 100%; min-height: 260px; padding: 1.5rem; color: #fff; text-decoration: none; }
.wc-all-n { font-family: var(--f-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--cherry); }
.wc-all-t { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; }
.wc-all a:hover .wc-all-t { text-decoration: underline; text-underline-offset: 4px; }
.wc-all svg { width: 22px; height: 22px; }


/* testimonials */
.tm-track { grid-auto-columns: calc((100% - 2 * clamp(.9rem, 1.8vw, 1.4rem)) / 3); }
.tm figure { display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; height: 100%; margin: 0; padding: 1.5rem 1.4rem 1.3rem; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.tm-quote { margin: 0; }
.tm-quote p { font-size: .95rem; line-height: 1.6; color: var(--ink); }
.tm-by { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "photo who" "logo logo"; align-items: center; column-gap: .85rem; row-gap: .9rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.tm-photo { grid-area: photo; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tm-who { grid-area: who; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.tm-who strong { font-family: var(--f-display); font-size: 1rem; }
.tm-who span { font-size: .8rem; line-height: 1.35; color: var(--ink-muted); }
.tm-logo { grid-area: logo; height: 28px; width: auto; max-width: 120px; object-fit: contain; object-position: left center; }

@media (max-width: 900px) {
  .wc-track, .tm-track { grid-auto-columns: calc((100% - clamp(.9rem, 1.8vw, 1.4rem)) / 2); }
}
@media (max-width: 560px) {
  .wc-track, .tm-track { grid-auto-columns: 86%; align-items: start; }
  .sec-actions .btn { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-media img, .wc:hover .wc-media img { transition: none; transform: none; }
}
/* one row carrying every client logo: twice the length, so twice the duration keeps the same pace */
.logo-track { animation-duration: 130s; }
/* the hero photo is a portrait in a 4:3 frame: keep the face in view */
.hero-art .figure img { object-position: 50% 4%; }

/* ---- case studies index: a wall of the real work behind the header ---- */
.cs-index-head { position: relative; overflow: hidden; isolation: isolate; }
.cs-index-head > .shell { position: relative; z-index: 2; }
.cs-index-head h1 { max-width: 11ch; }
.cs-index-head .page-lede { max-width: 42ch; }
.work-wall {
  position: absolute; z-index: 0; top: 50%; right: -7%;
  width: min(58vw, 900px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  transform: translateY(-50%) rotate(-7deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 62% 50%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 72% at 62% 50%, #000 40%, transparent 78%);
  pointer-events: none;
}
.work-wall source { display: none; }
.work-wall img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-soft); box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 18px 36px -22px rgba(20,17,26,.45); }
.work-wall picture:nth-child(4n+2) img, .work-wall > img:nth-child(4n+2) { transform: translateY(22px); }
.work-wall picture:nth-child(4n+4) img, .work-wall > img:nth-child(4n+4) { transform: translateY(-18px); }
.cs-index-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 32%, rgba(248,248,247,.75) 50%, rgba(248,248,247,0) 70%);
}
@media (max-width: 900px) {
  .cs-index-head { display: flex; flex-direction: column; }
  .cs-index-head::before { display: none; }
  .cs-index-head h1 { max-width: none; }
  .work-wall {
    order: 2; position: relative; top: auto; right: auto; z-index: 0;
    width: 150%; margin: 2.75rem 0 -1rem -25%;
    grid-template-columns: repeat(6, 1fr); gap: 10px;
    transform: rotate(-5deg);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  }
  .work-wall picture:nth-child(n) img, .work-wall > img:nth-child(n) { transform: none; border-radius: 8px; }
}
@media (max-width: 900px) { .sec.pad-bot-0.cs-index-head { padding-bottom: 2.5rem; } }

/* ---- spacing: section padding is per side, so neighbours add up.
   Target ~110–140px of air between sections on desktop, ~70–90px on phones,
   and a short, even step from the header to the first line of content. ---- */
.hero { padding: clamp(1.75rem, 3.6vw, 3rem) 0 clamp(2.25rem, 4.2vw, 3.5rem); }
.sec { padding: clamp(2.25rem, 4.2vw, 3.75rem) 0; }
.sec.pad-top-0 { padding-top: 0; }
.sec.pad-bot-0 { padding-bottom: 0; }
main > .sec:first-child:not(.pad-top-0) { padding-top: clamp(1.75rem, 3.6vw, 3rem); }
.ftr { margin-top: clamp(1.75rem, 3.4vw, 3rem); }

/* ---- testimonials: a dark band ---- */
.sec:has(.tm-track) { background: var(--ink); color: #EDEAF0; padding: clamp(3.25rem, 5.5vw, 5rem) 0; }
.sec:has(.tm-track) .h2 { color: #fff; }
.sec:has(.tm-track) .meta { color: #A79FB4; }
.sec:has(.tm-track) .car-btn { background: transparent; border-color: #3A3346; color: #fff; }
.sec:has(.tm-track) .car-btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ink); }
.sec:has(.tm-track) .car-btn:disabled { opacity: .35; }
.sec:has(.tm-track) .car-btn:focus-visible { outline-color: #fff; }
.tm figure { background: #1E1A26; border-color: #2E2838; }
.tm-quote p { color: #EDEAF0; }
.tm-by { border-top-color: #2E2838; }
.tm-who strong { color: #fff; }
.tm-who span { color: #A79FB4; }
.tm-logo { background: #fff; padding: 4px 8px; border-radius: 6px; height: 32px; box-sizing: border-box; }
.sec:has(.tm-track) + .sec { border-top: 0; }

/* ---- homepage closing call to action: dark band ---- */
.sec.cta-band {
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(237,33,124,.22), transparent 60%),
    radial-gradient(760px 460px at 0% 100%, rgba(102,45,145,.3), transparent 60%),
    var(--ink);
  color: #EDEAF0; padding: clamp(3.5rem, 6.5vw, 6rem) 0;
}
.cta-band ~ .ftr { margin-top: 0; }
.cta-x { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cta-band .eyebrow { background: rgba(255,255,255,.06); border-color: #3A3346; color: #C9C2D4; box-shadow: none; }
.cta-band .h2 { color: #fff; margin-top: 1.1rem; }
.cta-band .hire-lede { color: #C9C2D4; margin-top: 1rem; max-width: 56ch; }
.cta-steps { counter-reset: step; display: grid; gap: .8rem; margin: 1.6rem 0 1.9rem; padding: 0; list-style: none; max-width: 56ch; }
.cta-steps li { counter-increment: step; position: relative; padding-left: 2.6rem; color: #C9C2D4; font-size: .98rem; line-height: 1.5; }
.cta-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.05rem;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(237,33,124,.16); color: #FF6FAE; font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(237,33,124,.4);
}
.cta-steps strong { color: #fff; font-weight: 600; }
.cta-x-main { padding: 1rem 1.6rem; font-size: 1rem; box-shadow: 0 14px 34px -14px rgba(237,33,124,.75); }
.cta-x-alt { background: transparent; border-color: #4A4256; color: #fff; }
.cta-x-alt:hover { background: rgba(255,255,255,.08); border-color: #8A8196; }
.cta-x-note { margin-top: 1rem; font-size: .88rem; color: #A79FB4; }
.cta-x-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.cta-x-note a:hover { text-decoration-color: #fff; }

.cta-x-proof { background: rgba(255,255,255,.035); border: 1px solid #2E2838; border-radius: calc(var(--r-soft) + 6px); padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.cta-x-proof-h { color: #A79FB4; margin-bottom: 1rem; }
.cta-band .teaser-proof { background: #2E2838; border-color: #2E2838; }
.cta-band .teaser-proof div { background: #1A1622; padding: 1.3rem 1.2rem; }
.cta-band .teaser-proof dt { font-size: clamp(2rem, 3.2vw, 2.6rem); }
.cta-band .teaser-proof dd { color: #A79FB4; }
.cta-band .teaser-proof div:nth-child(1) dt { color: #FF4F9A; }
.cta-band .teaser-proof div:nth-child(2) dt { color: #E06BA8; }
.cta-band .teaser-proof div:nth-child(3) dt { color: #B48BD6; }
.cta-band .teaser-proof div:nth-child(4) dt { color: #fff; }
.cta-x-link { margin-top: 1.1rem; color: #fff; }
.cta-x-link:hover { color: #FF6FAE; }
.cta-band :focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
  .cta-x { grid-template-columns: 1fr; }
  .cta-x-main, .cta-x-alt { width: 100%; }
}
body:has(main > .cta-band:last-child) .ftr { margin-top: 0; border-top: 1px solid #2E2838; }

/* ---- What we are not + homepage FAQs ---- */
.not-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.not-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.not-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1.1rem 1.2rem; background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); box-shadow: var(--lift-low); }
.not-list p { font-size: .96rem; line-height: 1.55; color: var(--ink-muted); }
.not-list strong { color: var(--ink); font-weight: 600; }
.not-list a { color: var(--cherry-ink); text-decoration: underline; text-underline-offset: 3px; }
.not-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(237,33,124,.1); color: var(--cherry-ink); margin-top: .05rem; }
.not-ico svg { width: 14px; height: 14px; transform: rotate(45deg); }
.faq-block .faq { margin: 0; }
.faq-more { margin-top: 1.25rem; }
.faq-list { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; list-style: disc; }
.faq-list li::marker { color: var(--cherry); }
.not-card { padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft); }
.not-card .h3 { margin-bottom: 1rem; }
.not-card .not-list li { background: var(--paper); box-shadow: none; }
@media (max-width: 900px) { .not-faq { grid-template-columns: 1fr; } }

/* ---- testimonial cards: hover lift + soft shadow ---- */
.tm figure { box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out); }
.tm figure:hover { transform: translateY(-4px); border-color: #4A4256; box-shadow: 0 28px 56px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(237,33,124,.18); }
.tm-track { padding-top: 8px; padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .tm figure, .tm figure:hover { transition: none; transform: none; } }
.not-ico .faq-ico { width: 14px; height: 14px; margin: 0; transform: rotate(45deg); }

/* founder: LinkedIn handle under the name */
.founder-li { display: inline-flex; align-items: center; gap: .5rem; margin: .1rem 0 1rem; padding: .42rem .85rem .42rem .55rem; border-radius: var(--r-full); border: 1px solid var(--rule); background: var(--paper-pure); color: var(--ink); font-size: .88rem; font-weight: 500; text-decoration: none; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.founder-li svg { color: #0A66C2; flex: none; }
.founder-li:hover { border-color: #0A66C2; box-shadow: var(--lift-low); }
.founder-li-row { margin-top: 1.1rem; }
.founder-li-row .founder-li { margin: 0; }

/* ---- homepage case study cards: shorter, no dead space ---- */
.wc-media img { aspect-ratio: 16 / 10; }
.wc-body { padding: .95rem 1.1rem 1.05rem; gap: .45rem; }
.wc-logo { height: 28px; }
.wc-more { padding-top: .6rem; }
.wc-all a { min-height: 200px; }

/* ---- a single client testimonial, placed in context on inner pages ---- */
.tq-sec { padding-top: clamp(.5rem, 1.5vw, 1rem); }
.tq {
  position: relative; margin: 0; max-width: 880px;
  padding: clamp(1.5rem, 3.2vw, 2.25rem) clamp(1.4rem, 3.4vw, 2.5rem);
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: calc(var(--r-soft) + 4px);
  box-shadow: 0 18px 40px -30px rgba(20,17,26,.35);
}
.tq::before {
  content: "\201C"; position: absolute; top: .1rem; right: clamp(1rem, 3vw, 2rem);
  font-family: var(--f-display); font-size: 6rem; line-height: 1; color: var(--cherry); opacity: .16; pointer-events: none;
}
.tq-label { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.tq-quote { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--cherry); }
.tq-quote p { font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.62; color: var(--ink); }
.tq-by { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.3rem; }
.tq-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.tq-who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; margin-right: auto; }
.tq-who strong { font-family: var(--f-display); font-size: 1rem; }
.tq-who span { font-size: .84rem; color: var(--ink-muted); line-height: 1.35; }
.tq-logo { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.shell-narrow .tq, .tq-sec .shell-narrow .tq { max-width: none; }
@media (max-width: 560px) { .tq::before { font-size: 4.5rem; } .tq-logo { order: 3; } }

/* ---- a single testimonial, placed quietly near the end of a page ---- */
.tq {
  position: relative; margin: 0; max-width: 60rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem 2.5rem; align-items: end;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: var(--r-soft);
  box-shadow: var(--lift-low);
}
.tq::before {
  content: "\201C"; position: absolute; top: .15rem; right: 1.3rem;
  font-family: var(--f-display); font-size: 5.5rem; line-height: 1; color: var(--cherry); opacity: .16; pointer-events: none;
}
.tq-label { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin: 0; }
.tq-quote { grid-column: 1; margin: 0; padding: 0; border: 0; }
.tq-quote p { font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.6; color: var(--ink); }
.tq-by { grid-column: 2; display: grid; grid-template-columns: 52px auto; grid-template-areas: "photo who" "logo logo"; gap: .7rem .8rem; align-items: center; min-width: 13rem; max-width: 17rem; }
.tq-photo { grid-area: photo; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.tq-who { grid-area: who; display: flex; flex-direction: column; gap: .1rem; }
.tq-who strong { font-family: var(--f-display); font-size: .98rem; }
.tq-who span { font-size: .8rem; line-height: 1.35; color: var(--ink-muted); }
.tq-logo { grid-area: logo; height: 30px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; }
@media (max-width: 760px) {
  .tq { grid-template-columns: 1fr; }
  .tq-by { grid-column: 1; max-width: none; padding-top: 1rem; border-top: 1px solid var(--rule); }
}
.cr-d-logo { display: block; height: 36px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; margin-bottom: .55rem; }
/* logo strip: a touch more contrast so light-coloured and hairline logos don't wash out */
.logo-set img { filter: grayscale(1) contrast(1.15) brightness(.85); opacity: .75; }
.logo-set li:hover img { filter: none; opacity: 1; }

/* ---- case study page: the side call-to-action card ---- */
.cs-aside {
  position: sticky; top: 96px; display: grid; gap: 0; padding: clamp(1.3rem, 2.2vw, 1.75rem);
  color: #EDEAF0; border: 1px solid #2E2838; border-radius: calc(var(--r-soft) + 6px);
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(237,33,124,.28), transparent 65%),
    radial-gradient(380px 260px at 0% 100%, rgba(102,45,145,.32), transparent 65%),
    var(--ink);
  box-shadow: 0 30px 60px -32px rgba(20,17,26,.55);
}
.csa-client { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid #2E2838; }
.csa-logo { display: inline-flex; align-items: center; height: 38px; padding: 0 .6rem; background: #fff; border-radius: 8px; }
.csa-logo img { height: 26px; width: auto; max-width: 96px; object-fit: contain; }
.csa-client-name { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #A79FB4; }
.csa-kicker { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #FF6FAE; }
.csa-title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 1rem; }
.csa-points { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .6rem; }
.csa-points li { display: grid; grid-template-columns: 22px 1fr; gap: .55rem; align-items: start; font-size: .9rem; line-height: 1.45; color: #D6D0DE; }
.csa-check { width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: rgba(237,33,124,.18); color: #FF6FAE; }
.csa-cta { box-shadow: 0 14px 30px -14px rgba(237,33,124,.8); }
.csa-cta:hover { background: #E2267F; }
.csa-links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.csa-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .6rem; border: 1px solid #3A3346; border-radius: var(--r-full); color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; text-align: center; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.csa-links a:hover { background: rgba(255,255,255,.08); border-color: #6B6278; }
.csa-mail { margin: 1rem 0 0; font-size: .8rem; color: #A79FB4; text-align: center; }
.csa-mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.cs-aside :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .cs-aside { position: static; } }
/* homepage case cards: full intro text, each card sized to its own content */
.wc-track { align-items: start; }

/* ---- Why the name: full-bleed blossom hero with the title over it ---- */
.name-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(460px, 78vh, 780px);
  background: var(--ink); color: #fff;
}
.name-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.name-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,17,26,.86) 0%, rgba(20,17,26,.55) 32%, rgba(20,17,26,.12) 62%, rgba(20,17,26,0) 80%),
    linear-gradient(to right, rgba(20,17,26,.45) 0%, rgba(20,17,26,0) 55%);
}
.name-hero-in { width: 100%; padding-top: 6rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.name-hero .eyebrow-line { color: rgba(255,255,255,.82); }
.name-hero h1 { color: #fff; max-width: 14ch; margin: .6rem 0 1.4rem; text-shadow: 0 2px 30px rgba(20,17,26,.35); }
.name-hero .triad { max-width: 220px; }
.name-hero-cue { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.6rem; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: .15rem; }
.name-hero-cue svg { transform: rotate(90deg); transition: transform var(--dur) var(--ease-out); }
.name-hero-cue:hover { border-bottom-color: #fff; }
.name-hero-cue:hover svg { transform: rotate(90deg) translateX(3px); }
.name-hero-cue:focus-visible { outline-color: #fff; }
#story { scroll-margin-top: 90px; }
@media (max-width: 700px) { .name-hero { min-height: 68vh; } .name-hero-bg { object-position: 60% 40%; } }
@media (prefers-reduced-motion: reduce) { .name-hero-cue svg, .name-hero-cue:hover svg { transition: none; transform: rotate(90deg); } }
/* shorter blossom hero */
.name-hero { min-height: clamp(360px, 56vh, 540px); }
.name-hero-in { padding-top: 4rem; padding-bottom: clamp(2rem, 4.5vw, 3.25rem); }
@media (max-width: 700px) { .name-hero { min-height: 52vh; } }

/* ---- mobile polish ---- */
/* the space reserved for the fixed bottom bar belongs to the dark footer, not a pale strip under it */
@media (max-width: 900px) {
  body { padding-bottom: 0; }
  .ftr { padding-bottom: calc(2rem + 66px + env(safe-area-inset-bottom)); }
}
/* in-page links and focused fields land below the sticky header, not under it */
[id] { scroll-margin-top: 92px; }
/* case study names: a comfortable tap target without changing the look */
.work-client a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
/* one close control in the search box: hide the browser's own clear button */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* headers with a photo wall and no bottom padding: leave room so the wall fades out instead of being cut */
@media (min-width: 901px) {
  .sec.pad-bot-0.cs-index-head { padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
  .cs-index-head .work-wall { top: 46%; }
}
.ep-num time + .ep-new { margin-left: .5rem; }

/* ---- testimonials v2: brief line, multi-paragraph quotes, highlights ---- */
.tm-brief { font-size: .82rem; line-height: 1.45; color: #E7C6DA; margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid #2E2838; }
.tm-brief span { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #A79FB4; margin-bottom: .3rem; }
.tm-quote p + p, .tq-quote p + p { margin-top: .7rem; }
.tm-quote strong { color: #fff; font-weight: 700; }
.tm-quote ul, .tq-quote ul { margin: .6rem 0 0 1.1rem; list-style: disc; display: grid; gap: .25rem; }
.tm-quote li { color: #EDEAF0; }
.tm-quote li::marker, .tq-quote li::marker { color: var(--cherry); }
.tm figure { justify-content: flex-start; }
.tm-by { margin-top: auto; }
.tm-quote { margin-bottom: 1.2rem; }
.tm-photo, .tq-photo { background: #fff; }
.tq-quote strong { color: var(--ink); font-weight: 700; }
.tm-logo { height: 42px; max-width: 150px; padding: 5px 10px; }
.tq-logo { height: 40px; max-width: 160px; }

/* ---- testimonials: the client's own graphics, shown as supplied ---- */
.tm-track { grid-auto-columns: calc((100% - clamp(.9rem, 1.8vw, 1.4rem)) / 2); }
.tm-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); transition: transform 260ms var(--ease-out); }
.tm-card:hover img { transform: translateY(-4px); }
.tq-card { margin: 0; max-width: 620px; }
.tq-card img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 18px 40px -30px rgba(20,17,26,.35); }
@media (max-width: 700px) { .tm-track { grid-auto-columns: 92%; } }
@media (prefers-reduced-motion: reduce) { .tm-card img, .tm-card:hover img { transition: none; transform: none; } }

/* ---- homepage case study cards: equal heights, aligned text, 3D hover ---- */
.wc-track { align-items: stretch; padding: 16px 8px 26px; margin: -16px -8px -26px; scroll-padding-inline: 8px; }
.wc { height: 100%; }
.wc-intro, .work-excerpt { hanging-punctuation: none; }
.wc {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), box-shadow 450ms cubic-bezier(.2,.8,.2,1);
}
.wc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.35), transparent 45%);
  transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wc.is-tilting { transition: transform 90ms linear, box-shadow 300ms ease; box-shadow: 0 30px 60px -28px rgba(20,17,26,.45); }
  .wc.is-tilting::after { opacity: 1; }
}
@media (min-width: 561px) { .wc-intro, .wc-intro { -webkit-line-clamp: 4; } }
@media (min-width: 561px) and (max-width: 1199px) { .wc-track .wc-intro { -webkit-line-clamp: 5; } }
/* homepage case cards: cap the intro so the longest client doesn't stretch every card */
@media (min-width: 561px) {
  .wc-track .wc-intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
}
.cs-tq { margin-top: 1.75rem; max-width: 560px; }

/* testimonials: three graphics per row on desktop, two on tablets, one on phones */
.tm-track { grid-auto-columns: calc((100% - 2 * clamp(.9rem, 1.8vw, 1.4rem)) / 3); }
@media (max-width: 1024px) { .tm-track { grid-auto-columns: calc((100% - clamp(.9rem, 1.8vw, 1.4rem)) / 2); } }
@media (max-width: 700px) { .tm-track { grid-auto-columns: 92%; } }

/* ---- page testimonials: a symmetric row of three client graphics ---- */
.tq-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); }
.tq-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--rule); background: #fff; box-shadow: 0 18px 40px -30px rgba(20,17,26,.35); transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.tq-item:hover img { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,17,26,.45); }
@media (max-width: 1024px) and (min-width: 701px) { .tq-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tq-item:nth-child(3) { display: none; } }
@media (max-width: 700px) {
  .tq-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .tq-row::-webkit-scrollbar { display: none; }
  .tq-item { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .tq-item img, .tq-item:hover img { transition: none; transform: none; } }

/* ---- brand strip: one row of full-colour logo tiles, biggest brands first ---- */
.logo-wall { background: var(--paper); padding: clamp(1.6rem, 3.2vw, 2.4rem) 0 clamp(1.8rem, 3.4vw, 2.6rem); }
.logo-row { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); padding-block: 10px 16px; }
.logo-track { animation-duration: 160s; padding-left: max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))); }
.logo-set { gap: 14px; padding-right: 14px; }
.logo-set li.logo-tile {
  width: 172px; height: 92px; min-height: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-pure); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,17,26,.05), 0 10px 24px -18px rgba(20,17,26,.28);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.logo-set li.logo-tile img, .logo-set li.logo-tile:hover img { filter: none; opacity: 1; transform: none; object-fit: contain; }
.logo-set li.logo-tile:hover { transform: translateY(-3px); border-color: #CFCBC7; box-shadow: 0 1px 2px rgba(20,17,26,.05), 0 18px 32px -18px rgba(20,17,26,.35); }
@media (max-width: 700px) {
  .logo-set li.logo-tile { width: 136px; height: 76px; border-radius: 14px; }
  .logo-set li.logo-tile img { zoom: .82; }
  .logo-set { gap: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { padding-left: 0; }
  .logo-set li.logo-tile, .logo-set li.logo-tile:hover { transition: none; transform: none; }
}

/* ---- page testimonials: two graphics in one wide rectangular panel ---- */
.tq-row.tq-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: #F7F7F7; border: 1px solid var(--rule); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,17,26,.04), 0 28px 60px -40px rgba(20,17,26,.4);
}
.tq-pair .tq-item { position: relative; }
.tq-pair .tq-item + .tq-item::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: var(--rule); z-index: 1; }
.tq-pair .tq-item img, .tq-pair .tq-item:hover img { border: 0; border-radius: 0; box-shadow: none; transform: none; }
@media (max-width: 1024px) and (min-width: 701px) { .tq-row.tq-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tq-pair .tq-item:nth-child(3) { display: grid; } }
@media (max-width: 700px) {
  .tq-row.tq-pair { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: hidden; }
  .tq-pair .tq-item + .tq-item::before { left: 8%; right: 8%; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ---- page testimonials: two separate 3D cards ---- */
.tq-row.tq-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem);
  background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; padding: 6px 4px 18px;
}
.tq-pair .tq-item + .tq-item::before { display: none; }
.tq-pair .tq-item {
  position: relative; border-radius: 20px; overflow: hidden; background: #F7F7F7;
  border: 1px solid rgba(20,17,26,.08);
  transform-style: preserve-3d; will-change: transform;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(20,17,26,.05),
    0 12px 24px -12px rgba(20,17,26,.22),
    0 36px 60px -34px rgba(20,17,26,.45);
  transform: perspective(1200px) rotateX(1.5deg);
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), box-shadow 450ms cubic-bezier(.2,.8,.2,1);
}
.tq-pair .tq-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.4), transparent 45%);
  transition: opacity 300ms ease;
}
.tq-pair .tq-item:hover { box-shadow: 0 2px 4px rgba(20,17,26,.06), 0 22px 40px -16px rgba(20,17,26,.3), 0 50px 80px -40px rgba(20,17,26,.5); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tq-pair .tq-item.is-tilting { transition: transform 90ms linear, box-shadow 300ms ease; }
  .tq-pair .tq-item.is-tilting::after { opacity: 1; }
}
@media (max-width: 700px) {
  .tq-row.tq-pair { grid-template-columns: 1fr; gap: 1.25rem; overflow: visible; }
  .tq-pair .tq-item { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tq-pair .tq-item { transform: none; transition: none; } }

/* ---- page testimonials: landscape cards (photo left, words right) ---- */
.tq-pair .tqc { background: #F7F7F7; }
.tqc-in { margin: 0; display: grid; grid-template-columns: 36% 1fr; height: 100%; min-height: 330px; }
.tqc-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.tqc-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.35rem 1.4rem 1.2rem 1.1rem; min-width: 0; }
.tqc-head { display: grid; gap: .35rem; justify-items: start; }
.tqc-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.tqc-company { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.tqc-name { font-weight: 700; font-size: .9rem; color: var(--plum); line-height: 1.3; }
.tqc-quote { position: relative; margin: 0; padding: 0 0 0 1.3rem; border: 0; font-size: .86rem; line-height: 1.5; color: var(--ink); }
.tqc-quote::before { content: "\201C"; position: absolute; left: -.1rem; top: -.45rem; font-family: Georgia, serif; font-size: 2.2rem; line-height: 1; color: var(--ink); }
.tqc-quote p + p { margin-top: .5rem; }
.tqc-quote strong { font-weight: 700; }
.tqc-brief { margin-top: auto; padding-top: .7rem; border-top: 1px solid rgba(20,17,26,.08); font-size: .84rem; line-height: 1.4; color: var(--damson); }
.tq-row.tq-pair { align-items: stretch; }
@media (max-width: 1100px) and (min-width: 701px) { .tqc-in { grid-template-columns: 1fr; } .tqc-photo { height: 240px; object-position: 50% 15%; } }
@media (max-width: 700px) { .tqc-in { grid-template-columns: 38% 1fr; min-height: 0; } .tqc-body { padding: 1rem .95rem 1rem .75rem; } .tqc-quote { font-size: .82rem; } }
@media (max-width: 440px) { .tqc-in { grid-template-columns: 1fr; } .tqc-photo { height: 230px; } }
/* the generic square-image rule for testimonial graphics must not touch the rebuilt card parts */
.tq-pair .tqc .tqc-photo, .tq-pair .tqc:hover .tqc-photo { aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; transform: none; background: none; object-fit: cover; object-position: 50% 10%; }
.tq-pair .tqc .tqc-logo, .tq-pair .tqc:hover .tqc-logo { aspect-ratio: auto; width: auto; height: 28px; max-width: 140px; border: 0; border-radius: 0; box-shadow: none; transform: none; background: none; object-fit: contain; object-position: left center; }
.tqc-in { grid-template-columns: 32% 1fr; min-height: 0; }
.tqc-body { gap: .55rem; padding: 1.15rem 1.25rem 1rem 1rem; }
.tqc-quote { font-size: .82rem; line-height: 1.45; }
.tqc-quote p + p { margin-top: .4rem; }
.tqc-brief { font-size: .8rem; padding-top: .55rem; }
@media (max-width: 1100px) and (min-width: 701px) { .tqc-in { grid-template-columns: 1fr; } .tq-pair .tqc .tqc-photo { height: 220px; } }
@media (max-width: 700px) { .tqc-in { grid-template-columns: 34% 1fr; } }
@media (max-width: 440px) { .tqc-in { grid-template-columns: 1fr; } .tq-pair .tqc .tqc-photo { height: 210px; object-position: 50% 12%; } }
.tq-pair .tqc .tqc-logo, .tq-pair .tqc:hover .tqc-logo { height: 34px; max-width: 160px; }
@media (max-width: 440px) { .tq-pair .tqc .tqc-photo { height: 250px; object-position: 50% 0%; } }
.tqc-quote ul { margin: .4rem 0 0 1rem; padding: 0; list-style: disc; display: grid; gap: .15rem; }
.tqc-quote ul + p { margin-top: .45rem; }
.tqc-quote li::marker { color: var(--cherry); }

/* ---- homepage testimonials band: dark grey instead of near-black (client request) ---- */
.sec:has(.tm-track) { background: #3A3A3F; }
.sec:has(.tm-track) .meta { color: #C9C7CE; }
.sec:has(.tm-track) .car-btn { border-color: #5E5D65; }
/* brand strip: faster scroll (client request) */
.logo-track { animation-duration: 75s; }

/* ---- testimonial cards on phones and tablets: portrait beside the name, quote full width ---- */
@media (max-width: 1100px) {
  .tqc-in { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "photo head" "quote quote" "brief brief"; column-gap: 1rem; row-gap: .85rem; padding: 1.15rem 1.1rem 1.05rem; }
  .tqc-body { display: contents; }
  .tq-pair .tqc .tqc-photo, .tq-pair .tqc:hover .tqc-photo {
    grid-area: photo; width: 92px; height: 116px; border-radius: 14px; object-fit: cover; object-position: 50% 6%;
    background: #EDEDED; box-shadow: 0 8px 18px -12px rgba(20,17,26,.4);
  }
  .tqc-head { grid-area: head; align-self: center; gap: .45rem; }
  .tqc-quote { grid-area: quote; font-size: .9rem; line-height: 1.55; padding-left: 1.25rem; }
  .tqc-quote::before { top: -.35rem; }
  .tqc-brief { grid-area: brief; margin-top: 0; font-size: .85rem; }
  .tqc-name { font-size: .95rem; }
}
@media (min-width: 701px) and (max-width: 1100px) { .tqc-in { grid-template-columns: 104px 1fr; } .tq-pair .tqc .tqc-photo { width: 104px; height: 130px; } }

/* testimonial cards: no 3D tilt or glare (client request) — flat, with a soft shadow */
.tq-pair .tq-item, .tq-pair .tq-item:hover, .tq-pair .tq-item.is-tilting { transform: none; transition: box-shadow 260ms ease; will-change: auto; }
.tq-pair .tq-item::after { display: none; }
/* small tap target on the Why the name hero link */
.name-hero-cue { padding-block: .6rem; }

/* ---- phones: pin the team row so the name and role sit centred beside the photo ---- */
@media (max-width: 900px) {
  .member { grid-template-rows: auto auto auto; }
  .member img { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .member h3 { grid-row: 1; align-self: end; }
  .member .role { grid-row: 2; align-self: start; }
  .member p:last-child { grid-row: 3; }
}
/* testimonial card header: long names wrap inside the card */
.tqc-head { min-width: 0; }
.tqc-name { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .tqc-in { grid-template-columns: 92px minmax(0, 1fr); } }
@media (min-width: 701px) and (max-width: 1100px) { .tqc-in { grid-template-columns: 104px minmax(0, 1fr); } }
/* homepage case carousel on phones: each card only as tall as its content */
@media (max-width: 560px) {
  .wc-track { align-items: start; }
  .wc { height: auto; }
  .wc-more { margin-top: .4rem; }
}

/* ---- testimonial cards: the same hover as the creatives cards ---- */
.tqc-ph { display: block; overflow: hidden; min-height: 0; }
.tq-pair .tq-item {
  border: 1px solid var(--rule); box-shadow: var(--lift-low);
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.tq-pair .tq-item:hover { border-color: #cfccc9; box-shadow: var(--lift-mid); transform: translateY(-2px); }
.tq-pair .tqc .tqc-photo { transition: transform .5s var(--ease-out, ease); }
.tq-pair .tqc:hover .tqc-photo { transform: scale(1.035); }
.tqc-brief { transition: color .2s ease; }
.tq-pair .tqc:hover .tqc-brief { color: var(--cherry-ink); }
@media (max-width: 1100px) {
  .tqc-ph { grid-area: photo; width: 92px; height: 116px; border-radius: 14px; box-shadow: 0 8px 18px -12px rgba(20,17,26,.4); }
  .tq-pair .tqc .tqc-photo, .tq-pair .tqc:hover .tqc-photo { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}
@media (min-width: 701px) and (max-width: 1100px) { .tqc-ph { width: 104px; height: 130px; } }
@media (prefers-reduced-motion: reduce) { .tq-pair .tq-item, .tq-pair .tq-item:hover, .tq-pair .tqc .tqc-photo, .tq-pair .tqc:hover .tqc-photo { transition: none; transform: none; } }

/* ---- one shared charcoal-grey for both dark homepage bands (testimonials + closing CTA) ---- */
:root { --band: #36363C; --band-2: #414148; --band-rule: #55555D; --band-muted: #C4C2CA; }
.sec:has(.tm-track), .sec.cta-band {
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(237,33,124,.10), transparent 60%),
    radial-gradient(760px 460px at 0% 100%, rgba(102,45,145,.12), transparent 60%),
    var(--band);
}
.sec:has(.tm-track) .meta, .cta-band .hire-lede, .cta-band .cta-steps li, .cta-x-note, .cta-x-proof-h, .cta-band .teaser-proof dd { color: var(--band-muted); }
.sec:has(.tm-track) .car-btn, .cta-x-alt { border-color: var(--band-rule); }
.cta-band .eyebrow { background: rgba(255,255,255,.06); border-color: var(--band-rule); color: var(--band-muted); }
.cta-x-proof { background: rgba(255,255,255,.04); border-color: var(--band-rule); box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); }
.cta-band .teaser-proof { background: var(--band-rule); border-color: var(--band-rule); }
.cta-band .teaser-proof div { background: var(--band-2); }
.cta-band ~ .ftr, body:has(main > .cta-band:last-child) .ftr { border-top-color: var(--band-rule); }

/* ---- charcoal bands: richer brand gradient for a premium feel ---- */
.sec:has(.tm-track), .sec.cta-band {
  position: relative; isolation: isolate;
  background:
    radial-gradient(1100px 560px at 105% -10%, rgba(237,33,124,.30), transparent 58%),
    radial-gradient(900px 540px at -8% 110%, rgba(102,45,145,.38), transparent 60%),
    radial-gradient(700px 380px at 55% 120%, rgba(159,31,99,.16), transparent 70%),
    linear-gradient(160deg, #3E3D45 0%, #34333A 45%, #2C2B32 100%);
}
.sec:has(.tm-track)::before, .sec.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent) top / 100% 1px no-repeat;
}

/* ---- homepage case study cards on phones: equal heights, link pinned to the bottom ---- */
@media (max-width: 560px) {
  .wc-track { align-items: stretch; }
  .wc { height: 100%; display: flex; flex-direction: column; }
  .wc-body { flex: 1; display: flex; flex-direction: column; }
  .wc-more { margin-top: auto; padding-top: .9rem; }
  .wc-logo { height: 28px; width: auto; max-width: 110px; object-fit: contain; object-position: left center; }
}
@media (max-width: 560px) {
  .wc-track { align-items: start; }
  .wc { height: auto; }
}

/* ---- phone menu: animated open and close, staggered links, burger morphs to a cross ---- */
.burger-ico .bl { transform-box: fill-box; transform-origin: center; transition: transform 380ms cubic-bezier(.65,.05,.36,1), opacity 200ms ease; }
@media (max-width: 900px) {
  .hdr-nav, .hdr-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .6rem var(--gut) 1rem; gap: .1rem;
    box-shadow: 0 30px 50px -30px rgba(20,17,26,.35);
    max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 460ms cubic-bezier(.77,0,.18,1), opacity 260ms ease, transform 460ms cubic-bezier(.22,1,.36,1), visibility 0s linear 460ms;
  }
  .hdr-nav.is-open {
    visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 0 0);
    transition: clip-path 520ms cubic-bezier(.77,0,.18,1), opacity 220ms ease, transform 520ms cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .hdr-nav a { padding: .72rem .5rem; font-size: .98rem; }
  .hdr-nav > a, .hdr-nav > .nav-group { opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease; }
  .hdr-nav.is-open > a, .hdr-nav.is-open > .nav-group { opacity: 1; transform: none; transition: opacity 380ms ease, transform 480ms cubic-bezier(.22,1,.36,1); }
  .hdr-nav.is-open > :nth-child(1) { transition-delay: 90ms; }
  .hdr-nav.is-open > :nth-child(2) { transition-delay: 130ms; }
  .hdr-nav.is-open > :nth-child(3) { transition-delay: 170ms; }
  .hdr-nav.is-open > :nth-child(4) { transition-delay: 210ms; }
  .hdr-nav.is-open > :nth-child(5) { transition-delay: 250ms; }
  .hdr-nav.is-open > :nth-child(6) { transition-delay: 290ms; }
  .hdr-nav.is-open > :nth-child(7) { transition-delay: 330ms; }
  /* section links: a cherry bar slides in on the active item and on tap */
  .hdr-nav > a, .hdr-nav .nav-parent { position: relative; border-radius: 10px; transition: background 200ms ease, color 200ms ease; }
  .hdr-nav > a:active, .hdr-nav .nav-parent:active { background: var(--rule-soft); }
  .hdr-nav > a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--rule-soft); }
  .hdr-nav > a[aria-current="page"]::after { display: none; }
  .hdr-nav > a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--cherry); }
  /* accordion: chevron turns, sub-links cascade in */
  .hdr-nav .nav-parent .nav-chev { transition: transform 320ms cubic-bezier(.22,1,.36,1); }
  .hdr-nav .nav-parent[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
  .hdr-nav.is-open .nav-pop { animation: navDrop 360ms cubic-bezier(.22,1,.36,1) both; border-left-color: var(--cherry); transform-origin: top; }
  .hdr-nav.is-open .nav-pop a { animation: navItem 380ms cubic-bezier(.22,1,.36,1) both; }
  .hdr-nav.is-open .nav-pop a:nth-child(2) { animation-delay: 50ms; }
  .hdr-nav.is-open .nav-pop a:nth-child(3) { animation-delay: 100ms; }
  .hdr-nav.is-open .nav-pop a:nth-child(4) { animation-delay: 150ms; }
  .hdr-nav.is-open .nav-pop a:nth-child(5) { animation-delay: 200ms; }
  /* burger to cross */
  #nav-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  #nav-toggle[aria-expanded="true"] .bl-1 { transform: translateY(6px) rotate(45deg); }
  #nav-toggle[aria-expanded="true"] .bl-2 { opacity: 0; transform: scaleX(.2); }
  #nav-toggle[aria-expanded="true"] .bl-3 { transform: translateY(-6px) rotate(-45deg); }
  /* dim the page behind the open menu */
  html.nav-open main, html.nav-open .ftr { transition: filter 300ms ease, opacity 300ms ease; filter: saturate(.7); opacity: .45; }
  main, .ftr { transition: filter 300ms ease, opacity 300ms ease; }
}
@keyframes navDrop { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes navItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hdr-nav, .hdr-nav.is-open, .hdr-nav > a, .hdr-nav > .nav-group, .burger-ico .bl { transition: none !important; }
  .hdr-nav.is-open .nav-pop, .hdr-nav.is-open .nav-pop a { animation: none; }
}

/* ---- homepage carousels (case studies + testimonials): smooth swipe with a soft fade ---- */
.wc-track, .tm-track { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.wc-track > .car-item, .tm-track > .car-item {
  transform-origin: center; will-change: opacity, transform;
  transition: opacity 280ms cubic-bezier(.22,1,.36,1), transform 380ms cubic-bezier(.22,1,.36,1);
}
.wc-track > .car-item { scroll-snap-stop: normal; }
.car .car-btn { transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms ease, opacity 220ms ease; }
.car .car-btn:active:not(:disabled) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .wc-track > .car-item:hover, .tm-track > .car-item:hover { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-track, .tm-track { scroll-behavior: auto; }
  .wc-track > .car-item, .tm-track > .car-item { transition: none; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* homepage case study cards: no 3D tilt; the same gentle hover as the creatives cards */
.wc::after { display: none; }
.wc.is-tilting { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .wc { transition: opacity 280ms cubic-bezier(.22,1,.36,1), transform 380ms cubic-bezier(.22,1,.36,1), translate .25s ease, box-shadow .25s ease, border-color .2s ease; }
  .wc:not(.wc-all):hover { translate: 0 -2px; border-color: #cfccc9; box-shadow: var(--lift-mid); }
  .wc:not(.wc-all):hover .wc-media img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .wc:hover { translate: none; } .wc:hover .wc-media img { transform: none; } }

/* testimonials carousel: breathing room inside the scroll area so card corners and shadows aren't clipped */
.tm-track { padding: 12px 10px 22px; margin: -12px -10px -22px; scroll-padding-inline: 10px; }
@media (max-width: 700px) {
  .tm-track, .wc-track { padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); scroll-padding-inline: var(--gut); }
  .tm-track { grid-auto-columns: calc(100% - 22px); }
}
.founder-li { min-height: 44px; }

/* ---- template card back (hover): a designed detail panel, same words ---- */
@media (hover: hover) and (pointer: fine) {
  .card-back {
    gap: .75rem; padding: 0; overflow: hidden;
    border: 1px solid var(--rule); border-radius: 18px;
    background:
      radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--fam, var(--cherry)) 10%, transparent), transparent 70%),
      var(--paper-pure);
    box-shadow: 0 1px 2px rgba(20,17,26,.05), 0 28px 56px -30px rgba(20,17,26,.45);
  }
  .card-back::before { content: ""; display: block; flex: none; height: 5px; background: var(--fam, var(--cherry)); }
  .card-back-title {
    position: relative; margin: .35rem 1.25rem 0; padding-left: 1.05rem;
    font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
  }
  .card-back-title::before {
    content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%;
    background: var(--fam, var(--cherry)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fam, var(--cherry)) 18%, transparent);
  }
  .card-back-title small { margin-top: .15rem; font-size: .8rem; }
  .card-back-text {
    position: relative; margin: 0 1rem; padding: 1rem 1.05rem 1.6rem;
    background: #F7F6F4; border: 1px solid var(--rule-soft); border-radius: 14px;
    font-size: .86rem; line-height: 1.6; color: var(--ink-muted);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fam, var(--cherry)) 45%, transparent) transparent;
  }
  .card-back-text::-webkit-scrollbar { width: 4px; }
  .card-back-text::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fam, var(--cherry)) 45%, transparent); border-radius: 4px; }
  .card-back-text > p:first-child { color: var(--ink); font-weight: 500; font-size: .92rem; line-height: 1.5; }
  .card-back-text p + p, .card-back-text p + ul, .card-back-text ul + p { margin-top: .7rem; }
  .card-back-text ul { list-style: none; padding-left: 0; margin-top: .55rem; display: grid; gap: .4rem; }
  .card-back-text li { position: relative; padding-left: 1.15rem; }
  .card-back-text li + li { margin-top: 0; }
  .card-back-text li::before {
    content: ""; position: absolute; left: .1rem; top: .58em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--fam, var(--cherry));
  }
  .card-back .card-foot { margin: 0 1.25rem 1.1rem; padding-top: .85rem; border-top: 1px dashed var(--rule); align-items: center; }
  .card-back .card-foot .price { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
  .card-back-link {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border-radius: 999px;
    border: 1px solid var(--rule); text-decoration: none; background: var(--paper-pure);
    transition: border-color .2s ease, background .2s ease;
  }
  .card-back-link:hover { border-color: var(--ink); background: #fff; }
  .card-back .btn-add { background: var(--ink); color: #fff; border-color: var(--ink); }
  .card-back .btn-add:hover { background: var(--cherry-ink); border-color: var(--cherry-ink); }
  .card-back .btn-add.is-done { background: var(--damson); border-color: var(--damson); }
}

/* ---- homepage hero: photos crossfade in place (portrait always first) ---- */
.hero-slides { position: relative; }
.hero-slides .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1000ms cubic-bezier(.4,0,.2,1); }
.hero-slides .hero-slide.hero-slide-first { position: relative; }
.hero-slides .hero-slide.is-on { opacity: 1; }
.hero-slides picture { display: contents; }
@media (prefers-reduced-motion: reduce) { .hero-slides .hero-slide { transition: none; } }

/* =========================================================================
   Homepage gallery: a contact-sheet strip. Every photo keeps its own shape at
   one shared height; the strip bleeds to the right edge, aligned to the shell
   on the left. Click opens the lightbox.
   ========================================================================= */
.gal-sec { --gal-h: clamp(270px, 27vw, 390px); --gal-edge: max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut))); overflow: hidden; }
.gal { position: relative; }
.gal-track {
  display: flex; align-items: flex-start; gap: clamp(.9rem, 1.6vw, 1.35rem);
  list-style: none; margin: 0; padding: 0 var(--gal-edge) 1.2rem;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gal-edge);
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: -2px; }
.gal-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.gal-track.is-dragging .gal-open { pointer-events: none; }
.gal-item { flex: none; width: calc(var(--gal-h) * var(--ar)); scroll-snap-align: start; }

.gal-open {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: 14px;
}
.gal-open:focus-visible { outline: 2px solid var(--cherry-ink); outline-offset: 4px; }
.gal-media {
  position: relative; display: block; height: var(--gal-h); overflow: hidden; border-radius: 14px;
  background: var(--rule-soft); box-shadow: 0 22px 44px -30px rgba(20,17,26,.55);
  isolation: isolate;
}
.gal-media picture, .gal-media img { display: block; width: 100%; height: 100%; }
.gal-media img { object-fit: cover; transition: transform .7s var(--ease-out), filter .5s var(--ease-out); }
.gal-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20,17,26,.06);
  background: linear-gradient(180deg, transparent 55%, rgba(20,17,26,.32));
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.gal-open::after {
  content: ""; position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314111A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 8px 20px -8px rgba(20,17,26,.5);
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gal-open:hover .gal-media img { transform: scale(1.045); }
  .gal-open:hover .gal-media::after, .gal-open:hover::after { opacity: 1; }
  .gal-open:hover::after { transform: none; }
}
.gal-open:focus-visible::after { opacity: 1; transform: none; }

.gal-cap { margin-top: .85rem; max-width: 40ch; font-size: .9rem; line-height: 1.45; color: var(--ink-muted); }
.gal-tag {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .28rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}
.gal-tag b { font-weight: 500; color: var(--cherry-ink); }
.gal-tag b::after { content: ""; display: inline-block; width: 14px; height: 1px; margin-left: .55rem; vertical-align: middle; background: var(--rule); }

.gal-bar { position: relative; height: 2px; margin: .6rem var(--gal-edge) 0; background: var(--rule); border-radius: 2px; overflow: hidden; }
.gal-bar span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--plum), var(--cherry)); transform-origin: left center; transform: scaleX(.06); transition: transform .25s var(--ease-out); }
.gal-sec .car-count { min-width: 6ch; }

@media (max-width: 700px) {
  /* wide shots would crop hard at phone width: every photo shows whole, capped at the screen */
  .gal-sec { --gal-h: min(80vw, 330px); }
  .gal-item { width: min(84vw, calc(var(--gal-h) * var(--ar))); }
  .gal-media { height: auto; aspect-ratio: var(--ar); }
}

/* ---- lightbox ---- */
.gal-lb {
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: transparent; color: #fff; overflow: hidden;
}
.gal-lb::backdrop { background: rgba(16,13,20,.94); backdrop-filter: blur(6px); }
.gal-lb[open] { display: grid; grid-template-rows: auto 1fr; animation: galIn .3s var(--ease-out) both; }
@keyframes galIn { from { opacity: 0; } to { opacity: 1; } }
.gal-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem, 3vw, 2rem); }
.gal-lb-count { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.gal-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; min-height: 0; padding: 0 clamp(1rem, 8vw, 7rem) clamp(1.25rem, 4vh, 2.5rem); }
.gal-lb-img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 190px);
  border-radius: 8px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  opacity: 0; transform: scale(.985); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.gal-lb-img.is-in { opacity: 1; transform: none; }
.gal-lb-cap { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; max-width: 60ch; }
.gal-lb-tag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); }
.gal-lb-text { font-size: .98rem; line-height: 1.45; color: rgba(255,255,255,.88); }
.gal-lb-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s ease;
}
.gal-lb-btn svg { width: 20px; height: 20px; }
.gal-lb-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.gal-lb-btn:active { transform: scale(.94); }
.gal-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gal-lb-nav { position: absolute; top: 50%; margin-top: -24px; }
.gal-lb-nav[data-dir="-1"] { left: clamp(.75rem, 2.5vw, 2rem); }
.gal-lb-nav[data-dir="-1"] svg { transform: scaleX(-1); }
.gal-lb-nav[data-dir="1"] { right: clamp(.75rem, 2.5vw, 2rem); }
@media (max-width: 700px) {
  .gal-lb-fig { padding-inline: .75rem; padding-bottom: 5.5rem; }
  .gal-lb-img { max-height: calc(100dvh - 250px); border-radius: 6px; }
  .gal-lb-nav { top: auto; bottom: 1.25rem; margin-top: 0; }
  .gal-lb-nav[data-dir="-1"] { left: calc(50% - 60px); }
  .gal-lb-nav[data-dir="1"] { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .gal-media img, .gal-open::after, .gal-bar span, .gal-lb-img { transition: none; }
  .gal-open:hover .gal-media img { transform: none; }
  .gal-lb[open] { animation: none; }
}
.co-steps .co-step-t { font-style: normal; } /* step 2's label changes for free-only carts */

/* ---- checkout payments on phones ------------------------------------------------------------
   The payment window is a bottom sheet sized to its content (it was a full-screen page with an
   empty middle); fields inside it line up; the method picker is a compact 2×2 grid. */
.co-secure { align-items: flex-start; }
.co-secure svg { flex: none; margin-top: .2rem; }
.tg-pane .row-2 { grid-template-columns: 1fr 1fr; gap: .8rem; }
.tg-pane .row-2 .field { margin-bottom: 0; }
.tg-pane .row-2 + .tg-hint { margin-top: 1rem; }
.tg .field select { font-size: 1rem; }
.tg-hint .tg-fill { display: inline-block; margin: .15rem .1rem; padding: .18rem .45rem; line-height: 1.4; white-space: nowrap; }

@media (max-width: 560px) {
  .paym { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .paym-opt { flex-direction: column; align-items: flex-start; gap: .55rem; min-height: 0; padding: .8rem .8rem .85rem; }
  .paym-ico { width: 34px; height: 34px; border-radius: 9px; }
  .paym-txt small { line-height: 1.35; }
  .co-block legend.h3 { margin-bottom: .35rem; }

  .tg {
    width: 100vw; max-width: 100vw; height: fit-content; max-height: 92dvh; /* fit-content: auto would stretch a modal dialog top to bottom */
    margin: auto 0 0; border-radius: 18px 18px 0 0;
  }
  .tg[open] { animation: tgUp .28s var(--ease-out) both; }
  .tg-inner { height: auto; max-height: 92dvh; }
  .tg-body { flex: 0 1 auto; padding: 1rem 1rem .25rem; }
  .tg-head { position: relative; align-items: center; padding: 1.35rem 1rem 1rem; border-radius: 18px 18px 0 0; }
  .tg-head::before { /* grab handle, so it reads as a sheet */
    content: ""; position: absolute; top: .5rem; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 4px; background: rgba(255,255,255,.28);
  }
  .tg-head h2 { font-size: 1.1rem; }
  .tg-tabs { margin-bottom: .9rem; }
  .tg-tabs button { font-size: .8rem; min-height: 38px; }
  .tg-outcome { margin-bottom: .4rem; }
  .tg-foot { padding: .75rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
  .tg-note { font-size: .72rem; }
}
@keyframes tgUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tg[open] { animation: none; } }
/* the confirmation takes focus for screen readers when it appears; no focus ring on the whole panel */
#co-done:focus { outline: none; }

/* =========================================================================
   PART 17. Checkout, boxed
   Every part of the page sits in its own card on a softly tinted stage. Cards take the
   brief form's look (gradient hairline edge, rounded fields); the order summary is the
   deep brand panel from the hire page, so the total is the darkest thing on screen.
   ========================================================================= */
.co-sec {
  --co-edge: linear-gradient(135deg, rgba(237,33,124,.5), rgba(159,31,99,.22) 45%, rgba(102,45,145,.5));
  --co-grad: linear-gradient(120deg, var(--cherry-ink) 0%, var(--damson) 55%, var(--plum) 100%);
  background:
    radial-gradient(900px 520px at 100% -5%, rgba(237,33,124,.11), transparent 65%),
    radial-gradient(820px 560px at -10% 100%, rgba(102,45,145,.11), transparent 65%),
    var(--paper);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.co-sec .co-head, .co-sec .co-block, .co-sec .co-empty, .co-sec .rc-card, .co-sec .co-mini {
  border: 1px solid transparent; border-radius: 20px;
  background: linear-gradient(var(--paper-pure), var(--paper-pure)) padding-box, var(--co-edge) border-box;
  box-shadow: 0 1px 2px rgba(20,17,26,.04), 0 24px 48px -30px rgba(102,45,145,.35);
}

/* header card: title left, progress right */
.co-sec .co-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.1rem 2rem;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem);
  background:
    radial-gradient(460px 220px at 100% 0%, rgba(237,33,124,.10), transparent 70%) padding-box,
    radial-gradient(460px 240px at 0% 100%, rgba(102,45,145,.08), transparent 70%) padding-box,
    linear-gradient(var(--paper-pure), var(--paper-pure)) padding-box,
    var(--co-edge) border-box;
}
.co-head-t { display: grid; gap: .35rem; }
.co-sec .co-head .h2 {
  background: var(--co-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; /* keeps descenders inside the clipped gradient */
}
.co-sec .co-steps {
  margin: 0; gap: .25rem; padding: .3rem; border-radius: var(--r-full);
  background: var(--paper); border: 1px solid var(--rule-soft); font-size: .82rem;
}
.co-sec .co-steps li { padding: .38rem .9rem .38rem .4rem; border-radius: var(--r-full); }
.co-sec .co-steps span { width: 24px; height: 24px; border: 1px solid var(--rule); }
.co-sec .co-steps .is-done span, .co-sec .co-steps .is-now span { background: var(--co-grad); border-color: transparent; color: #fff; }
.co-sec .co-steps .is-now { background: var(--paper-pure); box-shadow: 0 1px 2px rgba(20,17,26,.08), 0 6px 16px -10px rgba(102,45,145,.45); }

.co-sec .co-mode { border-radius: 14px; }
.co-sec .co { padding-top: 1.4rem; gap: clamp(1.4rem, 3vw, 2.4rem); }

/* numbered section cards */
.co-sec .co-block { padding: clamp(1.2rem, 2.6vw, 1.75rem); margin: 0 0 1.1rem; }
.co-sec .co-block legend.h3, .co-review-h { display: flex; align-items: center; gap: .7rem; font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; }
.co-review-h { margin: 0 0 1.1rem; }
.co-n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--co-grad); color: #fff; font-family: var(--f-mono); font-size: .76rem; font-weight: 500; letter-spacing: 0;
  box-shadow: 0 6px 14px -6px rgba(208,24,109,.6);
}
.co-sec .co-block > legend + .note { margin: .15rem 0 1.15rem; padding-left: calc(30px + .7rem); }
.co-sec .co-free { padding-left: calc(30px + .7rem); }

/* fields: the brief form's rounded, tinted inputs */
.co-sec .field label:not(.check) { font-size: .8rem; color: var(--ink-muted); margin-bottom: .42rem; }
.co-sec .field input:not([type="checkbox"]) {
  border: 1px solid var(--rule-soft); border-radius: 12px; background: #FBFAF9;
  padding: .8rem 1rem; min-height: 50px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.co-sec .field input:not([type="checkbox"]):hover { border-color: var(--rule); background: #fff; }
.co-sec .field input:not([type="checkbox"]):focus-visible {
  outline: none; background: #fff; border-color: rgba(208,24,109,.55);
  box-shadow: 0 0 0 4px rgba(237,33,124,.12), 0 8px 22px -14px rgba(102,45,145,.45);
}
.co-sec .field input[aria-invalid="true"] { border-color: var(--cherry-ink); box-shadow: 0 0 0 4px rgba(208,24,109,.12); }

/* payment methods: a gradient ring and a filled radio on the chosen one */
.co-sec .paym { gap: .7rem; margin-top: .9rem; }
.co-sec .paym-opt {
  border: 1.5px solid var(--rule-soft); border-radius: 14px; background: #FBFAF9; padding: .8rem 2.6rem .8rem .9rem;
}
.co-sec .paym-opt::after {
  content: ""; position: absolute; top: 50%; right: .95rem; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; border: 1.5px solid var(--rule); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.co-sec .paym-opt:hover { border-color: var(--rule); background: #fff; }
.co-sec .paym-opt:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--co-grad) border-box;
  box-shadow: 0 12px 26px -16px rgba(102,45,145,.6);
}
.co-sec .paym-opt:has(input:checked)::after { border: 5px solid var(--damson); box-shadow: 0 0 0 3px rgba(159,31,99,.14); }
.co-sec .paym-ico { border-radius: 11px; background: var(--rule-soft); }
.co-sec .paym-opt:has(input:checked) .paym-ico { background: var(--co-grad); color: #fff; }
.co-sec .co-secure { margin-top: 1rem; padding: .7rem .85rem; border-radius: 12px; background: var(--paper); color: var(--ink-muted); }

/* review card: terms, errors, the pay button */
.co-sec .co-agree { margin-bottom: 1.1rem; padding: .85rem 1rem; border-radius: 12px; background: var(--paper); }
.co-sec .check input { accent-color: var(--damson); }
.co-sec .co-alert { border-radius: 12px; }
.co-sec .co-pay, .co-sec .co-pay:hover {
  min-height: 58px; border-radius: 14px; border: 0; font-size: 1.05rem;
  background: var(--co-grad); background-size: 160% 100%;
  box-shadow: 0 14px 30px -14px rgba(208,24,109,.7);
  transition: background-position .4s ease, box-shadow .2s ease, transform .2s ease;
}
.co-sec .co-pay { background-position: 0% 50%; }
.co-sec .co-pay:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(102,45,145,.65); }
.co-sec .co-fine { margin-top: .7rem; }

/* order summary: the deep brand panel */
.co-sec .co-summary {
  border: 0; border-radius: 22px; padding: clamp(1.3rem, 2.8vw, 1.9rem); top: 100px; color: #fff; gap: .3rem;
  background:
    radial-gradient(380px 240px at 100% 0%, rgba(237,33,124,.55), transparent 65%),
    radial-gradient(360px 260px at 0% 100%, rgba(102,45,145,.75), transparent 65%),
    linear-gradient(160deg, #2A1233 0%, #1B1022 100%);
  box-shadow: 0 30px 60px -30px rgba(42,18,51,.6);
}
.co-sec .co-summary .h3 { color: #fff; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }
.co-sec .co-summary .h3 small { font-family: var(--f-body); font-size: .8rem; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.62); }
.co-sec .co-summary .co-line { border-bottom-color: rgba(255,255,255,.12); padding: .95rem 0; }
.co-sec .co-summary .co-line img { border-radius: 10px; border-color: rgba(255,255,255,.2); }
.co-sec .co-summary .co-line-t { color: #fff; }
.co-sec .co-summary .co-line-t span { color: rgba(255,255,255,.65); }
.co-sec .co-summary .line-rm { color: rgba(255,255,255,.66); }
.co-sec .co-summary .line-rm:hover { color: #fff; }
.co-sec .co-summary .price { color: #fff; }
.co-sec .co-summary .price.is-free { color: #FFB8D6; }
.co-sec .co-summary .promo { margin-top: 1.1rem; }
.co-sec .co-summary .promo input {
  border-radius: 12px; min-height: 48px; padding: .75rem .95rem; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.co-sec .co-summary .promo input::placeholder { color: rgba(255,255,255,.58); }
.co-sec .co-summary .promo input:focus-visible { outline: none; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 4px rgba(237,33,124,.28); }
.co-sec .co-summary .promo .btn { min-height: 48px; border-radius: 12px; border: 0; background: #fff; color: var(--ink); padding-inline: 1.15rem; }
.co-sec .co-summary .promo .btn:hover { background: #FCE4EF; }
.co-sec .co-summary .promo .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.co-sec .co-summary .promo-msg.is-ok { color: #B9F2D2; }
.co-sec .co-summary .promo-msg.is-bad { color: #FFB8D0; }
.co-sec .co-summary .co-totals { margin-top: 1.1rem; }
.co-sec .co-summary .co-totals > div { color: rgba(255,255,255,.72); }
.co-sec .co-summary .co-totals dd { color: #fff; }
.co-sec .co-summary #co-discount-row dd { color: #FFB8D6; }
.co-sec .co-summary .co-grand { margin-top: .5rem; padding-top: .95rem; border-top: 1px solid rgba(255,255,255,.26); color: #fff; }
.co-sec .co-summary .co-grand dd { font-size: 1.95rem; }
.co-sec .co-assure { margin-top: 1.2rem; padding-top: 1.1rem; gap: .6rem; border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: .84rem; }
.co-sec .co-assure li { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.co-sec .co-assure li::before { display: none; }
.co-sec .co-assure span { min-width: 0; overflow-wrap: anywhere; }
.co-assure svg {
  flex: none; width: 30px; height: 30px; padding: 6.5px; border-radius: 9px; background: rgba(255,255,255,.1);
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.co-sec .co-assure a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.co-sec .co-assure a:hover { text-decoration-color: #fff; }

/* empty cart and receipt get the same card */
.co-sec .co-empty { padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: .5rem; }
.co-sec .receipt-ico { background: var(--co-grad); box-shadow: 0 14px 30px -14px rgba(208,24,109,.7); }
.co-sec .rc-card { padding: clamp(1.2rem, 3vw, 1.7rem); }

@media (max-width: 900px) {
  .co-sec .co { gap: 1.1rem; }
  .co-sec .co-mini summary { min-height: 56px; padding: .6rem 1.1rem; }
  .co-sec .co-mini-body { padding: 0 1.1rem .7rem; }
  .co-sec .co-summary { padding: 1.2rem; }
  /* the collapsible bar above already names the items and the total; keep the panel to promo + totals */
  .co-sec .co-summary > .h3, .co-sec .co-assure { display: none; }
  .co-sec .co-summary .co-totals { margin-top: .9rem; }
}
@media (max-width: 560px) {
  .co-sec .co-head { padding: 1.15rem; border-radius: 18px; }
  .co-sec .co-steps { width: 100%; justify-content: space-between; font-size: .74rem; gap: .1rem; }
  /* one line on a phone: the current step keeps its label, the others show just their number
     (font-size 0 hides the label visually but screen readers still read it) */
  .co-sec .co-steps { flex-wrap: nowrap; }
  .co-sec .co-steps li { padding: .32rem .7rem .32rem .32rem; gap: .4rem; white-space: nowrap; }
  .co-sec .co-steps li:not(.is-now) { font-size: 0; gap: 0; padding: .32rem; }
  .co-sec .co-steps li:not(.is-now) span { font-size: .7rem; }
  .co-sec .co-steps span { width: 24px; height: 24px; }
  .co-sec .co-block { padding: 1.05rem; border-radius: 18px; }
  .co-sec .co-block > legend + .note, .co-sec .co-free { padding-left: 0; }
  .co-sec .paym-opt { padding: .8rem .8rem .85rem; }
  .co-sec .paym-opt::after { top: .85rem; margin-top: 0; right: .8rem; }
}
@media print { .co-sec { background: #fff; } .co-sec .rc-card { box-shadow: none; } }