/* Spectruss homepage v12. Loads after css/v11.css on the front page only
   (functions.php, spectruss_v12_home_assets). Tokens, nav, footer, the
   Intelligence tab and the #book form stay v11; everything inside <main
   class="h-home"> is this file. Values from the signed-off Claude Design
   canvas (Oct 28 2026): hero 144px / 56px, section heads 72px, body 18px,
   gold accent, coral on the Speakeasy, purple only as a tint over video. */

.h-home { background: #000; color: #fff; font-size: 18px; line-height: 1.5; }
.h-wrap { max-width: 1280px; margin: 0 auto; padding: 0 80px; }
.h-sec { padding: 160px 0; }
.h-stack { display: flex; flex-direction: column; gap: 24px; }
.h-stack-l { display: flex; flex-direction: column; gap: 64px; }
.h-stack-xl { display: flex; flex-direction: column; gap: 80px; }
.h-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.h-body { margin: 0; color: rgba(255,255,255,.8); line-height: 1.6; max-width: 460px; }

/* ---------- type ---------- */
.h-em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold); position: relative; }
.h-em--coral { color: var(--coral); }
.h-h1 .h-em::after, .h-h2 .h-em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .06em; background: currentColor; opacity: .9; transform: scaleX(0); transform-origin: left; }
.h-h1 { margin: 0; font-size: 144px; line-height: .98; font-weight: 800; letter-spacing: -.035em; max-width: 1180px; text-wrap: balance; }
.h-h2 { margin: 0; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.h-eb { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.h-eb::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.h-eb--coral { color: var(--coral); }
.h-more { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.h-more:hover { color: var(--gold); opacity: 1; }
.h-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 36px; background: var(--gold); color: #000; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--gold); border-radius: 2px; }
.h-btn::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-101%); transition: transform .35s cubic-bezier(.7,0,.2,1); z-index: -1; }
.h-btn:hover { opacity: 1; border-color: #fff; }
.h-btn:hover::before { transform: translateX(0); }
.h-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .2s, color .2s; }
.h-arrow::after { content: "\2192"; transition: transform .25s; }
.h-arrow:hover { color: var(--gold); border-color: var(--gold); opacity: 1; }
.h-arrow:hover::after { transform: translateX(6px); }
.h-links { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 8px; }

/* ---------- scroll progress ---------- */
.h-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); z-index: 55; pointer-events: none; }

