/* Homepage only. Shared pieces live in site.css, which loads first. */

/* ---------- 02 Hero: centred, immersive, the symbol floats in depth ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-top: calc(var(--sf-header-height) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(40px, 5vw, 72px); }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Phones and tablets: four balanced lines. From 1024px "We build growth systems" holds the first line. The headline
   is the page's one display size, a step above the chapter headings: 48px on phones (less below 400px) to 84px at
   1440, tightly tracked and set close, so it holds as one block. */
.hero__title { position: relative; max-width: 14ch; font-size: clamp(3rem, 1.9rem + 4.2vw, 5.25rem); line-height: 0.98; letter-spacing: -0.035em; }
/* Below 400px the size follows the column, so "We build growth" holds the first line and "growth" does not drop onto
   a line of its own: that line is 7.28 times the font size wide (349px at 48px, more than the 320-359px column of a
   360-399px phone), and 7.45 leaves 2% to spare. 37.6px at 320, 43px at 360, 47px at 390, then the 48px floor. */
@media (max-width: 399px) { .hero__title { font-size: min(3rem, (100vw - 2 * var(--sf-gutter-sm)) / 7.45); } }
@media (min-width: 1024px) { .hero__title { max-width: none; } .hero__line { display: block; } }
.hero__tag { margin-top: 20px; font-size: 1.125rem; font-weight: var(--sf-fw-medium); color: var(--sf-fg); }
.hero__sub { margin: 14px auto 0; max-width: 58ch; }
.hero__ctas { justify-content: center; margin-top: 36px; }
@media (max-width: 559px) { .hero__ctas { align-self: stretch; } .hero__ctas .sf-btn { flex: 1 1 100%; } }
/* The reassurance under the buttons is a 14/600 sentence in running-text ink (a guarantee line), in both themes, not a
   12px tracked label. The line height is pinned, so the hero keeps its height. */
.hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 19.2px; font-weight: var(--sf-fw-semibold); letter-spacing: 0; color: var(--sf-fg-body); }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .sf-icon { width: 18px; height: 18px; color: var(--sf-fg-accent); }

/* Behind the headline: a soft brand glow (the Sarafi symbol that stood here was removed on 2026-10-08, first in dark
   mode, then everywhere, at the owner's request; don't bring it back). */
.hero__art { position: absolute; left: 50%; top: 50%; z-index: -1; height: min(108%, 580px); aspect-ratio: 74.48 / 111.28; transform: translate(-50%, -50%); pointer-events: none; }
@media (max-width: 767px) { .hero__art { height: min(96%, 440px); } }
.hero__art::before { content: ""; position: absolute; inset: 34% -46% -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 77, 255, 0.30), rgba(70, 119, 255, 0.10) 55%, transparent); animation: hero-breathe 7s ease-in-out infinite; }
/* Below 1024px the headline takes four lines, so the glow starts lower. */
@media (max-width: 1023px) { .hero__art::before { inset: 48% -46% -6%; } }
@keyframes hero-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
/* Looping motion pauses while the hero is off screen (sarafi.js sets .is-offscreen). */
.hero.is-offscreen .hero__art::before { animation-play-state: paused; }

/* ---------- 03 Platforms we work with ----------
   A quiet strip right under the hero: two rows of 64px (52px on phones), the names and marks in 62% ink, full ink
   under the pointer. While it moves it runs to the screen edges and fades out at both ends. With reduced motion or
   without the script it is one wrapped list (sarafi.css), so it keeps the page's width and has no fades. */
.trust { padding-bottom: clamp(40px, 5vw, 64px); }
/* Success stories right under the platforms (2026-10-08): in light both are white, so a full section gap reads as empty space. */
.trust + .stories-section { padding-top: clamp(48px, 5vw, 80px); }
.trust__title { margin-top: clamp(40px, 5vw, 64px); }
/* The line over the moving platforms strip: the section kicker (site.css), centred over the strip. The centring has its
   own, heavier rule, so a change to the spacing above and below can never push the pill to the left. */
.trust__lead { display: flex; width: fit-content; max-width: 100%; margin: clamp(24px, 3vw, 40px) 0 14px; color: var(--sf-fg-muted);
  font-size: var(--sf-fs-label); line-height: var(--sf-lh-label); font-weight: var(--sf-tw-label); text-transform: uppercase; text-align: center; }
