/* ═══════════════════════════════════════════════════════════════════════════
   AOS COMPONENT LIBRARY
   Ported from mockups/components-restore.css + mockup inline <style> blocks.
   Covers: accordion (.aos-acc), stepper (.aos-steps),
   timeline (.aos-timeline), pullquote (.aos-pullquote), table (.aos-table),
   progress bar.
   Component-specific styles for .hero, .c-program, .c-callout, .c-stat etc.
   live alongside their pattern files under patterns/.

   HSL tokens are authored as space-separated triplets to enable
   `hsl(var(--aos-navy) / 0.5)` opacity composition — same convention
   as the mockups.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Token shim ─────────────────────────────────────────────────────────
   Mockup CSS references raw CSS variables (--aos-navy, --display, etc).
   We mirror them here so the ported component styles work unchanged.
   Kept in sync with theme.json's palette + fontFamilies presets. */
:root {
	/* ── Agency OS design tokens — Minimal Premium (brand teal + charcoal) ──
	   Single front-end source of truth. HSL triplets enable hsl(var(--token)/a).
	   design-language.php mirrors these at wp_head priority 999. No hardcoded
	   color lives outside this block. No purple. */

	/* Ink — charcoal (220 13% 13%) */
	--aos-navy:        220 13% 13%;
	--aos-navy-deep:   220 14% 9%;
	--aos-navy-soft:   220 10% 24%;

	/* Accent — Agency OS teal (#2E9E9E). --aos-blue = AA-safe interactive teal
	   for text/links; --aos-yellow = brand teal for fills / on-dark accents. */
	--aos-blue:        174 60% 30%;
	--aos-blue-deep:   174 62% 24%;
	--aos-yellow:      174 55% 40%;
	--aos-yellow-soft: 174 45% 94%;
	--aos-yellow-deep: 174 60% 30%;
	--aos-rose:        220 9% 42%;

	/* Surface */
	--bg:            0 0% 98%;
	--bg-alt:        210 20% 96%;
	--bg-card:       0 0% 100%;
	--paper:         0 0% 100%;
	--white:         0 0% 100%;

	/* Text */
	--fg:            220 13% 13%;
	--fg-muted:      220 9% 32%;
	--fg-subtle:     220 8% 43%;

	/* Border */
	--border:        220 9% 90%;
	--border-soft:   220 14% 95%;
	--border-strong: 220 9% 82%;

	/* Font family aliases — Instrument Sans (brand), Cormorant for editorial emphasis */
	--display:   "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
	--body:      "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--editorial: "Cormorant Garamond", "New York", Georgia, "Times New Roman", serif;
	--mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Layout — fluid container with ceiling.
	   `min(100%, 1680px)` means the container is the full width of its
	   parent up to 1680px, then caps. NO lower bound — small viewports
	   stay fully responsive, no horizontal overflow. The actual frontend
	   value is emitted at wp_head priority 999 by design-language.php and
	   is admin-tunable via the `container_max` design token (default 1680);
	   this declaration is a fallback for any context where design tokens
	   don't load (editor canvas, pre-render previews, etc.). */
	--container: min(100%, 1680px);
	--gutter:    clamp(1.25rem, 4vw, 4rem);
	--section:   clamp(4rem, 6vw, 6rem);

	/* Radius */
	--r-sm:  6px;
	--r:     12px;
	--r-lg:  20px;
	--r-xl:  28px;
	--r-2xl: 40px;

	/* Shadows (navy-tinted) */
	--shadow-xs: 0 1px 2px hsl(var(--fg) / 0.04);
	--shadow-sm: 0 1px 3px hsl(var(--fg) / 0.05), 0 1px 2px hsl(var(--fg) / 0.03);
	--shadow-md: 0 4px 16px hsl(var(--fg) / 0.06), 0 2px 6px hsl(var(--fg) / 0.04);
	--shadow-lg: 0 20px 48px hsl(var(--fg) / 0.10), 0 8px 20px hsl(var(--fg) / 0.06);
	--shadow-xl: 0 40px 96px hsl(var(--fg) / 0.14), 0 16px 32px hsl(var(--fg) / 0.08);

	/* Motion */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* ── Semantic tokens ───────────────────────────────────────────────
	   Status / callout colours used across admissions and BSN. Folded
	   here as the single canonical declaration so family CSS doesn't
	   need to redeclare them. */
	--ok:          152 58% 34%;

	/* ── Hero pullquote panel accent (warm cream tint) ────────────────
	   Used by patterns/home-pullquote and friends. Folded here for
	   parity; family files no longer redeclare. */
}


/* ── Body / headings base tuning (matches mockup character) ────────────── */
body {
	background: hsl(var(--bg));
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-variation-settings: "opsz" 60;
}

/* ── Confident display weight ───────────────────────────────────────────
   Only 400/500/600/700 of Instrument Sans are self-hosted, so the old
   350/400 heading weights rendered as thin regular — weak for large
   display type. Unify hero + section headings to a confident 500. */
.aos-hp h1, .aos-hp h2,
.has-hero-font-size, .has-h1-font-size, .has-h2-font-size {
	font-weight: 500;
}

::selection {
	background: hsl(var(--aos-yellow) / 0.45);
	color: hsl(var(--aos-navy));
}


/* ─────────────────────────────────────────────────────────────────────────
 * Design tokens — modular scale, fluid clamps, 8pt rhythm.
 *
 * Type scale: ratio 1.250 (major third) anchored at 16px body.
 *   The clamp ranges provide fluid sizing between 360px and 1440px viewports.
 *
 * Spacing scale: 8pt grid (4/8/12/16/24/32/48/64/96/128/160/192). Aliased
 *   here as semantic tokens (--space-section, --space-block, --space-card)
 *   so component CSS reads like prose, not arithmetic.
 *
 * Why these live in :root, not theme.json: theme.json presets are exposed
 *   as --wp--preset--* (long names, only available where Gutenberg layout
 *   utilities apply). Our own --t-* / --space-* tokens are short, available
 *   everywhere, and easy to override per surface.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
	/* Type scale — fluid clamp(min, fluid, max) across 360→1440 viewports */
	--t-body:     1rem;                           /* 16px  fixed */
	--t-lede:     clamp(1.0625rem, 0.85vw + 0.85rem, 1.1875rem);  /* 17–19 */
	--t-h6:       clamp(1rem,      0.5vw  + 0.9rem,  1.125rem);   /* 16–18 */
	--t-h5:       clamp(1.125rem,  0.5vw  + 1rem,    1.25rem);    /* 18–20 */
	--t-h4:       clamp(1.25rem,   0.6vw  + 1.1rem,  1.5rem);     /* 20–24 */
	--t-h3:       clamp(1.5rem,    1vw    + 1.25rem, 1.875rem);   /* 24–30 */
	--t-h2:       clamp(2rem,      1.6vw  + 1.5rem,  2.75rem);    /* 32–44 */
	--t-h1:       clamp(2.5rem,    2.4vw  + 1.8rem,  3.75rem);    /* 40–60 */

	/* Line heights — calibrated to type role, not size */
	--lh-display: 1.05;  /* h1, hero, display */
	--lh-heading: 1.15;  /* h2, h3 */
	--lh-body:    1.6;   /* paragraph, lede */

	/* Spacing rhythm — semantic aliases on the 8pt grid */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;

	/* Vertical rhythm inside a section: eyebrow → title → lede → content */
	--rhythm-eyebrow-to-title: var(--space-4);   /* 16 */
	--rhythm-title-to-lede:    var(--space-3);   /* 12 */

	/* Section padding (py) — fluid, but capped tighter than the old 141px */
	--section-py:    clamp(4rem, 6vw, 6rem);    /* 64–96 */
	--section-px:    clamp(1.25rem, 4vw, 4rem);

	/* Container max-widths */
	--container:     min(100% - 2.5rem, 1280px);

	/* Card primitives — single source of truth for radius / padding / shadow */
	--card-radius:    14px;
	--card-padding:   var(--space-6);             /* 32 */
	--card-border:    1px solid hsl(var(--aos-border));
	--card-shadow:    0 1px 2px hsl(var(--aos-fg) / 0.04),
	                  0 6px 18px hsl(var(--aos-fg) / 0.05);
}


/* ─────────────────────────────────────────────────────────────────────────
 * Heading typography — applied site-wide. Family CSS may override SIZE
 * inside specific heroes (e.g. .adm-hero h1 wants 60px) but should NOT
 * redeclare font-family or line-height — those are global.
 * ───────────────────────────────────────────────────────────────────────── */

main h1,
main .h1 { font-family: var(--display); font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: -0.022em; font-weight: 350; }
main h2,
main .h2 { font-family: var(--display); font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: -0.018em; font-weight: 350; }
main h3,
main .h3 { font-family: var(--display); font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: -0.014em; font-weight: 400; }
main h4,
main .h4 { font-family: var(--display); font-size: var(--t-h4); line-height: var(--lh-heading); letter-spacing: -0.01em;  font-weight: 500; }
main h5,
main .h5 { font-family: var(--body);    font-size: var(--t-h5); line-height: var(--lh-heading); letter-spacing: -0.005em; font-weight: 600; }
main h6,
main .h6 { font-family: var(--body);    font-size: var(--t-h6); line-height: var(--lh-heading); font-weight: 600; }


/* ─────────────────────────────────────────────────────────────────────────
 * Section anatomy — every body section uses .sec for outer frame and
 * .sec__head for the eyebrow + title + lede block. Vertical rhythm
 * is canonical: eyebrow → title 16px, title → lede 12px, lede → content 48px.
 * ───────────────────────────────────────────────────────────────────────── */

.sec {
	padding-block: var(--section-py);
}

.sec__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--section-px);
}

/* eyebrow already styled by canonical rule; we only add inner-rhythm spacing */

/* ─────────────────────────────────────────────────────────────────────────
 * Eyebrow — canonical site-wide pattern. Two surface variants:
 *
 *   Style A (on light) — sections on cream/paper.
 *     12px Instrument Sans, weight 600, 0.16em, blue, 24px yellow-deep tick.
 *
 *   Style B (on dark)  — navy heroes, navy callouts, dark bands.
 *     11px JetBrains Mono, weight 600, 0.18em, yellow, 28px yellow tick.
 *
 * Every BEM eyebrow modifier in the theme resolves to one of these two.
 * Selectors are scoped enough (e.g. `.c-callout--navy .c-callout__meta`)
 * to beat overly-greedy descendant rules like `.c-callout p` (0,1,1).
 * Do NOT add per-component eyebrow rules in family CSS — extend this list
 * instead.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
	--eyebrow-font-light:    var(--body);
	--eyebrow-font-dark:     var(--mono);
	--eyebrow-size-light:    10px;
	--eyebrow-size-dark:     10px;
	--eyebrow-weight:        600;
	--eyebrow-tracking:      0.18em;
	--eyebrow-tracking-dark: 0.2em;
	--eyebrow-tick-light:    22px;
	--eyebrow-tick-dark:     26px;
	--eyebrow-color-light:   var(--aos-blue);
	--eyebrow-color-dark:    var(--aos-yellow);
	--eyebrow-tick-light-bg: var(--aos-yellow-deep);
	--eyebrow-tick-dark-bg:  var(--aos-yellow);
}

/* ── Style A (on light) ──────────────────────────────────────────────── */
.aos-eyebrow,
.eyebrow,
.hero__eyebrow,
.event-logistics__kicker,
.aos-news__signup-eyebrow,
.aos-byline__eyebrow,
.foot__campus-eyebrow,
.aos-post__meta {
	font-family: var(--eyebrow-font-light);
	font-size: var(--eyebrow-size-light);
	font-weight: var(--eyebrow-weight);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	color: hsl(var(--eyebrow-color-light));
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.aos-eyebrow::before,
.eyebrow::before,
.hero__eyebrow::before,
.event-logistics__kicker::before,
.aos-news__signup-eyebrow::before,
.aos-byline__eyebrow::before,
.foot__campus-eyebrow::before {
	content: "";
	width: var(--eyebrow-tick-light);
	height: 1px;
	background: hsl(var(--eyebrow-tick-light-bg));
	flex-shrink: 0;
}

/* ── Style B (on dark) ───────────────────────────────────────────────── */

.event-hero__eyebrow{
	font-family: var(--eyebrow-font-dark);
	font-size: var(--eyebrow-size-dark);
	font-weight: var(--eyebrow-weight);
	letter-spacing: var(--eyebrow-tracking-dark);
	text-transform: uppercase;
	color: hsl(var(--eyebrow-color-dark));
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.event-hero__eyebrow::before{
	content: "";
	width: var(--eyebrow-tick-dark);
	height: 1px;
	background: hsl(var(--eyebrow-tick-dark-bg));
	flex-shrink: 0;
}


/* ── Lead paragraph ────────────────────────────────────────────────────── */
.aos-lead {
	font-size: clamp(17px, 1.15vw, 19px);
	line-height: 1.55;
	color: hsl(var(--fg-muted));
	max-width: 60ch;
}


/* ══════════════════════════════════════════════════════════════════════════
   Accordion (.aos-acc)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-acc { display: flex; flex-direction: column; }
.aos-acc details {
	border-top: 1px solid hsl(var(--border));
	padding: var(--space-5) var(--space-1);     /* 24 4 */
	transition: background 200ms var(--ease-out);
}
.aos-acc details:last-child { border-bottom: 1px solid hsl(var(--border)); }
.aos-acc summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-5);                         /* 24 */
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-family: var(--display);
	font-size: var(--t-h5);                      /* 18-20 */
	font-weight: 400;
	line-height: var(--lh-heading);
	color: hsl(var(--aos-navy));
	letter-spacing: -0.012em;
}
.aos-acc summary::-webkit-details-marker { display: none; }
.aos-acc summary:focus { outline: none; }
.aos-acc summary:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-acc details > p{
	padding-top: var(--space-3);                 /* 12 */
	font-family: var(--body);
	font-size: var(--t-body);                    /* 16 */
	line-height: var(--lh-body);
	color: hsl(var(--fg-muted));
	max-width: 62ch;
}


/* ══════════════════════════════════════════════════════════════════════════
   Stepper (.aos-steps / .aos-step)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: start;
	gap: 0;
	position: relative;
}
.aos-step {
	display: flex; flex-direction: column; align-items: center;
	gap: 10px;
	text-align: center;
	position: relative;
	z-index: 2;
}


/* ══════════════════════════════════════════════════════════════════════════
   Linear progress (.aos-progress)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-progress {
	height: 6px;
	background: hsl(var(--border-soft));
	border-radius: 100px;
	overflow: hidden;
	max-width: 380px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Vertical timeline (.aos-timeline)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-timeline {
	position: relative;
	padding-left: 40px;
	margin: 0;
	list-style: none;
	display: flex; flex-direction: column; gap: 28px;
}
.aos-timeline::before {
	content: "";
	position: absolute;
	top: 10px; bottom: 10px;
	left: 13px;
	width: 1px;
	background: hsl(var(--border));
}


/* ══════════════════════════════════════════════════════════════════════════
   Pullquote (.aos-pullquote)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-pullquote {
	padding: 48px 0;
	text-align: center;
	border-top: 1px solid hsl(var(--aos-yellow-deep));
	border-bottom: 1px solid hsl(var(--aos-yellow-deep));
	position: relative;
}
.aos-pullquote::before,
.aos-pullquote::after {
	content: "";
	position: absolute;
	width: 8px; height: 8px;
	background: hsl(var(--aos-yellow));
	transform: rotate(45deg);
	left: 50%; margin-left: -4px;
}
.aos-pullquote::before { top: -4px; }
.aos-pullquote::after  { bottom: -4px; }
.aos-pullquote blockquote {
	margin: 0 auto;
	max-width: 30ch;
	font-family: var(--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	line-height: 1.2;
	letter-spacing: -0.018em;
	color: hsl(var(--aos-navy));
}
.aos-pullquote__by {
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}


/* ══════════════════════════════════════════════════════════════════════════
   Tables (.aos-table)
   ══════════════════════════════════════════════════════════════════════════ */

.aos-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--body);
	font-size: 14px;
	font-variant-numeric: tabular-nums lining-nums;
	color: hsl(var(--fg));
	line-height: 1.5;
}
.aos-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: hsl(var(--bg-alt));
	color: hsl(var(--aos-navy));
	font-family: var(--body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid hsl(var(--border-strong));
	white-space: nowrap;
}
.aos-table th.is-num,
.aos-table td.is-num { text-align: right; }
.aos-table th.is-center,
.aos-table td.is-center { text-align: center; }
.aos-table tbody td {
	padding: 16px 20px;
	border-bottom: 1px solid hsl(var(--border-soft));
	vertical-align: top;
}
.aos-table tbody tr:last-child td { border-bottom: none; }
.aos-table tbody tr:hover td { background: hsl(var(--aos-yellow) / 0.05); }


/* ══════════════════════════════════════════════════════════════════════════
   Contact card (.c-contact)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Empty state (.aos-empty) ─────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   Utility strip (.aos-util) — top-of-page thin nav strip
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Hero — photo-forward variant (.aos-hero)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-hero {
	background: hsl(var(--aos-navy));
	color: hsl(var(--paper));
	position: relative;
	overflow: hidden;
}
.aos-hero h1 {
	font-family: var(--display);
	font-weight: 350;
	line-height: 1.04;
	letter-spacing: -0.022em;
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	color: hsl(var(--paper));
	max-width: 22ch;
	margin: 0 0 24px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Program card (.c-program)
   ══════════════════════════════════════════════════════════════════════════ */
.c-program {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 24px;
	background: hsl(var(--paper));
	border: 1px solid hsl(var(--border));
	border-radius: var(--r-lg);
	transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.c-program:hover {
	transform: translateY(-2px);
	border-color: hsl(var(--border-strong));
	box-shadow: var(--shadow-md);
}


/* ══════════════════════════════════════════════════════════════════════════
   Stat block (.c-stat)
   ══════════════════════════════════════════════════════════════════════════ */
.c-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Callout band (.c-callout)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Button — AOS primary / ghost
   ══════════════════════════════════════════════════════════════════════════ */
.aos-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy));
	font-family: var(--body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	border-radius: 999px;
	text-decoration: none;
	transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.aos-btn:hover {
	background: hsl(var(--aos-yellow-deep));
	transform: translateY(-1px);
}
.aos-btn--primary {
	background: hsl(var(--aos-navy));
	color: hsl(var(--paper));
}
.aos-btn--primary:hover {
	background: hsl(var(--aos-navy-soft));
}


/* ══════════════════════════════════════════════════════════════════════════
   Section wrapper (.aos-section)
   ══════════════════════════════════════════════════════════════════════════ */
.aos-section {
	padding: var(--section) 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   Global safety
   ══════════════════════════════════════════════════════════════════════════ */
main svg:not([width]):not([height]) { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER + PRIMARY NAVIGATION
   Loads site-wide. Editorial nav with a primary CTA, responsive with a
   JS-enhanced mobile drawer.
   ══════════════════════════════════════════════════════════════════════════ */

.aos-header {
	padding: 18px clamp(16px, 4vw, 40px) !important;
	background: var(--wp--preset--color--background, hsl(var(--bg)));
}

/* Mobile toggle */
.aos-header__toggle {
	display: none;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 10px 8px;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	border-radius: 8px;
}
.aos-header__toggle:hover {
	background: hsl(var(--aos-yellow-soft));
}

@media (max-width: 860px) {
	.aos-header__toggle {
		display: flex;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   Tiny mono strip above the page hero on /news/ and single posts.
   ══════════════════════════════════════════════════════════════════════════ */

.aos-breadcrumb {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px clamp(16px, 4vw, 40px) 0;
}
.aos-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-fg-subtle, 212 14% 53%));
}
.aos-breadcrumb__list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.aos-breadcrumb__list li + li::before {
	content: "›";
	color: hsl(var(--border-strong, 220 9% 82%));
	font-weight: 400;
}
.aos-breadcrumb__list a {
	color: hsl(var(--aos-fg-muted, 212 21% 38%));
	text-decoration: none;
	transition: color 160ms;
}
.aos-breadcrumb__list a:hover {
	color: hsl(var(--aos-navy));
}
.aos-breadcrumb__list li[aria-current="page"] {
	color: hsl(var(--aos-navy));
}

.aos-breadcrumb--post {
	padding-top: 28px;
	padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.aos-breadcrumb__list a {
		transition: none !important;
	}
}

/* ── Editorial emphasis — Cormorant Garamond italic for <em>/<i> in display type & quotes ── */
h1 em, h2 em, h3 em, .aos-hp em, blockquote em, blockquote i,
.has-hero-font-size em, .has-h1-font-size em, .has-h2-font-size em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
}

/* ── Buttons (core blocks) — follow the site-wide .aos-btn system: navy
   pill + teal arrow chip (the chip is generated, so any editor-inserted
   button inherits the look). Dark bands flip to the paper variant. ── */
.wp-block-button__link {
	font-family: var(--body);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	border-radius: 999px;
	padding: 7px 7px 7px 22px;
	transition: background .18s var(--ease-out), color .18s var(--ease-out),
	            border-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: hsl(var(--aos-navy));
	color: hsl(var(--paper));
	border: 1px solid hsl(var(--aos-navy-deep) / 0.9);
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.09),
		0 1px 2px hsl(var(--aos-navy-deep) / 0.18),
		0 12px 32px -8px hsl(var(--aos-navy-deep) / 0.35);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "\2192";
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	font-size: 0.9rem;
	line-height: 1;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: hsl(var(--aos-navy-soft));
	border-color: hsl(var(--aos-navy-deep) / 0.9);
	color: hsl(var(--paper));
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.12),
		0 2px 4px hsl(var(--aos-navy-deep) / 0.2),
		0 18px 40px -10px hsl(var(--aos-navy-deep) / 0.42);
}
/* Flip on dark bands: hairline stroke ghost, teal chip carries the color */
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-navy-soft-background-color) .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: transparent;
	color: hsl(var(--bg));
	border-color: hsl(var(--bg) / 0.28);
	box-shadow: none;
}
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-navy-soft-background-color) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: hsl(var(--aos-yellow) / 0.08);
	color: hsl(var(--bg));
	border-color: hsl(var(--aos-yellow) / 0.65);
	box-shadow: 0 12px 32px -12px hsl(var(--aos-yellow) / 0.25);
}
/* Secondary = the same pill and the same chip, drawn in hairline instead of
   filled. Identical geometry to the primary, so a primary/secondary pair sits
   on one optical line — the fill is the only thing that changes. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	color: hsl(var(--fg));
	border: 1px solid hsl(var(--border-strong));
	box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link::after {
	content: "\2192";
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: transparent;
	color: hsl(var(--fg));
	font-size: 0.9rem;
	line-height: 1;
	transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: hsl(var(--fg) / 0.4);
	color: hsl(var(--fg));
	background: transparent;
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover::after {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
}
/* Dark bands: hairline goes light */
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-navy-soft-background-color) .wp-block-button.is-style-outline > .wp-block-button__link,
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-navy-soft-background-color) .wp-block-button.is-style-outline > .wp-block-button__link::after {
	border-color: hsl(var(--bg) / 0.28);
	color: hsl(var(--bg));
}
.wp-block-button__link:focus-visible {
	outline: 2px solid hsl(var(--aos-blue));
	outline-offset: 3px;
}

/* ── Headings inside dark sections inherit the light section text color ──
   (theme.json pins headings to `foreground`; on dark bands that's invisible.
   Headings that carry their own has-*-color class are left untouched.) ── */
.has-navy-background-color :is(h1,h2,h3,h4,h5,h6):not([class*="-color"]),
.has-navy-deep-background-color :is(h1,h2,h3,h4,h5,h6):not([class*="-color"]),
.has-navy-soft-background-color :is(h1,h2,h3,h4,h5,h6):not([class*="-color"]) {
	color: inherit;
}

/* ── Contact form — tokenized, premium ── */
.aos-form { display:grid; gap:22px; }
.aos-form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.aos-field { display:grid; gap:8px; }
.aos-field__label { font-family:var(--body); font-size:.8125rem; font-weight:600; letter-spacing:-.005em; color:hsl(var(--fg)); }
.aos-field__label span { color:hsl(var(--fg-subtle)); font-weight:400; }
.aos-input, .aos-textarea {
	font-family:var(--body); font-size:1rem; color:hsl(var(--fg));
	background:hsl(var(--paper)); border:1.5px solid hsl(var(--border-strong));
	border-radius:12px; padding:12px 14px; width:100%;
	transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.aos-input::placeholder, .aos-textarea::placeholder { color:hsl(var(--fg-subtle)); }
.aos-input:focus, .aos-textarea:focus { outline:none; border-color:hsl(var(--aos-blue)); box-shadow:0 0 0 3px hsl(var(--aos-blue) / 0.14); }
.aos-textarea { resize:vertical; min-height:130px; line-height:1.5; }
.aos-chips { display:flex; flex-wrap:wrap; gap:8px; }
.aos-chip { font-family:var(--body); font-size:.8125rem; font-weight:500; padding:8px 15px; border-radius:999px;
	border:1.5px solid hsl(var(--border-strong)); background:hsl(var(--paper)); color:hsl(var(--fg-muted));
	cursor:pointer; transition:border-color .16s var(--ease-out), color .16s var(--ease-out), background .16s var(--ease-out); }
.aos-chip:hover { border-color:hsl(var(--aos-blue)); color:hsl(var(--aos-blue)); }
.aos-chip--on { background:hsl(var(--aos-yellow)); border-color:hsl(var(--aos-yellow)); color:hsl(var(--aos-navy)); }
.aos-contact-item { padding:18px 0; border-top:1px solid hsl(var(--border)); }
.aos-contact-item__label { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:hsl(var(--aos-blue)); }
.aos-contact-item__value { font-size:1.125rem; color:hsl(var(--fg)); margin-top:5px; }
.aos-contact-item__value a { color:inherit; }
@media (max-width:600px){ .aos-form__row{ grid-template-columns:1fr; } }

/* ── Cards: responsive padding so headings fit narrow multi-column layouts ──
   (48px inline padding squeezed content below word width -> mid-word breaks).
   !important is required to override the per-card inline padding. Words stay whole. */
.aos-hp .wp-block-columns > .wp-block-column.has-background,
.aos-hp .wp-block-columns > .wp-block-column.has-border-color {
	padding: clamp(1.25rem, 0.8vw + 1rem, 2rem) !important;
}
.aos-hp .wp-block-column .wp-block-heading { overflow-wrap: break-word; word-break: normal; hyphens: none; }

/* Card titles: slightly smaller so 8+ char words fit a 4-up row without mid-word breaks */
.aos-hp .wp-block-column.has-background > .wp-block-heading,
.aos-hp .wp-block-column.has-border-color > .wp-block-heading {
	font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3rem);
	line-height: 1.2;
}

/* Card titles in tight multi-up grids: hyphenate long words cleanly (no raw mid-word breaks) */
.aos-hp .wp-block-column.has-background > .wp-block-heading,
.aos-hp .wp-block-column.has-border-color > .wp-block-heading {
	-webkit-hyphens: auto;
	hyphens: auto;
	font-size: clamp(1rem, 0.3vw + 0.92rem, 1.2rem);
}

/* ── Scroll reveal — sections rise + fade as they enter the viewport ──
   Applied only to below-the-fold sections by aos-theme.js (no above-fold flash).
   Fully disabled under prefers-reduced-motion. */
.aos-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.aos-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aos-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ── Readable measure: cap standalone prose within the wider content frame ──
   (card/column paragraphs are already narrower than this, so unaffected) */
.aos-hp > .wp-block-group > p,
.aos-hp > .wp-block-group > .wp-block-group > p { max-width: 64ch; }

/* ── Single-edge alignment ─────────────────────────────────────────────
   WP's constrained layout centers each child by its OWN max-width, so the
   inline-flex eyebrow lands at the padding edge and the width-capped lede
   center-shifts right — three different left edges from the heading. Pin
   every section eyebrow + standalone paragraph to the SAME content-column
   edge as the constrained heading. The calc reproduces the heading's left
   auto-margin, (container - content-size) / 2; on narrow viewports it
   clamps to 0 so everything hangs from the padding edge, matching the
   then-full-width heading. */
.aos-hp > .wp-block-group > p,
.aos-hp > .wp-block-group > .aos-eyebrow {
	/* !important overrides WP constrained-layout's `margin: auto !important`
	   (which centers by max-width, and computes to 0 on the inline-flex
	   eyebrow). */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1080px)) / 2)) !important;
	margin-right: auto !important;
}

/* ── Consistent eyebrow → title rhythm ─────────────────────────────────
   The eyebrow is the same size in every section, so its gap to the title
   should be constant. Section markup carried varying block-gaps (rendered
   16 / 8 / 12px across sections); pin to the design token so the
   label→title relationship reads identically site-wide. */
.aos-hp > .wp-block-group > .aos-eyebrow + :is(h1, h2, h3) {
	margin-top: var(--rhythm-eyebrow-to-title, 16px) !important;
}

/* ── Section vertical rhythm scales with the viewport ──────────────────
   The type scale compresses ~25% on phones (H1 68->45, H2 44->32) but the
   section padding was pinned at a fixed 64/80px, leaving the vertical
   rhythm proportionally too loose. Compress it in step on small screens.
   Scales 64px (at 600px) down to ~44px (narrow phones); handoff at 600px
   matches the desktop value so there's no visible jump. */
@media (max-width: 600px) {
	.aos-hp > .wp-block-group {
		padding-top: clamp(2.75rem, 10vw, 4rem) !important;
		padding-bottom: clamp(2.75rem, 10vw, 4rem) !important;
	}
}

/* ── Card craft — soft resting elevation + a teal-edged lift on hover.
   Covers discipline cards (wp:columns with card surface/border) AND work
   cards (bordered groups). Cards read as premium objects at rest, then
   rise toward a teal edge on hover. ── */
.aos-hp .wp-block-column.has-border-color,
.aos-hp .wp-block-column.has-background-card-background-color,
.aos-hp .wp-block-group.has-border-color {
	box-shadow: var(--shadow-sm);
	transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), border-color .34s var(--ease-out);
}
.aos-hp .wp-block-column.has-border-color:hover,
.aos-hp .wp-block-column.has-background-card-background-color:hover,
.aos-hp .wp-block-group.has-border-color:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: hsl(var(--aos-yellow) / 0.55);
}

/* ── FAQ — refine the native <details>: drop the default triangle for a
   teal +/- marker that collapses on open, plus a hover affordance. ── */
.aos-hp details.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding-right: 2.5rem;
	transition: color .2s var(--ease-out);
}
.aos-hp details.wp-block-details > summary::-webkit-details-marker { display: none; }
.aos-hp details.wp-block-details > summary::before,
.aos-hp details.wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 0.3rem;
	top: 50%;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	background: hsl(var(--aos-yellow));
	border-radius: 2px;
	transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.aos-hp details.wp-block-details > summary::after { transform: rotate(90deg); }
.aos-hp details.wp-block-details[open] > summary::after { opacity: 0; }
.aos-hp details.wp-block-details > summary:hover { color: hsl(var(--aos-yellow-deep)); }
.aos-hp details.wp-block-details > summary:focus { outline: none; }
.aos-hp details.wp-block-details > summary:focus-visible {
	outline: 2px solid hsl(var(--aos-blue));
	outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   ATMOSPHERIC DEPTH — aurora glows on the dark bands tie the content back
   to the cinematic hero, so the navy sections read as designed light, not
   flat fills. The finale drifts slowly; content always sits above. ══════ */
.aos-hp .wp-block-group.has-navy-background-color,
.aos-hp .wp-block-group.has-navy-deep-background-color {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.aos-hp .wp-block-group.has-navy-background-color::before,
.aos-hp .wp-block-group.has-navy-deep-background-color::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 78% at 10% 6%, hsl(var(--aos-yellow) / 0.16), transparent 60%),
		radial-gradient(52% 68% at 94% 104%, hsl(var(--aos-blue) / 0.20), transparent 62%),
		radial-gradient(46% 62% at 80% 8%, hsl(var(--aos-blue-deep) / 0.28), transparent 72%);
}
.aos-hp .wp-block-group.has-navy-background-color > *,
.aos-hp .wp-block-group.has-navy-deep-background-color > * {
	position: relative;
	z-index: 1;
}
/* The finale: a richer, slowly drifting aurora + a hairline of teal light. */
.aos-hp .wp-block-group.has-navy-deep-background-color {
	border-top: 1px solid hsl(var(--aos-yellow) / 0.28);
}
.aos-hp .wp-block-group.has-navy-deep-background-color::before {
	background:
		radial-gradient(46% 58% at 22% 46%, hsl(var(--aos-yellow) / 0.30), transparent 62%),
		radial-gradient(62% 74% at 102% 104%, hsl(var(--aos-blue) / 0.44), transparent 58%),
		radial-gradient(52% 66% at 90% -6%, hsl(var(--aos-blue-deep) / 0.52), transparent 66%),
		radial-gradient(40% 50% at 60% 120%, hsl(var(--aos-yellow-deep) / 0.30), transparent 64%);
	background-size: 150% 150%;
	animation: aosAurora 22s ease-in-out infinite alternate;
}
@keyframes aosAurora {
	from { background-position: 0% 0%; }
	to   { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.aos-hp .wp-block-group.has-navy-deep-background-color::before { animation: none; }
}

/* ══ Designed cards — a teal→blue accent bar draws across the top on hover,
   and the discipline index reads as a teal marker instead of muted grey. ══ */
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color,
.aos-hp .wp-block-group.has-border-color {
	position: relative;
	overflow: hidden;
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color::after,
.aos-hp .wp-block-group.has-border-color::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, hsl(var(--aos-yellow)), hsl(var(--aos-blue)));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease-out);
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color:hover::after,
.aos-hp .wp-block-group.has-border-color:hover::after {
	transform: scaleX(1);
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color > p:first-child {
	color: hsl(var(--aos-yellow)) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em;
}

/* ══════════════════════════════════════════════════════════════════════
   SELECTED WORK — real products in premium device mockups. Alternating
   editorial feature rows tie the portfolio to the cinematic hero: a soft
   teal/blue backdrop glow, titanium phone frames for the iOS apps, and a
   browser frame for the web platform. Fully tokenized. ══════════════════ */
.aos-work {
	border-top: 1px solid hsl(var(--border));
	padding-block: clamp(4rem, 9vh, 7rem);
}
.aos-work__inner {
	/* match the WP constrained content edge exactly (1080px + root padding) */
	max-width: calc(var(--wp--style--global--content-size, 1080px) + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}
.aos-work__head { max-width: 46ch; margin-bottom: clamp(3rem, 7vh, 5rem); }
.aos-work__head h2 {
	margin: 0.5rem 0 0;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: hsl(var(--fg));
}
.aos-work__items { display: flex; flex-direction: column; gap: clamp(4rem, 10vh, 8rem); }

.aos-work__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: center;
}
.aos-work__item:nth-child(even) .aos-work__media { order: 2; }
.aos-work__item:nth-child(even) .aos-work__body { order: 1; }

/* Media cell — soft teal/blue backdrop glow ties it to the hero */
.aos-work__media {
	position: relative;
	display: flex;
	justify-content: center;
	isolation: isolate;
}
.aos-work__media::before {
	content: "";
	position: absolute;
	inset: -10% -6%;
	z-index: -1;
	background:
		radial-gradient(58% 54% at 50% 42%, hsl(var(--aos-yellow) / 0.18), transparent 70%),
		radial-gradient(70% 62% at 62% 82%, hsl(var(--aos-blue) / 0.16), transparent 72%);
	filter: blur(8px);
}

/* Titanium iPhone frame (screenshots already carry the status bar/island) */
.aos-phone {
	width: min(100%, 286px);
	aspect-ratio: 640 / 1391;
	padding: 9px;
	border-radius: 46px;
	background: linear-gradient(155deg, hsl(var(--aos-navy-soft)) 0%, hsl(var(--aos-navy-deep)) 52%, hsl(var(--aos-navy)) 100%);
	box-shadow:
		0 2px 4px hsl(var(--aos-navy-deep) / 0.30),
		0 30px 60px hsl(var(--aos-navy-deep) / 0.32),
		inset 0 0 0 1px hsl(var(--paper) / 0.06);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.aos-phone img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 38px;
	display: block;
}
.aos-work__item:hover .aos-phone {
	transform: translateY(-8px) rotate(-0.6deg);
	box-shadow:
		0 4px 8px hsl(var(--aos-navy-deep) / 0.34),
		0 44px 82px hsl(var(--aos-navy-deep) / 0.40),
		inset 0 0 0 1px hsl(var(--paper) / 0.08);
}

/* Browser frame — the web platform */
.aos-browser {
	width: 100%;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: hsl(var(--bg-card));
	border: 1px solid hsl(var(--border));
	box-shadow: 0 2px 4px hsl(var(--aos-navy) / 0.06), 0 30px 60px hsl(var(--aos-navy) / 0.16);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.aos-work__item:hover .aos-browser {
	transform: translateY(-8px);
	box-shadow: 0 4px 8px hsl(var(--aos-navy) / 0.08), 0 44px 82px hsl(var(--aos-navy) / 0.22);
}
.aos-browser__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 15px;
	background: linear-gradient(hsl(var(--bg-alt)), hsl(var(--bg-card)));
	border-bottom: 1px solid hsl(var(--border));
}
.aos-browser__dot { width: 11px; height: 11px; border-radius: 50%; background: hsl(var(--border-strong)); }
.aos-browser__addr {
	margin-left: 10px;
	flex: 1;
	height: 22px;
	border-radius: 999px;
	background: hsl(var(--bg-alt));
	display: flex;
	align-items: center;
	padding: 0 12px;
	font-size: 11px;
	color: hsl(var(--fg-subtle));
	font-family: ui-monospace, "JetBrains Mono", monospace;
}
.aos-browser img { width: 100%; display: block; }

/* Body copy */
.aos-work__tag {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-blue-deep));
}
.aos-work__name {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: hsl(var(--fg));
}
.aos-work__desc {
	margin: 0 0 1.4rem;
	color: hsl(var(--fg-muted));
	max-width: 46ch;
	line-height: 1.55;
}
.aos-work__roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aos-work__roles li {
	font-size: 0.78rem;
	font-weight: 600;
	color: hsl(var(--aos-blue-deep));
	padding: 5px 12px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow-soft));
	border: 1px solid hsl(var(--aos-yellow) / 0.22);
}

@media (max-width: 860px) {
	.aos-work__item { grid-template-columns: 1fr; gap: 2rem; justify-items: center; }
	.aos-work__item:nth-child(even) .aos-work__media,
	.aos-work__item:nth-child(even) .aos-work__body { order: initial; }
	.aos-work__body { text-align: left; width: 100%; }
	.aos-phone { width: min(70%, 260px); }
}
@media (prefers-reduced-motion: reduce) {
	.aos-work__item:hover .aos-phone,
	.aos-work__item:hover .aos-browser { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   WORLD-CLASS PASS — editorial art direction across every homepage band.
   Section indexing note: main.aos-hp children are 1 legacy hero (hidden),
   2 thesis, 3 one-team, 4 disciplines, 5 work, 6 marquee, 7 stats,
   8 testimonials, 9 faq, 10 finale. nth-child rules below rely on this.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. THESIS — a statement moment, not a paragraph ── */
.aos-hp > .aos-sec-statement {
	position: relative;
	isolation: isolate;
	padding-top: clamp(4.5rem, 10vh, 7.5rem) !important;
	padding-bottom: clamp(4.5rem, 10vh, 7.5rem) !important;
}
.aos-hp > .aos-sec-statement::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(46% 64% at 10% 18%, hsl(var(--aos-yellow-soft) / 0.6), transparent 70%);
}
.aos-hp > .aos-sec-statement > * { position: relative; z-index: 1; }
.aos-hp > .aos-sec-statement > h2 {
	color: hsl(var(--fg)) !important;
	font-size: clamp(2rem, 3.4vw, 3.1rem) !important;
	line-height: 1.14 !important;
	letter-spacing: -0.02em;
	max-width: 26ch;
	/* WP centers width-capped children; pin to the shared content edge */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1080px)) / 2)) !important;
	margin-right: auto !important;
}
.aos-hp > .aos-sec-statement > h2 em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.14em;
	letter-spacing: 0;
}
.aos-hp > .aos-sec-statement > p {
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}

/* ── 2. ONE TEAM — numbered editorial columns, gradient hairlines ── */
.aos-hp > .aos-sec-index .wp-block-columns { counter-reset: aos-team; }
.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column {
	counter-increment: aos-team;
	position: relative;
	border-top: none !important;
	padding-top: 1.5rem !important;
}
.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, hsl(var(--aos-yellow)), hsl(var(--aos-blue) / 0.45) 55%, transparent);
}
.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column::after {
	content: "0" counter(aos-team);
	position: absolute;
	top: 0.9rem;
	right: 0;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: hsl(var(--aos-yellow));
}

/* ── 3. DISCIPLINE CARDS — interior teal glow wakes on hover ── */
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(70% 55% at 85% 0%, hsl(var(--aos-yellow) / 0.10), transparent 70%);
	opacity: 0;
	transition: opacity .4s var(--ease-out);
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color:hover::before { opacity: 1; }

/* ── 4. STATS — hairline separators, tabular numerals ── */
@media (min-width: 782px) {
	.aos-hp .wp-block-group.has-navy-background-color .wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: 1px solid hsl(var(--paper) / 0.12);
		padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
	}
}
.aos-hp .wp-block-group.has-navy-background-color .wp-block-column > h3 {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* ── 5. TESTIMONIALS — editorial pull quotes, serif open-quote flourish ── */
.aos-tq {
	position: relative;
	padding-top: 2.5rem;
	line-height: 1.55 !important;
	color: hsl(var(--fg)) !important;
}
.aos-tq::before {
	content: "\201C";
	position: absolute;
	top: -0.35rem;
	left: -0.1em;
	font-family: var(--editorial);
	font-size: 4rem;
	line-height: 1;
	font-weight: 500;
	color: hsl(var(--aos-yellow) / 0.9);
}
.aos-hp .wp-block-column:has(.aos-tq) {
	border-top: 1px solid hsl(var(--border));
	padding-top: 1.5rem;
}
.aos-hp .wp-block-column:has(.aos-tq) > p:nth-of-type(2) {
	font-weight: 600;
	color: hsl(var(--fg));
	margin-bottom: 0;
}
.aos-hp .wp-block-column:has(.aos-tq) > p:nth-of-type(3) {
	margin-top: 0.2rem !important;
}

/* ── 6. TECH MARQUEE — kinetic strip between work and impact ── */
.aos-marquee {
	overflow: hidden;
	border-top: 1px solid hsl(var(--border));
	border-bottom: 1px solid hsl(var(--border));
	background: hsl(var(--bg));
	padding-block: 1.1rem;
}
.aos-marquee__track {
	display: flex;
	width: max-content;
	animation: aosMarquee 36s linear infinite;
}
.aos-marquee:hover .aos-marquee__track { animation-play-state: paused; }
.aos-marquee__set { display: flex; align-items: center; flex: 0 0 auto; }
.aos-marquee__set span {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
	padding-inline: 1.6rem;
}
.aos-marquee__set i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: hsl(var(--aos-yellow));
	flex: 0 0 auto;
}
@keyframes aosMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.aos-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 8px; }
	.aos-marquee__set:last-child { display: none; }
}

/* ── 7. STAGGERED COLUMN ENTRANCES — JS-gated via .aos-reveal; uses the
   `translate` property so it never fights the hover `transform` lift ── */
.aos-reveal .wp-block-columns > .wp-block-column { opacity: 0; }
.aos-reveal.is-in .wp-block-columns > .wp-block-column {
	animation: aosRise .65s var(--ease-out) both;
}
.aos-reveal.is-in .wp-block-columns > .wp-block-column:nth-child(2) { animation-delay: 110ms; }
.aos-reveal.is-in .wp-block-columns > .wp-block-column:nth-child(3) { animation-delay: 220ms; }
.aos-reveal.is-in .wp-block-columns > .wp-block-column:nth-child(4) { animation-delay: 330ms; }
@keyframes aosRise {
	from { opacity: 0; translate: 0 18px; }
	to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.aos-reveal .wp-block-columns > .wp-block-column { opacity: 1 !important; animation: none !important; translate: none !important; }
}

/* ── 8. FILMIC GRAIN — quiet texture on the dark bands ── */
.aos-hp .wp-block-group.has-navy-background-color::after,
.aos-hp .wp-block-group.has-navy-deep-background-color::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════
   NUCLEAR PASS — craft systems layered over the whole page
   ══════════════════════════════════════════════════════════════════════ */

/* ── Scroll-progress hairline (element injected by aos-theme.js) ── */
.aos-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 300;
	background: linear-gradient(90deg, hsl(var(--aos-yellow)), hsl(var(--aos-blue)));
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ── Brand text selection ── */
::selection {
	background: hsl(var(--aos-yellow) / 0.9);
	color: hsl(var(--paper));
}

/* ── Section headings rise into focus as their band reveals ── */
.aos-reveal > h2 { opacity: 0; }
.aos-reveal.is-in > h2 {
	animation: aosHeadRise .8s var(--ease-out) 90ms both;
}
@keyframes aosHeadRise {
	from { opacity: 0; translate: 0 22px; }
	to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.aos-reveal > h2 { opacity: 1 !important; animation: none !important; translate: none !important; filter: none !important; }
}

/* ── FAQ — editorial split: sticky title column, questions column.
   Targets the only alt-background section that contains <details>. ── */
@media (min-width: 900px) {
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
		grid-auto-flow: dense;
		column-gap: clamp(2.5rem, 5vw, 5.5rem);
		align-items: start;
		/* alignfull escapes root padding via negative margins, so the % basis
		   is (section width - 2*root padding); add root padding back to land
		   on the exact shared 180px content edge */
		padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--content-size, 1080px)) / 2 + var(--wp--style--root--padding-left, 24px))) !important;
	}
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > .aos-eyebrow,
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > h2 {
		grid-column: 1;
	}
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > h2 {
		position: sticky;
		top: 130px;
		font-size: clamp(1.9rem, 2.8vw, 2.6rem) !important;
		line-height: 1.1;
		max-width: 14ch !important;
	}
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > details {
		grid-column: 2;
	}
	.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > details:first-of-type {
		margin-top: 0 !important;
	}
}

/* ── Finale — the italic word carries the whole headline ── */
.aos-hp .wp-block-group.has-navy-deep-background-color > h2 em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.14em;
	letter-spacing: 0;
	color: hsl(var(--aos-yellow));
}

/* ══════════════════════════════════════════════════════════════════════
   CORE TYPE & RHYTHM SYSTEM — one scale, one rhythm, everywhere.
   Audit found 5 H2 sizes (40–68px), 4 section paddings (64–108px),
   uncapped 1080px headline measures, sibling titles 11px apart, and an
   inverted stat rhythm. This block is the single source of truth; it
   deliberately overrides the scattered per-section values above.

   Scale (from 16px body): 14 · 16 · 21 · 26 · 34 · 52 · 66
   Two display levels only: statement (thesis + finale) and section H2.
   ══════════════════════════════════════════════════════════════════════ */
:root {
	--type-statement: clamp(2.6rem, 1.45rem + 2.95vw, 4.125rem);  /* 66px @1440 */
	--type-h2:        clamp(2.25rem, 1.2rem + 2.3vw, 3.25rem);    /* 52px @1440 */
	--type-h2-sm:     clamp(1.75rem, 1.35rem + 1.3vw, 2.625rem);  /* 42px @1440 — narrow-column contexts */
	--type-h3-lg:     1.625rem;                                   /* 26px — open pillar titles */
	--type-h3:        1.3125rem;                                  /* 21px — card titles */
	--type-num:       2.125rem;                                   /* 34px — stat numerals */
	--type-lede:      1.25rem;                                    /* 20px */
	--disp-lh:        1.08;
	--disp-ls:        -0.022em;
	--sec-pad:        clamp(5.5rem, 4rem + 3.2vw, 7.5rem);        /* ~110px @1440 */
	--head-gap:       clamp(2.75rem, 2rem + 2vw, 3.5rem);         /* H2 → content, 56px @1440 */
}

/* Balanced wrapping for all display text */
.aos-hp h1, .aos-hp h2, .aos-hp h3,
.aos-work__name, .aos-work__head h2 { text-wrap: balance; }

/* One section padding for every band (mobile compression rule still wins <601px) */
@media (min-width: 601px) {
	.aos-hp > .wp-block-group,
	.aos-hp > .aos-work {
		padding-top: var(--sec-pad) !important;
		padding-bottom: var(--sec-pad) !important;
	}
}

/* One H2 spec: size, leading, tracking, weight, capped measure, shared edge */
.aos-hp > .wp-block-group > h2,
.aos-work__head h2 {
	font-size: var(--type-h2) !important;
	line-height: var(--disp-lh) !important;
	letter-spacing: var(--disp-ls) !important;
	font-weight: 500;
	max-width: 24ch;
	margin-top: 0;
	margin-bottom: var(--head-gap) !important;
}
.aos-hp > .wp-block-group > h2 {
	/* width-capped headings must still hang on the shared content edge */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1080px)) / 2)) !important;
	margin-right: auto !important;
}
/* Eyebrow → title: one gap */
.aos-hp > .wp-block-group > .aos-eyebrow + :is(h1, h2, h3),
.aos-work__head .aos-eyebrow + h2 {
	margin-top: 20px !important;
}
.aos-work__head { margin-bottom: 0; }
.aos-work__head h2 { margin-bottom: var(--head-gap); }
.aos-work__items { margin-top: 0; }

/* Statement bands (thesis + finale): one step up, tighter measure */
.aos-hp > .aos-sec-statement > h2,
.aos-hp > .wp-block-group.has-navy-deep-background-color > h2 {
	font-size: var(--type-statement) !important;
	line-height: 1.06 !important;
	max-width: 18ch;
}

/* Narrow-column H2 (FAQ split title) — mobile keeps the shared head gap */
.aos-hp > .wp-block-group.has-background-alt-background-color:has(> details) > h2 {
	font-size: var(--type-h2-sm) !important;
}

/* Interior (program) pages: map the size presets onto the system scale so
   every section title sits on 52/42/66 like the homepage (interior QA found
   44px strays). FAQ groups keep their deliberate narrow step-down. */
.aos-program-page h2.has-h2-font-size {
	font-size: var(--type-h2-sm) !important;
	line-height: var(--disp-lh) !important;
	letter-spacing: var(--disp-ls) !important;
}
.aos-program-page h2.has-h1-font-size {
	font-size: var(--type-h2) !important;
	line-height: var(--disp-lh) !important;
	letter-spacing: var(--disp-ls) !important;
}
/* FAQ groups keep the deliberate narrow step-down (must follow the rule above) */
.aos-program-page .wp-block-group:has(> details) > h2.has-h1-font-size {
	font-size: var(--type-h2-sm) !important;
}

/* Mid-level titles: two deliberate steps, both weight 500 */
.aos-hp > .aos-sec-index .wp-block-column > h3 {
	font-size: var(--type-h3-lg) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.014em !important;
	font-weight: 500 !important;
}
.aos-hp .wp-block-column.has-background > .wp-block-heading,
.aos-hp .wp-block-column.has-border-color > .wp-block-heading {
	font-size: var(--type-h3) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	font-weight: 500 !important;
}
.aos-work__name { font-weight: 500; letter-spacing: -0.02em; }

/* One grid gap for every column layout */
.aos-hp .wp-block-columns { gap: 40px 32px !important; }

/* Stats: numeral one step up, label tight to its description (proximity fixed) */
.aos-hp .wp-block-group.has-navy-background-color .wp-block-column > h3 {
	font-size: var(--type-num) !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	margin-bottom: 12px !important;
}
.aos-hp .wp-block-group.has-navy-background-color .wp-block-column > h3 + p {
	font-size: 0.9375rem;
	margin-bottom: 0 !important;
}
.aos-hp .wp-block-group.has-navy-background-color .wp-block-column > p + p {
	margin-top: 8px !important;
	font-size: 0.875rem;
	line-height: 1.55;
}

/* Ledes: readable measure, consistent size */
.aos-hp > .wp-block-group > p.has-lead-font-size {
	font-size: var(--type-lede) !important;
	line-height: 1.55 !important;
	max-width: 58ch;
}
.aos-vhero__tagline { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }

/* ══════════════════════════════════════════════════════════════════════
   UNMISTAKABLY PREMIUM — structural pass. An editorial numbering spine,
   a second split layout to break header-plus-columns repetition, correct
   statement proximity, de-templated labels, unified button geometry.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section numbering spine: eyebrows carry a mono index (01–07).
   Only sections that have an eyebrow increment; the hidden legacy hero
   generates no box, so it never counts. ── */
.aos-hp { counter-reset: aossec; }
.aos-hp > :is(.wp-block-group, .aos-work):has(.aos-eyebrow) { counter-increment: aossec; }
.aos-hp .aos-eyebrow::before {
	content: counter(aossec, decimal-leading-zero);
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	transform: none;
	display: inline-block;
	font-family: var(--mono);
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.1em;
	color: hsl(var(--fg-subtle));
	margin-right: 12px;
}
.aos-hp .wp-block-group.has-navy-background-color .aos-eyebrow::before,
.aos-hp .wp-block-group.has-navy-deep-background-color .aos-eyebrow::before {
	color: hsl(var(--paper) / 0.55);
}

/* ── One team → editorial index: split layout with numbered rows.
   Mirrors the FAQ split so the page alternates layout systems instead of
   repeating header-plus-three-columns. ── */
@media (min-width: 900px) {
	.aos-hp > .aos-sec-index {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(2.5rem, 5vw, 5.5rem);
		align-items: start;
		padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--content-size, 1080px)) / 2 + var(--wp--style--root--padding-left, 24px))) !important;
	}
	.aos-hp > .aos-sec-index > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	.aos-hp > .aos-sec-index > .aos-eyebrow { grid-column: 1; grid-row: 1; }
	.aos-hp > .aos-sec-index > h2 {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		position: sticky;
		top: 130px;
		font-size: var(--type-h2-sm) !important;
		max-width: 14ch !important;
	}
	.aos-hp > .aos-sec-index > .wp-block-columns {
		grid-column: 2;
		grid-row: 1 / span 2;
		display: block !important;
	}
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column {
		display: grid;
		grid-template-columns: 3rem minmax(0, 0.72fr) minmax(0, 1fr);
		column-gap: 32px;
		align-items: start;
		border-top: 1px solid hsl(var(--border));
		padding: 30px 0 !important;
		margin: 0 !important;
	}
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column:last-child {
		border-bottom: 1px solid hsl(var(--border));
	}
	/* number becomes the first grid cell; drop the mobile hairline/corner-number treatment */
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column::before {
		content: "0" counter(aos-team);
		position: static;
		width: auto;
		height: auto;
		background: none;
		font-family: var(--mono);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		color: hsl(var(--aos-yellow));
		padding-top: 7px;
	}
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column::after { display: none; }
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column > h3 { margin: 0 !important; }
	.aos-hp > .aos-sec-index .wp-block-columns > .wp-block-column > p {
		margin: 0 !important;
		color: hsl(var(--fg-muted));
	}
}

/* ── Statement proximity: support copy belongs to its headline ── */
.aos-hp > .aos-sec-statement > h2,
.aos-hp > .wp-block-group.has-navy-deep-background-color > h2 {
	margin-bottom: 1.5rem !important;
}
.aos-hp .wp-block-group.has-navy-deep-background-color .wp-block-buttons {
	margin-top: 2.5rem !important;
}

/* Core buttons follow the one .aos-btn system (navy pill + teal arrow chip,
   flipped to stroke-ghost on dark bands) — see the Buttons block above. A
   teal-gradient override used to live here and beat that system via
   !important on any page carrying .aos-hp; the system now owns it outright.
   WP global-styles' wp-element-button rule is out-specified there, not here. */

/* ── FAQ: questions scan as titles, answers read as body ── */
.aos-hp details.wp-block-details > summary {
	font-size: 1.0625rem;
	font-weight: 500;
	color: hsl(var(--fg));
}
.aos-hp details.wp-block-details > :not(summary) {
	color: hsl(var(--fg-muted));
	max-width: 58ch;
}

/* ── Work labels: one mono label voice (tags + roles), no pill chrome ── */
.aos-work__tag {
	font-family: var(--mono);
	font-weight: 600;
	letter-spacing: 0.12em;
}
.aos-work__roles { gap: 0 14px; }
.aos-work__roles li {
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-work__roles li + li::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: hsl(var(--aos-yellow));
	margin-right: 14px;
	flex: 0 0 auto;
}

/* ── Discipline cards: room to breathe, one internal rhythm, mono index ── */
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color {
	padding: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem) !important;
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color > p:first-child {
	font-family: var(--mono);
	font-weight: 600 !important;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	margin-bottom: 14px !important;
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color > .wp-block-heading {
	margin-bottom: 6px !important;
}
.aos-hp .wp-block-columns > .wp-block-column.has-background-card-background-color > .wp-block-heading + p {
	margin-top: 0 !important;
	margin-bottom: 12px !important;
	font-size: 0.9375rem;
}

/* ══════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY PAGE (.aos-cl) — /components/
   The design-system showcase the site banner promises. Documents the
   tokens, the type scale, the button set, all aos/* blocks, and the AI
   assistance layer. Same system as the homepage: numbered sections,
   mono labels, hairline rows, shared type tokens.
   ══════════════════════════════════════════════════════════════════════ */
.aos-cl {
	counter-reset: aoscl;
	max-width: calc(var(--wp--style--global--content-size, 1080px) + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
	color: hsl(var(--fg));
}
.aos-cl__hero { padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3.5rem, 5vw, 5rem); }
.aos-cl__hero h1 {
	margin: 0 0 1.5rem;
	font-size: var(--type-statement);
	line-height: 1.06;
	letter-spacing: var(--disp-ls);
	font-weight: 500;
	max-width: 20ch;
	text-wrap: balance;
}
.aos-cl__hero h1 em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.14em;
	letter-spacing: 0;
	color: hsl(var(--aos-yellow-deep));
}
.aos-cl__hero > p {
	margin: 0;
	font-size: var(--type-lede);
	line-height: 1.55;
	max-width: 58ch;
	color: hsl(var(--fg-muted));
}
.aos-cl section {
	padding-block: clamp(3.5rem, 5vw, 5.5rem);
	border-top: 1px solid hsl(var(--border));
}
.aos-cl__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 20px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-blue));
}
.aos-cl section .aos-cl__eyebrow::before {
	counter-increment: aoscl;
	content: counter(aoscl, decimal-leading-zero);
	font-family: var(--mono);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: hsl(var(--fg-subtle));
	margin-right: 12px;
}
.aos-cl section h2 {
	margin: 0 0 1rem;
	font-size: var(--type-h2);
	line-height: var(--disp-lh);
	letter-spacing: var(--disp-ls);
	font-weight: 500;
	max-width: 24ch;
	text-wrap: balance;
}
.aos-cl__intro {
	margin: 0 0 var(--head-gap);
	max-width: 58ch;
	color: hsl(var(--fg-muted));
	line-height: 1.6;
}
/* Group label inside a section */
.aos-cl__group {
	margin: 2.5rem 0 0;
	padding-bottom: 12px;
	border-bottom: 1px solid hsl(var(--border));
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
/* Color swatches */
.aos-cl__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
}
.aos-cl__swatch-chip {
	height: 88px;
	border-radius: var(--r);
	border: 1px solid hsl(var(--border));
	margin-bottom: 10px;
}
.aos-cl__swatch strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.aos-cl__swatch code {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: hsl(var(--fg-subtle));
}
/* Type specimens */
.aos-cl__spec {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	column-gap: 32px;
	align-items: baseline;
	padding-block: 22px;
	border-top: 1px solid hsl(var(--border-soft));
}
.aos-cl__spec:first-of-type { border-top: none; }
.aos-cl__spec-meta {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-cl__spec > div { min-width: 0; overflow-wrap: break-word; }
.aos-cl__ex-statement { font-size: var(--type-statement); line-height: 1.06; letter-spacing: var(--disp-ls); font-weight: 500; }
.aos-cl__ex-statement em { font-family: var(--editorial); font-style: italic; font-size: 1.14em; color: hsl(var(--aos-yellow-deep)); }
.aos-cl__ex-h2 { font-size: var(--type-h2); line-height: var(--disp-lh); letter-spacing: var(--disp-ls); font-weight: 500; }
.aos-cl__ex-pillar { font-size: var(--type-h3-lg); line-height: 1.25; letter-spacing: -0.014em; font-weight: 500; }
.aos-cl__ex-card { font-size: var(--type-h3); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.aos-cl__ex-body { font-size: 1rem; line-height: 1.6; color: hsl(var(--fg-muted)); max-width: 58ch; }
.aos-cl__ex-label { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--aos-blue-deep)); }
/* Button row */
.aos-cl__btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 8px; }
/* Index rows (blocks + AI) */
.aos-cl__row {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
	padding-block: 14px;
	border-top: 1px solid hsl(var(--border-soft));
}
.aos-cl__row code {
	justify-self: start;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: hsl(var(--aos-blue-deep));
	background: hsl(var(--aos-yellow-soft));
	padding: 3px 9px;
	border-radius: var(--r-sm, 6px);
	white-space: nowrap;
}
.aos-cl__row p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-cl__row p strong { color: hsl(var(--fg)); font-weight: 600; }
/* Closing band */
.aos-cl__cta { padding-block: clamp(3.5rem, 5vw, 5rem) clamp(5rem, 7vw, 7rem); border-top: 1px solid hsl(var(--border)); }
.aos-cl__cta p { margin: 0 0 2rem; font-size: var(--type-lede); line-height: 1.55; max-width: 58ch; color: hsl(var(--fg-muted)); }
@media (max-width: 700px) {
	.aos-cl__spec, .aos-cl__row { grid-template-columns: 1fr; row-gap: 8px; }
}

/* ── Content link focus-visible (teal ring) — accessibility + polish ── */
.aos-hp a:focus-visible,
.aos-form a:focus-visible,
.aos-contact-item__value a:focus-visible {
	outline: 2px solid hsl(var(--aos-blue));
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── Sections butt directly (internal padding drives spacing) ──
   Removes the stray WP block-gap margin that shows the page bg as a white
   sliver between adjacent dark bands (e.g. stats -> CTA on service pages). */
.aos-hp > .wp-block-group { margin-block: 0; }

/* ── Testimonial quotes: decorative Cormorant quotation mark (editorial) ── */
.aos-tq { position: relative; font-family: var(--body); font-style: normal; border: 0; padding-left: 0; }
.aos-tq::before {
	content: "\201C";
	font-family: var(--editorial);
	font-weight: 600;
	font-size: 3.25rem;
	line-height: 0.75;
	color: hsl(var(--aos-blue));
	display: block;
	margin-bottom: 4px;
}

/* ── Project metric -> teal pill (elevates the proof point in Selected Work) ── */
.aos-metric {
	display: inline-block;
	background: hsl(var(--aos-yellow-soft));
	color: hsl(var(--aos-blue-deep));
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 0.8rem;
	letter-spacing: -0.005em;
}


/* ══════════════════════════════════════════════════════════════════════
   CINEMATIC VIDEO-TEXT-MASK HERO  (.aos-vhero, injected via front-page.html)
   A pin-scrolled stage: a full-bleed looping video, with the headline cut
   out of a white overlay via mix-blend-mode:screen so the video plays
   THROUGH the letters. Scroll choreography: video → white-with-video-text
   reveal → supporting copy + teal CTA → exit up. Resolves to a warm LIGHT
   rest state (white surround), on-brand. Fully tokenized. Graceful no-JS
   and reduced-motion fallbacks show the resting state without the pin.
   ══════════════════════════════════════════════════════════════════════ */

/* The hero lives in page content as an aos-theme/hero-video-mask pattern. */

.aos-vhero {
	position: relative;
	height: 500vh;                         /* pin-scroll travel — matches the reference h-[500vh] for a deliberate, cinematic reveal */
	background: hsl(var(--bg));            /* light: after the stage exits, the hero hands off to the light thesis without a dark flash */
}
.aos-vhero__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;                    /* contain mix-blend to this box */
}
/* Stage wraps every layer so the exit fade/translate hits them together */
.aos-vhero__stage {
	position: absolute;
	inset: 0;
	will-change: opacity, transform;
}
/* Layer 0 — dark cinematic fallback behind the video */
.aos-vhero__fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(120% 90% at 72% 28%, hsl(var(--aos-blue-deep) / 0.55), transparent 60%),
		linear-gradient(140deg, hsl(var(--aos-navy-deep)) 0%, hsl(var(--aos-navy)) 55%, hsl(var(--aos-navy-deep)) 100%);
}
/* Layer 1 — full-bleed video */
.aos-vhero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.06) contrast(1.02);
}
/* Layer 1b — cinematic grade / vignette over the video for depth */
.aos-vhero__grade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(130% 105% at 50% 40%, transparent 46%, hsl(var(--aos-navy-deep) / 0.62) 100%),
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.28) 0%, transparent 28%, transparent 68%, hsl(var(--aos-navy-deep) / 0.44) 100%);
}
/* Layer 2 — the text mask. White fills the screen EXCEPT the letters, which
   show the video (screen blend: white→white, black text→shows backdrop). */
.aos-vhero__mask {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--bg));
	mix-blend-mode: screen;
	opacity: 0;                            /* JS drives 0→1 across scroll 0.12–0.42 */
	will-change: opacity;
}
.aos-vhero__title {
	margin: 0;
	padding: 0 4vw;
	color: #000;                           /* pure black → screen-blend reveals video */
	-webkit-text-fill-color: #000;
	font-weight: 700;                      /* Instrument Sans tops out at 700… */
	-webkit-text-stroke: 0.021em #000;     /* …so a black stroke fattens the glyphs to ~900: far more video through the letterforms */
	font-size: clamp(3rem, 12.5vw, 14rem);
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-align: center;
	text-transform: none;
	transform: translateY(-7vh);
	user-select: none;
}
/* Layer 3 — supporting copy (not blended; charcoal on the white rest state).
   A full-frame column anchored to the bottom: eyebrow → tagline → CTA row,
   then a hairline meta strip that squares off the frame. */
.aos-vhero__support {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 clamp(1.5rem, 4vw, 3.5rem);
	opacity: 0;                            /* JS drives 0→1 across scroll 0.48–0.58 */
	will-change: opacity, transform;
	pointer-events: none;                  /* layer covers the frame; only the links catch clicks */
}
.aos-vhero__support a { pointer-events: auto; }
.aos-vhero__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: clamp(2.25rem, 6.5vh, 4.5rem);
}
.aos-vhero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 clamp(1.1rem, 2.6vh, 1.6rem);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-vhero__eyebrow-tick {
	width: 22px;
	height: 1px;
	background: hsl(var(--aos-yellow-deep) / 0.5);
}
.aos-vhero__tagline {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.55;
	color: hsl(var(--fg-muted));
	text-wrap: balance;
}
.aos-vhero__tagline strong {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 1.16em;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: hsl(var(--fg));
}
.aos-vhero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(1.75rem, 4.5vh, 2.75rem);
}
/* ── THE button. One system, site-wide: deep-navy pill, hairline inset
   light, teal arrow chip. Quiet at rest; the chip carries the color, the
   hover carries the motion. `--dark` flips it for navy/deep bands. ── */
.aos-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.4rem 0.45rem 0.4rem 1.5rem;
	border-radius: 999px;
	background: hsl(var(--aos-navy));
	border: 1px solid hsl(var(--aos-navy-deep) / 0.9);
	color: hsl(var(--paper));
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.09),
		0 1px 2px hsl(var(--aos-navy-deep) / 0.18),
		0 12px 32px -8px hsl(var(--aos-navy-deep) / 0.35);
	transition:
		transform 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}
.aos-btn__chip {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	transition: background-color 0.25s ease;
}
.aos-btn__chip svg {
	display: block;
	transition: transform 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.aos-btn:hover {
	transform: translateY(-1px);
	background: hsl(var(--aos-navy-soft));
	color: hsl(var(--paper));
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.12),
		0 2px 4px hsl(var(--aos-navy-deep) / 0.2),
		0 18px 40px -10px hsl(var(--aos-navy-deep) / 0.42);
}
.aos-btn:hover .aos-btn__chip svg { transform: translateX(2px); }
.aos-btn:active { transform: translateY(0) scale(0.99); }
.aos-btn:focus-visible {
	outline: 2px solid hsl(var(--aos-yellow-deep));
	outline-offset: 3px;
}
/* Flipped for dark bands: hairline stroke ghost — transparent pill, thin
   light border, light label; the solid teal chip stays the single point
   of color and carries the primary weight. Hover warms the stroke to
   teal with a faint teal wash. */
.aos-btn--dark {
	background: transparent;
	border-color: hsl(var(--bg) / 0.28);
	color: hsl(var(--bg));
	box-shadow: none;
}
.aos-btn--dark:hover {
	background: hsl(var(--aos-yellow) / 0.08);
	border-color: hsl(var(--aos-yellow) / 0.65);
	color: hsl(var(--bg));
	box-shadow: 0 12px 32px -12px hsl(var(--aos-yellow) / 0.25);
}
.aos-btn--dark:focus-visible { outline-color: hsl(var(--aos-yellow)); }
/* Quiet secondary — underlined text link; `--dark` flips for navy bands */
.aos-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-block: 0.3rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: hsl(var(--fg-muted));
	text-decoration: none;
	background: linear-gradient(hsl(var(--fg) / 0.25), hsl(var(--fg) / 0.25)) left calc(100% - 2px) / 100% 1px no-repeat;
	transition: color 0.2s ease;
}
.aos-ghost:hover { color: hsl(var(--fg)); }
.aos-ghost__arrow {
	display: inline-block;
	transition: transform 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.aos-ghost:hover .aos-ghost__arrow { transform: translate(1px, 1px); }
.aos-ghost--dark {
	color: hsl(var(--bg) / 0.72);
	background-image: linear-gradient(hsl(var(--bg) / 0.3), hsl(var(--bg) / 0.3));
}
.aos-ghost--dark:hover { color: hsl(var(--bg)); }
/* Meta strip — hairline-ruled index of the three practices; squares the frame.
   Width + bottom padding keep it clear of corner overlay widgets. */
.aos-vhero__meta {
	width: 100%;
	max-width: min(1128px, 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.2rem;
	padding-bottom: clamp(2.5rem, 6vh, 4rem);
	border-top: 1px solid hsl(var(--fg) / 0.1);
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-vhero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
}
.aos-vhero__meta-num {
	font-weight: 600;
	color: hsl(var(--aos-yellow-deep));
}
/* Scroll nudge — over the dark video on landing; fades out immediately */
.aos-vhero__scroll {
	position: absolute;
	bottom: 2.4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	color: hsl(var(--bg) / 0.82);
	font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	pointer-events: none;
}
.aos-vhero__scroll-line {
	position: relative;
	width: 1px;
	height: 44px;
	background: hsl(var(--bg) / 0.28);
	overflow: hidden;
}
.aos-vhero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -12px;
	width: 1px;
	height: 12px;
	background: hsl(var(--bg) / 0.95);
	animation: aosVheroLine 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes aosVheroLine {
	0%   { transform: translateY(0); }
	100% { transform: translateY(56px); }
}

/* Brand mark on the video landing — the nav is hidden there, so the
   wordmark carries identity from the first frame; it yields to the nav. */
.aos-vhero__brand {
	position: absolute;
	top: clamp(1.5rem, 3.5vh, 2.25rem);
	left: clamp(1.5rem, 4vw, 3.5rem);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	pointer-events: none;
	transition: opacity 0.4s var(--ease-out);
}
.aos-vhero__brand-a  { font-weight: 300; font-size: 19px; letter-spacing: -0.01em; color: hsl(var(--bg) / 0.92); }
.aos-vhero__brand-dot { width: 5px; height: 5px; border-radius: 999px; background: hsl(var(--aos-yellow)); }
.aos-vhero__brand-os { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: hsl(var(--bg)); }
body.is-nav-scrolled .aos-vhero__brand { opacity: 0; }
@media (max-width: 1023px) {
	.aos-vhero { height: 400vh; }
	.aos-vhero__title { font-size: clamp(2.75rem, 15vw, 5.5rem); -webkit-text-stroke-width: 0.016em; transform: translateY(-5vh); }
	.aos-vhero__lockup { margin-bottom: clamp(1.75rem, 5vh, 3rem); }
}
@media (max-width: 767px) {
	.aos-vhero__meta { display: none; }
	.aos-vhero__lockup { margin-bottom: clamp(2.5rem, 9vh, 4.5rem); }
	.aos-vhero__tagline strong { font-size: 1.1em; }
}
/* No-JS: show the resting state (white surround + video-text + copy), no pin */
@media (scripting: none) {
	.aos-vhero { height: 100vh; }
	.aos-vhero__mask,
	.aos-vhero__support { opacity: 1 !important; transform: none !important; }
	.aos-vhero__scroll { display: none; }
}
/* Reduced motion: no pin travel, no drift; resting state, video paused via JS */
@media (prefers-reduced-motion: reduce) {
	.aos-vhero { height: 100vh; }
	.aos-vhero__stage { opacity: 1 !important; transform: none !important; }
	.aos-vhero__mask,
	.aos-vhero__support { opacity: 1 !important; transform: none !important; }
	.aos-vhero__scroll,
	.aos-vhero__scroll-line::after { animation: none; display: none; }
}

/* ── Homepage immersive chrome ─────────────────────────────────────────
   On landing the video is the ONLY thing on screen. The nav slides down
   the moment the page is scrolled, reusing body.is-nav-scrolled (toggled
   at 8px by initScrollNav). The alert + utility strip are dropped on the
   homepage for a clean, cinematic top. Scoped to body.home:has(.aos-vhero) only. */
body.home:has(.aos-vhero) .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(-100%);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
body.home:has(.aos-vhero).is-nav-scrolled .wp-site-blocks > header.wp-block-template-part {
	transform: translateY(0);
}
/* Alert aside out of normal flow so the hero video starts at the very top */
body.home:has(.aos-vhero) .wp-site-blocks > aside.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
}
body.home:has(.aos-vhero) .alert { display: none; }
body.home:has(.aos-vhero) .util { display: none; }
body.home:has(.aos-vhero) .aos-vhero { margin-top: 0 !important; }
@media (prefers-reduced-motion: reduce) {
	body.home:has(.aos-vhero) .wp-site-blocks > header.wp-block-template-part { transition: none; }
}
/* No-JS: is-nav-scrolled never fires, so restore a normal, functional nav */
@media (scripting: none) {
	body.home:has(.aos-vhero) .wp-site-blocks > header.wp-block-template-part { position: sticky; transform: none; }
	body.home:has(.aos-vhero) .wp-site-blocks > aside.wp-block-template-part { position: relative; }
	body.home:has(.aos-vhero) .alert,
	body.home:has(.aos-vhero) .util { display: revert; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOMEPAGE — STRUCTURAL REBUILD (aos-s-*)
   A conversion-ordered narrative in nine acts: manifesto → priced service
   index → shipped work → impact wall → engagement timeline → voices →
   objection-handling FAQ → scarcity-backed close. Every section owns a
   distinct layout: split grids, ghost numerals, an asymmetric stat matrix,
   a process rail. One shared frame, one eyebrow system, one button.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared frame + section head system ── */
.aos-s-inner,
.aos-work__inner {
	max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}
.aos-s-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-eyebrow__num { color: hsl(var(--fg-subtle)); }
.aos-s-eyebrow__tick { width: 26px; height: 1px; background: hsl(var(--aos-yellow-deep) / 0.5); flex: 0 0 auto; }
.aos-s-eyebrow--dark { color: hsl(var(--aos-yellow)); }
.aos-s-eyebrow--dark .aos-s-eyebrow__num { color: hsl(var(--bg) / 0.5); }
.aos-s-eyebrow--dark .aos-s-eyebrow__tick { background: hsl(var(--aos-yellow) / 0.5); }
.aos-s-eyebrow--center { justify-content: center; }
.aos-s-title {
	margin: 1.1rem 0 0;
	font-family: var(--display);
	font-size: clamp(2.1rem, 3.6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 500;
	color: hsl(var(--fg));
}
.aos-s-lede {
	margin: 1.2rem 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.6;
	color: hsl(var(--fg-muted));
}

/* ── ACT 1: THESIS — dictionary-entry manifesto + proof strip ── */
.aos-s-thesis {
	position: relative;
	isolation: isolate;
	border-top: 1px solid hsl(var(--border));
	padding-block: clamp(5rem, 12vh, 8rem);
}
.aos-s-thesis::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(46% 64% at 8% 12%, hsl(var(--aos-yellow-soft) / 0.55), transparent 70%);
}
.aos-s-thesis__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: end;
}
.aos-s-thesis__line {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(2.3rem, 4.6vw, 4.3rem);
	line-height: 1.08;
	letter-spacing: -0.028em;
	font-weight: 500;
	color: hsl(var(--fg));
}
.aos-s-thesis__line em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.1em;
	letter-spacing: 0;
}
.aos-s-thesis__brand { color: hsl(var(--aos-yellow-deep)); }
.aos-s-thesis__note {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border-left: 1px solid hsl(var(--border-strong));
	font-family: var(--mono);
}
.aos-s-thesis__pron { font-size: 0.72rem; letter-spacing: 0.08em; color: hsl(var(--fg-subtle)); }
.aos-s-thesis__def { font-size: 0.86rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-thesis__ref { font-size: 0.72rem; letter-spacing: 0.05em; color: hsl(var(--fg-subtle)); }
.aos-s-thesis__ref em { font-family: var(--editorial); font-style: italic; font-size: 1.15em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-thesis__props {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
	list-style: none;
	margin: clamp(3.5rem, 8vh, 5.5rem) 0 0;
	padding: clamp(1.9rem, 3.5vh, 2.6rem) 0 0;
	border-top: 1px solid hsl(var(--border));
}
.aos-s-thesis__props li { display: flex; flex-direction: column; gap: 0.55rem; }
.aos-s-thesis__prop-num {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-thesis__props strong { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--fg)); }
.aos-s-thesis__props li > span:not(.aos-s-thesis__prop-num) { font-size: 0.92rem; line-height: 1.58; color: hsl(var(--fg-muted)); }

/* ── ACT 2: OFFER — the priced service index. Full-width rows, ghost
   numerals, deliverable ticks, price anchor, arrow chip. The whole row
   is the link. ── */
.aos-s-offer {
	border-top: 1px solid hsl(var(--border));
	background: hsl(var(--bg-alt));
	padding-block: clamp(5rem, 12vh, 8rem);
}
.aos-s-offer .aos-s-head { margin-bottom: clamp(2.75rem, 6vh, 4.25rem); }
.aos-s-offer__rows { display: flex; flex-direction: column; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-offer__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto;
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: start;
	padding: clamp(1.9rem, 4.5vh, 3rem) clamp(0.5rem, 1.5vw, 1.5rem);
	border-bottom: 1px solid hsl(var(--border-strong));
	text-decoration: none;
	color: inherit;
	transition: background-color 0.3s var(--ease-out);
}
.aos-s-offer__row:hover { background: hsl(var(--paper)); }
.aos-s-offer__row:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: -2px; }
.aos-s-offer__ghost {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(3rem, 6vw, 5.5rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: hsl(var(--fg) / 0.07);
	user-select: none;
	transition: color 0.35s ease;
}
.aos-s-offer__row:hover .aos-s-offer__ghost { color: hsl(var(--aos-yellow-deep) / 0.16); }
.aos-s-offer__name {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: hsl(var(--fg));
}
.aos-s-offer__kicker {
	margin: 0.55rem 0 0;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.18rem;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-offer__desc { margin: 0.85rem 0 0; max-width: 56ch; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-offer__tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.aos-s-offer__tags li {
	position: relative;
	padding-left: 14px;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-offer__tags li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 1px;
	background: hsl(var(--aos-yellow-deep));
}
.aos-s-offer__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	align-self: stretch;
}
.aos-s-offer__price {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg));
	padding: 7px 14px;
	border: 1px solid hsl(var(--border-strong));
	border-radius: 999px;
	background: hsl(var(--paper));
	white-space: nowrap;
}
.aos-s-offer__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--paper));
	color: hsl(var(--fg));
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.aos-s-offer__row:hover .aos-s-offer__arrow {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	transform: translateX(4px);
}

/* ── ACT 3: WORK — keep the device art direction; add ghost case numerals,
   mono meta, hairline role chips, a closing conversion row, wider frame ── */
.aos-work { padding-block: clamp(5rem, 12vh, 8rem); }
.aos-work__head { max-width: none; }
.aos-work__head h2 {
	margin: 1.1rem 0 0;
	max-width: 30ch;
	font-size: clamp(2.1rem, 3.6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 500;
}
.aos-work__ghostnum {
	position: absolute;
	z-index: -2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -56%);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(11rem, 24vw, 22rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: hsl(var(--fg) / 0.06);
	pointer-events: none;
	user-select: none;
}
.aos-work__tag {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	color: hsl(var(--aos-yellow-deep));
}
.aos-work__idx { color: hsl(var(--fg-subtle)); }
.aos-work__name { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 500; }
.aos-work__roles li {
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--fg-muted));
	background: transparent;
	border: 1px solid hsl(var(--border-strong));
	padding: 6px 12px;
}
.aos-work__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: clamp(4rem, 9vh, 6.5rem);
	padding-top: clamp(1.9rem, 3.5vh, 2.6rem);
	border-top: 1px solid hsl(var(--border));
}
.aos-work__foot p {
	margin: 0;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	color: hsl(var(--fg));
}

/* ── Stack divider — labelled marquee ── */
.aos-s-stack { padding-block: clamp(2.25rem, 5vh, 3.5rem); border-top: 1px solid hsl(var(--border)); }
.aos-s-stack__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 1.5rem;
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-stack__tick { width: 22px; height: 1px; background: hsl(var(--border-strong)); }
.aos-s-stack .aos-marquee { border: 0; padding: 0; }

/* ── ACT 4: IMPACT — asymmetric stat matrix on navy-deep. Head cell,
   2×2 count-up stats, and a full-width proof quote share one hairline
   lattice; glows bleed through translucent cells. ── */
.aos-s-impact {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: clamp(5rem, 12vh, 8rem);
}
.aos-s-impact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(50% 60% at 84% 6%, hsl(var(--aos-yellow) / 0.13), transparent 65%),
		radial-gradient(45% 55% at 6% 96%, hsl(var(--aos-blue) / 0.12), transparent 62%);
}
.aos-s-impact::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.55), transparent);
}
.aos-s-impact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 1px;
	background: hsl(var(--bg) / 0.12);
	border: 1px solid hsl(var(--bg) / 0.12);
}
.aos-s-impact__grid > * {
	margin: 0;
	background: hsl(var(--aos-navy-deep) / 0.55);
	padding: clamp(1.75rem, 3.2vw, 2.9rem);
}
.aos-s-impact__head { grid-row: 1 / span 2; }
.aos-s-impact .aos-s-title { color: hsl(var(--bg)); }
.aos-s-impact .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-impact .aos-s-lede { color: hsl(var(--bg) / 0.55); }
.aos-s-impact__value { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.aos-s-impact__num {
	font-family: var(--display);
	font-size: clamp(3rem, 5.5vw, 4.75rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: hsl(var(--bg));
	font-variant-numeric: tabular-nums;
}
.aos-s-impact__unit {
	font-family: var(--mono);
	font-size: clamp(0.95rem, 1.4vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: hsl(var(--aos-yellow));
}
.aos-s-impact__label {
	margin: 1.1rem 0 0;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow));
}
.aos-s-impact__desc { margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.55; color: hsl(var(--bg) / 0.55); }
.aos-s-impact__quote { grid-column: 1 / -1; }
.aos-s-impact__quote blockquote {
	margin: 0;
	max-width: 58ch;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	line-height: 1.45;
	color: hsl(var(--bg) / 0.88);
}
.aos-s-impact__quote figcaption {
	margin-top: 1rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.5);
}
.aos-s-impact__quote figcaption strong { color: hsl(var(--bg) / 0.85); font-weight: 600; }

/* ── ACT 5: PROCESS — the engagement rail. A single hairline runs the
   width; four markered steps hang off it with week stamps. ── */
.aos-s-process { border-top: 1px solid hsl(var(--border)); padding-block: clamp(5rem, 12vh, 8rem); }
.aos-s-process .aos-s-head { margin-bottom: clamp(3rem, 7vh, 4.75rem); }
.aos-s-process__rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aos-s-process__rail::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, hsl(var(--aos-yellow-deep) / 0.6), hsl(var(--border-strong)));
}
.aos-s-process__step { position: relative; padding-top: 1.9rem; }
.aos-s-process__marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: hsl(var(--bg));
	border: 2px solid hsl(var(--aos-yellow-deep));
}
.aos-s-process__when {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-process__step h3 {
	margin: 0.65rem 0 0;
	font-family: var(--display);
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
}
.aos-s-process__step p { margin: 0.6rem 0 0; font-size: 0.94rem; line-height: 1.6; color: hsl(var(--fg-muted)); }

/* ── ACT 6: VOICES — one voice at a time, full stage. A single display-
   scale serif quote with maximum air, a quiet proof line in the
   attribution row, and a hairline rail (counter + prev/next). Slides
   stack in one grid cell and crossfade; gentle auto-advance pauses on
   hover/focus, stops on manual use, and is off under reduced motion. ── */
.aos-s-voices { border-top: 1px solid hsl(var(--border)); padding-block: clamp(5rem, 12vh, 8rem); }
.aos-s-voices .aos-s-head { margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.aos-s-voices__viewport { display: grid; }
.aos-s-voices__slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	translate: 0 14px;
	pointer-events: none;
	transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}
.aos-s-voices__slide.is-active {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
}
.aos-s-voices__slide::before {
	content: "\201C";
	display: block;
	height: 0.6em;
	font-family: var(--editorial);
	font-size: clamp(3.5rem, 5.5vw, 5rem);
	line-height: 1;
	margin-bottom: 1.5rem;
	color: hsl(var(--aos-yellow));
}
.aos-s-voices__slide blockquote {
	margin: 0;
	max-width: 30ch;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.7rem, 3.1vw, 2.7rem);
	line-height: 1.42;
	color: hsl(var(--fg));
	text-wrap: pretty;
}
.aos-s-voices__slide mark {
	background: linear-gradient(hsl(var(--aos-yellow) / 0.26), hsl(var(--aos-yellow) / 0.26)) 0 86% / 100% 0.16em no-repeat;
	color: hsl(var(--aos-yellow-deep));
	padding-bottom: 0.05em;
}
.aos-s-voices__slide figcaption {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(1.75rem, 4vh, 2.5rem);
}
.aos-s-voices__monogram {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow-soft));
	border: 1px solid hsl(var(--aos-yellow) / 0.3);
	color: hsl(var(--aos-yellow-deep));
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}
.aos-s-voices__who { display: flex; flex-direction: column; gap: 2px; }
.aos-s-voices__who strong { font-size: 0.95rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-voices__who span { font-size: 0.8rem; color: hsl(var(--fg-subtle)); }
/* Quiet proof line — the quote's number, distilled to one breath */
.aos-s-voices__proof {
	margin-left: auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-voices__proof em {
	font-family: var(--display);
	font-style: normal;
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: hsl(var(--aos-yellow-deep));
}
/* Rail — counter left, hairline arrows right */
.aos-s-voices__rail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 6vh, 3.75rem);
	padding-top: 1.4rem;
	border-top: 1px solid hsl(var(--border));
}
.aos-s-voices__count {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: hsl(var(--fg-subtle));
}
.aos-s-voices__count [data-voices-current] { color: hsl(var(--aos-yellow-deep)); }
.aos-s-voices__count i { width: 22px; height: 1px; background: hsl(var(--border-strong)); }
.aos-s-voices__nav { display: flex; gap: 0.6rem; }
.aos-s-voices__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--paper));
	color: hsl(var(--fg));
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.aos-s-voices__btn:hover {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
}
.aos-s-voices__btn:active { transform: scale(0.96); }
.aos-s-voices__btn:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; }
.aos-s-voices__btn svg { display: block; }
@media (prefers-reduced-motion: reduce) {
	.aos-s-voices__slide { transition: none; translate: none; }
}
@media (max-width: 640px) {
	.aos-s-voices__proof { margin-left: 0; flex-basis: 100%; }
}

/* ── ACT 7: FAQ — sticky pitch column + animated ledger of answers ── */
.aos-s-faq { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: clamp(5rem, 12vh, 8rem); }
.aos-s-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.aos-s-faq .aos-s-head { position: sticky; top: 110px; }
.aos-s-faq .aos-ghost { margin-top: 1.6rem; }
.aos-s-faq__list { border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-faq__item { border-bottom: 1px solid hsl(var(--border-strong)); }
.aos-s-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.45rem 0.25rem;
	cursor: pointer;
	list-style: none;
}
.aos-s-faq__item summary::-webkit-details-marker { display: none; }
.aos-s-faq__item summary:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-faq__q { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--fg)); transition: color 0.2s ease; }
.aos-s-faq__item summary:hover .aos-s-faq__q { color: hsl(var(--aos-yellow-deep)); }
.aos-s-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--paper));
	transition: transform 0.3s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease;
}
.aos-s-faq__icon::before,
.aos-s-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.5px;
	background: hsl(var(--fg));
	translate: -50% -50%;
	transition: background-color 0.3s ease;
}
.aos-s-faq__icon::after { rotate: 90deg; }
.aos-s-faq__item[open] .aos-s-faq__icon {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	transform: rotate(45deg);
}
.aos-s-faq__item[open] .aos-s-faq__icon::before,
.aos-s-faq__item[open] .aos-s-faq__icon::after { background: hsl(var(--aos-navy-deep)); }
.aos-s-faq__a > div { overflow: hidden; }
.aos-s-faq__a p { margin: 0; padding: 0.1rem 3.5rem 1.5rem 0.25rem; max-width: 62ch; font-size: 0.97rem; line-height: 1.65; color: hsl(var(--fg-muted)); }

/* ── ACT 8: FINALE — scarcity-backed close on navy-deep ── */
.aos-s-finale {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: clamp(6rem, 15vh, 10rem);
	text-align: center;
}
.aos-s-finale::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Glow sits behind the CTA row, not on the bottom edge — the section
	   settles back to flat navy-deep before the footer seam. */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(48% 52% at 50% 74%, hsl(var(--aos-yellow) / 0.15), transparent 62%),
		radial-gradient(40% 50% at 50% -12%, hsl(var(--aos-blue) / 0.12), transparent 60%);
}
.aos-s-finale::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.55), transparent);
}
.aos-s-finale__title {
	margin: 1.5rem 0 0;
	font-family: var(--display);
	font-size: clamp(2.6rem, 5.5vw, 4.6rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: hsl(var(--bg));
}
.aos-s-finale__title em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.08em;
	color: hsl(var(--aos-yellow));
}
.aos-s-finale__lede {
	margin: 1.4rem auto 0;
	max-width: 52ch;
	font-size: clamp(1.02rem, 1.3vw, 1.2rem);
	line-height: 1.6;
	color: hsl(var(--bg) / 0.65);
}
.aos-s-finale__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(2.25rem, 5.5vh, 3.25rem);
}
.aos-s-finale__note {
	margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.45);
}

/* ── Entrance stagger for the new structures (rides .aos-reveal) ── */
@keyframes aosSRise {
	from { opacity: 0; translate: 0 18px; }
	to   { opacity: 1; translate: 0 0; }
}
.aos-reveal :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card) { opacity: 0; }
/* Keyboard focus must never land on an invisible element: reveal the
   focused item (and its siblings' container entrance) immediately,
   independent of the IntersectionObserver's timing. */
.aos-reveal :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):is(:focus-visible, :focus-within) {
	opacity: 1;
	animation: none;
}
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card) {
	animation: aosSRise 0.6s var(--ease-out) 0.15s forwards;
}
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):nth-child(2) { animation-delay: 0.25s; }
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):nth-child(3) { animation-delay: 0.35s; }
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):nth-child(4) { animation-delay: 0.45s; }
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):nth-child(5) { animation-delay: 0.55s; }
.aos-reveal.is-in :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card):nth-child(6) { animation-delay: 0.65s; }
@media (prefers-reduced-motion: reduce) {
	.aos-reveal :is(.aos-s-thesis__props li, .aos-s-offer__row, .aos-s-process__step, .aos-s-impact__grid > *, .aos-s-voices__card) { opacity: 1 !important; animation: none !important; }
}

/* ── Responsive: the structures reflow, never squeeze ── */
@media (max-width: 1023px) {
	.aos-s-impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aos-s-impact__head { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) {
	.aos-s-thesis__grid { grid-template-columns: 1fr; align-items: start; }
	.aos-s-thesis__note { border-left: 0; border-top: 1px solid hsl(var(--border-strong)); padding: 1.25rem 0 0; max-width: 40ch; }
	.aos-s-thesis__props { grid-template-columns: 1fr; gap: 1.5rem; }
	.aos-s-offer__row { grid-template-columns: minmax(0, 1fr); }
	.aos-s-offer__ghost { position: absolute; top: 1.4rem; right: 0.5rem; font-size: 3.4rem; opacity: 0.7; }
	.aos-s-offer__side { flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 1.25rem; }
	.aos-s-process__rail { grid-template-columns: 1fr; gap: 2.25rem; }
	.aos-s-process__rail::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, hsl(var(--aos-yellow-deep) / 0.6), hsl(var(--border-strong))); }
	.aos-s-process__step { padding-top: 0; padding-left: 2rem; }
	.aos-s-faq__grid { grid-template-columns: 1fr; }
	.aos-s-faq .aos-s-head { position: static; }
	.aos-s-faq__a p { padding-right: 1rem; }
}
@media (max-width: 640px) {
	.aos-s-impact__grid { grid-template-columns: 1fr; }
	.aos-work__foot { flex-direction: column; align-items: flex-start; }
	.aos-work__ghostnum { font-size: clamp(9rem, 40vw, 13rem); }
}

/* ══════════════════════════════════════════════════════════════════════
   WORK DECK — each case study is a full-width, art-directed panel that
   sticks and stacks as you scroll: its own palette, an oversized device
   cropped by the card edge, a ghost case numeral. The final (platform)
   card goes navy-deep and hands the page off to the Impact band.
   ══════════════════════════════════════════════════════════════════════ */
.aos-work__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.aos-work__deck {
	max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
	display: flex;
	flex-direction: column;
}
.aos-work__card {
	position: sticky;
	top: clamp(84px, 11vh, 130px);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	min-height: min(74vh, 700px);
	margin-bottom: clamp(2.5rem, 6vh, 4rem);
	padding: clamp(2rem, 4vw, 4.5rem);
	border-radius: 28px;
	border: 1px solid hsl(var(--border));
	overflow: hidden;
	isolation: isolate;
	background: hsl(var(--paper));
	box-shadow:
		0 -24px 60px -46px hsl(var(--aos-navy-deep) / 0.5),
		0 30px 80px -40px hsl(var(--aos-navy-deep) / 0.35);
}
.aos-work__card:last-child { margin-bottom: 0; }
.aos-work__card--possibility {
	background:
		radial-gradient(60% 80% at 88% 18%, hsl(var(--aos-yellow) / 0.14), transparent 65%),
		linear-gradient(115deg, hsl(var(--paper)) 45%, hsl(var(--aos-yellow-soft)) 100%);
}
.aos-work__card--aizen {
	background:
		radial-gradient(60% 80% at 88% 82%, hsl(var(--aos-blue) / 0.12), transparent 65%),
		linear-gradient(115deg, hsl(var(--paper)) 45%, hsl(var(--aos-blue) / 0.09) 100%);
}
.aos-work__card--platform {
	border-color: hsl(var(--aos-navy-soft));
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(55% 70% at 85% 10%, hsl(var(--aos-yellow) / 0.16), transparent 62%),
		radial-gradient(50% 60% at 10% 95%, hsl(var(--aos-blue) / 0.14), transparent 60%),
		linear-gradient(140deg, hsl(var(--aos-navy-deep)) 0%, hsl(var(--aos-navy)) 60%, hsl(var(--aos-navy-deep)) 100%);
}
/* Ghost case numeral — top-right of the card, behind everything */
.aos-work__card .aos-work__ghostnum {
	position: absolute;
	z-index: 0;
	top: clamp(1rem, 2.5vh, 1.75rem);
	right: clamp(1.25rem, 3vw, 2.75rem);
	left: auto;
	transform: none;
	font-size: clamp(6.5rem, 12vw, 11rem);
	color: hsl(var(--fg) / 0.07);
}
.aos-work__card--platform .aos-work__ghostnum { color: hsl(var(--bg) / 0.08); }
.aos-work__body { position: relative; z-index: 2; }
.aos-work__desc { max-width: 44ch; }
/* Media cell — device is absolutely placed and deliberately cropped by
   the card edge for scale; the card's overflow does the cropping. */
.aos-work__media {
	position: relative;
	z-index: 1;
	align-self: stretch;
	min-height: clamp(380px, 52vh, 560px);
}
.aos-work__media::before { content: none; }
.aos-work__card .aos-phone {
	position: absolute;
	top: 9%;
	left: 50%;
	width: min(76%, 330px);
	transform: translateX(-50%) rotate(2.5deg);
	transition: transform 0.6s var(--ease-out);
}
.aos-work__card:hover .aos-phone { transform: translateX(-50%) translateY(-10px) rotate(1.2deg); }
.aos-work__card .aos-browser {
	position: absolute;
	top: 14%;
	left: 2%;
	width: 112%;
	max-width: none;
	transform: rotate(-1.2deg);
	border-color: hsl(var(--bg) / 0.16);
	box-shadow: 0 2px 4px hsl(0 0% 0% / 0.2), 0 40px 80px -20px hsl(0 0% 0% / 0.5);
	transition: transform 0.6s var(--ease-out);
}
.aos-work__card:hover .aos-browser { transform: translateY(-10px) rotate(-0.4deg); }
/* Dark (platform) card text flips */
.aos-work__card--platform .aos-work__tag { color: hsl(var(--aos-yellow)); }
.aos-work__card--platform .aos-work__idx { color: hsl(var(--bg) / 0.5); }
.aos-work__card--platform .aos-work__name { color: hsl(var(--bg)); }
.aos-work__card--platform .aos-work__desc { color: hsl(var(--bg) / 0.68); }
.aos-work__card--platform .aos-work__roles li {
	border-color: hsl(var(--bg) / 0.25);
	color: hsl(var(--bg) / 0.72);
}
.aos-work__foot { margin-top: clamp(3rem, 7vh, 5rem); border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
	.aos-work__card {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		min-height: 0;
		padding: clamp(1.5rem, 5vw, 2.25rem);
		top: clamp(72px, 9vh, 100px);
	}
	.aos-work__media { min-height: 340px; }
	.aos-work__card .aos-phone { width: min(58%, 250px); top: 4%; }
	.aos-work__card .aos-browser { width: 106%; left: 0; top: 8%; }
	.aos-work__card .aos-work__ghostnum { font-size: 4.5rem; top: 1rem; right: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.aos-work__card { position: static; }
	.aos-work__card:hover .aos-phone,
	.aos-work__card:hover .aos-browser { transform: translateX(-50%) rotate(2.5deg); }
	.aos-work__card:hover .aos-browser { transform: rotate(-1.2deg); }
}

/* ── Perfection pass ── */
/* Reveal animations must never trigger browser scroll-anchor jumps */
main.aos-hp { overflow-anchor: none; }
/* Display type wraps in balanced lines, never a widowed word */
.aos-s-title,
.aos-s-thesis__line,
.aos-s-finale__title,
.aos-work__head h2,
.aos-s-lede,
.aos-s-finale__lede { text-wrap: balance; }
/* Anchor targets clear the sticky nav */
#work, #contact { scroll-margin-top: 90px; }
/* Offer ghost numerals align optically with the row top */
.aos-s-offer__ghost { margin-top: 0.35rem; }
/* Feature-quote mark: keep the underline wash off descenders */
.aos-s-voices__feature mark { padding-bottom: 0.05em; }
/* Impact quote cell breathes a little more than the stat cells */
.aos-s-impact__quote { padding-block: clamp(2rem, 3.5vw, 3.1rem); }
@media (max-width: 480px) {
	.aos-s-thesis__line { font-size: clamp(1.9rem, 8.2vw, 2.3rem); }
	.aos-s-finale__title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
}

/* Testimonial proof units (the "wk" in 9wk) render small mono */
.aos-s-voices__proof em i {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-left: 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICE PAGE SYSTEM (aos-ihero, aos-s-ledger / proof / econ / why /
   window / pricing). Built for /ai-agents; the shape is deliberately
   reusable by /app-development, /consulting and the vertical landers.
   Shares the homepage design language — same eyebrow, title, button,
   hairline lattice and navy-deep bands — without reusing its layouts.
   ══════════════════════════════════════════════════════════════════════ */

/* ── INTERIOR HERO — cinematic navy-deep. Not the homepage's pinned video
   mask: a stated hero with a live cost meter as its signature. ── */
.aos-ihero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 6rem);
}
/* --band: the meter demoted from hero to mid-page section — band rhythm, h2 scale */
.aos-ihero--band { padding-block: var(--sp-band); }
.aos-ihero--band .aos-ihero__title { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.aos-ihero--band .aos-ihero__lede { max-width: 42ch; }
.aos-ihero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(58% 62% at 82% 8%, hsl(var(--aos-yellow) / 0.16), transparent 62%),
		radial-gradient(50% 58% at 4% 92%, hsl(var(--aos-blue) / 0.14), transparent 60%);
}
.aos-ihero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}
.aos-ihero__title {
	margin: 1.35rem 0 0;
	font-family: var(--display);
	font-size: clamp(2.4rem, 4.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: hsl(var(--bg));
	text-wrap: balance;
}
.aos-ihero__title em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.06em;
	color: hsl(var(--aos-yellow));
}
.aos-ihero__lede {
	margin: 1.4rem 0 0;
	max-width: 54ch;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.6;
	color: hsl(var(--bg) / 0.66);
}
.aos-ihero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(1.9rem, 4.5vh, 2.75rem);
}
.aos-ihero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	margin: clamp(2.25rem, 5vh, 3rem) 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid hsl(var(--bg) / 0.12);
	list-style: none;
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.5);
}
.aos-ihero__trust li { display: inline-flex; align-items: center; gap: 0.55rem; }
.aos-ihero__trust li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
}

/* Live cost meter — the hero's signature. Hairline panel, mono chrome,
   tabular figures that tick. Derived from the page's own numbers. */
.aos-meter {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid hsl(var(--bg) / 0.14);
	border-radius: 18px;
	background: linear-gradient(160deg, hsl(var(--bg) / 0.05), hsl(var(--bg) / 0.01));
	backdrop-filter: blur(2px);
}
.aos-meter__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.5);
}
.aos-meter__live {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	box-shadow: 0 0 0 0 hsl(var(--aos-yellow) / 0.6);
	animation: aosMeterPulse 2.4s ease-out infinite;
}
@keyframes aosMeterPulse {
	0%   { box-shadow: 0 0 0 0 hsl(var(--aos-yellow) / 0.5); }
	70%  { box-shadow: 0 0 0 7px hsl(var(--aos-yellow) / 0); }
	100% { box-shadow: 0 0 0 0 hsl(var(--aos-yellow) / 0); }
}
.aos-meter__caption {
	margin: 1rem 0 1.5rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: hsl(var(--bg) / 0.72);
}
.aos-meter__row + .aos-meter__row {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid hsl(var(--bg) / 0.1);
}
.aos-meter__value {
	display: block;
	font-family: var(--display);
	font-size: clamp(2rem, 3.2vw, 2.9rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: hsl(var(--bg));
	font-variant-numeric: tabular-nums;
}
.aos-meter__value em {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.36em;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-left: 4px;
	color: hsl(var(--aos-yellow));
}
.aos-meter__label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.82rem;
	color: hsl(var(--bg) / 0.5);
}
@media (prefers-reduced-motion: reduce) { .aos-meter__live { animation: none; } }

/* ── PROBLEM LEDGER — oversized stat opposite the claim it proves ── */
.aos-s-ledger { border-top: 1px solid hsl(var(--border)); padding-block: clamp(5rem, 12vh, 8rem); }
.aos-s-ledger .aos-s-head { margin-bottom: clamp(2.75rem, 6vh, 4rem); }
.aos-s-ledger__rows { border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-ledger__row {
	display: grid;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
	padding: clamp(2rem, 4.5vh, 3rem) 0;
	border-bottom: 1px solid hsl(var(--border-strong));
}
.aos-s-ledger__stat {
	font-family: var(--display);
	font-size: clamp(2.4rem, 4.2vw, 3.6rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-ledger__unit {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-ledger__claim {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
}
.aos-s-ledger__body { margin: 0.85rem 0 0; max-width: 62ch; line-height: 1.6; color: hsl(var(--fg-muted)); }

/* ── PROOF — one case, told as a snippet, not a wall. Four cases at equal
   weight meant none of them landed. Photography carries 55% of the frame
   (per the Apple study: the image is the design), the metric asserts, and
   the link hands off to the full story. ── */
.aos-s-proof {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: var(--sp-band);
}
.aos-s-proof::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(55% 60% at 85% 6%, hsl(var(--aos-yellow) / 0.1), transparent 62%);
}
.aos-s-proof::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.5), transparent);
}
.aos-s-proof .aos-s-title { color: hsl(var(--bg)); }
.aos-s-proof .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-case {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: stretch;
	border: 1px solid hsl(var(--bg) / 0.14);
	border-radius: 24px;
	overflow: hidden;
	background: hsl(var(--bg) / 0.03);
	text-decoration: none;
	transition: border-color .45s var(--ease-out), transform .45s var(--ease-out);
}
.aos-s-case:hover { border-color: hsl(var(--aos-yellow) / 0.45); transform: translateY(-2px); }
.aos-s-case:focus-visible { outline: 2px solid hsl(var(--aos-yellow)); outline-offset: 4px; }
/* Photography — graded to the brand so stock never reads as stock */
.aos-s-case__media { position: relative; overflow: hidden; min-height: clamp(280px, 42vh, 460px); }
.aos-s-case__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: transform 1.2s var(--ease-out);
}
.aos-s-case:hover .aos-s-case__media img { transform: scale(1.04); }
.aos-s-case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 55%, hsl(var(--aos-navy-deep)) 100%),
		linear-gradient(200deg, hsl(var(--aos-blue) / 0.5), hsl(var(--aos-navy-deep) / 0.75));
	mix-blend-mode: multiply;
}
.aos-s-case__badge {
	position: absolute;
	z-index: 1;
	top: clamp(1rem, 2vw, 1.5rem);
	left: clamp(1rem, 2vw, 1.5rem);
	padding: 6px 12px;
	border-radius: 999px;
	background: hsl(var(--aos-navy-deep) / 0.7);
	border: 1px solid hsl(var(--bg) / 0.18);
	backdrop-filter: blur(6px);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.8);
}
.aos-s-case__body {
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 3.5vw, 3.25rem);
}
.aos-s-case__client {
	margin: 0 0 auto;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.45);
}
.aos-s-case__metric {
	display: block;
	margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
	font-family: var(--display);
	font-size: clamp(3.6rem, 6.5vw, 5.5rem);
	font-weight: 600;
	line-height: 0.86;
	letter-spacing: -0.045em;
	color: hsl(var(--aos-yellow));
	font-variant-numeric: tabular-nums;
}
.aos-s-case__unit { display: block; margin-top: 0.8rem; font-size: 0.92rem; color: hsl(var(--bg) / 0.55); }
.aos-s-case__claim {
	margin: clamp(1.5rem, 3vh, 2rem) 0 0;
	padding-top: clamp(1.5rem, 3vh, 2rem);
	border-top: 1px solid hsl(var(--bg) / 0.1);
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	line-height: 1.35;
	color: hsl(var(--bg) / 0.92);
	text-wrap: balance;
}
.aos-s-case__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: clamp(1.75rem, 4vh, 2.25rem);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow));
}
.aos-s-case__link span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid hsl(var(--aos-yellow) / 0.45);
	transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.aos-s-case:hover .aos-s-case__link span {
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	transform: translateX(3px);
}
@media (max-width: 900px) {
	.aos-s-case { grid-template-columns: 1fr; }
	.aos-s-case__media::after { background: linear-gradient(180deg, transparent 45%, hsl(var(--aos-navy-deep)) 100%), linear-gradient(200deg, hsl(var(--aos-blue) / 0.5), hsl(var(--aos-navy-deep) / 0.7)); }
}
@media (prefers-reduced-motion: reduce) {
	.aos-s-case, .aos-s-case__media img, .aos-s-case__link span { transition: none; }
	.aos-s-case:hover { transform: none; }
	.aos-s-case:hover .aos-s-case__media img { transform: none; }
}

/* ── ECONOMICS — the delta belongs BETWEEN the two numbers it compares,
   not in a heavy black column beside them. Each metric is one row: the old
   value (muted), the delta (teal chip), the new value (teal). Contrast is
   carried by weight and colour, not by strike-throughs and slabs. ── */
.aos-s-econ { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-econ__switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.aos-s-econ__switch button {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: transparent;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
	cursor: pointer;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.aos-s-econ__switch button:hover { color: hsl(var(--fg)); border-color: hsl(var(--fg) / 0.35); }
.aos-s-econ__switch button[aria-selected="true"] { background: hsl(var(--aos-navy)); border-color: hsl(var(--aos-navy)); color: hsl(var(--paper)); }
.aos-s-econ__switch button:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-econ__panel[hidden] { display: none; }
.aos-s-econ__instrument {
	border: 1px solid hsl(var(--border-strong));
	border-radius: 22px;
	overflow: hidden;
	background: hsl(var(--paper));
}
/* Metric rows — old | delta | new, on one optical line */
.aos-s-econ__metric {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.4rem, 3vh, 2rem) clamp(1.5rem, 3vw, 2.75rem);
	border-bottom: 1px solid hsl(var(--border));
}
.aos-s-econ__metric:first-child { background: hsl(var(--bg-alt) / 0.6); }
.aos-s-econ__val { display: flex; flex-direction: column; gap: 0.3rem; }
.aos-s-econ__val--old b {
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: hsl(var(--fg-subtle));
	font-variant-numeric: tabular-nums;
}
.aos-s-econ__val--new { text-align: right; }
.aos-s-econ__val--new b {
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-econ__val span {
	font-family: var(--mono);
	font-size: 0.56rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-econ__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 7px 14px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow-soft));
	border: 1px solid hsl(var(--aos-yellow) / 0.35);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
	white-space: nowrap;
}
.aos-s-econ__chip::before { content: "\2192"; font-size: 0.9em; }
/* The two paths, side by side under the numbers */
.aos-s-econ__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aos-s-econ__path { padding: clamp(1.4rem, 3vh, 2rem) clamp(1.5rem, 3vw, 2.75rem); }
.aos-s-econ__path--before { background: hsl(var(--bg-alt) / 0.6); border-right: 1px solid hsl(var(--border)); }
.aos-s-econ__label {
	margin: 0 0 1rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-econ__path--after .aos-s-econ__label { color: hsl(var(--aos-yellow-deep)); }
.aos-s-econ__steps { margin: 0; padding: 0; list-style: none; counter-reset: econ; }
.aos-s-econ__steps li {
	position: relative;
	counter-increment: econ;
	padding: 0.45rem 0 0.45rem 2.2rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: hsl(var(--fg-muted));
}
.aos-s-econ__steps li::before {
	content: "0" counter(econ);
	position: absolute;
	left: 0;
	top: 0.5rem;
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 600;
	color: hsl(var(--fg-subtle));
}
.aos-s-econ__path--after .aos-s-econ__steps li::before { color: hsl(var(--aos-yellow-deep)); }
@media (max-width: 767px) {
	.aos-s-econ__metric { grid-template-columns: 1fr; gap: 0.75rem; text-align: left; }
	.aos-s-econ__val--new { text-align: left; }
	.aos-s-econ__paths { grid-template-columns: 1fr; }
	.aos-s-econ__path--before { border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
}

/* ── WHY US — an asymmetric editorial spread. The old version was three
   equal columns over a three-box stat bar: the most default agency layout
   there is. Now the proof numbers stand as a rail beside the claim, and
   the commitments read as a ledger of promises. ── */
.aos-s-why { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.aos-s-why__aside { position: sticky; top: 110px; }
/* Proof rail — the numbers that license the claim, right next to it */
.aos-s-why__proof {
	margin: clamp(2rem, 4vh, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid hsl(var(--border-strong));
}
.aos-s-why__proof li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid hsl(var(--border));
}
.aos-s-why__proof b {
	flex: 0 0 auto;
	min-width: 4.5ch;
	font-family: var(--display);
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-why__proof span {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: hsl(var(--fg-subtle));
}
/* Commitments — a ledger, each promise carrying its own hard term */
.aos-s-why__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-why__item {
	display: grid;
	grid-template-columns: minmax(70px, 90px) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	align-items: baseline;
	padding: clamp(1.6rem, 3.5vh, 2.4rem) 0;
	border-bottom: 1px solid hsl(var(--border-strong));
}
.aos-s-why__term {
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
	line-height: 1.5;
}
.aos-s-why__item h3 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-why__item p { margin: 0.6rem 0 0; font-size: 0.93rem; line-height: 1.6; color: hsl(var(--fg-muted)); max-width: 52ch; }
@media (max-width: 900px) {
	.aos-s-why__grid { grid-template-columns: 1fr; }
	.aos-s-why__aside { position: static; }
	.aos-s-why__item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ── MARKET WINDOW — a closing-window timeline ── */
.aos-s-window { border-top: 1px solid hsl(var(--border)); padding-block: clamp(5rem, 12vh, 8rem); }
.aos-s-window .aos-s-head { margin-bottom: clamp(2.75rem, 6vh, 4rem); }
.aos-s-window__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.aos-s-window__step { position: relative; padding: 1.75rem 0 0; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-window__step::before {
	content: "";
	position: absolute;
	top: -1px; left: 0;
	height: 3px;
	width: 100%;
	background: hsl(var(--border-strong));
}
.aos-s-window__step--open::before { background: hsl(var(--aos-yellow)); }
.aos-s-window__step--soon::before { background: hsl(var(--aos-yellow) / 0.4); width: 55%; }
.aos-s-window__step--closed::before { background: hsl(var(--fg) / 0.25); width: 18%; }
.aos-s-window__when {
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-window__step--closed .aos-s-window__when { color: hsl(var(--fg-subtle)); }
.aos-s-window__step h3 {
	margin: 0.7rem 0 0;
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	color: hsl(var(--fg));
}
.aos-s-window__step p { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-window__kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 6vh, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid hsl(var(--border-strong));
	border-radius: 16px;
	background: hsl(var(--bg-alt));
}
.aos-s-window__kicker b {
	font-family: var(--display);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-window__kicker p { margin: 0; flex: 1 1 32ch; font-size: 0.95rem; line-height: 1.6; color: hsl(var(--fg-muted)); }

/* ── PRICING — three tiers, the middle one carried ── */
.aos-s-pricing {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: clamp(5rem, 12vh, 8rem);
}
.aos-s-pricing::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(55% 50% at 50% 0%, hsl(var(--aos-yellow) / 0.12), transparent 60%);
}
.aos-s-pricing .aos-s-title { color: hsl(var(--bg)); }
.aos-s-pricing .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-pricing .aos-s-lede { color: hsl(var(--bg) / 0.6); }
.aos-s-pricing .aos-s-head { margin-bottom: clamp(2.75rem, 6vh, 4rem); }
.aos-s-pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.aos-s-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 2.6vw, 2.4rem);
	border: 1px solid hsl(var(--bg) / 0.14);
	border-radius: 20px;
	background: hsl(var(--bg) / 0.03);
}
.aos-s-tier--featured {
	border-color: hsl(var(--aos-yellow) / 0.55);
	background: linear-gradient(170deg, hsl(var(--aos-yellow) / 0.1), hsl(var(--bg) / 0.02));
	box-shadow: 0 30px 70px -30px hsl(var(--aos-yellow) / 0.3);
}
.aos-s-tier__flag {
	position: absolute;
	top: -1px;
	right: clamp(1.25rem, 2vw, 1.75rem);
	transform: translateY(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	font-family: var(--mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.aos-s-tier__name {
	margin: 0;
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: hsl(var(--bg));
}
.aos-s-tier__price {
	margin: 0.85rem 0 0;
	font-family: var(--display);
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: hsl(var(--aos-yellow));
	font-variant-numeric: tabular-nums;
}
.aos-s-tier__term {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.45);
}
.aos-s-tier__for {
	margin: 1.1rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid hsl(var(--bg) / 0.1);
	font-size: 0.84rem;
	color: hsl(var(--bg) / 0.55);
}
.aos-s-tier__for b { color: hsl(var(--bg) / 0.8); font-weight: 600; }
.aos-s-tier__desc { margin: 0.9rem 0 1.4rem; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--bg) / 0.62); }
.aos-s-tier__list { margin: 0 0 1.75rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.aos-s-tier__list li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: hsl(var(--bg) / 0.72);
}
.aos-s-tier__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 1px;
	background: hsl(var(--aos-yellow));
}
.aos-s-tier .aos-btn { margin-top: auto; align-self: flex-start; }
.aos-s-pricing__note {
	margin: clamp(2.25rem, 5vh, 3rem) auto 0;
	max-width: 68ch;
	text-align: center;
	font-size: 0.92rem;
	line-height: 1.6;
	color: hsl(var(--bg) / 0.55);
}

/* ── Service-page responsive ── */
@media (max-width: 1023px) {
	.aos-ihero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.aos-s-proof__grid { grid-template-columns: 1fr; }
	.aos-s-why__list { grid-template-columns: 1fr; gap: 1.75rem; }
	.aos-s-pricing__grid { grid-template-columns: 1fr; }
	.aos-s-window__rail { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.aos-s-ledger__row { grid-template-columns: 1fr; gap: 1rem; }
	.aos-s-econ__pair { grid-template-columns: 1fr; }
	.aos-s-why__bar { grid-template-columns: 1fr; }
	.aos-s-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* Service-page entrance choreography — rides the shared .aos-reveal gate */
.aos-reveal :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col) { opacity: 0; }
.aos-reveal.is-in :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col) {
	animation: aosSRise 0.6s var(--ease-out) 0.12s forwards;
}
.aos-reveal.is-in :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col):nth-child(2) { animation-delay: 0.24s; }
.aos-reveal.is-in :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col):nth-child(3) { animation-delay: 0.36s; }
.aos-reveal.is-in :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col):nth-child(4) { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
	.aos-reveal :is(.aos-s-ledger__row, .aos-s-proof__case, .aos-s-why__item, .aos-s-window__step, .aos-s-tier, .aos-s-econ__col) { opacity: 1 !important; animation: none !important; }
}
/* Service page owns its scroll anchoring like the homepage does */
main.aos-sp { overflow-anchor: none; }
.aos-ihero__title, .aos-s-ledger__claim, .aos-s-proof__claim { text-wrap: balance; }

@media (max-width: 900px) {
	.aos-s-econ__instrument { grid-template-columns: 1fr; }
	.aos-s-econ__delta { flex-direction: row; justify-content: space-around; gap: 1rem; }
	.aos-s-econ__delta::before, .aos-s-econ__delta::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   RHYTHM — one spacing scale for every section. Hand-tuned clamps had
   drifted (process head 63px vs 54px elsewhere, hero title 22 vs 18), so
   the vertical rhythm read as almost-aligned. These tokens are the source
   of truth; sections opt in rather than inventing their own values.
   ══════════════════════════════════════════════════════════════════════ */
:root {
	--sp-band:  clamp(5rem, 12vh, 8rem);    /* section top/bottom */
	--sp-head:  clamp(2.75rem, 6vh, 4rem);  /* section head → content */
	--sp-title: 1.1rem;                     /* eyebrow → title */
	--sp-lede:  1.2rem;                     /* title → lede */
}
main.aos-sp > section { padding-block: var(--sp-band); }
main.aos-sp .aos-s-head { margin-bottom: var(--sp-head); }
main.aos-sp .aos-s-title { margin-top: var(--sp-title); }
main.aos-sp .aos-s-lede { margin-top: var(--sp-lede); }
main.aos-sp .aos-ihero__title { margin-top: var(--sp-title); }
/* The finale closes the page — it earns extra air, deliberately. */
main.aos-sp > .aos-s-finale { padding-block: calc(var(--sp-band) * 1.25); }
/* FAQ head is sticky inside a grid; its bottom margin only matters stacked. */
@media (max-width: 900px) { main.aos-sp .aos-s-faq .aos-s-head { margin-bottom: var(--sp-head); } }
@media (min-width: 901px) { main.aos-sp .aos-s-faq .aos-s-head { margin-bottom: 0; } }

/* Ledger and proof lose their body copy — the stat and the claim carry
   them. Re-balance what's left so the rows breathe instead of sag. */
.aos-s-ledger__row { align-items: center; }
.aos-s-proof__case .aos-s-proof__stats { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.aos-s-proof__claim { margin-bottom: auto; }

/* ══════════════════════════════════════════════════════════════════════
   SECTION LIBRARY — thirteen additional systems, same law as the hero
   and the work deck: one shared frame, the eyebrow system, hairline
   lattices, mono meta, editorial serif accents, ghost numerals, the
   .aos-btn language. Every section works on .aos-hp and .aos-sp mains.
   ══════════════════════════════════════════════════════════════════════ */

/* ── LOGO STRIP — client names as typography, not logo soup ── */
.aos-s-logos { border-top: 1px solid hsl(var(--border)); padding-block: clamp(2.5rem, 6vh, 4rem); }
.aos-s-logos__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 1.75rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-logos__label i { width: 22px; height: 1px; background: hsl(var(--border-strong)); }
.aos-s-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aos-s-logos__row li {
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: hsl(var(--fg-subtle));
	transition: color 0.3s var(--ease-out);
}
.aos-s-logos__row li:hover { color: hsl(var(--fg)); }

/* ── KEY STAT — one number carries the section ── */
.aos-s-keystat { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-keystat__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}
.aos-s-keystat__num {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(5rem, 12vw, 11rem);
	font-weight: 600;
	line-height: 0.82;
	letter-spacing: -0.05em;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-keystat__num em {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.22em;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-left: 8px;
	color: hsl(var(--fg-subtle));
}
.aos-s-keystat__body h2, .aos-s-keystat__body h3 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.4rem, 2.4vw, 2.1rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-keystat__source {
	display: block;
	margin-top: clamp(1.25rem, 3vh, 1.75rem);
	padding-top: 1.1rem;
	border-top: 1px solid hsl(var(--border));
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}

/* ── FEATURE SPLIT — media beside copy, brand-graded ── */
.aos-s-split { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.aos-s-split--flip .aos-s-split__media { order: 2; }
.aos-s-split__media {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid hsl(var(--border-strong));
	isolation: isolate;
	aspect-ratio: 4 / 3;
	background: hsl(var(--bg-alt));
}
.aos-s-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}
.aos-s-split__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.35), hsl(var(--aos-navy-deep) / 0.45));
	mix-blend-mode: multiply;
}
.aos-s-split__ticks { margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-split__ticks li {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid hsl(var(--border));
	font-size: 0.95rem;
	color: hsl(var(--fg-muted));
}
.aos-s-split__ticks b {
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: hsl(var(--aos-yellow-deep));
}
/* expandable supporting points — native details, animated where supported */
.aos-s-split__accwrap { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); border-top: 1px solid hsl(var(--border-strong)); interpolate-size: allow-keywords; }
.aos-s-split__acc { border-bottom: 1px solid hsl(var(--border)); }
.aos-s-split__acc summary {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.95rem 0;
	cursor: pointer;
	list-style: none;
	font-size: 0.98rem;
	font-weight: 500;
	color: hsl(var(--fg));
	transition: color 0.25s var(--ease-out);
}
.aos-s-split__acc summary::-webkit-details-marker { display: none; }
/* no focus box on click; keyboard users still get a ring */
.aos-s-split__acc summary:focus { outline: none; }
.aos-s-split__acc summary:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; border-radius: 4px; }
.aos-s-split__acc summary:hover { color: hsl(var(--aos-yellow-deep)); }
.aos-s-split__acc summary b { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-split__acc summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 0.9rem; color: hsl(var(--fg-subtle)); transition: transform 0.3s var(--ease-out); }
.aos-s-split__acc[open] summary::after { transform: rotate(45deg); }
.aos-s-split__acc p { margin: 0; padding: 0 0 1.05rem 2rem; max-width: 46ch; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-split__acc::details-content { block-size: 0; overflow-y: clip; transition: content-visibility 0.35s allow-discrete, block-size 0.35s var(--ease-out); }
.aos-s-split__acc[open]::details-content { block-size: auto; }

/* ── FEATURE GRID — six cells on a hairline lattice ── */
.aos-s-features { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-features__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: hsl(var(--fg) / 0.12);
	border: 1px solid hsl(var(--fg) / 0.12);
}
.aos-s-features__cell { background: hsl(var(--bg-alt)); padding: clamp(1.6rem, 2.6vw, 2.4rem); transition: background-color 0.35s var(--ease-out); }
.aos-s-features__cell:hover { background: hsl(var(--paper)); }
.aos-s-features__num {
	display: block;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-features__cell h3 {
	margin: 0.9rem 0 0;
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
	color: hsl(var(--fg));
}
.aos-s-features__cell p { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.55; color: hsl(var(--fg-muted)); }

/* ── COMPARISON — two ways of working, one verdict column ── */
.aos-s-compare { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-compare__table {
	border: 1px solid hsl(var(--border-strong));
	border-radius: 22px;
	overflow: hidden;
	background: hsl(var(--paper));
}
.aos-s-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	border-bottom: 1px solid hsl(var(--border));
}
.aos-s-compare__row:last-child { border-bottom: 0; }
.aos-s-compare__row > * { padding: clamp(1rem, 2vh, 1.35rem) clamp(1.25rem, 2.5vw, 2rem); font-size: 0.94rem; }
.aos-s-compare__row > :nth-child(3) { background: hsl(var(--aos-yellow-soft) / 0.5); }
.aos-s-compare__row--head { background: hsl(var(--bg-alt)); border-bottom: 1px solid hsl(var(--border-strong)); }
.aos-s-compare__row--head > * {
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-compare__row--head > :nth-child(3) { color: hsl(var(--aos-yellow-deep)); }
.aos-s-compare__row dt, .aos-s-compare__what { color: hsl(var(--fg)); font-weight: 500; }
.aos-s-compare__them { color: hsl(var(--fg-subtle)); }
.aos-s-compare__us { color: hsl(var(--fg)); font-weight: 500; }

/* ── QUOTE BAND — one voice, full bleed, navy-deep ── */
.aos-s-quoteband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: var(--sp-band);
	text-align: center;
}
.aos-s-quoteband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(50% 60% at 50% 0%, hsl(var(--aos-yellow) / 0.1), transparent 62%);
}
.aos-s-quoteband::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.5), transparent);
}
.aos-s-quoteband blockquote {
	margin: 0 auto;
	max-width: 30ch;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	line-height: 1.32;
	color: hsl(var(--bg));
	text-wrap: balance;
}
.aos-s-quoteband blockquote::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	font-size: 1.9em;
	line-height: 1;
	color: hsl(var(--aos-yellow));
	margin-bottom: 0.4em;
}
.aos-s-quoteband blockquote mark {
	background: linear-gradient(hsl(var(--aos-yellow) / 0.26), hsl(var(--aos-yellow) / 0.26)) 0 86% / 100% 0.14em no-repeat;
	color: hsl(var(--aos-yellow));
}
.aos-s-quoteband figcaption {
	margin-top: clamp(1.75rem, 4vh, 2.5rem);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.5);
}
.aos-s-quoteband figcaption b { color: hsl(var(--bg) / 0.85); }

/* ── CTA SLIM — a mid-page ask, one line, one button ── */
.aos-s-ctaslim { border-block: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: clamp(2.75rem, 7vh, 4.5rem); }
/* instrument rule: a strip of tick marks fading at both edges */
.aos-s-ctaslim__ticks {
	height: 9px;
	margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
	background: repeating-linear-gradient(90deg, hsl(var(--border-strong)) 0 1px, transparent 1px 14px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.aos-s-ctaslim__kicker { display: block; margin-bottom: 0.8rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-ctaslim__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.aos-s-ctaslim__row h2 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: hsl(var(--fg));
	text-wrap: balance;
}

/* ── NEWSLETTER — one field, one chip, navy band ── */
.aos-s-newsletter {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: var(--sp-band);
	text-align: center;
}
.aos-s-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(45% 55% at 50% 100%, hsl(var(--aos-yellow) / 0.12), transparent 62%);
}
.aos-s-newsletter .aos-s-title { color: hsl(var(--bg)); }
.aos-s-newsletter .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-newsletter__form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 460px;
	margin: clamp(1.75rem, 4vh, 2.5rem) auto 0;
	padding: 6px 6px 6px 20px;
	border: 1px solid hsl(var(--bg) / 0.22);
	border-radius: 999px;
	background: hsl(var(--bg) / 0.04);
	transition: border-color 0.25s var(--ease-out);
}
.aos-s-newsletter__form:focus-within { border-color: hsl(var(--aos-yellow) / 0.6); }
.aos-s-newsletter__form input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 0.95rem;
	color: hsl(var(--bg));
	padding: 8px 0;
}
.aos-s-newsletter__form input::placeholder { color: hsl(var(--bg) / 0.4); }
.aos-s-newsletter__note {
	margin: 1.1rem 0 0;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.4);
}

/* ── ARTICLE TEASERS — three editorial cards ── */
.aos-s-articles { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-articles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.aos-s-articles__card { display: flex; flex-direction: column; padding-top: 1.4rem; border-top: 1px solid hsl(var(--border-strong)); text-decoration: none; }
.aos-s-articles__meta {
	display: flex;
	gap: 1rem;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-articles__meta b { color: hsl(var(--aos-yellow-deep)); }
.aos-s-articles__card h3 {
	margin: 0.9rem 0 0;
	font-family: var(--display);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
	text-wrap: balance;
	transition: color 0.25s var(--ease-out);
}
.aos-s-articles__card:hover h3 { color: hsl(var(--aos-yellow-deep)); }
.aos-s-articles__card p { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-s-articles__card .aos-ghost { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* ── MILESTONES — years down a hairline spine ── */
.aos-s-milestones { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-milestones__rail { position: relative; margin: 0; padding: 0; list-style: none; }
.aos-s-milestones__rail::before {
	content: "";
	position: absolute;
	top: 6px; bottom: 6px; left: clamp(70px, 8vw, 110px);
	width: 1px;
	background: linear-gradient(180deg, hsl(var(--aos-yellow-deep) / 0.6), hsl(var(--border-strong)));
}
.aos-s-milestones__item {
	position: relative;
	display: grid;
	grid-template-columns: clamp(70px, 8vw, 110px) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.25rem, 3vh, 1.9rem) 0;
}
.aos-s-milestones__item::before {
	content: "";
	position: absolute;
	top: calc(clamp(1.25rem, 3vh, 1.9rem) + 0.45em);
	left: calc(clamp(70px, 8vw, 110px) - 5px);
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: hsl(var(--bg));
	border: 2px solid hsl(var(--aos-yellow-deep));
}
.aos-s-milestones__year {
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: hsl(var(--aos-yellow-deep));
	padding-top: 0.3em;
}
.aos-s-milestones__item h3 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
}
.aos-s-milestones__item p { margin: 0.45rem 0 0; max-width: 56ch; font-size: 0.93rem; line-height: 1.55; color: hsl(var(--fg-muted)); }

/* ── CONTACT PANEL — the ways in, as a ledger ── */
.aos-s-contactpanel { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-contactpanel__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.aos-s-contactpanel__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-contactpanel__list a {
	display: grid;
	grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1.25rem, 3vh, 1.75rem) 0.25rem;
	border-bottom: 1px solid hsl(var(--border-strong));
	text-decoration: none;
	transition: background-color 0.3s var(--ease-out);
}
.aos-s-contactpanel__list a:hover { background: hsl(var(--paper)); }
.aos-s-contactpanel__kind {
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-contactpanel__value {
	font-family: var(--display);
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
}
.aos-s-contactpanel__arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	color: hsl(var(--fg));
	background: hsl(var(--paper));
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.aos-s-contactpanel__list a:hover .aos-s-contactpanel__arrow {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	transform: translateX(3px);
}

/* ── VALUES MANIFESTO — numbered assertions, ghost numerals ── */
.aos-s-values { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-values__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); counter-reset: val; }
.aos-s-values__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(90px, 150px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: baseline;
	padding: clamp(1.75rem, 4vh, 2.6rem) 0;
	border-bottom: 1px solid hsl(var(--border-strong));
	counter-increment: val;
}
.aos-s-values__item::before {
	content: "0" counter(val);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.4rem, 4.5vw, 4rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: hsl(var(--fg) / 0.08);
	transition: color 0.35s ease;
}
.aos-s-values__item:hover::before { color: hsl(var(--aos-yellow-deep) / 0.16); }
.aos-s-values__item h3 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.3rem, 2.2vw, 1.9rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-values__item h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-values__item p { margin: 0.65rem 0 0; max-width: 58ch; font-size: 0.94rem; line-height: 1.6; color: hsl(var(--fg-muted)); }

/* ── TEAM GRID — people on the lattice, monogram-first ── */
.aos-s-team { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: hsl(var(--fg) / 0.12);
	border: 1px solid hsl(var(--fg) / 0.12);
}
/* Two-founder variant: a 3-col grid with 2 cards leaves a visible empty
   gap-background cell; render.php appends --two only when count is exactly 2. */
.aos-s-team__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aos-s-team__card { background: hsl(var(--bg)); padding: clamp(1.75rem, 2.8vw, 2.5rem); }
.aos-s-team__mono {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow-soft));
	border: 1px solid hsl(var(--aos-yellow) / 0.3);
	color: hsl(var(--aos-yellow-deep));
	font-family: var(--mono);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}
.aos-s-team__card h3 { margin: 1.1rem 0 0; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.012em; color: hsl(var(--fg)); }
.aos-s-team__role {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-team__card p { margin: 0.8rem 0 0; font-size: 0.9rem; line-height: 1.55; color: hsl(var(--fg-muted)); }

/* ── Library-wide entrance choreography ── */
.aos-reveal :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row, .aos-s-split__grid > *, .aos-s-keystat__grid > *) { opacity: 0; }
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row, .aos-s-split__grid > *, .aos-s-keystat__grid > *) {
	animation: aosSRise 0.6s var(--ease-out) 0.12s forwards;
}
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row):nth-child(2) { animation-delay: 0.22s; }
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row):nth-child(3) { animation-delay: 0.32s; }
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row):nth-child(4) { animation-delay: 0.42s; }
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-team__card, .aos-s-values__item, .aos-s-compare__row):nth-child(5) { animation-delay: 0.52s; }
.aos-reveal.is-in :is(.aos-s-features__cell, .aos-s-team__card, .aos-s-compare__row):nth-child(6) { animation-delay: 0.62s; }
@media (prefers-reduced-motion: reduce) {
	.aos-reveal :is(.aos-s-features__cell, .aos-s-articles__card, .aos-s-team__card, .aos-s-values__item, .aos-s-milestones__item, .aos-s-compare__row, .aos-s-split__grid > *, .aos-s-keystat__grid > *) { opacity: 1 !important; animation: none !important; }
}

/* ── Library responsive ── */
@media (max-width: 1023px) {
	.aos-s-features__grid, .aos-s-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aos-s-articles__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
	.aos-s-keystat__grid, .aos-s-split__grid, .aos-s-contactpanel__grid { grid-template-columns: 1fr; }
	.aos-s-split--flip .aos-s-split__media { order: 0; }
	.aos-s-features__grid, .aos-s-team__grid { grid-template-columns: 1fr; }
	.aos-s-compare__row { grid-template-columns: 1fr; }
	.aos-s-compare__row > * { padding-block: 0.6rem; }
	.aos-s-compare__row > :first-child { padding-top: 1.1rem; font-weight: 600; }
	.aos-s-compare__row > :last-child { padding-bottom: 1.1rem; }
	.aos-s-values__item { grid-template-columns: 1fr; gap: 0.75rem; }
	.aos-s-milestones__rail::before { left: 5px; }
	.aos-s-milestones__item { grid-template-columns: 1fr; gap: 0.35rem; padding-left: 2rem; }
	.aos-s-milestones__item::before { left: 0; }
	.aos-s-contactpanel__list a { grid-template-columns: 1fr; gap: 0.4rem; }
	.aos-s-contactpanel__arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PIN-SCROLL SECTIONS — the homepage's signature, generalized. A shared
   driver scrubs --p (0→1) through any [data-aos-pin] section; each
   section choreographs itself from that one variable. Resting state
   (--p: 1) is the no-JS and reduced-motion fallback, so nothing breaks.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PINNED MANIFESTO — three claims light up as the reader travels ── */
.aos-s-pinman {
	--p: 1;
	position: relative;
	height: 260vh;
	background: hsl(var(--aos-navy-deep));
}
.aos-s-pinman__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
}
.aos-s-pinman__pin::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(55% 60% at 80% 10%, hsl(var(--aos-yellow) / 0.13), transparent 62%);
}
.aos-s-pinman__pin::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.5), transparent);
}
.aos-s-pinman__lines { margin: 0; padding: 0; list-style: none; }
.aos-s-pinman__lines li {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(2.1rem, 4.6vw, 4rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: hsl(var(--bg));
	text-wrap: balance;
}
.aos-s-pinman__lines li + li { margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }
.aos-s-pinman__lines em {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 1.06em;
	color: hsl(var(--aos-yellow));
}
/* Each claim lights up across its own third of the travel */
.aos-s-pinman__lines li:nth-child(1) { opacity: clamp(0.16, (var(--p) - 0.02) * 4, 1); translate: 0 calc(min(1, max(0, (var(--p) - 0.02) * 4)) * -6px + 6px); }
.aos-s-pinman__lines li:nth-child(2) { opacity: clamp(0.16, (var(--p) - 0.3) * 4, 1); translate: 0 calc(min(1, max(0, (var(--p) - 0.3) * 4)) * -6px + 6px); }
.aos-s-pinman__lines li:nth-child(3) { opacity: clamp(0.16, (var(--p) - 0.58) * 4, 1); translate: 0 calc(min(1, max(0, (var(--p) - 0.58) * 4)) * -6px + 6px); }
.aos-s-pinman__progress {
	position: absolute;
	bottom: clamp(2rem, 5vh, 3rem);
	left: 50%;
	translate: -50% 0;
	width: min(220px, 30vw);
	height: 1px;
	background: hsl(var(--bg) / 0.15);
}
.aos-s-pinman__progress::after {
	content: "";
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(var(--p));
	background: hsl(var(--aos-yellow));
}
@media (prefers-reduced-motion: reduce) {
	.aos-s-pinman { height: auto; }
	.aos-s-pinman__pin { position: static; height: auto; padding-block: var(--sp-band); }
	.aos-s-pinman__lines li { opacity: 1 !important; translate: none !important; }
	.aos-s-pinman__progress { display: none; }
}

/* ── PINNED PHONE SHOWCASE — the titanium frame holds center while the
   story scrolls past it. Pure position:sticky; no JS required. ── */
.aos-s-pinphone { border-top: 1px solid hsl(var(--border)); }
.aos-s-pinphone__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.aos-s-pinphone__steps { padding-block: clamp(3rem, 8vh, 5rem); }
.aos-s-pinphone__step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 76vh;
	max-width: 44ch;
}
.aos-s-pinphone__step + .aos-s-pinphone__step { border-top: 1px solid hsl(var(--border)); }
.aos-s-pinphone__num {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.6rem, 4.5vw, 4rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: hsl(var(--fg) / 0.08);
}
.aos-s-pinphone__step h3 {
	margin: 1.4rem 0 0;
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-pinphone__step h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-pinphone__step p { margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-pinphone__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}
.aos-s-pinphone__stage::before {
	content: "";
	position: absolute;
	inset: 12% 6%;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(50% 50% at 50% 42%, hsl(var(--aos-yellow) / 0.16), transparent 70%),
		radial-gradient(60% 55% at 55% 70%, hsl(var(--aos-blue) / 0.12), transparent 72%);
	filter: blur(10px);
}
.aos-s-pinphone__stage .aos-phone { width: min(72%, 320px); }
@media (max-width: 900px) {
	.aos-s-pinphone__grid { grid-template-columns: 1fr; }
	.aos-s-pinphone__stage { position: relative; height: auto; padding-block: 2rem; order: -1; }
	.aos-s-pinphone__step { min-height: 0; padding-block: clamp(2rem, 5vh, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
	.aos-s-pinphone__stage { position: relative; height: auto; padding-block: 2rem; }
	.aos-s-pinphone__step { min-height: 0; padding-block: clamp(2rem, 5vh, 3rem); }
}

/* ── STACKING STATEMENTS — three full panels deal over each other ── */
.aos-s-pinstack { padding-block: clamp(2rem, 5vh, 3.5rem); }
.aos-s-pinstack__deck {
	max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}
.aos-s-pinstack__panel {
	position: sticky;
	top: clamp(72px, 9vh, 110px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(76vh, 720px);
	margin-bottom: clamp(2rem, 5vh, 3rem);
	padding: clamp(2.5rem, 5vw, 5rem);
	border-radius: 28px;
	border: 1px solid hsl(var(--border));
	overflow: hidden;
	isolation: isolate;
	background: hsl(var(--paper));
	box-shadow:
		0 -24px 60px -46px hsl(var(--aos-navy-deep) / 0.5),
		0 30px 80px -40px hsl(var(--aos-navy-deep) / 0.35);
}
.aos-s-pinstack__panel:last-child { margin-bottom: 0; }
.aos-s-pinstack__panel--wash {
	background:
		radial-gradient(60% 80% at 88% 12%, hsl(var(--aos-yellow) / 0.14), transparent 65%),
		linear-gradient(115deg, hsl(var(--paper)) 45%, hsl(var(--aos-yellow-soft)) 100%);
}
.aos-s-pinstack__panel--dark {
	border-color: hsl(var(--aos-navy-soft));
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(55% 70% at 85% 10%, hsl(var(--aos-yellow) / 0.16), transparent 62%),
		linear-gradient(140deg, hsl(var(--aos-navy-deep)) 0%, hsl(var(--aos-navy)) 60%, hsl(var(--aos-navy-deep)) 100%);
}
.aos-s-pinstack__kicker {
	margin: 0 0 1.25rem;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-pinstack__panel--dark .aos-s-pinstack__kicker { color: hsl(var(--aos-yellow)); }
.aos-s-pinstack__panel h3 {
	margin: 0;
	max-width: 22ch;
	font-family: var(--display);
	font-size: clamp(1.9rem, 4vw, 3.4rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-pinstack__panel--dark h3 { color: hsl(var(--bg)); }
.aos-s-pinstack__panel h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-pinstack__panel--dark h3 em { color: hsl(var(--aos-yellow)); }
.aos-s-pinstack__panel p { margin: 1.1rem 0 0; max-width: 50ch; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-pinstack__panel--dark p { color: hsl(var(--bg) / 0.62); }
.aos-s-pinstack__panel .aos-btn { margin-top: clamp(1.75rem, 4vh, 2.5rem); align-self: flex-start; }
.aos-s-pinstack__ghost {
	position: absolute;
	top: clamp(1rem, 2.5vh, 1.75rem);
	right: clamp(1.25rem, 3vw, 2.75rem);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(6.5rem, 12vw, 11rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: hsl(var(--fg) / 0.07);
	pointer-events: none;
	user-select: none;
}
.aos-s-pinstack__panel--dark .aos-s-pinstack__ghost { color: hsl(var(--bg) / 0.08); }
@media (prefers-reduced-motion: reduce) {
	.aos-s-pinstack__panel { position: static; min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   CROWN JEWELS — twenty-five more systems. Same law throughout: the
   lattice, the mono meta, the editorial italic, the teal restraint, the
   one button. Scroll choreography rides the shared --p driver; marquees
   and the orbit are pure CSS; tabs/carousel/slider share three tiny
   generic JS primitives. Everything degrades to a designed resting state.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. BENTO — one asymmetric board, six unequal cells ── */
.aos-s-bento { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-bento__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(150px, auto);
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}
.aos-s-bento__cell {
	position: relative;
	border: 1px solid hsl(var(--border-strong));
	border-radius: 20px;
	background: hsl(var(--paper));
	padding: clamp(1.25rem, 2vw, 1.9rem);
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.aos-s-bento__cell:hover { transform: translateY(-3px); border-color: hsl(var(--aos-yellow) / 0.45); }
.aos-s-bento__cell--media { grid-column: span 7; grid-row: span 2; padding: 0; }
.aos-s-bento__cell--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.aos-s-bento__cell--media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.4), hsl(var(--aos-navy-deep) / 0.6));
	mix-blend-mode: multiply;
}
.aos-s-bento__caption {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin: auto 1.4rem 1.25rem;
	padding: 6px 12px;
	border-radius: 999px;
	background: hsl(var(--aos-navy-deep) / 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid hsl(var(--bg) / 0.16);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.9);
}
.aos-s-bento__cell--stat { grid-column: span 5; }
.aos-s-bento__num {
	font-family: var(--display);
	font-size: clamp(2.6rem, 4.5vw, 4rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-bento__cell--dark {
	grid-column: span 5;
	border-color: hsl(var(--aos-navy-soft));
	background:
		radial-gradient(60% 70% at 85% 10%, hsl(var(--aos-yellow) / 0.14), transparent 62%),
		hsl(var(--aos-navy-deep));
}
.aos-s-bento__cell--dark blockquote {
	margin: 0;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.4;
	color: hsl(var(--bg) / 0.92);
}
.aos-s-bento__cell--dark figcaption { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--bg) / 0.5); }
.aos-s-bento__cell--feature { grid-column: span 4; }
.aos-s-bento__cell--feature:last-child { grid-column: span 8; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.aos-s-bento__kicker { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-bento__cell h3 { margin: 0.6rem 0 0; font-family: var(--display); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 600; letter-spacing: -0.012em; color: hsl(var(--fg)); }
.aos-s-bento__cell p { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.5; color: hsl(var(--fg-muted)); }
.aos-s-bento__label { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }

/* ── 2. HORIZONTAL RAIL — pinned, the deck slides sideways on --p ── */
.aos-s-hrail { --p: 1; --shift: -150vw; position: relative; height: 320vh; border-top: 1px solid hsl(var(--border)); }
.aos-s-hrail__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.aos-s-hrail__head { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.aos-s-hrail__track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-inline: var(--wp--style--root--padding-left, 24px);
	transform: translateX(calc((1 - var(--p)) * 0vw + var(--p) * var(--shift)));
	will-change: transform;
}
.aos-s-hrail__card {
	flex: 0 0 auto;
	width: min(68vw, 760px);
	min-height: min(54vh, 480px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border: 1px solid hsl(var(--border-strong));
	border-radius: 24px;
	background: hsl(var(--paper));
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.aos-s-hrail__card--dark {
	border-color: hsl(var(--aos-navy-soft));
	background: radial-gradient(60% 70% at 85% 10%, hsl(var(--aos-yellow) / 0.14), transparent 62%), hsl(var(--aos-navy-deep));
}
.aos-s-hrail__ghost {
	position: absolute;
	top: clamp(0.75rem, 2vh, 1.25rem);
	right: clamp(1rem, 2vw, 1.75rem);
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(5rem, 9vw, 8rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: hsl(var(--fg) / 0.07);
	pointer-events: none;
}
.aos-s-hrail__card--dark .aos-s-hrail__ghost { color: hsl(var(--bg) / 0.08); }
.aos-s-hrail__card h3 { margin: 0; max-width: 24ch; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.18; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-hrail__card--dark h3 { color: hsl(var(--bg)); }
.aos-s-hrail__card h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-hrail__card--dark h3 em { color: hsl(var(--aos-yellow)); }
.aos-s-hrail__card p { margin: 0.75rem 0 0; max-width: 44ch; font-size: 0.94rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-s-hrail__card--dark p { color: hsl(var(--bg) / 0.6); }
.aos-s-hrail__progress { margin: clamp(1.75rem, 4vh, 2.5rem) auto 0; width: min(220px, 30vw); height: 1px; background: hsl(var(--fg) / 0.15); }
.aos-s-hrail__progress::after { content: ""; display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p)); background: hsl(var(--aos-yellow-deep)); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.aos-s-hrail { height: auto; }
	.aos-s-hrail__pin { position: static; height: auto; overflow-x: auto; padding-block: var(--sp-band); scroll-snap-type: x mandatory; }
	.aos-s-hrail__track { transform: none; }
	.aos-s-hrail__card { width: min(82vw, 640px); scroll-snap-align: center; }
	.aos-s-hrail__progress { display: none; }
}

/* ── 3. TESTIMONIAL MARQUEE — two counter-scrolling rows of voices ── */
@keyframes aosMarqX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.aos-s-tmarquee { border-block: 1px solid hsl(var(--border)); padding-block: clamp(3rem, 7vh, 4.5rem); overflow: hidden; }
.aos-s-tmarquee__row { display: flex; width: max-content; gap: clamp(1rem, 1.5vw, 1.5rem); animation: aosMarqX 48s linear infinite; }
.aos-s-tmarquee__row + .aos-s-tmarquee__row { margin-top: clamp(1rem, 1.5vw, 1.5rem); animation-direction: reverse; animation-duration: 56s; }
.aos-s-tmarquee:hover .aos-s-tmarquee__row { animation-play-state: paused; }
.aos-s-tmarquee__chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	max-width: 420px;
	padding: 1rem 1.4rem;
	border: 1px solid hsl(var(--border-strong));
	border-radius: 16px;
	background: hsl(var(--paper));
}
.aos-s-tmarquee__chip q { font-size: 0.9rem; line-height: 1.45; color: hsl(var(--fg-muted)); quotes: "\201C" "\201D"; }
.aos-s-tmarquee__who { font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--fg-subtle)); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	.aos-s-tmarquee__row { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── 4. EXPANDING PANELS — four doors, the open one tells its story ── */
.aos-s-expand { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-expand__row { display: flex; gap: clamp(0.6rem, 1vw, 1rem); min-height: min(62vh, 560px); }
.aos-s-expand__panel {
	position: relative;
	flex: 1;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--aos-navy-deep));
	cursor: pointer;
	transition: flex 0.65s var(--ease-out);
}
.aos-s-expand__panel:hover, .aos-s-expand__panel:focus-within, .aos-s-expand__panel.is-open { flex: 3.2; }
/* closed: quiet duotone. open: full color arrives with a slow settle */
.aos-s-expand__panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.55;
	transform: scale(1.06);
	transition: opacity 0.6s var(--ease-out), filter 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.aos-s-expand__panel:hover img, .aos-s-expand__panel:focus-within img, .aos-s-expand__panel.is-open img { opacity: 1; filter: grayscale(0) contrast(1.02) saturate(1.05); transform: scale(1); }
/* scrim keeps its weight at the foot (copy legibility) and lifts only up top,
   so an opened panel reads as full colour without washing out its own words */
.aos-s-expand__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.45) 0%, hsl(var(--aos-navy-deep) / 0.1) 42%, hsl(var(--aos-navy-deep) / 0.72) 72%, hsl(var(--aos-navy-deep) / 0.94) 88%);
	transition: opacity 0.6s var(--ease-out);
}
/* open: the top clears to full colour, the foot keeps enough weight that the
   index, title, and copy all sit on ~0.8+ — no washed-out teal on bright frames */
.aos-s-expand__panel:hover::after, .aos-s-expand__panel:focus-within::after, .aos-s-expand__panel.is-open::after {
	background: linear-gradient(180deg, transparent 0%, transparent 38%, hsl(var(--aos-navy-deep) / 0.6) 64%, hsl(var(--aos-navy-deep) / 0.93) 86%);
}
/* Titles align across all panels: the copy row collapses to 0fr when closed,
   so the num+title block always rests on the same baseline no matter how many
   lines a panel's copy would wrap to. (opacity alone still reserves space.) */
.aos-s-expand__body {
	position: absolute;
	z-index: 1;
	inset: auto 0 0 0;
	padding: clamp(1.25rem, 2vw, 1.9rem);
	display: grid;
	grid-template-rows: auto auto 0fr;
	transition: grid-template-rows 0.6s var(--ease-out);
}
.aos-s-expand__panel:hover .aos-s-expand__body,
.aos-s-expand__panel:focus-within .aos-s-expand__body,
.aos-s-expand__panel.is-open .aos-s-expand__body { grid-template-rows: auto auto 1fr; }
.aos-s-expand__num { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; color: hsl(var(--aos-yellow)); }
.aos-s-expand__body h3 { margin: 0.5rem 0 0; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.015em; color: hsl(var(--bg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aos-s-expand__body p {
	margin: 0;
	padding-top: 0.6rem;
	min-height: 0;
	overflow: hidden;
	max-width: 44ch;
	font-size: 0.9rem;
	line-height: 1.5;
	color: hsl(var(--bg) / 0.7);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s var(--ease-out) 0.15s, transform 0.45s var(--ease-out) 0.15s;
}
.aos-s-expand__panel:hover p, .aos-s-expand__panel:focus-within p, .aos-s-expand__panel.is-open p { opacity: 1; transform: none; }
@media (max-width: 900px) {
	.aos-s-expand__row { flex-direction: column; min-height: 0; }
	.aos-s-expand__panel { min-height: 200px; }
	.aos-s-expand__body p { opacity: 1; transform: none; }
}

/* ── 5. DEVICE SWITCHER — one stage, phone or browser ── */
.aos-s-devices { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
/* one axis: title left, tabs right on the same head row; stage centered below */
.aos-s-devices .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; text-align: left; }
.aos-s-devices__tabs { display: flex; gap: 0.5rem; }
.aos-s-devices__tabs button {
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: transparent;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
	cursor: pointer;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.aos-s-devices__tabs button[aria-selected="true"] { background: hsl(var(--aos-navy)); border-color: hsl(var(--aos-navy)); color: hsl(var(--paper)); }
.aos-s-devices__tabs button:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
/* fixed-height stage + absolute panels: no height jump when devices swap */
.aos-s-devices__stage { position: relative; height: min(66vh, 640px); isolation: isolate; }
.aos-s-devices__panel { position: absolute; inset: 0; display: grid; place-items: center; }
.aos-s-devices__stage::before {
	content: "";
	position: absolute;
	inset: 8% 18%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 45%, hsl(var(--aos-yellow) / 0.15), transparent 70%);
	filter: blur(12px);
}
.aos-s-devices__stage .aos-phone { width: min(60vw, 270px); }
.aos-s-devices__stage .aos-browser { width: min(92%, 860px); }
.aos-s-devices__panel[hidden] { display: none; }
@media (max-width: 767px) { .aos-s-devices .aos-s-head { flex-direction: column; align-items: flex-start; } .aos-s-devices__stage { height: auto; min-height: 420px; } .aos-s-devices__panel { position: static; } .aos-s-devices__panel[hidden] { display: none; } }

/* ── 6. STAT STRIP — four figures, hairline verticals, one line each ── */
.aos-s-statstrip { border-block: 1px solid hsl(var(--border)); padding-block: clamp(2.5rem, 6vh, 4rem); }
.aos-s-statstrip__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aos-s-statstrip__cell { padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid hsl(var(--border-strong)); }
.aos-s-statstrip__cell:first-child { border-left: 0; padding-left: 0; }
.aos-s-statstrip__cell b {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.2vw, 2.8rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: hsl(var(--fg));
	font-variant-numeric: tabular-nums;
}
.aos-s-statstrip__cell b em { font-style: normal; color: hsl(var(--aos-yellow-deep)); }
.aos-s-statstrip__cell > span { display: block; margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.45; color: hsl(var(--fg-subtle)); }
.aos-s-statstrip__cell b span { display: inline; font: inherit; color: inherit; margin: 0; }
@media (max-width: 900px) {
	.aos-s-statstrip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0; }
	.aos-s-statstrip__cell:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ── 7. PINNED PROCESS — the number counts itself up the stage ── */
.aos-s-pinproc { --p: 1; position: relative; height: 340vh; border-top: 1px solid hsl(var(--border)); }
.aos-s-pinproc__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.aos-s-pinproc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; }
/* The stage is an odometer: one numeral-height window, the roll of four
   solid quiet numerals translating through it on --p, edges masked. */
.aos-s-pinproc__stage {
	position: relative;
	font-size: clamp(9rem, 20vw, 15rem);
	height: 1em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}
.aos-s-pinproc__roll {
	display: flex;
	flex-direction: column;
	transform: translateY(calc(var(--p) * -75%));
	will-change: transform;
}
.aos-s-pinproc__roll span {
	display: flex;
	align-items: center;
	height: 1em;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: hsl(var(--fg) / 0.14);
	font-variant-numeric: tabular-nums;
}
.aos-s-pinproc__steps { margin: 0; padding: 0; list-style: none; }
.aos-s-pinproc__steps li { padding: clamp(0.9rem, 2vh, 1.25rem) 0; border-top: 1px solid hsl(var(--border)); }
.aos-s-pinproc__steps li:first-child { border-top: 0; }
.aos-s-pinproc__steps h3 { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; color: hsl(var(--fg)); }
.aos-s-pinproc__steps p { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; color: hsl(var(--fg-muted)); max-width: 46ch; }
.aos-s-pinproc__steps li:nth-child(1) { opacity: clamp(0.25, (0.28 - var(--p)) * 8 + 1, 1); }
.aos-s-pinproc__steps li:nth-child(1) { opacity: calc(0.25 + 0.75 * clamp(0, (0.28 - var(--p)) * 8, 1)); }
.aos-s-pinproc__steps li:nth-child(2) { opacity: calc(0.25 + 0.75 * clamp(0, 1 - max((var(--p) - 0.53) * 8, (0.28 - var(--p)) * 8), 1)); }
.aos-s-pinproc__steps li:nth-child(3) { opacity: calc(0.25 + 0.75 * clamp(0, 1 - max((var(--p) - 0.78) * 8, (0.53 - var(--p)) * 8), 1)); }
.aos-s-pinproc__steps li:nth-child(4) { opacity: calc(0.25 + 0.75 * clamp(0, (var(--p) - 0.78) * 8, 1)); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.aos-s-pinproc { height: auto; }
	.aos-s-pinproc__pin { position: static; height: auto; padding-block: var(--sp-band); }
	.aos-s-pinproc__grid { grid-template-columns: 1fr; }
	.aos-s-pinproc__stage { display: none; }
	.aos-s-pinproc__steps li { opacity: 1 !important; }
}

/* ── 8. PARALLAX STATEMENT — full-bleed image drifts under a claim ── */
.aos-s-parallax { --p: 0.5; position: relative; height: 170vh; }
.aos-s-parallax__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.aos-s-parallax__pin img {
	position: absolute;
	inset: -18% 0 auto 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transform: translateY(calc(var(--p) * 12%));
	will-change: transform;
}
.aos-s-parallax__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.25), transparent 35%, hsl(var(--aos-navy-deep) / 0.85) 100%),
		linear-gradient(200deg, hsl(var(--aos-blue) / 0.4), hsl(var(--aos-navy-deep) / 0.5));
	mix-blend-mode: multiply;
}
.aos-s-parallax__body { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.aos-s-parallax__body h2 {
	margin: 1.2rem 0 0;
	max-width: 20ch;
	font-family: var(--display);
	font-size: clamp(2.2rem, 4.8vw, 4.2rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: hsl(var(--bg));
	text-wrap: balance;
}
.aos-s-parallax__body h2 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow)); }
@media (prefers-reduced-motion: reduce) {
	.aos-s-parallax { height: auto; }
	.aos-s-parallax__pin { position: static; height: 80vh; }
	.aos-s-parallax__pin img { transform: none; }
}

/* ── 9. VIDEO BAND — ambient motion in a cinema panel ── */
.aos-s-videoband { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-videoband__panel { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; border: 1px solid hsl(var(--border-strong)); aspect-ratio: 21 / 9; transform: translateZ(0); }
/* the video is 24% taller than its frame; --py (−1…1 across the viewport) pans it — true parallax */
.aos-s-videoband__panel video { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transform: translateY(calc(var(--py, 0) * -6%)); will-change: transform; }
.aos-s-videoband__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, hsl(var(--aos-navy-deep) / 0.8)); }
.aos-s-videoband__bar {
	position: absolute;
	z-index: 1;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}
.aos-s-videoband__bar p { margin: 0; font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.6rem); color: hsl(var(--bg)); }
.aos-s-videoband__bar span { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--bg) / 0.6); }
@media (max-width: 767px) { .aos-s-videoband__panel { aspect-ratio: 4 / 3; } }

/* ── 10. SPLIT CTA DUO — two doors, two audiences ── */
.aos-s-duo { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-duo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.aos-s-duo__door {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: min(46vh, 420px);
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border: 1px solid hsl(var(--border-strong));
	border-radius: 24px;
	background: hsl(var(--bg-alt));
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.aos-s-duo__door:hover { transform: translateY(-3px); border-color: hsl(var(--aos-yellow) / 0.5); box-shadow: 0 30px 60px -35px hsl(var(--aos-navy-deep) / 0.4); }
.aos-s-duo__door::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(65% 55% at 12% 0%, hsl(var(--aos-yellow) / 0.09), transparent 62%);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
	pointer-events: none;
}
.aos-s-duo__door:hover::before { opacity: 1; }
/* watermark numeral — solid low-alpha, never hollow */
.aos-s-duo__wm {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: -0.18em;
	font-family: var(--display);
	font-size: clamp(6rem, 11vw, 9.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
	color: hsl(var(--fg) / 0.05);
	pointer-events: none;
	user-select: none;
}
.aos-s-duo__door--dark .aos-s-duo__wm { color: hsl(var(--bg) / 0.06); }
.aos-s-duo__door--dark {
	border-color: hsl(var(--aos-navy-soft));
	background: radial-gradient(60% 70% at 85% 8%, hsl(var(--aos-yellow) / 0.14), transparent 62%), hsl(var(--aos-navy-deep));
}
.aos-s-duo__kicker { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-duo__door--dark .aos-s-duo__kicker { color: hsl(var(--aos-yellow)); }
.aos-s-duo__door h3 { margin: 1rem 0 0; max-width: 18ch; font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-duo__door--dark h3 { color: hsl(var(--bg)); }
.aos-s-duo__door p { margin: 0.75rem 0 0; max-width: 40ch; font-size: 0.93rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-s-duo__door--dark p { color: hsl(var(--bg) / 0.6); }
.aos-s-duo__foot { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.aos-s-duo__foot i { font-style: normal; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.aos-s-duo__door--dark .aos-s-duo__foot i { color: hsl(var(--bg) / 0.55); }
.aos-s-duo__door:hover .aos-s-duo__foot i { color: hsl(var(--fg)); transform: translateX(2px); }
.aos-s-duo__door--dark:hover .aos-s-duo__foot i { color: hsl(var(--bg)); }
.aos-s-duo__go {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--paper));
	color: hsl(var(--fg));
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.aos-s-duo__door--dark .aos-s-duo__go { background: transparent; border-color: hsl(var(--bg) / 0.28); color: hsl(var(--bg)); }
.aos-s-duo__door:hover .aos-s-duo__go { background: hsl(var(--aos-yellow)); border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); transform: translateX(4px); }
@media (max-width: 767px) { .aos-s-duo__grid { grid-template-columns: 1fr; } .aos-s-duo__door { min-height: 0; } }

/* ── 11. LINK INDEX — an A-to-Z of ways in, each row a door ── */
.aos-s-linkindex { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-linkindex__rows { border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-linkindex__row {
	display: grid;
	grid-template-columns: minmax(60px, 100px) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.4rem, 3.2vh, 2.1rem) clamp(0.25rem, 1vw, 1rem);
	border-bottom: 1px solid hsl(var(--border-strong));
	text-decoration: none;
	transition: background-color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.aos-s-linkindex__row:hover { background: hsl(var(--bg-alt)); padding-left: clamp(0.75rem, 2vw, 1.75rem); }
.aos-s-linkindex__num { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; color: hsl(var(--fg-subtle)); }
.aos-s-linkindex__row h3 { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.022em; color: hsl(var(--fg)); }
.aos-s-linkindex__row h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-linkindex__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid hsl(var(--border-strong)); color: hsl(var(--fg)); background: hsl(var(--paper)); transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.aos-s-linkindex__row:hover .aos-s-linkindex__go { background: hsl(var(--aos-yellow)); border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); transform: translateX(4px); }

/* ── 12. QUOTE WALL — a masonry of voices, one lit ── */
.aos-s-quotewall { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-quotewall__cols { columns: 2; column-gap: clamp(1rem, 2vw, 1.5rem); }
.aos-s-quotewall__card {
	break-inside: avoid;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 1px solid hsl(var(--border-strong));
	border-radius: 18px;
	background: hsl(var(--paper));
}
.aos-s-quotewall__card--lit { background: linear-gradient(165deg, hsl(var(--aos-yellow-soft)), hsl(var(--paper))); border-color: hsl(var(--aos-yellow) / 0.4); }
.aos-s-quotewall__card blockquote { margin: 0; font-size: 0.96rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-quotewall__card--lit blockquote { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.45; color: hsl(var(--fg)); }
.aos-s-quotewall__card figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; }
.aos-s-quotewall__card figcaption span { display: flex; flex-direction: column; }
.aos-s-quotewall__card figcaption b { font-size: 0.85rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-quotewall__card figcaption i { font-style: normal; font-size: 0.72rem; color: hsl(var(--fg-subtle)); }
@media (max-width: 767px) { .aos-s-quotewall__cols { columns: 1; } }

/* ── 13. BARS — before/after drawn as data, not decoration ── */
.aos-s-bars { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-bars__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.aos-s-bars__chart { display: flex; flex-direction: column; gap: 1.4rem; }
.aos-s-bars__row { display: grid; gap: 0.5rem; }
.aos-s-bars__label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-bars__label b { color: hsl(var(--fg)); }
.aos-s-bars__track { height: 34px; border-radius: 8px; background: hsl(var(--fg) / 0.06); overflow: hidden; }
.aos-s-bars__fill { display: block; height: 100%; width: var(--w, 50%); border-radius: 8px; background: hsl(var(--fg) / 0.22); }
.aos-s-bars__row--after .aos-s-bars__fill { background: linear-gradient(90deg, hsl(var(--aos-yellow-deep)), hsl(var(--aos-yellow))); }
.aos-reveal .aos-s-bars__fill { width: 0; transition: width 1.1s var(--ease-out) 0.3s; }
.aos-reveal.is-in .aos-s-bars__fill { width: var(--w, 50%); }
@media (max-width: 900px) { .aos-s-bars__grid { grid-template-columns: 1fr; } }

/* ── 14. ORBIT — the stack in slow rotation around the mark ── */
@keyframes aosOrbit { to { rotate: 360deg; } }
@keyframes aosOrbitCounter { to { rotate: -360deg; } }
.aos-s-orbit {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: var(--sp-band);
}
.aos-s-orbit::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.5), transparent); }
.aos-s-orbit .aos-s-title { color: hsl(var(--bg)); }
.aos-s-orbit .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-orbit__stage { position: relative; width: min(78vw, 560px); aspect-ratio: 1; margin: clamp(2rem, 5vh, 3rem) auto 0; }
.aos-s-orbit__ring { position: absolute; inset: 0; border: 1px solid hsl(var(--bg) / 0.12); border-radius: 50%; }
.aos-s-orbit__ring--inner { inset: 22%; }
.aos-s-orbit__core {
	position: absolute;
	top: 50%; left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: clamp(90px, 18%, 120px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	box-shadow: 0 0 0 14px hsl(var(--aos-yellow) / 0.08), 0 0 80px hsl(var(--aos-yellow) / 0.25);
}
.aos-s-orbit__belt { position: absolute; inset: 0; animation: aosOrbit 70s linear infinite; }
.aos-s-orbit__stage:hover .aos-s-orbit__belt, .aos-s-orbit__stage:hover .aos-s-orbit__belt li { animation-play-state: paused; }
.aos-s-orbit__belt li {
	position: absolute;
	top: 50%; left: 50%;
	margin: -16px 0 0 -50px;
	width: 100px;
	text-align: center;
	padding: 7px 0;
	border-radius: 999px;
	border: 1px solid hsl(var(--bg) / 0.2);
	background: hsl(var(--aos-navy) / 0.85);
	backdrop-filter: blur(4px);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.8);
	transform: rotate(var(--a)) translateX(min(39vw, 280px)) rotate(calc(var(--a) * -1));
	animation: aosOrbitCounter 70s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .aos-s-orbit__belt, .aos-s-orbit__belt li { animation: none; } }

/* ── 15. PRESS BAND — outlets speak, we stay quiet ── */
.aos-s-press { border-top: 1px solid hsl(var(--border)); padding-block: clamp(3.5rem, 8vh, 5.5rem); }
.aos-s-press__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.aos-s-press__item { padding-left: clamp(1.25rem, 2vw, 1.75rem); border-left: 1px solid hsl(var(--border-strong)); }
.aos-s-press__outlet { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-press__item q { display: block; margin-top: 0.8rem; font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.4; color: hsl(var(--fg)); quotes: "\201C" "\201D"; }
@media (max-width: 900px) { .aos-s-press__grid { grid-template-columns: 1fr; } }

/* ── 16. SPOTLIGHT — one person, at portrait scale ── */
.aos-s-spotlight { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-spotlight__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.aos-s-spotlight__media { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border: 1px solid hsl(var(--border-strong)); }
.aos-s-spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.aos-s-spotlight__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.35), hsl(var(--aos-navy-deep) / 0.4)); mix-blend-mode: multiply; }
.aos-s-spotlight__quote { margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0; font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.4; color: hsl(var(--fg)); max-width: 34ch; text-wrap: balance; }
.aos-s-spotlight__who { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; }
.aos-s-spotlight__who span { display: flex; flex-direction: column; gap: 2px; }
.aos-s-spotlight__who b { font-size: 0.95rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-spotlight__who i { font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
@media (max-width: 900px) { .aos-s-spotlight__grid { grid-template-columns: 1fr; } .aos-s-spotlight__media { aspect-ratio: 16 / 10; } }

/* ── 17. CAPABILITY MATRIX — what ships at each level ── */
.aos-s-matrix { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-matrix__table { border: 1px solid hsl(var(--border-strong)); border-radius: 22px; overflow: hidden; background: hsl(var(--paper)); }
.aos-s-matrix__row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid hsl(var(--border)); }
.aos-s-matrix__row:last-child { border-bottom: 0; }
.aos-s-matrix__row > * { padding: clamp(0.9rem, 1.8vh, 1.2rem) clamp(1rem, 2vw, 1.75rem); font-size: 0.92rem; display: flex; align-items: center; }
.aos-s-matrix__row > :nth-child(n+2) { justify-content: center; border-left: 1px solid hsl(var(--border)); }
.aos-s-matrix__row > :nth-child(4) { background: hsl(var(--aos-yellow-soft) / 0.5); }
.aos-s-matrix__row--head { background: hsl(var(--bg-alt)); border-bottom-color: hsl(var(--border-strong)); }
.aos-s-matrix__row--head > * { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-matrix__row--head > :nth-child(4) { color: hsl(var(--aos-yellow-deep)); }
.aos-s-matrix__feature { color: hsl(var(--fg)); font-weight: 500; }
.aos-s-matrix__yes { width: 20px; height: 20px; border-radius: 999px; background: hsl(var(--aos-yellow)); position: relative; }
.aos-s-matrix__yes::after { content: ""; position: absolute; top: 6px; left: 5px; width: 9px; height: 5px; border-left: 2px solid hsl(var(--aos-navy-deep)); border-bottom: 2px solid hsl(var(--aos-navy-deep)); transform: rotate(-45deg); }
.aos-s-matrix__no { width: 12px; height: 1.5px; background: hsl(var(--fg) / 0.25); }
@media (max-width: 767px) {
	.aos-s-matrix__row { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
	.aos-s-matrix__row > * { padding: 0.75rem 0.6rem; font-size: 0.8rem; }
}

/* ── 18. BEFORE/AFTER — drag the seam, see the difference ── */
.aos-s-basplit { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-basplit__stage { --x: 50%; position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; border: 1px solid hsl(var(--border-strong)); aspect-ratio: 16 / 9; }
.aos-s-basplit__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aos-s-basplit__before { filter: grayscale(1) contrast(0.95) brightness(1.02); }
.aos-s-basplit__after { clip-path: inset(0 0 0 var(--x)); }
.aos-s-basplit__seam { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: hsl(var(--aos-yellow)); z-index: 1; pointer-events: none; }
.aos-s-basplit__seam::after {
	content: "\2194";
	position: absolute;
	top: 50%; left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	font-size: 1.1rem;
	box-shadow: 0 4px 20px hsl(var(--aos-navy-deep) / 0.4);
}
.aos-s-basplit__stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 2; }
.aos-s-basplit__tag { position: absolute; bottom: 1rem; z-index: 1; padding: 6px 12px; border-radius: 999px; background: hsl(var(--aos-navy-deep) / 0.7); backdrop-filter: blur(6px); border: 1px solid hsl(var(--bg) / 0.18); font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--bg) / 0.85); }
.aos-s-basplit__tag--before { left: 1rem; }
.aos-s-basplit__tag--after { right: 1rem; }

/* ── 19. HEADLINE MARQUEE — the statement at freight-train scale ── */
.aos-s-headline { border-block: 1px solid hsl(var(--border)); padding-block: clamp(2rem, 5vh, 3.5rem); overflow: hidden; }
.aos-s-headline__track { display: flex; width: max-content; animation: aosMarqX 36s linear infinite; }
.aos-s-headline:hover .aos-s-headline__track { animation-play-state: paused; }
.aos-s-headline__set { display: flex; align-items: baseline; white-space: nowrap; padding-right: 0.6em; }
.aos-s-headline__set span {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(4rem, 11vw, 9.5rem);
	line-height: 1;
	letter-spacing: -0.045em;
	color: hsl(var(--fg) / 0.12);
	padding-right: 0.6em;
}
.aos-s-headline__set em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
@media (prefers-reduced-motion: reduce) { .aos-s-headline__track { animation: none; } }

/* ── 20. SNAP CAROUSEL — cards on a rail, arrows on the rail's terms ── */
.aos-s-carousel { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-carousel .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-carousel__nav { display: flex; gap: 0.6rem; }
.aos-s-carousel__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid hsl(var(--border-strong));
	background: hsl(var(--paper));
	color: hsl(var(--fg));
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.aos-s-carousel__btn:hover { background: hsl(var(--aos-yellow)); border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); }
.aos-s-carousel__btn:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; }
.aos-s-carousel__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: 0.25rem;
}
.aos-s-carousel__track::-webkit-scrollbar { display: none; }
.aos-s-carousel__card {
	flex: 0 0 auto;
	width: min(78vw, 420px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	border: 1px solid hsl(var(--border-strong));
	border-radius: 20px;
	background: hsl(var(--paper));
	text-decoration: none;
	transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.aos-s-carousel__card:hover { border-color: hsl(var(--aos-yellow) / 0.5); transform: translateY(-3px); }
.aos-s-carousel__meta { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-carousel__card h3 { margin: 0.9rem 0 0; font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-carousel__card p { margin: 0.7rem 0 1.4rem; font-size: 0.92rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-s-carousel__card .aos-ghost { margin-top: auto; align-self: flex-start; }

/* ── 21. PRICE SOLO — one number, one promise, no grid ── */
.aos-s-pricesolo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: hsl(var(--aos-navy-deep));
	padding-block: var(--sp-band);
}
.aos-s-pricesolo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 55% at 50% 8%, hsl(var(--aos-yellow) / 0.13), transparent 62%); }
.aos-s-pricesolo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow) / 0.5), transparent); }
.aos-s-pricesolo__card {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid hsl(var(--aos-yellow) / 0.45);
	border-radius: 28px;
	background: linear-gradient(170deg, hsl(var(--aos-yellow) / 0.09), hsl(var(--bg) / 0.02));
	box-shadow: 0 40px 90px -40px hsl(var(--aos-yellow) / 0.3);
	text-align: center;
}
.aos-s-pricesolo__kicker { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--aos-yellow)); }
.aos-s-pricesolo__price { margin: 1.25rem 0 0; font-family: var(--display); font-size: clamp(3.2rem, 7vw, 5.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; color: hsl(var(--bg)); font-variant-numeric: tabular-nums; }
.aos-s-pricesolo__price em { font-family: var(--mono); font-style: normal; font-size: 0.24em; font-weight: 600; letter-spacing: 0.08em; color: hsl(var(--bg) / 0.5); }
.aos-s-pricesolo__ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2rem; margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; padding: clamp(1.5rem, 3vh, 2rem) 0 0; border-top: 1px solid hsl(var(--bg) / 0.12); list-style: none; text-align: left; }
.aos-s-pricesolo__ticks li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.5; color: hsl(var(--bg) / 0.72); }
.aos-s-pricesolo__ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1px; background: hsl(var(--aos-yellow)); }
.aos-s-pricesolo__card .aos-btn { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
@media (max-width: 640px) { .aos-s-pricesolo__ticks { grid-template-columns: 1fr; } }

/* ── 22. HERO SPLIT (LIGHT) — the daylight sibling of the meter hero ── */
.aos-hero-split { border-bottom: 1px solid hsl(var(--border)); padding-block: clamp(4rem, 11vh, 7rem) clamp(3.5rem, 9vh, 6rem); }
.aos-hero-split__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.aos-hero-split__title { margin: 1.35rem 0 0; font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; color: hsl(var(--fg)); text-wrap: balance; }
.aos-hero-split__title em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-hero-split__lede { margin: 1.4rem 0 0; max-width: 50ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-hero-split__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.9rem, 4.5vh, 2.75rem); }
.aos-hero-split__media { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border: 1px solid hsl(var(--border-strong)); }
.aos-hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.aos-hero-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.35), hsl(var(--aos-navy-deep) / 0.45)); mix-blend-mode: multiply; }
.aos-hero-split__chip {
	position: absolute;
	z-index: 1;
	left: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	padding: 0.9rem 1.2rem;
	border-radius: 16px;
	background: hsl(var(--aos-navy-deep) / 0.75);
	backdrop-filter: blur(8px);
	border: 1px solid hsl(var(--bg) / 0.18);
}
.aos-hero-split__chip b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: hsl(var(--aos-yellow)); font-variant-numeric: tabular-nums; }
.aos-hero-split__chip > span { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--bg) / 0.6); }
/* Floating proof card — light glass over the duotone panel */
.aos-hero-split__proof {
	position: absolute;
	z-index: 1;
	left: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.6rem 1.1rem 0.6rem 0.6rem;
	border-radius: 999px;
	background: hsl(var(--bg) / 0.92);
	backdrop-filter: blur(12px);
	border: 0.5px solid hsl(var(--bg) / 0.5);
	box-shadow: 0 18px 40px -18px hsl(var(--aos-navy-deep) / 0.55);
}
/* the media panel's img rule (absolute, duotone) must not reach the proof avatars */
.aos-hero-split__proof .aos-avatars--sm img { position: static; inset: auto; width: 30px; height: 30px; filter: none; border-color: hsl(var(--bg)); }
.aos-hero-split__proof-copy { display: block; }
.aos-hero-split__proof-copy b { display: block; font-family: var(--display); font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: hsl(var(--fg)); }
.aos-hero-split__proof-copy i { display: block; margin-top: 0.15rem; font-style: normal; font-size: 0.72rem; line-height: 1.35; color: hsl(var(--fg-subtle)); }
@media (max-width: 900px) { .aos-hero-split__grid { grid-template-columns: 1fr; } .aos-hero-split__media { aspect-ratio: 16 / 10; } }

/* ── 23. HERO CENTERED — the Apple open: name it, claim it ── */
.aos-hero-center { border-bottom: 1px solid hsl(var(--border)); padding-block: clamp(5rem, 14vh, 9rem); text-align: center; }
.aos-hero-center__title { margin: 1.5rem auto 0; max-width: 16ch; font-family: var(--display); font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; color: hsl(var(--fg)); text-wrap: balance; }
.aos-hero-center__title em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-hero-center__lede { margin: 1.4rem auto 0; max-width: 44ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: hsl(var(--fg-muted)); text-wrap: balance; }
.aos-hero-center__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vh, 3rem); }
.aos-hero-center__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
	padding-top: 1.3rem;
	border-top: 1px solid hsl(var(--border));
	max-width: 640px;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-hero-center__meta li { display: inline-flex; align-items: center; gap: 0.55rem; }
.aos-hero-center__meta li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: hsl(var(--aos-yellow-deep)); }

/* ── 24. ANNOTATED FRAME — the product, footnoted ── */
.aos-s-annotated { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-annotated__stage { position: relative; max-width: 980px; margin-inline: auto; }
.aos-s-annotated__stage .aos-browser { width: 100%; }
.aos-s-annotated__note {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-width: 200px;
}
.aos-s-annotated__note::before { content: ""; width: clamp(28px, 4vw, 48px); height: 1px; background: hsl(var(--aos-yellow-deep)); }
.aos-s-annotated__note--left { text-align: right; align-items: flex-end; }
.aos-s-annotated__note b { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-annotated__note span { font-size: 0.82rem; line-height: 1.45; color: hsl(var(--fg-muted)); }
@media (max-width: 1100px) {
	.aos-s-annotated__note { position: static; max-width: none; flex-direction: row; align-items: baseline; gap: 0.75rem; margin-top: 1rem; text-align: left; }
	.aos-s-annotated__note::before { display: none; }
	.aos-s-annotated__note--left { align-items: baseline; }
}

/* ── 25. RECOGNITION — the record, kept in mono ── */
.aos-s-recognition { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-recognition__rows { border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-recognition__row {
	display: grid;
	grid-template-columns: minmax(70px, 110px) minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: baseline;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.1rem, 2.6vh, 1.6rem) 0.25rem;
	border-bottom: 1px solid hsl(var(--border-strong));
	transition: background-color 0.3s var(--ease-out);
}
.aos-s-recognition__row:hover { background: hsl(var(--bg-alt)); }
.aos-s-recognition__year { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-recognition__what { font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -0.014em; color: hsl(var(--fg)); }
.aos-s-recognition__org { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); text-align: right; }
@media (max-width: 640px) {
	.aos-s-recognition__row { grid-template-columns: minmax(60px, 80px) 1fr; }
	.aos-s-recognition__org { grid-column: 2; text-align: left; }
}

/* ── Jewels: shared entrance + responsive spine ── */
.aos-reveal :is(.aos-s-bento__cell, .aos-s-duo__door, .aos-s-press__item, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card) { opacity: 0; }
.aos-reveal.is-in :is(.aos-s-bento__cell, .aos-s-duo__door, .aos-s-press__item, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card) { animation: aosSRise 0.6s var(--ease-out) 0.1s forwards; }
.aos-reveal.is-in :is(.aos-s-bento__cell, .aos-s-duo__door, .aos-s-press__item, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card):nth-child(2) { animation-delay: 0.2s; }
.aos-reveal.is-in :is(.aos-s-bento__cell, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card):nth-child(3) { animation-delay: 0.3s; }
.aos-reveal.is-in :is(.aos-s-bento__cell, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card):nth-child(4) { animation-delay: 0.4s; }
.aos-reveal.is-in :is(.aos-s-bento__cell, .aos-s-linkindex__row, .aos-s-recognition__row):nth-child(5) { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
	.aos-reveal :is(.aos-s-bento__cell, .aos-s-duo__door, .aos-s-press__item, .aos-s-linkindex__row, .aos-s-recognition__row, .aos-s-quotewall__card, .aos-s-carousel__card) { opacity: 1 !important; animation: none !important; }
}
@media (max-width: 900px) {
	.aos-s-bento__cell--media, .aos-s-bento__cell--stat, .aos-s-bento__cell--dark, .aos-s-bento__cell--feature, .aos-s-bento__cell--feature:last-child { grid-column: span 12; }
	.aos-s-bento__cell--media { min-height: 300px; }
	/* The desktop wide-cell treatment (row layout, span 8) squeezes its title
	   and body into side-by-side slivers once the cell is span 12 — stack it. */
	.aos-s-bento__cell--feature:last-child { flex-direction: column; align-items: stretch; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   HAIRLINE PASS — borders were reading harsh. Two moves, site-wide:
   the divider tokens lighten a step inside page mains, and every card
   or panel container wears a half-pixel border (renders as a true
   hairline on retina, a paler line on 1x). Focus rings, button fills,
   and the 2px accent rules are deliberately untouched.
   ══════════════════════════════════════════════════════════════════════ */
main.aos-hp, main.aos-sp {
	--border: 220 9% 92%;
	--border-strong: 220 9% 87%;
}
:is(.aos-s-bento__cell, .aos-s-duo__door, .aos-s-carousel__card, .aos-s-quotewall__card,
	.aos-s-tmarquee__chip, .aos-s-hrail__card, .aos-s-pinstack__panel, .aos-s-econ__instrument,
	.aos-s-compare__table, .aos-s-matrix__table, .aos-s-basplit__stage, .aos-s-videoband__panel,
	.aos-s-split__media, .aos-s-spotlight__media, .aos-hero-split__media, .aos-s-expand__panel,
	.aos-s-window__kicker, .aos-s-tier, .aos-meter, .aos-s-case, .aos-s-pricesolo__card,
	.aos-work__card, .aos-s-features__grid, .aos-s-team__grid, .aos-s-proof__grid,
	.aos-s-voices__lattice, .aos-s-impact__grid) {
	border-width: 0.5px;
}
.aos-s-statstrip__cell, .aos-s-econ__path--before { border-width: 0 0 0 0.5px; }
.aos-s-statstrip__cell:first-child { border-left-width: 0; }

/* ══════════════════════════════════════════════════════════════════════
   BATCH THREE — ten more, Salix-informed: the blueprint frame, and
   product UI drawn entirely from theme tokens (no screenshots): a
   dashboard vignette, spark stats, a code window, a notification stack.
   Plus the editorial pieces: inline-image manifesto, hover-preview list,
   centered FAQ, changelog ledger, avatar CTA.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 26. BLUEPRINT FRAME — the statement, drafted ── */
.aos-s-blueprint { padding-block: var(--sp-band); }
.aos-s-blueprint__frame {
	position: relative;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
	border: 0.5px solid hsl(var(--fg) / 0.18);
	text-align: center;
}
.aos-s-blueprint__frame i {
	position: absolute;
	width: 10px;
	height: 10px;
	border: 1px solid hsl(var(--aos-yellow-deep));
	background: hsl(var(--bg));
}
.aos-s-blueprint__frame i:nth-child(1) { top: -5px; left: -5px; }
.aos-s-blueprint__frame i:nth-child(2) { top: -5px; right: -5px; }
.aos-s-blueprint__frame i:nth-child(3) { bottom: -5px; left: -5px; }
.aos-s-blueprint__frame i:nth-child(4) { bottom: -5px; right: -5px; }
.aos-s-blueprint__dim {
	position: absolute;
	top: -0.5em;
	left: 50%;
	translate: -50% 0;
	padding: 0 12px;
	background: hsl(var(--bg));
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-s-blueprint__frame h2 {
	margin: 0 auto;
	max-width: 22ch;
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.8vw, 3.2rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.026em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-blueprint__frame h2 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-blueprint__note { margin: 1.25rem 0 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }

/* ── 27. DASHBOARD VIGNETTE — the product, drawn from tokens ── */
.aos-s-dash { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-dash__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.aos-s-dash__card {
	border: 0.5px solid hsl(var(--fg) / 0.14);
	border-radius: 18px;
	background: hsl(var(--paper));
	padding: 1.25rem;
	box-shadow: 0 24px 50px -30px hsl(var(--aos-navy-deep) / 0.18);
}
.aos-s-dash__card:nth-child(2) { translate: 0 clamp(0.75rem, 2vw, 1.5rem); }
.aos-s-dash__title { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-dash__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 0.8rem;
	border: 0.5px solid hsl(var(--fg) / 0.1);
	border-radius: 12px;
	background: hsl(var(--bg));
}
.aos-s-dash__row + .aos-s-dash__row { margin-top: 0.5rem; }
.aos-s-dash__row b { font-size: 0.82rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-dash__row span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; color: hsl(var(--fg-subtle)); }
.aos-s-dash__state {
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 0.52rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: hsl(var(--aos-yellow-soft));
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-dash__state--wait { background: hsl(var(--fg) / 0.06); color: hsl(var(--fg-subtle)); }
.aos-s-dash__bar { display: grid; gap: 0.4rem; }
.aos-s-dash__bar + .aos-s-dash__bar { margin-top: 0.9rem; }
.aos-s-dash__bar span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--fg-subtle)); display: flex; justify-content: space-between; }
.aos-s-dash__bar span b { color: hsl(var(--aos-yellow-deep)); }
.aos-s-dash__track { height: 22px; border-radius: 6px; background: hsl(var(--fg) / 0.05); overflow: hidden; }
.aos-s-dash__fill { display: block; height: 100%; width: var(--w, 50%); border-radius: 6px; background: linear-gradient(90deg, hsl(var(--aos-yellow-deep)), hsl(var(--aos-yellow))); }
.aos-s-dash__fill--muted { background: hsl(var(--fg) / 0.18); }
.aos-reveal .aos-s-dash__fill { width: 0; transition: width 1s var(--ease-out) 0.35s; }
.aos-reveal.is-in .aos-s-dash__fill { width: var(--w, 50%); }
.aos-s-dash__big { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: hsl(var(--fg)); font-variant-numeric: tabular-nums; }
.aos-s-dash__delta { display: inline-flex; align-items: center; gap: 4px; margin-left: 0.6rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; color: hsl(var(--aos-yellow-deep)); }
.aos-s-dash__spark { margin-top: 1rem; width: 100%; height: 52px; }
.aos-s-dash__spark polyline { fill: none; stroke: hsl(var(--aos-yellow-deep)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aos-s-dash__spark polygon { fill: hsl(var(--aos-yellow) / 0.12); }
@media (max-width: 900px) { .aos-s-dash__grid { grid-template-columns: 1fr; } .aos-s-dash__card:nth-child(2) { translate: none; } }

/* ── 28. SPARK STATS — three KPIs with their own weather ── */
.aos-s-spark { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-spark__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.aos-s-spark__card { border: 0.5px solid hsl(var(--fg) / 0.14); border-radius: 18px; background: hsl(var(--paper)); padding: clamp(1.4rem, 2.2vw, 1.9rem); }
.aos-s-spark__label { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-spark__value { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 0.9rem; }
.aos-s-spark__value b { font-family: var(--display); font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: hsl(var(--fg)); font-variant-numeric: tabular-nums; }
.aos-s-spark__delta { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-spark__delta--down { color: hsl(var(--fg-subtle)); }
.aos-s-spark__card svg { width: 100%; height: 46px; margin-top: 1.1rem; }
.aos-s-spark__card polyline { fill: none; stroke: hsl(var(--aos-yellow-deep)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .aos-s-spark__grid { grid-template-columns: 1fr; } }

/* ── 29. CODE WINDOW — the API, in the brand's own terminal ── */
.aos-s-code { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-code__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.aos-s-code__window {
	border-radius: 18px;
	overflow: hidden;
	border: 0.5px solid hsl(var(--aos-navy-soft));
	background: hsl(var(--aos-navy-deep));
	box-shadow: 0 40px 80px -40px hsl(var(--aos-navy-deep) / 0.5);
}
.aos-s-code__bar { display: flex; align-items: center; gap: 7px; padding: 0.8rem 1rem; border-bottom: 1px solid hsl(var(--bg) / 0.08); }
.aos-s-code__dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--bg) / 0.15); }
.aos-s-code__file { margin-left: 8px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: hsl(var(--bg) / 0.45); }
.aos-s-code__window pre {
	margin: 0;
	padding: 1.25rem 1.4rem 1.5rem;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 0.78rem;
	line-height: 1.75;
	color: hsl(var(--bg) / 0.75);
}
.aos-s-code__window pre b { font-weight: 600; color: hsl(var(--aos-yellow)); }
.aos-s-code__window pre i { font-style: normal; color: hsl(var(--aos-blue) / 0.9); }
.aos-s-code__window pre u { text-decoration: none; color: hsl(var(--bg) / 0.4); }
@media (max-width: 900px) { .aos-s-code__grid { grid-template-columns: 1fr; } }

/* ── 30. NOTIFICATION STACK — the agent, working, as UI ── */
.aos-s-notif { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-notif__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.aos-s-notif__stack { display: flex; flex-direction: column; gap: 0.9rem; }
.aos-s-notif__card {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 1.2rem;
	border: 0.5px solid hsl(var(--fg) / 0.12);
	border-radius: 16px;
	background: hsl(var(--paper));
	box-shadow: 0 18px 40px -24px hsl(var(--aos-navy-deep) / 0.25);
}
.aos-s-notif__card:nth-child(1) { rotate: -0.6deg; }
.aos-s-notif__card:nth-child(2) { rotate: 0.4deg; translate: clamp(0.5rem, 2vw, 1.5rem) 0; }
.aos-s-notif__card:nth-child(3) { rotate: -0.3deg; }
.aos-s-notif__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: hsl(var(--aos-yellow-soft));
	color: hsl(var(--aos-yellow-deep));
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
}
.aos-s-notif__card b { display: block; font-size: 0.86rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-notif__card p { margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.45; color: hsl(var(--fg-muted)); }
.aos-s-notif__time { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; color: hsl(var(--fg-subtle)); }
.aos-reveal .aos-s-notif__card { opacity: 0; translate: 0 14px; }
.aos-reveal.is-in .aos-s-notif__card { animation: aosSRise 0.55s var(--ease-out) forwards; }
.aos-reveal.is-in .aos-s-notif__card:nth-child(1) { animation-delay: 0.15s; }
.aos-reveal.is-in .aos-s-notif__card:nth-child(2) { animation-delay: 0.5s; }
.aos-reveal.is-in .aos-s-notif__card:nth-child(3) { animation-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) { .aos-reveal .aos-s-notif__card { opacity: 1 !important; animation: none !important; } }
@media (max-width: 900px) { .aos-s-notif__grid { grid-template-columns: 1fr; } }

/* ── 31. INLINE MANIFESTO — images living inside the sentence ── */
.aos-s-inlineman { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-inlineman h2 {
	margin: 0;
	max-width: 24ch;
	font-family: var(--display);
	font-size: clamp(2.2rem, 4.8vw, 4.2rem);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.028em;
	color: hsl(var(--fg));
}
.aos-s-inlineman h2 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-inlineman__img {
	display: inline-block;
	vertical-align: middle;
	width: clamp(3.2rem, 7vw, 6rem);
	height: clamp(2rem, 4.4vw, 3.75rem);
	margin: 0 0.18em;
	border-radius: 999px;
	overflow: hidden;
	border: 0.5px solid hsl(var(--fg) / 0.15);
}
.aos-s-inlineman__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }

/* ── 32. HOVER LIST — rows summon their preview ── */
.aos-s-hoverlist { position: relative; border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-hoverlist__rows { border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-hoverlist__row {
	display: grid;
	grid-template-columns: minmax(60px, 90px) minmax(0, 1fr) auto;
	align-items: baseline;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.4rem, 3vh, 2rem) 0.25rem;
	border-bottom: 1px solid hsl(var(--border-strong));
	text-decoration: none;
	transition: opacity 0.3s var(--ease-out);
}
.aos-s-hoverlist__rows:hover .aos-s-hoverlist__row { opacity: 0.35; }
.aos-s-hoverlist__rows .aos-s-hoverlist__row:hover { opacity: 1; }
.aos-s-hoverlist__num { font-family: var(--mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; color: hsl(var(--fg-subtle)); }
.aos-s-hoverlist__row h3 { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.02em; color: hsl(var(--fg)); }
.aos-s-hoverlist__meta { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-hoverlist__preview {
	position: fixed;
	z-index: 50;
	width: 240px;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	border: 0.5px solid hsl(var(--fg) / 0.2);
	box-shadow: 0 30px 60px -25px hsl(var(--aos-navy-deep) / 0.5);
	pointer-events: none;
	opacity: 0;
	scale: 0.92;
	transition: opacity 0.25s var(--ease-out), scale 0.25s var(--ease-out);
	translate: -50% -50%;
}
.aos-s-hoverlist__preview.is-on { opacity: 1; scale: 1; }
.aos-s-hoverlist__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.aos-s-hoverlist__preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.35), hsl(var(--aos-navy-deep) / 0.4)); mix-blend-mode: multiply; }
@media (hover: none), (prefers-reduced-motion: reduce) { .aos-s-hoverlist__preview { display: none; } .aos-s-hoverlist__rows:hover .aos-s-hoverlist__row { opacity: 1; } }

/* ── 33. FAQ CENTERED — one quiet column of answers ── */
.aos-s-faqcenter { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-faqcenter__col { max-width: 760px; margin-inline: auto; }
.aos-s-faqcenter__col .aos-s-head { text-align: center; }
.aos-s-faqcenter__col .aos-s-eyebrow { justify-content: center; }
.aos-s-faqcenter__col .aos-s-lede { margin-inline: auto; }
.aos-s-faqcenter__list { margin-top: clamp(2.25rem, 5vh, 3.25rem); border-top: 1px solid hsl(var(--border-strong)); }

/* ── 34. CHANGELOG — the product's pulse, kept honestly ── */
.aos-s-changelog { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-changelog__rows { border-top: 1px solid hsl(var(--border-strong)); max-width: 860px; }
.aos-s-changelog__row {
	display: grid;
	grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3.2vh, 2.1rem) 0;
	border-bottom: 1px solid hsl(var(--border-strong));
}
.aos-s-changelog__stamp { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.aos-s-changelog__ver {
	padding: 4px 10px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--aos-yellow) / 0.45);
	background: hsl(var(--aos-yellow-soft) / 0.6);
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-changelog__date { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-changelog__row h3 { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.014em; color: hsl(var(--fg)); }
.aos-s-changelog__row ul { margin: 0.7rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.aos-s-changelog__row li { position: relative; padding-left: 1.2rem; font-size: 0.92rem; line-height: 1.5; color: hsl(var(--fg-muted)); }
.aos-s-changelog__row li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 1px; background: hsl(var(--aos-yellow-deep)); }
@media (max-width: 640px) { .aos-s-changelog__row { grid-template-columns: 1fr; gap: 0.75rem; } .aos-s-changelog__stamp { flex-direction: row; align-items: center; } }

/* ── 35. AVATAR CTA — the room you'd be joining ── */
.aos-s-avatarcta { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); text-align: center; }
.aos-s-avatarcta__stack { display: flex; justify-content: center; margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem); }
.aos-s-avatarcta__stack span {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 2px solid hsl(var(--bg));
	background: hsl(var(--aos-yellow-soft));
	color: hsl(var(--aos-yellow-deep));
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
}
.aos-s-avatarcta__stack span + span { margin-left: -14px; }
.aos-s-avatarcta__stack span:nth-child(even) { background: hsl(var(--aos-navy)); color: hsl(var(--bg)); }
.aos-s-avatarcta__stack span:last-child { background: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); }
.aos-s-avatarcta h2 {
	margin: 0 auto;
	max-width: 20ch;
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.6vw, 3.1rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-s-avatarcta h2 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-avatarcta__note { margin: 1rem 0 0; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-avatarcta .aos-btn { margin-top: clamp(1.75rem, 4vh, 2.5rem); }

/* ── 36. GROWTH STORIES — the Clover pattern in AOS clothes: quote cards
   and an ambient video-testimonial card sharing one snap rail. The video
   card plays a muted portrait loop under a navy grade, the sitter's name
   on the glass. Arrows ride the existing carousel primitive. ── */
.aos-s-stories { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-stories .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-stories__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: 0.25rem;
}
.aos-s-stories__track::-webkit-scrollbar { display: none; }
.aos-s-stories__card {
	position: relative;
	flex: 0 0 auto;
	width: min(76vw, 380px);
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	border: 0.5px solid hsl(var(--fg) / 0.14);
	border-radius: 20px;
	background: hsl(var(--paper));
	overflow: hidden;
	isolation: isolate;
}
.aos-s-stories__card blockquote {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: hsl(var(--fg-muted));
}
.aos-s-stories__card blockquote::before {
	content: "\201C";
	display: block;
	margin-bottom: 0.7rem;
	font-family: var(--editorial);
	font-size: 2.4rem;
	line-height: 0.55;
	color: hsl(var(--aos-yellow));
}
.aos-s-stories__who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; }
.aos-s-stories__who img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 0.5px solid hsl(var(--fg) / 0.14); }
.aos-s-stories__who span { display: flex; flex-direction: column; gap: 2px; }
.aos-s-stories__who b { font-size: 0.88rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-s-stories__who i { font-style: normal; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
/* The video card — ambient loop, navy grade, identity on the glass */
.aos-s-stories__card--video { padding: 0; border-color: hsl(var(--aos-navy-soft)); }
.aos-s-stories__card--video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aos-s-stories__card--video::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.12), transparent 35%, hsl(var(--aos-navy-deep) / 0.82) 100%),
		linear-gradient(200deg, hsl(var(--aos-blue) / 0.22), transparent 55%);
	mix-blend-mode: multiply;
}
.aos-s-stories__glass {
	position: absolute;
	z-index: 1;
	inset: auto 0.9rem 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	border-radius: 14px;
	border: 0.5px solid hsl(var(--bg) / 0.2);
	background: hsl(var(--aos-navy-deep) / 0.55);
	backdrop-filter: blur(10px);
}
.aos-s-stories__glass span { display: flex; flex-direction: column; gap: 2px; }
.aos-s-stories__glass b { font-size: 0.88rem; font-weight: 600; color: hsl(var(--bg)); }
.aos-s-stories__glass i { font-style: normal; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--bg) / 0.6); }
/* Photo story card — same grade + glass as the video card, still image */
.aos-s-stories__card--photo { padding: 0; border-color: hsl(var(--aos-navy-soft)); }
.aos-s-stories__card--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.04); }
.aos-s-stories__card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.12), transparent 35%, hsl(var(--aos-navy-deep) / 0.82) 100%),
		linear-gradient(200deg, hsl(var(--aos-blue) / 0.22), transparent 55%);
	mix-blend-mode: multiply;
}
/* Ledger story card — one engagement told as before → after rows */
.aos-s-stories__card--ledger { background: hsl(var(--aos-navy-deep)); border-color: hsl(var(--aos-navy-soft)); }
.aos-s-stories__card--ledger .aos-s-stories__tag { font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--bg) / 0.5); }
.aos-s-stories__rows { margin: auto 0 0; padding: 0; list-style: none; }
.aos-s-stories__rows li { display: flex; flex-direction: column; gap: 0.3rem; padding-block: clamp(0.8rem, 1.6vh, 1.1rem); border-top: 0.5px solid hsl(var(--bg) / 0.14); }
.aos-s-stories__rows li:first-child { border-top: 0; }
.aos-s-stories__rows i { font-style: normal; font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: hsl(var(--bg) / 0.48); }
.aos-s-stories__rows b { font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500; letter-spacing: -0.014em; color: hsl(var(--bg)); }
.aos-s-stories__rows b em { font-style: normal; color: hsl(var(--aos-yellow)); }

/* ══════════════════════════════════════════════════════════════════════
   HUNAAR SET — ten systems translated from the Hunar template into the
   house language: photography-led hero card, dark service canvases,
   stat-anchored process, proof board, dark comparison, billing-toggle
   pricing, cover-led articles. Same tokens, same button, same hairlines.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 37. PHOTO HERO CARD — full-bleed portrait inset as one rounded frame ── */
.aos-hero-photo { padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.75rem, 1.5vw, 1.25rem) 0; }
.aos-hero-photo__card {
	position: relative;
	min-height: min(92vh, 900px);
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
}
.aos-hero-photo__card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.25) contrast(1.04);
}
.aos-hero-photo__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.3), transparent 30%, transparent 55%, hsl(var(--aos-navy-deep) / 0.85) 100%),
		linear-gradient(90deg, hsl(var(--aos-navy-deep) / 0.55), transparent 55%);
}
.aos-hero-photo__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(1.75rem, 4vw, 4rem);
}
.aos-hero-photo__title {
	margin: 1.35rem 0 0;
	max-width: 15ch;
	font-family: var(--display);
	font-size: clamp(2.5rem, 5.2vw, 4.6rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.032em;
	color: hsl(var(--bg));
	text-wrap: balance;
}
.aos-hero-photo__title em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.06em; color: hsl(var(--aos-yellow)); }
.aos-hero-photo__lede { margin: 1.3rem 0 0; max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: hsl(var(--bg) / 0.75); }
.aos-hero-photo__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.75rem, 4vh, 2.5rem); }
/* Floating detail card — the small second image, bottom right */
.aos-hero-photo__mini {
	position: absolute;
	z-index: 1;
	right: clamp(1.25rem, 3vw, 3rem);
	bottom: clamp(1.25rem, 3vw, 3rem);
	width: clamp(150px, 18vw, 230px);
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0); /* forces compositor clipping — video/backdrop corners */
	border: 0.5px solid hsl(var(--bg) / 0.3);
	box-shadow: 0 30px 60px -25px hsl(var(--aos-navy-deep) / 0.7);
}
.aos-hero-photo__mini img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aos-hero-photo__mini span {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.5rem 0.8rem;
	background: hsl(var(--aos-navy-deep) / 0.6);
	backdrop-filter: blur(8px);
	border-radius: 0 0 15px 15px; /* backdrop-filter ignores ancestor radius clip */
	font-family: var(--mono);
	font-size: 0.52rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.85);
}
@media (max-width: 767px) { .aos-hero-photo__mini { display: none; } }

/* ── 38. STORY SPLIT — a pill-and-thumb intro beside an arrow ledger ── */
.aos-s-story { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.aos-s-story__intro { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* thumb takes img OR video; aspect lives on the container so modifiers swap it */
.aos-s-story__thumb { display: block; width: clamp(90px, 10vw, 130px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 0.5px solid hsl(var(--fg) / 0.14); transform: translateZ(0); }
.aos-s-story__thumb img, .aos-s-story__thumb video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.aos-s-story__thumb--11 { aspect-ratio: 1 / 1; }
.aos-s-story__thumb--45 { aspect-ratio: 4 / 5; }
.aos-s-story__thumb--169 { aspect-ratio: 16 / 9; width: clamp(120px, 14vw, 190px); }
.aos-s-story h2 { margin: 1.4rem 0 0; font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.024em; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-story h2 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-story__ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-story__ledger li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: clamp(1.1rem, 2.6vh, 1.6rem) 0.25rem;
	border-bottom: 1px solid hsl(var(--border-strong));
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 500;
	letter-spacing: -0.014em;
	color: hsl(var(--fg));
	transition: padding-left 0.3s var(--ease-out);
}
.aos-s-story__ledger li:hover { padding-left: 0.9rem; }
.aos-s-story__ledger li::before { content: "\2192"; font-family: var(--mono); font-size: 0.8em; color: hsl(var(--aos-yellow-deep)); }
@media (max-width: 900px) { .aos-s-story__grid { grid-template-columns: 1fr; } }

/* ── 39. PROJECT CARDS — big covers, the wordmark on the glass ── */
.aos-s-projects { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-projects .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-projects__lede { max-width: 34ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--fg-muted)); text-align: right; }
.aos-s-projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.aos-s-projects__card { text-decoration: none; }
.aos-s-projects__cover {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 4 / 3;
	border: 0.5px solid hsl(var(--fg) / 0.12);
}
.aos-s-projects__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.04); transition: transform 1s var(--ease-out), filter 0.6s var(--ease-out); }
.aos-s-projects__card:hover .aos-s-projects__cover img { transform: scale(1.035); filter: grayscale(0.2) contrast(1.04); }
.aos-s-projects__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.28), hsl(var(--aos-navy-deep) / 0.42)); mix-blend-mode: multiply; }
.aos-s-projects__mark {
	position: absolute;
	z-index: 1;
	top: 50%; left: 50%;
	translate: -50% -50%;
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: hsl(var(--bg));
	text-shadow: 0 2px 30px hsl(var(--aos-navy-deep) / 0.6);
}
.aos-s-projects__meta { display: flex; gap: 0.8rem; margin: 1.1rem 0 0; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-projects__card h3 { margin: 0.45rem 0 0; font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 500; letter-spacing: -0.016em; color: hsl(var(--fg)); transition: color 0.25s var(--ease-out); }
.aos-s-projects__card:hover h3 { color: hsl(var(--aos-yellow-deep)); }
@media (max-width: 767px) { .aos-s-projects__grid { grid-template-columns: 1fr; } }

/* ── 40. INLINE MARQUEE — the train carries a picture with it ── */
.aos-s-inlinemarquee { border-block: 1px solid hsl(var(--border)); padding-block: clamp(2rem, 5vh, 3.5rem); overflow: hidden; }
.aos-s-inlinemarquee__track { display: flex; width: max-content; animation: aosMarqX 40s linear infinite; }
.aos-s-inlinemarquee:hover .aos-s-inlinemarquee__track { animation-play-state: paused; }
.aos-s-inlinemarquee__set { display: flex; align-items: center; white-space: nowrap; }
.aos-s-inlinemarquee__set > span {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(3rem, 8.5vw, 7.5rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: hsl(var(--fg) / 0.22);
	padding-right: 0.35em;
}
.aos-s-inlinemarquee__set > span em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-inlinemarquee__chip {
	flex: 0 0 auto;
	position: relative;
	width: clamp(4.5rem, 10vw, 8.5rem);
	height: clamp(2.8rem, 6.2vw, 5.25rem);
	margin-right: 0.35em;
	border-radius: 999px;
	overflow: hidden;
	border: 0.5px solid hsl(var(--fg) / 0.15);
	transform: translateZ(0);
}
/* absolute fill: immune to global img width/height resets */
.aos-s-inlinemarquee__chip img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
@media (prefers-reduced-motion: reduce) { .aos-s-inlinemarquee__track { animation: none; } }

/* ── 41. SERVICES CANVAS — one dark rounded board, text and image cards ── */
.aos-s-canvas { padding-block: clamp(2rem, 5vh, 3.5rem); }
.aos-s-canvas__board {
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	position: relative;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(55% 60% at 85% 6%, hsl(var(--aos-yellow) / 0.12), transparent 62%),
		hsl(var(--aos-navy-deep));
	padding: clamp(1.75rem, 4vw, 3.5rem);
}
.aos-s-canvas__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.aos-s-canvas__head .aos-s-title { color: hsl(var(--bg)); }
.aos-s-canvas__head .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-canvas__lede { max-width: 34ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--bg) / 0.55); text-align: right; }
.aos-s-canvas__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1rem, 2vw, 1.5rem); }
.aos-s-canvas__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(220px, 32vh, 320px);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 0.5px solid hsl(var(--bg) / 0.14);
	border-radius: 18px;
	background: hsl(var(--bg) / 0.04);
	overflow: hidden;
	transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.aos-s-canvas__cell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 55% at 85% 0%, hsl(var(--aos-yellow) / 0.1), transparent 65%);
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
	pointer-events: none;
}
.aos-s-canvas__cell:hover { background: hsl(var(--bg) / 0.07); border-color: hsl(var(--aos-yellow) / 0.4); }
.aos-s-canvas__cell:hover::before { opacity: 1; }
a.aos-s-canvas__cell { text-decoration: none; color: inherit; }
.aos-s-canvas__idx { display: flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; color: hsl(var(--bg) / 0.38); }
.aos-s-canvas__idx::after { content: ""; width: 26px; height: 1px; background: hsl(var(--aos-yellow) / 0.5); }
.aos-s-canvas__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0.5px solid hsl(var(--bg) / 0.2); color: hsl(var(--aos-yellow)); }
.aos-s-canvas__cell h3 { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: -0.016em; color: hsl(var(--bg)); }
.aos-s-canvas__cell p { margin: 0.6rem 0 0; max-width: 30ch; font-size: 0.9rem; line-height: 1.55; color: hsl(var(--bg) / 0.6); }
.aos-s-canvas__go {
	position: absolute;
	right: clamp(1.2rem, 2vw, 1.75rem);
	bottom: clamp(1.2rem, 2vw, 1.75rem);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--bg) / 0.25);
	color: hsl(var(--bg) / 0.8);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.aos-s-canvas__cell:hover .aos-s-canvas__go { opacity: 1; transform: translateY(0); background: hsl(var(--aos-yellow)); border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); }
.aos-s-canvas__cell--media { position: relative; padding: 0; overflow: hidden; justify-content: flex-start; }
.aos-s-canvas__cell--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.04); }
.aos-s-canvas__cell--media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.3), hsl(var(--aos-navy-deep) / 0.45)); mix-blend-mode: multiply; }
.aos-s-canvas__tag {
	position: absolute;
	z-index: 1;
	top: 1rem; left: 1rem;
	padding: 6px 12px;
	border-radius: 999px;
	background: hsl(var(--aos-navy-deep) / 0.65);
	backdrop-filter: blur(6px);
	border: 0.5px solid hsl(var(--bg) / 0.2);
	font-family: var(--mono);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.85);
}
@media (max-width: 900px) { .aos-s-canvas__grid { grid-template-columns: 1fr; } .aos-s-canvas__head { flex-direction: column; align-items: flex-start; } .aos-s-canvas__lede { text-align: left; } }

/* ── 42. PROCESS WITH PAYOFFS — each step ends in its number ── */
.aos-s-procstats { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-procstats .aos-s-head { margin-bottom: clamp(2.75rem, 6vh, 4rem); }
.aos-s-procstats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }
.aos-s-procstats__col { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-procstats__step { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.014em; color: hsl(var(--fg)); }
.aos-s-procstats__step i { font-style: normal; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; color: hsl(var(--aos-yellow-deep)); }
.aos-s-procstats__col p { margin: 0.8rem 0 0; font-size: 0.93rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-procstats__payoff { display: flex; align-items: baseline; gap: 0.9rem; margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.aos-s-procstats__payoff b {
	font-family: var(--display);
	font-size: clamp(2.2rem, 3.8vw, 3.2rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-procstats__payoff span { max-width: 16ch; font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; color: hsl(var(--fg-subtle)); }
@media (max-width: 900px) { .aos-s-procstats__grid { grid-template-columns: 1fr; } }

/* ── 43. PROOF BOARD — logos, claims, and one dark voice on a row ── */
.aos-s-proofboard { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-proofboard .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.aos-s-proofboard__lede { max-width: 34ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--fg-muted)); text-align: right; }
.aos-s-proofboard__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.aos-s-proofboard__cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 0.5px solid hsl(var(--fg) / 0.14);
	border-radius: 18px;
	background: hsl(var(--paper));
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.aos-s-proofboard__cell:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px hsl(var(--aos-navy-deep) / 0.35); }
.aos-s-proofboard__logos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.aos-s-proofboard__logos span { font-family: var(--display); font-size: 1rem; font-weight: 500; color: hsl(var(--fg-subtle)); }
/* product ledger — name left, platform/meta right, hairline rows */
.aos-s-proofboard__list { margin: 0; padding: 0; list-style: none; }
.aos-s-proofboard__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: clamp(0.7rem, 1.4vh, 0.95rem); border-bottom: 0.5px solid hsl(var(--fg) / 0.1); }
.aos-s-proofboard__list li:last-child { border-bottom: 0; }
.aos-s-proofboard__list b { font-family: var(--display); font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 500; letter-spacing: -0.012em; color: hsl(var(--fg)); }
.aos-s-proofboard__list i { font-style: normal; font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-proofboard__ava { display: flex; }
.aos-s-proofboard__ava img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; border: 1.5px solid hsl(var(--aos-navy-deep)); }
.aos-s-proofboard__ava img + img { margin-left: -9px; }
.aos-s-proofboard__cell > p { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-proofboard__cap { font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-proofboard__cell--dark {
	border-color: hsl(var(--aos-navy-soft));
	background: radial-gradient(60% 70% at 85% 10%, hsl(var(--aos-yellow) / 0.13), transparent 62%), hsl(var(--aos-navy-deep));
}
.aos-s-proofboard__cell--dark > p { color: hsl(var(--bg) / 0.92); font-family: var(--editorial); font-style: italic; }
.aos-s-proofboard__cell--dark > p b { color: hsl(var(--aos-yellow)); font-weight: 500; font-style: normal; font-family: var(--display); }
.aos-s-proofboard__cell--dark .aos-s-proofboard__cap { color: hsl(var(--bg) / 0.5); }
@media (max-width: 900px) { .aos-s-proofboard__row { grid-template-columns: 1fr; } .aos-s-proofboard .aos-s-head { flex-direction: column; align-items: flex-start; } .aos-s-proofboard__lede { text-align: left; } }

/* ── 44. DARK COMPARE — the brand row lit against the field ── */
.aos-s-comparedark { padding-block: clamp(2rem, 5vh, 3.5rem); }
.aos-s-comparedark__board {
	border-radius: 28px;
	overflow: hidden;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(50% 55% at 12% 0%, hsl(var(--aos-yellow) / 0.1), transparent 60%),
		hsl(var(--aos-navy-deep));
	padding: clamp(1.75rem, 4vw, 3.5rem);
}
.aos-s-comparedark__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.aos-s-comparedark__head .aos-s-title { color: hsl(var(--bg)); }
.aos-s-comparedark__head .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-comparedark__lede { max-width: 34ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--bg) / 0.55); text-align: right; }
.aos-s-comparedark__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	align-items: center;
	border-bottom: 1px solid hsl(var(--bg) / 0.1);
}
.aos-s-comparedark__row:last-child { border-bottom: 0; }
.aos-s-comparedark__row > * { padding: clamp(0.9rem, 2vh, 1.25rem) clamp(0.5rem, 1.5vw, 1.25rem); display: flex; justify-content: center; }
.aos-s-comparedark__row > :first-child { justify-content: flex-start; font-family: var(--display); font-weight: 500; font-size: 0.98rem; color: hsl(var(--bg)); }
.aos-s-comparedark__row--head > * { font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--bg) / 0.45); }
.aos-s-comparedark__row--us {
	border-radius: 14px;
	background: hsl(var(--bg) / 0.05);
	border: 0.5px solid hsl(var(--aos-yellow) / 0.4);
}
.aos-s-comparedark__row--us > :first-child { color: hsl(var(--aos-yellow)); font-weight: 600; }
.aos-s-comparedark__yes { width: 20px; height: 20px; border-radius: 999px; background: hsl(var(--aos-yellow)); position: relative; }
.aos-s-comparedark__yes::after { content: ""; position: absolute; top: 6px; left: 5px; width: 9px; height: 5px; border-left: 2px solid hsl(var(--aos-navy-deep)); border-bottom: 2px solid hsl(var(--aos-navy-deep)); transform: rotate(-45deg); }
.aos-s-comparedark__no { width: 12px; height: 1.5px; background: hsl(var(--bg) / 0.25); align-self: center; margin-top: 0.6em; }
@media (max-width: 767px) {
	.aos-s-comparedark__row { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); }
	.aos-s-comparedark__row > * { padding: 0.7rem 0.3rem; font-size: 0.78rem; }
	.aos-s-comparedark__head { flex-direction: column; align-items: flex-start; }
	.aos-s-comparedark__lede { text-align: left; }
}

/* ── 45. PRICING DUO — billing toggle, an add-on card, the dark plan ── */
.aos-s-priceduo { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-priceduo .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-priceduo__lede { max-width: 32ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--fg-muted)); text-align: right; }
.aos-s-priceduo__toggle { display: flex; justify-content: center; gap: 0.4rem; margin: clamp(1.5rem, 3.5vh, 2.25rem) 0; }
.aos-s-priceduo__toggle button {
	padding: 8px 18px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--border-strong));
	background: transparent;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
	cursor: pointer;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.aos-s-priceduo__toggle button[aria-selected="true"] { background: hsl(var(--aos-navy)); border-color: hsl(var(--aos-navy)); color: hsl(var(--paper)); }
.aos-s-priceduo__toggle button:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-priceduo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.aos-s-priceduo__addon {
	display: flex;
	flex-direction: column;
	padding: clamp(1.6rem, 2.8vw, 2.4rem);
	border: 0.5px solid hsl(var(--fg) / 0.14);
	border-radius: 22px;
	background: hsl(var(--paper));
}
.aos-s-priceduo__addon h3 { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.014em; color: hsl(var(--fg)); }
.aos-s-priceduo__addon p { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-priceduo__addonfoot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: clamp(1.5rem, 4vh, 2.5rem); }
.aos-s-priceduo__addonprice { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; color: hsl(var(--fg-subtle)); font-variant-numeric: tabular-nums; }
/* visual add-on switch — a styled checkbox, teal when on */
.aos-s-priceduo__switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.aos-s-priceduo__switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aos-s-priceduo__switch i {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: hsl(var(--fg) / 0.15);
	transition: background-color 0.25s var(--ease-out);
}
.aos-s-priceduo__switch i::after {
	content: "";
	position: absolute;
	top: 3px; left: 3px;
	width: 24px; height: 24px;
	border-radius: 999px;
	background: hsl(var(--paper));
	box-shadow: 0 2px 6px hsl(var(--aos-navy-deep) / 0.3);
	transition: translate 0.25s var(--ease-out);
}
.aos-s-priceduo__switch input:checked + i { background: hsl(var(--aos-yellow)); }
.aos-s-priceduo__switch input:checked + i::after { translate: 22px 0; }
.aos-s-priceduo__switch input:focus-visible + i { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-priceduo__plan {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	border: 0.5px solid hsl(var(--aos-navy-soft));
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(55% 60% at 85% 8%, hsl(var(--aos-yellow) / 0.13), transparent 62%),
		hsl(var(--aos-navy-deep));
}
.aos-s-priceduo__plan h3 { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.018em; color: hsl(var(--bg)); }
.aos-s-priceduo__ticks { margin: clamp(1.25rem, 3vh, 1.9rem) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.aos-s-priceduo__ticks li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; line-height: 1.5; color: hsl(var(--bg) / 0.72); }
.aos-s-priceduo__ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1px; background: hsl(var(--aos-yellow)); }
.aos-s-priceduo__planfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: auto; padding-top: clamp(1.75rem, 4.5vh, 2.75rem); }
.aos-s-priceduo__price { font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.8rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: hsl(var(--bg)); font-variant-numeric: tabular-nums; }
.aos-s-priceduo__price em { font-family: var(--mono); font-style: normal; font-size: 0.26em; font-weight: 600; letter-spacing: 0.08em; color: hsl(var(--bg) / 0.5); }
.aos-s-priceduo__panel[hidden] { display: none; }
@media (max-width: 900px) { .aos-s-priceduo__grid { grid-template-columns: 1fr; } .aos-s-priceduo .aos-s-head { flex-direction: column; align-items: flex-start; } .aos-s-priceduo__lede { text-align: left; } }

/* ── 46. ARTICLE COVERS — the journal, with photography and bylines ── */
.aos-s-articlecovers { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-articlecovers .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-articlecovers__lede { max-width: 32ch; font-size: 0.95rem; line-height: 1.55; color: hsl(var(--fg-muted)); text-align: right; }
.aos-s-articlecovers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.aos-s-articlecovers__card { text-decoration: none; display: flex; flex-direction: column; }
.aos-s-articlecovers__cover { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; aspect-ratio: 1; border: 0.5px solid hsl(var(--fg) / 0.12); }
.aos-s-articlecovers__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) contrast(1.04); transition: transform 0.9s var(--ease-out); }
.aos-s-articlecovers__card:hover .aos-s-articlecovers__cover img { transform: scale(1.04); }
.aos-s-articlecovers__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.2), hsl(var(--aos-navy-deep) / 0.3)); mix-blend-mode: multiply; }
.aos-s-articlecovers__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-articlecovers__meta b { color: hsl(var(--aos-yellow-deep)); }
.aos-s-articlecovers__card h3 { margin: 0.6rem 0 0; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: hsl(var(--fg)); text-wrap: balance; transition: color 0.25s var(--ease-out); }
.aos-s-articlecovers__card:hover h3 { color: hsl(var(--aos-yellow-deep)); }
.aos-s-articlecovers__author { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.aos-s-articlecovers__author .aos-s-voices__monogram { width: 28px; height: 28px; font-size: 0.56rem; }
.aos-s-articlecovers__author span { font-size: 0.82rem; color: hsl(var(--fg-muted)); }
@media (max-width: 900px) { .aos-s-articlecovers__grid { grid-template-columns: 1fr; } }

/* Hunaar set entrance choreography */
.aos-reveal :is(.aos-s-projects__card, .aos-s-canvas__cell, .aos-s-procstats__col, .aos-s-proofboard__cell, .aos-s-articlecovers__card, .aos-s-story__ledger li) { opacity: 0; }
.aos-reveal.is-in :is(.aos-s-projects__card, .aos-s-canvas__cell, .aos-s-procstats__col, .aos-s-proofboard__cell, .aos-s-articlecovers__card, .aos-s-story__ledger li) { animation: aosSRise 0.6s var(--ease-out) 0.1s forwards; }
.aos-reveal.is-in :is(.aos-s-projects__card, .aos-s-canvas__cell, .aos-s-procstats__col, .aos-s-proofboard__cell, .aos-s-articlecovers__card, .aos-s-story__ledger li):nth-child(2) { animation-delay: 0.22s; }
.aos-reveal.is-in :is(.aos-s-canvas__cell, .aos-s-procstats__col, .aos-s-proofboard__cell, .aos-s-articlecovers__card, .aos-s-story__ledger li):nth-child(3) { animation-delay: 0.34s; }
.aos-reveal.is-in :is(.aos-s-story__ledger li):nth-child(4) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
	.aos-reveal :is(.aos-s-projects__card, .aos-s-canvas__cell, .aos-s-procstats__col, .aos-s-proofboard__cell, .aos-s-articlecovers__card, .aos-s-story__ledger li) { opacity: 1 !important; animation: none !important; }
}

/* ── 47. TYPE HERO — the sentence is the hero; the team lives inside it.
   Elevations over the source: editorial teal greeting, duotone avatar
   chips that fan straight on hover, a live local-time status chip, and
   the mono meta rail closing the frame. ── */
.aos-hero-type { border-bottom: 1px solid hsl(var(--border)); padding-block: clamp(4rem, 11vh, 7rem) clamp(3rem, 8vh, 5rem); }
.aos-hero-type__status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(2rem, 5vh, 3rem);
}
.aos-hero-type__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 7px 13px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--fg) / 0.16);
	background: hsl(var(--paper));
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-muted));
}
.aos-hero-type__chip--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: hsl(var(--aos-yellow));
	box-shadow: 0 0 0 0 hsl(var(--aos-yellow) / 0.6);
	animation: aosMeterPulse 2.4s ease-out infinite;
}
.aos-hero-type__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.aos-hero-type__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(2.6rem, 5.4vw, 4.8rem);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.032em;
	color: hsl(var(--fg));
	text-wrap: balance;
}
.aos-hero-type__hey {
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	color: hsl(var(--aos-yellow-deep));
	margin-right: 0.15em;
}
.aos-hero-type__title em { font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: 1.05em; color: hsl(var(--aos-yellow-deep)); }
/* The crew, inside the sentence */
.aos-hero-type__crew {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0.14em;
	translate: 0 -0.06em;
}
.aos-hero-type__crew span {
	display: inline-block;
	width: clamp(2.6rem, 4.6vw, 4.2rem);
	height: clamp(2.6rem, 4.6vw, 4.2rem);
	border-radius: 14px;
	overflow: hidden;
	border: 2px solid hsl(var(--bg));
	box-shadow: 0 10px 26px -12px hsl(var(--aos-navy-deep) / 0.45);
	transition: rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
.aos-hero-type__crew span img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.75) contrast(1.06); transition: filter 0.35s var(--ease-out); }
.aos-hero-type__crew span:nth-child(1) { rotate: -7deg; translate: 0.2em 0; z-index: 1; }
.aos-hero-type__crew span:nth-child(2) { rotate: 4deg; z-index: 2; }
.aos-hero-type__crew span:nth-child(3) { rotate: -3deg; translate: -0.2em 0; z-index: 3; }
.aos-hero-type__crew:hover span { rotate: 0deg; translate: 0 0; }
.aos-hero-type__crew:hover span img { filter: grayscale(0.1) contrast(1.04); }
.aos-hero-type__aside { padding-top: 0.6em; }
.aos-hero-type__aside p { margin: 0; max-width: 38ch; font-size: clamp(0.95rem, 1.15vw, 1.08rem); line-height: 1.65; color: hsl(var(--fg-muted)); }
.aos-hero-type__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.9rem, 4.5vh, 2.75rem); }
.aos-hero-type__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid hsl(var(--border));
	list-style: none;
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
}
.aos-hero-type__meta li { display: inline-flex; align-items: center; gap: 0.55rem; }
.aos-hero-type__meta li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: hsl(var(--aos-yellow-deep)); }
@media (max-width: 900px) { .aos-hero-type__grid { grid-template-columns: 1fr; } .aos-hero-type__aside { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .aos-hero-type__chip--live::before { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════
   REVIEW-NOTES PASS — Eric's 35 keeper notes, implemented. Each block
   cites the note it answers.
   ══════════════════════════════════════════════════════════════════════ */

/* [quote-band] "remove underline" — the mark keeps its teal voice, loses the wash */
.aos-s-quoteband blockquote mark { background: none; }

/* [faq-centered] "HATE the outline when you click" — pointer clicks lose the
   ring everywhere; keyboard focus keeps it (accessibility stays intact) */
.aos-s-faq__item summary:focus { outline: none; }
.aos-s-faq__item summary:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
details.aos-s-faq__item:focus, .aos-s-faq__item summary::-moz-focus-inner { outline: none; border: 0; }

/* [cta-slim] "make text h2 size" */
.aos-s-ctaslim__row h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.05; }

/* [pricing-tiers] "typography spacing flawless" — one rhythm, no drift */
.aos-s-tier__name { letter-spacing: -0.014em; }
.aos-s-tier__price { margin-top: 1rem; }
.aos-s-tier__term { margin-top: 0.6rem; }
.aos-s-tier__for { margin-top: 1.25rem; padding-top: 1.25rem; }
.aos-s-tier__list { margin: 1.25rem 0 1.9rem; gap: 0.7rem; }
.aos-s-tier .aos-btn { margin-top: auto; }

/* Shared avatar stack — seeded with stock faces wherever monograms stood */
.aos-avatars { display: flex; }
.aos-avatars img {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid hsl(var(--bg));
	box-shadow: 0 6px 18px -8px hsl(var(--aos-navy-deep) / 0.4);
}
.aos-avatars img + img { margin-left: -12px; }
.aos-avatars--sm img { width: 30px; height: 30px; border-width: 1.5px; }
.aos-avatars--sm img + img { margin-left: -9px; }
/* [hero-split-light] proof chip becomes an avatar stack */
.aos-hero-split__chip--proof { display: flex; align-items: center; gap: 0.9rem; }
.aos-hero-split__chip--proof .aos-avatars img { border-color: hsl(var(--aos-navy-deep)); }
/* [hero-type-crew] avatars are links now */
.aos-hero-type__crew a { display: inline-block; line-height: 0; border-radius: 14px; }
.aos-hero-type__crew a:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; }

/* [bento] media cell takes video or an auto-playing slideshow; badge gone */
.aos-s-bento__cell--media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes aosSlidefade { 0%, 28% { opacity: 1; } 38%, 90% { opacity: 0; } 100% { opacity: 1; } }
.aos-s-bento__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: aosSlidefade 12s infinite; }
.aos-s-bento__slides img:nth-child(2) { animation-delay: 4s; }
.aos-s-bento__slides img:nth-child(3) { animation-delay: 8s; }
@media (prefers-reduced-motion: reduce) { .aos-s-bento__slides img { animation: none; } .aos-s-bento__slides img:first-child { opacity: 1; } }

/* [hero-photo-card] the mini is a live clip; corners stay crisp */
.aos-hero-photo__mini video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }

/* [inline-marquee] WCAG contrast + pills that vary and always fill */
.aos-s-inlinemarquee__set > span { color: hsl(var(--fg) / 0.55); }
.aos-s-inlinemarquee__chip img { display: block; }
.aos-s-inlinemarquee__chip--wide { width: clamp(6rem, 13vw, 11rem); }
.aos-s-inlinemarquee__chip--square { border-radius: 22px; width: clamp(2.8rem, 6.2vw, 5.25rem); }

/* [inline-manifesto] refine: looser measure, alternating chip shapes */
.aos-s-inlineman h2 { max-width: 28ch; line-height: 1.26; }
.aos-s-inlineman__img:nth-of-type(even) { border-radius: 20px; }

/* [logo-strip] right-to-left scroll with a gorgeous edge fade */
.aos-s-logos--marquee .aos-s-logos__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes aosMarqRTL { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.aos-s-logos--marquee .aos-s-logos__track { display: flex; width: max-content; animation: aosMarqRTL 36s linear infinite; }
.aos-s-logos--marquee .aos-s-logos__row { flex-wrap: nowrap; padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.aos-s-logos--marquee:hover .aos-s-logos__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aos-s-logos--marquee .aos-s-logos__track { animation: none; } }

/* [contact-panel] icons ride the kind column */
.aos-s-contactpanel__kind { display: inline-flex; align-items: center; gap: 0.55rem; }
.aos-s-contactpanel__kind svg { flex: 0 0 auto; }

/* [feature-grid] icon chips as an option beside the index */
.aos-s-features__iconchip {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 0.9rem;
	border-radius: 11px;
	background: hsl(var(--aos-yellow-soft));
	color: hsl(var(--aos-yellow-deep));
}

/* [problem-ledger] optional CTA aligned with the heading */
.aos-s-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* [parallax-statement] fluidity: composited transform + gentle smoothing */
.aos-s-parallax__pin img {
	transform: translate3d(0, calc(var(--p) * -9%), 0);
	transition: transform 0.12s linear;
}

/* [pin-phone] the screen changes with the story — three app screens
   crossfade on the same --p that paces the steps */
.aos-s-pinphone { --p: 0; }
.aos-s-pinphone .aos-phone { position: relative; }
.aos-s-pinphone .aos-phone img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 38px; }
.aos-s-pinphone .aos-phone img:nth-of-type(1) { opacity: clamp(0, 1 - (var(--p) - 0.26) * 10, 1); }
.aos-s-pinphone .aos-phone img:nth-of-type(2) { opacity: clamp(0, 1 - max((var(--p) - 0.62) * 10, (0.26 - var(--p)) * 10), 1); }
.aos-s-pinphone .aos-phone img:nth-of-type(3) { opacity: clamp(0, (var(--p) - 0.62) * 10, 1); }
@media (prefers-reduced-motion: reduce) {
	.aos-s-pinphone .aos-phone img { opacity: 0 !important; }
	.aos-s-pinphone .aos-phone img:first-of-type { opacity: 1 !important; }
}

/* [pin-manifesto] the light sibling */
.aos-s-pinman--light { background: hsl(var(--bg)); }
.aos-s-pinman--light .aos-s-pinman__pin::before {
	background: radial-gradient(55% 60% at 80% 10%, hsl(var(--aos-yellow-soft) / 0.7), transparent 62%);
}
.aos-s-pinman--light .aos-s-pinman__pin::after { background: linear-gradient(90deg, transparent, hsl(var(--aos-yellow-deep) / 0.4), transparent); }
.aos-s-pinman--light .aos-s-pinman__lines li { color: hsl(var(--fg)); }
.aos-s-pinman--light .aos-s-pinman__lines em { color: hsl(var(--aos-yellow-deep)); }
.aos-s-pinman--light .aos-s-pinman__progress { background: hsl(var(--fg) / 0.12); }
.aos-s-pinman--light .aos-s-pinman__progress::after { background: hsl(var(--aos-yellow-deep)); }

/* [compare-dark] the light sibling */
.aos-s-comparedark--light .aos-s-comparedark__board { background: hsl(var(--paper)); border: 0.5px solid hsl(var(--fg) / 0.14); }
.aos-s-comparedark--light .aos-s-title { color: hsl(var(--fg)); }
.aos-s-comparedark--light .aos-s-title em { color: hsl(var(--aos-yellow-deep)); }
.aos-s-comparedark--light .aos-s-comparedark__lede { color: hsl(var(--fg-muted)); }
.aos-s-comparedark--light .aos-s-comparedark__row { border-bottom-color: hsl(var(--fg) / 0.08); }
.aos-s-comparedark--light .aos-s-comparedark__row > :first-child { color: hsl(var(--fg)); }
.aos-s-comparedark--light .aos-s-comparedark__row--head > * { color: hsl(var(--fg-subtle)); }
.aos-s-comparedark--light .aos-s-comparedark__row--us { background: hsl(var(--aos-yellow-soft) / 0.6); border-color: hsl(var(--aos-yellow) / 0.45); }
.aos-s-comparedark--light .aos-s-comparedark__row--us > :first-child { color: hsl(var(--aos-yellow-deep)); }
.aos-s-comparedark--light .aos-s-comparedark__no { background: hsl(var(--fg) / 0.2); }

/* [hrail] card variety: a media card joins the rail */
.aos-s-hrail__card--media { padding: 0; }
.aos-s-hrail__card--media img, .aos-s-hrail__card--media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.04); }
.aos-s-hrail__card--media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.25), hsl(var(--aos-navy-deep) / 0.45)); mix-blend-mode: multiply; }
.aos-s-hrail__cap {
	position: absolute;
	z-index: 1;
	left: 1.25rem; bottom: 1.25rem;
	padding: 7px 13px;
	border-radius: 999px;
	background: hsl(var(--aos-navy-deep) / 0.65);
	backdrop-filter: blur(6px);
	border: 0.5px solid hsl(var(--bg) / 0.2);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg) / 0.85);
}

/* [growth-stories] a stat-card variation joins the rail */
.aos-s-stories__card--stat {
	justify-content: center;
	background:
		radial-gradient(70% 60% at 15% 10%, hsl(var(--aos-yellow-soft) / 0.8), transparent 70%),
		hsl(var(--paper));
}
.aos-s-stories__statnum {
	font-family: var(--display);
	font-size: clamp(3.2rem, 6vw, 4.6rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: hsl(var(--aos-yellow-deep));
	font-variant-numeric: tabular-nums;
}
.aos-s-stories__statline { margin: 1.1rem 0 0; font-size: 0.98rem; line-height: 1.55; color: hsl(var(--fg-muted)); max-width: 24ch; }

/* [story-split] left column recomposed: thumb leads, claim breathes, action follows */
.aos-s-story__thumb { width: clamp(150px, 16vw, 210px); border-radius: 16px; }
.aos-s-story__thumb img { aspect-ratio: 16 / 10; }
.aos-s-story h2 { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); max-width: 22ch; }
.aos-s-story__act { margin-top: clamp(1.5rem, 3.5vh, 2rem); }

/* [device-switcher] tablet joins; the stage holds its center */
.aos-s-devices__stage { width: 100%; min-height: 540px; }
.aos-tablet {
	width: min(88%, 760px);
	aspect-ratio: 4 / 3;
	padding: 12px;
	border-radius: 26px;
	background: linear-gradient(155deg, hsl(var(--aos-navy-soft)) 0%, hsl(var(--aos-navy-deep)) 52%, hsl(var(--aos-navy)) 100%);
	box-shadow:
		0 2px 4px hsl(var(--aos-navy-deep) / 0.3),
		0 30px 60px hsl(var(--aos-navy-deep) / 0.32),
		inset 0 0 0 1px hsl(var(--paper) / 0.06);
}
.aos-tablet img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 16px; display: block; }

/* [services-canvas] video cells welcome */
.aos-s-canvas__cell--media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* [code-window] "animate code like ai writing it" — line-wipe + caret */
.aos-s-code__window pre .aos-codeline { display: block; overflow: hidden; white-space: pre; max-width: 0; }
.aos-s-code__window pre.is-typing .aos-codeline { animation: aosCodeline 0.6s steps(24, end) forwards; animation-delay: var(--d, 0s); }
@keyframes aosCodeline { from { max-width: 0; } to { max-width: 100%; } }
.aos-s-code__caret { display: inline-block; width: 8px; height: 1em; translate: 0 0.15em; background: hsl(var(--aos-yellow)); animation: aosCaret 1s steps(2) infinite; }
@keyframes aosCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.aos-s-code__window pre .aos-codeline { max-width: 100% !important; animation: none !important; }
	.aos-s-code__caret { display: none; }
}

/* [video-band] parallax within the panel, a real CTA, lightbox affordance */
.aos-s-videoband__panel { cursor: pointer; }
.aos-s-videoband__panel video { height: 124%; top: -12%; transform: translate3d(0, calc(var(--py, 0) * 8%), 0); transition: transform 0.12s linear; }
.aos-s-videoband__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--bg));
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.aos-s-videoband__cta i {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--bg) / 0.4);
	font-style: normal;
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.aos-s-videoband__panel:hover .aos-s-videoband__cta i { background: hsl(var(--aos-yellow)); border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); }
.aos-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 4rem);
	background: hsl(var(--aos-navy-deep) / 0.92);
	backdrop-filter: blur(10px);
}
.aos-lightbox video { width: min(100%, 1200px); max-height: 86vh; border-radius: 18px; box-shadow: 0 60px 120px -40px hsl(0 0% 0% / 0.7); }
.aos-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0.5px solid hsl(var(--bg) / 0.3);
	background: transparent;
	color: hsl(var(--bg));
	font-size: 1.1rem;
	cursor: pointer;
}
.aos-lightbox__close:hover { border-color: hsl(var(--aos-yellow)); color: hsl(var(--aos-yellow)); }

/* ── TEAM CARDS — square duotone portraits, identity below, color on hover ── */
.aos-s-teamcards { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-teamcards .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-teamcards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.aos-s-teamcards__card { text-decoration: none; color: inherit; }
.aos-s-teamcards__photo { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 0.5px solid hsl(var(--fg) / 0.14); transform: translateZ(0); }
.aos-s-teamcards__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.03); transition: filter 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
.aos-s-teamcards__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.28), hsl(var(--aos-navy-deep) / 0.35)); mix-blend-mode: multiply; transition: opacity 0.5s var(--ease-out); }
.aos-s-teamcards__card:hover .aos-s-teamcards__photo img { filter: grayscale(0) contrast(1.02); transform: scale(1); }
.aos-s-teamcards__card:hover .aos-s-teamcards__photo::after { opacity: 0.35; }
.aos-s-teamcards__card h3 { margin: 0.9rem 0 0; font-family: var(--display); font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: -0.014em; color: hsl(var(--fg)); }
.aos-s-teamcards__role { display: block; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
@media (max-width: 900px) { .aos-s-teamcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aos-s-teamcards .aos-s-head { flex-direction: column; align-items: flex-start; } }

/* ── TEAM ROSTER — editorial rows: index, display name, role, headshot on the right ── */
.aos-s-teamroster { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-teamroster__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--border-strong)); }
.aos-s-teamroster__row {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr) 56px;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1.1rem, 2.6vh, 1.6rem);
	border-bottom: 1px solid hsl(var(--border-strong));
	transition: padding-left 0.3s var(--ease-out);
}
.aos-s-teamroster__row:hover { padding-left: 0.9rem; }
.aos-s-teamroster__num { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; color: hsl(var(--fg-subtle)); }
.aos-s-teamroster__row h3 { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.022em; color: hsl(var(--fg)); }
.aos-s-teamroster__role { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-teamroster__face { width: 56px; height: 56px; border-radius: 999px; overflow: hidden; border: 0.5px solid hsl(var(--fg) / 0.14); transform: translateZ(0); }
.aos-s-teamroster__face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.05); transition: filter 0.45s var(--ease-out), transform 0.6s var(--ease-out); }
.aos-s-teamroster__row:hover .aos-s-teamroster__face img { filter: grayscale(0); transform: scale(1); }
@media (max-width: 720px) { .aos-s-teamroster__row { grid-template-columns: minmax(0, 1fr) 48px; } .aos-s-teamroster__num, .aos-s-teamroster__role { display: none; } .aos-s-teamroster__face { width: 48px; height: 48px; } }

/* ── EDITORIAL COLUMNS — two columns of running text, one drop cap ── */
.aos-s-edcols { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-edcols__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.aos-s-edcols__aside { position: sticky; top: 6rem; }
.aos-s-edcols__aside .aos-s-title { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.aos-s-edcols__note { margin: 1.4rem 0 0; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
.aos-s-edcols__body { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); column-rule: 0.5px solid hsl(var(--border-strong)); }
.aos-s-edcols__body p { margin: 0 0 1.2rem; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.75; color: hsl(var(--fg-muted)); break-inside: avoid-column; }
.aos-s-edcols__body p:first-child::first-letter {
	float: left;
	padding-right: 0.12em;
	margin-top: 0.06em;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 4.1em;
	line-height: 0.78;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-edcols__body strong { font-weight: 600; color: hsl(var(--fg)); }
@media (max-width: 900px) { .aos-s-edcols__grid { grid-template-columns: 1fr; } .aos-s-edcols__aside { position: static; } .aos-s-edcols__body { columns: 1; } }

/* ── EDITORIAL FEATURE — running text with images set into the measure ── */
.aos-s-edfeat { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-edfeat__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.aos-s-edfeat__body p { margin: 0 0 1.2rem; max-width: 58ch; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.75; color: hsl(var(--fg-muted)); }
.aos-s-edfeat__body p:first-of-type::first-letter {
	float: left;
	padding-right: 0.12em;
	margin-top: 0.06em;
	font-family: var(--editorial);
	font-style: italic;
	font-weight: 500;
	font-size: 4.1em;
	line-height: 0.78;
	color: hsl(var(--aos-yellow-deep));
}
.aos-s-edfeat__pull { margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; padding-left: 1.4rem; border-left: 2px solid hsl(var(--aos-yellow)); font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.4; color: hsl(var(--fg)); }
.aos-s-edfeat__stack { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vh, 2rem); }
.aos-s-edfeat__fig { margin: 0; }
.aos-s-edfeat__fig:nth-child(2) { margin-left: clamp(1.5rem, 4vw, 3rem); }
.aos-s-edfeat__fig span { display: block; border-radius: 16px; overflow: hidden; border: 0.5px solid hsl(var(--fg) / 0.14); transform: translateZ(0); }
.aos-s-edfeat__fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s var(--ease-out); }
.aos-s-edfeat__fig:hover img { filter: grayscale(0); }
.aos-s-edfeat__fig figcaption { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
@media (max-width: 900px) { .aos-s-edfeat__grid { grid-template-columns: 1fr; } .aos-s-edfeat__fig:nth-child(2) { margin-left: 0; } }

/* ── CONTENT TABS — mono tab rail above one media-and-copy panel ── */
.aos-s-tabs { border-top: 1px solid hsl(var(--border)); background: hsl(var(--bg-alt)); padding-block: var(--sp-band); }
.aos-s-tabs .aos-s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.aos-s-tabs__rail { display: flex; gap: 0.5rem; margin-bottom: clamp(1.75rem, 4vh, 2.5rem); border-bottom: 1px solid hsl(var(--border-strong)); }
.aos-s-tabs__rail button {
	position: relative;
	padding: 0.85rem 1.1rem;
	border: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--fg-subtle));
	cursor: pointer;
	transition: color 0.25s var(--ease-out);
}
.aos-s-tabs__rail button::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: -1px; height: 2px; background: hsl(var(--aos-yellow)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.aos-s-tabs__rail button[aria-selected="true"] { color: hsl(var(--fg)); }
.aos-s-tabs__rail button[aria-selected="true"]::after { transform: scaleX(1); }
.aos-s-tabs__rail button:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-tabs__panel[hidden] { display: none; }
.aos-s-tabs__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; animation: aosTabIn 0.45s var(--ease-out); }
@keyframes aosTabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aos-s-tabs__media { position: relative; border-radius: 20px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border: 0.5px solid hsl(var(--fg) / 0.14); transform: translateZ(0); }
.aos-s-tabs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.aos-s-tabs__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, hsl(var(--aos-blue) / 0.3), hsl(var(--aos-navy-deep) / 0.4)); mix-blend-mode: multiply; }
.aos-s-tabs__copy h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -0.022em; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-tabs__copy h3 em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-s-tabs__copy p { margin: 1rem 0 0; max-width: 44ch; font-size: 0.98rem; line-height: 1.65; color: hsl(var(--fg-muted)); }
.aos-s-tabs__copy .aos-ghost { margin-top: 1.5rem; }
@media (max-width: 900px) { .aos-s-tabs__split { grid-template-columns: 1fr; } .aos-s-tabs .aos-s-head { flex-direction: column; align-items: flex-start; } .aos-s-tabs__rail { overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .aos-s-tabs__split { animation: none; } }

/* ── Native contact form ([aos_contact_form] inside the aos/form frame) ──── */
.aos-contact-form { display: grid; gap: 1.1rem; }
.aos-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.aos-contact-form label { display: grid; gap: 0.4rem; }
.aos-contact-form__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--fg-muted)); }
.aos-contact-form select.aos-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, hsl(var(--fg-subtle)) 50%), linear-gradient(135deg, hsl(var(--fg-subtle)) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.aos-contact-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.aos-contact-form button[type="submit"] { justify-self: start; }
.aos-contact-form__status { min-height: 1.4em; font-size: 0.92rem; color: hsl(var(--aos-blue)); margin: 0; }
@media (max-width: 640px) { .aos-contact-form__row { grid-template-columns: 1fr; } }

/* A2P consent rows on the contact form */
.aos-contact-form__consent { display: grid !important; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; font-size: 0.8rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-contact-form__consent input[type="checkbox"] { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: hsl(var(--aos-yellow)); }
.aos-contact-form__consent a { color: hsl(var(--aos-blue)); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   HERO — FULL BLEED (aos/hero-bleed) — graduated from the Hero Lab.
   Full-viewport cinematic with its own overlay nav. Pages using the block
   get body.aos-bleed-page (functions.php has_block filter), which hides
   the standard banner/header: this hero owns the viewport from pixel 0.
   Foot spacing clears the fixed translate pill + chatbot launcher. */
body.aos-bleed-page .wp-site-blocks > aside.wp-block-template-part,
body.aos-bleed-page .wp-site-blocks > header.wp-block-template-part { display: none !important; }
body.aos-bleed-page .wp-site-blocks > main { margin-top: 0 !important; padding-top: 0 !important; }
.aos-hero-bleed{position:relative;width:100vw;max-width:100vw !important;margin:0 0 0 calc(50% - 50vw) !important;height:100svh;min-height:640px;overflow:hidden;color:#fff;font-family:var(--display)}
.aos-hero-bleed__media{position:absolute;inset:0}
.aos-hero-bleed__media video,.aos-hero-bleed__media img{width:100%;height:100%;object-fit:cover}
.aos-hero-bleed__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(var(--aos-navy-deep)/.55) 0%,hsl(var(--aos-navy-deep)/.18) 38%,hsl(var(--aos-navy-deep)/.62) 100%)}
.aos-hero-bleed__nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.35rem clamp(1.25rem,4vw,4rem)}
.aos-hero-bleed__logo{color:#fff !important;text-decoration:none;font-size:1.05rem;font-weight:500;letter-spacing:.01em}
.aos-hero-bleed__logo b{font-weight:750}
.aos-hero-bleed__logo i{font-style:normal;color:hsl(var(--aos-yellow))}
.aos-hero-bleed__links{display:flex;gap:clamp(1.2rem,2.5vw,2.4rem);list-style:none;margin:0;padding:0}
.aos-hero-bleed__links a{color:#fffd;text-decoration:none;font-size:.84rem;font-weight:550;letter-spacing:.01em;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.aos-hero-bleed__links a:hover{color:#fff;border-color:hsl(var(--aos-yellow))}
.aos-hero-bleed__cta{color:#fff !important;text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.02em;padding:.55rem 1.1rem;border:1px solid #fff4;border-radius:999px;transition:border-color .2s ease,background .2s ease}
.aos-hero-bleed__cta:hover{border-color:hsl(var(--aos-yellow));background:#fff1}
.aos-hero-bleed__inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(6rem,11vh,7.5rem) clamp(1.25rem,4vw,4rem) clamp(3.25rem,6vh,4rem)}
.aos-hero-bleed__since{color:#fff9 !important;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem}
.aos-hero-bleed__mark{margin:0;color:rgb(255 255 255/.87) !important;font-size:clamp(3.4rem,12.5vw,11.5rem);line-height:.92;font-weight:640;letter-spacing:-.035em}
.aos-hero-bleed__mark sup{font-size:.13em;font-weight:700;letter-spacing:0;line-height:1;vertical-align:baseline;position:relative;top:-4.6em;margin-left:.35em;color:hsl(var(--aos-yellow))}
.aos-hero-bleed__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.aos-hero-bleed__index{list-style:none;margin:.65rem 0 0;padding:0;min-width:15rem}
.aos-hero-bleed__index li{border-top:1px solid #fff2}
.aos-hero-bleed__index li:last-child{border-bottom:1px solid #fff2}
.aos-hero-bleed__index a{display:flex;align-items:baseline;gap:.6rem;padding:.55rem .1rem;color:#fff;text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.005em;transition:padding-left .25s ease,color .25s ease}
.aos-hero-bleed__index a:hover{padding-left:.55rem;color:hsl(var(--aos-yellow))}
.aos-hero-bleed__index i{font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.08em;color:#fff8}
.aos-hero-bleed__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.aos-hero-bleed__state{max-width:34rem}
.aos-hero-bleed__state p{margin:0;color:#fff !important;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.22;font-weight:600;letter-spacing:-.015em}
.aos-hero-bleed__state em{font-style:italic;font-family:var(--editorial);font-weight:500;color:hsl(var(--aos-yellow))}
.aos-hero-bleed__state .aos-hero-bleed__cue{margin:1.1rem 0 0;font-size:.6rem !important;font-weight:500;font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#fffa}
.aos-hero-bleed__cue svg{vertical-align:-2px;margin-left:.4rem;animation:aosBleedBob 2.2s ease-in-out infinite}
@keyframes aosBleedBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.aos-hero-bleed__chip{display:flex;align-items:center;gap:.9rem;margin-right:clamp(0rem,5vw,5.25rem);padding:.7rem .8rem .7rem .7rem;border:1px solid #fff3;border-radius:16px;background:hsl(var(--aos-navy-deep)/.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-decoration:none;color:#fff;transition:transform .25s ease,border-color .25s ease}
.aos-hero-bleed__chip:hover{transform:translateY(-3px);border-color:hsl(var(--aos-yellow)/.6)}
.aos-hero-bleed__chip img{width:46px;height:46px;border-radius:12px;object-fit:cover;filter:grayscale(1)}
.aos-hero-bleed__chip small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;color:#fff8;margin-bottom:.2rem}
.aos-hero-bleed__chip b{display:block;font-size:.9rem;font-weight:650;line-height:1.15}
.aos-hero-bleed__chip span.aos-hero-bleed__role{display:block;font-size:.68rem;color:#fff9;margin-top:.15rem}
.aos-hero-bleed__chip .aos-hero-bleed__go{margin-left:.6rem;width:34px;height:34px;border-radius:50%;background:hsl(var(--aos-yellow));color:hsl(var(--aos-navy-deep));display:grid;place-items:center;flex:none}
@keyframes aosBleedIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.aos-hero-bleed__nav,.aos-hero-bleed__since,.aos-hero-bleed__mark,.aos-hero-bleed__index,.aos-hero-bleed__state,.aos-hero-bleed__chip{opacity:0;animation:aosBleedIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.aos-hero-bleed__nav{animation-delay:.45s}
.aos-hero-bleed__since{animation-delay:.65s}
.aos-hero-bleed__mark{animation-delay:.8s}
.aos-hero-bleed__index{animation-delay:1.05s}
.aos-hero-bleed__state{animation-delay:1.25s}
.aos-hero-bleed__chip{animation-delay:1.45s}
/* Editor canvas + reduced motion: everything visible immediately. */
.editor-styles-wrapper .aos-hero-bleed__nav,.editor-styles-wrapper .aos-hero-bleed__since,.editor-styles-wrapper .aos-hero-bleed__mark,.editor-styles-wrapper .aos-hero-bleed__index,.editor-styles-wrapper .aos-hero-bleed__state,.editor-styles-wrapper .aos-hero-bleed__chip{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.aos-hero-bleed__nav,.aos-hero-bleed__since,.aos-hero-bleed__mark,.aos-hero-bleed__index,.aos-hero-bleed__state,.aos-hero-bleed__chip{opacity:1;animation:none}}
@media (max-width:900px){
.aos-hero-bleed__top{flex-direction:column;gap:1.5rem}
.aos-hero-bleed__index{min-width:0;width:100%;max-width:22rem}
.aos-hero-bleed__foot{flex-direction:column;align-items:flex-start;gap:1.4rem}
.aos-hero-bleed__chip{align-self:stretch;margin-right:0}
}
@media (max-width:760px){.aos-hero-bleed__links{display:none}}
@media (prefers-reduced-motion:reduce){.aos-hero-bleed__cue svg{animation:none}}

/* ── INSIDE STATEMENT — Journey-style band, graduated from sections-continued
   (SC-01 dark / SC-02 light). One family; `--light` swaps navy-deep + grain +
   teal accents for the thesis treatment. Entrance rides the shared .aos-reveal
   gate, so no-JS / reduced-motion / editor canvas are fully visible. ── */
.aos-s-inside{position:relative;isolation:isolate;overflow:hidden;background:hsl(var(--aos-navy-deep));padding-block:clamp(6.5rem,17vh,11rem)}
.aos-s-inside::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.aos-s-inside__glow{position:absolute;inset:-22%;z-index:-1;pointer-events:none;background:radial-gradient(36% 42% at 24% 26%,hsl(var(--aos-yellow)/0.14),transparent 60%),radial-gradient(32% 40% at 80% 84%,hsl(var(--aos-blue)/0.13),transparent 58%);animation:aosInsideDrift 24s ease-in-out infinite alternate}
@keyframes aosInsideDrift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(1.5%,1.5%,0)}}
.aos-s-inside__cols{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(hsl(var(--bg)/0.05),hsl(var(--bg)/0.05)) 25% 0/1px 100% no-repeat,linear-gradient(hsl(var(--bg)/0.05),hsl(var(--bg)/0.05)) 50% 0/1px 100% no-repeat,linear-gradient(hsl(var(--bg)/0.05),hsl(var(--bg)/0.05)) 75% 0/1px 100% no-repeat}
.aos-s-inside__seam{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--aos-yellow)/0.55),transparent);transform-origin:left}
.aos-s-inside__title{margin:1.6rem 0 0;max-width:24ch;font-family:var(--display);font-size:clamp(2.3rem,4.9vw,4.4rem);line-height:1.06;letter-spacing:-0.03em;font-weight:500;color:hsl(var(--bg))}
.aos-s-inside__l{display:block}
.aos-s-inside__title em{font-family:var(--editorial);font-style:italic;font-weight:500;color:hsl(var(--aos-yellow))}
.aos-s-inside__body{margin:clamp(2.6rem,7vh,4.5rem) 0 0 auto;max-width:36rem;text-align:right;font-size:clamp(0.98rem,1.15vw,1.08rem);line-height:1.7;color:hsl(var(--bg)/0.72)}
@media (max-width:700px){.aos-s-inside__body{margin-left:0;text-align:left}}
/* Light scheme: the thesis treatment */
.aos-s-inside--light{background:hsl(var(--bg))}
.aos-s-inside--light::before{background:none}
.aos-s-inside--light .aos-s-inside__glow{background:radial-gradient(36% 42% at 24% 26%,hsl(var(--aos-yellow-soft)/0.55),transparent 62%),radial-gradient(32% 40% at 80% 84%,hsl(var(--aos-blue)/0.07),transparent 58%)}
.aos-s-inside--light .aos-s-inside__cols{background:linear-gradient(hsl(var(--fg)/0.05),hsl(var(--fg)/0.05)) 25% 0/1px 100% no-repeat,linear-gradient(hsl(var(--fg)/0.05),hsl(var(--fg)/0.05)) 50% 0/1px 100% no-repeat,linear-gradient(hsl(var(--fg)/0.05),hsl(var(--fg)/0.05)) 75% 0/1px 100% no-repeat}
.aos-s-inside--light .aos-s-inside__seam{background:linear-gradient(90deg,transparent,hsl(var(--aos-yellow-deep)/0.45),transparent)}
.aos-s-inside--light .aos-s-inside__title{color:hsl(var(--fg))}
.aos-s-inside--light .aos-s-inside__title em{color:hsl(var(--aos-yellow-deep))}
.aos-s-inside--light .aos-s-inside__body{color:hsl(var(--fg-muted))}
/* Entrance choreography — only when the JS gate arms it */
.aos-s-inside.aos-reveal :is(.aos-s-eyebrow,.aos-s-inside__l,.aos-s-inside__body){opacity:0}
.aos-s-inside.aos-reveal.is-in .aos-s-eyebrow{animation:aosSRise .6s var(--ease-out) .08s forwards}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__l:nth-child(1){animation:aosSRise .65s var(--ease-out) .2s forwards}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__l:nth-child(2){animation:aosSRise .65s var(--ease-out) .32s forwards}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__l:nth-child(3){animation:aosSRise .65s var(--ease-out) .44s forwards}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__l:nth-child(n+4){animation:aosSRise .65s var(--ease-out) .52s forwards}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__body{animation:aosSRise .7s var(--ease-out) .62s forwards}
.aos-s-inside.aos-reveal .aos-s-inside__seam{transform:scaleX(0)}
.aos-s-inside.aos-reveal.is-in .aos-s-inside__seam{transform:scaleX(1);transition:transform 1.3s var(--ease-out) .12s}
@media (prefers-reduced-motion:reduce){.aos-s-inside__glow{animation:none}.aos-s-inside.aos-reveal :is(.aos-s-eyebrow,.aos-s-inside__l,.aos-s-inside__body){opacity:1 !important;animation:none !important}.aos-s-inside.aos-reveal .aos-s-inside__seam{transform:none !important}}

/* ── EMPTY MEDIA STATE — blocks whose media attr is unset render this
   instead of a broken <img src="">. Quiet, obviously-a-placeholder. ── */
.aos-media-empty {
	width: 100%;
	height: 100%;
	min-height: 220px;
	background:
		linear-gradient(135deg, hsl(var(--bg-alt)) 0%, hsl(var(--border-soft)) 100%);
	border-radius: inherit;
}

/* ── Reduced-motion backstop ──────────────────────────────────────────
   Family sheets (home/bsn/admissions) declare `html { scroll-behavior:
   smooth }` and load AFTER this file, so this override needs !important.
   Targeted per-component reduce rules above handle everything else. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
}

/* ── Hero (full bleed), headline form (2026-10-16). With the wordmark left
   empty, render.php prints the statement as the page's h1: display scale,
   the action stacked under it instead of floating at the far edge. ── */
.aos-hero-bleed__state .aos-hero-bleed__headline {
	margin: 0;
	max-width: 11.5em;
	font-family: var(--display);
	font-size: clamp(2.75rem, 1.1rem + 6vw, 7.25rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}
.aos-hero-bleed__headline em { font-family: var(--editorial); font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow)); }
.aos-hero-bleed__state:has(.aos-hero-bleed__headline) { max-width: none; }
.aos-hero-bleed__foot:has(.aos-hero-bleed__headline) { flex-direction: column; align-items: flex-start; gap: clamp(1.75rem, 4.5vh, 2.75rem); }
.aos-hero-bleed__foot:has(.aos-hero-bleed__headline) .aos-hero-bleed__chip { margin-right: 0; }

/* ── Voices, client buttons (2026-10-16). When every slide names its client,
   the rail lists them in place of the counter. The active client's line sits
   on the rail's hairline; while auto-advance runs (.is-auto) it fills over the
   7s interval and pauses with the timer on hover or focus. ── */
.aos-s-voices__rail:has(.aos-s-voices__tabs) { align-items: flex-start; }
.aos-s-voices__tabs { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1.25rem, 3vw, 2.75rem); }
.aos-s-voices__tab {
	position: relative;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	font-family: var(--display);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: hsl(var(--fg-subtle));
	cursor: pointer;
	transition: color 0.25s ease;
}
.aos-s-voices__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1.4rem - 1px);
	height: 2px;
	background: hsl(var(--aos-yellow));
	transform: scaleX(0);
	transform-origin: left center;
}
.aos-s-voices__tab:hover,
.aos-s-voices__tab.is-active { color: hsl(var(--fg)); }
.aos-s-voices__tab.is-active::after { transform: scaleX(1); }
.aos-s-voices__tab:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 4px; border-radius: 4px; }
.is-auto .aos-s-voices__tab.is-active::after { animation: aosVoicesFill 7s linear both; }
[data-aos-voices]:is(:hover, :focus-within, .is-paused) .aos-s-voices__tab.is-active::after { animation-play-state: paused; }
@keyframes aosVoicesFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .is-auto .aos-s-voices__tab.is-active::after { animation: none; } }
/* Narrow: the names wrap, so each carries its own underline and the arrows
   (redundant beside the names) step aside. */
@media (max-width: 640px) {
	.aos-s-voices__rail:has(.aos-s-voices__tabs) .aos-s-voices__nav { display: none; }
	.aos-s-voices__tabs { flex-direction: column; gap: 0; width: 100%; }
	.aos-s-voices__tab { padding: 0.8rem 0; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
	.aos-s-voices__tab::after { top: auto; bottom: -1px; }
}

/* ── Case in point (aos/caseinpoint, 2026-10-16). One real engagement at feature
   scale: the product running in the titanium phone frame on a light stage,
   beside the client, the story, measured results, the client's own words and
   links to the live work. ── */
.aos-s-caseinpoint { border-top: 1px solid hsl(var(--border)); padding-block: var(--sp-band); }
.aos-s-caseinpoint__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.aos-s-caseinpoint__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	/* Light stage: the dark phone keeps a crisp silhouette against it, and the
	   page stays on light ground (BRAND-ETHOS: dark is for emphasis, sparingly). */
	border: 0.5px solid hsl(var(--fg) / 0.08);
	background:
		radial-gradient(90% 60% at 50% 0%, hsl(var(--aos-yellow) / 0.16), transparent 70%),
		hsl(var(--bg-alt));
}
.aos-s-caseinpoint__phone { width: min(100%, 300px); }
.aos-s-caseinpoint__phone video,
.aos-s-caseinpoint__phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 38px; background: hsl(var(--aos-navy-deep)); }
.aos-s-caseinpoint__client { margin: 1rem 0 0; font-family: var(--display); font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: hsl(var(--fg-muted)); }
.aos-s-caseinpoint__stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: clamp(2rem, 4vh, 2.75rem) 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid hsl(var(--border-strong));
}
.aos-s-caseinpoint__stats div { margin: 0; }
.aos-s-caseinpoint__stats dt { font-family: var(--display); font-size: clamp(2rem, 1rem + 2.2vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: hsl(var(--fg)); }
.aos-s-caseinpoint__stats dd { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.45; color: hsl(var(--fg-muted)); }
.aos-s-caseinpoint__note { margin: 0.9rem 0 0; font-size: 0.75rem; line-height: 1.5; color: hsl(var(--fg-subtle)); }
.aos-s-caseinpoint__quote { margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; padding-left: 1.25rem; border-left: 2px solid hsl(var(--aos-yellow)); }
.aos-s-caseinpoint__quote blockquote { margin: 0; font-family: var(--editorial); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem); line-height: 1.3; color: hsl(var(--fg)); }
.aos-s-caseinpoint__quote figcaption { margin-top: 0.7rem; font-size: 0.875rem; color: hsl(var(--fg-subtle)); }
.aos-s-caseinpoint__quote figcaption b { font-weight: 600; color: hsl(var(--fg)); }
.aos-s-caseinpoint__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: clamp(1.75rem, 4vh, 2.25rem) 0 0; padding: 0; list-style: none; }
.aos-s-caseinpoint__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border: 1px solid hsl(var(--fg) / 0.2);
	border-radius: 999px;
	font-family: var(--display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	color: hsl(var(--fg));
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.aos-s-caseinpoint__links a[target="_blank"]::after { content: "\2197"; font-weight: 500; }
.aos-s-caseinpoint__links a:hover { border-color: hsl(var(--aos-yellow)); background: hsl(var(--aos-yellow) / 0.06); }
.aos-s-caseinpoint__links a:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; }
/* An on-site link (the full case study) leads the row, filled. */
.aos-s-caseinpoint__links a:not([target="_blank"]) { border-color: hsl(var(--fg)); background: hsl(var(--fg)); color: hsl(var(--bg)); }
.aos-s-caseinpoint__links a:not([target="_blank"])::after { content: "\2192"; font-weight: 500; }
.aos-s-caseinpoint__links a:not([target="_blank"]):hover { border-color: hsl(var(--fg) / 0.84); background: hsl(var(--fg) / 0.84); }
.aos-s-caseinpoint .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
	.aos-s-caseinpoint__grid { grid-template-columns: 1fr; }
	.aos-s-caseinpoint__phone { width: min(100%, 260px); }
}
@media (max-width: 560px) {
	.aos-s-caseinpoint__stats { grid-auto-flow: row; grid-template-columns: 1fr; gap: 1rem; }
	.aos-s-caseinpoint__stats div { display: grid; grid-template-columns: 7.5rem 1fr; align-items: baseline; gap: 1rem; }
	.aos-s-caseinpoint__stats dd { margin: 0; }
}

/* ── Premium pages, scale (2026-10-16). The homepage's larger-firm scale on
   every main.aos-sp page, so the inner pages read as the same firm: section
   rhythm and titles, the steps, the standard, the voices and the closing ask;
   plus the blocks only the inner pages carry (the centred hero, values lists,
   team cards, the FAQ). ── */
main.aos-sp {
	--sp-band: clamp(5.5rem, 13vh, 9.5rem);
	--sp-head: clamp(3rem, 7vh, 4.75rem);
}
main.aos-sp .aos-s-title { font-size: clamp(2.25rem, 1rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -0.032em; }
main.aos-sp .aos-s-lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
/* Sections butt together: the constrained-layout block gap left 32px
   page-coloured strips around full-bleed and dark sections. */
main.aos-sp > section { margin-block: 0; }
main.aos-sp .aos-s-inside + section { border-top: 0; }

/* The centred page hero: a lede you can read from arm's length, a faint teal
   light at the top so the opening reads as designed rather than empty. */
main.aos-sp .aos-hero-center {
	padding-block: clamp(6rem, 16vh, 10rem) clamp(5rem, 13vh, 8.5rem);
	background: radial-gradient(70% 90% at 50% 0%, hsl(var(--aos-yellow) / 0.07), transparent 70%), hsl(var(--bg));
}
main.aos-sp .aos-hero-center__lede { max-width: 46ch; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); }

/* Values lists: each line at display scale with its support beside it; no
   01/02/03 watermarks (BRAND-ETHOS: no numbered feature grids). */
main.aos-sp .aos-s-values__item { display: block; padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
main.aos-sp .aos-s-values__item::before { content: none; }
main.aos-sp .aos-s-values__item > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	align-items: baseline;
	gap: 0.75rem clamp(2rem, 5vw, 5rem);
}
main.aos-sp .aos-s-values__item h3 { font-size: clamp(1.75rem, 1rem + 2vw, 2.875rem); line-height: 1.08; letter-spacing: -0.035em; }
main.aos-sp .aos-s-values__item p { margin: 0; max-width: 24rem; font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.55; }
@media (max-width: 900px) {
	main.aos-sp .aos-s-values__item > div { grid-template-columns: 1fr; }
}

/* Steps. */
main.aos-sp .aos-s-process__rail { gap: clamp(1.75rem, 3.5vw, 3.5rem); }
main.aos-sp .aos-s-process__step { padding-top: 2.5rem; }
main.aos-sp .aos-s-process__step h3 { margin-top: 0.85rem; font-size: clamp(1.625rem, 1.1rem + 1.1vw, 2.25rem); font-weight: 500; letter-spacing: -0.028em; }
main.aos-sp .aos-s-process__step p { margin-top: 0.75rem; max-width: 26ch; font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 900px) {
	main.aos-sp .aos-s-process__step { padding-top: 0; }
	main.aos-sp .aos-s-process__step h3 { margin-top: 0.5rem; }
	main.aos-sp .aos-s-process__step p { max-width: 40ch; }
}

/* The standard: the dark moment gets room. */
main.aos-sp .aos-s-inside { padding-block: clamp(6.5rem, 17vh, 11rem); }
main.aos-sp .aos-s-inside__body { max-width: 30ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }

/* Voices at reading-room scale. */
main.aos-sp .aos-s-voices__slide blockquote { max-width: 25em; font-size: clamp(1.75rem, 1rem + 2.2vw, 2.875rem); line-height: 1.34; }
main.aos-sp .aos-s-voices__slide figcaption { gap: 1.1rem; margin-top: clamp(2rem, 5vh, 3rem); }
main.aos-sp .aos-s-voices__monogram { width: 56px; height: 56px; font-size: 0.85rem; }
main.aos-sp .aos-s-voices__who strong { font-size: 1.0625rem; }
main.aos-sp .aos-s-voices__who span { font-size: 0.9375rem; }
main.aos-sp .aos-s-voices__rail { margin-top: clamp(3rem, 7vh, 4.5rem); }
main.aos-sp .aos-s-voices__tab { font-size: 1.0625rem; }

/* Team cards. */
main.aos-sp .aos-s-team__card h3 { font-size: clamp(1.375rem, 1rem + 0.7vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; }
main.aos-sp .aos-s-team__card p { font-size: 1.0625rem; line-height: 1.6; }

/* FAQ. */
main.aos-sp .aos-s-faq__q { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }

/* The ask: closing at headline scale, on the quiet tint. */
main.aos-sp .aos-s-avatarcta { padding-block: clamp(6.5rem, 17vh, 11rem); background: hsl(var(--bg-alt)); }
main.aos-sp .aos-s-avatarcta__stack span { width: 64px; height: 64px; border-width: 3px; }
main.aos-sp .aos-s-avatarcta__stack span + span { margin-left: -16px; }
main.aos-sp .aos-s-avatarcta .aos-btn { gap: 1.1rem; padding: 0.5rem 0.55rem 0.5rem 1.75rem; font-size: 1.0625rem; }
main.aos-sp .aos-s-avatarcta .aos-btn .aos-btn__chip { width: 44px; height: 44px; }
main.aos-sp .aos-s-avatarcta h2 { max-width: 15em; font-size: clamp(2.25rem, 1rem + 3.4vw, 4.25rem); line-height: 1.06; letter-spacing: -0.035em; }
main.aos-sp .aos-s-avatarcta__note { font-size: 0.7rem; }

/* ── The standard (aos/yesgate, 2026-10-16). The offer as a standard:
   pinned and dark, the questions light in turn from --p (the theme's generic
   pin driver), each check filling as its question lands, then the closing
   line. Resting state (no JS, reduced motion, narrow screens): everything
   shown, unpinned. ── */
.aos-s-yesgate { --p: 1; position: relative; height: 240vh; background: hsl(var(--aos-navy-deep)); color: hsl(var(--bg)); }
main.aos-sp > .aos-s-yesgate { padding-block: 0; }
.aos-s-yesgate__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.aos-s-yesgate__pin::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 60% at 85% 12%, hsl(var(--aos-yellow) / 0.14), transparent 62%),
		radial-gradient(40% 50% at 8% 92%, hsl(var(--aos-yellow) / 0.06), transparent 70%);
}
.aos-s-yesgate__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; width: 100%; }
.aos-s-yesgate .aos-s-title { color: hsl(var(--bg)); font-size: clamp(2.4rem, 1rem + 3.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.aos-s-yesgate .aos-s-title em { color: hsl(var(--aos-yellow)); }
.aos-s-yesgate__closing { margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; font-family: var(--editorial); font-style: italic; font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); line-height: 1.25; color: hsl(var(--aos-yellow)); opacity: clamp(0.15, (var(--p) - 0.78) * 6, 1); }
.aos-s-yesgate__foot { margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.5rem; border-top: 1px solid hsl(var(--bg) / 0.12); }
.aos-s-yesgate__note { margin: 0 0 0.9rem; font-size: 0.95rem; color: hsl(var(--bg) / 0.66); }
.aos-s-yesgate__steps { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 0; padding: 0; list-style: none; }
.aos-s-yesgate__steps li { font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--bg) / 0.85); }
.aos-s-yesgate__steps li + li::before { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 0.9rem; vertical-align: middle; background: hsl(var(--aos-yellow) / 0.55); }
.aos-s-yesgate__link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.25rem; padding-bottom: 2px; border-bottom: 1px solid hsl(var(--aos-yellow) / 0.6); font-size: 0.95rem; font-weight: 600; color: hsl(var(--bg)); text-decoration: none; }
.aos-s-yesgate__link::after { content: "\2192"; }
.aos-s-yesgate__link:hover { color: hsl(var(--aos-yellow)); }
.aos-s-yesgate__link:focus-visible { outline: 2px solid hsl(var(--aos-yellow)); outline-offset: 4px; }
.aos-s-yesgate__list { display: grid; gap: clamp(1rem, 2.4vh, 1.5rem); margin: 0; padding: 0; list-style: none; }
.aos-s-yesgate__list li {
	--on: clamp(0, (var(--p) - 0.06 - var(--i) * 0.24) * 6, 1);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	padding: clamp(1.25rem, 2.6vh, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
	border: 1px solid hsl(var(--bg) / calc(0.08 + var(--on) * 0.1));
	border-radius: 18px;
	background: hsl(var(--bg) / calc(0.02 + var(--on) * 0.04));
	opacity: calc(0.3 + var(--on) * 0.7);
	translate: 0 calc((1 - var(--on)) * 10px);
}
.aos-s-yesgate__check { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid hsl(var(--aos-yellow) / calc(0.35 + var(--on) * 0.65)); border-radius: 999px; background: hsl(var(--aos-yellow) / var(--on)); color: hsl(var(--aos-navy-deep) / var(--on)); }
.aos-s-yesgate__check svg { transform: scale(calc(0.6 + var(--on) * 0.4)); }
.aos-s-yesgate__list h3 { margin: 0.25rem 0 0; font-family: var(--display); font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: hsl(var(--bg)); }
.aos-s-yesgate__list p { max-width: 40ch; margin: 0.55rem 0 0; font-size: 1rem; line-height: 1.55; color: hsl(var(--bg) / 0.7); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.aos-s-yesgate { --p: 1 !important; height: auto; }
	.aos-s-yesgate__pin { position: static; height: auto; overflow: visible; padding-block: clamp(5rem, 12vh, 7rem); }
	.aos-s-yesgate .aos-s-pinman__progress { display: none; }
}
/* Narrow: one column in reading order (title, questions, then the closing
   line and the steps), so the promise lands after the questions. */
@media (max-width: 900px) {
	.aos-s-yesgate__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.aos-s-yesgate__head { display: contents; }
	.aos-s-yesgate__head > .aos-s-eyebrow { order: 1; }
	.aos-s-yesgate__head > .aos-s-title { order: 2; margin-bottom: 2.25rem; }
	.aos-s-yesgate__list { order: 3; }
	.aos-s-yesgate__closing { order: 4; }
	.aos-s-yesgate__foot { order: 5; }
	.aos-s-yesgate__steps li { font-size: 0.7rem; letter-spacing: 0.1em; }
	.aos-s-yesgate__steps li + li::before { width: 12px; margin: 0 0.55rem; }
}

/* ── Film close (aos/filmcta, 2026-10-16). The closing ask over a full-bleed
   film, dimmed, so a page that opens on a film ends on one. One sans line
   (its <em> is the quieter second sentence, never serif), the glass two-line
   button from the home hero, a short note. ── */
.aos-s-filmcta { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 86svh, 860px); overflow: hidden; isolation: isolate; background: hsl(var(--aos-navy-deep)); color: #fff; }
main.aos-sp > .aos-s-filmcta { padding-block: 0; border-top: 0; }
.aos-s-filmcta__media { position: absolute; inset: 0; z-index: -1; }
.aos-s-filmcta__media video, .aos-s-filmcta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aos-s-filmcta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.84) 0%, hsl(var(--aos-navy-deep) / 0.6) 38%, hsl(var(--aos-navy-deep) / 0.72) 70%, hsl(var(--aos-navy-deep) / 0.95) 100%),
		radial-gradient(90% 70% at 0% 100%, hsl(var(--aos-navy-deep) / 0.6), transparent 65%);
}
.aos-s-filmcta__media video, .aos-s-filmcta__media img { filter: brightness(0.82) saturate(0.9); } /* Eric: "darker" */
.aos-s-filmcta__inner { width: 100%; padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 11vh, 7rem); }
.aos-s-filmcta__title { max-width: 20em; margin: 0; font-family: var(--display); font-size: clamp(2.25rem, 1rem + 3.5vw, 4.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px hsl(var(--aos-navy-deep) / 0.35); }
.aos-s-filmcta__title em { display: block; font-family: inherit; font-style: normal; font-weight: inherit; color: hsl(0 0% 100% / 0.62); } /* its own line: one sentence per line */
.aos-s-filmcta__btn {
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
	margin-top: clamp(2rem, 5vh, 3rem);
	padding: 0.4rem 0.45rem 0.4rem 1.6rem;
	border: 1px solid hsl(0 0% 100% / 0.3);
	border-radius: 999px;
	background: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.aos-s-filmcta__btn:hover { background: hsl(0 0% 100% / 0.17); border-color: hsl(0 0% 100% / 0.55); }
.aos-s-filmcta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.aos-s-filmcta__label b { display: block; font-family: var(--display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.aos-s-filmcta__label small { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 500; color: hsl(0 0% 100% / 0.72); }
.aos-s-filmcta__go { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: hsl(var(--aos-yellow) / 0.78); color: hsl(var(--aos-navy-deep)); transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.aos-s-filmcta__btn:hover .aos-s-filmcta__go { transform: translateX(3px); background: hsl(var(--aos-yellow)); }
.aos-s-filmcta__note { margin: 1.25rem 0 0; font-family: var(--display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(0 0% 100% / 0.6); }
@media (max-width: 560px) {
	.aos-s-filmcta { min-height: 100svh; } /* phones: a full frame, like the hero (Eric 2026-10-16) */
	.aos-s-filmcta__btn { display: flex; width: 100%; }
	.aos-s-filmcta__go { margin-left: auto; }
}

/* ── Hero nav on phones (2026-10-16): a menu button opens the site header's
   drawer (links, the consultation button, email); the consultation pill moves
   into it. The button stays hidden, and the pill stays, wherever the page has
   no drawer. ── */
.aos-hero-bleed__burger { display: none; }
@media (max-width: 760px) {
	.aos-hero-bleed__burger:not([hidden]) { display: grid; place-content: center; gap: 6px; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid hsl(0 0% 100% / 0.3); border-radius: 50%; background: hsl(0 0% 100% / 0.1); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); color: #fff; cursor: pointer; }
	.aos-hero-bleed__burger span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; }
	.aos-hero-bleed__burger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
	.aos-hero-bleed__nav:has(.aos-hero-bleed__burger:not([hidden])) .aos-hero-bleed__cta { display: none; }
}
/* The chat bubble sits above everything; with the menu open it covered the drawer's email line. */
body.aos-nav-open .aos-chat-launcher { opacity: 0; pointer-events: none; }

/* ── Letter (aos/letter, 2026-10-16). A plain note on a paper sheet: warm,
   personal, easy to read. Brand sans only; generous measure and leading. ── */
.aos-s-letter { padding-block: var(--sp-band); background: hsl(var(--bg-alt)); }
.aos-s-letter__sheet { max-width: 44rem; margin-inline: auto; padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.75rem); border: 1px solid hsl(var(--fg) / 0.06); border-radius: 24px; background: hsl(var(--paper)); box-shadow: 0 40px 80px -56px hsl(var(--fg) / 0.35); }
.aos-s-letter__eyebrow { margin: 0; font-family: var(--display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-letter__heading { margin: 1rem 0 0; font-family: var(--display); font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.85rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.028em; color: hsl(var(--fg)); text-wrap: balance; }
.aos-s-letter__heading em { font-family: inherit; font-style: normal; color: inherit; }
.aos-s-letter__body { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.aos-s-letter__body p { margin: 0 0 1.1em; font-size: clamp(1.06rem, 1rem + 0.25vw, 1.2rem); line-height: 1.7; color: hsl(var(--fg-muted)); text-wrap: pretty; }
.aos-s-letter__body p:last-child { margin-bottom: 0; }
.aos-s-letter__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4.5vh, 2.75rem); padding-top: 1.5rem; border-top: 1px solid hsl(var(--fg) / 0.08); }
.aos-s-letter__sign { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--fg)); }
.aos-s-letter__link { display: inline-flex; align-items: center; gap: 0.45rem; padding-bottom: 2px; border-bottom: 1px solid hsl(var(--aos-yellow-deep) / 0.5); font-size: 1rem; font-weight: 600; color: hsl(var(--aos-yellow-deep)); text-decoration: none; }
.aos-s-letter__link::after { content: "\2192"; transition: transform 0.25s var(--ease-out); }
.aos-s-letter__link:hover::after { transform: translateX(3px); }
.aos-s-letter__link:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 4px; }

/* ── Case in point, photo frame (2026-10-16): for work with no screen to show,
   a photograph fills the stage in place of the phone. ── */
.aos-s-caseinpoint__stage--photo { padding: 0; border: 0; background: hsl(var(--bg-alt)); }
.aos-s-caseinpoint__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.aos-s-caseinpoint__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .aos-s-caseinpoint__photo { aspect-ratio: 4 / 3; } }

/* ── Case in point stats on phones: the value column sizes to the widest
   value, shared across rows (subgrid), so "Almost 5%" stays on one line.
   Without subgrid support it falls back to the fixed 7.5rem column. ── */
@media (max-width: 560px) {
	.aos-s-caseinpoint__stats { grid-template-columns: minmax(7.5rem, max-content) 1fr; }
	.aos-s-caseinpoint__stats div { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.aos-s-caseinpoint__stats dt { white-space: nowrap; }
}

/* ── Letter on desktop (Eric 2026-10-16: "the design on desktop is weird"): no
   floating card. An editorial spread on the page grid: eyebrow and a large
   heading on the left, the letter and its signoff on the right, heading and
   first paragraph sharing a top line. Phones keep the paper card. ── */
@media (min-width: 960px) {
	.aos-s-letter__sheet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 8vw, 8rem); align-items: start; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.aos-s-letter__eyebrow { grid-column: 1; grid-row: 1; }
	.aos-s-letter__heading { grid-column: 1; grid-row: 2; margin-top: 1.25rem; max-width: 8em; font-size: clamp(2.75rem, 1rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; }
	.aos-s-letter__body { grid-column: 2; grid-row: 2; margin-top: 1.6rem; }
	.aos-s-letter__foot { grid-column: 2; grid-row: 3; }
}

/* ── Premium canvas (moved from aos-home.css 2026-10-16 so /services/ shares
   the home's "What we do" cards). The shared canvas is a dark
   board with mono tags; the home keeps one dark moment and no monospace, so
   here it is open cards on the page ground: the photo as one tall card beside
   a 2x2 of service cards; each card's idx is its gain, set as a brand label. ── */
main.aos-sp .aos-s-canvas__board { padding: 0; border-radius: 0; background: none; overflow: visible; }
main.aos-sp .aos-s-canvas__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
main.aos-sp .aos-s-canvas__head .aos-s-title { color: hsl(var(--fg)); }
main.aos-sp .aos-s-canvas__head .aos-s-title em { color: hsl(var(--aos-yellow-deep)); }
main.aos-sp .aos-s-canvas__lede { max-width: 36ch; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); color: hsl(var(--fg) / 0.66); }
main.aos-sp .aos-s-canvas__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
main.aos-sp .aos-s-canvas__cell {
	min-height: clamp(240px, 30vh, 300px);
	padding: clamp(1.5rem, 2.2vw, 2.25rem);
	border: 1px solid hsl(var(--fg) / 0.1);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 1px 2px hsl(var(--fg) / 0.04);
	transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
main.aos-sp .aos-s-canvas__cell::before { content: none; }
main.aos-sp a.aos-s-canvas__cell:hover { border-color: hsl(var(--aos-yellow-deep) / 0.45); box-shadow: 0 18px 40px -24px hsl(var(--fg) / 0.28); transform: translateY(-2px); }
main.aos-sp .aos-s-canvas__idx { font-family: var(--display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
main.aos-sp .aos-s-canvas__idx::after { background: hsl(var(--aos-yellow-deep) / 0.4); }
main.aos-sp .aos-s-canvas__icon { width: 48px; height: 48px; border: 0; border-radius: 14px; background: hsl(var(--aos-yellow-deep) / 0.08); color: hsl(var(--aos-yellow-deep)); transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
main.aos-sp a.aos-s-canvas__cell:hover .aos-s-canvas__icon { background: hsl(var(--aos-yellow-deep)); color: #fff; }
main.aos-sp .aos-s-canvas__cell h3 { font-size: clamp(1.2rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: hsl(var(--fg)); } /* Eric: "way too big" at 2rem */
main.aos-sp .aos-s-canvas__cell p { max-width: 34ch; margin-top: 0.75rem; font-size: 1rem; line-height: 1.55; color: hsl(var(--fg) / 0.66); }
main.aos-sp .aos-s-canvas__cell > div { padding-right: 2.75rem; }
main.aos-sp .aos-s-canvas__go { opacity: 1; transform: none; border: 1px solid hsl(var(--fg) / 0.16); color: hsl(var(--fg)); }
main.aos-sp .aos-s-canvas__cell:hover .aos-s-canvas__go { background: hsl(var(--aos-yellow-deep)); border-color: hsl(var(--aos-yellow-deep)); color: #fff; }
main.aos-sp .aos-s-canvas__cell--media { grid-row: span 2; border: 0; box-shadow: none; background: hsl(var(--fg) / 0.06); }
main.aos-sp .aos-s-canvas__cell--media img { filter: none; object-position: 62% 50%; } /* keeps the hand in a tall crop */
main.aos-sp .aos-s-canvas__cell--media::after { background: none; }
main.aos-sp .aos-s-canvas__tag:empty { display: none; }
@media (max-width: 1100px) {
	main.aos-sp .aos-s-canvas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	main.aos-sp .aos-s-canvas__cell--media { grid-row: auto; grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 7; }
}
@media (max-width: 640px) {
	main.aos-sp .aos-s-canvas__grid { grid-template-columns: 1fr; }
	main.aos-sp .aos-s-canvas__cell--media { aspect-ratio: 4 / 3; }
	main.aos-sp .aos-s-canvas__cell { min-height: 0; gap: 2rem; }
}

/* ── Contact panel on premium pages: method labels in the brand sans, set like
   the eyebrows (no monospace on anything customer-facing; BRAND-ETHOS). ── */
main.aos-sp .aos-s-contactpanel__kind { font-family: var(--display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; }

/* ══ Inner-page premium heroes (2026-10-16) ════════════════════════════
   Eric: "give every single one of these pages a premium hero", "all different
   heros", "lean humanistic". Each inner page has its own hero design
   (tools/content/_heroes.php maps them); this block finishes them to the
   home's standard on premium pages (main.aos-sp). */

/* Display headlines at regular weight. The theme intends 350 to 400 (theme.json)
   and section styles had them at 500, which read bold at display sizes (Eric:
   "why is the font getting so bold on headlines"). 400 is the lightest face
   loaded. Accents (em) keep their own weight. */
main.aos-sp :is(h1, h2, .aos-s-title, .aos-hero-bleed__headline, .aos-s-letter__heading, .aos-s-inside__title, .aos-adh__headline, .aos-coh__title, .aos-cth__title, .aos-hero-split__title, .aos-hero-photo__title, .aos-hero-block__headline, .aos-abh__title) { font-weight: 400; }

/* The home hero's finish (moved from aos-home.css): scrim, headline shadow,
   the glass two-line button, phone spacing. */
/* Hero (full bleed): the promise is the headline; the scrim anchors it bottom-left.
   The third layer shades the headline itself: the skyline film's sun glint
   drifts behind "Your business" late in the loop. */
main.aos-sp .aos-hero-bleed__media::after {
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.5) 0%, hsl(var(--aos-navy-deep) / 0.06) 24%, hsl(var(--aos-navy-deep) / 0.1) 46%, hsl(var(--aos-navy-deep) / 0.78) 100%),
		radial-gradient(110% 65% at 0% 100%, hsl(var(--aos-navy-deep) / 0.5), transparent 62%),
		radial-gradient(55% 32% at 22% 58%, hsl(var(--aos-navy-deep) / 0.34), transparent 100%);
}
main.aos-sp .aos-hero-bleed__headline { text-shadow: 0 2px 28px hsl(var(--aos-navy-deep) / 0.35); }
main.aos-sp .aos-hero-bleed .aos-hero-bleed__state { max-width: none; } /* lifts the 800px cap in aos-chrome.css (loaded later, hence the extra class): two lines, not three */
main.aos-sp .aos-hero-bleed__nav   { animation-delay: 0.1s; }
main.aos-sp .aos-hero-bleed__state { animation-delay: 0.25s; }
main.aos-sp .aos-hero-bleed__chip  { animation-delay: 0.5s; }
/* The one button: a glass pill with the face of the person you will talk to. */
main.aos-sp .aos-hero-bleed__chip {
	gap: 0.9rem;
	padding: 0.4rem 0.45rem 0.4rem 0.4rem;
	border-radius: 999px;
	border-color: hsl(0 0% 100% / 0.3);
	background: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
main.aos-sp .aos-hero-bleed__chip:hover { transform: none; background: hsl(0 0% 100% / 0.17); border-color: hsl(0 0% 100% / 0.55); }
/* No photo (Eric 2026-10-16): the text needs its own inset from the pill edge. */
main.aos-sp .aos-hero-bleed__chip:not(:has(img)) { padding-left: 1.6rem; }
main.aos-sp .aos-hero-bleed__chip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
main.aos-sp .aos-hero-bleed__chip img { width: 48px; height: 48px; border-radius: 50%; }
main.aos-sp .aos-hero-bleed__chip small {
	margin-bottom: 0.15rem;
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: none;
	color: #fff;
}
main.aos-sp .aos-hero-bleed__chip b,
main.aos-sp .aos-hero-bleed__chip span.aos-hero-bleed__role {
	display: inline;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: hsl(0 0% 100% / 0.72);
}
main.aos-sp .aos-hero-bleed__chip span.aos-hero-bleed__role::before { content: ", "; }
main.aos-sp .aos-hero-bleed__chip .aos-hero-bleed__go { width: 46px; height: 46px; margin-left: 1.1rem; background: hsl(var(--aos-yellow) / 0.78); transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out); } /* slightly see-through (Eric 2026-10-16) */
main.aos-sp .aos-hero-bleed__chip:hover .aos-hero-bleed__go { transform: translateX(3px); background: hsl(var(--aos-yellow)); }
/* Content-width on tablets (the base rule stretches it below 900px); a full
   row on phones, with the arrow held to the right edge. */
main.aos-sp .aos-hero-bleed__chip { align-self: flex-start; }
@media (max-width: 560px) {
	main.aos-sp .aos-hero-bleed__chip { align-self: stretch; }
	main.aos-sp .aos-hero-bleed__chip .aos-hero-bleed__go { margin-left: auto; }
	/* Phones (Eric 2026-10-16, iPhone: "stuff needs to move down a lil bit"):
	   main.aos-sp's 88px section band sat under the hero's own 52px inset and
	   lifted the headline and button; 40px keeps the arrow clear of the chat
	   bubble in the corner. The 640px floor goes too: on short phones it made
	   the hero taller than the screen and slid the button under the bubble. */
	main.aos-sp > .aos-hero-bleed { padding-bottom: 2.5rem; min-height: 0; }
}
/* Small phones: keep the label on one line inside the pill. */
@media (max-width: 400px) {
	main.aos-sp .aos-hero-bleed__chip { gap: 0.7rem; }
	main.aos-sp .aos-hero-bleed__chip img { width: 42px; height: 42px; }
	main.aos-sp .aos-hero-bleed__chip small { font-size: 0.9375rem; white-space: nowrap; }
	main.aos-sp .aos-hero-bleed__chip .aos-hero-bleed__go { width: 42px; height: 42px; }
}
main.aos-sp .aos-hero-bleed__links a { font-size: 0.875rem; }

/* Hero (full bleed), page form for inner pages: an eyebrow over the headline,
   an intro under it, shorter than the home, and the headline's second clause
   as a quieter white instead of teal serif (teal italic reads poorly on a
   photograph; the home avoids it for the same reason). */
.aos-hero-bleed.aos-hero-bleed--page { height: clamp(600px, 86svh, 900px); min-height: 0; }
.aos-hero-bleed__state p.aos-hero-bleed__eyebrow { margin: 0 0 1.1rem; font-family: var(--display); font-size: 0.78rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(0 0% 100% / 0.82) !important; }
.aos-hero-bleed--page .aos-hero-bleed__state .aos-hero-bleed__headline { max-width: 12em; font-size: clamp(2.6rem, 1rem + 4.8vw, 6rem); }
.aos-hero-bleed__state p.aos-hero-bleed__lede { margin: 1.25rem 0 0; max-width: 36rem; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: hsl(0 0% 100% / 0.84) !important; }
main.aos-sp :is(.aos-hero-bleed--page .aos-hero-bleed__headline, .aos-hero-block__headline, .aos-hero-photo__title) em { font-family: inherit; font-style: normal; font-weight: inherit; color: hsl(0 0% 100% / 0.7); }

/* Split hero: the photograph in true colour, and no empty proof chip. */
main.aos-sp .aos-hero-split__media img { filter: none; }
main.aos-sp .aos-hero-split__media::after { content: none; }
main.aos-sp .aos-hero-split__proof:not(:has(img)):has(.aos-hero-split__proof-copy b:empty) { display: none; }

/* Giant-type hero: no status dot when the chip is empty. */
main.aos-sp .aos-adh__chip:empty { display: none; }

/* Folio hero: the brand sans, no monospace; the accent stays editorial. */
main.aos-sp :is(.aos-coh__folio, .aos-coh__eyebrow, .aos-cth__eyebrow, .aos-hero-block__eyebrow) { font-family: var(--display); }
main.aos-sp .aos-coh__title { font-family: var(--display); letter-spacing: -0.03em; }
main.aos-sp .aos-coh__title em { font-family: var(--editorial); }
main.aos-sp :is(.aos-coh__num, .aos-coh__pct) { font-family: var(--display); font-weight: 400; }
main.aos-sp .aos-coh__figcap { font-family: var(--body, inherit); font-style: normal; }

/* Full-bleed photo heroes (aos/hero home and admissions): the photograph
   shows. The stock treatment dims it to 55% under a 60 to 94% navy wash. */
main.aos-sp .aos-hero-block__photo img { opacity: 1; }
main.aos-sp .aos-hero-block--home .aos-hero-block__photo::after {
	background:
		linear-gradient(90deg, hsl(var(--aos-navy-deep) / 0.78) 0%, hsl(var(--aos-navy-deep) / 0.42) 48%, hsl(var(--aos-navy-deep) / 0.12) 100%),
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.3) 0%, transparent 30%, hsl(var(--aos-navy-deep) / 0.5) 100%);
}
main.aos-sp .aos-hero-block--admissions .aos-hero-block__photo::after {
	background:
		radial-gradient(ellipse at center, hsl(var(--aos-navy-deep) / 0.62) 0%, hsl(var(--aos-navy-deep) / 0.34) 72%),
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.32) 0%, hsl(var(--aos-navy-deep) / 0.58) 100%);
}

/* ══ Inner-page second sections (2026-10-16) ═══════════════════════════
   Eric: "every page the 2nd section needs to be different and premium
   grade". One block per page (tools/content/_heroes.php maps them); this
   finishes them to the same standard as the heroes on premium pages. */

/* Photographs in true colour: the shared blocks grade them grey, which reads
   cold next to the humanistic heroes. */
main.aos-sp :is(.aos-s-expand__panel img, .aos-s-tabs__media img, .aos-s-bento__cell--media img) { filter: none; }

/* Service doors: names wrap rather than truncate in the closed panels. */
main.aos-sp .aos-s-expand__body h3 { white-space: normal; text-wrap: balance; }

/* Process, pinned: the four steps at reading size. */
main.aos-sp .aos-s-pinproc__steps h3 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); font-weight: 400; letter-spacing: -0.025em; }
main.aos-sp .aos-s-pinproc__steps p { max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.6; }

/* Labels in the brand sans: no monospace on anything customer-facing. */
main.aos-sp :is(.aos-s-duo__kicker, .aos-s-duo i, .aos-s-bento__label, .aos-s-bento__kicker, .aos-s-bento figcaption, .aos-s-bento figcaption b, .aos-s-why__term, .aos-s-pinstack__kicker, .aos-s-tabs button, .aos-s-thesis__pron, .aos-s-thesis__ref) { font-family: var(--display); }
main.aos-sp .aos-s-thesis__def { font-family: var(--body, inherit); font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.6; }

/* The ledger's proof rail is optional; empty, it takes no room. */
main.aos-sp .aos-s-why__proof:empty { display: none; }

/* ══ Build loop (2026-10-16 night): page-by-page finishing ═════════════
   One block per page as each is recomposed. Labels in the brand sans,
   photographs in true colour. */

/* About: hero labels, figure captions, the pull quote's attribution and the
   year stamps in the brand sans (BRAND-ETHOS: no monospace on anything an
   owner reads). */
main.aos-sp :is(.aos-abh__eyebrow, .aos-abh__role, .aos-s-edfeat__fig figcaption, .aos-s-edfeat__pull cite, .aos-s-milestones__year) { font-family: var(--display); }
main.aos-sp .aos-s-edfeat__pull cite { display: block; margin-top: 0.9rem; font-size: 0.75rem; font-style: normal; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-muted)); }
main.aos-sp :is(.aos-s-edfeat__fig img, .aos-s-story__thumb img) { filter: none; }

/* Services: the inline photographs in true colour; the close's kicker in the
   brand sans. */
main.aos-sp .aos-s-inlineman__img img { filter: none; }
main.aos-sp .aos-s-ctaslim__kicker { font-family: var(--display); }

/* Process: the exchange table's column labels and the finale's note in the
   brand sans. */
main.aos-sp :is(.aos-s-compare__row span, .aos-s-finale__note) { font-family: var(--display); }

/* ── Document preview (aos/docpreview, new 2026-10-16): what the owner takes
   home, shown before they buy. A paper sheet with a second stacked behind it,
   the contents numbered, quiet ruled lines where their own figures will go. */
.aos-s-docprev { padding-block: var(--sp-band); background: hsl(var(--bg-alt)); }
.aos-s-docprev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.aos-s-docprev__points { display: grid; gap: 0.75rem; margin: clamp(1.5rem, 3vh, 2rem) 0 0; padding: 0; list-style: none; }
.aos-s-docprev__points li { position: relative; padding-left: 1.75rem; font-size: 1.02rem; line-height: 1.55; color: hsl(var(--fg)); }
.aos-s-docprev__points li::before { content: ""; position: absolute; left: 0.1rem; top: 0.42em; width: 0.75rem; height: 0.42rem; border-left: 2px solid hsl(var(--aos-yellow-deep)); border-bottom: 2px solid hsl(var(--aos-yellow-deep)); transform: rotate(-45deg); }
.aos-s-docprev__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: clamp(2rem, 4vh, 2.5rem); }
.aos-s-docprev__note { margin: 0; font-size: 0.92rem; color: hsl(var(--fg-muted)); }
.aos-s-docprev__doc { position: relative; margin: 0; padding: 1.25rem 1.5rem 2.5rem; }
.aos-s-docprev__sheet { position: relative; z-index: 1; padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid hsl(var(--fg) / 0.08); border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -36px hsl(var(--fg) / 0.38), 0 2px 6px hsl(var(--fg) / 0.05); transform: rotate(-1.2deg); }
.aos-s-docprev__sheet--back { position: absolute; inset: 1.25rem 1.5rem 2.5rem; z-index: 0; padding: 0; background: hsl(var(--paper)); box-shadow: 0 20px 40px -30px hsl(var(--fg) / 0.3); transform: rotate(2.4deg) translate(10px, 8px); }
.aos-s-docprev__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid hsl(var(--fg) / 0.1); }
.aos-s-docprev__label, .aos-s-docprev__for { margin: 0; font-family: var(--display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-muted)); }
.aos-s-docprev__for { color: hsl(var(--aos-yellow-deep)); }
.aos-s-docprev__name { margin: 1.4rem 0 0; font-family: var(--display); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; color: hsl(var(--fg)); }
.aos-s-docprev__toc { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: toc; }
.aos-s-docprev__toc li { display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.5rem; padding: 0.68rem 0; border-top: 1px dashed hsl(var(--fg) / 0.13); counter-increment: toc; }
.aos-s-docprev__toc li::before { content: counter(toc, decimal-leading-zero); grid-row: span 2; padding-top: 0.12rem; font-family: var(--display); font-size: 0.78rem; font-weight: 600; color: hsl(var(--aos-yellow-deep)); }
.aos-s-docprev__toc span { font-size: 0.98rem; font-weight: 500; line-height: 1.35; color: hsl(var(--fg)); }
.aos-s-docprev__toc small { font-size: 0.84rem; line-height: 1.45; color: hsl(var(--fg-muted)); }
.aos-s-docprev__lines { display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.aos-s-docprev__lines i { display: block; height: 0.45rem; border-radius: 99px; background: hsl(var(--fg) / 0.06); }
.aos-s-docprev__lines i:nth-child(1) { width: 92%; }
.aos-s-docprev__lines i:nth-child(2) { width: 76%; }
.aos-s-docprev__lines i:nth-child(3) { width: 52%; }
@media (prefers-reduced-motion: no-preference) {
	.aos-s-docprev__sheet:not(.aos-s-docprev__sheet--back) { transition: transform 0.6s var(--ease-out); }
	.aos-s-docprev__doc:hover .aos-s-docprev__sheet:not(.aos-s-docprev__sheet--back) { transform: rotate(0deg) translateY(-4px); }
}
@media (max-width: 900px) {
	.aos-s-docprev__grid { grid-template-columns: 1fr; }
	.aos-s-docprev__doc { padding: 0.5rem 0.75rem 1.75rem; }
	.aos-s-docprev__sheet--back { inset: 0.5rem 0.75rem 1.75rem; }
}

/* Growth: the timeline stamps in the brand sans. */
main.aos-sp .aos-timeline-block__date { font-family: var(--display); }
/* Growth: every step reads in full on desktop too (the stock timeline only
   opens a step on hover). */
main.aos-sp .aos-timeline-block__body { max-height: none; margin-top: 0.4rem; opacity: 1; overflow: visible; }

/* ══ Build loop, deploy 2 blocks (2026-10-16 night) ═══════════════════ */

/* ── Photo ask (aos/photoask, new 2026-10-16): a closing ask beside one large
   photograph. ── */
.aos-s-photoask { padding-block: var(--sp-band); }
.aos-s-photoask__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.aos-s-photoask--right .aos-s-photoask__media { order: 2; }
.aos-s-photoask__media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: hsl(var(--bg-alt)); }
.aos-s-photoask__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aos-s-photoask__text { max-width: 36ch; margin: 1.25rem 0 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-photoask__copy .aos-btn { margin-top: clamp(1.75rem, 3.5vh, 2.25rem); }
.aos-s-photoask__note { margin: 0.9rem 0 0; font-size: 0.9rem; color: hsl(var(--fg-muted)); }
@media (max-width: 900px) {
	.aos-s-photoask__grid { grid-template-columns: 1fr; }
	.aos-s-photoask--right .aos-s-photoask__media { order: 0; }
}

/* Branding: the touchpoint list. With no number the first column folds away;
   on touch screens each row shows its own picture (the hover preview never
   appears there); previews in true colour; labels in the brand sans. */
main.aos-sp .aos-s-hoverlist__num:empty { display: none; }
main.aos-sp .aos-s-hoverlist__row:has(.aos-s-hoverlist__num:empty) { grid-template-columns: minmax(0, 1fr) auto; }
.aos-s-hoverlist__thumb { display: none; }
main.aos-sp :is(.aos-s-hoverlist__meta, .aos-s-hoverlist__num) { font-family: var(--display); }
main.aos-sp .aos-s-hoverlist__preview img { filter: none; }
main.aos-sp .aos-s-hoverlist__preview::after { content: none; }
@media (hover: none) {
	main.aos-sp .aos-s-hoverlist__row:has(.aos-s-hoverlist__thumb) { grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: 0.25rem; }
	main.aos-sp .aos-s-hoverlist__thumb { display: block; grid-row: span 2; width: 96px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
	main.aos-sp .aos-s-hoverlist__row:has(.aos-s-hoverlist__thumb) .aos-s-hoverlist__meta { grid-column: 2; }
}

/* Branding: the quote band attribution in the brand sans. */
main.aos-sp :is(.aos-s-quoteband figcaption, .aos-s-quoteband figcaption b) { font-family: var(--display); }

/* Websites: the key figure and spotlight labels in the brand sans; the client
   portrait in true colour. */
main.aos-sp :is(.aos-s-keystat__source, .aos-s-keystat em, .aos-s-spotlight i, .aos-s-spotlight figcaption) { font-family: var(--display); }
main.aos-sp .aos-s-spotlight img { filter: none; }

/* ── Pick-a-start ask (aos/pickask, new 2026-10-16): the owner names the job
   they would hand off first; every choice leads to the conversation. ── */
.aos-s-pickask { padding-block: var(--sp-band); background: hsl(var(--bg-alt)); }
.aos-s-pickask__col { display: flex; flex-direction: column; align-items: center; max-width: 820px; margin-inline: auto; text-align: center; }
.aos-s-pickask__text { max-width: 40ch; margin: 1.1rem 0 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-pickask__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: clamp(1.75rem, 3.5vh, 2.25rem) 0 0; padding: 0; list-style: none; }
.aos-s-pickask__options a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.15rem; border: 1px solid hsl(var(--fg) / 0.16); border-radius: 999px; background: #fff; font-size: 0.95rem; font-weight: 500; color: hsl(var(--fg)); text-decoration: none; transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.aos-s-pickask__options a:hover { border-color: hsl(var(--aos-yellow-deep)); background: hsl(var(--aos-yellow-deep)); color: #fff; }
.aos-s-pickask__options a:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; }
.aos-s-pickask__col .aos-btn { margin-top: clamp(1.75rem, 3.5vh, 2.25rem); }
.aos-s-pickask__note { margin: 1rem 0 0; font-size: 0.92rem; color: hsl(var(--fg-muted)); }
.aos-s-pickask__note a { color: hsl(var(--aos-yellow-deep)); text-underline-offset: 3px; }

/* ── Loop pass 8: info-cards on the shared frame, brand sans labels ── */
main.aos-sp .aos-info-cards__inner {
	max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}
main.aos-sp .aos-info-cards__kicker,
main.aos-sp .aos-info-cards__kicker::before {
	font-family: var(--wp--preset--font-family--body, var(--body, system-ui, sans-serif));
	letter-spacing: 0.08em;
}
main.aos-sp .aos-hero-photo .aos-s-eyebrow--dark {
	color: rgba(255, 255, 255, 0.86);
}

/* ── Loop pass 9: aos/levels (three rising levels, each with its promise) ── */
.aos-s-levels { padding-block: var(--sp-band); background: hsl(var(--bg)); }
.aos-s-levels__head { max-width: 780px; }
.aos-s-levels__head .aos-s-lede { margin-top: 1rem; }
.aos-s-levels__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 2rem);
	align-items: start;
	margin: clamp(2.75rem, 6vh, 4rem) 0 0;
	padding: 0;
	list-style: none;
}
.aos-s-levels__item {
	margin-top: calc((2 - var(--lv, 0)) * clamp(1.75rem, 4vw, 3.5rem));
	padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.25rem, 2vw, 1.75rem) clamp(1.75rem, 2.6vw, 2.25rem);
	border: 1px solid hsl(var(--fg) / 0.12);
	border-radius: 20px;
	background: transparent;
}
.aos-s-levels__item.is-marked {
	border-color: hsl(var(--aos-yellow-deep) / 0.45);
	background: #fff;
	box-shadow: 0 1px 2px hsl(var(--fg) / 0.04), 0 18px 40px -24px hsl(var(--fg) / 0.22);
}
.aos-s-levels__num {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--fg-muted));
}
.aos-s-levels__mark {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: hsl(var(--aos-yellow-deep) / 0.1);
	color: hsl(var(--aos-yellow-deep));
	letter-spacing: 0.06em;
	text-transform: none;
	font-size: 0.8rem;
}
.aos-s-levels__name {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: hsl(var(--fg));
}
.aos-s-levels__what { margin: 0.75rem 0 0; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-levels__promise { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid hsl(var(--fg) / 0.1); }
.aos-s-levels__plabel { margin: 0 0 0.5rem; font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-levels__claim {
	margin: 0;
	font-family: "Cormorant Garamond", "New York", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
	line-height: 1.3;
	color: hsl(var(--fg));
}
.aos-s-levels__fit { margin: 1.25rem 0 0; font-size: 0.92rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-s-levels__note { margin: clamp(2rem, 4vh, 2.75rem) 0 0; max-width: 62ch; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
@media (max-width: 900px) {
	.aos-s-levels__list { grid-template-columns: 1fr; }
	.aos-s-levels__item { margin-top: 0; }
}
/* Loop pass 9: ed-gains on premium pages, on the shared frame, weight 400, the site eyebrow tick. */
main.aos-sp .aos-ed-gains .aos-ed__inner {
	max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}
main.aos-sp .aos-ed-gains .aos-ed__head .aos-ed__label { display: flex; align-items: center; gap: 14px; }
main.aos-sp .aos-ed-gains .aos-ed__head .aos-ed__label::before { content: ""; width: 26px; height: 1px; flex: 0 0 auto; background: hsl(var(--aos-yellow-deep) / 0.5); }
main.aos-sp .aos-ed-gain__word { font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); letter-spacing: -0.02em; }

/* ── Loop pass 10: Book a call hero, the host above the ask, facts in brand sans ── */
.aos-hero-center__host { display: inline-flex; align-items: center; gap: 0.85rem; margin: 0 auto clamp(1.5rem, 3.5vh, 2.25rem); padding: 0.4rem 1.1rem 0.4rem 0.4rem; border: 1px solid hsl(var(--fg) / 0.1); border-radius: 999px; background: #fff; text-align: left; }
.aos-hero-center__host img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; object-position: 50% 22%; }
.aos-hero-center__host figcaption { display: flex; flex-direction: column; line-height: 1.25; }
.aos-hero-center__host b { font-size: 0.98rem; font-weight: 600; color: hsl(var(--fg)); }
.aos-hero-center__host span { font-size: 0.85rem; color: hsl(var(--fg-muted)); }
main.aos-sp .aos-hero-center__meta { font-family: var(--display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: hsl(var(--fg-muted)); }

/* ── Loop pass 11: aos/upsidecheck (owner self-check, result stays on the page) ── */
.aos-s-upside { padding-block: clamp(3rem, 8vh, 5.5rem) var(--sp-band); background: hsl(var(--bg)); }
.aos-s-upside__head { max-width: 760px; }
.aos-s-upside__title { margin: 1.1rem 0 0; font-family: var(--display); font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; color: hsl(var(--fg)); }
.aos-s-upside__lede { max-width: 56ch; margin: 1.25rem 0 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-upside__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.5rem, 6vh, 4rem); }
.aos-s-upside__form { margin: 0; }
.aos-s-upside__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--fg) / 0.12); }
.aos-s-upside__q { border-bottom: 1px solid hsl(var(--fg) / 0.12); }
.aos-s-upside__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.1rem, 2.4vh, 1.45rem) 0; }
.aos-s-upside__qtext { margin: 0; flex: 1 1 auto; min-width: 0; font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); line-height: 1.45; color: hsl(var(--fg)); }
.aos-s-upside__opts { flex: 0 0 auto; display: inline-flex; gap: 0.4rem; }
.aos-s-upside__opts label { position: relative; cursor: pointer; }
.aos-s-upside__opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.aos-s-upside__opts span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 1rem; border: 1px solid hsl(var(--fg) / 0.16); border-radius: 999px; background: #fff; font-size: 0.95rem; font-weight: 500; color: hsl(var(--fg)); transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.aos-s-upside__opts label:hover span { border-color: hsl(var(--fg) / 0.4); }
.aos-s-upside__opts input:checked + span { border-color: hsl(var(--fg)); background: hsl(var(--fg)); color: #fff; }
.aos-s-upside__opts input[value="yes"]:checked + span { border-color: hsl(var(--aos-yellow-deep)); background: hsl(var(--aos-yellow-deep)); }
.aos-s-upside__opts input:focus-visible + span { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 2px; }
.aos-s-upside__result { position: sticky; top: calc(var(--aos-header-h, 80px) + 1.5rem); padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid hsl(var(--fg) / 0.1); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px hsl(var(--fg) / 0.04), 0 24px 48px -32px hsl(var(--fg) / 0.25); }
.aos-s-upside__count { margin: 0; font-family: var(--display); font-size: 0.9rem; font-weight: 500; color: hsl(var(--fg-muted)); }
.aos-s-upside__yes { font-size: 2.6rem; font-weight: 400; letter-spacing: -0.03em; color: hsl(var(--aos-yellow-deep)); margin-right: 0.15rem; }
.aos-s-upside__rtitle { margin: 0.6rem 0 0; font-family: var(--display); font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; color: hsl(var(--fg)); }
.aos-s-upside__rtext { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-s-upside__plays { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid hsl(var(--fg) / 0.1); }
.aos-s-upside__plabel { margin: 0 0 0.75rem; font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-s-upside__plays ul { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.aos-s-upside__plays li { display: grid; gap: 0.15rem; padding-left: 1.1rem; position: relative; }
.aos-s-upside__plays li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 999px; background: hsl(var(--aos-yellow-deep)); }
.aos-s-upside__plays b { font-weight: 600; font-size: 0.98rem; color: hsl(var(--fg)); }
.aos-s-upside__plays span { font-size: 0.9rem; line-height: 1.5; color: hsl(var(--fg-muted)); }
.aos-s-upside__result .aos-btn { margin-top: 1.6rem; }
.aos-s-upside__note { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: hsl(var(--fg-muted)); }
@media (max-width: 900px) {
	.aos-s-upside__grid { grid-template-columns: 1fr; }
	.aos-s-upside__result { position: static; }
}
@media (max-width: 560px) {
	.aos-s-upside__row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.aos-s-upside__opts { display: flex; }
	.aos-s-upside__opts label { flex: 1; }
	.aos-s-upside__opts span { width: 100%; }
}

/* ── Loop pass 12: Journal, the ask at the end of every post ── */
.aos-post__ask { margin: clamp(2.5rem, 6vh, 3.5rem) 0; padding: clamp(1.75rem, 4vw, 2.75rem); border: 1px solid hsl(var(--fg) / 0.1); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px hsl(var(--fg) / 0.04), 0 24px 48px -32px hsl(var(--fg) / 0.22); }
.aos-post__ask-eyebrow { margin: 0; font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--aos-yellow-deep)); }
.aos-post__ask-title { margin: 0.75rem 0 0; font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; color: hsl(var(--fg)); }
.aos-post__ask-title em { font-family: "Cormorant Garamond", "New York", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; color: hsl(var(--aos-yellow-deep)); }
.aos-post__ask-text { max-width: 52ch; margin: 0.8rem 0 0; font-size: 1rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-post__ask .aos-btn { margin-top: 1.4rem; }

/* Loop pass 12: the Journal speaks in the brand sans (no mono labels) and the
   contents rail leaves once the article body is off screen (news-page.js sets is-pinned). */
:is(.aos-news, .aos-post, .aos-toc, .aos-share, .aos-byline) :is(.aos-breadcrumb, .aos-breadcrumb *, .aos-anchor, .aos-news__card-cat, .aos-news__card-cat *, .aos-news__card-meta, .aos-news__card-meta *, .aos-news__card-read, .aos-news__pagination, .aos-news__pagination *, .aos-byline__eyebrow, .aos-post__cat, .aos-post__cat *, .aos-post__meta, .aos-post__meta *, .aos-post__rel-cat, .aos-post__rel-date, .aos-post__tags, .aos-post__tags *, .aos-postquote__by, .aos-tldr__label, .aos-tldr-block__label, .wp-block-post-navigation-link__arrow-next, .wp-block-post-navigation-link__arrow-previous),
.aos-toc__title, .aos-toc__remaining, .aos-toc__link::before, .aos-share__label, .aos-share__btn.is-copied::after, .aos-post__body ol li::marker, .aos-tldr-block__label {
	font-family: var(--display) !important;
	letter-spacing: 0.08em;
}
.aos-tldr-block__intro.aos-post__lead::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: inherit; }
@media (min-width: 1280px) {
	.aos-toc.is-visible { transition: opacity 0.3s ease, visibility 0.3s ease; }
	.aos-toc.is-visible:not(.is-pinned) { opacity: 0; visibility: hidden; pointer-events: none; }
}
.aos-post__sources { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid hsl(var(--fg) / 0.1); font-size: 0.88rem; line-height: 1.6; color: hsl(var(--fg-muted)); }
.aos-toc__link::before { content: none !important; }
.aos-tldr-block__inner:not(:has(.aos-tldr-block__jumps)) { grid-template-columns: minmax(0, 1fr); }
.aos-tldr-block__inner:not(:has(.aos-tldr-block__jumps)) .aos-tldr-block__intro { max-width: 46ch; }
/* Journal index on the shared 1200 frame; every post is Journal, so no category label. */
main.aos-news > :is(.aos-breadcrumb, .aos-news__hero, .aos-news__feed) { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
main.aos-news .aos-news__hero > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
main.aos-news .aos-news__title { font-weight: 400; }
main.aos-news .aos-news__deck { max-width: 52ch !important; }
main.aos-news .aos-news__feed > .wp-block-query, main.aos-news .aos-news__grid { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
.aos-news__card-cat, .aos-post__cat { display: none !important; }
.aos-post__rel-cat { display: none !important; }
/* Journal grid: WordPress flow spacing gave every card after the first a top margin. */
main.aos-news .aos-news__grid > li { margin-block: 0 !important; }

/* ── Loop pass 16: Privacy and Terms (wrapped in .aos-legal by legal-loop-2026-10-16.php) as a readable editorial column ── */
.aos-legal { padding-block: clamp(3rem, 9vh, 6rem) clamp(4rem, 11vh, 7.5rem); }
.aos-legal > * { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
.aos-legal h1 { margin-top: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.aos-legal h1 + p em { font-style: normal; font-size: 0.9rem; color: hsl(var(--fg-muted)); }
.aos-legal h2 { margin-top: clamp(2.25rem, 5vh, 3rem); margin-bottom: 0.75rem; font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem); font-weight: 400; letter-spacing: -0.015em; }
.aos-legal :is(p, li) { font-size: 1.02rem; line-height: 1.7; color: hsl(var(--fg) / 0.86); }
.aos-legal ul { padding-left: 1.2rem; }
.aos-legal li + li { margin-top: 0.45rem; }

/* ── Loop pass 18: legibility floor (QA sweep at 375/390/430 found labels at 8.96 to 10.24px) ── */
main.aos-sp :is(.aos-s-ctaslim__kicker, .aos-s-compare__row > span, .aos-abh__eyebrow, .aos-s-duo__kicker, .aos-eyebrow, .aos-s-hoverlist__meta, .aos-s-edcols__note, .aos-s-tabs__rail > button, .aos-s-bento__label, .aos-s-bento__kicker, .aos-coh__folio, .aos-coh__eyebrow) { font-size: 0.72rem !important; }
main.aos-sp :is(.aos-abh__role, .aos-s-edfeat__fig > figcaption, .aos-s-duo__foot > i, .aos-s-keystat__source, .aos-s-keystat__source i, .aos-s-bento__cell > figcaption, .aos-s-bento__cell > figcaption b) { font-size: 0.8rem !important; }
/* Small links reach the 24px minimum target. */
.aos-breadcrumb a, .aos-byline__more { display: inline-flex; align-items: center; min-height: 24px; }
main.aos-sp .aos-abh__role { font-size: 0.78rem !important; text-transform: none !important; letter-spacing: 0.01em !important; line-height: 1.3; }

/* ── Loop pass 19: desktop sweep fixes ── */
/* The only photo of Chris Coons is 256px: show it square near its native size, give the quote the room, drop the redundant monogram. */
@media (min-width: 761px) {
	main.aos-sp .aos-s-spotlight__grid { grid-template-columns: 288px minmax(0, 1fr) !important; gap: clamp(2.5rem, 5vw, 4.5rem) !important; align-items: center; }
}
main.aos-sp .aos-s-spotlight__media { max-width: 288px; }
main.aos-sp .aos-s-spotlight__media img { width: 100%; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
main.aos-sp .aos-s-spotlight__quote { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem) !important; max-width: 24ch; }
main.aos-sp .aos-s-spotlight__who .aos-s-voices__monogram { display: none; }
/* Growth hero lede ran to 96 characters a line. */
main.aos-sp .aos-hero-block__lead { max-width: 60ch; }
main.aos-sp .aos-s-spotlight__media { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; background: none !important; }
/* An empty eyebrow number still took a slot plus the gap, so labels sat 14px right of their headings. */
main.aos-sp .aos-s-eyebrow__num:empty { display: none; }

/* ── Loop pass 22: WCAG AA contrast (axe on live: Private AI and Journal were the only failures) ── */
main.aos-sp .aos-coh :is(.aos-coh__eyebrow, h1 em) { color: hsl(var(--aos-yellow-deep)) !important; }
main.aos-sp .aos-coh :is(.aos-coh__folio, .aos-coh__figcap) { color: #55585d !important; }
main.aos-sp .aos-ed-gains .aos-ed__label { color: hsl(var(--aos-yellow-deep)) !important; }
.aos-s-levels__mark { color: #145a5a; }
.aos-news__card-read { color: #145a5a !important; }
main.aos-sp .aos-coh .aos-coh__eyebrow { color: #186b6b !important; }

/* ── Loop pass 25: ctaslim second way in (Services: the Upside Check under the button) ── */
.aos-s-ctaslim__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; flex: 0 0 auto; }
.aos-s-ctaslim__actions .aos-ghost { font-size: 0.95rem; }
@media (max-width: 760px) { .aos-s-ctaslim__actions { align-items: flex-start; } }
/* Pass 27: the spotlight role line (i) was 9.92px. */
main.aos-sp .aos-s-spotlight__who i { font-size: 0.78rem !important; }
/* Pass 29: byline avatar is a tall portrait, cropped to the face. */
.aos-byline__avatar { object-fit: cover; object-position: 50% 18%; border-radius: 999px; }
@media (min-width: 1280px) { .aos-toc.is-visible.is-past { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ── Loop pass 31: pause control for ambient video (WCAG 2.2.2) ── */
.aos-ambient-toggle { position: absolute; left: clamp(16px, 4vw, 58px); bottom: clamp(16px, 3vh, 28px); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(12, 14, 18, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; opacity: 0.8; transition: opacity 0.2s ease, background-color 0.2s ease; }
.aos-ambient-toggle:hover { opacity: 1; background: rgba(12, 14, 18, 0.65); }
.aos-ambient-toggle:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.aos-ambient-toggle .aos-ambient-toggle__play { display: none; }
.aos-ambient-toggle.is-paused .aos-ambient-toggle__play { display: block; }
.aos-ambient-toggle.is-paused .aos-ambient-toggle__pause { display: none; }
.aos-s-filmcta .aos-ambient-toggle { left: max(var(--wp--style--root--padding-left, 24px), calc((100% - 1200px) / 2)); }

/* ── Loop pass 33: keep the Upside Check list (print / save as PDF) ── */
.aos-s-upside__print { margin-top: 1.1rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 500; color: hsl(var(--aos-yellow-deep)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.aos-s-upside__print:hover { color: hsl(var(--fg)); }
.aos-s-upside__printfrom { display: none; }
@media print {
	body:has(.aos-s-upside) * { visibility: hidden !important; }
	body:has(.aos-s-upside) .aos-s-upside__result, body:has(.aos-s-upside) .aos-s-upside__result * { visibility: visible !important; }
	body:has(.aos-s-upside) .aos-s-upside__result { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: 640px; margin: 0; padding: 24px; border: 0; box-shadow: none; }
	.aos-s-upside__result .aos-btn, .aos-s-upside__print, .aos-s-upside__note, .aos-ambient-toggle { display: none !important; }
	.aos-s-upside__printfrom { display: block; margin-top: 18px; font-size: 11pt; color: #555; }
}
@media print {
	body:has(.aos-s-upside) :is(header.wp-block-template-part, footer.wp-block-template-part, aside.wp-block-template-part, .aos-s-upside__head, .aos-s-upside__form, [class*="chatbot"], .aos-chat) { display: none !important; }
	body:has(.aos-s-upside) .aos-s-upside { padding: 0 !important; }
	body:has(.aos-s-upside) .aos-s-upside__grid { display: block; margin: 0; }
	body:has(.aos-s-upside) .aos-s-upside__result { position: static; }
	.aos-s-upside__plays li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Loop pass 36: About portraits on phones, names under the faces, not over them ── */
@media (max-width: 560px) {
	main.aos-sp .aos-abh__caption { position: static; padding: 0.6rem 0.7rem 0.75rem; background: hsl(var(--aos-navy, 225 13% 13%) / 0.92); }
	main.aos-sp .aos-abh__name { font-size: 0.82rem; }
	main.aos-sp .aos-abh__card img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
}

/* ── Loop pass 37: Growth's Assess questions on the shared frame, a readable list ── */
main.aos-sp .aos-accordion-block__inner { max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px)) !important; margin-inline: auto !important; padding-inline: var(--wp--style--root--padding-left, 24px) !important; }
main.aos-sp .aos-accordion-block__list { max-width: 880px; }
main.aos-sp .aos-accordion-block__headline { font-weight: 400; }

/* ── Loop pass 38: BRAND-ETHOS 'no numbered feature grids that read like a product sheet' ── */
main.aos-sp .aos-info-cards__kicker::before { content: none !important; }
main.aos-sp .aos-ed-gains .aos-ed-gain__num { display: none !important; }
main.aos-sp .aos-ed-gains .aos-ed-gain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 760px) { main.aos-sp .aos-ed-gains .aos-ed-gain { grid-template-columns: 1fr !important; } }

/* ── Loop pass 41: balanced headline breaks (no orphaned last word) ── */
main.aos-sp :is(h1, h2, h3), .aos-post :is(h1, h2), .aos-news__title { text-wrap: balance; }
main.aos-sp p, .aos-post__body p { text-wrap: pretty; }
/* Websites close card on the shared 1200 frame (it ran edge to edge). */
main.aos-sp .aos-apply-cta__inner { max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 24px)) !important; margin-inline: auto !important; padding-inline: var(--wp--style--root--padding-left, 24px) !important; }

/* ── Loop pass 44: a three-step process fills its row (it sat in a four-column grid with an empty end) ── */
@media (min-width: 901px) {
	main.aos-sp .aos-s-process__rail:has(> .aos-s-process__step:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pass 51: further reading under an upside in the Upside Check result. */
.aos-s-upside__read { justify-self: start; margin-top: 0.2rem; font-size: 0.86rem; font-weight: 500; color: hsl(var(--aos-yellow-deep)); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.aos-s-upside__read:hover { color: hsl(var(--fg)); }
/* Pass 52: search results dates in the brand sans. */
body.search main :is(time, .wp-block-post-date, .wp-block-post-date *) { font-family: var(--display) !important; letter-spacing: 0.06em; }

/* Pass 56: on phones and tablets the header actions sit at the right edge.
   Family CSS forces three columns below 720px while the links column is
   hidden, which left the pill and menu button in the middle of the row. */
@media (max-width: 900px) {
	.nav--simple .nav__actions { grid-column: -2 / -1 !important; justify-self: end !important; }
	.nav--simple .nav__inner { column-gap: 16px !important; }
}
/* Pass 56: nothing scrolls sideways at 320px (smallest phones). The Journal
   grid's 300px minimum and the Upside Check result's button set a column
   wider than the screen. */
main.aos-news .aos-news__feed .wp-block-post-template.aos-news__grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important; }
@media (max-width: 900px) {
	main.aos-sp .aos-s-upside__grid { grid-template-columns: minmax(0, 1fr); }
	main.aos-sp .aos-s-upside__result .aos-btn { white-space: normal; max-width: 100%; text-align: center; }
}
/* Pass 56: on the smallest phones the booking calendar runs edge to edge
   (Calendly needs 320px; the page gutter left 272). */
@media (max-width: 400px) {
	main .aos-cal .aos-cal__frame { margin-inline: calc(50% - 50vw); padding: 0 8px; max-width: 100vw; box-sizing: border-box; }
	main .aos-cal .calendly-inline-widget { min-width: 0; width: 100%; }
}
/* Pass 58: contact form errors read as errors (field border + message), not in the success blue. */
.aos-contact-form [aria-invalid="true"] { border-color: hsl(0 62% 40%); box-shadow: 0 0 0 3px hsl(0 62% 40% / 0.12); }
.aos-contact-form__status.is-error { color: hsl(0 62% 40%); }
/* Pass 59: the Upside Check's screen reader announcer (visually hidden). */
.aos-s-upside__live { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Pass 61: Journal headings. A jump from Contents leaves room under the
   sticky header; the copy-link mark is in the brand sans (no mono) and is not
   shown on touch screens, where it could only be an invisible tap target. */
.aos-post__body h2, .aos-post__body h3 { scroll-margin-top: 108px !important; }
.aos-post__body .aos-anchor, .aos-post__body .aos-anchor.is-copied::after { font-family: var(--display) !important; }
@media (hover: none) { .aos-post__body .aos-anchor { display: none !important; } }
/* Pass 61: a Journal post prints as the article (title, byline, cover, body,
   sources with their addresses), without the site chrome, share bar, asks,
   related cards or the dark footer. */
@media print {
	body.single-post :is(header.wp-block-template-part, footer.wp-block-template-part, aside.wp-block-template-part, .aos-share, .aos-breadcrumb, .aos-post__nav, .aos-post__ask, .aos-post__related, .aos-post__related-h, .aos-toc, .aos-anchor, .aos-ambient-toggle, [class*="chatbot"], .aos-chat) { display: none !important; }
	body.single-post, body.single-post main { background: #fff !important; }
	body.single-post .aos-post__cover img { max-height: 3.4in; width: 100%; object-fit: cover; }
	body.single-post .aos-post__body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.82em; color: #555; word-break: break-all; }
	body.single-post .aos-post__body :is(h2, h3) { break-after: avoid; }
	body.single-post .aos-post__body :is(p, li) { orphans: 3; widows: 3; }
	body.single-post .aos-byline { break-inside: avoid; }
	body.single-post .aos-post__foot::after { content: "agency-os.ai/journal"; display: block; margin-top: 14pt; font-size: 9pt; color: #555; }
}
/* Pass 62: one skip link. WordPress inserts its own on every page and always
   aims it at the page's <main>; the theme's second link (#main) went nowhere on
   the home page. The theme link is gone, the empty alert part is hidden (no
   empty landmark), and WordPress's link wears the theme's look on focus. */
aside.wp-block-template-part:not(:has(*)) { display: none !important; }
.skip-link.screen-reader-text:focus { top: 0 !important; left: 0 !important; margin: 0 !important; padding: 12px 18px !important; background: hsl(var(--aos-yellow)) !important; color: hsl(var(--aos-navy-deep)) !important; font-family: var(--body) !important; font-weight: 600; font-size: 14px !important; line-height: 1.4 !important; border-radius: 0 0 8px 0; box-shadow: 0 2px 12px hsl(var(--fg) / 0.18); outline: 2px solid hsl(var(--aos-navy-deep)); outline-offset: -2px; text-decoration: none; }
/* Pass 68: the testimonial quote mark uses the italic serif already loaded for
   the quotes themselves, so the upright face (37 KB) is no longer fetched. */
.aos-s-voices__slide::before { font-style: italic; }
/* Pass 74: search results show a date only for Journal posts; on pages it was
   just the day the page was first made. */
body.search li.type-page .wp-block-post-date { display: none !important; }
/* Pass 77: the "What would help most?" answers read in full. The arrow gets its
   own room, long answers end in an ellipsis instead of running under it, and on
   wider screens the question takes the whole row. */
.aos-contact-form select.aos-input { padding-right: 2.75rem; text-overflow: ellipsis; }
.aos-contact-form__row:has(select) { grid-template-columns: 1fr; }
/* Pass 78: the edcols heading sits in a narrow column; its own size cap was lost
   to the page-wide title size (59 px in 332 px left 'your' alone on a line). */
main.aos-sp .aos-s-edcols__aside .aos-s-title { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
/* Pass 81: the pass-78 cap is for the two-column layout only; once edcols
   stacks (<= 900 px) its heading matches the page's other section titles. */
@media (max-width: 900px) { main.aos-sp .aos-s-edcols__aside .aos-s-title { font-size: clamp(2.25rem, 1rem + 3vw, 3.75rem); } }
/* Pass 89: About on phones. The band spacing (13vh), the hero's own 10vh and
   an 85svh minimum stacked ~200 px of empty dark above the eyebrow, so the
   partners started at the fold. Now the headline, the ask and all three
   partners fit the first screen. */
@media (max-width: 600px) {
	main.aos-sp > section.aos-abh { padding-block: 2rem 3rem !important; min-height: 0 !important; }
	main.aos-sp .aos-abh__inner { padding-top: 0 !important; }
}

/* Case in point, devices frame (2026-10-17): the client's site in a browser
   window that slowly pans down the real page, their app in a phone in front. */
.aos-s-caseinpoint__stage--devices { display: block; padding: 0; }
.aos-s-caseinpoint__devices { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.aos-s-caseinpoint__browser { position: absolute; left: 7%; top: 9%; width: 80%; height: 68%; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px hsl(var(--aos-navy-deep) / 0.10), 0 28px 60px -18px hsl(var(--aos-navy-deep) / 0.38); }
.aos-s-caseinpoint__bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 10px 12px; background: hsl(220 16% 96%); border-bottom: 1px solid hsl(220 14% 90%); }
.aos-s-caseinpoint__bar i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: hsl(220 10% 80%); }
.aos-s-caseinpoint__url { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid hsl(220 14% 89%); font-family: var(--display); font-size: 11.5px; line-height: 1.5; color: hsl(var(--fg-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aos-s-caseinpoint__screen { flex: 1; background-color: #fff; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 0%; animation: aosCasePan 28s ease-in-out 1.2s infinite alternate; }
@keyframes aosCasePan { 0%, 10% { background-position: 50% 0%; } 90%, 100% { background-position: 50% 100%; } }
.aos-s-caseinpoint__handset { position: absolute; right: 6%; bottom: 6%; width: 31%; padding: 5px; border-radius: 26px; transform: rotate(2deg); }
.aos-s-caseinpoint__handset img { border-radius: 21px; }
@media (max-width: 900px) {
	.aos-s-caseinpoint__devices { aspect-ratio: 1 / 1; }
	.aos-s-caseinpoint__browser { left: 6%; top: 8%; width: 76%; height: 74%; }
	.aos-s-caseinpoint__handset { width: 30%; right: 5%; bottom: 5%; padding: 4px; border-radius: 20px; }
	.aos-s-caseinpoint__handset img { border-radius: 16px; }
	.aos-s-caseinpoint__url { font-size: 10.5px; }
}

/* Loop 2 pass 1: the engineers on About. The team block's 52 px avatar dot
   becomes a black-and-white 4:5 portrait, like the partner cards; brand sans
   for the role (no mono). */
main.aos-sp .aos-s-team__grid { gap: clamp(1rem, 2.4vw, 2rem); background: none; border: 0; }
main.aos-sp .aos-s-team__card { padding: 0; background: none; }
main.aos-sp .aos-s-team__mono { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; border: 0; background: hsl(var(--bg-alt)); filter: grayscale(1); object-fit: cover; }
main.aos-sp .aos-s-team__card h3 { margin-top: 1.1rem; font-size: 1.2rem; font-weight: 500; }
main.aos-sp .aos-s-team__role { font-family: var(--display) !important; font-size: 0.72rem; letter-spacing: 0.12em; }
main.aos-sp .aos-s-team__card p { max-width: 34ch; font-size: 0.95rem; }
@media (max-width: 640px) {
	main.aos-sp .aos-s-team__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	main.aos-sp .aos-s-team__card { display: grid; grid-template-columns: 112px 1fr; column-gap: 1.1rem; align-items: start; }
	main.aos-sp .aos-s-team__mono { grid-row: span 3; border-radius: 14px; }
	main.aos-sp .aos-s-team__card h3 { margin-top: 0.2rem; }
}


/* Loop 2 pass 5: one header on every page (Eric 2026-10-17: "need a better nav
   that is consistent and legible on every page. Might have to flip 'Agency OS'
   on dark backgrounds. Must be mobile flawless"). Pages that open on the
   full-bleed film or photo now show the site header as well, fixed over the
   hero and clear, with the wordmark, links, pill and burger in white; past
   8px of scroll it is the same light bar as every other page. The hero's own
   nav steps aside, so the links never scroll away. */
body.aos-bleed-page:has(.aos-hero-bleed) .wp-site-blocks > header.wp-block-template-part { display: block !important; position: fixed; top: 0; left: 0; right: 0; }
body.admin-bar.aos-bleed-page:has(.aos-hero-bleed) .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
body.aos-bleed-page:has(.aos-hero-bleed) .aos-hero-bleed__nav { display: none !important; }
body.aos-bleed-page:has(.aos-hero-bleed) .nav.nav--simple { transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav.nav--simple { background: transparent; border-bottom-color: transparent; }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple :is(.nav__wordmark-a, .nav__wordmark-os) { color: #fff; }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__list a { color: rgb(255 255 255 / 0.86); }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__list a:hover { color: #fff; }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__pill { color: #fff; border-color: rgb(255 255 255 / 0.5); }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__pill:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__burger { color: #fff; border-color: rgb(255 255 255 / 0.45); }
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple :is(.nav__list a, .nav__pill, .nav__burger):focus-visible { outline-color: #fff; }

/* Loop 2 pass 6: the engineers' section ends on a link to the work they built. */
main.aos-sp .aos-s-team__more { margin: clamp(2rem, 5vh, 3rem) 0 0; }
main.aos-sp .aos-s-team__link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 24px; padding-bottom: 3px; border-bottom: 1px solid hsl(var(--fg) / 0.28); font-weight: 600; color: hsl(var(--fg)); text-decoration: none; }
main.aos-sp .aos-s-team__link::after { content: "\2192"; transition: transform 0.25s var(--ease-out); }
main.aos-sp .aos-s-team__link:hover { border-bottom-color: currentColor; }
main.aos-sp .aos-s-team__link:hover::after { transform: translateX(3px); }

/* Loop 2 pass 8: the pinphone ghost numeral is drawn from data-num (decoration, not readable text). */
.aos-s-pinphone__num::before { content: attr(data-num); }

/* Loop 2 pass 14: phone frames scale with their own width (Eric 2026-10-17:
   "iPhone mocks [not] scaling properly"). The 9px bezel, 46px corners and
   38px screen corners were fixed pixels sized for a 286px phone, so small
   phones turned into pills and large ones looked thin. Now the bezel and
   screen corners are proportions of the phone (container units) and the
   outer corners are percentages: every phone reads as the same device. */
.aos-phone { container-type: inline-size; padding: 0 !important; border-radius: 16% / 7.4% !important; }
.aos-phone > :is(img, video) { display: block; width: calc(100% - 6.4cqw) !important; height: calc(100% - 6.4cqw) !important; margin: 3.2cqw !important; border-radius: 13.4cqw !important; object-fit: cover; }
.aos-s-pinphone .aos-phone > img { margin: 0 !important; inset: 3.2cqw !important; }

/* Loop 2 pass 15: mockups sit straight (Eric 2026-10-17: "I don't like the mocks tilting"). */
.aos-s-caseinpoint__handset { transform: none; }

/* Loop 2 pass 16: browser frames scale with their own width, like the phones
   (fixed 40px bars and 11px dots looked oversized on small screens), and the
   address is set in the brand sans (BRAND-ETHOS: no monospace for visitors). */
.aos-browser { container-type: inline-size; }
.aos-browser__bar { height: clamp(18px, 4.4cqw, 40px); gap: clamp(3px, 0.7cqw, 7px); padding: 0 clamp(7px, 1.5cqw, 15px); }
.aos-browser__dot { width: clamp(5px, 1.1cqw, 11px); height: clamp(5px, 1.1cqw, 11px); }
.aos-browser__addr { margin-left: clamp(4px, 1cqw, 10px); height: clamp(12px, 2.8cqw, 22px); padding: 0 clamp(6px, 1.2cqw, 12px); font-family: var(--display) !important; font-size: clamp(8px, 1.5cqw, 12px); }
.aos-s-caseinpoint__browser { container-type: inline-size; }
.aos-s-caseinpoint__bar { gap: clamp(3px, 1.5cqw, 6px); padding: clamp(5px, 2.5cqw, 10px) clamp(6px, 3cqw, 12px); }
.aos-s-caseinpoint__bar i { width: clamp(5px, 2.25cqw, 9px); height: clamp(5px, 2.25cqw, 9px); }
.aos-s-caseinpoint__url { margin-left: clamp(4px, 2cqw, 8px); padding: clamp(1px, 0.75cqw, 3px) clamp(6px, 3cqw, 12px); font-size: clamp(7px, 2.9cqw, 11.5px) !important; }
.aos-s-docprev__sheet--back { transform: translate(12px, 12px); }

/* Loop 2 pass 17: on phones every tab shows (a 2 x 2 grid), so the fourth is
   never hidden off the screen edge with no hint that it exists. */
@media (max-width: 640px) {
	.aos-s-tabs__rail { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; overflow: visible !important; }
	.aos-s-tabs__rail button { justify-content: center; text-align: center; min-height: 48px; }
	.aos-s-tabs__rail button::after { left: 0.75rem; right: 0.75rem; }
}
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) .nav--simple .nav__logo-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* Loop 2 pass 23: the phone menu (Eric 2026-10-17: "Mobile Nav is bad. I want
   button in menu. And visible logo on all pages and hamburger. Make the mobile
   menu a stunner"). Bar on phones: the full logo, and one clear menu button;
   the consultation button lives in the menu. The menu: a full-screen dark
   panel, each page a large line with its description, sliding in in turn. */
@media (max-width: 900px) {
	header .nav.nav--simple .nav__actions .nav__pill { display: none !important; }
	header .nav.nav--simple .nav__logo-link .nav__wordmark--mark .nav__wordmark-a,
	header .nav.nav--simple .nav__logo-link .nav__wordmark--mark .nav__wordmark-os { display: inline !important; }
	header .nav.nav--simple .nav__logo-link .nav__wordmark--mark .nav__mark { margin-right: 8px; height: 36px; }
	header .nav.nav--simple .nav__burger { width: 48px !important; height: 48px !important; border-radius: 14px; border: 1px solid hsl(var(--fg) / 0.16); background: hsl(var(--bg) / 0.6); color: hsl(var(--fg)); }
	header .nav.nav--simple .nav__burger svg { display: block; width: 22px; height: 22px; flex: none; }
	header .nav.nav--simple .nav__burger:focus-visible { outline: 2px solid hsl(var(--aos-yellow)); outline-offset: 3px; }
}
body.aos-bleed-page:has(.aos-hero-bleed):not(.is-nav-scrolled) header .nav.nav--simple .nav__burger { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.4); color: #fff; }

.aos-mm {
	--mm-ink: hsl(0 0% 98%);
	--mm-mute: hsl(0 0% 100% / 0.58);
	--mm-line: hsl(0 0% 100% / 0.12);
	--mm-accent: hsl(var(--aos-yellow));
	position: fixed; inset: 0; z-index: 1500;
	display: flex; flex-direction: column;
	height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
	padding: 0 clamp(20px, 6vw, 40px) calc(clamp(20px, 5vw, 32px) + env(safe-area-inset-bottom, 0px));
	background: hsl(var(--aos-navy-deep));
	color: var(--mm-ink);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.55s;
}
.aos-mm.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s; }
.aos-mm[hidden] { display: none; }
.aos-mm__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 55% at 100% 0%, hsl(var(--aos-yellow) / 0.26), transparent 62%), radial-gradient(70% 45% at 0% 100%, hsl(var(--aos-blue) / 0.22), transparent 60%); }
.aos-mm > :not(.aos-mm__glow) { position: relative; z-index: 1; }
.aos-mm__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; }
.aos-mm__logo { display: inline-flex; color: var(--mm-ink); text-decoration: none; }
.aos-mm__logo .nav__wordmark { display: inline-flex; align-items: center; gap: 0.25em; font-size: 20px; }
.aos-mm__logo .nav__mark { height: 36px; margin-right: 8px; }
.aos-mm__logo :is(.nav__wordmark-a, .nav__wordmark-os) { color: var(--mm-ink) !important; display: inline !important; opacity: 1; }
.aos-mm__logo .nav__wordmark-a { font-weight: 400; }
.aos-mm__logo .nav__wordmark-os { font-weight: 700; }
.aos-mm__close { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid hsl(0 0% 100% / 0.28); background: hsl(0 0% 100% / 0.06); color: var(--mm-ink); cursor: pointer; transition: background 0.2s, transform 0.4s var(--ease-out); }
.aos-mm__close:hover { background: hsl(0 0% 100% / 0.14); transform: rotate(90deg); }
.aos-mm__nav { margin-top: clamp(1.5rem, 5vh, 3rem); }
.aos-mm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mm-line); }
.aos-mm__item { border-bottom: 1px solid var(--mm-line); }
.aos-mm__link { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: clamp(0.9rem, 2.4vh, 1.3rem) 0; color: var(--mm-ink) !important; text-decoration: none !important; }
.aos-mm__label { grid-column: 1; font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 10vw, 3.2rem); line-height: 1; letter-spacing: -0.035em; }
.aos-mm__meta { grid-column: 1; margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.35; color: var(--mm-mute); }
.aos-mm__go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mm-line); color: var(--mm-ink); transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ease-out); }
.aos-mm__link:hover .aos-mm__go, .aos-mm__link:focus-visible .aos-mm__go { background: var(--mm-accent); border-color: var(--mm-accent); color: hsl(var(--aos-navy-deep)); transform: translateX(3px); }
.aos-mm__link[aria-current="page"] .aos-mm__label { font-family: var(--editorial); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--mm-accent); }
.aos-mm__link[aria-current="page"] .aos-mm__label::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.18em; border-radius: 50%; background: var(--mm-accent); vertical-align: 0.12em; }
.aos-mm__link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 4px; border-radius: 6px; }
.aos-mm__foot { margin-top: auto; padding-top: clamp(1.75rem, 5vh, 3rem); }
.aos-mm__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 0.5rem 0.5rem 0.5rem 1.4rem; border-radius: 999px; background: var(--mm-ink); color: hsl(var(--aos-navy-deep)) !important; font-family: var(--display); font-size: 1.1rem; font-weight: 600; text-decoration: none !important; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6); }
.aos-mm__cta-chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mm-accent); color: #fff; transition: transform 0.3s var(--ease-out); }
.aos-mm__cta:hover .aos-mm__cta-chip { transform: translateX(3px); }
.aos-mm__cta:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 4px; }
.aos-mm__note { margin: 0.9rem 0 0; text-align: center; font-size: 0.9rem; color: var(--mm-mute); }
.aos-mm__mail { display: block; width: fit-content; margin: 1.1rem auto 0; padding: 0.4rem 0; color: var(--mm-ink) !important; font-size: 1rem; text-decoration: none !important; border-bottom: 1px solid hsl(0 0% 100% / 0.3); }
/* Entrance: the bar, then each line in turn, then the button. */
.aos-mm :is(.aos-mm__bar, .aos-mm__item, .aos-mm__foot) { opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out); }
.aos-mm.is-open :is(.aos-mm__bar, .aos-mm__item, .aos-mm__foot) { opacity: 1; transform: none; }
.aos-mm.is-open .aos-mm__bar { transition-delay: 0.12s; }
.aos-mm.is-open .aos-mm__item, .aos-mm.is-open .aos-mm__foot { transition-delay: calc(0.2s + var(--i) * 0.06s); }
@media (min-width: 901px) { .aos-mm { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
	.aos-mm, .aos-mm.is-open { clip-path: none; transition: visibility 0s; }
	.aos-mm :is(.aos-mm__bar, .aos-mm__item, .aos-mm__foot) { opacity: 1; transform: none; transition: none; }
}
@media (max-height: 880px) {
	.aos-mm__nav { margin-top: clamp(0.75rem, 2.5vh, 1.5rem); }
	.aos-mm__link { padding: clamp(0.6rem, 1.6vh, 0.95rem) 0; }
	.aos-mm__label { font-size: clamp(1.9rem, min(9vw, 5.2vh), 2.9rem); }
	.aos-mm__meta { margin-top: 0.3rem; font-size: 0.84rem; }
	.aos-mm__foot { padding-top: clamp(1rem, 3vh, 2rem); }
	.aos-mm__cta { min-height: 56px; }
	.aos-mm__note { margin-top: 0.7rem; }
	.aos-mm__mail { margin-top: 0.6rem; }
}
@media (max-height: 620px) {
	.aos-mm__bar { padding-bottom: 8px; }
	.aos-mm__label { font-size: 1.75rem; }
	.aos-mm__meta { display: none; }
	.aos-mm__link { padding: 0.55rem 0; }
}

/* Loop 2 pass 24: the phone menu on tablets and phones turned sideways. The
   glow stays pinned to the screen while the menu scrolls; on wide panels the
   lines and button keep a readable width; on short wide screens (a phone
   turned sideways) the pages and the button sit side by side and fit. */
.aos-mm__glow { position: fixed; }
.aos-mm__nav, .aos-mm__foot { width: 100%; max-width: 640px; }
@media (max-height: 520px) and (min-width: 600px) {
	.aos-mm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 6vw, 4.5rem); align-content: start; }
	.aos-mm__bar { grid-column: 1 / -1; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
	.aos-mm__nav { grid-column: 1; margin-top: 0; max-width: none; }
	.aos-mm__foot { grid-column: 2; align-self: center; margin-top: 0; padding-top: 0; max-width: none; }
	.aos-mm__label { font-size: clamp(1.4rem, 7vh, 1.9rem); }
	.aos-mm__link { padding: clamp(0.35rem, 1.6vh, 0.6rem) 0; }
	.aos-mm__go { width: 34px; height: 34px; }
}

/* Loop 2 pass 30: the Case in point photo frame can show a whole image in its
   own shape (a product across devices), its white ground melting into the page. */
.aos-s-caseinpoint__stage--contain { background: transparent !important; border: 0; box-shadow: none; overflow: visible; }
.aos-s-caseinpoint__photo--contain, .aos-s-caseinpoint__photo.aos-s-caseinpoint__photo--contain { aspect-ratio: 1600 / 923; }
.aos-s-caseinpoint__photo--contain img { object-fit: contain; }
@media (max-width: 900px) { .aos-s-caseinpoint__photo.aos-s-caseinpoint__photo--contain { aspect-ratio: 1600 / 923; } }

/* Loop 2 pass 31: the release log (The Possibility's timeline) in the brand
   sans, at a size an owner can read (BRAND-ETHOS: no monospace for visitors). */
main.aos-sp .aos-s-changelog__ver { font-family: var(--display) !important; font-size: 0.82rem; letter-spacing: 0.02em; padding: 5px 12px; }
main.aos-sp .aos-s-changelog__date { font-family: var(--body) !important; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; }
main.aos-sp .aos-s-changelog__row h3 { font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); }
main.aos-sp .aos-s-changelog__row li { font-size: 0.98rem; }
main.aos-sp .aos-s-changelog__rows { margin-top: clamp(2rem, 5vh, 3rem); }

/* Loop 2 pass 32: the finale close in the brand sans (no monospace for visitors). */
main.aos-sp .aos-s-finale__note { font-family: var(--body) !important; letter-spacing: 0.12em; }

/* Loop 2 pass 34: the proof board (The Possibility's parts) in the brand sans,
   at a readable size, the parts list in two columns on wide screens. */
main.aos-sp .aos-s-proofboard__list i, main.aos-sp .aos-s-proofboard__cap { font-family: var(--body) !important; font-size: 0.72rem; letter-spacing: 0.12em; }
main.aos-sp .aos-s-proofboard__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
main.aos-sp .aos-s-proofboard__list li { display: grid; gap: 0.2rem; }
main.aos-sp .aos-s-proofboard__ava:empty { display: none; }
@media (max-width: 420px) { main.aos-sp .aos-s-proofboard__list { grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; } }
@media (min-width: 901px) {
	main.aos-sp .aos-s-proofboard__row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
	main.aos-sp .aos-s-proofboard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}

/* Loop 2 pass 35: the blueprint (The Possibility's brief) with a readable note:
   brand sans, normal case, a comfortable measure (no monospace for visitors). */
main.aos-sp .aos-s-blueprint__note { font-family: var(--body) !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); letter-spacing: 0; text-transform: none; line-height: 1.6; max-width: 46rem; margin-inline: auto; color: hsl(var(--fg-muted)); }
main.aos-sp .aos-s-blueprint__note em { font-family: var(--editorial); font-size: 1.12em; color: hsl(var(--fg)); }
main.aos-sp .aos-s-blueprint__dim { font-family: var(--body) !important; letter-spacing: 0.14em; }
@media (max-width: 600px) {
	main.aos-sp .aos-s-blueprint__frame h2, main.aos-sp .aos-s-blueprint__note { text-align: left; }
	main.aos-sp .aos-s-proofboard__list i { letter-spacing: 0.05em; font-size: 0.7rem; }
}

/* Loop 2 pass 45: Safari sizes a <select> to its longest option, which pushed
   the contact form 42px past a 320px screen (Chrome constrains it). Let the
   fields shrink to their column. */
.aos-contact-form :is(label, .aos-contact-form__row > *) { min-width: 0; }
.aos-contact-form select { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Loop 2 pass 47: the message box at 16px like the other fields, so tapping it on an iPhone does not zoom the page. */
.aos-contact-form textarea, .aos-contact-form textarea.aos-input { font-size: 16px !important; }

/* Custom systems bento: each cell from a real build ends on a link to it (build loop 2, pass 63). */
.aos-s-bento__cell--feature p a { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; color: hsl(var(--fg)); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.aos-s-bento__cell--feature p a::after { content: "\2192"; text-decoration: none; display: inline-block; transition: transform 0.25s var(--ease-out); }
.aos-s-bento__cell--feature p a:hover::after { transform: translateX(3px); }
.aos-s-bento__cell--feature p a:focus-visible { outline: 2px solid hsl(var(--aos-yellow-deep)); outline-offset: 3px; border-radius: 3px; }

/* About 'What we won't do' as an editorial spread (build loop 2, premium pass): heading large top left,
   the button top right, the photograph a tall panel beside the refusals; arrows in the brand sans. */
main.aos-sp .aos-s-story__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; row-gap: clamp(2rem, 4vw, 3.25rem); align-items: stretch; }
main.aos-sp .aos-s-story__grid > div:first-child { display: contents; }
main.aos-sp .aos-s-story h2 { grid-column: 1; grid-row: 1; align-self: end; margin: 0; max-width: 14ch; font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
main.aos-sp .aos-s-story__act { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; margin: 0; }
main.aos-sp .aos-s-story__thumb, main.aos-sp .aos-s-story__thumb--169 { grid-column: 1; grid-row: 2; width: 100%; height: 100%; min-height: 340px; aspect-ratio: auto; border-radius: 20px; }
main.aos-sp .aos-s-story__thumb img { height: 100%; aspect-ratio: auto; }
main.aos-sp .aos-s-story__ledger { grid-column: 2; grid-row: 2; align-self: center; }
main.aos-sp .aos-s-story__ledger li { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 400; letter-spacing: -0.02em; }
main.aos-sp .aos-s-story__ledger li::before { font-family: var(--body); }
@media (max-width: 900px) {
	main.aos-sp .aos-s-story__grid { grid-template-columns: 1fr; grid-template-rows: none; }
	main.aos-sp :is(.aos-s-story h2, .aos-s-story__act, .aos-s-story__thumb, .aos-s-story__ledger) { grid-column: 1; grid-row: auto; }
	main.aos-sp .aos-s-story__act { justify-self: start; }
	main.aos-sp .aos-s-story__thumb, main.aos-sp .aos-s-story__thumb--169 { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}

/* Process 'Fair on both sides' as an open ledger (build loop 2, premium pass): no box, no tinted column,
   reading-size cells (the 0.72rem !important label rule was catching every cell), row labels in the display
   face, what we owe set firmer. Phones stack each row with its own small column labels (data-label). */
main.aos-sp .aos-s-compare__table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
main.aos-sp .aos-s-compare__row { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); border-bottom: 1px solid hsl(var(--border)); }
main.aos-sp .aos-s-compare__row > * { padding: clamp(1.3rem, 2.8vh, 1.8rem) 0; background: none !important; }
main.aos-sp .aos-s-compare__row--head { background: none; border-bottom: 1px solid hsl(var(--fg) / 0.35); }
main.aos-sp .aos-s-compare__row--head > * { padding: 0 0 0.85rem; font-family: var(--body); }
main.aos-sp .aos-s-compare__row:not(.aos-s-compare__row--head) > span { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem) !important; line-height: 1.5; }
main.aos-sp .aos-s-compare__row:not(.aos-s-compare__row--head) > .aos-s-compare__what { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem) !important; font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; }
main.aos-sp .aos-s-compare__them { color: hsl(var(--fg-muted)); }
main.aos-sp .aos-s-compare__us { color: hsl(var(--fg)); font-weight: 500; }
@media (max-width: 760px) {
	main.aos-sp .aos-s-compare__row { grid-template-columns: 1fr; row-gap: 0.85rem; padding-block: 1.35rem; }
	main.aos-sp .aos-s-compare__row > * { padding: 0 !important; }
	main.aos-sp .aos-s-compare__row--head { display: none; }
	main.aos-sp .aos-s-compare__row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; font: 600 0.68rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--fg-subtle)); }
	main.aos-sp .aos-s-compare__us[data-label]::before { color: hsl(var(--aos-yellow-deep)); }
}

/* World-class type pass (build loop 2, 2026-10-17 evening; Eric: "best website ever created? Not close keep going").
   Benchmarked against oneequity.com and outside.studio: their reading text is 17 to 21px and labels never drop below 12px;
   ours ran 14 to 15px with 11.5px labels. Reading text gets a 16 to 17px floor; the tracked labels go to about 12px. */
main.aos-sp :is(.aos-s-caseinpoint__client, .aos-s-expand__body, .aos-s-team__card p, .aos-s-duo__door p, .aos-timeline-block__body, .aos-accordion-block__a p, .aos-s-docprev__note, .aos-s-photoask__note, .aos-s-bento__cell p, .aos-info-cards__body, .aos-s-pickask__note, .aos-s-proofboard__lede, .aos-s-milestones__item p, .aos-s-values__item p, .aos-s-tabs__panel p, .aos-s-hoverlist__body) { font-size: clamp(1rem, 0.96rem + 0.22vw, 1.075rem) !important; line-height: 1.6; }
html body main.aos-sp :is(.aos-s-ctaslim__kicker, .aos-abh__eyebrow, .aos-s-duo__kicker, .aos-eyebrow, .aos-s-hoverlist__meta, .aos-s-edcols__note, .aos-s-tabs__rail > button, .aos-s-bento__label, .aos-s-bento__kicker, .aos-coh__folio, .aos-coh__eyebrow) { font-size: 0.77rem !important; }
html body main.aos-sp :is(.aos-s-eyebrow, .aos-sc__eyebrow, .aos-sc__kind) { font-size: max(0.77rem, 12.3px); }
main.aos-sp .aos-abh__role { font-size: 0.85rem !important; }
main.aos-sp :is(.aos-s-expand__body p, .aos-s-why__item p, .aos-apply-cta__card p, .aos-s-faq__a p) { font-size: clamp(1rem, 0.96rem + 0.22vw, 1.075rem) !important; line-height: 1.6; }
main.aos-sp :is(.aos-s-caseinpoint__stats dd, .aos-s-caseinpoint__links a) { font-size: 0.98rem; }

/* Home Case in point, the flagship proof given more scale (world-class pass): the devices take the larger share. */
@media (min-width: 1100px) {
	main.aos-sp .aos-s-caseinpoint__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important; column-gap: clamp(3rem, 6vw, 5.5rem) !important; align-items: center; }
	main.aos-sp .aos-s-caseinpoint__devices { aspect-ratio: 1 / 1; }
	main.aos-sp .aos-s-caseinpoint .aos-s-title { font-size: clamp(2.6rem, 1.6rem + 2.2vw, 3.3rem) !important; }
	main.aos-sp .aos-s-caseinpoint__stats dt { font-size: clamp(3rem, 2rem + 2vw, 4rem); }
}

/* Film hero entrance, faster (world-class pass): the headline used to wait 1.25s and take 0.9s more, so the
   most important sentence arrived about two seconds in. Same order, tighter: headline at 0.15s, the ask at 0.4s. */
.aos-hero-bleed__nav, .aos-hero-bleed__since, .aos-hero-bleed__mark, .aos-hero-bleed__index, .aos-hero-bleed__state, .aos-hero-bleed__chip { animation-duration: 0.7s !important; }
.aos-hero-bleed__nav, .aos-hero-bleed__since, .aos-hero-bleed__mark { animation-delay: 0.05s !important; }
.aos-hero-bleed__state { animation-delay: 0.15s !important; }
.aos-hero-bleed__index { animation-delay: 0.3s !important; }
.aos-hero-bleed__chip { animation-delay: 0.4s !important; }

/* Pull quote on keeper pages (case studies): the quote in the editorial serif italic like every other quote on the
   site, the byline in the brand sans (the monospace is retired from anything customer-facing). */
main.aos-sp .aos-pullquote blockquote { font-family: var(--editorial) !important; font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.32; }
main.aos-sp .aos-pullquote__by { font-family: var(--body) !important; font-weight: 600; letter-spacing: 0.12em; font-size: 0.78rem; }

/* Photo heroes (hero-bleed with a still, not a film; Services today): a shadow from the left under the headline,
   on top of the usual layers, so a bright sky behind the words cannot wash them out. Phones darken evenly. */
main.aos-sp .aos-hero-bleed__media:has(> img)::after {
	background:
		linear-gradient(90deg, hsl(var(--aos-navy-deep) / 0.74) 0%, hsl(var(--aos-navy-deep) / 0.52) 28%, hsl(var(--aos-navy-deep) / 0.16) 54%, transparent 68%),
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.5) 0%, hsl(var(--aos-navy-deep) / 0.06) 24%, hsl(var(--aos-navy-deep) / 0.1) 46%, hsl(var(--aos-navy-deep) / 0.78) 100%),
		radial-gradient(110% 65% at 0% 100%, hsl(var(--aos-navy-deep) / 0.5), transparent 62%);
}
@media (max-width: 700px) {
	main.aos-sp .aos-hero-bleed__media:has(> img)::after { background: linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.5) 0%, hsl(var(--aos-navy-deep) / 0.58) 35%, hsl(var(--aos-navy-deep) / 0.66) 65%, hsl(var(--aos-navy-deep) / 0.86) 100%); }
}

/* Eric 2026-10-17: "Serif font is good. No italics unless within a quote." The serif accents stay serif and stand upright;
   quotes (testimonials, pull quotes, the private-AI promise) keep their italics. */
body :is(em, i) { font-style: normal !important; }
body :is(.aos-sc__lede, .aos-sc__creed-sign, .aos-sc__print figcaption, .aos-sc__callouts--notes .aos-sc__callout p, .aos-s-proofboard__cell p, .aos-sc__story) { font-style: normal !important; }
body :is(blockquote, q, .aos-pullquote, .aos-s-edfeat__pull, .aos-s-levels__claim) :is(em, i, mark) { font-style: italic !important; }

/* No italics outside quotes: the phone menu marks the current page in teal, upright. */
body .aos-mm__link[aria-current] .aos-mm__label { font-style: normal !important; }

/* Eric 2026-10-17: "Absolutely no solid white buttons. In dark backgrounds it's outline only if text passes accessibility."
   Light grounds: transparent with the hairline border. Dark grounds: an outline with light text. */
main.aos-sp .aos-s-voices__btn { background: transparent !important; border-color: hsl(var(--fg) / 0.28) !important; }
main.aos-sp .aos-s-voices__btn:hover { background: hsl(var(--fg) / 0.06) !important; }
main.aos-sp .aos-s-pickask a:not(.aos-btn) { background: transparent !important; }
main.aos-sp .aos-s-pickask a:not(.aos-btn):hover { background: hsl(var(--fg) / 0.05) !important; }
header .nav.nav--simple .nav__burger { background: transparent !important; }
body .aos-mm__cta { background: transparent !important; color: var(--mm-ink) !important; border: 1.5px solid color-mix(in srgb, var(--mm-ink) 70%, transparent); }
body .aos-mm__cta:hover { background: color-mix(in srgb, var(--mm-ink) 10%, transparent) !important; }

/* build loop 2, pass 131: no solid white clickable boxes (Eric 2026-10-17, "Absolutely no solid white buttons"); the accordion card keeps its hairline, loses the white fill */
main.aos-sp .aos-accordion-block__item { background: transparent !important; box-shadow: inset 0 0 0 1px hsl(var(--fg) / 0.14) !important; }
main.aos-sp .aos-accordion-block__item:hover { background: hsl(var(--fg) / 0.03) !important; }

/* build loop 2, pass 132: Book a call, what happens next and four plain answers beside the calendar; on phones the calendar first */
main .aos-cal--notes .aos-cal__wrap { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; width: 100%; max-width: 1240px; margin-inline: auto; }
main .aos-cal--notes .aos-cal__frame { max-width: none; margin: 0; padding: 0; }
main .aos-cal--notes .calendly-inline-widget { height: 720px; }
.aos-cal__notes { padding-top: 0.25rem; }
.aos-cal__h { margin: 0 0 0.9rem; font: 600 0.78rem/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--aos-blue)); }
.aos-cal__h--faq { margin-top: 2.5rem; }
.aos-cal__steps { list-style: none; margin: 0; padding: 0; counter-reset: aosCalStep; }
.aos-cal__steps li { counter-increment: aosCalStep; position: relative; padding: 1rem 0 1rem 2.6rem; border-top: 1px solid hsl(var(--border)); }
.aos-cal__steps li::before { content: counter(aosCalStep); position: absolute; left: 0; top: 1rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid hsl(var(--aos-blue) / 0.5); font: 600 0.8rem/1 var(--display); color: hsl(var(--aos-blue)); }
.aos-cal__steps h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.14rem; letter-spacing: -0.01em; color: hsl(var(--fg)); }
.aos-cal__steps p { margin: 0.35rem 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
.aos-cal__faq { margin: 0; }
.aos-cal__faq div { padding: 0.85rem 0; border-top: 1px solid hsl(var(--border)); }
.aos-cal__faq dt { font-weight: 600; font-size: 1rem; color: hsl(var(--fg)); }
.aos-cal__faq dd { margin: 0.25rem 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: hsl(var(--fg-muted)); }
@media (max-width: 960px) {
	main .aos-cal--notes .aos-cal__wrap { grid-template-columns: minmax(0, 1fr); }
	main .aos-cal--notes .aos-cal__frame { order: -1; }
	main .aos-cal--notes .calendly-inline-widget { height: 760px; }
}
@media (max-width: 400px) {
	main .aos-cal--notes .aos-cal__frame { margin-inline: calc(50% - 50vw); padding: 0 8px; max-width: 100vw; box-sizing: border-box; }
}

/* build loop 2, pass 134: the ledger's small labels in the brand sans, tracked, never the monospace (BRAND-ETHOS: mono retired from customer-facing type) */
main.aos-sp .aos-s-ledger__unit { font-family: var(--display) !important; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Contact details (2026-10-18): the contact panel's small labels in the brand sans, never the monospace (BRAND-ETHOS) */
main.aos-sp .aos-s-contactpanel__kind { font-family: var(--display) !important; font-size: 0.74rem; letter-spacing: 0.14em; }

/* loop 3, pass 147: the Upside Check's blank copy for the team (comparables study C8) */
.aos-s-upside__blank { display: block; margin-top: 0.85rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 500; color: hsl(var(--aos-yellow-deep)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; text-align: left; }
.aos-s-upside__blank:hover { color: hsl(var(--fg)); }
.aos-s-upside__blankhead { display: none; }
@media print {
	.aos-s-upside__blank { display: none !important; }
	html.aos-uc-blank body:has(.aos-s-upside) .aos-s-upside__result { display: none !important; }
	html.aos-uc-blank body:has(.aos-s-upside) .aos-s-upside__form { display: block !important; }
	html.aos-uc-blank body:has(.aos-s-upside) .aos-s-upside__form, html.aos-uc-blank body:has(.aos-s-upside) .aos-s-upside__form * { visibility: visible !important; }
	html.aos-uc-blank .aos-s-upside__blankhead { display: grid !important; gap: 6pt; margin: 0 0 14pt; font-size: 11pt; color: #222; }
	html.aos-uc-blank .aos-s-upside__blankhead b { font-size: 16pt; font-weight: 600; letter-spacing: -0.01em; }
	html.aos-uc-blank .aos-s-upside__blankhead span:last-child { margin-top: 8pt; }
	html.aos-uc-blank .aos-s-upside__row, html.aos-uc-blank .aos-s-upside__row.is-yes { background: none !important; box-shadow: none !important; border-color: #bbb !important; break-inside: avoid; }
	html.aos-uc-blank .aos-s-upside__opts input { display: none !important; }
	html.aos-uc-blank .aos-s-upside__opts label, html.aos-uc-blank .aos-s-upside__opts label span { background: none !important; border: 0 !important; box-shadow: none !important; color: #111 !important; }
	html.aos-uc-blank .aos-s-upside__opts label span::before { content: ""; display: inline-block; width: 11pt; height: 11pt; margin-right: 5pt; border: 1pt solid #333; border-radius: 2pt; vertical-align: -2pt; }
}

/* loop 3, pass 150: the starting point chosen on Custom systems, shown above the booking steps */
.aos-cal__topic { display: inline-block; margin: 0 0 1.4rem; padding: 0.5rem 0.9rem; border: 1px solid hsl(var(--aos-blue) / 0.4); border-radius: 999px; font-size: 0.95rem; line-height: 1.35; color: hsl(var(--fg)); }
.aos-cal__topic b { font-weight: 600; }
.aos-cal__topic[hidden] { display: none; }

/* loop 3, pass 153: the one-page brief link under the booking notes */
.aos-cal__share { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); font-size: 0.95rem; line-height: 1.5; color: hsl(var(--fg-muted)); }
.aos-cal__share a { color: hsl(var(--aos-yellow-deep)); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* ── Hero (full bleed): a second action beside the chip (2026-10-20) ─────────
   Only a hero with altLabel + altUrl gets .aos-hero-bleed__actions. Then it is
   handled like the /aos hero (Eric: "see how the buttons are handled on the
   hero on agency-os.ai/aos"): the chip is an outlined pill with the teal arrow
   circle, the second action a plain underlined link beside it. The row enters
   as one piece. */
.aos-hero-bleed .aos-hero-bleed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; opacity: 0; animation: aosBleedIn 0.7s cubic-bezier(.22,.61,.36,1) 0.4s forwards; }
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	align-self: auto;
	margin: 0;
	padding: 0.4rem 0.45rem 0.4rem 1.5rem;
	border: 1px solid hsl(0 0% 98% / 0.28);
	border-radius: 999px;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-family: var(--display);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	color: hsl(0 0% 98%);
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	animation: none;
	transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__chip:hover { transform: none; border-color: hsl(0 0% 98% / 0.6); background: hsl(0 0% 98% / 0.06); }
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__chip b { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__chip .aos-hero-bleed__go { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: hsl(var(--aos-yellow)); color: hsl(var(--aos-navy-deep)); transition: transform 0.25s var(--ease-out); }
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__chip:hover .aos-hero-bleed__go { transform: translateX(2px); background: hsl(var(--aos-yellow)); }
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__alt {
	font-family: var(--display);
	font-size: 0.95rem;
	font-weight: 500;
	color: hsl(0 0% 98%);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	white-space: nowrap;
}
.aos-hero-bleed .aos-hero-bleed__actions .aos-hero-bleed__alt:hover { text-decoration-thickness: 2px; }
.aos-hero-bleed .aos-hero-bleed__actions :is(.aos-hero-bleed__chip, .aos-hero-bleed__alt):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .aos-hero-bleed .aos-hero-bleed__actions { opacity: 1; animation: none; } }

/* ── Main nav: "Agency OS platform" (2026-10-20, LinkedIn API review) ─────────
   Keep the three words on one line. Where the desktop bar has no room for it
   (under 980px, above the phone menu at 900px) it steps out of the bar; it is
   always in the footer, and the phone menu lists it. */
.nav__list a[href="/aos/"] { white-space: nowrap; }
@media (max-width: 979px) { .nav.nav--simple .nav__list > li:has(> a[href="/aos/"]) { display: none; } } /* beats the header's inline .nav.nav--simple .nav__list > li */