/* ==========================================================================
   SERVICES — her services page, told in Notion
   The words are her page's, in its order; what changed is how it reads:
   the pain points are a to-do list you tick (and take with you to the
   booking), the services are pages that stack as you read, the principles
   have a table of contents that follows you, How It Works is a timeline
   whose statuses move along, and the questions are toggles you can search.
   One call is never more than a click away. (Built on notion.css.)
   ========================================================================== */
.sv { position: relative; z-index: 1; overflow-x: clip; }
.sv-h { font: 500 clamp(2rem, 4.2vw, 3.4rem)/1.02 var(--f-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.sv-sub { margin-top: 14px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-3); }

/* --- 1. hero ---------------------------------------------------------------------- */
.sv-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 5vw, 72px); min-height: min(100svh, 860px); padding: clamp(110px, 12vw, 140px) 0 clamp(40px, 6vw, 72px); }
.sv-avail { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--sheet); box-shadow: var(--sh-block); font-size: 14px; font-weight: 600; color: var(--ink); }
.sv-avail i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #E03E3E; }
.sv-avail i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #E03E3E; animation: nav-live 2.2s ease-out infinite; }
.sv-hero h1 { margin-top: 22px; font: 500 clamp(2.7rem, 6.4vw, 5.6rem)/.98 var(--f-display); letter-spacing: -.035em; color: var(--ink); }
/* "For You…" is highlighted, the way she would in Notion; "Against" is set in Notion red */
.sv-hero .for { background: linear-gradient(var(--mark), var(--mark)) 0 86%/0% 62% no-repeat; padding: 0 .04em; transition: background-size 1.1s var(--e-out) .5s; }
.sv-hero h1.in .for { background-size: 100% 62%; }
.sv-hero .against { color: #C4554D; font-style: italic; font-weight: 400; }
.sv-lede { margin-top: 22px; max-width: 54ch; font-size: clamp(16px, 1.35vw, 18.5px); color: var(--ink-3); }
.sv-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.sv-go { height: 54px; padding: 0 22px 0 16px; font-size: 16px; }
.sv-mail { font-size: 15px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color .2s; }
.sv-mail:hover { color: var(--ink); }
/* the call's properties */
.sv-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.sv-facts > div { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.sv-facts dt { color: var(--ink-4); }
.sv-facts dd { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.sv-facts .nf { background: var(--t-green-bg); box-shadow: none; }
.sv-facts .nf dt { color: var(--t-green); opacity: .75; }
.sv-facts .nf dd { color: var(--t-green); }
.sv-facts .nf i { width: 7px; height: 7px; border-radius: 50%; background: #34C759; animation: live-dot 2s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .35; } }
/* her portrait (whole, nothing over her), who she is just under its bottom edge, and the Notion cube.
   The photo carries its own cube at her right shoulder, so the floating one sits at the opposite,
   top-left corner: two cubes on one diagonal, never side by side */
.hero-me { position: relative; justify-self: center; width: min(100%, 476px); }
.me-card { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 50% 110%, var(--t-yellow-bg) 0 55%, transparent 56%), var(--sheet); box-shadow: var(--sh-lift); }
.me-card img { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; transform: translateX(-50%); }
.me-cube { position: absolute; left: -22px; top: 9%; z-index: 1; width: 62px; height: 62px; filter: drop-shadow(0 8px 14px rgba(25, 25, 24, .22)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.me-id { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; width: 88%; margin: -20px auto 0; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); }
.mi-badge { width: 30px; height: auto; filter: drop-shadow(0 2px 4px rgba(25, 25, 24, .15)); }
.mi-t { display: grid; gap: 2px; }
.mi-t b { font-size: 15px; color: var(--ink); }
.mi-t small { font-size: 12.5px; color: var(--ink-3); }
.mi-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.mi-tags .tag { font-size: 12px; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .35s, transform .5s var(--e-spring); transition-delay: calc(.25s + var(--i) * .15s); }
.me-id.in .mi-tags .tag { opacity: 1; transform: none; }

/* --- 2. does any of this sound familiar: a to-do list ---------------------------- */
.sv-fam { padding-top: clamp(40px, 6vw, 80px); }
.fam-page { max-width: 980px; margin-inline: auto; padding: clamp(24px, 4vw, 52px); border-radius: 22px; background: var(--sheet); box-shadow: var(--sh-lift); }
.fam-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.fam-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-4); }
.fam { display: grid; gap: 2px; margin-top: 24px; }
.fam-i { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 8px; text-align: left; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5; color: var(--ink-2); transition: background-color .2s, color .3s; }
.fam-i:hover { background: var(--hover); }
.fam-i .chk { margin-top: 3px; transition: background-color .2s, border-color .2s, transform .35s var(--e-spring); }
.fam-i:active .chk { transform: scale(.85); }
.fam-i b { font-weight: 650; color: var(--ink); }
.fam-i[aria-checked="true"] { background: rgba(35, 131, 226, .06); }
.fam-i[aria-checked="true"] .chk { background: var(--focus); border-color: var(--focus); }
.fam-i[aria-checked="true"] .chk::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); animation: tickm .3s var(--e-spring); }
.fam-i[aria-checked="true"] b { background: linear-gradient(var(--mark), var(--mark)) 0 88%/100% 60% no-repeat; }
/* the apps a workflow is spread across: tick it (or point at it) and they fold into one Notion */
.apps { position: relative; display: inline-flex; vertical-align: -4px; gap: 2px; margin: 0 2px; }
.apps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; transition: transform .55s var(--e-spring), opacity .3s; }
.apps i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apps .a1 { background: #E5574E; transform: rotate(-8deg); } .apps .a2 { background: #6E59D9; transform: rotate(5deg) translateY(-2px); }
.apps .a3 { background: #2F9E62; transform: rotate(-4deg) translateY(1px); } .apps .a4 { background: #3D8BD9; transform: rotate(9deg); }
.apps .a-n { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; transform: scale(.4); transition: transform .5s var(--e-spring) .15s, opacity .25s .15s; }
.fam-i:hover .apps i, .fam-i[aria-checked="true"] .apps i { transform: translateX(calc((1.5 - var(--k, 0)) * 22px)) scale(.5); opacity: 0; }
.apps .a1 { --k: 0; } .apps .a2 { --k: 1; } .apps .a3 { --k: 2; } .apps .a4 { --k: 3; }
.fam-i:hover .apps .a-n, .fam-i[aria-checked="true"] .apps .a-n { opacity: 1; transform: none; }
/* what the ticks add up to */
.fam-out { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 20px; margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: var(--paper); }
.fo-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.fo-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--focus); transition: width .6s var(--e-spring), background-color .4s; }
.fo-n { font: 500 12.5px/1 var(--f-mono); color: var(--ink-4); }
.fo-n b { color: var(--ink); }
.fo-say { grid-column: 1; font: 500 clamp(1.15rem, 1.8vw, 1.45rem)/1.25 var(--f-display); color: var(--ink); }
.fo-go { grid-column: 2; grid-row: 2 / span 2; animation: prop-in .4s var(--e-out); }
.fo-go svg { width: 16px; height: 16px; transition: transform .35s var(--e-spring); }
.fo-go:hover svg { transform: translateX(3px); }
.fo-fine { grid-column: 1 / -1; font-size: 13px; color: var(--ink-4); }
.fo-go[hidden], .fo-fine[hidden] { display: none; }
/* the bar takes the colour of the line beneath it: blue (1–3), yellow (4–7), red (8–10) */
.fam-out.lv2 .fo-bar i { background: #DFAB01; }
.fam-out.lv3 .fo-bar i { background: #E03E3E; }

/* --- 3. why me ------------------------------------------------------------------------ */
.why-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.why-txt > p { margin-top: 18px; max-width: 52ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); }
.why-txt .sv-h + p { margin-top: 22px; }
.why-means b { color: var(--ink); }
.why-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.why-more:hover { text-decoration-color: var(--ink); }
.why-more span { transition: transform .3s var(--e-spring); } .why-more:hover span { transform: translateX(3px); }
.why-l { display: grid; gap: 10px; margin-top: 10px; }
.why-l li { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--e-out), transform .6s var(--e-spring); transition-delay: calc(var(--i) * 180ms); }
.why-l.in li { opacity: 1; transform: none; }
.why-l.in .chk { animation: tick .01s forwards; animation-delay: calc(.35s + var(--i) * .3s); }
.why-l.in .chk::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); animation: tickm .3s var(--e-spring) forwards; animation-delay: calc(.35s + var(--i) * .3s); }
/* her photo with her badges floating around it, in order, never over her: two certificates down each
   side, Campus Leader 2026 and Recommended creator across the photo's top corners (above her head), and her three
   numbers along the bottom edge. They lean a little towards the pointer. */
