/* GROW with Lilli · application funnel
   Two surfaces, one ink, one accent used sparingly. Fraunces for the few
   words that carry the page, the system face for everything read quickly.
   No boxes where a hairline will do. Photographs in colour, at size. */

:root {
  --cream: #F6F2ED;
  --paper: #FFFFFF;
  --ink: #141A2B;
  --ink-2: #4A5268;
  --ink-3: #8A90A2;
  --line: rgba(20, 26, 43, .12);
  --line-2: rgba(20, 26, 43, .26);
  --blue: #2A62B9;
  --blue-soft: rgba(42, 98, 185, .10);
  --shadow: 0 24px 60px rgba(20, 26, 43, .12);

  --display: "Boska", "Bodoni 72", "Didot", Georgia, serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --maxw: 1120px;
  --measure: 40rem;
  --gutter: 24px;
  --r: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 72px; }
.hide { display: none !important; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }
.band { padding: clamp(48px, 6.5vw, 96px) 0; }
.band.tight { padding: clamp(36px, 4.5vw, 64px) 0; }
.band.paper { background: var(--paper); }
.band.ink { background: var(--ink); color: #fff; }
/* editorial two-column: a short title column, a long reading column */
.ed { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ed .stick { position: sticky; top: 96px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; }
.h1 { font-size: clamp(2.875rem, 7.4vw, 6.25rem); line-height: .96; letter-spacing: -0.025em; text-wrap: balance; }
.h2 { font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.01em; }
.h1 em, .h2 em, .big em { font-style: italic; font-weight: 400; }
.h1 em { color: var(--blue); }
.lead { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink-2); }
.lead.ink { color: var(--ink); }
.small { font-size: .9375rem; line-height: 1.5; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.eyebrow { font: 500 .9375rem/1.4 var(--text); color: var(--ink-3); letter-spacing: 0; }
p + p { margin-top: 1em; }
strong { font-weight: 600; }
.band.ink .lead, .band.ink .muted { color: rgba(255,255,255,.76); }
.band.ink .faint { color: rgba(255,255,255,.55); }

/* the letter: large, unhurried */
.letter { font-family: var(--display); font-optical-sizing: auto; font-size: clamp(1.25rem, 1.65vw, 1.4375rem); line-height: 1.62; letter-spacing: 0; }
.letter p + p { margin-top: 1.1em; }
.letter em { font-style: italic; color: var(--blue); }
.sign { margin-top: 2.2em; display: flex; align-items: center; gap: 14px; }
.sign img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sign span { font: italic 400 1.5rem/1 var(--display); }
.sign small { display: block; margin-top: 5px; font: 400 .875rem/1.3 var(--text); color: var(--ink-3); font-style: normal; }

/* the biggest words on the page */
.big { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; font-size: clamp(2.25rem, 5.6vw, 4.75rem); line-height: 1.06; letter-spacing: -0.015em; }
.band.ink .big em { color: #9DC0F4; }

/* ---------- floating chrome ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 14px 0; transition: background .3s var(--ease); }
.top.static { position: relative; }
body.scrolled .top { background: rgba(246,242,237,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: linear-gradient(rgba(20,26,43,.06), rgba(20,26,43,0)); }
body.scrolled .top::after { opacity: 1; }
.top-in { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { text-decoration: none; font: 500 1.125rem/1 var(--display); letter-spacing: 0; white-space: nowrap; }
.brand small { font: 400 .8125rem/1 var(--text); color: var(--ink-3); margin-left: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 15px 26px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none;
  font: 500 1.0625rem/1.2 var(--text); letter-spacing: -0.01em;
  transition: background .25s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); background: #0b0f1c; transition: transform 80ms ease-out, background 80ms ease-out; }
.btn .arr { font-weight: 400; transition: transform .3s var(--ease); }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 60px; font-size: 1.125rem; padding: 17px 32px; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.line:active { background: rgba(20,26,43,.06); }
.btn.sm { min-height: 40px; padding: 9px 16px; font-size: .9375rem; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn-note { margin-top: 14px; font-size: .9375rem; color: var(--ink-3); }
.band.ink .btn { background: #fff; color: var(--ink); }
.band.ink .btn:active { background: #e7e2dc; }

/* ---------- video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: #0E1526; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster { position: absolute; inset: 0; cursor: pointer; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,21,38,0) 55%, rgba(14,21,38,.55) 100%); }
.poster-title { position: absolute; left: 4.5%; bottom: 6%; right: 30%; z-index: 1; color: #fff; font: 500 clamp(1rem, 1.9vw, 1.5rem)/1.2 var(--display); letter-spacing: -0.015em; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: clamp(64px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  display: grid; place-items: center; transition: transform .3s var(--ease), background .3s var(--ease);
}
.play svg { width: 32%; margin-left: 6%; fill: #fff; }
.video.pending .poster { cursor: default; }
.video.pending .play { display: none; }
.soon { position: absolute; left: 4.5%; top: 6%; z-index: 1; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); font: 500 .75rem/1 var(--text); letter-spacing: .02em; color: #fff; white-space: nowrap; }

/* ---------- photos ---------- */
figure { margin: 0; }
.ph img { width: 100%; border-radius: var(--r); object-fit: cover; }
.ph figcaption { margin-top: 10px; font-size: .875rem; color: var(--ink-3); }
.ph.r45 img { aspect-ratio: 4 / 5; }
.ph.r34 img { aspect-ratio: 3 / 4; }
.ph.r11 img { aspect-ratio: 1; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding: 104px 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .h1 { max-width: 12ch; }
.hero .lead { max-width: 34rem; margin-top: 28px; }
.hero .video { margin-top: 48px; }
.under { padding: 32px 0 0; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.hero [data-hide-if-no-video] .video { margin-top: clamp(40px, 5vw, 64px); }
.under .btn-note { margin: 0; }
[data-cta-delayed] { transition: opacity .6s var(--ease); }
[data-cta-delayed].is-hidden { opacity: 0; pointer-events: none; }

/* ---------- ticker: credentials that keep moving ---------- */
.ticker { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker-track span { padding: 16px 0; margin-right: 56px; white-space: nowrap; font: 400 1.125rem/1 var(--display); letter-spacing: .01em; color: var(--ink); }
.ticker-track span::before { content: "✦"; margin-right: 56px; color: var(--ink-3); font-size: .75rem; vertical-align: 2px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- numbers as type, not tiles ---------- */
.band.tight .facts { margin-top: 0; border-top: 0; padding-top: 0; }
.brands { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.brands ul { list-style: none; display: flex; gap: 28px; flex-wrap: wrap; }
.brands li { font: 400 clamp(1.375rem, 2.2vw, 1.875rem)/1 var(--display); font-optical-sizing: auto; letter-spacing: .02em; }
.creds { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.creds li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.creds a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; }
.facts b { display: block; font: 400 clamp(2.25rem, 3.6vw, 3.25rem)/1 var(--display); letter-spacing: -0.03em; }
.facts span { display: block; margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); max-width: 22ch; }

/* ---------- proof: a statement, then a gallery that scrolls sideways ---------- */
.proof-head { max-width: 30ch; }
.gallery { margin-top: clamp(32px, 5vw, 56px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 24px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery::-webkit-scrollbar { display: none; }
.tm { scroll-snap-align: start; flex: 0 0 min(340px, 82vw); background: var(--paper); border-radius: 20px; padding: 22px 20px; }
.tm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tm-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--cream); }
.tm-av img { width: 100%; height: 100%; object-fit: cover; }
.tm-head b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.tm-head small { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: 1px; }
.tm-msg { background: #EEF0F4; border-radius: 18px 18px 18px 5px; padding: 11px 14px; margin-bottom: 7px; font-size: .9375rem; line-height: 1.45; }
.tm-msg:last-child { margin-bottom: 0; }
.tm-feat { background: var(--ink); color: #fff; }
.tm-feat .tm-head small { color: rgba(255,255,255,.6); }
.tm-feat .tm-msg { background: rgba(255,255,255,.1); }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 16px; }
.tm-stats strong { display: block; font: 400 1.75rem/1.05 var(--display); }
.tm-stats span { display: block; font-size: .8125rem; color: rgba(255,255,255,.62); margin-top: 5px; line-height: 1.35; }
.gallery-hint { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-3); }

/* ---------- plain lists with hairlines ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.rows p { margin-top: 8px; color: var(--ink-2); max-width: var(--measure); }
.rows.num li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.rows.num li i { font: 400 .9375rem/1.9 var(--text); font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plain { list-style: none; border-top: 1px solid var(--line); }
.plain li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }
.plain.no li { color: var(--ink-2); }
.aside { margin-top: 28px; font: italic 400 clamp(1.25rem, 2vw, 1.5625rem)/1.4 var(--display); color: var(--ink); max-width: 36ch; }

/* ---------- the order: three columns of type ---------- */
.order { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); padding-top: 32px; }
.order b { display: block; font: 400 clamp(3rem, 6vw, 5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--blue); }
.order h3 { margin-top: 18px; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.12; letter-spacing: -0.02em; }
.order small { display: block; margin-top: 6px; font-size: .875rem; color: var(--ink-3); }
.order p { margin-top: 14px; color: var(--ink-2); font-size: 1rem; }

/* ---------- then / now ---------- */
.thennow { border-top: 1px solid var(--line); }
.thennow > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.thennow small { font-size: .875rem; color: var(--ink-3); }
.thennow p { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; letter-spacing: -0.01em; }
.thennow .no p { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- category / brand ---------- */
.pairs { border-top: 1px solid var(--line); }
.pairs > div { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pairs p { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; letter-spacing: -0.01em; }
.pairs .cat { color: var(--ink-3); }
.pairs em { color: var(--blue); }

/* ---------- pull quote ---------- */
.pull { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.pull img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pull p { font-family: var(--display); font-size: clamp(1.1875rem, 1.8vw, 1.5rem); line-height: 1.45; }
.pull small { display: block; margin-top: 10px; font: 400 .875rem/1.3 var(--text); color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; font: 500 1.125rem/1.35 var(--text); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.5rem/1 var(--text); color: var(--ink-3); transition: transform .35s var(--ease); flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 40px 22px 0; color: var(--ink-2); }
.faq details[open] .a { animation: qin .4s var(--ease) both; }

/* ---------- FAQ videos ---------- */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vcard { text-align: left; padding: 0; width: 100%; transition: transform .35s var(--ease); -webkit-tap-highlight-color: transparent; }
.vcard:active { transform: scale(.985); }
.vcard .thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink) center/cover no-repeat; overflow: hidden; border-radius: 16px; }
.vcard .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,43,.05), rgba(20,26,43,.3)); }
.vcard.live .thumb::after { display: none; }
.vcard .thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.vcard .n { position: absolute; top: 12px; left: 14px; z-index: 1; color: rgba(255,255,255,.7); font: 500 .75rem/1 var(--text); letter-spacing: .04em; }
.vcard .play { width: 48px; }
.vcard .body { display: block; padding: 12px 2px 0; }
.vcard .q { display: block; font: 500 1rem/1.3 var(--text); letter-spacing: -0.01em; }
.vcard .sub { display: block; margin-top: 3px; font-size: .8125rem; color: var(--ink-3); }

/* ---------- CTA row between sections ---------- */
.cta-row { margin-top: clamp(28px, 4vw, 40px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.cta-row p { font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.015em; max-width: 30ch; }

/* ---------- forms ---------- */
.field label { display: block; margin-bottom: 8px; font-size: .9375rem; color: var(--ink-2); }
.input, .textarea {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-2);
  font: 400 1.0625rem/1.4 var(--text); -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { min-height: 150px; padding: 14px 16px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.input.err, .textarea.err { border-color: #C63D3D; transition-duration: 0s; }
.form-err { min-height: 20px; font-size: .875rem; color: #B83232; }

/* ---------- application ---------- */
.apply-box { position: relative; max-width: 720px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--paper); }
.band.paper .apply-box { background: var(--cream); }
.app-bar { height: 3px; background: var(--line); border-radius: 99px; margin-bottom: 28px; overflow: hidden; }
.app-bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 99px; transition: width .6s var(--ease); }
.app-back { margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; color: var(--ink-2); padding-right: 12px; -webkit-tap-highlight-color: transparent; }
.app-back:active { color: var(--ink); }
.q { width: 100%; display: none; }
.q:focus { outline: none; }
.q.active { display: block; animation: qin .4s var(--ease) both; }
.q.back.active { animation-name: qback; }
@keyframes qin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes qback { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.q-num { font-size: .8125rem; color: var(--ink-3); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.q-title { font: 500 clamp(1.5rem, 2.8vw, 2.125rem)/1.12 var(--display); letter-spacing: -0.02em; }
.q-help { margin-top: 10px; color: var(--ink-2); font-size: 1rem; }
.q-body { margin-top: 24px; display: grid; gap: 10px; }
.q-body .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 54px; padding: 12px 16px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 1rem; line-height: 1.35; transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.band.paper .opt { background: var(--paper); }
.opt:not([aria-checked="true"]):active { background: var(--cream); transition-duration: 0s; }
.opt .key { flex: 0 0 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: .75rem; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }
.opt .tick { margin-left: auto; width: 18px; height: 18px; opacity: 0; flex: 0 0 18px; }
.opt[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.opt[aria-checked="true"] .key { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.opt[aria-checked="true"] .tick { opacity: 1; }
.q-actions { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.q-actions .btn { min-height: 52px; padding: 13px 24px; font-size: 1rem; width: auto; }
.hint { font-size: .8125rem; color: var(--ink-3); }
.hint kbd { font: 500 .75rem var(--text); padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.q .form-err { margin-top: 12px; }
.note-card { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--blue-soft); font-size: .9375rem; display: none; }
.note-card.show { display: block; }
.intro-who { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.intro-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.intro-who span { font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.intro-who b { display: block; color: var(--ink); font-weight: 600; }
.sending { text-align: center; padding: 20px 0; }
.spinner { width: 34px; height: 34px; margin: 0 auto 24px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ps { max-width: 720px; margin: 28px auto 0; font: italic 400 1.1875rem/1.5 var(--display); color: var(--ink-2); text-align: center; }

/* ---------- calendar ---------- */
.cal { margin-top: 24px; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cal-head h3 { font-size: 1.5rem; }
.tz { font-size: .875rem; color: var(--ink-3); }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 -2px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: 0 0 auto; width: 72px; padding: 12px 0; border-radius: 14px; text-align: center; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--paper); }
.day, .slot { -webkit-tap-highlight-color: transparent; transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
.day:not([aria-pressed="true"]):active, .slot:not([aria-pressed="true"]):active { background: var(--cream); transition-duration: 0s; }
.day small { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.day b { display: block; font: 400 1.625rem/1 var(--display); margin: 8px 0 6px; }
.day span { display: block; font-size: .75rem; color: var(--ink-2); }
.day[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.day[aria-pressed="true"] small, .day[aria-pressed="true"] span { color: rgba(255,255,255,.65); }
.slots-label { margin: 16px 0 12px; font-size: .875rem; color: var(--ink-3); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { min-height: 50px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--paper); font-size: 1rem; font-variant-numeric: tabular-nums; }
.slot[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.confirm-row { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.picked { font-size: 1rem; color: var(--ink-2); min-height: 24px; }
.picked b { color: var(--ink); }
.demo-note { margin-top: 16px; font-size: .75rem; color: var(--ink-3); }
.cal-embed { display: block; width: 100%; min-height: 700px; border: 0; background: transparent; }
.holds-embed { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.holds-embed .cal { margin-top: 8px; }

/* ---------- sticky mobile CTA (a material at the bottom edge) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246,242,237,.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.sticky-cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none; background: linear-gradient(to top, rgba(246,242,237,.9), rgba(246,242,237,0)); }
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { min-height: 52px; font-size: 1rem; }

/* ---------- confirmed page ---------- */
.topbar { background: var(--ink); color: #fff; text-align: center; padding: 11px 20px; font-size: .875rem; font-weight: 500; }
.topbar span { font-weight: 400; opacity: .75; }
.conf-head { padding: clamp(40px, 6vw, 72px) 0 0; }
.conf-head .h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); max-width: 16ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 1rem; color: var(--ink-2); }
.chips b { color: var(--ink); font-weight: 500; }
.todo-list { margin-top: clamp(40px, 6vw, 72px); }
.todo { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.todo .n { display: block; font: 400 clamp(2.5rem, 5vw, 4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ink-3); }
.todo h2 { margin-top: 14px; font-size: clamp(1.625rem, 2.8vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.todo .lead { margin-top: 12px; font-size: 1.0625rem; }
.todo .video { box-shadow: none; }
.cals { display: flex; flex-wrap: wrap; gap: 12px; }
.calbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); font-size: .9375rem; font-weight: 500; transition: transform .3s var(--ease), box-shadow .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.calbtn svg { width: 22px; height: 22px; }
.calbtn:active { transform: scale(.97); }
.three { list-style: none; border-top: 1px solid var(--line); margin-top: 24px; }
.three li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.three b { display: block; font: 500 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.three p { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }
.about-link { display: inline-block; margin-top: 16px; font-weight: 500; color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(42,98,185,.4); }
.minor { margin-top: 28px; font-size: .9375rem; color: var(--ink-2); }
.minor a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(42,98,185,.4); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--ink-2); font-size: .875rem; }
.foot .row { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; gap: 22px; }
.foot nav a { text-decoration: none; }
.foot .legal { margin-top: 20px; max-width: 70ch; font-size: .8125rem; line-height: 1.55; color: var(--ink-3); }
.foot .legal p + p { margin-top: 6px; }

/* ---------- reveals: a short rise, from where it already is ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hover only for real pointers ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #222a40; }
  .btn.line:hover { background: rgba(20,26,43,.05); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn:hover .arr { transform: translateX(3px); }
  .band.ink .btn:hover { background: #ebe6e0; }
  .poster:hover .play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,.3); }
  .vcard:hover { transform: translateY(-2px); }
  .vcard:hover .play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,.3); }
  .calbtn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .foot nav a:hover, .app-back:hover { color: var(--ink); }
  .opt:hover, .day:hover, .slot:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .opt[aria-checked="true"]:hover, .day[aria-pressed="true"]:hover, .slot[aria-pressed="true"]:hover { box-shadow: none; }
}

/* ---------- responsive ---------- */
@media (min-width: 721px) {
  .days { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; padding: 2px 0 8px; margin: 0; }
  .day { width: auto; }
}
@media (max-width: 980px) {
  .ed, .todo { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero .h1 { max-width: 14ch; }
  .hero-photo { max-width: 520px; }
  .ed .stick { position: static; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .order { grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; }
  .order > div { padding: 26px 0; border-top: 1px solid var(--line); }
  .vgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --r: 16px; }
  body { font-size: 1rem; }
  .hero { padding-top: 96px; }
  .hero .h1 { font-size: 2.6rem; max-width: none; }
  .hero .lead { font-size: 1.125rem; margin-top: 20px; }
  .hero .video { margin: 32px calc(-1 * var(--gutter) + 8px) 0; }
  .under { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero .h1 { max-width: none; }
  .hero-photo img { border-radius: 18px; }
  .brands { gap: 14px 22px; }
  .btn { width: 100%; }
  .btn.inline, .btn.sm, .calbtn { width: auto; }
  .sticky-cta { display: block; }
  .facts { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .facts b { font-size: 1.9rem; white-space: nowrap; }
  .ticker-track span { font-size: 1rem; margin-right: 36px; }
  .ticker-track span::before { margin-right: 36px; }
  .duo { gap: 8px; }
  .vgrid { grid-template-columns: 1fr; }
  .faq .a { padding-right: 0; }
  .q-body .row2 { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .hint { display: none; }
  .q-actions .btn { width: 100%; }
  .apply-box { padding: 22px 16px; margin: 0 -4px; border-radius: 18px; }
  .cta-row .btn { width: 100%; }
  .foot .row { flex-direction: column; align-items: flex-start; }
  .poster img { object-position: 50% 62%; }
  .poster-title { display: none; }
  .rows.num li { grid-template-columns: 40px 1fr; }
  .thennow > div { grid-template-columns: 56px 1fr; }
  .pairs > div { grid-template-columns: 1fr; gap: 6px; }
  .days { scroll-snap-type: x proximity; padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .day { scroll-snap-align: start; }
  .hide-sm { display: none; }
  .brand small { display: none; }
}
@media (hover: none) { .hint { display: none; } }

/* ---------- reduced motion / transparency / contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; }
  .q.active { animation: qfade .25s ease both !important; }
  .spinner { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
  .reveal { opacity: 1; transform: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; width: auto; flex-wrap: wrap; }
  .ticker-track span[aria-hidden] { display: none; }
  .sticky-cta { transform: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s !important; }
  .sticky-cta.is-visible { opacity: 1; visibility: visible; transition: opacity .25s ease !important; }
}
@keyframes qfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) {
  .sticky-cta, body.scrolled .top { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .play, .soon { background: rgba(255,255,255,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .play svg { fill: var(--ink); }
  .soon { color: var(--ink); }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(20,26,43,.4); --line-2: rgba(20,26,43,.7); --ink-2: #2A3148; --ink-3: #4A5268; }
}

/* =========================================================
   Finish: the hero arrives, proof sits on the photograph,
   a photo strip breathes between the method and the offer,
   and the gallery can be grabbed.
   ========================================================= */
.hero-photo { position: relative; }
.hero-proof {
  position: absolute; left: -8%; bottom: 7%; width: min(300px, 78%);
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px 15px; border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px rgba(20,26,43,.16), inset 0 0 0 1px rgba(255,255,255,.6);
}
.hero-proof .tm-av { width: 36px; height: 36px; flex: none; }
.hero-proof b { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 3px; }
.hero-proof p { font-size: .875rem; line-height: 1.4; color: var(--ink); }

/* the hero arrives: a short rise, staggered, once */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .22s; }
.hero-copy > :nth-child(4) { animation-delay: .32s; }
.hero-photo img { animation: settle 1.1s var(--ease) both; }
.hero-proof { animation: rise .8s var(--ease) .7s both; }

/* the strip */
.strip { padding: clamp(40px, 5vw, 64px) 0 0; }
.strip-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 10px; }
.strip-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.strip-photos img:nth-child(2) { object-position: 50% 70%; }
.strip-line { padding-top: clamp(28px, 4vw, 44px); }
.strip-line .big { max-width: 24ch; font-size: clamp(2rem, 4.6vw, 3.75rem); }

/* the gallery can be grabbed with a mouse, not only scrolled */
.gallery { cursor: grab; }
.gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.gallery.is-dragging .tm { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .tm { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .tm:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20,26,43,.08); }
}

@media (max-width: 980px) {
  .hero-proof { left: 4%; }
  .strip-photos { grid-template-columns: 1fr 1fr; }
  .strip-photos img:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .hero-proof { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .strip-photos { gap: 6px; padding: 0 6px; }
  .strip-photos img { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-photo img, .hero-proof { animation: none; }
}

/* who's inside, under the first button */
.who-in { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .9375rem; color: var(--ink-2); }
.stack { display: inline-flex; flex: none; }
.stack img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream); margin-left: -8px; }
.stack img:first-child { margin-left: 0; }
.apply-who { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: .9375rem; color: var(--ink-2); }
.apply-who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.apply-who b { color: var(--ink); font-weight: 600; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .9375rem; text-decoration: none; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--blue); } }
.hero-copy > :nth-child(5) { animation: rise .8s var(--ease) .42s both; }

/* ---------- Lilli's revisions, 12 Oct ---------- */
.hero-lead p + p { margin-top: .8em; }
.hero .hero-lead { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); max-width: 34rem; margin-top: 24px; }

/* proof: a wall with the short messages tucked under the long ones, no sideways scroll */
.wall { margin-top: clamp(28px, 4vw, 40px); columns: 3; column-gap: 14px; }
.wall .tm { break-inside: avoid; margin: 0 0 14px; flex: none; width: auto; }
.story-photo { margin: 2em 0; max-width: 520px; }

/* for you / not for you, as two cards */
.fit { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.fit-card { padding: clamp(26px, 4vw, 48px) clamp(24px, 5vw, 64px); border-radius: 40px; }
.fit-card.yes, .band.paper .fit-card.yes { background: #E3ECF9; box-shadow: none; }
.fit-card.no, .band.paper .fit-card.no { background: #F3DCE6; box-shadow: none; }
.fit-card .h3 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.1; color: var(--blue); }
.fit-card ul { list-style: none; margin-top: 22px; }
.fit-card li { position: relative; padding: 10px 0 10px 50px; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; color: var(--ink); }
.fit-card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 36px; height: 20px; border-radius: 999px; background: var(--blue); }
.fit-card li::after { content: ""; position: absolute; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.fit-card.yes li::after { left: 19px; }
.fit-card.no li::after { left: 3px; }

/* instagram, after the application */
.ig { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.ig-links { display: flex; gap: 12px; flex-wrap: wrap; }
.rows h3 small { font-size: .8125rem; font-family: var(--text); letter-spacing: 0; }

@media (max-width: 980px) { .wall { columns: 2; } }
@media (max-width: 720px) {
  .wall { columns: 1; }
  .wall .tm:nth-child(n+7) { display: none; }
  .ig-links .btn { width: 100%; }
}

.is-intro .lead { margin-top: 14px; }
.is-intro .q-actions { margin-top: 28px; }

/* =========================================================
   The application: one question at a time, nothing else on screen,
   every press answered on the way down, a phone treats it like a sheet.
   ========================================================= */
.apply-box { max-width: 680px; padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 44px) clamp(28px, 4vw, 44px); }
.app-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 14px; }
.app-back { margin: 0; padding: 6px 10px 6px 4px; border-radius: 999px; gap: 4px; font-size: .9375rem; color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease); }
.app-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-back:active { background: rgba(20,26,43,.06); color: var(--ink); transition-duration: 0s; }
.app-count { font-size: .875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.app-bar { margin-bottom: 32px; }
.q-title { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.q-help { font-size: 1.0625rem; }
.input, .textarea { min-height: 58px; font-size: 1.125rem; }
.opt { min-height: 58px; font-size: 1.0625rem; transform: translateZ(0); transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); }
.opt:active { transform: scale(.985); transition: transform 60ms ease-out; }
.opt[aria-checked="true"] { transform: none; }
.q-actions .btn { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.q.active { animation: qin .36s var(--ease) both; }
.q.back.active { animation-name: qback; }
.apply-who { margin-bottom: 18px; }
@media (hover: hover) and (pointer: fine) { .app-back:hover { background: rgba(20,26,43,.05); color: var(--ink); } }
@media (max-width: 720px) {
  /* on a phone the form is the page: no card, full width, bigger targets */
  main .apply-box { background: transparent; padding: 8px 0 0; margin: 0; border-radius: 0; box-shadow: none; }
  .apply-box .opt, .apply-box .input, .apply-box .textarea { background: var(--paper); }
  .app-bar { margin-bottom: 26px; }
  .q-title { font-size: 1.75rem; }
}

/* =========================================================
   Rhythm. One scale, used everywhere: 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   A section breathes 96 on a desktop and 40 on a phone; a title sits 16
   above its lead; a lead sits 32 above whatever it introduces.
   ========================================================= */
:root { --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; }
.band { padding: clamp(40px, 7vw, var(--s9)) 0; }
.band.tight { padding: clamp(32px, 5vw, var(--s8)) 0; }
.hero { padding-top: clamp(88px, 10vw, 112px); }
.hero .eyebrow { margin-bottom: var(--s5); }
.hero .hero-lead { margin-top: var(--s5); }
.under { padding-top: var(--s6); }
.btn-note { margin-top: var(--s4); }
.who-in { margin-top: var(--s5); }
.ticker { margin-top: clamp(var(--s6), 4vw, var(--s7)); }

.h1 + .lead, .h2 + .lead, .h3 + .lead, .h2 + .letter { margin-top: var(--s4); }
.ed .stick .lead + .creds { margin-top: var(--s6); }
.wall, .order, .vgrid, .academy-photo { margin-top: clamp(var(--s6), 4vw, var(--s7)); }
.after { margin-top: clamp(var(--s7), 6vw, var(--s8)); }
.cta-row { margin-top: clamp(var(--s6), 4vw, var(--s7)); padding-top: var(--s5); }
.strip-line { padding-top: clamp(var(--s6), 4vw, var(--s7)); }
.strip-line .lead { margin-top: var(--s4); }
.story-photo, .duo { margin: var(--s6) 0; }
.letter p + p { margin-top: 1em; }
.rows li { padding: 20px 0; }
.rows p { margin-top: var(--s2); }
.pull { margin-top: var(--s6); padding-top: var(--s5); }
.sign { margin-top: var(--s6); }
.fit-card ul { margin-top: var(--s4); }
.facts { gap: var(--s6) var(--s5); padding-top: 0; border-top: 0; }
.band.ink .eyebrow { margin-bottom: var(--s5); }

/* the closing invitation */
.measure.center { margin: 0 auto; text-align: center; }
.cta-line { margin-top: var(--s6); }
.apply-who.centered { justify-content: center; margin: var(--s5) 0 0; }
.ps { margin-top: var(--s5); }

/* the application */
.apply-who { margin-bottom: var(--s5); }
.app-top { margin-bottom: var(--s3); }
.app-bar { margin-bottom: var(--s6); }
.q-help { margin-top: var(--s3); }
.q-body { margin-top: var(--s5); gap: var(--s3); }
.q-actions { margin-top: var(--s5); }

@media (max-width: 720px) {
  .band { padding: 40px 0; }
  .band.tight { padding: 32px 0; }
  .hero .eyebrow { margin-bottom: var(--s4); }
  .hero .hero-lead { margin-top: var(--s4); }
  .under { padding-top: var(--s5); }
  .wall, .order, .vgrid, .academy-photo { margin-top: var(--s5); }
  .after { margin-top: var(--s7); }
  .rows li { padding: 16px 0; }
  .order > div { padding: 22px 0; }
  .facts { gap: var(--s5) var(--s4); }
  .story-photo, .duo { margin: var(--s5) 0; }
  .app-bar { margin-bottom: var(--s5); }
}

/* hero headline: smaller, two lines */
.hero .h1 { font-size: clamp(2.25rem, 4.3vw, 3.75rem); line-height: 1.04; max-width: none; text-wrap: initial; }
.hero .h1 em { display: block; }
@media (max-width: 720px) { .hero .h1 { font-size: clamp(1.75rem, 7.6vw, 2.25rem); } }

/* strip: three photos on every screen, smaller line */
.strip-photos { grid-template-columns: 1fr 1fr 1fr; }
.strip-photos img:nth-child(2) { object-position: 50% 50%; }
.strip-photos img:nth-child(3) { display: block; }
.strip-line .big { max-width: 30ch; font-size: clamp(1.625rem, 2.9vw, 2.5rem); line-height: 1.15; }

/* FAQ heading on one line */
.h2.one-line { max-width: none; }
@media (min-width: 721px) { .h2.one-line { white-space: nowrap; } }

/* shop cards (same look as lilliweb) */
.shop .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(28px, 4vw, 48px); }
.prod { display: flex; flex-direction: column; background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.prod-img { display: block; background: var(--cream); border-bottom: 1px solid var(--line); }
.prod-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.prod-body { padding: 24px 24px 0; flex: 1; }
.prod-type { font: 500 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.prod-body h3 { margin-top: 12px; font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.15; }
.prod-body p:last-child { margin-top: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px; }
.price { font: 400 1.75rem/1 var(--display); }
.price s { font-size: 1rem; color: var(--ink-3); margin-left: 4px; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.blue:hover { background: #1F4F9A; }
@media (max-width: 980px) { .shop .products { grid-template-columns: 1fr; max-width: 560px; } }

/* Instagram feed (same look as lilliweb) */
.ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.ig-kicker { font: 500 .875rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.ig-handle em { color: var(--blue); }
.ig-head .lead { margin-top: 16px; }
.ig-head .ig-links { display: flex; gap: 12px; flex-wrap: wrap; }
.ig-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 8px; }
.ig-grid { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: clamp(28px, 4vw, 48px); }
.ig-grid a { position: relative; display: block; overflow: hidden; }
.ig-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s var(--ease); }
.ig-grid a:hover img { transform: scale(1.04); }
.ig-grid a.reel::after { content: ""; position: absolute; top: 12px; right: 12px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
@media (max-width: 980px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ig-grid { gap: 4px; } .ig-head .ig-links { width: 100%; } .ig-head .ig-links .btn { flex: 1 1 100%; } }
.ig-head > div:first-child { flex: 1 1 360px; min-width: 0; }

/* one size for every intro paragraph, same as the hero text */
.lead, .hero .lead { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); }

/* story photo smaller */
.story-photo { max-width: 360px; }
/* strip: smaller photos inside the page width, trimmed at the top; text across the full width */
.strip-photos { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.strip-photos img { aspect-ratio: 4 / 4.6; object-position: 50% 75%; }
.strip-line .big, .strip-line .lead { max-width: none; }
/* Academy headline accent in blue */
.h2 em.blue { color: var(--blue); }

/* tighter gap between the results CTA and the story */
#results { padding-bottom: clamp(28px, 3.5vw, 48px); }
#story { padding-top: clamp(36px, 4.5vw, 64px); }