/* Simple TT5 — scoped skin (front end + editor).
   Design tokens come from theme.json (--wp--preset--*). This file adds parity
   details theme.json can't express and the CSS half of the motion layer.
   Motion CSS only ACTS on elements that carry sa-* classes (added per block),
   so it is inert until those classes exist. */

:root {
	--sa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--sa-reveal-y: 24px;
	--sa-reveal-dur: 0.8s;
}

/* WP constrained layout centres any block narrower than contentSize (margin
   auto). Headlines with a max-width must opt out to stay left-aligned like live. */
.is-layout-constrained > .sa-headline-left { margin-inline-start: 0; margin-inline-end: auto; }

/* ---- Base ---- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }

/* Eyebrow / kicker label: mono, tracked, with a leading rule (matches live) */
.sa-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	color: var(--wp--preset--color--muted);
}
.sa-eyebrow::before {
	content: "";
	width: 16px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Small portfolio-card category label uses Clash Display (the one place it appears) */
.sa-card-label { font-family: var(--wp--preset--font-family--label); font-weight: 500; }

/* Card images must carry an explicit width: WP 6.7+ injects sizes="auto" on
   lazy images, and without CSS width the browser picks the SMALLEST srcset
   candidate (renders 200px thumbnails). */
.sa-portfolio-row img, .sa-blogthumb img { width: 100%; height: auto; }
.sa-portfolio-row figure, .sa-blogthumb { margin: 0 0 0.75rem; }

/* ---- Header / wordmark / nav ---- */
.sa-wordmark a { color: inherit; text-decoration: none; }
.sa-header { position: sticky; top: 0; z-index: 100; }

/* Header background lives HERE, not as a preset class in markup (WP preset
   classes carry !important). Inner pages: dark bar. Front page: transparent,
   floating over the hero, wordmark centered + letter-spaced (matches live). */
body:not(.home) .sa-header { background-color: var(--wp--preset--color--ink); }
body.home .sa-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
body.home .sa-header .sa-wordmark { margin-inline: auto; letter-spacing: 0.3em; font-size: 1rem; }
/* Home: no top hamburger (live has none) — the MENU pill opens the overlay.
   Keep the nav in the DOM (off-screen, not display:none) so its overlay + the
   MENU-pill JS click still work; just hide the open button visually. */
body.home .sa-header .wp-block-navigation__responsive-container-open {
	position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
/* overlay hamburger + close button inherit surface color on the dark header */
.sa-header .wp-block-navigation__responsive-container-open,
.sa-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--surface); }
/* full-screen overlay menu: large centered items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.sa-nav a { text-decoration: none; }

/* ---- Pill-nav strip: FIXED bottom bar, persists through scroll (matches live) ---- */
.sa-pillbar {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 90;
	width: max-content;
	max-width: calc(100vw - 24px);
	background: rgba(241, 241, 241, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 100px;
	padding: 0.45rem 0.9rem;
	gap: 0.2rem 0.95rem;
	box-shadow: 0 6px 24px rgba(23, 23, 23, 0.08);
}
.sa-pill { margin: 0; font-size: 0.72rem; white-space: nowrap; }
.sa-pill a { color: var(--wp--preset--color--dark-2); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45em; }
.sa-pill:not(.sa-pill-contact):not(.sa-pill-home) a::before {
	content: "";
	width: 8px; height: 8px;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: inline-block;
	flex: none;
}
.sa-pill-contact a, .sa-pill-home a { border-radius: 100px; padding: 0.45em 1.1em; }
.sa-pill-contact a { background: var(--wp--preset--color--pale-2); color: var(--wp--preset--color--brand); }
.sa-pill-home a { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }
.sa-pill-menu a { cursor: pointer; }
/* Live's hero bar is compact on all widths: Contact · MENU · home. The service
   links live in the overlay menu (opened by the MENU pill), not in the bar. */
.sa-pill:not(.sa-pill-contact):not(.sa-pill-menu):not(.sa-pill-home) { display: none; }
.sa-pillbar { padding: 0.45rem 0.55rem; gap: 0.15rem; }
.sa-pill-menu a, .sa-pill:not(.sa-pill-contact):not(.sa-pill-home) a { padding: 0.45em 1.1em; }

/* ---- Audience bands + why-us cards + list pills ---- */
.sa-whyus-card { background: var(--wp--preset--color--white); }
.sa-band { overflow: hidden; }
.sa-band-art { margin: 0; }
.sa-band-art img { width: 100%; height: auto; transform: rotate(72deg) scale(1.35); }
.sa-band-businesses .sa-band-art img { transform: rotate(-72deg) scale(1.35); }
/* List markers (from live mobile+desktop evidence): bands use a pale circled "+",
   why-us cards use a small brand square. No pill backgrounds. */
.sa-fitlist { list-style: none; padding-left: 0; }
.sa-fitlist li {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.85em;
	font-size: 0.9rem;
	font-weight: 500;
}
.sa-band .sa-fitlist li::before {
	content: "+";
	width: 1.5em; height: 1.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-4);
	color: var(--wp--preset--color--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9em;
	line-height: 1;
	flex: none;
}
.sa-whyus-card .sa-fitlist li::before {
	content: "";
	width: 8px; height: 8px;
	background: var(--wp--preset--color--brand);
	flex: none;
}
.sa-whyus-card .sa-fitlist li { font-weight: 400; }

/* ---- Service pages ---- */
.sa-hero-inner .wp-block-cover__inner-container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); }
.sa-statsband .wp-block-columns { gap: 0; }
.sa-statsband .wp-block-column { padding-inline: var(--wp--preset--spacing--40); }
.sa-statsband .wp-block-column + .wp-block-column { border-left: 1px solid rgba(241,241,241,0.14); }
.sa-stat-num { font-size: clamp(3rem, 1.6rem + 5vw, 4.75rem); margin: 0 0 0.4em; }
.sa-source { opacity: 0.8; }
/* Equal-height service cards WITHOUT overflow: height:100% made every stacked card
   as tall as its whole column (2-3 cards => 200-300% => cards bled under the next
   section). Flex-grow shares the column height instead. */