.trust .trust__lead { margin-inline: auto; }
/* Client marks (2026-10-13): the picture is the name, so the item is the picture alone, 56px tall on the owner's 256x102
   canvas (44px on phones); the marquee's filter draws it in the surface's text colour. The platforms are a small still
   row under the clients. */
.trust .sf-marquee:has(.sf-marquee__item--mark) { --sf-marquee-row: 88px; }
.trust .sf-marquee__item--mark { gap: 0; padding: 0 22px; }
.trust .sf-marquee__item--mark .sf-marquee__logo--client { height: 60px; width: auto; opacity: 0.92; }   /* outweighs .trust .sf-marquee__logo below */
@media (max-width: 767px) { .trust .sf-marquee:has(.sf-marquee__item--mark) { --sf-marquee-row: 66px; } .trust .sf-marquee__item--mark { padding: 0 14px; } .trust .sf-marquee__item--mark .sf-marquee__logo--client { height: 44px; } }
.trust__platforms-label { margin: clamp(20px, 3vw, 28px) 0 0; text-align: center; color: var(--sf-fg-muted); }
.trust__platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--sf-fg-muted); font-size: 0.9375rem; font-weight: var(--sf-fw-semibold); }
.trust__platform { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.trust__platform-logo { width: auto; height: 18px; filter: brightness(0) invert(var(--sf-logo-invert, 0)); opacity: 0.7; }
/* The platforms: one moving line (the owner asked for one line, moving, with bigger logos: 2026-10-09), each logo in a
   box drawn like the outline button ("See our work"): a hairline edge and the button's 8px corners, a faint tint on
   dark, a white sheet with the button's soft shadow on light. The row is the box's height; the strip's padding leaves
   room for the shadow (the strip clips at its padding edge). */
.trust .sf-marquee { --sf-marquee-row: 68px; --sf-marquee-gap: 18px; padding-block: 12px; }
.trust .sf-marquee__item { min-height: var(--sf-marquee-row); padding: 0 26px; border: 1px solid var(--sf-border-strong); border-radius: var(--sf-radius-sm);
  background: color-mix(in srgb, var(--sf-fg) 4%, transparent); color: var(--sf-fg); font-size: 1.5rem;
  transition: border-color 250ms var(--sf-ease-out), background-color 250ms var(--sf-ease-out); }
.trust .sf-marquee__logo { height: 1.15em; opacity: 0.9; }
:root[data-theme="light"] .trust .sf-marquee__item { border-color: var(--sf-hairline-strong); background: var(--sf-white); box-shadow: var(--sf-shadow-1); }
@media (hover: hover) {
  .trust .sf-marquee__item:hover { border-color: color-mix(in srgb, var(--sf-fg) 35%, transparent); }
  .trust .sf-marquee__item:hover .sf-marquee__logo { opacity: 1; }
}
/* Without the script (or with reduced motion) the list wraps: the boxes then need a gap between their lines too. */
.trust .sf-marquee__row { row-gap: 12px; }
@media (max-width: 767px) {
  .trust .sf-marquee { --sf-marquee-row: 54px; --sf-marquee-gap: 12px; }
  .trust .sf-marquee__item { padding: 0 18px; font-size: 1.1875rem; }
}
/* The bleed: 50% - 50vw takes the strip from the container's edges to the window's (main clips the overflow, so a
   classic scrollbar can never make the page scroll sideways). The fades are shorter on phones, where the row is narrow. */
@media (prefers-reduced-motion: no-preference) {
  .sf-js .trust .sf-marquee { margin-inline: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sf-js .trust .sf-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
}
/* On paper the strip is its wrapped list (sarafi.css): no bleed, no fades. */
@media print { .sf-js .trust .sf-marquee { margin-inline: 0; -webkit-mask-image: none; mask-image: none; } }

/* ---------- Team chart (05b): one engagement as an org chart ----------
   The people sit on the same grid as the lines (narrow: 400 x 950, wide from 1024px: 1100 x 740 viewBox units), placed
   by --x (centre), --y (top) and --w (width) as fractions of the chart, so lines and people meet at any width. Sizes
   scale with the chart (cqw); the chart is capped (520px narrow, 1100px wide) so the labels keep their room. */
.team-section__head { margin-inline: auto; text-align: center; }
.team-chart { --avatar: 16cqw; --gap: 2.5cqw; --name: clamp(13px, 3.75cqw, 18px); --meta: clamp(12px, 3.25cqw, 15px); --hub-name: clamp(14px, 4.5cqw, 20px);
  position: relative; container-type: inline-size; max-width: 520px; aspect-ratio: 400 / 950; margin: clamp(40px, 5vw, 64px) auto 0; }
.team-chart__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--sf-border-strong); stroke-width: 1.25; stroke-linecap: round; }
.team-chart__lines path { vector-effect: non-scaling-stroke; }
.team-chart__lines--wide { display: none; }
.team-chart__people { margin: 0; padding: 0; list-style: none; }
.team-chart__node { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.team-chart__avatar { display: grid; flex: none; place-items: center; width: var(--avatar); height: var(--avatar); margin-bottom: var(--gap); border-radius: 50%; background: var(--sf-mist); color: var(--sf-midnight); }
.team-chart__avatar .sf-icon { width: calc(var(--avatar) * 0.4); height: calc(var(--avatar) * 0.4); }
/* A role's picture fills its circle: the stand-ins (img/team/role-*.svg) draw the role's icon, a photo set in the dashboard fills it. */
.team-chart__avatar { overflow: hidden; }
.team-chart__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-section__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 640px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.team-section__cta .sf-lead { margin: 0; }
.team-chart__name { color: var(--sf-fg); font-size: var(--name); font-weight: var(--sf-fw-semibold); line-height: 1.3; text-wrap: balance; }
.team-chart__meta { margin-top: 2px; color: var(--sf-fg-muted); font-size: var(--meta); line-height: 1.4; }
/* The strategist: the gradient circle in the middle, everything inside it. */
.team-chart__node--hub { aspect-ratio: 1; justify-content: center; padding-inline: 8%; border-radius: 50%; background: linear-gradient(90deg, var(--sf-electric-blue), var(--sf-growth-purple)); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--sf-growth-purple) 70%, transparent); }
.team-chart__node--hub .team-chart__avatar { background: var(--sf-white); }
.team-chart__node--hub .team-chart__name { color: var(--sf-white); font-size: var(--hub-name); }
.team-chart__node--hub .team-chart__meta { color: rgba(255, 255, 255, 0.82); }
:root[data-theme="light"] .team-chart__avatar { background: var(--sf-white); box-shadow: 0 0 0 1px var(--sf-border-strong); }
:root[data-theme="light"] .team-chart__node--hub .team-chart__avatar { box-shadow: none; }
.team-chart__node--you { --x: 0.5; --y: 0; --w: 0.45; }
.team-chart__node--lead { --x: 0.5; --y: 0.3811; --w: 0.475; }
.team-chart__node--brand { --x: 0.25; --y: 0.2105; --w: 0.45; }
.team-chart__node--data { --x: 0.75; --y: 0.2105; --w: 0.45; }
.team-chart__node--video { --x: 0.1667; --y: 0.6421; --w: 0.32; }
.team-chart__node--search { --x: 0.5; --y: 0.6421; --w: 0.32; }
.team-chart__node--social { --x: 0.8333; --y: 0.6421; --w: 0.32; }
.team-chart__node--seo { --x: 0.1667; --y: 0.8316; --w: 0.32; }
.team-chart__node--web { --x: 0.5; --y: 0.8316; --w: 0.32; }
.team-chart__node--auto { --x: 0.8333; --y: 0.8316; --w: 0.32; }
@media (min-width: 1024px) {
  .team-chart { --avatar: 6.545cqw; --gap: 0.91cqw; --name: clamp(15px, 1.55cqw, 17px); --meta: clamp(13px, 1.27cqw, 14px); --hub-name: clamp(17px, 1.8cqw, 20px);
    max-width: 1100px; aspect-ratio: 1100 / 740; }
  .team-chart__lines--wide { display: block; }
  .team-chart__lines--narrow { display: none; }
  .team-chart__node--you { --x: 0.5; --y: 0; --w: 0.1818; }
  .team-chart__node--lead { --x: 0.5; --y: 0.3784; --w: 0.2; }
  .team-chart__node--brand { --x: 0.25; --y: 0.3243; --w: 0.1818; }
  .team-chart__node--data { --x: 0.75; --y: 0.3243; --w: 0.1818; }
  .team-chart__node--video { --x: 0.0833; --y: 0.7703; --w: 0.1545; }
  .team-chart__node--search { --x: 0.25; --y: 0.7703; --w: 0.1545; }
  .team-chart__node--social { --x: 0.4167; --y: 0.7703; --w: 0.1545; }
  .team-chart__node--seo { --x: 0.5833; --y: 0.7703; --w: 0.1545; }
  .team-chart__node--web { --x: 0.75; --y: 0.7703; --w: 0.1545; }
  .team-chart__node--auto { --x: 0.9167; --y: 0.7703; --w: 0.1545; }
}
@media print {
  .team-chart__node--hub { background: none; box-shadow: inset 0 0 0 2px currentColor; }
  .team-chart__node--hub .team-chart__name, .team-chart__node--hub .team-chart__meta { color: inherit; }
}