/* ---------- hero ---------- */
.h-hero { position: relative; min-height: 900px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 112px; overflow: hidden; background: var(--navy); }
.h-hero__media { position: absolute; inset: 0; overflow: hidden; }
.h-hero__media img, .h-hero__media iframe { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; border: 0; opacity: .9; }
.h-hero__media iframe { opacity: 1; }
.h-hero__media iframe:not([src]) { display: none; }
.h-hero__tint { position: absolute; inset: 0; background: var(--purple); opacity: .55; mix-blend-mode: multiply; }
.h-hero__in { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 40px; }
.h-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.h-hero__sub { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 440px; }
.h-hero__pause { z-index: 2; }
/* Words land one by one as the page paints; the italic underline last. */
.h-h1 > span, .h-h1 > em { display: inline-block; animation: h-word .7s cubic-bezier(.2,.7,.2,1) both; }
.h-h1 > :nth-child(2) { animation-delay: .08s; } .h-h1 > :nth-child(3) { animation-delay: .16s; } .h-h1 > :nth-child(4) { animation-delay: .28s; } .h-h1 > :nth-child(5) { animation-delay: .4s; }
.h-h1 .h-em::after { animation: h-ul .8s cubic-bezier(.7,0,.2,1) .8s both; }
@keyframes h-word { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes h-ul { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- problems ---------- */
#problems .h-wrap { display: flex; flex-direction: column; gap: 36px; }
#problems .h-eb { margin-bottom: 24px; }
.h-prob { margin: 0; font-size: 72px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }

/* ---------- story + timeline ---------- */
.h-tl { position: relative; padding-top: 12px; }
.h-tl__line { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: rgba(255,255,255,.15); }
.h-tl__line::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(1); }
.h-tl__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.h-tl__step { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 36px; }
.h-tl__dot { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
.h-tl__year { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold); }
.h-tl__name { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.h-story__foot { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: end; }
.h-story__p { margin: 0; font-size: 34px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.h-stat { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 24px; }
.h-stat__n { font-size: 96px; line-height: .9; font-weight: 800; letter-spacing: -.04em; color: var(--gold); }
.h-stat__l { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ---------- work tiles ---------- */
.h-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-tile { position: relative; display: block; aspect-ratio: 2 / 1; background: var(--navy); overflow: hidden; color: #fff; cursor: none; }
.h-tile:hover { opacity: 1; }
.h-tile__media { position: absolute; inset: 0; overflow: hidden; }
.h-tile__media img { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: transform .6s ease, filter .35s; }
/* Crops of the live collages. A 2x2 collage cell is shown at double size;
   the right half of a collage at double width; a tablet mockup's screen is
   zoomed to its frame. */
.h-tile--tl .h-tile__media img, .h-tile--tr .h-tile__media img, .h-tile--bl .h-tile__media img, .h-tile--br .h-tile__media img { width: 200%; height: 200%; }
.h-tile--tl .h-tile__media img { left: 0; top: 0; }
.h-tile--tr .h-tile__media img { right: 0; top: 0; }
.h-tile--bl .h-tile__media img { left: 0; bottom: 0; }
.h-tile--br .h-tile__media img { right: 0; bottom: 0; }
.h-tile--right .h-tile__media img { width: 200%; height: 116%; right: 0; top: -8%; }
.h-tile--screen .h-tile__media img { width: 126%; height: 134%; left: -13%; top: -16%; }
.h-tile:hover .h-tile__media img { transform: scale(1.04); filter: brightness(.65); }
.h-tile__tint { position: absolute; inset: 0; background: var(--purple); opacity: 0; mix-blend-mode: multiply; transition: opacity .35s; }
.h-tile:hover .h-tile__tint { opacity: .75; }
.h-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,.6); transition: transform .35s; }
.h-tile:hover .h-tile__cap { transform: translateY(-4px); }
.h-tile__client { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.h-tile__result { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.h-cursor { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); background: var(--gold); color: #000; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 0 18px; height: 44px; display: flex; align-items: center; border-radius: 999px; white-space: nowrap; }
.h-cursor[hidden] { display: none; }

/* ---------- capabilities ---------- */
.h-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 64px; }
.h-caps a { display: flex; align-items: baseline; gap: 18px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); transition: padding-left .25s, color .2s; }
.h-caps a:hover { color: var(--gold); padding-left: 8px; opacity: 1; }
.h-caps__n { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold); flex: none; width: 28px; }

/* ---------- proof ---------- */
#proof { display: flex; flex-direction: column; gap: 120px; padding-bottom: 120px; }
.h-quotes { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.h-quote { margin: 0; display: flex; flex-direction: column; gap: 32px; }
.h-quote[hidden] { display: none; }
.h-quote blockquote { margin: 0; font-size: 40px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; text-wrap: pretty; min-height: 200px; }
.h-quote b { font-weight: 800; }
.h-quote__mark { font-size: 72px; line-height: 0; vertical-align: -.25em; margin-right: 6px; }
.h-quote figcaption { display: flex; align-items: center; gap: 16px; font-size: 16px; color: rgba(255,255,255,.7); }
.h-quote figcaption::before { content: ""; width: 40px; height: 2px; background: var(--gold); }
.h-quotes__nav { display: flex; gap: 12px; }
.h-qb { width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-size: 20px; cursor: pointer; transition: border-color .2s, color .2s; }
.h-qb:hover { border-color: var(--gold); color: var(--gold); }
.h-mq { overflow: hidden; white-space: nowrap; padding: 40px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.h-mq__track { display: inline-flex; gap: 72px; padding-right: 72px; animation: h-mq 46s linear infinite; }
.h-mq:hover .h-mq__track { animation-play-state: paused; }
.h-mq img { width: 120px; height: 120px; object-fit: contain; flex: none; filter: grayscale(1); opacity: .6; transition: opacity .2s, filter .2s; }
.h-mq img:hover { filter: none; opacity: 1; }
@keyframes h-mq { to { transform: translateX(-50%); } }

/* ---------- awards (v11 partial, restyled) ---------- */
.h-awards .v-badges { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; }
.h-awards .v-badges li { margin: 0; padding: 0; display: flex; justify-content: center; }
.h-awards .v-badges img { width: 100%; max-width: 150px; height: 130px; object-fit: contain; opacity: .92; transition: opacity .25s, transform .35s; }
.h-awards .v-badges a:hover img, .h-awards .v-badges img:hover { opacity: 1; transform: translateY(-4px); }

/* ---------- speakeasy ---------- */
.h-eps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.h-ep { display: flex; flex-direction: column; gap: 8px; color: #fff; }
.h-ep:hover { opacity: 1; }
.h-ep img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-top: 3px solid var(--coral); filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
.h-ep:hover img { filter: none; }
.h-ep__k { margin-top: 16px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.h-ep__g { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

/* ---------- city ---------- */
.h-city { position: relative; min-height: 780px; display: flex; align-items: center; padding: 140px 0; background: var(--navy); overflow: hidden; }
.h-city__map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.h-city__fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,35,55,.92) 0%, rgba(21,35,55,.55) 45%, rgba(21,35,55,0) 75%); }
.h-city__in { position: relative; z-index: 1; width: 100%; }
.h-city__card { max-width: 560px; gap: 28px; }

/* ---------- #book: the shared v11 form on the v12 page ---------- */
.h-home + #book, .h-home ~ #book { scroll-margin-top: 84px; }

/* ---------- motion that follows the scroll (Chrome, Edge, Safari 26+).
   Older browsers show the finished state. ---------- */
@supports (animation-timeline: view()) {
	.h-progress { animation: h-prog linear both; animation-timeline: scroll(root); }
	.h-prob { animation: h-focus linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	.h-h2 .h-em::after { animation: h-ul cubic-bezier(.7,0,.2,1) both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
	.h-tl { view-timeline: --h-tl block; }
	.h-tl__line::after { animation: h-draw linear both; animation-timeline: --h-tl; animation-range: cover 8% cover 72%; }
	.h-tl__step { animation: h-step linear both; animation-timeline: --h-tl; animation-range: cover 8% cover 20%; }
	.h-tl__step:nth-child(2) { animation-range: cover 21% cover 33%; }
	.h-tl__step:nth-child(3) { animation-range: cover 34% cover 46%; }
	.h-tl__step:nth-child(4) { animation-range: cover 47% cover 59%; }
	.h-tl__step:nth-child(5) { animation-range: cover 60% cover 72%; }
	.h-tl__dot { animation: h-dot linear both; animation-timeline: --h-tl; animation-range: inherit; }
	.h-tile, .h-caps a, .h-awards .v-badges li, .h-ep, .h-story__foot > *, .h-eb, .h-h2 { animation: h-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; }
	.h-tile:nth-child(odd) { animation-range: entry 20% entry 55%; }
	.h-caps a:nth-child(3n+2) { animation-range: entry 20% entry 55%; }
	.h-caps a:nth-child(3n+3) { animation-range: entry 30% entry 65%; }
	.h-awards .v-badges li:nth-child(2) { animation-range: entry 18% entry 53%; } .h-awards .v-badges li:nth-child(3) { animation-range: entry 26% entry 61%; } .h-awards .v-badges li:nth-child(4) { animation-range: entry 34% entry 69%; } .h-awards .v-badges li:nth-child(5) { animation-range: entry 42% entry 77%; } .h-awards .v-badges li:nth-child(6) { animation-range: entry 50% entry 85%; } .h-awards .v-badges li:nth-child(7) { animation-range: entry 58% entry 93%; }
	.h-hero__media img, .h-hero__media iframe { animation: h-par linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
	.h-city__map { animation: h-par2 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes h-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes h-focus { 0% { opacity: 0; transform: translateY(40px); } 25% { opacity: 1; transform: none; } 60% { opacity: 1; } 100% { opacity: .18; } }
@keyframes h-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* From 0, not a dimmed .18: unlit steps below the fold failed Lighthouse's contrast check. */
@keyframes h-step { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes h-dot { from { transform: scale(.3); background: rgba(255,255,255,.3); } to { transform: scale(1); background: var(--gold); } }
@keyframes h-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes h-par { from { transform: translateY(0); } to { transform: translateY(9%); } }
@keyframes h-par2 { from { transform: translateY(-4%); } to { transform: translateY(4%); } }

@media (prefers-reduced-motion: reduce) {
	.h-h1 > span, .h-h1 > em, .h-h1 .h-em::after, .h-h2 .h-em::after, .h-prob, .h-tl__line::after, .h-tl__step, .h-tl__dot, .h-tile, .h-caps a, .h-awards .v-badges li, .h-ep, .h-story__foot > *, .h-eb, .h-h2, .h-hero__media img, .h-hero__media iframe, .h-city__map, .h-progress { animation: none !important; opacity: 1; transform: none; }
	.h-h1 .h-em::after, .h-h2 .h-em::after { transform: scaleX(1); }
	.h-mq__track { animation: none; }
	.h-tile { cursor: pointer; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 900px) {
	.h-wrap { padding: 0 24px; }
	.h-sec { padding: 96px 0; }
	.h-h1 { font-size: 56px; }
	.h-h2 { font-size: 40px; }
	.h-prob { font-size: 40px; }
	.h-hero { min-height: 720px; padding-bottom: 96px; }
	.h-hero__media img, .h-hero__media iframe { top: 0; height: 100%; }
	.h-tl__line, .h-tl__dot { display: none; }
	.h-tl__row { grid-template-columns: 1fr; gap: 0; }
	.h-tl__step { flex-direction: row; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.15); }
	.h-tl__year { width: 64px; flex: none; font-size: 18px; }
	.h-tl__name { font-size: 26px; }
	.h-story__foot { grid-template-columns: 1fr; gap: 40px; }
	.h-story__p { font-size: 26px; }
	.h-stat__n { font-size: 72px; }
	.h-grid { grid-template-columns: 1fr; }
	.h-tile { cursor: pointer; }
	.h-cursor { display: none; }
	.h-caps { grid-template-columns: 1fr; gap: 0; }
	.h-caps a { font-size: 22px; padding: 18px 0; }
	.h-quote blockquote { font-size: 26px; min-height: 0; }
	.h-quote__mark { font-size: 48px; }
	.h-awards .v-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.h-awards .v-badges img { height: 110px; }
	.h-eps { grid-template-columns: 1fr; }
	.h-city { min-height: 640px; padding: 96px 0; }
	.h-city__fade { background: rgba(21,35,55,.72); }
	#proof { gap: 72px; padding-bottom: 72px; }
}