/* ============================================================================
Wayfind homepage — Direction A, "Modern Wayfinding"
----------------------------------------------------------------------------
Depends on /wayfind.css for tokens and primitives. Load that first.
This restyles the EXISTING homepage markup. No section was removed and no
copy was rewritten — the classes below are the ones already in index.html.
What changes is the visual language:
out : beige surfaces, serif italic, rounded cards, pill buttons, centred
everything, green as decoration
in : mineral white + near-black, one grotesque with wide weight contrast,
mono for labels and data, a visible grid, ruled rows, rectangles,
asymmetry, jade reserved for signal
========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-weight:400;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%}
/* width:100% matters — nav.site and section.hero are flex parents, and a
margin:0 auto child in a flex row shrinks to its content and centres itself
instead of spanning the row. */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.container-narrow{width:100%;max-width:820px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
section.section,section.signature,section.social,section.quotes,section.ways{padding:var(--section-y) 0}
/* the old decorative blobs have no place in this language */
.orb{display:none!important}
.scroll-hint{display:none}
/* reveal-on-scroll: keep the behaviour, drop the drift */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible,.reveal.visible,.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--sans);font-weight:300;letter-spacing:-.028em;line-height:1.08;color:var(--ink)}
h1{font-size:var(--t-hero);letter-spacing:-.038em;line-height:.97}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:400;letter-spacing:-.018em}
/* the serif italic was the single strongest generic signal — neutralise it */
h1 em,h2 em,h3 em,.lead em,blockquote em{font-style:normal;color:var(--jade-display)}
p{font-size:var(--t-body);line-height:1.62;color:var(--ink-60)}
/* .16em was set when this was 10.5px. At 12px the same tracking spreads the
word far enough that it reads as loose lettering rather than a label, so it
eases as the size grows. The brand makes the same trade at the mobile
breakpoint for the same reason. */
.eyebrow,.lbl,.label{
font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;
text-transform:uppercase;font-weight:500;color:var(--ink-60);
display:inline-flex;align-items:center;gap:11px;
}
.eyebrow .dot{width:22px;height:1px;background:var(--blaze);border-radius:0}
.eyebrow.gold{color:var(--jade-deep)}
/* 70px, previously 52px here plus 18px of heading margin-bottom. The heading
no longer carries that margin, because inside a grid row it made the row
taller than the heading and threw off the paragraph beside it. Same total
space below the header as before. */
.section-header{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;margin-bottom:70px;align-items:start;text-align:left}
/* The paragraph spans both rows of the left column, so with align-items:start
it pins to the top while the heading grows downward past it. On a two-line
heading that is barely visible; on three lines it reads as a mistake, which
is how it was spotted on the Practice Room band. Centred against the
eyebrow-and-heading block instead, so the two columns stay balanced
whatever length the heading runs to.
padding-top:8px went with it: it was nudging the paragraph down to fake the
optical alignment this now does properly, and keeping it would push the
paragraph 8px past centre. */
.section-header p{font-size:16.5px;max-width:54ch;align-self:center}
.section-header .eyebrow{grid-column:1;margin-bottom:14px}
/* Both items in the row centre, not just the paragraph. Whichever is taller
sets the row height, and if only one of them centres the other stays pinned
to the top by the grid's align-items:start. On a one-line heading beside a
three-line paragraph that put the HEADING 15px high, which looks identical
to the bug it was meant to fix. */
.section-header h2{grid-column:1;align-self:center}
/* Row 2 only, not spanning both rows. Spanning made the paragraph centre on
the eyebrow AND the heading together, which sits it about 36px above the
heading and reads as floating between the two. In its own row it centres on
the heading itself, so the two columns line up on the thing the eye actually
uses as the anchor. Whichever of the two is taller sets the row height and
both centre within it. */
.section-header p{grid-column:2;grid-row:2}
/* ── buttons: rectangles ──────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:9px;
font-size:14px;font-weight:500;padding:13px 22px;
border-radius:var(--r-sm);border:1px solid transparent;
text-decoration:none;transition:background .2s,color .2s,border-color .2s;
}
.btn svg{width:16px;height:16px}
.btn-lg{padding:15px 26px;font-size:15px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--jade-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
/* Both used only for "talk to a coach" CTAs (here in final-cta, and in the
coaching section below) — terracotta, not jade, per the brand's people/
tool split. .btn-ivory was written for the old dark coaching card
(light border on dusk); the card is a light terra-wash now, so this is a
solid rewrite, not a token swap. */
.btn-gold{background:var(--terra-deep);color:var(--paper)}
.btn-gold:hover{background:var(--ink)}
.btn-ivory{background:transparent;border-color:var(--terra-deep);color:var(--terra-deep)}
.btn-ivory:hover{background:var(--terra-deep);color:var(--paper)}
/* ── nav: over the photograph ─────────────────────────────────────────── */
nav.site{
position:fixed;top:0;left:0;right:0;z-index:80;
display:flex;align-items:center;
padding:0;
background:linear-gradient(to bottom,rgba(14,16,15,.62),rgba(14,16,15,0));
border:0;
}
nav.site .container{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff}
.brand-mark{width:19px;height:21px;transform:translateY(3px);color:#fff;display:inline-block}
.brand-mark svg{width:100%;height:100%;display:block}
.brand span:not(.sub):not(.brand-mark){font-size:18px;font-weight:600;letter-spacing:-.015em}
.brand .sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-left:2px}
.nav-links{display:flex;align-items:center;gap:28px}
/* min-height 24px is WCAG 2.2 SC 2.5.8 (Target Size, Minimum). A 14px link
makes a 22px-tall hit area on its own; inline-flex + min-height grows the
target without moving the text. Applies here, in .foot-list and in
.foot-bottom for the same reason.
The direct-child combinator matters: without it this also matched the
dropdown links two levels down (.nav-links .nav-drop .nav-drop-menu a),
which sit on a white panel — white text on white was invisible. */
.nav-links>a:not(.nav-cta){display:inline-flex;align-items:center;min-height:24px;color:rgba(255,255,255,.84);text-decoration:none;font-size:14px}
.nav-links>a:not(.nav-cta):hover{color:#fff}
.nav-links>a:not(.nav-cta)::after{display:none}
.nav-cta{
background:#fff!important;color:var(--ink)!important;
border-radius:var(--r-sm);padding:12px 20px;font-size:14px;font-weight:500;
text-decoration:none;white-space:nowrap;transition:background .2s;
}
.nav-cta:hover{background:var(--jade)!important}
.nav-drop{position:relative}
.nav-drop-btn{
display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
min-height:24px;
cursor:pointer;font:inherit;font-size:14px;color:rgba(255,255,255,.84);
}
.nav-drop-btn:hover{color:#fff}
.nav-drop-btn svg{width:13px;height:13px;transition:transform .18s}
.nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-drop-menu{
position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
min-width:252px;padding:6px;background:var(--paper);
border:1px solid var(--rule);border-radius:var(--r-md);
box-shadow:0 18px 44px -14px rgba(20,20,20,.28);
display:flex;flex-direction:column;z-index:90;
}
.nav-drop-menu[hidden]{display:none}
.nav-drop-menu a{padding:9px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-drop-menu a:hover{background:var(--jade-wash);color:var(--jade-deep)}
.nav-drop-sep{height:1px;background:var(--rule);margin:5px 4px}
/* ── HERO: one static photograph, full bleed ──────────────────────────── */
section.hero{
position:relative;min-height:94vh;
display:flex;align-items:flex-end;
padding:0 0 72px;margin:0;overflow:hidden;color:#fff;
}
.hero-media{position:absolute;inset:0;z-index:0;background:#1b1c18}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}
/* Two scrim layers, both needed:
1. directional — dense left where the type sits, clear right over the view;
2. bottom-up — the fine print and assurance row sit low, where layer 1 has
already thinned out. Over the sunlit floor in this photograph that left
the 10.5px fine print at 4.14:1, under the 4.5:1 it needs. With the
bottom layer it measures comfortably clear. Re-check both if the hero
photograph is ever swapped. */
/* Warm espresso-brown, not neutral black — a true-black scrim over an
inspiration-brand hero reads as noir/ominous rather than golden-hour. The
hue is sampled from the photograph's own shadow tones so the overlay reads
as dusk light, not an imposed filter. Also backed off in density (was up
to .92) so more of the actual photo carries the mood. Re-run
scratchpad/pixcontrast.mjs after any further change here. */
section.hero::before{
content:'';position:absolute;inset:0;z-index:1;
background:
linear-gradient(to top,rgba(26,18,12,.8) 0%,rgba(26,18,12,.38) 18%,rgba(26,18,12,0) 42%),
linear-gradient(100deg,rgba(28,20,13,.87) 0%,rgba(28,20,13,.72) 34%,rgba(28,20,13,.5) 62%,rgba(28,20,13,.26) 100%);
}
.hero-grid{position:relative;z-index:2;display:block;text-align:left;max-width:none;gap:0}
/* 62ch resolves against the 16px root font, not the 95px headline, so it
capped the column at 568px and shattered the h1. Sized in px against the
photograph instead: the concrete wall runs to roughly x=850 at 1440, so the
copy can take 780 without crowding the figure. */
.hero-copy{max-width:780px}
.hero-eyebrow{color:#fff;margin-bottom:26px}
.hero-eyebrow .dot{background:var(--jade)}
/* Slightly under the global --t-hero cap so the longer line ("Find work that
fits.") clears 780px and the explicit
controls the break rather than
the container edge. */
.hero h1{color:#fff;font-size:clamp(40px,5.3vw,78px);max-width:none}
.hero h1 em{color:var(--jade);font-style:normal}
.hero h1 br{display:block}
.hero .lead{
margin-top:26px;font-size:var(--t-lede);line-height:1.6;
color:rgba(255,255,255,.87);max-width:46ch;
}
.hero .lead .lead-line{display:block}
.hero .lead .accent{color:#fff}
.hero .lead em{color:var(--jade)}
.hero-ctas{display:flex;gap:12px;margin:34px 0 0;flex-wrap:wrap}
.hero-ctas .btn-primary{background:#fff;color:var(--ink)}
.hero-ctas .btn-primary:hover{background:var(--jade);color:var(--ink)}
.hero-ctas .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.hero-ctas .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-fineprint{
margin-top:22px;font-family:var(--mono);font-size:var(--t-label);
letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hero-fineprint .dot{
display:inline-block;width:3px;height:3px;border-radius:50%;
background:rgba(255,255,255,.5);margin:0 12px;vertical-align:3px;
}
.hero-trust{
margin:24px 0 0;max-width:52ch;font-family:var(--sans);font-style:normal;
font-size:14px;color:rgba(255,255,255,.68);line-height:1.55;
}
.hero-assurances{
list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:26px;
}
.hero-assurances li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.8)}
.hero-assurances svg{width:18px;height:18px;flex:none;color:var(--jade)}
/* ── hero, light variant ──────────────────────────────────────────────────
Trying this against the sunlit concrete-room photo: rather than darkening
a bright image down to carry white text, use the photo's own daylight and
put dark ink text on it instead, the same text colour the rest of the page
uses. The scrim's job changes from "make it dark enough for white" to
"even out the diagonal light beams enough to guarantee contrast" — much
less overlay is needed. Toggle by adding/removing "hero--light" on
section.hero; nothing here touches the default dark treatment above. */
section.hero.hero--light{color:var(--ink)}
.hero--light.hero::before{
background:
linear-gradient(to top,rgba(255,252,246,.58) 0%,rgba(255,252,246,.32) 16%,rgba(255,252,246,.08) 40%),
linear-gradient(100deg,rgba(255,252,246,.66) 0%,rgba(255,252,246,.46) 32%,rgba(255,252,246,.2) 58%,rgba(255,252,246,.06) 82%);
}
.hero--light .hero-eyebrow{color:var(--ink-80)}
.hero--light .hero-eyebrow .dot{background:var(--jade-deep)}
.hero--light h1{color:var(--ink)}
.hero--light h1 em{color:var(--jade-deep)}
.hero--light .lead{color:var(--ink-80)}
.hero--light .lead .accent{color:var(--ink)}
.hero--light .lead em{color:var(--jade-deep)}
.hero--light .hero-ctas .btn-primary{background:var(--ink);color:var(--paper)}
.hero--light .hero-ctas .btn-primary:hover{background:var(--jade-deep);color:var(--paper)}
.hero--light .hero-ctas .btn-ghost{border-color:var(--ink);color:var(--ink)}
.hero--light .hero-ctas .btn-ghost:hover{background:var(--ink);color:var(--paper)}
.hero--light .hero-fineprint{color:var(--ink-80)}
.hero--light .hero-fineprint .dot{background:var(--ink-40)}
.hero--light .hero-assurances li{color:var(--ink-80)}
.hero--light .hero-assurances svg{color:var(--jade-deep)}
/* the rotating result preview is retired from the hero — it now has its own
section further down, where it can be read properly */
.hero-visual{display:none}
/* ── metrics: figures on a rule, not a card ───────────────────────────── */
section.metrics-ribbon{
padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.metrics-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-bottom:1px solid var(--rule);text-align:left;
}
.metric{
display:flex;flex-direction:column;gap:6px;align-items:flex-start;
padding:26px 26px 26px 0;border-right:1px solid var(--rule);
}
.metric:last-of-type{border-right:0}
.metric:not(:first-of-type){padding-left:26px}
.metric .num{
font-family:var(--sans);font-weight:300;font-size:clamp(28px,3.2vw,40px);
color:var(--ink);letter-spacing:-.03em;line-height:1;
}
.metric .num em{font-style:normal;color:inherit;font-size:.58em;opacity:.55;margin-left:2px}
.metric .label{
font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-40);font-weight:500;
}
.metric-divider{display:none}
/* ── the grid, made visible ───────────────────────────────────────────── */
.ways,.social,#how,#faq{position:relative}
.ways::before,#how::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:repeating-linear-gradient(to right,transparent,transparent calc(8.3333% - 1px),var(--grid-line) calc(8.3333% - 1px),var(--grid-line) 8.3333%);
}
/* ── ways in: ruled rows, not cards ───────────────────────────────────── */
.ways-features{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:0;border-top:1px solid var(--ink)}
.feature-card{
display:flex;flex-direction:column;background:transparent;border:0;border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);border-radius:0;padding:30px 30px 30px 0;box-shadow:none;
}
.feature-card:last-child{border-right:0;padding-left:30px}
.feature-visual{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 12px;margin-bottom:22px}
.feature-visual svg{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
.feature-visual text{font-family:var(--mono);font-size:19px;fill:var(--ink-60);letter-spacing:.02em;text-transform:none}
.feature-visual .ik-core{font-family:var(--mono);font-size:20px;font-style:normal;fill:var(--jade-deep);letter-spacing:.14em}
.feature-visual .fa-row-name{font-family:var(--sans);font-size:22px;font-weight:500}
.feature-visual .fa-row-arch{font-family:var(--mono);font-style:normal;font-size:16px}
.feature-visual .fa-row-pct{font-family:var(--sans);font-size:32px;font-weight:300}
.feature-visual .fa-legend{font-family:var(--mono);font-size:15px;fill:var(--ink-40)}
/* ── diagram palettes ─────────────────────────────────────────────────────
Both SVGs carry hard-coded fill="..." presentation attributes from the old
beige/olive scheme. A CSS `fill` outranks a presentation attribute, so we
recolour here rather than editing 30 attributes in the markup.
That same precedence is what broke the heat map before: `.feature-visual
text{fill:var(--ink-60)}` silently overrode every fill="#FCFAF6" on the
dark rows, leaving near-black text on a dark bar. Any rule that sets a
blanket text fill MUST be followed by per-row fills. Do not delete these. */
/* Ikigai: one hue, four overlapping fields. The centre reads darkest because
four translucent layers stack there — the diagram's meaning drawn by the
geometry rather than by four unrelated colours. */
.feature-visual .ik-circles circle{fill:var(--jade);opacity:.28}
.feature-visual .ik-circles + circle{fill:var(--paper);opacity:1}
.feature-visual .ik-circles ~ circle[stroke]{stroke:var(--jade-deep);opacity:.55}
.feature-visual .ik-circles ~ g[transform]{stroke:var(--jade-deep)}
.feature-visual .ik-lbl{fill:var(--ink-60)}
/* Fear Audit: a five-step intensity ramp on --blaze. Every step is paired
with a text fill that clears 4.5:1 against it — verified, not assumed. */
.fa-heat rect{rx:3px}
.fa-heat g:nth-of-type(1) rect{fill:#8F3512} /* white text — 7.8:1 */
.fa-heat g:nth-of-type(2) rect{fill:#C2521F} /* white text — 6.1:1 */
.fa-heat g:nth-of-type(3) rect{fill:#E08A5C} /* dark text — 6.2:1 */
.fa-heat g:nth-of-type(4) rect{fill:#F0BFA4} /* dark text — 9.6:1 */
.fa-heat g:nth-of-type(5) rect{fill:#F9E5DA} /* dark text — 12.4:1 */
.fa-heat g:nth-of-type(1) text,
.fa-heat g:nth-of-type(2) text{fill:#FFFFFF}
.fa-heat g:nth-of-type(3) text,
.fa-heat g:nth-of-type(4) text,
.fa-heat g:nth-of-type(5) text{fill:#3A1D0C}
.feature-body{display:flex;flex-direction:column;flex:1}
.feature-body h3{font-size:24px;margin-bottom:10px}
.feature-body p{font-size:15px;line-height:1.62;margin-bottom:18px}
.feature-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.feature-list li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.feature-list svg{width:16px;height:16px;flex:none;color:var(--jade-deep)}
.feature-body .btn{align-self:flex-start;margin-top:auto}
.ways-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--rule)}
.way-card{
display:flex;flex-direction:column;background:transparent;border:0;
border-right:1px solid var(--rule);border-radius:0;padding:26px 24px 24px 0;
text-decoration:none;transition:background .2s;
}
.way-card:not(:first-child){padding-left:24px}
.way-card:last-child{border-right:0}
.way-card:hover{background:var(--jade-wash);transform:none;box-shadow:none}
.way-icon{
width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:16px;
background:transparent;border:1px solid var(--rule-strong);color:var(--ink);
}
.way-icon svg{width:17px;height:17px}
.wi-blue,.wi-green,.wi-gold,.wi-forest{background:transparent;color:var(--ink)}
.way-card h4{font-size:17px;font-weight:500;letter-spacing:-.012em;margin-bottom:8px}
.way-card p{font-size:13.8px;line-height:1.6;margin-bottom:14px;flex:1}
.way-meta{
display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-40);margin-bottom:14px;font-weight:500;
}
.way-cta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--jade-deep)}
.way-cta svg{width:15px;height:15px;transition:transform .2s}
.way-card:hover .way-cta svg{transform:translateX(3px)}
/* ── testimonials ─────────────────────────────────────────────────────── */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
/* column flex + margin-top:auto on .author pins all three attributions to a
shared baseline; without it each one floats up under a shorter quote */
.testimonial{
background:transparent;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
border-radius:0;padding:28px 28px 26px 0;box-shadow:none;
display:flex;flex-direction:column;
}
.testimonial:not(:first-child){padding-left:28px}
.testimonial:last-child{border-right:0}
.quote-mark{display:none}
.testimonial blockquote{font-family:var(--sans);font-style:normal;font-size:16.5px;line-height:1.6;color:var(--ink);font-weight:400}
.author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:22px}
.avatar{
width:34px;height:34px;border-radius:var(--r-sm);background:var(--ink);color:var(--paper);
display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;flex:none;
}
.author-name{font-size:14px;font-weight:500;color:var(--ink)}
.author-role{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.trust-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.trust-row span{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.trust-row svg{width:15px;height:15px;color:var(--jade-deep)}
/* ── quote carousel: full-bleed photographic beat ─────────────────────── */
section.quotes{padding:0}
section.quotes .container{padding:0;max-width:none}
.quote-carousel{
position:relative;max-width:none;margin:0;border-radius:0;overflow:hidden;
aspect-ratio:auto;height:64vh;min-height:400px;background:var(--dark);
}
.quote-carousel>img.qc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block}
.qc-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(14,16,15,.90) 0%,rgba(14,16,15,.62) 46%,rgba(14,16,15,.30) 100%)}
.qc-stage{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:flex-start;text-align:left;padding:0 var(--gutter);box-sizing:border-box}
.qc-inner{max-width:1440px;width:100%;margin:0 auto}
.qc-text{
font-family:var(--sans);font-style:normal;font-weight:300;
font-size:clamp(22px,3vw,40px);line-height:1.28;letter-spacing:-.025em;
color:#fff;text-shadow:none;margin:0 0 18px;max-width:24ch;transition:opacity .6s ease;
}
.qc-attr{
font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.62);font-weight:500;text-shadow:none;margin:0;transition:opacity .6s ease;
}
.qc-prog-track{margin:26px 0 0;height:1px;width:120px;background:rgba(255,255,255,.22);border-radius:0;overflow:hidden}
.qc-prog{height:100%;background:var(--jade)}
/* ── carousel controls ────────────────────────────────────────────────────
Geometry is shared; colour is not. Two carousels use these classes — the
quote carousel sits on a photograph and the Perfect Day preview sits on
paper — so the skin is scoped per surface below. Keep them separate: a
single white-on-transparent skin disappears entirely on the light card. */
.car-nav{
position:absolute;top:auto;transform:none;z-index:4;
display:flex;align-items:center;justify-content:center;
border:1px solid;border-radius:var(--r-sm);
background:transparent;cursor:pointer;box-shadow:none;transition:background .2s,color .2s;
}
.car-nav svg{width:18px;height:18px}
.car-dots{position:absolute;left:auto;z-index:4;display:flex;justify-content:flex-end;gap:7px}
.car-dot{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.car-dot::before{content:'';width:18px;height:1px;border-radius:0;box-shadow:none;transition:background .2s}
/* on photography */
.quote-carousel .car-nav{bottom:34px;width:44px;height:44px;border-color:rgba(255,255,255,.4);color:#fff}
.quote-carousel .car-nav:hover{background:#fff;color:var(--ink)}
.quote-carousel .car-nav.prev{left:var(--gutter)}
.quote-carousel .car-nav.next{left:calc(var(--gutter) + 52px);right:auto}
.quote-carousel .car-dots{right:var(--gutter);bottom:46px}
.quote-carousel .car-dot::before{background:rgba(255,255,255,.38)}
.quote-carousel .car-dot[aria-current="true"]::before{background:var(--jade)}
/* ── coaching: terracotta wash — the people, not the tool ─────────────────
Terracotta is the brand's signal for "a human is on the other end of
this" (coaching, testimonials, team); jade stays for what a person does
alone. Replaces the old --dusk dark treatment — a light warm wash reads
as inviting rather than heavy, and keeps every accent in this component
on one hue per the brand's "one accent per component" rule. No jade left
in this section on purpose, including the buttons (see .btn-gold below,
shared with the final-cta section's coaching button for the same reason).
Contrast verified against --terra-wash specifically, not assumed from the
brand table's --paper measurements: terra-deep is 4.80:1 here. */
.coaching-wrap{margin:0 auto;max-width:none;padding:0}
.coaching-card{
position:relative;background:var(--terra-wash);color:var(--ink);border-radius:0;
padding:var(--section-y) var(--gutter);overflow:hidden;box-shadow:none;
display:grid;grid-template-columns:300px minmax(0,700px);gap:56px;align-items:center;
justify-content:center;
max-width:var(--max);margin:0 auto;
}
.coaching-card::before,.coaching-card::after{display:none}
.coaching-photo{position:relative;z-index:1;margin:0}
.coaching-photo img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:none;filter:saturate(.96)}
.coaching-photo figcaption{margin-top:14px;line-height:1.45}
.coaching-photo figcaption b{display:block;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink)}
.coaching-photo figcaption span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--terra-deep)}
.coaching-content{position:relative;z-index:1;max-width:none}
/* was --jade at 2.3:1, a fills-only token used as text — a pre-existing
contrast failure carried forward by the old dark treatment's own text
color doing the compensating. Fixed in the same pass as the palette swap. */
.coaching-card .eyebrow{color:var(--terra-deep)}
.coaching-card .eyebrow .dot{background:var(--terra-deep)}
.coaching-card h2{color:var(--ink)}
.coaching-card h2 em{color:var(--terra-deep);font-style:normal}
.coaching-card p{color:var(--ink-60);font-size:16.5px;line-height:1.68}
.coaching-points{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:11px;max-width:62ch}
.coaching-points li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;color:var(--ink-60)}
.coaching-points svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--terra-deep)}
.coaching-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* scoped so it outweighs `.coaching-card p` — see the note on .results-note.
--ink-40 measured 4.51:1 here, technically past 4.5 but too thin a margin
to trust against rounding; --ink-60 (6.10:1) has real headroom. */
.coaching-card .coaching-arc-note{margin-top:20px;font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--ink-60);line-height:1.6;text-transform:none}
/* ── how it works: the journey ────────────────────────────────────────── */
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
/* The outer steps drop their outer padding to sit flush with the gutter, so
they must double the inner side or their artwork renders 420px against the
middle column's 394px and the three labels stop lining up. */
.journey-step{position:relative;padding:0 26px}
.journey-step:first-child{padding-left:0;padding-right:52px}
.journey-step:last-child{padding-left:52px;padding-right:0}
.journey-marker{position:relative;height:40px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:24px}
.journey-marker::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--rule-strong);transform:translateY(-50%)}
.journey-step:last-child .journey-marker::before{right:auto;width:40px}
.journey-dot{
position:relative;z-index:1;width:40px;height:40px;border-radius:var(--r-sm);
background:var(--paper);border:1px solid var(--rule-strong);color:var(--ink);
display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;
}
.journey-step:last-child .journey-dot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.journey-art{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);margin-bottom:20px;overflow:hidden}
.journey-art svg{width:100%;height:auto;display:block}
/* The three step illustrations still carry the old scheme's literal hex
fills. Remapping by attribute value keeps the artwork markup untouched —
if a colour is ever added to these SVGs it will show up unmapped rather
than being silently swept into the wrong hue. */
.journey-art [fill="#7FA087"]{fill:var(--jade)}
.journey-art [stroke="#7FA087"]{stroke:var(--jade)}
.journey-art [fill="#2F6B3F"]{fill:var(--jade-deep)}
.journey-art [stroke="#2F6B3F"]{stroke:var(--jade-deep)}
.journey-art [fill="#F2E8D0"]{fill:var(--jade-wash)}
/* the sun in steps 1 and 2 is a form, not a marker */
.art-1 [fill="#C6A876"],.art-2 [fill="#C6A876"]{fill:var(--jade-deep)}
/* step 3's flag is the destination — the one thing --blaze exists for */
.art-3 [fill="#C6A876"]{fill:var(--blaze)}
.art-3 [stroke="#A88756"]{stroke:var(--blaze)}
.journey-label{
display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
text-transform:uppercase;color:var(--jade-deep);font-weight:500;margin-bottom:8px;
}
.journey-body h3{font-size:20px;margin-bottom:10px}
.journey-body p{font-size:14.5px;line-height:1.62}
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-wrap{max-width:920px;margin:0 auto;border-top:1px solid var(--ink)}
.faq-group-label{
font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-40);font-weight:500;margin:38px 0 10px;display:block;
}
.faq-item{border-bottom:1px solid var(--rule);background:transparent;border-radius:0;margin:0}
/* The flex row must be itself, not .faq-q — .faq-q is a span INSIDE
summary. Styling the span left summary as display:list-item (default
triangle, children stacked) and left .faq-icon an inline span, where
width/height do not apply, so its SVG expanded to the default 300x150 and
each item grew to ~1000px tall. Size the svg explicitly as well. */
.faq-item summary{
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
padding:20px 0;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-q{font-size:17px;font-weight:400;color:var(--ink);line-height:1.45}
.faq-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:4px;color:var(--ink-40);transition:transform .2s}
.faq-icon svg{width:16px;height:16px;display:block}
.faq-item[open] .faq-icon{transform:rotate(45deg);color:var(--jade-deep)}
.faq-a{padding:0 0 22px}
.faq-a p{font-size:15.5px;line-height:1.68;margin-bottom:12px}
.faq-a p:last-child{margin-bottom:0}
.faq-price{font-family:var(--mono);font-size:.94em;color:var(--jade-deep);font-weight:500}
/* ── final CTA ────────────────────────────────────────────────────────── */
section.final-cta{padding:var(--section-y) 0;border-top:1px solid var(--ink);text-align:left}
/* Left-aligned type inside a centred 820px column: stretching this to --max
left the whole right half of the section empty. */
section.final-cta .container-narrow{max-width:820px;padding:0 var(--gutter)}
section.final-cta h2{font-size:clamp(32px,4vw,54px);max-width:18ch}
section.final-cta h2 em{color:var(--jade-display);font-style:normal}
section.final-cta p{margin-top:22px;font-size:var(--t-lede);max-width:52ch}
.ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
/* .final-or is a , so `section.final-cta p` above outranks an unscoped
.final-or and rendered this divider label at 20px — louder than the body
copy it divides. Scoped to win. */
section.final-cta .final-or{
margin:36px 0 20px;font-family:var(--mono);font-style:normal;font-size:var(--t-label);
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
display:flex;align-items:center;gap:16px;max-width:420px;
}
.final-or::before,.final-or::after{content:'';flex:1;height:1px;background:var(--rule)}
/* ── footer ───────────────────────────────────────────────────────────── */
footer.site{background:var(--paper);border-top:1px solid var(--rule);padding:52px 0 60px;color:var(--ink-60)}
footer.site .container{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-brand .brand{color:var(--ink)}
.foot-brand .brand-mark{color:var(--jade-deep)}
.foot-brand .brand .sub{color:var(--ink-40)}
.tagline{margin-top:14px;font-size:14px;max-width:32ch;line-height:1.6}
/* The column heads are