.logo-ph { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-fg-muted); }

/* ---------- Section headings ----------
   The serif phrase takes a line of its own or stays whole, so no heading breaks inside a short phrase.
   #approach-title also keeps "Clarity first." and "Systems next." whole with .sf-nowrap in the markup. */
#approach-title .sf-serif, #why-title .sf-serif { display: block; }
#system-title .sf-serif { white-space: nowrap; }

/* ---------- 04 Problem: a self-check ----------
   Each card is a checkbox (the box itself is hidden; the round tick shows its state). Ticking lights the matching layer
   pills in the panel and fills in its count (sarafi.js, [data-sf-diagnose]). From 1024px the panel sits under the
   heading and stays in view while the cards scroll; below that it follows the cards (display: contents lets it join
   the page grid). */
.problem-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 768px) { .problem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.problem-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 148px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.problem-card:hover { border-color: color-mix(in srgb, var(--sf-fg) 25%, transparent); }
.problem-card__box { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.problem-card__tick { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--sf-border-strong); border-radius: 50%; color: transparent;
  transition: background-color var(--sf-dur-fast) var(--sf-ease-out), border-color var(--sf-dur-fast) var(--sf-ease-out), color var(--sf-dur-fast) var(--sf-ease-out); }
.problem-card__tick .sf-icon { width: 14px; height: 14px; }
.problem-card__box:checked + .problem-card__tick { border-color: transparent; background: var(--sf-gradient-cta); color: var(--sf-white); }
.problem-card__box:focus-visible + .problem-card__tick { outline: 2px solid var(--sf-focus); outline-offset: 3px; }
.problem-card:has(.problem-card__box:checked) { border-color: var(--sf-fg-accent); box-shadow: inset 0 0 0 1px var(--sf-fg-accent); }
/* Dark theme: a ticked card also lights the glow edge on its top (sarafi.css). */
:root[data-theme="dark"] .problem-card:has(.problem-card__box:checked)::after { transform: none; opacity: 0.9; }
.problem-card:has(.problem-card__box:focus-visible) { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.problem-card__title { display: block; padding-right: 36px; font-size: 1.125rem; font-weight: var(--sf-fw-semibold); line-height: 1.35; }
.fixed-by { display: flex; align-items: center; gap: 8px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.fixed-by strong { color: var(--sf-fg-accent); font-weight: var(--sf-fw-semibold); }
.fixed-by .sf-icon { width: 16px; height: 16px; }
/* Phones: compact rows, so the six fit in about half the height. The title fills the row, the tick sits centred on the
   right, and the "Fixed by" line appears once the card is ticked. */
@media (max-width: 767px) {
  .problem-card { min-height: 0; padding: 14px 52px 14px 16px; gap: 6px; }
  .problem-card__title { font-size: 1rem; padding-right: 0; }
  .problem-card__tick { top: 50%; margin-top: -12px; }
  .problem-card .fixed-by { display: none; }
  .problem-card:has(:checked) .fixed-by { display: flex; }
}
/* The section's answer, set as a statement: it fills with ink word by word as it rises into view ([data-sf-ink],
   sarafi.js). Its full ink is the heading colour, so the line reads the same lit, unlit-by-script or printed. */
.problem__close { max-width: 22ch; margin-top: clamp(40px, 5vw, 64px); color: var(--sf-fg); font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); font-weight: var(--sf-fw-semibold); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
/* The panel: the question, the five layers, the count and the button. */
.problem-panel { margin-top: 32px; padding: 24px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); background: var(--sf-bg-raised); }
/* The panel is a white sheet on the paper chapter in both themes, with the ink reading colours and the level-1 shadow. */
.problem-panel { background: var(--sf-white); border-color: var(--sf-hairline); box-shadow: var(--sf-shadow-1); --sf-fg-muted: var(--sf-ink-muted); --sf-fg-body: var(--sf-ink-body); }
/* Dark theme: the "Who we work with" card is lit from above like the cards, with the same 5% lift of the muted ink
   (sarafi.css, --sf-lit). */
:root[data-theme="dark"] .fit { background-image: var(--sf-lit); border-color: color-mix(in srgb, var(--sf-fg) 9%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sf-fg) 7%, transparent);
  --sf-fg-muted: color-mix(in srgb, var(--sf-slate) 95%, var(--sf-white)); --sf-fg-body: color-mix(in srgb, var(--sf-slate) 95%, var(--sf-white)); }
.problem-panel__ask { color: var(--sf-fg); font-size: var(--sf-fs-body-lg); font-weight: var(--sf-fw-semibold); }
.problem-panel__hint { margin-top: 4px; color: var(--sf-fg-muted); font-size: var(--sf-fs-small); }
.problem-panel__layers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.layer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--sf-border); border-radius: 999px; color: var(--sf-fg-muted); font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); line-height: 1;
  transition: background-color var(--sf-dur-fast) var(--sf-ease-out), border-color var(--sf-dur-fast) var(--sf-ease-out), color var(--sf-dur-fast) var(--sf-ease-out); }
