/* ============================================================
SEQUENCE & CO. — one firm, two engines (Wealth RIA + Business & Co.)
Deep Rolex-green + metallic gold. Real logo. CSP-safe.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
:root {
--green-canvas: #05130F;
--green-deep: #071F1A;
--green-surface:#0B3D33;
--green-mid: #0D4C3C;
--logo-green: #013C38;
--gold: #C69B3C;
--gold-champ: #E4C87A;
--gold-small: #D9B45B;
--gold-sheen: linear-gradient(135deg,#8A6A24 0%,#E4C87A 40%,#F3E3AE 52%,#C69B3C 68%,#7C5A1E 100%);
--ivory: #F4EADE;
--sage: #A9BDB2;
--sage-dim: #8FA69B;
--hairline: rgba(198,155,60,0.28);
--hairline-faint: rgba(244,234,222,0.10);
--glow-gold: radial-gradient(ellipse at 50% 0%, rgba(228,200,122,0.12), transparent 62%);
--logo: url("/assets/img-1.png"); --logo-mark: url("/assets/img-2.png");
--font-display: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, "Playfair Display", Georgia, serif;
--font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "URW Palladio L", P052, Georgia, "Times New Roman", serif;
--font-sans: Optima, Candara, "Gill Sans", "Gill Sans MT", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", "Courier New", ui-monospace, monospace;
--measure: 62ch;
--pad-x: clamp(20px, 5vw, 64px);
--sec-y: clamp(72px, 10vh, 128px);
color-scheme: dark;
}
/* ============================================================
LIGHT THEME · html[data-theme="light"]
The palette is the one already shipping in the Sequence app: ivory ground
#F4EADE, white cards, ink #0A1C17, gold on ivory. This is a TOKEN REMAP,
not a restyle — every component follows its tokens automatically. Only the
handful of rules that hardcode an rgba() need the explicit overrides that
follow, and each one is here because it was measured to break.
============================================================ */
html[data-theme="light"] {
--green-canvas: #F4EADE; /* page ground — the app's brand ivory */
--green-deep: #EFE7D8; /* the deeper band */
--green-surface:#FFFFFF; /* raised surfaces / cards */
--green-mid: #FBF7EF;
--logo-green: #EFE7D8;
/* The dark #C69B3C is 2.3:1 on ivory. The app's light gold #8A6A24 measures
4.24:1 — still short of AA at the sizes this token paints (0.78rem
eyebrows, 0.72rem tags), so it is taken one step deeper: #80601F is
4.89:1 on #F4EADE and 4.74:1 on the #EFE7D8 band, and reads identically. */
--gold: #80601F;
--gold-champ: #6E5219;
--gold-small: #80601F;
/* Every stop is dark enough to pass 4.5:1 as TEXT on ivory (the ramp paints
.em-gold inside .hero-sub, which is normal-size body copy) AND dark enough
to carry white text on top of it (.btn:hover). */
--gold-sheen: linear-gradient(135deg,#463209 0%,#6A4E15 40%,#7F5F1F 52%,#5E4412 68%,#3A2908 100%);
--ivory: #0A1C17; /* this token carries TEXT — on light it is the ink */
--sage: #4A5B54; /* 6.00:1 on #F4EADE */
--sage-dim: #55655E; /* 5.12:1 on #F4EADE, 4.96:1 on the #EFE7D8 band */
--hairline: rgba(138,106,36,0.30);
--hairline-faint: rgba(10,28,23,0.10);
--glow-gold: radial-gradient(ellipse at 50% 0%, rgba(198,155,60,0.09), transparent 62%);
color-scheme: light;
}
/* The mark is a gold PNG built for a dark ground; a filter is the only way to
deepen it without shipping a second image. */
html[data-theme="light"] .brand-full,
html[data-theme="light"] .brand-emblem { filter: brightness(0.80) saturate(1.3) contrast(1.05); }
html[data-theme="light"] .watermark { opacity: 0.09; }
/* The shared SVG gold gradient paints every icon and the firm diagram's
links; its pale mid-stops vanish on ivory. stop-color is a CSS property. */
html[data-theme="light"] #goldGrad stop:nth-child(1) { stop-color: #5A4212; }
html[data-theme="light"] #goldGrad stop:nth-child(2) { stop-color: #8A6A24; }
html[data-theme="light"] #goldGrad stop:nth-child(3) { stop-color: #9A7628; }
html[data-theme="light"] #goldGrad stop:nth-child(4) { stop-color: #7C5A1E; }
html[data-theme="light"] #goldGrad stop:nth-child(5) { stop-color: #4A3510; }
/* ---- rgba() literals that cannot follow a token ----
Gold tints — rgba(198,155,60,*) and rgba(228,200,122,*) — read on both
grounds and are left alone. These three families do not: */
/* rgba(5,19,15,*) — near-black green: nav backdrop, node chips, overlays */
html[data-theme="light"] .nav.scrolled { background: rgba(244,234,222,0.88); }
html[data-theme="light"] .node { background: rgba(255,255,255,0.86); }
html[data-theme="light"] .node-center { background: linear-gradient(180deg, #FFFFFF, #FBF7EF); box-shadow: 0 18px 44px -26px rgba(10,28,23,0.35); }
html[data-theme="light"] .division { background: linear-gradient(180deg, #FFFFFF, rgba(255,255,255,0.55)); }
/* rgba(13,76,60,*) — green surface tints: become white cards on the ivory */
html[data-theme="light"] .duo-card { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.42)); }
html[data-theme="light"] .also-card { background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.40)); }
html[data-theme="light"] .score-card{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.42)); }
html[data-theme="light"] .modules-h { background: rgba(255,255,255,0.72); }
html[data-theme="light"] .aurora .a2 { background: radial-gradient(circle, rgba(198,155,60,0.16), transparent 68%); }
/* rgba(244,234,222,*) — ivory tints, invisible on an ivory ground */
html[data-theme="light"] .score-dial { background: conic-gradient(var(--gold) calc(var(--v)*1%), rgba(10,28,23,0.10) 0); }
/* The hero pins a literal #06231e mid-stop; on ivory that prints a dark ring. */
html[data-theme="light"] .hero { background: radial-gradient(135% 115% at 50% 33%, #FFFFFF 0%, #FDFAF4 45%, #F6EFE3 74%, var(--green-canvas) 100%), var(--glow-gold); }
/* Gold glows read as nothing on ivory — give the lift real shadow weight. */
html[data-theme="light"] .duo-card:hover { box-shadow: 0 22px 54px -34px rgba(10,28,23,0.45); }
html[data-theme="light"] .track-step.active .dot { box-shadow: 0 0 10px rgba(128,96,31,0.45); }
html[data-theme="light"] .portrait { box-shadow: 0 0 0 6px rgba(128,96,31,0.10), 0 22px 44px -24px rgba(10,28,23,0.40); }
/* The 1px black emboss under gold-sheen text is a dark-ground device. */
html[data-theme="light"] .em-gold,
html[data-theme="light"] .phase.lit h3 .v,
html[data-theme="light"] .area.in-view .n,
html[data-theme="light"] .stat .figure { filter: none; }
html[data-theme="light"] .area .n { -webkit-text-stroke-color: rgba(128,96,31,0.55); }
/* .btn rests on a near-transparent gold wash and fills with --gold-sheen on
hover, painting --green-canvas as its ink — which on light is the ivory
ground itself. White ink on the deepened ramp measures 5.5:1 at its
lightest stop. */
html[data-theme="light"] .btn { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35)); }
html[data-theme="light"] .btn:hover { color: #FFFFFF; background: var(--gold-sheen); box-shadow: 0 8px 26px -12px rgba(10,28,23,0.35); }
/* Form controls: the app's light input ground, #FBF7EF. */
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form textarea { background-color: #FBF7EF; }
html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form select:focus,
html[data-theme="light"] .contact-form textarea:focus { background-color: #FFFFFF; }
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form select:focus { background-image: url("data:image/svg+xml;utf8,"); }
/* #E5927F measures 2.0:1 on ivory */
html[data-theme="light"] .cf-status.err { color: #A32E17; }
/* .grain (fixed, mix-blend-mode: overlay) is deliberately NOT overridden.
Measured on the ivory ground at its shipped 0.05: the mean stays exactly
rgb(244,234,222) and the worst single pixel moves one step on one channel
(222 -> 223). It does not muddy the light ground, so it stays identical in
both themes rather than diverging for no reason. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--green-canvas); color: var(--ivory); font-family: var(--font-serif); font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.2rem); line-height: 1.62; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(228,200,122,0.24); color: var(--ivory); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-champ); outline-offset: 3px; border-radius: 2px; }
.brand-full { aspect-ratio: 724 / 606; background: var(--logo) center / contain no-repeat; }
.brand-emblem { aspect-ratio: 1; flex: 0 0 auto; background: var(--logo-mark) center / contain no-repeat; }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--pad-x); }
.section { position: relative; padding-block: var(--sec-y); }
.section--deep { background: var(--green-deep); }
.section--surface { background: var(--green-surface); }
.section--top { padding-top: clamp(120px, 16vh, 190px); }
.eyebrow { font-family: var(--font-sans); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.24em; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.eyebrow .idx { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold-small); padding: 3px 8px; border: 1px solid var(--hairline); border-radius: 2px; line-height: 1; }
.eyebrow.center { justify-content: center; }
.eyebrow::after { content: ""; flex: 0 0 40px; height: 1px; background: var(--hairline); }
.eyebrow.center::before { content: ""; flex: 0 0 40px; height: 1px; background: var(--hairline); }
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; color: var(--ivory); margin: 0; }
h1.display { font-size: clamp(2.7rem, 7vw, 6.4rem); }
h2.display { font-size: clamp(2rem, 4.6vw, 3.8rem); }
h3.display { font-size: clamp(1.4rem, 2.5vw, 2.2rem); }
.support { color: var(--sage); max-width: var(--measure); }
.em-gold { font-family: var(--font-display); font-style: italic; background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)); }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; transform: scaleX(0); transform-origin: 0 50%; background: var(--gold-sheen); }
/* ============================ NAV ============================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px var(--pad-x); border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, padding .4s ease, backdrop-filter .4s ease; }
.nav.scrolled { background: rgba(5,19,15,0.86); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--hairline-faint); padding-block: 11px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .brand-emblem { width: 36px; height: 36px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.brand:hover .brand-emblem { transform: rotate(-5deg); }
.brand .wm { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600; font-size: 0.94rem; color: var(--ivory); white-space: nowrap; }
.brand .wm b { color: var(--gold-small); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--sage); position: relative; padding: 4px 0; transition: color .3s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover, .nav-links a.current { color: var(--ivory); }
.nav-links a:hover::after, .nav-links a.current::after { transform: scaleX(1); }
.btn { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; color: var(--gold-champ); border: 1px solid var(--hairline); border-radius: 2px; background: linear-gradient(180deg, rgba(228,200,122,0.05), rgba(228,200,122,0.02)); cursor: pointer; transition: border-color .4s ease, color .3s ease, box-shadow .5s ease, background .4s ease, transform .3s ease; }
.btn:hover { color: var(--green-canvas); border-color: var(--gold-champ); background: var(--gold-sheen); box-shadow: 0 8px 34px -12px rgba(228,200,122,0.5); transform: translateY(-1px); }
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--sm { padding: 10px 18px; font-size: 0.78rem; }
.link-underline { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.83rem; font-weight: 600; color: var(--ivory); position: relative; padding-bottom: 5px; display: inline-flex; align-items: center; gap: 9px; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.link-underline:hover { color: var(--gold-champ); }
.link-underline:hover::after { transform: scaleX(1); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
/* ============================ VIEWS ============================ */
.view { display: none; }
.view.active { display: block; }
html.js .view.active { animation: viewIn .55s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ============================ HERO ============================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 118px 64px; overflow: hidden; background: radial-gradient(135% 115% at 50% 33%, var(--logo-green) 0%, var(--logo-green) 45%, #06231e 74%, var(--green-canvas) 100%), var(--glow-gold); }
.hero .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 54%, var(--green-canvas) 100%); }
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.42; }
.aurora .a1 { width: 480px; height: 480px; left: 10%; top: 6%; background: radial-gradient(circle, rgba(228,200,122,0.18), transparent 66%); animation: drift1 20s ease-in-out infinite; }
.aurora .a2 { width: 420px; height: 420px; right: 8%; top: 34%; background: radial-gradient(circle, rgba(13,76,60,0.85), transparent 68%); animation: drift2 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(36px,-28px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-44px,24px)} }
.hero .wrap { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
#heroLogo { width: clamp(230px, 33vw, 360px); margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.9rem); margin: 0; }
.hero h1 .w { display: inline-block; }
.hero h1 .line2 { display: block; }
.hero-sub { margin: 32px auto 0; max-width: 58ch; color: var(--ivory); font-size: clamp(1.08rem, 0.6vw + 1rem, 1.35rem); line-height: 1.55; }
.hero .cta-row { justify-content: center; margin-top: 42px; }
.hero-trust { margin-top: 44px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.69rem; color: var(--sage-dim); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; align-items: center; }
.hero-trust span { color: var(--gold-small); }
html.js #heroLogo { opacity: 0; clip-path: circle(0% at 50% 36%); }
html.js .hero.go #heroLogo { animation: logoIn 1.6s cubic-bezier(.55,.1,.2,1) both; }
@keyframes logoIn { 0% { opacity: 0; clip-path: circle(0% at 50% 36%); } 14% { opacity: 1; } 100% { opacity: 1; clip-path: circle(84% at 50% 36%); } }
html.js .hero h1 .w { opacity: 0; transform: translateY(24px); }
html.js .hero.go h1 .w { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(0.5s + var(--i) * 0.09s); }
html.js .hero .fade { opacity: 0; }
html.js .hero.go .fade { opacity: 1; transition: opacity 1s ease; transition-delay: var(--fd, 1.2s); }
/* ---------- two-engines duo (home) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 30px); }
.duo-card { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--hairline-faint); border-radius: 4px; background: linear-gradient(180deg, rgba(13,76,60,0.30), transparent); transition: border-color .4s ease, transform .4s ease, box-shadow .5s ease; }
.duo-card:hover { border-color: var(--hairline); transform: translateY(-3px); box-shadow: 0 22px 54px -32px rgba(228,200,122,0.45); }
.duo-card .tag { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--gold); }
.duo-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 10px 0 12px; color: var(--ivory); }
.duo-card > p { margin: 0; font-family: var(--font-sans); font-size: 1rem; color: var(--sage); }
.duo-list { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.duo-list li { font-family: var(--font-sans); font-size: 0.92rem; color: var(--sage); padding-left: 18px; position: relative; line-height: 1.4; }
.duo-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.duo-list li b { color: var(--ivory); font-weight: 600; }
.duo-card .go { margin-top: auto; }
/* ---------- home: method preview ---------- */
.mprev { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline-faint); border-bottom: 1px solid var(--hairline-faint); }
.mprev-item { padding: 30px clamp(14px,2vw,26px); border-left: 1px solid var(--hairline-faint); display: flex; flex-direction: column; gap: 8px; transition: background .3s ease; }
.mprev-item:first-child { border-left: 0; }
.mprev-item:hover { background: rgba(228,200,122,0.03); }
.mprev-item .mp-n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold-small); }
.mprev-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; color: var(--ivory); }
.mprev-item p { margin: 0; font-family: var(--font-sans); font-size: 0.92rem; color: var(--sage); }
.home-band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(36px,5vh,56px); }
.section-head .support { text-align: center; margin-top: 18px; font-family: var(--font-sans); }
.chips { display: flex; flex-wrap: wrap; }
.chip { flex: 1 1 210px; display: flex; align-items: center; gap: 13px; padding: 6px clamp(16px,3vw,34px); border-left: 1px solid var(--hairline-faint); font-family: var(--font-sans); font-size: 0.9rem; letter-spacing: 0.03em; color: var(--ivory); }
.chip:first-child { border-left: 0; }
.chip svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* ---------- method spine ---------- */
.method-grid { display: grid; grid-template-columns: 330px 1fr; gap: clamp(40px, 6vw, 96px); }
.method-aside { position: sticky; top: 16vh; align-self: start; }
.method-aside .support { font-family: var(--font-sans); font-size: 1rem; margin-top: 22px; }
.track { display: flex; gap: 16px; margin-top: 40px; }
.track-line { position: relative; width: 2px; background: var(--hairline-faint); border-radius: 2px; flex: 0 0 auto; }
.track-fill { position: absolute; inset: 0 0 auto; width: 100%; height: 100%; background: var(--gold-sheen); transform: scaleY(var(--p,0)); transform-origin: 0 0; transition: transform .5s cubic-bezier(.4,.1,.2,1); border-radius: 2px; }
.track-steps { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.track-step { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dim); display: flex; align-items: center; gap: 12px; transition: color .4s ease; }
.track-step .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--green-canvas); transition: all .4s ease; }
.track-step.active { color: var(--gold-champ); }
.track-step.active .dot { background: var(--gold); border-color: var(--gold-champ); box-shadow: 0 0 12px rgba(228,200,122,0.6); }
.phases { display: flex; flex-direction: column; }
.phase { padding-block: clamp(36px, 8vh, 78px); border-top: 1px solid var(--hairline-faint); }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase-num { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.2em; color: var(--gold-small); margin: 0 0 14px; }
.phase h3 { margin: 0 0 16px; }
.phase h3 .v { color: var(--ivory); }
.phase.lit h3 .v { background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)); transition: all .5s ease; }
.phase p { margin: 0 0 8px; color: var(--sage); max-width: 46ch; font-family: var(--font-sans); font-size: 1.04rem; }
.phase .split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.phase .split2 div { padding: 14px 16px; border: 1px solid var(--hairline-faint); border-radius: 3px; }
.phase .split2 .lbl { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: var(--gold); margin-bottom: 6px; }
.phase .split2 p { margin: 0; font-size: 0.9rem; max-width: none; }
.method-foot { margin-top: 12px; font-family: var(--font-display); font-style: italic; color: var(--ivory); font-size: 1.2rem; }
/* ---------- nine areas ---------- */
.nine { display: flex; flex-direction: column; }
.area { display: grid; grid-template-columns: 124px 1fr; gap: clamp(20px, 4vw, 52px); align-items: center; padding-block: clamp(18px, 2.6vh, 28px); border-top: 1px solid var(--hairline-faint); }
.area:last-child { border-bottom: 1px solid var(--hairline-faint); }
.area .n { font-family: var(--font-display); font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(198,155,60,0.45); font-variant-numeric: tabular-nums; transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
.area.in-view .n { background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); }
.area .body { display: flex; flex-direction: column; gap: 6px; }
.area h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.area p { margin: 0; color: var(--sage); font-family: var(--font-sans); font-size: 0.98rem; max-width: 58ch; }
/* ---------- service ladder ---------- */
.ladder { display: flex; flex-direction: column; }
.rung { display: grid; grid-template-columns: 84px 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding-block: clamp(24px, 4vh, 40px); border-top: 1px solid var(--hairline-faint); }
.rung:first-child { border-top: 0; }
.rung.flag { background: linear-gradient(180deg, rgba(228,200,122,0.05), transparent); border-radius: 4px; padding-inline: clamp(14px,2vw,26px); border-top: 0; margin-bottom: 8px; }
.rung .r-num { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.16em; color: var(--gold-small); }
.rung .r-main h3 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rung .r-main h3 .tag { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--hairline); border-radius: 2px; padding: 3px 8px; }
.rung .r-main p { margin: 0; color: var(--sage); font-family: var(--font-sans); font-size: 1rem; max-width: 64ch; }
.rung .r-main p .free { color: var(--gold-champ); }
.rung .r-cta { justify-self: end; }
.modules { margin-top: 40px; border: 1px solid var(--hairline-faint); border-radius: 3px; overflow: hidden; }
.modules-h { padding: 20px 26px; border-bottom: 1px solid var(--hairline-faint); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--gold); background: rgba(13,76,60,0.22); }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; }
.mod { padding: 20px 26px; border-top: 1px solid var(--hairline-faint); border-left: 1px solid var(--hairline-faint); }
.mgrid .mod:nth-child(-n+2) { border-top: 0; }
.mgrid .mod:nth-child(odd) { border-left: 0; }
.mod .mc { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold-small); }
.mod h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; margin: 6px 0 6px; color: var(--ivory); }
.mod p { margin: 0; font-family: var(--font-sans); font-size: 0.92rem; color: var(--sage); }
.also { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); margin-top: 40px; }
.also-card { padding: 28px; border: 1px solid var(--hairline-faint); border-radius: 3px; background: linear-gradient(180deg, rgba(13,76,60,0.22), transparent); }
.also-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 10px; }
.also-card p { margin: 0; font-family: var(--font-sans); font-size: 0.96rem; color: var(--sage); }
.score-card { display: flex; align-items: center; gap: 26px; margin-top: 44px; padding: 28px; border: 1px solid var(--hairline-faint); border-radius: 3px; background: linear-gradient(180deg, rgba(13,76,60,0.28), transparent); flex-wrap: wrap; }
.score-dial { --v: 0; position: relative; width: 146px; height: 146px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--gold) calc(var(--v)*1%), rgba(244,234,222,0.08) 0); display: grid; place-items: center; }
.score-dial::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--green-surface); border: 1px solid var(--hairline-faint); }
.score-dial .val { position: relative; font-family: var(--font-display); font-size: 3rem; color: var(--ivory); font-variant-numeric: tabular-nums; line-height: 1; }
.score-meta { flex: 1 1 240px; }
.score-meta .t { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gold); margin: 0 0 8px; }
.score-meta p { margin: 0; color: var(--sage); font-family: var(--font-sans); font-size: 0.98rem; }
.illus { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-dim); margin-top: 10px; display: inline-block; }
/* ---------- firm ---------- */
.coord { position: relative; min-height: 360px; display: grid; place-items: center; }
.coord svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node { position: absolute; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); padding: 9px 15px; border: 1px solid var(--hairline-faint); border-radius: 2px; background: rgba(5,19,15,0.6); white-space: nowrap; transform: translate(-50%,-50%); }
html.js .node { opacity: 0; }
.node-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 26px; border: 1px solid var(--hairline); border-radius: 2px; background: linear-gradient(180deg, rgba(13,76,60,0.5), rgba(5,19,15,0.75)); box-shadow: 0 0 60px -18px rgba(228,200,122,0.4); }
.node-center .brand-emblem { width: 32px; height: 32px; }
.node-center b { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--ivory); font-weight: 600; }
.promise-band { text-align: center; position: relative; overflow: hidden; }
.watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, 88vw); aspect-ratio: 1; background: var(--logo) center / contain no-repeat; opacity: 0.06; pointer-events: none; z-index: 0; }
.promise-band .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.deliverables { list-style: none; padding: 0; margin: clamp(32px,5vh,52px) 0 0; display: grid; gap: 18px; text-align: left; max-width: 720px; width: 100%; }
.deliverables li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--hairline-faint); font-family: var(--font-sans); font-size: 1.04rem; color: var(--ivory); }
.deliverables li:last-child { border-bottom: 0; }
.deliverables svg { width: 24px; height: 24px; margin-top: 3px; }
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--hairline-faint); padding: 26px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--hairline-faint); }
.faq-item h3 { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.25; color: var(--ivory); margin-bottom: 12px; }
.faq-item p { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.68; color: var(--sage); }
@media (max-width: 620px) { .faq-item h3 { font-size: 1.16rem; } }
.kicker-note { margin-top: 30px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--sage-dim); }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); text-align: center; }
.stat .figure { font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 6rem); line-height: 1; background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3)); font-variant-numeric: tabular-nums; }
.stat .cap { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--sage); margin-top: 14px; }
.diff { display: flex; flex-direction: column; }
.diff-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: clamp(30px, 5vh, 54px); border-top: 1px solid var(--hairline-faint); }
.diff-row:first-child { border-top: 0; }
.diff-label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--gold); }
.diff-row h3 { margin: 14px 0 0; }
.diff-row .support { font-family: var(--font-sans); font-size: 1.02rem; }
.diff-note { margin-top: 16px; padding-left: 18px; border-left: 2px solid var(--hairline); font-family: var(--font-display); font-style: italic; color: var(--ivory); font-size: 1.1rem; max-width: 48ch; }
/* ---- Firm: Our Story · Founders · Mission ---- */
.story { max-width: 720px; }
.story p { margin: 0 0 1.15em; color: var(--ivory); font-size: 1.12rem; line-height: 1.68; }
.story p:last-child { margin-bottom: 0; }
.story .lead { font-size: clamp(1.2rem, 0.7vw + 1.05rem, 1.5rem); line-height: 1.5; }
.story .accent { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.2; color: var(--gold-small); margin: 0.55em 0 0.7em; }
.story .close { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.32; color: var(--ivory); margin-top: 0.85em; }
.divisions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 24px); margin: clamp(26px, 4vh, 38px) 0; }
.division { border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(18px, 2.5vw, 26px); background: linear-gradient(180deg, rgba(13,76,60,0.32), rgba(5,19,15,0.45)); }
.division h4 { font-family: var(--font-display); font-size: 1.28rem; margin: 0 0 8px; color: var(--gold-small); }
.division p { margin: 0; font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.5; color: var(--sage); }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); margin-top: clamp(28px, 4vh, 44px); }
.portrait { width: clamp(122px, 15vw, 164px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; margin-bottom: 22px; background: radial-gradient(circle at 50% 38%, var(--green-mid), var(--green-deep) 78%); border: 1px solid var(--gold); box-shadow: 0 0 0 6px rgba(198,155,60,0.08), 0 22px 44px -22px rgba(0,0,0,0.6); }
.portrait .mono { font-family: var(--font-display); font-size: clamp(2.1rem, 3.4vw, 3rem); letter-spacing: 0.02em; background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder h3 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.founder .role { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--gold-small); margin: 9px 0 18px; }
.founder .bio p { font-family: var(--font-serif); color: var(--sage); font-size: 1.04rem; line-height: 1.62; margin: 0 0 1em; }
.founder .bio p:last-child { margin-bottom: 0; }
.mission { text-align: center; }
.mission .statement { max-width: 64ch; margin: 0 auto; }
.mission .lead-line { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.35rem); line-height: 1.32; color: var(--ivory); margin: 0 0 0.7em; }
.mission .statement > p.body { font-family: var(--font-sans); color: var(--sage); font-size: 1.08rem; line-height: 1.62; margin: 0; }
@media (max-width: 720px) {
.divisions { grid-template-columns: 1fr; }
.founders { grid-template-columns: 1fr; gap: 40px; }
}
/* ---- Contact form ---- */
.contact-form { max-width: 620px; margin: clamp(28px,4vh,40px) auto 0; text-align: left; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-field.cf-full { margin-top: 16px; }
.cf-field > span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; color: var(--gold-small); }
.cf-field > span em { color: var(--sage-dim); font-style: normal; text-transform: none; letter-spacing: 0.02em; }
.contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-serif); font-size: 1rem; color: var(--ivory); background: rgba(198,155,60,0.06); border: 1px solid var(--hairline); border-radius: 3px; padding: 12px 14px; width: 100%; transition: border-color .25s ease, background .25s ease; }
.contact-form textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--sage-dim); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(198,155,60,0.1); }
.contact-form select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.contact-form select option { background: var(--green-deep); color: var(--ivory); }
.cf-submit { width: 100%; justify-content: center; margin-top: 22px; cursor: pointer; }
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-status { margin-top: 16px; text-align: center; font-family: var(--font-sans); font-size: 0.95rem; min-height: 1.2em; }
.cf-status.ok { color: var(--gold-champ); }
.cf-status.err { color: #E5927F; }
@media (max-width: 620px) { .cf-grid { grid-template-columns: 1fr; } }
/* ---------- contact ---------- */
.contact-final { text-align: center; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 120%, var(--green-mid), var(--green-canvas) 60%); }
.contact-final .glow { position: absolute; inset: 0; background: var(--glow-gold); pointer-events: none; }
.contact-final .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.contact-final .brand-emblem { width: 58px; height: 58px; margin: 0 auto 26px; }
.contact-final h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); }
.contact-final .cta-row { justify-content: center; margin-top: 40px; }
.contact-final .micro { margin-top: 24px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--sage-dim); }
.contact-meta { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; margin-top: 40px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--sage); }
.contact-meta b { color: var(--gold-small); font-weight: 600; display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; margin-bottom: 4px; }
/* ============================ FOOTER ============================ */
.footer { border-top: 1px solid var(--hairline); padding-block: clamp(50px, 7vh, 88px) 36px; background: var(--green-canvas); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.footer .brand-block .brand-emblem { width: 46px; height: 46px; margin-bottom: 16px; }
.footer .brand-block .wm { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 1rem; color: var(--ivory); }
.footer .brand-block .slogan { font-family: var(--font-display); font-style: italic; color: var(--gold-small); margin-top: 14px; font-size: 1.18rem; }
.footer .brand-block .loc { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sage-dim); margin-top: 16px; text-transform: uppercase; }
.footer-col h4 { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; color: var(--gold); margin: 0 0 18px; }
.footer-col a { display: block; font-family: var(--font-sans); font-size: 0.92rem; color: var(--sage); margin-bottom: 12px; transition: color .3s ease; cursor: pointer; }
.footer-col a:hover { color: var(--gold-champ); }
.disclosure { margin-top: clamp(36px,5vh,60px); padding-top: 30px; border-top: 1px solid var(--hairline-faint); }
.disclosure p { font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.7; color: var(--sage-dim); max-width: 98ch; margin: 0 0 16px; }
.disclosure a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }
.disclosure a:hover { color: var(--gold-champ); }
.copyline { margin-top: 18px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--sage-dim); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in-view { opacity: 1; transform: none; transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
/* ============================ PRICING VIEW ============================
The /pricing brochure's stylesheet, folded in. Its :root was NOT copied:
every one of its tokens maps 1:1 onto a token this file already defines
--bg -> --green-canvas --panel -> --green-deep --ink -> --ivory
--mut -> --sage --mut-2 -> --sage-dim --line -> --hairline
--line-faint -> --hairline-faint --disp/--body/--sans/--mono ->
--font-display/--font-serif/--font-sans/--font-mono
so the whole view follows html[data-theme="light"] for free. Only the
rgba() literals baked into its card grounds cannot follow a token, and
those are re-stated for light below exactly as .duo-card etc. are.
Every class is prefixed .pv- because the brochure shipped bare .mod,
.grid, .step, .note, .close, .tier and .free — and .mod, .grid and .note
already mean something else in this stylesheet. */
.pv-path { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 clamp(30px,5vh,52px); padding: 0; border: 1px solid var(--hairline-faint); border-radius: 4px; overflow: hidden; }
.pv-path li { padding: 18px 20px; border-left: 1px solid var(--hairline-faint); }
.pv-path li:first-child { border-left: 0; }
.pv-pn { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--gold-small); }
.pv-path h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; margin: 6px 0 4px; color: var(--ivory); }
.pv-path p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--sage); }
.pv-h { font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,1.95rem); font-weight: 400; margin: 0 0 8px; line-height: 1.18; color: var(--ivory); letter-spacing: -0.01em; }
/* the registration disclosure, sitting WITH the prices */
.pv-disclose { border-left: 2px solid var(--gold); background: rgba(4,23,19,0.22); border-radius: 0 5px 5px 0; padding: 18px 22px; margin-top: 4px; }
.pv-disclose-h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.pv-disclose p { margin: 0; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.7; color: var(--sage); }
/* 7.6:1 on the dark ground; the light value below measures 5.2:1 on ivory */
.pv-close .pv-h { margin-bottom: 12px; }
/* Light theme: the six rgba(4,23,19,*) card grounds are a dark-ground device
and would print as grey smears on the ivory, exactly as .duo-card would. */
html[data-theme="light"] .pv-step { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.42)); }
html[data-theme="light"] .pv-mod { background: rgba(255,255,255,0.80); }
html[data-theme="light"] .pv-tier { background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.40)); }
html[data-theme="light"] .pv-guar,
html[data-theme="light"] .pv-disclose { background: rgba(255,255,255,0.78); }
html[data-theme="light"] .pv-lead { box-shadow: 0 0 0 1px rgba(128,96,31,0.30); }
html[data-theme="light"] .pv-free { color: #2C6E49; }
/* ---- THE ESTIMATOR -------------------------------------------------------
Everything below paints from the site tokens, so html[data-theme="light"]
follows for free. The only literals are the rgba(4,23,19,*) card grounds a
token cannot express — they get the same explicit light override the rest
of this sheet uses, immediately after the block. */
.pv-est { border: 1px solid var(--hairline); border-radius: 6px; padding: clamp(20px,3vw,30px) clamp(20px,3vw,32px); margin: 0 0 clamp(34px,5vh,54px); background: linear-gradient(180deg, rgba(4,23,19,0.20), rgba(4,23,19,0.32)); }
.pv-est-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px 22px; flex-wrap: wrap; }
.pv-est-top > div { flex: 1 1 26ch; min-width: 0; }
.pv-est-h { font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,1.95rem); font-weight: 400; margin: 0; color: var(--ivory); letter-spacing: -0.01em; line-height: 1.18; }
.pv-est-sub { color: var(--sage); font-size: 0.95rem; line-height: 1.62; margin: 10px 0 0; max-width: 62ch; }
.pv-rail { display: flex; gap: 5px; margin: 22px 0 20px; }
.pv-rail i { display: block; height: 2px; flex: 1 1 0; background: var(--hairline-faint); border-radius: 2px; }
.pv-rail i.on { background: var(--gold); }
#pvStep:focus { outline: none; }
#pvStep:focus-visible { outline: 2px solid var(--gold-champ); outline-offset: 6px; border-radius: 4px; }
.pv-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.pv-q legend { font-family: var(--font-display); font-size: clamp(1.16rem,2.1vw,1.44rem); font-weight: 400; color: var(--ivory); padding: 0; margin: 0 0 6px; line-height: 1.25; }
.pv-hint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dim); margin: 0 0 14px; line-height: 1.6; }
.pv-q legend + .pv-opts { margin-top: 14px; }
.pv-opts { display: grid; gap: 10px; }
.pv-opts--two { grid-template-columns: 1fr 1fr; }
.pv-opts--three { grid-template-columns: repeat(3, 1fr); }
#quote { scroll-margin-top: 104px; }
.pv-opt { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 5px 14px; border: 1px solid var(--hairline-faint); border-radius: 5px; padding: 14px 16px; cursor: pointer; background: rgba(4,23,19,0.18); transition: border-color .28s ease, background .28s ease; }
.pv-opt:hover { border-color: var(--hairline); }
.pv-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
.pv-opt-l { font-family: var(--font-sans); font-size: 0.96rem; font-weight: 600; color: var(--ivory); line-height: 1.38; }
.pv-opt-d { grid-column: 1 / -1; font-size: 0.85rem; line-height: 1.5; color: var(--sage); }
.pv-opt.on { border-color: var(--gold); background: rgba(4,23,19,0.34); }
.pv-opt.on .pv-opt-l { color: var(--gold-champ); }
/* the input is visually hidden, so the ring has to live on the label */
.pv-opt:focus-within { outline: 2px solid var(--gold-champ); outline-offset: 3px; }
.pv-est-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hairline-faint); }
.pv-spacer { flex: 1 1 auto; }
.pv-ghost { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); background: none; border: 1px solid var(--hairline-faint); border-radius: 2px; padding: 11px 16px; cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.pv-ghost:hover { border-color: var(--hairline); color: var(--ivory); }
.pv-est button[disabled] { opacity: 0.45; cursor: not-allowed; }
.pv-est button[disabled]:hover { border-color: var(--hairline); background: linear-gradient(180deg, rgba(228,200,122,0.05), rgba(228,200,122,0.02)); color: var(--gold-champ); box-shadow: none; transform: none; }
.pv-live { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; line-height: 1.9; color: var(--sage-dim); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline-faint); }
.pv-live b { color: var(--gold-champ); font-weight: 600; }
.pv-res-h { font-family: var(--font-display); font-size: clamp(1.3rem,2.3vw,1.6rem); font-weight: 400; color: var(--ivory); margin: 0 0 4px; line-height: 1.2; }
.pv-group { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 22px 0 2px; }
.pv-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--hairline-faint); font-family: var(--font-sans); font-size: 0.94rem; line-height: 1.45; color: var(--ivory); }
.pv-line > span:last-child { font-weight: 600; color: var(--gold-champ); white-space: nowrap; }
.pv-line--inc { border-bottom: 0; padding-bottom: 3px; }
.pv-inc { padding: 0 0 13px 2px; border-bottom: 1px solid var(--hairline-faint); }
.pv-inc-d { margin: 0 0 9px; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.6; color: var(--sage); }
.pv-inc-h { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dim); margin: 0 0 6px; }
.pv-inc-l { list-style: none; margin: 0; padding: 0; }
.pv-inc-l li { position: relative; padding-left: 17px; margin: 0 0 5px; font-family: var(--font-sans); font-size: 0.84rem; line-height: 1.55; color: var(--sage); }
.pv-inc-l li:last-child { margin-bottom: 0; }
.pv-inc-l li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 0.78rem; line-height: 1.7; }
.pv-inc-n { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--hairline-faint); font-family: var(--font-sans); font-size: 0.78rem; font-style: italic; line-height: 1.6; color: var(--sage-dim); }
.pv-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.pv-tot-l { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: var(--ivory); }
.pv-tot-v { font-family: var(--font-sans); font-size: 1.26rem; font-weight: 600; color: var(--gold-champ); white-space: nowrap; }
.pv-tot-v small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--sage-dim); text-align: right; margin-top: 4px; font-weight: 400; white-space: normal; }
.pv-caveat { border-left: 2px solid var(--gold); background: rgba(4,23,19,0.24); border-radius: 0 5px 5px 0; padding: 17px 21px; margin-top: 22px; }
.pv-caveat p { margin: 0 0 10px; font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.68; color: var(--sage); }
/* The disclaimer is the load-bearing element now that every figure is exact,
so it is not fine print: --ivory is the ink token (near-white on dark, near-
black on light), which is the same colour .pv-res-h already carries on this
card and passes AA on both grounds. */
.pv-caveat p.pv-disc { color: var(--ivory); font-size: 0.92rem; font-weight: 500; }
.pv-caveat p:last-child { margin-bottom: 0; }
.pv-onward { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.pv-score-note { color: var(--sage); font-size: 0.9rem; line-height: 1.65; margin: 16px 0 0; max-width: 64ch; }
/* ---- the contact step ----
The form carries BOTH .contact-form and .pv-cform, so every field inherits
the contact view's styling byte for byte; only width, spacing and the error
affordance are new. The error colours are the SAME two values .cf-status.err
already uses per theme, so their contrast is whatever was measured there. */
.pv-cform { max-width: none; margin: 16px 0 0; }
.pv-cnote { color: var(--sage); font-size: 0.9rem; line-height: 1.65; margin: 6px 0 18px; max-width: 62ch; }
.pv-cerr { font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.5; color: #E5927F; margin: 0; }
.pv-cerr:empty { display: none; }
.pv-cform input[aria-invalid="true"] { border-color: #E5927F; }
.pv-cform .cf-submit { max-width: 340px; margin-top: 20px; }
html[data-theme="light"] .pv-cerr { color: #A32E17; }
html[data-theme="light"] .pv-cform input[aria-invalid="true"] { border-color: #A32E17; }
html[data-theme="light"] .pv-est { background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.48)); }
html[data-theme="light"] .pv-opt { background: rgba(255,255,255,0.70); }
html[data-theme="light"] .pv-opt.on { background: rgba(255,255,255,0.98); }
html[data-theme="light"] .pv-est-all:hover { background: rgba(138,106,36,0.07); }
html[data-theme="light"] .pv-caveat { background: rgba(255,255,255,0.80); }
html[data-theme="light"] .pv-est button[disabled]:hover { background: linear-gradient(180deg, rgba(228,200,122,0.05), rgba(228,200,122,0.02)); }
@media (max-width: 620px) { .pv-opts--two, .pv-opts--three { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.pv-est, .pv-est *, .pv-opt { transition: none !important; }
}
@media (max-width: 900px) { .pv-path { grid-template-columns: 1fr 1fr; }
.pv-path li:nth-child(3) { border-left: 0; }
.pv-path li:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-faint); } }
@media (max-width: 620px) { .pv-grid, .pv-tiers { grid-template-columns: 1fr; }
.pv-path { grid-template-columns: 1fr; }
.pv-path li { border-left: 0; border-top: 1px solid var(--hairline-faint); border-bottom: 0; }
.pv-path li:first-child { border-top: 0; } }
@media (max-width: 960px) {
.nav-links { display: none; }
.method-grid { grid-template-columns: 1fr; }
.method-aside { position: static; }
.track { display: none; }
.phase { border-top: 1px solid var(--hairline-faint); padding-block: 36px; }
.phase:first-child { padding-top: 36px; border-top: 1px solid var(--hairline-faint); }
.footer-top { grid-template-columns: 1fr 1fr; }
.mprev { grid-template-columns: 1fr 1fr; }
.mprev-item:nth-child(3) { border-left: 0; }
.mprev-item:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-faint); }
.also, .mgrid, .duo, .phase .split2 { grid-template-columns: 1fr; }
.mgrid .mod { border-left: 0; border-top: 1px solid var(--hairline-faint); }
.mgrid .mod:nth-child(2) { border-top: 1px solid var(--hairline-faint); }
}
@media (max-width: 620px) {
.rung { grid-template-columns: 1fr; gap: 12px; }
.rung .r-num { order: -1; }
.rung .r-cta { justify-self: start; }
.stat-strip { grid-template-columns: 1fr; gap: 30px; }
.area { grid-template-columns: 68px 1fr; gap: 18px; }
.diff-row { grid-template-columns: 1fr; }
.chip { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--hairline-faint); padding-block: 13px; }
.chip:first-child { border-top: 0; }
.mprev { grid-template-columns: 1fr; }
.mprev-item { border-left: 0; border-bottom: 1px solid var(--hairline-faint); }
.footer-top { grid-template-columns: 1fr; }
.hero h1 .line2 { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.js .reveal, html.js .hero h1 .w, html.js .hero .fade, html.js #heroLogo { opacity: 1 !important; transform: none !important; transition: none !important; }
html.js #heroLogo { clip-path: none !important; animation: none !important; }
html.js .node { opacity: 1 !important; }
html.js .view.active { animation: none !important; }
.aurora span { animation: none !important; }
.track-fill { transition: none !important; }
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
/* SEO contract 2026-10-07: descriptive kicker in the hero H1, three service cards, card text */
.hero h1 .h1-kicker{display:block;font-family:var(--font-sans);font-size:clamp(.74rem,1.05vw,.88rem);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-small);margin:0 0 18px;line-height:1.5}
.duo.svc3{grid-template-columns:repeat(3,1fr)}
.svc3 .duo-card{gap:12px}
.svc3 .svc-problem{margin:4px 0 0;font-family:var(--font-serif);font-size:1.12rem;line-height:1.5;color:var(--ivory)}
.svc3 .svc-solution{margin:0;font-family:var(--font-serif);font-size:1rem;line-height:1.6;color:var(--sage)}
.svc3 .svc-groups{margin:0;font-family:var(--font-sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-small)}
.svc3 .svc-links{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.home-band .cta-row{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center;margin-top:18px}
@media (max-width:960px){.duo.svc3{grid-template-columns:1fr}}
/* ============================================================
THE SEQUENCE FAMILY (2026-09-26)
Sequence & Co. is the umbrella; beneath it sit Sequence Advisory,
Sequence Insurance, Sequence Business and the Sequence Foundation,
each on its own technology. Used by the home family band, the
#/companies view, the Firm divisions and the Wealth/Business tech bands.
Cards here sit a step darker than the ground so they read as objects on
it; they were first tuned against the paler 2026-08-31 canvas.
============================================================ */
.fam { --fam-card: linear-gradient(180deg, rgba(9,46,38,0.94), rgba(5,24,20,0.92)); }
html[data-theme="light"] .fam { --fam-card: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(251,247,239,0.94)); }
/* ---- org chart ---- */
.org { display: flex; flex-direction: column; align-items: center; }
.org-top { text-align: center; padding: 18px 34px; border: 1px solid var(--hairline); border-radius: 3px; background: var(--fam-card); }
.org-top .nm { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--ivory); line-height: 1.1; }
.org-top .sub { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.org-stem { width: 1px; height: 28px; background: var(--hairline); }
.org-cols { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(14px, 2vw, 22px); width: 100%; padding-top: 28px; }
/* the crossbar spans from the centre of the first column to the centre of the last */
.org-cols::before { content: ""; position: absolute; top: 0; left: calc((100% - 2 * clamp(14px, 2vw, 22px)) / 4 * 1); right: calc((100% - 2 * clamp(14px, 2vw, 22px)) / 8); height: 1px; background: var(--hairline); }
.org-col { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.org-col::before { content: ""; position: absolute; top: -28px; left: 50%; width: 1px; height: 28px; background: var(--hairline); }
.org-lbl { align-self: center; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold); padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 2px; background: var(--fam-card); }
.org-row { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: 1fr; margin-top: 18px; flex: 1; }
.org-col--two .org-row { grid-template-columns: 1fr 1fr; }
.org-ent { display: flex; flex-direction: column; padding: 20px 20px 18px; border: 1px solid var(--hairline-faint); border-radius: 3px; background: var(--fam-card); transition: border-color .4s ease, transform .4s ease; }
a.org-ent:hover { border-color: var(--hairline); transform: translateY(-2px); }
.org-ent .kind { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dim); }
.org-ent h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; line-height: 1.15; margin: 6px 0 8px; color: var(--ivory); }
.org-ent p { margin: 0 0 14px; font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.45; color: var(--sage); }
.org-tech { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline-faint); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.org-tech .tn { font-family: var(--font-sans); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--gold-small); }
.org-tech .tp { font-family: var(--font-sans); font-size: 0.76rem; color: var(--sage-dim); }
/* ---- "Coming soon" ---- */
.soon { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-champ); border: 1px dashed var(--hairline); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.org-ent.is-soon { border-style: dashed; border-color: var(--hairline); }
.fam-more { display: flex; justify-content: center; margin-top: clamp(26px, 4vh, 38px); }
/* ---- #/companies: one block per company ---- */
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(22px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--hairline-faint); border-radius: 4px; background: var(--fam-card); }
.co + .co { margin-top: clamp(18px, 2.6vw, 26px); }
.co.is-soon { border-style: dashed; border-color: var(--hairline); }
.co .aud { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.08; margin: 10px 0 14px; color: var(--ivory); }
.co .co-body > p { margin: 0 0 14px; font-family: var(--font-sans); font-size: 1rem; line-height: 1.55; color: var(--sage); }
.co .co-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 22px; }
.co-tech { border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(20px, 2.6vw, 28px); background: linear-gradient(180deg, rgba(228,200,122,0.06), rgba(228,200,122,0.015)); }
.co-tech .th { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.co-tech .th-l { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dim); }
.co-tech h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 6px 0 2px; color: var(--gold-small); }
.co-tech .tfull { font-family: var(--font-sans); font-size: 0.84rem; color: var(--sage-dim); margin: 0 0 12px; }
.co-tech > p { margin: 0 0 12px; font-family: var(--font-sans); font-size: 0.94rem; line-height: 1.5; color: var(--sage); }
.co-tech .powered { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sage); }
.co-tech .powered b { color: var(--ivory); font-weight: 600; letter-spacing: 0.02em; }
/* the reserved slot the BackNine Quote & Apply embed will drop into */
.quote-slot { margin-top: 14px; padding: 16px; border: 1px dashed var(--hairline); border-radius: 3px; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.45; color: var(--sage); text-align: center; }
/* ---- why we build our own ---- */
.own { max-width: 64ch; margin: clamp(40px, 6vh, 64px) auto 0; text-align: center; }
.own h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 14px; color: var(--ivory); }
.own p { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--sage); }
/* ---- tech band on the Wealth and Business views ---- */
.techband { margin-top: clamp(40px, 6vh, 64px); }
.techband .tb-h, .quote-engine .tb-h { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.24em; font-weight: 600; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.techband .tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 24px); }
.techband .tb-grid--one { grid-template-columns: 1fr; }
.techband .co-tech { background: var(--fam-card); }
.techband .th-l { display: none; } /* the band heading already says it */
/* ---- firm page: four divisions ---- */
.divisions--four .division .by { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dim); margin: -2px 0 8px; }
.divisions--four .division h4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.division.is-soon { border-style: dashed; }
html[data-theme="light"] .division.is-soon { background: linear-gradient(180deg, #FFFFFF, rgba(255,255,255,0.55)); }
@media (max-width: 960px) {
.org-cols { grid-template-columns: 1fr 1fr; }
.org-col--two { grid-column: 1 / -1; }
.org-cols::before, .org-col::before { display: none; }
.org-cols { padding-top: 18px; }
.co { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.org-cols, .org-col--two .org-row, .techband .tb-grid { grid-template-columns: 1fr; }
.org-top { padding: 16px 22px; }
}
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
font-weight: 600; text-transform: uppercase; color: var(--sage);
background: transparent; border: 1px solid var(--hairline-faint);
border-radius: 2px; padding: 9px 13px; cursor: pointer; line-height: 1;
transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.lang-toggle:hover { color: var(--gold-champ); border-color: var(--hairline); background: rgba(228,200,122,0.05); }
.lang-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The theme toggle is the language toggle's twin: it carries .lang-toggle for
the box, border, tracking, hover and focus ring, so every responsive tweak
below applies to both. The svg box is exactly 1em tall, which keeps the two
buttons the same height at every breakpoint even as the font-size changes;
the glyph is scaled past that box visually so it still reads at 11px. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* flex-shrink would collapse an svg to zero width — measured at 360px, where
the crowded nav squeezed the icon out of existence entirely. */
.theme-toggle svg { display: block; width: 1.6em; height: 1em; flex: 0 0 auto; transform: scale(1.4); }
/* A nav item is one word or two; letting it break mid-item is never the right
answer, so the item is the atom and the BAND below buys the room. Without
this the eighth link did not push the row to two lines — it broke "The
Method" and "Get Started" in half instead, which measures as a 91-93px nav. */
@media (min-width: 961px) { .nav-links a, .nav .btn--sm { white-space: nowrap; } }
/* EIGHT nav items + the two toggles + the CTA between the 960px hide-breakpoint
and ~1180px. MEASURED (headless Chromium, 1px sweep 961 -> 1440, this file's
fallback sans): un-retuned, the eighth link overflowed the bar from 961 all
the way to 1223. With the values below the nav is a single 68-73px line at
every one of those 480 widths, and the last width that still needed help was
1161 — so the band runs to 1200 for headroom rather than stopping at the old
1120. Removing a link was never on the table; the space comes from tracking,
gaps, the lockup and the CTA's padding. Re-measure this band before adding a
ninth item. */
@media (min-width: 961px) and (max-width: 1200px) {
.nav { gap: 12px; }
.nav-links { gap: 11px; }
.nav-links a { font-size: 0.75rem; letter-spacing: 0; }
.lang-toggle { padding: 8px 8px; }
.nav .btn--sm { padding: 10px 12px; font-size: 0.7rem; }
.brand { gap: 9px; }
.brand .brand-emblem { width: 30px; height: 30px; }
.brand .wm { font-size: 0.82rem; letter-spacing: 0.14em; }
}
/* The two toggles add ~85px to the nav's right cluster. On small screens that
pushed the CTA past its min-content width, and "Get Started" wrapped to a
second line — a 87px-tall nav. MEASURED: with the values below the nav is a
single 68px line from 375px up (the pre-toggle build was single-line from
390px up, so this is not a regression at any width; at 360px both wrap).
The space is reclaimed from tracking, gaps and the lockup, never by dropping
a control. */
@media (max-width: 480px) {
/* The menu button is a FOURTH control in .nav-right. The ~26px it needs is
reclaimed from the nav's own inline padding and from tracking — never by
dropping a control, and never from the brand lockup, which is nearly at
its floor. MEASURED: the nav is still a single 68px line from 390px up. */
.nav { gap: 8px; padding-inline: 12px; }
.nav-right { gap: 5px; }
.brand { gap: 8px; }
.brand .brand-emblem { width: 26px; height: 26px; }
.brand .wm { font-size: 0.74rem; letter-spacing: 0.07em; }
.lang-toggle { padding: 8px 6px; font-size: 0.66rem; letter-spacing: 0.08em; }
.nav .btn--sm { padding: 9px 9px; font-size: 0.66rem; }
}
.menu-toggle { display: none; }
.mnav-backdrop, .mnav-panel { display: none; }
@media (max-width: 960px) {
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* A narrower box than the theme toggle's 1.6em on purpose: a fourth control
in .nav-right is what decides whether the nav stays one line at 390px.
flex-shrink would collapse an svg to zero width in that crowded row. */
.menu-toggle svg { display: block; width: 1.15em; height: 1em; flex: 0 0 auto; transform: scale(1.35); }
.mnav-backdrop {
display: block; position: fixed; inset: 0; z-index: 88;
background: rgba(5,19,15,0.62);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden;
transition: opacity .34s ease, visibility 0s linear .34s;
}
/* z-index sits above .nav (50) and .grain (60): the drawer covers the bar it
came from, so it carries its own close control. */
.mnav-panel {
display: flex; flex-direction: column;
position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
width: min(330px, 86vw); max-width: 100%;
background: var(--green-deep);
border-left: 1px solid var(--hairline);
box-shadow: -26px 0 64px -34px rgba(0,0,0,0.7);
padding: 13px 0 26px;
overflow-y: auto; overscroll-behavior: contain;
transform: translateX(101%); visibility: hidden;
transition: transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s;
}
/* visibility (not display) so the closed panel is out of the tab order and
out of the accessibility tree while still being animatable. */
.mnav-open .mnav-backdrop { opacity: 1; visibility: visible; transition: opacity .34s ease; }
.mnav-open .mnav-panel { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.mnav-panel:focus { outline: none; }
html[data-theme="light"] .mnav-backdrop { background: rgba(10,28,23,0.34); }
html[data-theme="light"] .mnav-panel { box-shadow: -26px 0 64px -34px rgba(10,28,23,0.32); }
.mnav-head { display: flex; justify-content: flex-end; padding: 0 16px 13px; }
.mnav-close {
font: inherit; color: var(--sage); background: transparent;
border: 1px solid var(--hairline-faint); border-radius: 2px;
padding: 8px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.mnav-close svg { display: block; width: 17px; height: 17px; }
.mnav-close:hover { color: var(--gold-champ); border-color: var(--hairline); background: rgba(228,200,122,0.05); }
.mnav-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mnav-list { display: flex; flex-direction: column; }
.mnav-list a {
font-family: var(--font-display); font-weight: 400;
font-size: 1.32rem; line-height: 1.1; letter-spacing: -0.01em;
color: var(--ivory); text-decoration: none;
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-top: 1px solid var(--hairline-faint);
transition: color .3s ease, background .3s ease;
}
.mnav-list a:first-child { border-top: 1px solid var(--hairline); }
.mnav-list a:last-child { border-bottom: 1px solid var(--hairline-faint); }
/* the gold rule keeps its width in every state, so marking the current view
never nudges the label sideways */
.mnav-list a::before {
content: ""; flex: 0 0 20px; height: 1px; background: transparent;
transition: background .3s ease;
}
.mnav-list a:hover { color: var(--gold-champ); background: rgba(198,155,60,0.06); }
.mnav-list a:hover::before { background: var(--hairline); }
.mnav-list a.current { color: var(--gold-champ); }
.mnav-list a.current::before { background: var(--gold); }
.mnav-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
}
@media (prefers-reduced-motion: reduce) {
.mnav-panel, .mnav-backdrop, .mnav-list a, .mnav-list a::before { transition: none !important; }
}
/* ============================================================================
__login-ground (2026-09-26, owner: "all other tab pages background should be
how the pfos login page looks"; "the sequence family and one method on the
home page are too dark. the real constraint is a random green.")
The ground and the pressed mark are copied VERBATIM from the PFOS login page
(app.sequencenco.com/pfos): one --seq-canvas dome painted on html + body,
fixed to the viewport, and the mark masked out of it — filled from the SAME
--seq-canvas at background-size:cover on a fixed inset:0 box, so inside the
silhouette it is pixel-identical to what it covers. It reads as pushed out of
the page by a highlight up-left, shade down-right, and three zero-offset gold
drop-shadows along the outline. The filter sits on the WRAPPER: CSS applies
filter before mask, so a filter on the masked layer would be clipped away.
HOME keeps its own hero, its dark Mission band and its deep Two-engines band.
Below those, The Sequence Family and One Method sit on the ground itself, and
The Real Constraint is a deeper tint of it rather than the flat #0B3D33.
No mark on home: the hero already carries the full logo.
INNER ROUTES are the login page: the whole view is ground; boxes lift off it,
and .section--deep bands stay as a darker tint of it for area contrast.
========================================================================== */
html{
--seq-canvas: radial-gradient(135% 115% at 50% 33%, #013C38 0%, #013C38 45%, #06231e 74%, #05130F 100%);
--seq-mark: url("/assets/img-2.png");
}
html[data-theme="light"]{
--seq-canvas: radial-gradient(circle at 50% 50%, #FCF6EA 0%, #F9EDD4 22%, #F3E3C1 52%, #E5D0A5 80%, #DCC592 100%);
}
html, body, html[data-theme="light"], html[data-theme="light"] body{
background: var(--seq-canvas) !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
/* ---- three tones of the one ground, so neighbouring sections never match ----
ground = the login dome itself (section transparent)
lift = a lighter wash of the brand green over it
deep = a darker wash of it
Home runs hero ground · Mission lift · Two engines deep · Family ground ·
Method lift · Real Constraint deep · footer ground — no two neighbours equal.
All three are washes OVER the fixed dome, so they stay one family and every
boundary is a straight tonal step, not a new colour. */
.tone-ground{ background: transparent !important; }
.tone-lift { background: rgba(38,138,114,.26) !important; }
.tone-deep { background: rgba(2,16,13,.42) !important; }
html[data-theme="light"] .tone-lift{ background: rgba(255,255,255,.58) !important; }
html[data-theme="light"] .tone-deep{ background: rgba(150,115,45,.15) !important; }
/* the hero sits on the same ground as everything under it (identical to its
old own-dome at scroll 0), keeping its gold glow and aurora; its vignette
ended in #05130F at the bottom edge and drew a dark seam into the Mission */
.hero, html[data-theme="light"] .hero{ background: var(--glow-gold) !important; }
.hero .vignette{ display: none; }
/* the footer on the ground too, set off by its hairline rule */
/* above the active view (z 1), so the pressed mark sits BEHIND the footer, never over it */
.footer{ background: transparent !important; position: relative; z-index: 2; }
/* ---- inner routes ---- */
html[data-route]:not([data-route="home"]) .view.active{ position:relative; z-index:1; }
/* The page fade-in slides 8px with transform, and with fill-mode both it leaves an
identity transform on the view — which makes it the containing block for every
position:fixed child, so the mark and glow centred on the whole tall view (320px
too low) instead of the viewport. Inner routes fade with opacity only. */
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
html.js[data-route]:not([data-route="home"]) .view.active{ animation-name: viewFade; }
.view:not([data-view="home"]) .section,
.view:not([data-view="home"]) .section--surface,
.view:not([data-view="home"]) .contact-final{ background: transparent !important; }
.view:not([data-view="home"]) .section--deep{ background: rgba(2,16,13,.36) !important; }
html[data-theme="light"] .view:not([data-view="home"]) .section--deep{ background: rgba(150,115,45,.09) !important; }
.view:not([data-view="home"]) .section > .wrap{ position:relative; z-index:1; }
/* the login page's own glow (#loginScreen::before, verbatim): gold across the
top, a faint amber at lower right, laid over the ground AND the mark. It is
the view's LAST box, so it paints after the mark and under every .wrap. */
html[data-route]:not([data-route="home"]) .view.active::after{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(198,155,60,.18), transparent),
radial-gradient(ellipse 40% 40% at 80% 80%, rgba(249,115,22,.06), transparent);
}
/* ---- every box = the PFOS login card, verbatim (.login-card) ----
owner: "the boxes on each tab should be highlighted ... just like the login box".
A translucent green panel at 145deg, a gold hairline, a 3px gold bar across the
top, square corners. Translucent on purpose, as on the login: the pressed mark
shows THROUGH the card rather than stopping at its edge. */
:is(.also-card, .co-tech, .score-card, .org-ent, .org-top, .division, .mgrid .mod, .split2 > div, .pv-path, .pv-disclose, .pv-est, .rung, .area, .duo-card){
position: relative;
background: linear-gradient(145deg, rgba(10,45,36,.55), rgba(5,25,20,.62)) !important;
border: 1px solid rgba(198,155,60,.22) !important;
border-radius: 0 !important;
}
:is(.also-card, .co-tech, .score-card, .org-ent, .org-top, .division, .mgrid .mod, .split2 > div, .pv-path, .pv-disclose, .pv-est, .rung, .area, .duo-card)::before{
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, #C69B3C, #C69B3C, #D9B45B);
}
html[data-theme="light"] :is(.also-card, .co-tech, .score-card, .org-ent, .org-top, .division, .mgrid .mod, .split2 > div, .pv-path, .pv-disclose, .pv-est, .rung, .area, .duo-card){
background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,253,248,.64)) !important;
box-shadow: 0 8px 40px rgba(198,155,60,.14);
}
/* "Coming soon" boxes keep their dashed edge so they still read as not-yet */
:is(.org-ent, .division).is-soon{ border-style: dashed !important; }
/* boxes that sit inside another box keep a quiet inner edge, not a second card */
.co-tech .quote-slot{ background: transparent; }
/* ---- BackNine Quote & Apply (2026-09-29) ----
The widget renders an iframe into #quoteApply. It runs the full width of the
page's content column (1032px at desktop — BackNine recommends 1000px+) and
sits on a solid panel so its own UI never shows the pressed mark through it. */
.quote-engine{ margin-top: clamp(36px, 5vh, 56px); }
.quote-states{ display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
margin: 0 0 14px; padding: 16px 20px; border: 1px solid rgba(198,155,60,.22); background: linear-gradient(145deg, rgba(10,45,36,.55), rgba(5,25,20,.62)); }
html[data-theme="light"] .quote-states{ background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,253,248,.64)); }
.quote-states p{ margin: 0; flex: 1 1 420px; font-family: var(--font-sans); font-size: .96rem; line-height: 1.5; color: var(--sage); }
.quote-states p b{ color: var(--ivory); font-weight: 600; }
.quote-frame{ position: relative; width: 100%; min-height: 420px; background: #FFFFFF;
border: 1px solid rgba(198,155,60,.22); }
.quote-frame::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
background: linear-gradient(90deg, #C69B3C, #C69B3C, #D9B45B); }
.quote-frame .strife-frame-parent, .quote-frame iframe{ width: 100% !important; max-width: 100% !important; display: block; border: 0; }
.quote-frame:has(iframe){ min-height: 0; }
.quote-wait{ margin: 0; padding: 40px 24px; text-align: center; font-family: var(--font-sans); font-size: .92rem; color: #4A5B54; }
/* ---- numbered rows (owner 2026-09-26): Business looks like Advisory, and every
numbered row on both gets the Complete Business Build card. One layout for all:
the large gold display numeral in a 124px column, the copy, then the CTA. ---- */
.nine, .ladder{ display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px); }
.area, .rung, .rung:first-child, .area:last-child{
border-top: 1px solid rgba(198,155,60,.22) !important;
border-bottom: 1px solid rgba(198,155,60,.22) !important;
margin: 0 !important;
padding: clamp(20px, 2.8vh, 30px) clamp(18px, 2.4vw, 32px) !important;
}
.rung{ grid-template-columns: 124px 1fr auto; }
/* the nine areas and the rungs share one column rhythm, so their copy lines up */
.area, .rung{ column-gap: clamp(16px, 3vw, 40px) !important; }
/* Implementation pieces: a header line, then each piece its own numbered card */
.modules{ border: 0 !important; background: none !important; overflow: visible !important; }
.modules-h, html[data-theme="light"] .modules-h{ background: none !important; border: 0 !important; padding: 0 0 14px !important; font-weight: 600; letter-spacing: .24em; }
.mgrid{ gap: clamp(10px, 1.4vw, 14px); }
.mgrid .mod, .mgrid .mod:nth-child(-n+2), .mgrid .mod:nth-child(odd), .mgrid .mod:nth-child(2){
border: 1px solid rgba(198,155,60,.22) !important;
display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center;
padding: clamp(18px, 2.4vh, 24px) clamp(18px, 2.2vw, 26px) !important;
}
.mgrid .mod .mc{
grid-row: span 2; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: 0;
font-variant-numeric: tabular-nums;
background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}
.mgrid .mod h4{ margin: 0 0 4px; }
.rung .r-num{
font-family: var(--font-display); font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1; letter-spacing: 0;
font-variant-numeric: tabular-nums;
background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}
.area .n{ background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); }
@media (max-width: 720px){
.rung{ grid-template-columns: 68px 1fr; }
.rung .r-num{ order: 0; }
.rung .r-cta{ grid-column: 2; justify-self: start; }
}
/* ---- Education: the Coming soon is the headline of the page (owner 2026-09-26) ---- */
.soon-hero{ margin: 0 0 clamp(34px,6vh,64px); display: flex; align-items: center; justify-content: center; gap: clamp(14px,2.4vw,32px); }
.soon-hero::before{ content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(270deg, rgba(198,155,60,.6), transparent); }
.soon-hero::after{ content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(198,155,60,.6), transparent); }
.soon.soon--hero{
font-family: var(--font-display); font-weight: 400; text-transform: uppercase; white-space: nowrap;
font-size: clamp(1.9rem, 8.6vw, 5.6rem); line-height: 1; letter-spacing: .06em;
border: 0; border-radius: 0; padding: 0; gap: clamp(14px,1.8vw,22px);
background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0 18px rgba(228,200,122,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
.soon.soon--hero::before{ display: none; }
html[data-theme="light"] .soon.soon--hero{ filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
/* ---- the pressed mark (login page, verbatim) ---- */
#seqMark{
display:none;
position:fixed; inset:0; z-index:0; pointer-events:none; background:transparent;
--mark: clamp(260px, 44vmin, 560px);
filter: drop-shadow(0 0 calc(var(--mark)*.006) rgba(247,228,172,.95))
drop-shadow(0 0 calc(var(--mark)*.022) rgba(226,186,96,.70))
drop-shadow(0 0 calc(var(--mark)*.060) rgba(198,155,60,.40));
}
html[data-route]:not([data-route="home"]) #seqMark{ display:block; }
/* it steps back when the footer arrives, so it never sits behind the dense footer text */
#seqMark{ transition: opacity .45s ease; }
html.mark-rest #seqMark{ opacity: 0; }
#seqMark i{
position:absolute; inset:0; display:block; background-color:transparent;
-webkit-mask: var(--seq-mark) center / var(--mark) auto no-repeat;
mask: var(--seq-mark) center / var(--mark) auto no-repeat;
background-image:
radial-gradient(circle at 34% 28%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 66%),
radial-gradient(circle at 72% 78%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,0) 68%),
var(--seq-canvas);
background-position: center, center, center;
background-size: var(--mark) auto, var(--mark) auto, cover;
background-repeat: no-repeat, no-repeat, no-repeat;
}
html[data-theme="light"] #seqMark{
filter: drop-shadow(0 0 calc(var(--mark)*.006) rgba(2,90,79,.90))
drop-shadow(0 0 calc(var(--mark)*.026) rgba(2,90,79,.56))
drop-shadow(0 0 calc(var(--mark)*.068) rgba(2,90,79,.30));
}
html[data-theme="light"] #seqMark i{
background-image:
radial-gradient(circle at 34% 28%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.16) 40%, rgba(255,255,255,0) 66%),
radial-gradient(circle at 72% 78%, rgba(120,95,40,.22) 0%, rgba(120,95,40,.07) 40%, rgba(120,95,40,0) 68%),
var(--seq-canvas);
}
/* ---- The Firm sub-tabs (Our Story · The Method · FAQ) ---- */
.subnav-wrap{ padding-bottom: clamp(18px, 3vh, 30px); }
.subnav{ display:flex; flex-wrap:wrap; gap:6px; }
.subnav a{ font-family:var(--font-sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--sage); padding:8px 14px; border:1px solid var(--hairline-faint); border-radius:2px; background:rgba(5,19,15,.35); }
.subnav a:hover{ color:var(--ivory); border-color:var(--hairline); }
.view[data-view="firm"] .subnav a[data-sub="firm"],
.view[data-view="method"] .subnav a[data-sub="method"],
.view[data-view="faq"] .subnav a[data-sub="faq"]{ color:var(--gold-champ); border-color:var(--hairline); }
html[data-theme="light"] .subnav a{ background:rgba(255,255,255,.6); }
/* ---- Insurance / Business Finance / Education grids ---- */
.ins-grid, .fin-grid, .edu-grid{ display:grid; gap:clamp(12px,1.8vw,18px); }
.ins-grid{ grid-template-columns:repeat(4,1fr); }
.fin-grid{ grid-template-columns:repeat(3,1fr); }
.edu-grid{ grid-template-columns:repeat(2,1fr); }
.ins-grid .org-ent p, .fin-grid .org-ent p{ margin:0; }
.ins-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,18px); margin-top:clamp(28px,4vh,44px); }
.ins-steps .step{ padding-top:16px; border-top:1px solid var(--hairline); }
.ins-steps .step .n{ font-family:var(--font-mono); font-size:.72rem; color:var(--gold); }
.ins-steps .step h4{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; margin:6px 0 6px; color:var(--ivory); }
.ins-steps .step p{ margin:0; font-family:var(--font-sans); font-size:.94rem; color:var(--sage); }
.ins-note{ margin:clamp(22px,3vh,30px) auto 0; max-width:88ch; text-align:center; font-family:var(--font-sans); font-size:.82rem; line-height:1.55; color:var(--sage-dim); }
.fin-lead{ margin:0 0 14px; font-family:var(--font-sans); font-size:.98rem; color:var(--sage); }
.edu-grid .co-tech{ background:var(--fam-card); }
.edu-grid .co-tech h4{ margin-top:4px; }
.edu-fine{ margin:clamp(20px,3vh,28px) 0 0; text-align:center; font-family:var(--font-sans); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.soon--plan{ border-style:solid; }
@media (max-width:960px){ .ins-grid{ grid-template-columns:1fr 1fr; } .fin-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .ins-grid, .fin-grid, .edu-grid, .ins-steps{ grid-template-columns:1fr; } }