.wp-block-column:has(> .sa-svc-card) { display: flex; flex-direction: column; }
.sa-svc-card { flex: 1 1 auto; }
.sa-svc-card:hover { border-color: var(--wp--preset--color--brand) !important; }
/* fit-check "not the right fit" list uses a muted dash marker instead of the brand dot */
.sa-fitlist-no li::before { background: transparent; width: 12px; height: 1px; border-radius: 0; align-self: center; background-color: var(--wp--preset--color--muted); }
.sa-fitlist-no li { background: var(--wp--preset--color--surface); }
.sa-band-dark .sa-fitlist li { background: rgba(255,255,255,0.08); }
@media (max-width: 781px) { .sa-statsband .wp-block-column + .wp-block-column { border-left: none; border-top: 1px solid rgba(241,241,241,0.14); padding-top: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--30); } }

/* ---- Footer (light closer: stacked tagline + sphere orb panel, matches live) ---- */
.sa-footer a { color: inherit; text-decoration: none; opacity: 0.75; transition: opacity 0.2s var(--sa-ease-out); }
.sa-footer a:hover { opacity: 1; }
.sa-footer-orb {
	position: relative;
	height: clamp(220px, 29vw, 420px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sa-footer-orb-img { margin: 0; flex: none; }
.sa-footer-orb-img img { width: clamp(260px, 32vw, 465px); height: auto; display: block; }
.sa-footer-tagline { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem); }
.sa-footer-orb-wordmark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-indent: 0.3em; /* optically recenters letter-spaced text */
}

/* ---- Motion layer (class-driven; gated on html.sa-js so no-JS shows everything) ---- */
html.sa-js .sa-reveal {
	opacity: 0;
	transform: translateY(var(--sa-reveal-y));
	transition: opacity var(--sa-reveal-dur) var(--sa-ease-out),
	            transform var(--sa-reveal-dur) var(--sa-ease-out);
	will-change: opacity, transform;
}
html.sa-js .sa-reveal-left { transform: translateX(calc(-1 * var(--sa-reveal-y))); }
html.sa-js .sa-reveal-right { transform: translateX(var(--sa-reveal-y)); }
html.sa-js .sa-reveal.is-inview { opacity: 1; transform: none; }
/* stagger children via inline --sa-delay set by markup/JS */
html.sa-js .sa-reveal { transition-delay: var(--sa-delay, 0s); }