.layer-pill .sf-icon { width: 15px; height: 15px; }
.layer-pill.is-on { border-color: transparent; background: var(--sf-gradient-cta); color: var(--sf-white); }
.problem-panel__count { min-height: 1.5em; margin-top: 16px; color: var(--sf-fg-body); font-size: var(--sf-fs-small); }
.problem-panel .sf-btn { margin-top: 16px; }
/* Below 1024px: heading, cards and closing line, then the panel. */
@media (max-width: 1023px) {
  .problem__side { display: contents; }
  .problem__main { order: 2; }
  .problem-panel { order: 3; margin-top: 0; }
}
@media (min-width: 1024px) {
  .problem .split { align-items: stretch; }
  /* It follows the header as it steps aside; the reveal transition (sarafi.css) eases the move. */
  .problem-panel { position: sticky; top: var(--sf-sticky-top); }
}
@media (prefers-reduced-motion: reduce) { .problem-card__tick, .layer-pill { transition: none; } }

/* ---------- 05 Growth system ---------- */
.system { position: relative; isolation: isolate; overflow: hidden; }
.system__glow { position: absolute; left: 50%; top: 42%; z-index: -1; width: 900px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(140, 77, 255, 0.14), transparent); pointer-events: none; }
.system .sf-system { margin-top: clamp(40px, 5vw, 64px); }
.system .sf-node:hover { border-color: color-mix(in srgb, var(--sf-fg) 25%, transparent); }
/* The board of four layers lies back in perspective and stands up as it arrives; then the connector draws. */
.sf-js .system-reveal { perspective: 1600px; }
.sf-js .system-reveal .sf-system { rotate: x 38deg; translate: 0 60px -80px; transform-origin: 50% 100%; transition: rotate 1.4s var(--sf-ease-out), translate 1.4s var(--sf-ease-out); }
.sf-js .system-reveal.is-revealed .sf-system { rotate: none; translate: none; }
.sf-js .system-reveal .sf-system::before { transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--sf-ease-out) .7s; }
@media (min-width: 1024px) { .sf-js .system-reveal .sf-system::before { transform: scaleX(0); transform-origin: left; } }
.sf-js .system-reveal.is-revealed .sf-system::before { transform: none; }
/* Then a pulse of light runs from layer to layer, and each dot lights up as the pulse reaches it.
   The dots are evenly spaced, so the pulse reaches them 1.4s apart. Below 1024px the dots light up in turn without the pulse. */