.why-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.why-fig { --px: 0; --py: 0; position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 4 / 4.6; margin: 0; }
.wf-me { position: absolute; inset: 11% 13% 7%; overflow: hidden; border-radius: 26px; background: radial-gradient(circle at 50% 115%, var(--t-blue-bg) 0 58%, transparent 59%), var(--sheet); box-shadow: var(--sh-lift); }
.wf-me img { position: absolute; left: 50%; bottom: 0; width: 112%; height: auto; transform: translateX(-50%); }
.wf-b, .wf-lead, .wf-rec { position: absolute; z-index: 2; transform: translate(calc(var(--px) * var(--d, 8) * 1px), calc(var(--py) * var(--d, 8) * 1px)) rotate(var(--r, 0deg)); transition: transform .5s var(--e-out), filter .3s; filter: drop-shadow(0 6px 10px rgba(25, 25, 24, .18)); }
.wf-b img, .wf-lead img, .wf-rec img { display: block; width: 100%; }
.wf-b { width: 14.5%; }
.b1 { left: 0; top: 24%; --r: -7deg; --d: 12; }
.b2 { left: 1.5%; top: 52%; --r: 6deg; --d: 9; }
.b3 { right: 0; top: 24%; --r: 7deg; --d: 12; }
.b4 { right: 1.5%; top: 52%; --r: -6deg; --d: 9; }
.wf-lead { left: 1%; top: 5.5%; width: 44%; --r: -4deg; --d: 7; }
.wf-rec { right: 2%; top: 8.5%; width: 38%; --r: 4deg; --d: 6; }
.wf-b:hover, .wf-lead:hover, .wf-rec:hover { z-index: 3; filter: drop-shadow(0 12px 18px rgba(25, 25, 24, .24)); }
/* their names, on hover (only where there is hover, so no hidden tooltip widens a phone's page) */
.wf-b::after, .wf-lead::after, .wf-rec::after { content: attr(data-name); position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%) translateY(-4px); padding: 4px 7px; border-radius: 5px; white-space: nowrap; font: 500 11.5px/1 var(--f-ui); color: var(--on-ink); background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--e-spring); }
.wf-b:hover::after, .wf-lead:hover::after, .wf-rec:hover::after { opacity: 1; transform: translateX(-50%); }
@media (hover: none) { .wf-b::after, .wf-lead::after, .wf-rec::after { display: none; } }
.wf-lead .on-dark, :root[data-theme="dark"] .wf-lead .on-light { display: none; }
:root[data-theme="dark"] .wf-lead .on-dark { display: block; }
/* her newest, marked: its "Latest" label sits on top of the badge, never under it */
.wf-new { position: absolute; z-index: 2; left: 6%; top: -26%; padding: 3px 7px; border-radius: 5px; font: 600 10.5px/1 var(--f-ui); font-style: normal; color: #fff; background: #E03E3E; transform: rotate(-4deg); white-space: nowrap; box-shadow: 0 4px 10px -3px rgba(224,62,62,.6); }
.wf-stats { position: absolute; left: 50%; bottom: 0; z-index: 2; display: flex; gap: 8px; transform: translate(calc(-50% + var(--px) * 5px), calc(var(--py) * 5px)); transition: transform .5s var(--e-out); }
.wf-stat { --c: #2383E2; --cb: var(--t-blue-bg); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--sheet); box-shadow: var(--sh-lift); animation: wf-bob 5.5s ease-in-out infinite; animation-delay: var(--bob, 0s); }
@keyframes wf-bob { 50% { translate: 0 -4px; } }
.wf-stat b { grid-column: 2; font: 700 clamp(1.2rem, 2vw, 1.55rem)/1 var(--f-ui); letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.wf-stat small { grid-column: 2; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ws-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--cb); }
.ws-ic svg { width: 19px; height: 19px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Notion's yellow, red and blue, as on her old "Trusted by customers worldwide" strip */
.st-c { --c: #C28A1A; --cb: var(--t-yellow-bg); --bob: -1.8s; }
.st-d { --c: #D9480F; --cb: var(--t-red-bg); --bob: -3.6s; }
.st-k { --c: #2383E2; --cb: var(--t-blue-bg); }
:root[data-theme="dark"] .st-c { --c: #EBC05F; }
:root[data-theme="dark"] .st-d { --c: #F2876A; }
:root[data-theme="dark"] .st-k { --c: #6BB2F2; }
@media (prefers-reduced-motion: reduce) { .wf-stat { animation: none; } }

/* --- 4. how I can help: pages that stack ----------------------------------------------- */
.help-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.help-side { position: sticky; top: 110px; }
.help-tabs { position: relative; display: grid; gap: 2px; margin-top: 28px; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.help-tabs a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); transition: color .3s; }
.help-tabs a i { width: 9px; height: 9px; border-radius: 3px; background: var(--acc); }
.help-tabs a.on { color: var(--cfg); }
.ht-ink { position: absolute; left: 4px; right: 4px; top: 0; height: 0; border-radius: 9px; background: var(--sheet); box-shadow: var(--sh-block); transition: transform .5s var(--e-spring), height .4s var(--e-out); }
.help-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-3); }
.help-cards { display: grid; gap: 28px; }
.sc { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow: hidden; border-radius: 20px; background: var(--sheet); box-shadow: var(--sh-lift); scroll-margin-top: 100px; transform-origin: 50% 0; transition: transform .5s var(--e-out), filter .5s; }
/* arriving from the nav or the home page: the page lights up as it lands */
.sc.arrived { animation: sc-land 1.6s var(--e-out); }
@keyframes sc-land { 0% { box-shadow: 0 0 0 0 var(--acc), var(--sh-lift); } 18% { box-shadow: 0 0 0 4px var(--acc), var(--sh-lift); } 100% { box-shadow: 0 0 0 0 transparent, var(--sh-lift); } }
/* stacked only when every page fits the window (services.js decides), so nothing is ever covered unread */
/* each earlier page stays 52px in view above the next (its number and the top of its title), and a page
   chosen from the nav lands exactly in its place; the spacer after the last keeps the stack from being
   pushed up as the last one arrives */
.help-cards.stack .sc { position: sticky; top: calc(96px + var(--n) * 52px); scroll-margin-top: calc(96px + var(--n) * 52px); }
.help-cards.stack::after { content: ""; height: 140px; }
.help-cards.stack .sc.under { transform: scale(.96); filter: brightness(.97); }
.sc-cover { position: relative; display: grid; place-items: start center; padding: 56px 22px 22px; background: var(--cbg); }
.sc-cover img { width: 100%; max-width: 260px; mix-blend-mode: multiply; transition: transform .7s var(--e-spring); }
:root[data-theme="dark"] .sc-cover img { mix-blend-mode: normal; filter: invert(1) brightness(.92) sepia(.12); }
.sc:hover .sc-cover img { transform: rotate(-2deg) scale(1.04); }
.sc-best { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--on-ink); background: var(--ink); box-shadow: 0 6px 14px -6px rgba(25, 25, 24, .5); }
.sc-best::before { content: "★"; color: #FDECC8; }
.sc-body { padding: clamp(22px, 3vw, 34px); }
.sc-k { display: flex; align-items: center; gap: 8px; }
.sc-num { font: 500 12px/1 var(--f-mono); color: var(--ink-4); }
.sc h3 { margin-top: 10px; font: 500 clamp(1.7rem, 2.8vw, 2.3rem)/1.05 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.sc-sub { margin-top: 8px; font: 400 italic clamp(1.05rem, 1.5vw, 1.25rem)/1.35 var(--f-display); color: var(--cfg); }
.sc-body > p:not(.sc-k):not(.sc-sub) { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.sc-res { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--cbg); color: var(--cfg); font-size: 15px; }
.sc-res-ic { font-size: 16px; line-height: 1.5; color: var(--acc); }
.sc-res b { color: var(--ink); }
.sc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.sc-go .btn svg { width: 16px; height: 16px; transition: transform .35s var(--e-spring); }
.sc-go .btn:hover svg { transform: translateX(3px); }
.sc-go .btn:hover { transform: translateY(-2px); }
.sc-mail { font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sc-mail:hover { color: var(--ink); }

/* --- 5. what working together feels like ---------------------------------------------- */
.feel-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
/* Notion's table of contents block, with an ink on the principle you are reading */
.toc { position: sticky; top: 110px; display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--line); }
.toc a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 8px 8px; border-radius: 6px; font-size: 14.5px; line-height: 1.35; color: var(--ink-4); transition: color .3s, background-color .2s; }
.toc a b { font: 500 12px/1.6 var(--f-mono); }
.toc a:hover { background: var(--hover); color: var(--ink-2); }
.toc a.on { color: var(--ink); }
.toc-ink { position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: var(--ink); transition: transform .45s var(--e-spring), height .35s var(--e-out); }
.feel { display: grid; gap: 14px; }
.fl { position: relative; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(76px, 8vw, 96px); border-radius: 16px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 110px; transition: background-color .4s, box-shadow .4s, transform .5s var(--e-spring); }
.fl.on { background: var(--sheet); box-shadow: var(--sh-lift); transform: translateX(-4px); }
.fl-ic { position: absolute; left: clamp(20px, 3vw, 30px); top: clamp(20px, 3vw, 30px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink-3); background: var(--paper-2); transition: background-color .4s, color .4s, transform .6s var(--e-spring); }
.fl-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl.on .fl-ic { color: var(--on-ink); background: var(--ink); transform: rotate(-6deg); }
.fl-n { font: 500 13px/1 var(--f-mono); color: var(--ink-4); }
.fl-n span { margin-left: 4px; }
.fl h3 { margin-top: 8px; font: 500 clamp(1.3rem, 2vw, 1.65rem)/1.15 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.fl > p:last-child { margin-top: 10px; font-size: 15.5px; color: var(--ink-3); }

/* --- 6. how it works: a timeline whose statuses move along --------------------------- */
.how-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.how-head .sv-sub { margin-top: 0; }
.tl { position: relative; display: grid; gap: clamp(56px, 7vw, 104px); margin-top: clamp(44px, 6vw, 72px); }
/* the numbers run down the middle; the steps sit either side, the first on the right */
.tl-rail { position: absolute; left: 50%; top: 30px; bottom: 30px; width: 2px; margin-left: -1px; background: var(--line); }
.tl-rail i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--ink); }
.st { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 15vw, 210px) minmax(0, 1fr); align-items: start; }
/* each step starts about halfway down the one before: they sit on opposite sides, so a zig-zag, not a gap */
@media (min-width: 761px) { .st + .st { margin-top: clamp(-70px, -4.5vw, -24px); } }
.st-num { grid-column: 2; grid-row: 1; justify-self: center; padding: 4px 0; text-align: center; font: 600 clamp(2.6rem, 5.2vw, 4.4rem)/1 var(--f-ui); letter-spacing: -.05em; color: var(--paper-2); -webkit-text-stroke: 1.5px var(--line-2); background: var(--paper); transition: color .5s, -webkit-text-stroke-color .5s; }
.st.now .st-num, .st.done .st-num { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.st-page { grid-row: 1; max-width: 520px; padding: clamp(20px, 3vw, 30px); border-radius: 16px; background: var(--sheet); box-shadow: var(--sh-block); transition: box-shadow .4s, transform .5s var(--e-spring); }
.st[data-step="0"] .st-page, .st[data-step="2"] .st-page { grid-column: 3; justify-self: start; }
.st[data-step="1"] .st-page, .st[data-step="3"] .st-page { grid-column: 1; justify-self: end; }
/* a little arm from the page to its number */
.st-page::before { content: ""; position: absolute; top: 34px; width: clamp(34px, 4vw, 64px); height: 2px; background: var(--line-2); transition: background-color .4s; }
.st-page { position: relative; }
.st[data-step="0"] .st-page::before, .st[data-step="2"] .st-page::before { right: 100%; }
.st[data-step="1"] .st-page::before, .st[data-step="3"] .st-page::before { left: 100%; }
.st.now .st-page::before, .st.done .st-page::before { background: var(--ink); }
.st.now .st-page { box-shadow: var(--sh-lift); transform: translateY(-4px); }
.st-prop { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-4); }
.st-tag { font-size: 12.5px; transition: background-color .3s, color .3s; }
.st-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: 1px; }
.st h3 { margin-top: 10px; font: 500 clamp(1.4rem, 2.2vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.st-page > p:not(.st-prop) { margin-top: 10px; font-size: 15.5px; color: var(--ink-3); }
/* the button sits on the timeline's line, which reaches down into it */
.how-go { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.tl-rail i::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--e-spring); }
.sv-how:has(.how-go.hit) .tl-rail i::after { opacity: 1; transform: none; }
.how-go .btn { z-index: 1; }
.how-go .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--ink); opacity: 0; pointer-events: none; }
.how-go.hit .btn { animation: how-land .7s var(--e-spring); }
.how-go.hit .btn::after { animation: how-ring 1.1s var(--e-out) .1s; }
.how-go.hit .btn .ic-cal .leaf { transform: translate(3px, 10px) rotate(28deg); opacity: 0; }
.how-go.hit .btn .ic-cal .day { opacity: 1; }
@keyframes how-land { 0% { transform: translateY(-5px) scale(1.04); } 55% { transform: translateY(1px) scale(.99); } 100% { transform: none; } }
@keyframes how-ring { 0% { opacity: .5; box-shadow: 0 0 0 0 var(--ink); } 100% { opacity: 0; box-shadow: 0 0 0 14px var(--ink); } }
@media (prefers-reduced-motion: reduce) { .how-go.hit .btn, .how-go.hit .btn::after { animation: none; } }
.how-fine { font-size: 14px; color: var(--ink-4); }

/* --- 7. clients ------------------------------------------------------------------------ */
.sv-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-voices .voices-head { align-items: flex-end; }
.sv-voices .voices-head .sv-sub { margin-bottom: 0; }

/* --- 8. before you ask ----------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-find { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding: 0 12px; height: 44px; border-radius: 10px; background: var(--sheet); box-shadow: var(--sh-block); }
.faq-find:focus-within { box-shadow: 0 0 0 2px var(--focus), var(--sh-block); }
.faq-find svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-4); stroke-width: 1.6; stroke-linecap: round; }
.faq-find input { flex: 1; min-width: 0; border: 0; background: none; font-size: 15px; color: var(--ink); }
.faq-find input:focus { outline: none; }
.faq-n { font: 500 11.5px/1 var(--f-mono); color: var(--ink-4); white-space: nowrap; }
.faq-else { margin-top: 16px; font-size: 14.5px; color: var(--ink-3); }
.faq-else a, .faq-none a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-list { display: grid; gap: 6px; }
.fq { border-radius: 12px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, box-shadow .3s; }
.fq[open] { background: var(--sheet); box-shadow: var(--sh-block); }
.fq summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; list-style: none; font-size: clamp(15px, 1.25vw, 17px); font-weight: 600; color: var(--ink); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover { background: var(--hover); }
.fq .tri { flex: none; width: 11px; height: 11px; fill: var(--ink); transition: transform .35s var(--e-spring); }
.fq[open] .tri { transform: rotate(90deg); }
.fq-a { padding: 0 20px 18px 41px; font-size: 15.5px; color: var(--ink-3); }
.fq[open] .fq-a { animation: prop-in .4s var(--e-out); }
.fq mark { color: inherit; border-radius: 3px; padding: 0 1px; background: linear-gradient(var(--mark), var(--mark)) 0 0 / 100% 100% no-repeat; animation: fq-mark .55s var(--e-out) both; animation-delay: calc(.15s + min(var(--m, 0), 6) * 80ms); }
/* the marks sweep in like a highlighter, one after another */
@keyframes fq-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.fq.found[open] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--focus) 55%, transparent), var(--sh-block); }
.fq-hit { flex: none; margin-left: auto; padding: 3px 8px; border-radius: 999px; font: 600 11px/1 var(--f-ui); font-style: normal; color: var(--t-blue); background: var(--t-blue-bg); animation: prop-in .35s var(--e-out); }
.fq-hit[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fq mark { animation: none; } }
.fq[hidden] { display: none; }
.faq-none { padding: 14px 4px; color: var(--ink-3); }
/* the last word */
.sv-end { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: clamp(56px, 8vw, 96px); padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--t-yellow-bg); box-shadow: var(--sh-block); }
.se-ic img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7); }
.se-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--t-yellow); }
.se-k i { width: 8px; height: 8px; border-radius: 50%; background: #E03E3E; }
.sv-end h2 { margin-top: 6px; font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.02 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.se-t > p:last-child { margin-top: 8px; color: var(--t-yellow); }
.se-t b { color: var(--ink); }
.se-go { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 960px) {
  .sv-hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-me { width: min(80%, 400px); }
  .why-grid, .help-grid, .feel-grid, .faq-grid { grid-template-columns: 1fr; }
  .help-side, .toc, .faq-side { position: static; }
  .toc { display: none; }
  .help-tabs { display: none; }
  .sc { grid-template-columns: 1fr; }
  .sc-cover { padding: 18px 18px 0; }
  .sc-cover img { max-width: 220px; }
  .sv-vgrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sv-hero { padding-top: 40px; }
  /* the photo stays whole: who she is sits beneath it, just overlapping its bottom edge */
  .hero-me { width: min(88%, 380px); }
  .me-id { width: 94%; }
  .me-cube { left: -10px; top: 7%; width: 50px; height: 50px; }
  .fam-out { grid-template-columns: 1fr; }
  .fo-go { grid-column: 1; grid-row: auto; justify-self: start; }
  .tl-rail { display: none; }
  .st { grid-template-columns: 1fr; }
  .st-num { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 8px; font-size: 2.4rem; background: none; }
  .st[data-step] .st-page { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; }
  .st-page::before { display: none; }
  .sv-end { grid-template-columns: 1fr; }
  .why-fig { width: min(100%, 420px); margin-top: 24px; }
  .wf-stats { gap: 6px; }
  .wf-stat { padding: 8px 11px; border-radius: 12px; } .ws-ic { display: none; }
  .wf-stat b, .wf-stat small { grid-column: 1; } .wf-stat small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-l li { opacity: 1; transform: none; }
}
/* a small laptop: the photo beside the words is narrow, so the numbers drop their icons to stay on it */
@media (min-width: 961px) and (max-width: 1180px) {
  .why-fig .ws-ic { display: none; }
  .why-fig .wf-stat { padding: 8px 11px; border-radius: 12px; }
  .why-fig .wf-stat b, .why-fig .wf-stat small { grid-column: 1; }
}