/* Marquee / logo ticker: JS duplicates the track for a seamless loop */
.sa-marquee { overflow: hidden; }
.sa-marquee__track { display: flex; width: max-content; animation: sa-marquee-scroll var(--sa-marquee-dur, 28s) linear infinite; }
@keyframes sa-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Headline highlighter: brand-blue block draws in behind key words (matches live).
   Text goes white as the fill passes under it. */
.sa-highlight {
	position: relative;
	color: var(--wp--preset--color--white);
	padding: 0.02em 0.18em;
	border-radius: 6px;
	background-image: linear-gradient(var(--wp--preset--color--brand), var(--wp--preset--color--brand));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size 0.7s var(--sa-ease-out) 0.2s, color 0.35s linear 0.35s;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
html.sa-js .sa-highlight:not(.is-inview) { color: inherit; background-size: 0% 100%; }
html.sa-js .sa-highlight.is-inview { background-size: 100% 100%; }
html:not(.sa-js) .sa-highlight { background-size: 100% 100%; }

/* ---- Hover micro-interactions ---- */
.wp-block-button__link { transition: transform 0.25s var(--sa-ease-spring), filter 0.25s var(--sa-ease-out); }
.wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sa-pill a { transition: opacity 0.2s var(--sa-ease-out); }
.sa-pill:not(.sa-pill-contact):not(.sa-pill-home):not(.sa-pill-menu) a:hover { opacity: 0.6; }
.sa-pill-contact a, .sa-pill-home a, .sa-pill-menu a { transition: transform 0.25s var(--sa-ease-spring), filter 0.2s; }
.sa-pill-contact a:hover, .sa-pill-home a:hover, .sa-pill-menu a:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sa-portfolio-row figure { transition: transform 0.4s var(--sa-ease-out); }
.sa-portfolio-row .wp-block-column:hover figure { transform: translateY(-6px); }
.sa-blogthumb img { transition: transform 0.5s var(--sa-ease-out); }
.sa-blogthumb:hover img { transform: scale(1.03); }

/* ============================================================
   SERVICE-PAGE PATTERN v2 — true 1:1 with live (D2b 2026-07-16).
   Values measured from the live Framer CSS (crawl-live/html).
   Scoped so nothing here repaints the approved homepage.
   ============================================================ */

/* Hero: italic closing phrase, hairline-topped sub grid (live .bp-hero-sub) */
.sa-hero-inner h1 em { font-style: italic; color: rgba(255,255,255,0.65); }
.sa-hero-sub { border-top: 1px solid rgba(255,255,255,0.14) !important; padding-top: var(--wp--preset--spacing--40); max-width: 840px; margin-left: 0 !important; margin-right: auto !important; }
.sa-hero-sub p { font-size: 0.97rem; line-height: 1.72; color: rgba(255,255,255,0.6); }
.sa-hero-sub p.sa-eyebrow { color: rgba(255,255,255,0.45); }

/* Keyword marquee strip between hero and stats (live .bp-marquee, bg #171717 h48) */
.sa-kwmarquee { background: var(--wp--preset--color--ink); height: 48px; display: flex; align-items: center; overflow: hidden; }
.sa-kwmarquee .sa-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; animation: sa-marquee-scroll 20s linear infinite; }
.sa-kwmarquee p { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 0; padding: 0 0 0 32px; display: flex; align-items: center; gap: 32px; white-space: nowrap; }
.sa-kwmarquee p::after { content: '·'; color: var(--wp--preset--color--sky); font-size: 16px; }