.sf-js .system-reveal.is-revealed .sf-node__dot { animation: node-ping 6s var(--sf-ease-out) infinite; }
.sf-js .system-reveal.is-revealed .sf-node:nth-child(1) .sf-node__dot { animation-delay: 1.6s; }
.sf-js .system-reveal.is-revealed .sf-node:nth-child(2) .sf-node__dot { animation-delay: 3s; }
.sf-js .system-reveal.is-revealed .sf-node:nth-child(3) .sf-node__dot { animation-delay: 4.4s; }
.sf-js .system-reveal.is-revealed .sf-node:nth-child(4) .sf-node__dot { animation-delay: 5.8s; }
@keyframes node-ping { 0% { box-shadow: 0 0 0 0 rgba(200, 183, 255, 0.75); border-color: #F2EDFF; } 20%, 100% { box-shadow: 0 0 0 12px rgba(200, 183, 255, 0); border-color: var(--sf-fg-accent); } }
@media (min-width: 1024px) {
  .sf-js .system-reveal .sf-system::after { content: ""; position: absolute; z-index: 2; left: 32px; top: 32px; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; pointer-events: none;
    background: var(--sf-badge-bg); box-shadow: 0 0 12px 4px rgba(200, 183, 255, 0.8), 0 0 36px 12px rgba(140, 77, 255, 0.45); }
  .sf-js .system-reveal.is-revealed .sf-system::after { animation: system-pulse 6s linear 1.6s infinite; }
}
/* From the first dot (32px in) to the fourth: three columns and three 14px gaps along, at 75% + 42.5px. */
@keyframes system-pulse { 0% { left: 32px; opacity: 0; } 4% { opacity: 1; } 70% { left: calc(75% + 42.5px); opacity: 1; } 76%, 100% { left: calc(75% + 42.5px); opacity: 0; } }
.system.is-offscreen .sf-system::after, .system.is-offscreen .sf-node__dot { animation-play-state: paused; }
.system__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sf-border); }
.measured { display: flex; align-items: flex-start; gap: 10px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.measured .sf-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--sf-fg-accent); }

/* ---------- 06 Work ---------- */
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .work-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* ---------- 08 Why Sarafi ---------- */
/* Head row: the heading on the left, the promise on the right (one column on phones and tablets). */
.why__head { display: grid; gap: 20px 64px; align-items: end; }
@media (min-width: 1024px) { .why__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.why__lead { margin: 0; max-width: 560px; }

/* The comparison: topic, a typical agency setup, Sarafi. From 768px the Sarafi column is one lifted card drawn behind
   the table (.compare-wrap::before, the same width as the column), so it has a gradient ring and a shadow without seams
   between cells; on phones each row becomes a small stack with the Sarafi answer in its own tinted box. */
.compare-wrap { --why-col: color-mix(in srgb, var(--sf-growth-purple) 9%, var(--sf-bg-raised)); --why-line: color-mix(in srgb, var(--sf-growth-purple) 22%, transparent);
  margin-top: clamp(40px, 5vw, 64px); }
:root[data-theme="light"] .compare-wrap { --why-col: var(--sf-white); --why-line: color-mix(in srgb, var(--sf-growth-purple) 14%, var(--sf-white)); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare__topic { display: flex; align-items: center; gap: 14px; color: var(--sf-fg); font-weight: var(--sf-fw-semibold); }
.compare__topic-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--sf-border); border-radius: 50%; color: var(--sf-fg-accent); }
.compare__topic-icon .sf-icon { width: 18px; height: 18px; }
/* Dark theme: the same lit well as the icon tiles (sarafi.css); it stays round. */
:root[data-theme="dark"] .compare__topic-icon {
  border-color: color-mix(in srgb, var(--sf-growth-purple) 30%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--sf-electric-blue) 18%, transparent), color-mix(in srgb, var(--sf-growth-purple) 24%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 22px -12px rgba(140, 77, 255, 0.6);
  color: var(--sf-soft-lavender);
}
:root[data-theme="light"] .compare__topic-icon { border-color: transparent; background: var(--sf-well); box-shadow: inset 0 0 0 1px rgba(131, 64, 255, 0.10); color: var(--sf-purple-on-light); }
:root[data-theme="light"] .compare__topic-icon .sf-icon { stroke-width: 1.75; }
.compare__old, .compare__new { display: flex; gap: 12px; align-items: flex-start; }
.compare__old { color: var(--sf-fg-muted); }
.compare__new { color: var(--sf-fg); font-weight: var(--sf-fw-semibold); }
.compare__mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; }
.compare__mark .sf-icon { width: 12px; height: 12px; stroke-width: 2.5; }
.compare__old .compare__mark { background: var(--sf-hover); color: var(--sf-fg-muted); }
.compare__new .compare__mark { background: var(--sf-gradient-cta); color: var(--sf-white); }
.compare__brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--sf-fg-accent); }
.compare__brand .sf-icon { align-self: center; width: 16px; height: 16px; }
:root[data-theme="light"] .compare__brand { color: var(--sf-purple-ink); }
@media (min-width: 768px) {
  .compare-wrap { position: relative; isolation: isolate; }
  .compare-wrap::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 40%; border: 1px solid transparent; border-radius: var(--sf-radius-md);
    background: linear-gradient(var(--why-col), var(--why-col)) padding-box, var(--sf-gradient-cta) border-box; box-shadow: var(--sf-shadow-2); }
  .compare { table-layout: fixed; }
  .compare thead > tr > :nth-child(1) { width: 24%; }
  .compare thead > tr > :nth-child(2) { width: 36%; }
  .compare thead > tr > :nth-child(3) { width: 40%; }
  .compare thead th { padding: 24px 24px 18px; text-align: left; vertical-align: bottom; font-size: var(--sf-fs-label); letter-spacing: var(--sf-ls-label); font-weight: var(--sf-tw-label); text-transform: uppercase; color: var(--sf-fg-muted); }
  .compare tbody :is(th, td) { padding: 20px 24px; border-top: 1px solid var(--sf-border); text-align: left; vertical-align: middle; font-weight: inherit; }
  .compare tbody th { padding-left: 0; }
  .compare :is(th, td):last-child { padding-inline: 32px 28px; }
  .compare tbody td:last-child { border-top-color: var(--why-line); }
  .compare tbody tr:last-child > * { padding-bottom: 28px; }
}
@media (max-width: 767px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { display: none; }
  .compare tbody tr { display: grid; gap: 12px; padding: 22px 0; border-top: 1px solid var(--sf-border); }
  .compare tbody tr:first-child { padding-top: 0; border-top: 0; }
  .compare tbody th { font-weight: inherit; }
  .compare td::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-fg-muted); }
  .compare td:last-child { padding: 14px 16px; border: 1px solid var(--why-line); border-radius: var(--sf-radius-sm); background: var(--why-col); }
  .compare td:last-child::before { color: var(--sf-fg-accent); }
  :root[data-theme="light"] .compare td:last-child::before { color: var(--sf-purple-ink); }
}
/* The Sarafi ticks pop in one after another once the table has risen into view (not with reduced motion or in print). */
.compare tbody tr:nth-child(2) { --why-i: 1; }
.compare tbody tr:nth-child(3) { --why-i: 2; }
.compare tbody tr:nth-child(4) { --why-i: 3; }
.compare tbody tr:nth-child(5) { --why-i: 4; }
.compare tbody tr:nth-child(6) { --why-i: 5; }
.sf-js .compare-wrap[data-sf-reveal] .compare__new .compare__mark { opacity: 0; scale: 0.4;
  transition: opacity 300ms var(--sf-ease-out), scale 500ms var(--sf-ease-out); transition-delay: calc(450ms + var(--why-i, 0) * 110ms); }