/* Light stats band (live .bp-stats: page bg, brand-blue numbers, hairline dividers) */
.sa-statsband-light .sa-stat-num { color: var(--wp--preset--color--brand); font-size: clamp(3rem, 5.5vw, 4.5rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: 16px; }
.sa-statsband-light .wp-block-column { border-right: 1px solid rgba(23,23,23,0.09); padding-right: 48px; }
.sa-statsband-light .wp-block-column:last-child { border-right: none; }
.sa-statsband-light .sa-stat-label { font-size: 0.85rem; line-height: 1.55; color: rgba(23,23,23,0.42); max-width: 240px; }
.sa-statsband-light .sa-source { color: rgba(23,23,23,0.25); }
@media (max-width: 781px) {
	.sa-statsband-light .wp-block-column { border-right: none; border-bottom: 1px solid rgba(23,23,23,0.09); padding: 0 0 24px; margin-bottom: 24px; }
	.sa-statsband-light .wp-block-column:last-child { border-bottom: none; margin-bottom: 0; }
}

/* Numbered service rows with hover-reveal detail (live .bp-svc-row) */
.sa-svc-rows { border-top: 1px solid rgba(23,23,23,0.09); }
.sa-svc-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid rgba(23,23,23,0.09); transition: padding 0.3s cubic-bezier(0.16,1,0.3,1); }
.sa-svc-rows > .sa-svc-row { margin: 0; }
.sa-svc-row > * { margin: 0; }
.sa-svc-row:hover { padding-top: 32px; padding-bottom: 32px; }
.sa-svc-num { font-family: var(--wp--preset--font-family--mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(23,23,23,0.28); }
.sa-svc-title { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(18px, 2.5vw, 22px); letter-spacing: -0.02em; line-height: 1.3; }
.sa-svc-detail { font-size: 14px; line-height: 1.65; color: rgba(23,23,23,0.42); max-height: 0; opacity: 0; overflow: hidden; margin-top: 6px; transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; }
.sa-svc-row:hover .sa-svc-detail { max-height: 140px; opacity: 1; margin-top: 6px; }
.sa-svc-row::after { content: '→'; grid-column: 3; color: rgba(23,23,23,0.35); font-size: 20px; line-height: 1; transition: transform 0.3s, opacity 0.3s; }
.sa-svc-row:hover::after { transform: translateX(4px); opacity: 0.7; }
@media (hover: none) { .sa-svc-detail { max-height: none; opacity: 1; } } /* touch: details always visible */

/* Italic pull-quote beside section headings (live .bp-quote) */
.sa-pullquote { font-style: italic; font-size: 0.94rem; line-height: 1.75; color: rgba(23,23,23,0.45); border-left: 1px solid rgba(23,23,23,0.18); padding-left: 24px; }

/* Dark-band checklist: transparent rows, blue dot, hairlines (live .bp-check / .fr-fl) */
.sa-checklist { list-style: none; padding: 0; margin: 0; }
.sa-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.94rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
.sa-checklist li:last-child { border-bottom: none; }
.sa-checklist li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--sky); flex: none; margin-top: 0.55em; }

/* Climax: full-bleed near-black band with ghost outline numeral (live .bp-climax #0A0A0A) */
.sa-climax { position: relative; overflow: hidden; }
.sa-eyebrow.has-text-align-center { justify-content: center; } /* centered eyebrows (climax kicker): center the flex row too */
.sa-climax hr { width: 480px; max-width: 60%; margin-left: auto; margin-right: auto; } /* live: short centered hairline */
.sa-climax-ghost { position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(120px, 22vw, 320px); letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07); pointer-events: none; user-select: none; margin: 0; }

/* Practice row: stone rounded band, copy left / arrow link right (live .bp-practice-row) */
.sa-practice-row { border-radius: 24px; }
.sa-work-link a { color: var(--wp--preset--color--brand); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sa-work-link a::after { content: ' →'; transition: transform 0.3s; display: inline-block; }
.sa-work-link a:hover::after { transform: translateX(3px); }

/* Fit-check v2: eyebrow-led cards, flat hairline items, dot/dash markers (live .bp-fit-*) */
.sa-fitcheck .wp-block-column .sa-eyebrow::before { display: none; } /* live fit labels have no leading rule */
.sa-fitcheck .sa-fitlist { list-style: none; padding: 0; margin: 0; }
.sa-fitcheck .sa-fitlist li { background: transparent; border-radius: 0; display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.94rem; line-height: 1.62; color: rgba(23,23,23,0.72); }
.sa-fitcheck .sa-fitlist li:last-child { border-bottom: none; padding-bottom: 0; }
.sa-fitcheck .sa-fitlist-yes li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--brand); flex: none; margin-top: 0.55em; }
.sa-fitcheck .sa-fitlist-no li::before { content: ''; width: 12px; height: 1px; background: rgba(23,23,23,0.35); border-radius: 0; flex: none; margin-top: 0.8em; }