.sf-js .compare-wrap.is-revealed .compare__new .compare__mark { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .sf-js .compare-wrap[data-sf-reveal] .compare__new .compare__mark { opacity: 1; scale: 1; transition: none; } }
@media print {
  .sf-js .compare-wrap[data-sf-reveal] .compare__new .compare__mark { opacity: 1; scale: 1; }
  /* Paper drops background colours by default: the ticks print as outlined marks, the Sarafi card as a plain outline. */
  .compare__new .compare__mark { background: none; color: var(--sf-fg); box-shadow: inset 0 0 0 1.5px currentColor; }
  .compare-wrap::before { border-color: var(--sf-border-strong); background: none; box-shadow: none; }
}

/* Who we work with: the section's footer, a quiet card with the label on the left and the industries on the right. */
.fit { display: grid; gap: 20px 40px; align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); background: var(--sf-bg-raised); }
@media (min-width: 1024px) { .fit { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr); } }
.fit__title { margin: 10px 0 0; }
.fit__chips { --sf-cluster-gap: 10px; }

/* ---------- 10 Voices ---------- */
.quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Below 1024px the quotes swipe sideways. The row bleeds by the page gutter, which widens from 768px. */
@media (max-width: 1023px) {
  .quotes { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sf-gutter-sm); margin-inline: calc(-1 * var(--sf-gutter-sm)); padding: 4px var(--sf-gutter-sm) 12px; }
  .quotes > * { flex: 0 0 86%; scroll-snap-align: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .quotes { margin-inline: calc(-1 * var(--sf-gutter-md)); padding-inline: var(--sf-gutter-md); scroll-padding-inline: var(--sf-gutter-md); }
}
/* A swipe row would print as a clipped strip and shrink the whole page to fit, so both rows print as a grid. */
@media print {
  .problem-cards, .quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .problem-card, .quote-card { break-inside: avoid; }
  /* Printing never runs the scroll observer, so the system board prints upright with its line drawn. */
  .sf-js .system-reveal .sf-system { rotate: none; translate: none; }
  .sf-js .system-reveal .sf-system::before { transform: none; }
}
.founder .sf-quote__text { margin-top: 18px; }
.founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 1024px) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
/* Without a portrait the statement stands alone, at a comfortable line length. */
@media (min-width: 1024px) { .founder--statement { grid-template-columns: minmax(0, 1fr); max-width: 880px; } }
.founder__portrait { aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--sf-radius-md); overflow: hidden; }
.founder .sf-quote__text { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); line-height: 1.15; }