/* CTA v2: content left / pill button right, sky button (live .bp-cta / .bp-btn) */
.sa-cta .wp-block-columns { align-items: center; }
.sa-cta .wp-block-button__link { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--white); border-radius: 100px; padding: 18px 32px; font-size: 0.9rem; font-weight: 500; }
.sa-cta .wp-block-button__link:hover { background: #1a72ff; box-shadow: 0 8px 32px rgba(51,136,255,0.38); }

/* Inner-page pill bar: full service nav w/ radio dots + active state (live service pages) */
.sa-pillbar-nav .sa-pill:not(.sa-pill-contact):not(.sa-pill-menu):not(.sa-pill-home) { display: block; }
.sa-pill.is-active a { background: var(--wp--preset--color--white); border-radius: 100px; }
.sa-pill.is-active a::before { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
@media (max-width: 781px) {
	/* same :not chain as the desktop unhide rule — equal specificity, later wins */
	.sa-pillbar-nav .sa-pill:not(.sa-pill-contact):not(.sa-pill-menu):not(.sa-pill-home) { display: none; }
}

/* ============================================================
   MOTION v2 — LOUD (G directive 2026-07-16). Scoped to inner
   pages (body.page) + service-page classes; approved home keeps
   its original motion. All effects transform/opacity/filter only.
   ============================================================ */

/* Bigger travel + longer springs on inner pages */
body.page { --sa-reveal-y: 56px; --sa-reveal-dur: 0.95s; }

/* Hero entrance choreography (hero is above the fold: plays on load) */
body.page .sa-hero .sa-eyebrow.sa-reveal { transition-delay: 0.05s; }
body.page .sa-hero .sa-hero-sub.sa-reveal { transition-delay: 0.6s; }

/* Word-rise headlines: motion.js splits heading text into .sa-w spans.
   The split heading opts out of its block-level reveal; words carry it. */
html.sa-js .sa-split.sa-reveal { opacity: 1; transform: none; transition: none; }
html.sa-js .sa-split .sa-w { display: inline-block; opacity: 0; transform: translateY(0.65em); transition: opacity 0.55s var(--sa-ease-out), transform 0.85s var(--sa-ease-out); transition-delay: var(--sa-w-delay, 0s); }
html.sa-js .sa-split.is-inview .sa-w { opacity: 1; transform: none; }
body.page .sa-hero .sa-split .sa-w { transition-delay: calc(0.2s + var(--sa-w-delay, 0s)); } /* H1 rises just after the eyebrow */

/* Stat numbers pop in with blur+scale (counter roll-up in motion.js) */
html.sa-js .sa-statsband-light .sa-reveal .sa-stat-num,
html.sa-js .sa-climax .sa-stat-num.sa-reveal {
	opacity: 0; transform: scale(0.8); filter: blur(10px);
	transition: opacity 0.7s var(--sa-ease-out), transform 0.9s var(--sa-ease-out), filter 0.9s var(--sa-ease-out);
	transition-delay: var(--sa-delay, 0s);
}
html.sa-js .sa-statsband-light .sa-reveal.is-inview .sa-stat-num,
html.sa-js .sa-climax .sa-stat-num.sa-reveal.is-inview { opacity: 1; transform: none; filter: none; }

/* Service rows cascade in from the left (container opts out; rows carry it) */
html.sa-js .sa-svc-rows.sa-reveal { opacity: 1; transform: none; transition: none; }
html.sa-js .sa-svc-rows .sa-svc-row { opacity: 0; transform: translateX(-56px); transition: opacity 0.6s var(--sa-ease-out), transform 0.8s var(--sa-ease-out); transition-delay: var(--sa-delay, 0s); }
html.sa-js .sa-svc-rows.is-inview .sa-svc-row { opacity: 1; transform: none; }

/* Dark-band checklist items cascade */
html.sa-js .sa-band-dark.sa-reveal .sa-checklist li { opacity: 0; transform: translateX(-32px); transition: opacity 0.55s var(--sa-ease-out), transform 0.7s var(--sa-ease-out); transition-delay: var(--sa-delay, 0s); }
html.sa-js .sa-band-dark.sa-reveal.is-inview .sa-checklist li { opacity: 1; transform: none; }

/* Fit-check: cards converge from opposite sides, items rise after */
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal { opacity: 1; transform: none; transition: none; }
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal .wp-block-column { opacity: 0; transition: opacity 0.7s var(--sa-ease-out), transform 0.9s var(--sa-ease-out); }
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal .wp-block-column:first-child { transform: translateX(-64px); }
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal .wp-block-column:last-child { transform: translateX(64px); }
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal.is-inview .wp-block-column { opacity: 1; transform: none; }
html.sa-js .sa-fitcheck .sa-fitlist li { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--sa-ease-out), transform 0.6s var(--sa-ease-out); transition-delay: calc(0.25s + var(--sa-delay, 0s)); }
html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal.is-inview .sa-fitlist li { opacity: 1; transform: none; }

/* Pull-quote: hairline draws down as it enters */
html.sa-js .sa-pullquote { border-left-color: transparent; background-image: linear-gradient(rgba(23,23,23,0.18), rgba(23,23,23,0.18)); background-repeat: no-repeat; background-position: left top; background-size: 1px 0%; transition: background-size 0.9s var(--sa-ease-out) 0.35s; }
html.sa-js .wp-block-columns.sa-reveal.is-inview .sa-pullquote { background-size: 1px 100%; }

/* Climax ghost numeral drifts slowly */
.sa-climax-ghost { animation: sa-ghost-drift 16s ease-in-out infinite alternate; }
@keyframes sa-ghost-drift { from { transform: translateY(-56%); } to { transform: translateY(-44%); } }

/* See-our-work arrow nudges forever */
.sa-work-link a::after { animation: sa-nudge 1.8s var(--sa-ease-out) infinite; }
@keyframes sa-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* Louder CTA button hover */
.sa-cta .wp-block-button__link:hover { transform: translateY(-3px) scale(1.03); }

/* Respect user motion preference: no transforms, everything visible immediately */
@media (prefers-reduced-motion: reduce) {
	html.sa-js .sa-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.sa-marquee__track { animation: none !important; }
	.sa-highlight { transition: none !important; background-size: 100% 100% !important; color: var(--wp--preset--color--white) !important; }
	.wp-block-button__link:hover, .sa-portfolio-row .wp-block-column:hover figure, .sa-blogthumb:hover img { transform: none !important; }
	.sa-svc-row, .sa-svc-detail, .sa-svc-row::after, .sa-work-link a::after { transition: none !important; }
	.sa-svc-detail { max-height: none !important; opacity: 1 !important; } /* no hover animation: show details */
	/* motion v2 states: fully visible, no animation (JS also skips splitting/counters) */
	html.sa-js .sa-split .sa-w,
	html.sa-js .sa-svc-rows .sa-svc-row,
	html.sa-js .sa-band-dark.sa-reveal .sa-checklist li,
	html.sa-js .sa-fitcheck .wp-block-columns.sa-reveal .wp-block-column,
	html.sa-js .sa-fitcheck .sa-fitlist li,
	html.sa-js .sa-statsband-light .sa-reveal .sa-stat-num,
	html.sa-js .sa-climax .sa-stat-num.sa-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
	.sa-climax-ghost, .sa-work-link a::after { animation: none !important; }
	html.sa-js .sa-pullquote { border-left-color: rgba(23,23,23,0.18) !important; background-image: none !important; }
}