/* ---------- 11 Insights ---------- */
.insights-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .insights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.article .sf-card__media { aspect-ratio: 16 / 9; }
/* Tablets stack the three teasers full width, where a 16:9 image would stand about 450px tall. */
@media (min-width: 768px) and (max-width: 1023px) { .article .sf-card__media { aspect-ratio: 21 / 9; } }
.article .sf-card__title { margin-top: 10px; }

/* Light theme: the glow no longer sits behind the CTAs as a smudge. */
:root[data-theme="light"] .hero__art::before { opacity: 0.18; }
/* The growth system's glow is a two-tone whisper on Mist. Its muted text needs no patch any more: the ink-muted token
   is 6.22:1 on plain Mist, so the lead and the "Measured end to end" line stay AA over the glow. */
:root[data-theme="light"] .system__glow { background: radial-gradient(closest-side, rgba(140, 77, 255, 0.07), rgba(70, 119, 255, 0.04) 55%, transparent); }
/* Print: the proof sheet's ring and shadow would print as a grey slab (sarafi.css removes the cells' and the other
   light shadows). */

/* ---------- 06b Shopify stores (cards from the Work collection, list work-shopify) ---------- */
.stores-section__lead { max-width: 60ch; margin-top: 14px; }
.stores-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 768px) { .stores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stores-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.store-card { display: flex; flex-direction: column; }
.store-card .sf-card__media { aspect-ratio: 4 / 3; }
.store-card .case__title { margin-top: 8px; }
.store-card .sf-card__footer { margin-top: auto; padding-top: 18px; }
.stores-section__cta { margin-top: 28px; text-align: center; }

/* ---------- 06a Ad campaign case studies (cards from the Work collection, list work-campaigns) ---------- */
.campaigns-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 768px) { .campaigns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .campaigns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.campaigns-section__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }