/* =============================================
AAVINYAA STRATEGIES - GLOBAL STYLESHEET
Neuropelvic Aesthetic / Aavinyaa Strategies Content
Fonts are loaded via tags in each page's , not @import here.
A CSS @import is only discovered once the browser has already fetched and
started parsing this file, which serialises the font request behind it -
that round-trip is what produced the "loading" glitch of body text
swapping from the fallback (Arial/sans-serif) to IBM Plex Sans/DM Mono
partway through render. The tags let the browser discover and
start the font fetch the moment it parses , in parallel with this
file, so the swap happens sooner and is far less visible.
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Author display rules (.challenge-item{display:flex} etc.) outrank the UA's
[hidden]{display:none}, so setting el.hidden would not otherwise hide them. */
[hidden] { display: none !important; }
/* The header is fixed, so an anchor jump would otherwise land its target
underneath it. */
[id] { scroll-margin-top: calc(var(--nav-height) + 24px); }
html {
scroll-behavior: smooth;
font-size: 16px;
background: #ffe3b8;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: 'IBM Plex Sans', Arial, sans-serif;
background: #ffe3b8;
color: #1b1917;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(255,90,67,.18);
overscroll-behavior-y: none;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; text-underline-offset: .22em; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
::selection { color: #11100f; background: #ff5a43; }
:focus-visible { outline: 3px solid #ff5a43; outline-offset: 4px; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; line-height: 1.2; }
p { line-height: 1.7; color: var(--color-text); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }
/* 20260814 template world: editorial black, poppy and beige. */
:root {
--color-bg: #f2e5ce;
--color-text: #1b1917;
--color-muted: #000000;
--color-accent: #982819;
--color-accent-hover: #771d12;
--color-border: rgba(17,16,15,.22);
--color-bg-light: #fff8ec;
--font-main: 'IBM Plex Sans', Arial, sans-serif;
--font-mono: 'DM Mono', monospace;
--nav-height: 78px;
--max-width: 1440px;
--transition: 0.2s ease;
--black: #11100f;
--red: #ff5a43;
--red-dark: #c93424;
--logo-cherry: #d2042d;
--beige: #ffe3b8;
--cream: #fff9ef;
--hero-top-padding: clamp(2.75rem, 5vw, 4.5rem);
--hero-label-gap: clamp(1.5rem, 2.6vw, 2.75rem);
--hero-copy-gap: clamp(2rem, 3vw, 3rem);
--banner-padding: var(--hero-top-padding) clamp(1.25rem, 7vw, 7rem) clamp(4rem, 8vw, 7rem);
/* FIXED, never fluid. */
--nav-link-fs: 1.1rem;
--logo-tagline-fs: 1rem;
--logo-name-fs: 1.125rem;
--nav-cta-pad-x: 1.1rem;
--logo-mark-size: 2.5rem;
--nav-gap: 2.5rem;
}
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; height: var(--nav-height); background: rgba(17,16,15,.96); color: var(--cream); border-bottom: 1px solid rgba(255,248,236,.14); backdrop-filter: blur(14px); }
/* On a notched iPhone in landscape the notch eats into the left or right edge,
depending on which way the phone was turned. Both insets are 0 everywhere
else, so this costs nothing on other devices. */
.site-header .container {
display: flex; width: min(calc(100% - 2.5rem), var(--max-width)); height: 100%;
align-items: center; justify-content: space-between;
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; gap: .72rem; color: var(--cream); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.site-logo svg { width: var(--logo-mark-size); height: var(--logo-mark-size); flex: none; }
.site-logo svg path { fill: var(--logo-cherry) !important; }
.site-logo svg circle { fill: var(--beige) !important; }
.logo-text { display: grid; gap: .1rem; line-height: 1; }
.logo-name { color: var(--logo-cherry); font-family: var(--font-main); font-size: var(--logo-name-fs); font-weight: 600; letter-spacing: -.03em; }
.site-logo .logo-strategies { color: #fff; font-weight: 500; }
.site-logo .logo-investments { color: var(--logo-cherry); }
.logo-tagline { color: rgba(255,248,236,.82); font-family: var(--font-mono); font-size: var(--logo-tagline-fs); letter-spacing: 0; text-transform: none; }
.site-nav { display: flex; align-items: center; gap: var(--nav-gap); }
.site-nav a { position: relative; color: rgba(255,248,236,.8); font-family: var(--font-mono); font-size: var(--nav-link-fs); font-weight: 500; letter-spacing: 0; word-spacing: -0.15em; text-transform: none; transition: color var(--transition); white-space: nowrap; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--cream); }
.site-nav .nav-cta { display: inline-block; text-align: center; padding: 0 18px; line-height: 50px; font-weight: 600; color: var(--black) !important; background: var(--beige); border: 2px solid var(--black) !important; border-radius: 30px; box-shadow: var(--black) 4px 4px 0 0 !important; font-size: 18px !important; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
@media (min-width: 768px) { .site-nav .nav-cta { min-width: 120px; padding: 0 25px; } }
.nav-toggle { border-color: rgba(255,248,236,.45); }
.nav-toggle span { background: var(--cream); }
/* Navigation interaction details: animated underline, active colour, CTA states, hamburger. */
.site-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1.5px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav a.active:not(:hover) { color: var(--color-accent); }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: #000; color: #fff !important; }
.nav-cta:active { box-shadow: var(--black) 2px 2px 0 0 !important; transform: translate(2px, 2px); }
/* The three bars are 22x2 with 5px gaps - about 24px of ink. The button is
sized to the 44x44 minimum from Apple's HIG and WCAG 2.5.5 and the bars are
centred inside it, so the visible mark is unchanged but the strike area is
nearly three times larger. */
.nav-toggle {
display: none; flex-direction: column; justify-content: center; align-items: center;
gap: 5px; background: none; border: none; padding: 0;
min-width: 44px; min-height: 44px; margin-right: -10px;
touch-action: manipulation;
}
.nav-toggle span { display: block; width: 22px; height: 2px; transition: all var(--transition); }
/* Header width tiers. Type never changes size here - only --nav-gap shrinks and
the tagline drops, both of which buy back horizontal space without touching
a single font-size. A common 1366px-wide laptop can report as little as
~1349px of usable width once browser chrome and the scrollbar are counted,
so the hamburger breakpoint sits at 1219px - well clear of that - rather
than immediately below the nav's natural collision point. Deliberately
separate from the 900px layout breakpoint used by the door grid / stat rows
further down. */
@media (max-width: 1399px) { :root { --nav-gap: 1rem; } }
@media (max-width: 1219px) { .nav-toggle { display: flex; } }
@media (max-width: 479px) { .logo-tagline { display: none; } }
.hero { position: relative; min-height: calc(100svh - var(--nav-height)); margin-top: var(--nav-height); padding: 0; overflow: hidden; color: var(--cream); background: var(--black) !important; border: 0; }
.hero::before, .hero::after { content: ''; position: absolute; border: 1px solid rgba(242,229,206,.23); border-radius: 50%; pointer-events: none; }
.hero::before { width: 48vw; height: 48vw; right: -11vw; top: -15vw; }
.hero::after { width: 30vw; height: 30vw; right: 5vw; top: 0; border-color: rgba(255,90,67,.75); }
.hero-inner { position: relative; z-index: 1; min-height: calc(100svh - var(--nav-height)); }
.hero-content { padding: var(--banner-padding); }
.sh-label, .mv-title, .mv-label, .section-head .sh-label { color: var(--beige); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.hero-content h1 { max-width: 9ch; margin: var(--hero-label-gap) 0 var(--hero-copy-gap); color: var(--cream) !important; font-size: clamp(3.7rem, 8vw, 6rem) !important; line-height: .9; letter-spacing: -0.04em; font-weight: 600; }
.hero-content p { max-width: 32rem; color: rgba(255,248,236,.72) !important; font-size: 1rem; line-height: 1.65; }
.hero-visual { min-height: 30rem; }
.hero-visual svg { width: min(100%, 30rem); filter: drop-shadow(0 1.2rem 2rem rgba(0,0,0,.2)); }
.hero-buttons { gap: 1rem; }
.action-btn { border: 2px solid currentColor !important; box-shadow: currentColor 4px 4px 0 0 !important; border-radius: 30px !important; }
.link-btn { border-bottom-width: 1px; }
.hero-buttons .link-btn, .mission-block .link-btn, .cta-section .link-btn { color: var(--cream); border-bottom-color: rgba(255,248,236,.6); }
.hero-buttons .action-btn, .cta-section .action-btn { color: var(--black); background: var(--red); border-color: var(--red); }
.section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.mv-band { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 7rem); color: var(--black); background: var(--red); border: 0; }
.mv-band::before, .mv-band::after { border-color: rgba(255,248,236,.28); }
.mv-head { margin-bottom: 3rem; text-align: left; }
.mv-head .mv-title, .mv-label { color: var(--black); }
.mv-head h2 { color: var(--black); }
.mv-grid::before { background: rgba(255,248,236,.35); }
.mv-col { padding: 1.5rem 3.5rem; }
.mv-col:first-child { padding-left: 0; }
.mv-col:last-child { padding-right: 0; }
.mv-label::before { background: var(--cream); }
.mv-statement { max-width: 34rem; color: rgba(17,16,15,.82); text-align: left; }
.mv-attr { color: rgba(17,16,15,.68); }
.mv-arrow { color: var(--black); background: var(--cream); box-shadow: 0 .5rem 1.2rem rgba(17,16,15,.2); }
.cta-section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 7rem); color: var(--black); background: var(--beige); }
.cta-section .container { max-width: var(--max-width); }
.cta-section h2 { max-width: 10ch; }
.cta-section p { max-width: 28rem; color: var(--color-muted); }
/* Portal and horizontal-page surfaces inherit the template rhythm. */
.page-hero { margin-top: var(--nav-height); padding: var(--banner-padding); color: var(--cream); text-align: left; background: var(--black); border-bottom: 1px solid var(--color-border); }
.page-hero h1 { max-width: 14ch; margin: var(--hero-label-gap) 0 var(--hero-copy-gap); color: var(--cream); font-size: clamp(3.2rem, 8vw, 6rem); line-height: .88; letter-spacing: -0.04em; text-align: left; text-wrap: balance; }
.page-hero p { max-width: 640px; margin: 0; color: rgba(255,248,236,.72); font-size: 1.1rem; text-align: left; }
.data-table, .policy-box, .service-card, .team-card { background: var(--cream); border-color: var(--color-border); }
.data-table th { color: var(--black); background: var(--beige); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.data-table td { color: var(--color-text); }
.lens-chip, .sc-tag { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.theme-hero { position: relative; min-height: calc(78svh - var(--nav-height)); margin-top: var(--nav-height); padding: 0; overflow: hidden; color: var(--cream); background: var(--black) !important; }
.theme-hero::before, .theme-hero::after { content: ''; position: absolute; border: 1px solid rgba(242,229,206,.24); border-radius: 50%; pointer-events: none; }
.theme-hero::before { width: 45vw; height: 45vw; right: -12vw; top: -15vw; }
.theme-hero::after { width: 28vw; height: 28vw; right: 7vw; top: 5vw; border-color: rgba(255,90,67,.78); }
.th-inner { position: relative; z-index: 1; width: min(100%, var(--max-width)); min-height: calc(78svh - var(--nav-height)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; }
.th-content { padding: var(--banner-padding); }
.th-content h1 { max-width: 14ch; margin: var(--hero-label-gap) 0 var(--hero-copy-gap); color: var(--cream) !important; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .88; letter-spacing: -0.04em; font-weight: 500; text-align: left; text-wrap: balance; }
.th-sub { max-width: 38rem; color: rgba(255,248,236,.72) !important; font-size: 1.04rem; line-height: 1.65; }
.th-buttons .action-btn { color: var(--black); background: var(--red); border-color: var(--red); }
.th-buttons .link-btn { color: var(--cream); border-bottom-color: rgba(255,248,236,.6); }
.th-visual { min-height: 22rem; display: grid; place-items: center; }
.th-icon { display: grid; width: clamp(10rem, 22vw, 18rem); height: clamp(10rem, 22vw, 18rem); place-items: center; border: 1px solid rgba(242,229,206,.45); border-radius: 50%; color: var(--beige); box-shadow: 0 0 0 2rem rgba(233,74,49,.1), 0 0 0 4rem rgba(242,229,206,.04); }
.th-icon svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.1; }
.band-alt { background: var(--cream) !important; }
.service-card, .policy-box, .team-card { box-shadow: 0 .75rem 1.8rem rgba(17,16,15,.10); }
@media (max-width: 900px) {
.th-inner { grid-template-columns: 1fr; min-height: 0; }
.th-content { padding: var(--banner-padding); }
.th-visual { min-height: 15rem; padding-bottom: 4rem; }
}
/* Mobile nav panel. Must stay tied to the header's own hamburger breakpoint
(the .nav-toggle rule above), NOT to the 900px layout breakpoint below it.
If these two numbers ever drift apart there is a band where the toggle is
visible but clicking it reveals nothing. */
@media (max-width: 1219px) {
.site-nav { position: absolute; top: var(--nav-height); right: 1.25rem; display: none; min-width: 15rem; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem; background: var(--beige); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.3); }
.site-nav.open { display: flex; }
.site-nav a { padding: 1rem; color: var(--black); font-size: 1.2rem; }
.site-nav .nav-cta { padding: .95rem 1.25rem; color: var(--black); background: var(--red); font-size: 1.2rem !important; }
}
@media (max-width: 900px) {
.mv-grid { grid-template-columns: 1fr; }
.mv-grid::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
.mv-col, .mv-col:first-child, .mv-col:last-child { padding: 2rem 0; }
.mv-arrow { transform: translate(-50%, -50%) rotate(90deg); }
}
@media (max-width: 560px) {
.hero-content h1, .page-hero h1 { font-size: clamp(3rem, 16vw, 5.4rem); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* BUTTONS (button7.css / .button-74) */
.btn { display: inline-block; text-align: center; padding: 0 18px; line-height: 50px; font-size: 18px; font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); border-radius: 30px; }
@media (min-width: 768px) { .btn { min-width: 120px; padding: 0 25px; } }
.btn-primary { background: var(--color-accent); color: #fff; border: 2px solid var(--color-accent); box-shadow: var(--color-accent) 4px 4px 0 0; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { box-shadow: var(--color-accent) 2px 2px 0 0; transform: translate(2px, 2px); }
.btn-secondary { background: transparent; color: var(--color-text); border: 2px solid var(--color-text); box-shadow: var(--color-text) 4px 4px 0 0; }
.btn-secondary:hover { background: var(--color-text); color: #fff; }
.btn-secondary:active { box-shadow: var(--color-text) 2px 2px 0 0; transform: translate(2px, 2px); }
/* ACTION BUTTON - the primary site action (button7.css / .button-74).
Used only where a click performs an action (contact form, email). */
.action-btn {
display: inline-block; text-align: center;
font-family: var(--font-main); font-size: 18px; font-weight: 600; letter-spacing: 0;
text-decoration: none; text-transform: none; color: #000; cursor: pointer;
border: 2px solid currentColor; border-radius: 30px; padding: 0 18px; line-height: 50px; background: #fff;
box-shadow: currentColor 4px 4px 0 0;
position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation;
transition: background .2s ease, color .2s ease;
}
.action-btn:hover { background: #000; color: #fff; }
.action-btn:active { box-shadow: currentColor 2px 2px 0 0; transform: translate(2px, 2px); }
@media (min-width: 768px) { .action-btn { min-width: 120px; padding: 0 25px; } }
/* TEXT LINK - for navigation and in-page jumps. A link, never a button. */
.link-btn {
display: inline-block;
font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
color: var(--color-text); text-decoration: none;
border-bottom: 2px solid var(--color-border); padding-bottom: 3px;
transition: color var(--transition), border-color var(--transition);
}
.link-btn:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-muted); }
/* POLICY BOX */
.policy-box { background: var(--color-bg-light); border: 1px solid var(--color-border); border-left: 1px solid var(--color-border); padding: 28px 32px; margin-top: 40px; }
.policy-box h3 { margin-bottom: 12px; }
.policy-box p { font-size: 1rem; }
/* MISSION BLOCK (dark) */
.mission-block { background: var(--color-text); color: #fff; padding: 28px 80px; position: relative; overflow: hidden; }
.mission-block::before { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border: 60px solid rgba(255,89,0,0.12); border-radius: 50%; }
.mission-block h2 { color: #fff; margin-bottom: 20px; max-width: 640px; }
.mission-block p { color: rgba(255,255,255,0.65); max-width: 600px; margin-bottom: 32px; }
@media (max-width: 768px) { .mission-block { padding: 48px 24px; } }
/* CTA SECTION */
.cta-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); text-align: center; padding: 64px 40px 28px; }
.cta-section h2 { margin-bottom: 16px; }
.cta-section p { margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-section .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* FOOTER */
.site-footer { background: var(--color-text); color: #fff; padding: 28px 0 0; margin-top: 64px; }
.footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-bottom: 12px; }
.footer-block { color: rgba(255,248,236,.78); font-size: 0.8125rem; line-height: 1.5; max-width: 480px; }
.footer-block.right { text-align: right; }
.footer-line { display: flex; align-items: flex-start; gap: 8px; color: #fff; }
.footer-line a { color: var(--cream); transition: color var(--transition); }
.footer-line a:hover { color: var(--color-accent); }
.footer-ic { width: 16px; height: 16px; fill: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.footer-note { font-size: 0.7rem; color: rgba(255,248,236,.55); margin-top: 4px; max-width: 430px; line-height: 1.4; }
.footer-top .footer-social { justify-content: center; gap: 18px; }
.footer-top .footer-social a { width: auto; height: auto; border: none; background: transparent; color: rgba(255,248,236,.7); }
.footer-top .footer-social a:hover { border-color: transparent; color: var(--color-accent); }
.footer-top .footer-social a svg { width: 20px; height: 20px; }
.footer-divider { border-top: 1px solid rgba(255,248,236,.2); margin-bottom: 12px; }
.footer-bottom2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: rgba(255,248,236,.85); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0; text-transform: none; padding-bottom: 12px; }
.footer-tm { justify-self: start; margin: 0; }
.footer-reg { justify-self: center; text-align: center; color: #e0a63c; font-size: 0.8rem; font-weight: 500; margin: 0; }
.footer-home { justify-self: end; display: inline-block; margin-top: 0; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: #e0a63c; border: 1px solid rgba(224,166,60,.55); padding: 6px 14px; transition: color var(--transition), background var(--transition), border-color var(--transition); }
.footer-home:hover { background: rgba(224,166,60,.14); border-color: #e0a63c; color: #e0a63c; }
@media (max-width: 768px) { .footer-top { grid-template-columns: 1fr; gap: 14px; text-align: left; } .footer-block.right { text-align: left; } .footer-top .footer-social { justify-content: flex-start; } .footer-bottom2 { grid-template-columns: 1fr; text-align: left; } .footer-bottom2 .footer-tm, .footer-bottom2 .footer-reg, .footer-bottom2 .footer-home { justify-self: start; } }
/* ── TOUCH TARGETS ──
Inline text links sit at 20-26px tall, under the 44px minimum in Apple's HIG
and WCAG 2.5.5. Scoped to `pointer: coarse` so only touch devices are
affected, and expanded with an invisible overlay rather than padding so the
visual layout is byte-identical on every device - a padding change here
would reflow the footer on phones. */
@media (pointer: coarse) {
.footer-line a,
.footer-privacy,
.footer-home,
.not-found__links a,
.container p > a,
.link-btn,
.ch-link,
.door-cta,
.site-logo { position: relative; }
.footer-line a::before,
.footer-privacy::before,
.footer-home::before,
.not-found__links a::before,
.container p > a::before,
.link-btn::before,
.ch-link::before,
.door-cta::before,
.site-logo::before {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
height: 44px;
transform: translateY(-50%);
/* Sits behind the text so it never blocks selection or the underline. */
z-index: -1;
}
/* Buttons and icon-only links are sized directly - they are already blocks,
so a min-height costs nothing and is more robust than an overlay. */
.action-btn,
.btn,
.tool-run,
button[type="submit"] {
min-height: 44px;
touch-action: manipulation;
}
/* Icon-only social links render at 18-36px; pad them out to a real target. */
.team-social a,
.footer-social a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px;
}
.team-social { margin: 0; }
}
/* =============================================
RESTRUCTURE - SHARED COMPONENTS
Two axes: WHO (four doors) x WHAT (four lenses).
No new colours. Everything derives from the tokens above.
============================================= */
/* ── THE FOUR DOORS ── */
.door-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--color-border); border: 1px solid var(--color-border);
}
.door-card {
background: #fff; padding: 44px 30px 36px; position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 14px; transition: background var(--transition);
}
.door-card::before { content: none; }
.door-card:hover { background: var(--color-bg-light); }
.door-card:hover::before { content: none; }
.door-icon { width: 34px; height: 34px; margin-bottom: 2px; }
.door-icon svg { width: 100%; height: 100%; stroke: var(--color-accent); fill: none; stroke-width: 1.5; }
.door-num { font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.door-card h3 { max-width: 19ch; min-height: 2.4em; font-size: 1.3rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.door-promise { min-height: 3.2em; font-size: 1rem; font-style: normal; font-weight: 700; color: var(--color-muted); line-height: 1.6; }
.door-list { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.door-list li { font-size: 0.875rem; color: var(--color-muted); line-height: 1.5; padding-left: 15px; position: relative; }
.door-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--color-accent); }
.door-cta {
margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px;
font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
color: var(--color-text); transition: color var(--transition);
}
.door-cta::after { content: '→'; transition: transform var(--transition); }
.door-card:hover .door-cta { color: var(--color-accent); }
.door-card:hover .door-cta::after { transform: translateX(5px); }
@media (max-width: 1100px) { .door-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .door-grid { grid-template-columns: 1fr; } .door-card { padding: 36px 24px 30px; } }
/* Inline lens tag - goes on every challenge card and every service card */
.lens-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lens-chip {
display: inline-flex; align-items: center; gap: 6px; width: fit-content;
font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
color: var(--color-accent); background: rgba(255,89,0,0.04);
border: 1px solid rgba(255,89,0,0.35); padding: 4px 9px;
}
.lens-chip::before { content: ''; width: 5px; height: 5px; background: var(--color-accent); flex-shrink: 0; }
/* ── STAT ROW ──
Column count via --cols, e.g. style="--cols:4" */
.stat-row {
display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 1px;
background: var(--color-border); border: 1px solid var(--color-border);
}
.stat { background: #fff; padding: 30px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.stat-val { font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); }
.stat-val em { font-style: normal; color: var(--color-accent); }
.stat-key { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-muted); line-height: 1.45; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
/* ── CROSS-SECTOR "HOW THIS CONNECTS" ──
Mandatory closing band on all four audience pages. */
.crossref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.crossref-item { background: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: background var(--transition); }
.crossref-item:hover { background: var(--color-bg-light); }
.crossref-item .xr-label { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.crossref-item h3 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.crossref-item p { font-size: 1rem; line-height: 1.65; flex: 1; }
.crossref-item .xr-link { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-text); transition: color var(--transition); }
.crossref-item .xr-link::after { content: ' →'; }
.crossref-item:hover .xr-link { color: var(--color-accent); }
.crossref-grid.xr-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .crossref-grid.xr-four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .crossref-grid, .crossref-grid.xr-four { grid-template-columns: 1fr; } }
/* ── DATA TABLE (buyer's checklist, ARPOB by tier, payer caps) ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; border: 1px solid var(--color-border); }
.data-table th {
text-align: left; padding: 14px 18px; background: var(--color-bg-light);
font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
color: var(--color-muted); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
}
.data-table th:last-child { border-right: none; }
.data-table td {
padding: 16px 18px; font-size: 0.875rem; line-height: 1.6; color: var(--color-muted);
border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); vertical-align: top;
}
.data-table td:last-child { border-right: none; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:first-child { color: var(--color-text); font-weight: 600; }
.data-table tbody tr:hover td { background: rgba(255,89,0,0.02); }
.table-note { font-size: 0.875rem; color: var(--color-muted); opacity: 1; margin-top: 12px; line-height: 1.6; }
/* Heading for each filterable group */
.group-head { margin: 64px 0 24px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.filter-group:first-of-type .group-head { margin-top: 40px; }
.group-head h2 { font-size: 1.6rem; color: var(--color-accent); }
.group-head .gh-label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
/* ── SERVICE CARDS ──
Used by the audience pages in their Services band. */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin-bottom: 40px; }
.service-card { background: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: background var(--transition); }
.service-card:hover { background: var(--color-bg-light); }
.service-card .sc-icon { width: 36px; height: 36px; }
.service-card .sc-icon svg { width: 100%; height: 100%; stroke: var(--color-accent); fill: none; stroke-width: 1.75; }
.service-card .sc-num { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.service-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.service-card p { font-size: 1rem; color: var(--color-muted); line-height: 1.65; flex: 1; }
.service-card .sc-tag { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent); border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 4px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
/* ── CHALLENGE CARDS (audience microsites) ── */
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.challenge-item { background: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: background var(--transition); }
.challenge-item:hover { background: var(--color-bg-light); }
.challenge-item .ch-num { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; color: var(--color-accent); }
.challenge-item h3 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.challenge-item p { font-size: 1rem; line-height: 1.7; flex: 1; }
.challenge-item .ch-src { font-size: 0.95rem; line-height: 1.5; color: var(--color-muted); opacity: 1; }
.challenge-item .ch-link { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-text); transition: color var(--transition); }
.challenge-item .ch-link::after { content: ' \2192'; }
.challenge-item:hover .ch-link { color: var(--color-accent); }
@media (max-width: 900px) { .challenge-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .challenge-grid { grid-template-columns: 1fr; } }
/* ── COMMERCIAL MODEL BAND (how we charge, per vertical) ── */
.model-band { border: 1px solid var(--color-border); background: var(--color-bg-light); padding: 40px; margin-top: 8px; }
.model-band > .mb-label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.model-band > h3 { font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin: 10px 0 12px; }
.model-band > p { font-size: 1rem; line-height: 1.8; max-width: 860px; }
.model-grid { display: grid; grid-template-columns: repeat(var(--mcols, 2), 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin-top: 28px; }
.model-item { background: #fff; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.model-item .mi-stage { font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.model-item h3 { font-size: 1.15rem; font-weight: 700; color: var(--color-text); line-height: 1.35; }
.model-item p { font-size: 1rem; line-height: 1.7; }
.model-item .mi-terms { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.model-item .mi-terms li { font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); padding-left: 16px; position: relative; }
.model-item .mi-terms li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--color-accent); }
.model-note { font-size: 0.875rem; line-height: 1.75; color: var(--color-muted); margin-top: 22px; padding-left: 18px; border-left: 1px solid var(--color-border); }
@media (max-width: 900px) { .model-grid { grid-template-columns: 1fr; } .model-band { padding: 28px 22px; } }
/* ── SECTION HEAD (label + heading + intro, used across new pages) ── */
.section-head { max-width: 760px; margin-bottom: 26px; }
.section-head .sh-label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); margin-bottom: 12px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1rem; line-height: 1.75; }
/* Dark band on light-background pages, and light text utilities */
.band-alt { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* ── ACCESSIBILITY (WCAG 2.1) ── */
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--color-accent);
color: #fff;
font-weight: 700;
font-family: var(--font-mono);
border-radius: 4px;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 1rem;
}
/* ── HOMEPAGE CONSOLIDATED COMPONENTS ── */
.hero { position: relative; min-height: calc(100svh - var(--nav-height)); margin-top: var(--nav-height); overflow: hidden; border-bottom: 1px solid rgba(255,249,239,.18); background: var(--black); }
.hero-inner { position: relative; z-index: 1; display: block; min-height: calc(100svh - var(--nav-height)); max-width: var(--max-width); margin: 0 auto; }
.hero-content { position: relative; z-index: 1; display: flex; width: min(100%, 52rem); min-height: calc(100svh - var(--nav-height)); flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem); background: transparent; }
.hero-copy-panel { width: fit-content; max-width: 100%; padding: clamp(1.35rem, 2.5vw, 2.25rem); background: rgba(17,16,15,.62); margin-top: -1rem; margin-left: -1.5rem; }
.hero .hero-question { max-width: 15ch; margin: 0; color: var(--cream); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 900; line-height: .96; letter-spacing: -0.01em; text-align: left; text-wrap: balance; }
.hero .hero-question em { font-style: italic; color: #e0a63c; }
.hero-response { max-width: 46rem; margin: clamp(1.5rem, 2.5vw, 2rem) 0 0; color: rgba(255,249,239,.78); font-size: 1.15rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(2rem, 4vw, 3rem); }
.hero-buttons .action-btn { padding: 0 28px; color: var(--black); background: #e0a63c; border-color: #e0a63c; border-radius: 30px; font-size: 18px; font-weight: 600; box-shadow: 0 10px 30px rgba(224,166,60,.35); }
@media (min-width: 768px) { .hero-buttons .action-btn { padding: 0 30px; } }
.hero-buttons .action-btn:hover, .hero-buttons .action-btn:focus-visible { color: var(--black); background: #c98f2b; border-color: #c98f2b; }
.hero-visual { position: absolute; z-index: 0; inset: 0; display: block; min-height: 0; padding: 0; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 34% center; transform: scale(1.28); transform-origin: 35% center; }
/* Mission & Vision band */
.mv-band { background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 48px 40px; position: relative; overflow: hidden; }
.mv-band::before, .mv-band::after { content: ''; position: absolute; width: 300px; height: 300px; border: 56px solid rgba(255,89,0,0.08); border-radius: 50%; }
.mv-band::before { left: -120px; top: -120px; }
.mv-band::after { right: -120px; bottom: -120px; }
.mv-band .mv-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }
.mv-head { text-align: center; margin-bottom: 28px; }
.mv-head .mv-title { font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--black); display: block; }
.mv-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 14px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.mv-grid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.mv-col { padding: 20px 56px; display: flex; flex-direction: column; }
.mv-label { font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--black); display: flex; align-items: center; gap: 10px; margin-bottom: 20px; line-height: 1; }
.mv-label::before { content: ''; width: 8px; height: 8px; background: var(--cream); display: inline-block; }
.mv-statement { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); font-weight: 400; text-align: justify; }
.mv-vision .mv-statement { font-style: italic; }
.mv-statement em { color: var(--black); font-style: normal; font-weight: 600; }
.mv-attr { margin-top: auto; padding-top: 2rem; font-size: 1rem; letter-spacing: 0; text-transform: none; color: rgba(17,16,15,.78); font-weight: 600; }
.mv-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--black); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; z-index: 2; box-shadow: 0 .5rem 1.2rem rgba(17,16,15,.2); }
.mv-cta { text-align: center; margin-top: 2.75rem; }
.mv-band .action-btn { color: var(--black); background: var(--red); border-color: var(--red); }
/* Firm by the numbers */
.firm-title { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 6vw, 7rem) clamp(0.25rem, 0.5vw, 0.5rem); }
.firm-title .firm-title-inner { max-width: var(--max-width); margin: 0 auto; }
.firm-title h2 { margin: 0; font-size: clamp(2.72rem, 6.8vw, 5.1rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; color: var(--color-text); }
.firm-title h2 .brand { color: var(--color-accent); }
.firm-title h2 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.firm-band { padding: clamp(0.5rem, 1vw, 0.9rem) clamp(1.25rem, 6vw, 7rem) clamp(0.5rem, 1vw, 1rem); }
.firm-editorial-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 500px; max-width: var(--max-width); margin: 0 auto; border: 1px solid rgba(17,16,15,.22); }
.firm-editorial-hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; color: var(--cream); background: var(--color-accent); }
.firm-editorial-hero::after { content: '230+'; position: absolute; right: -1.5rem; bottom: -3rem; color: rgba(255,249,239,.08); font-size: clamp(8rem, 20vw, 18rem); font-weight: 700; letter-spacing: -.08em; }
.firm-editorial-eyebrow { position: relative; z-index: 1; color: var(--beige); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.firm-editorial-number { position: relative; z-index: 1; font-size: clamp(6rem, 14vw, 12rem); font-weight: 700; line-height: .72; letter-spacing: -.08em; }
.firm-editorial-label { position: relative; z-index: 1; max-width: 18ch; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.05; }
.firm-editorial-rail { display: grid; background: var(--cream); }
.firm-rail-row { display: grid; grid-template-columns: minmax(7rem, .8fr) 1.2fr; gap: 18px; align-items: center; padding: 22px 26px; border-bottom: 1px solid rgba(17,16,15,.2); }
.firm-rail-row:last-child { border-bottom: 0; }
.firm-rail-num { color: var(--color-accent); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; overflow-wrap: anywhere; }
.firm-rail-row.credential .firm-rail-num { font-size: clamp(1rem, 1.7vw, 1.35rem); }
.firm-rail-label { color: var(--black); font-size: .9rem; font-weight: 600; line-height: 1.4; }
/* Business verticals (Portals) on dark mission block */
#portals .mission-block h2 { font-size: clamp(2.5rem, 4.5vw, 3.5rem); line-height: 1.05; max-width: 900px; white-space: normal; }
#portals .mission-block .container { max-width: 76rem; }
#portals .mission-block p { font-size: clamp(1.2rem, 1.7vw, 1.35rem); max-width: 100%; color: rgba(255,248,236,.78); }
#portals .door-grid { gap: 1px; background: rgba(255,249,239,.15); border-color: rgba(255,249,239,.15); }
#portals .door-card { background: #11100f; color: #fff9ef; padding: 28px 26px 24px; gap: 4px; }
#portals .door-icon { margin-bottom: 0; }
#portals .door-list { gap: 6px; margin-top: 4px; }
#portals .door-cta { padding-top: 8px; }
#portals .door-icon svg { stroke: #ff5a43; }
#portals .door-num { color: #ff5a43; font-size: 1rem; }
#portals .door-card h3 { color: #fff9ef; font-size: 1.6rem; white-space: nowrap; }
#portals .door-promise { color: #fff9ef; font-size: 1.15rem; }
#portals .door-list li { color: #fff9ef; font-size: 1.05rem; }
#portals .door-list li::before { background: #ffe3b8; }
#portals .door-cta { color: #fff9ef; font-size: 1.1rem; }
#portals .door-card:hover { background: var(--color-accent); }
#portals .door-card:hover .door-icon svg { stroke: #e0a63c; }
#portals .door-card:hover .door-num { color: #e0a63c; }
#portals .door-card:hover h3 { color: var(--cream); }
#portals .door-card:hover .door-promise { color: var(--beige); }
#portals .door-card:hover .door-list li { color: var(--beige); }
#portals .door-card:hover .door-cta { color: var(--beige); }
.rotate-word { display: inline-block; width: 5.6em; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #e0a63c; }
@keyframes wordFlash { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } }
.rotate-word.flash { animation: wordFlash .4s ease; }
/* Risk band & emblems */
.risk-band { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); background: var(--beige); }
.risk-graphic { position: absolute; z-index: 0; top: -9rem; right: -11rem; width: clamp(22rem, 40vw, 36rem); height: auto; opacity: .15; pointer-events: none; }
.risk-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }
.risk-eyebrow { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
.risk-head h2 { margin: .8rem 0 1.1rem; font-size: clamp(2.1rem, 3.2vw, 3rem); font-weight: 700; line-height: .95; letter-spacing: -0.03em; color: var(--color-text); text-align: center; }
@media (min-width: 768px) { .risk-head h2 { white-space: nowrap; } }
.risk-intro { max-width: 46rem; font-size: 1.05rem; line-height: 1.6; color: rgba(17,16,15,.78); }
.emblem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 1.5rem; }
.emblem { text-align: center; padding: clamp(0.9rem, 1.5vw, 1.25rem) clamp(0.9rem, 1.8vw, 1.25rem); background: var(--cream); border: 1px solid rgba(17,16,15,.14); border-radius: 18px; }
.ring { position: relative; width: clamp(7.5rem, 11vw, 9rem); height: clamp(7.5rem, 11vw, 9rem); margin: 0 auto clamp(.5rem, 1vw, .75rem); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color-accent) var(--ring-fill, 78%), rgba(17,16,15,.1) var(--ring-fill, 78%) 100%); }
.ring::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: var(--cream); }
.ring span { position: relative; z-index: 2; font-family: var(--font-mono); font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -0.02em; color: var(--color-accent); }
.emblem-fact { font-size: clamp(0.85rem, 1.1vw, 0.95rem); font-weight: 600; color: var(--color-text); line-height: 1.3; }
.emblem-src { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed rgba(17,16,15,.3); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(17,16,15,.6); }
.risk-foot { margin-top: 0; font-family: var(--font-main); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-text); text-align: center; }
.risk-cta { margin-top: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); text-align: center; }
.risk-cta .action-btn { color: var(--black); background: var(--red); border-color: var(--red); }
/* Co-build CTA */
.ticket-cta { display: flex; justify-content: center; margin: 0.5rem auto clamp(2.5rem, 5vw, 4.5rem); }
.ticket-cta .t-btn { display: inline-block; text-align: center; font-family: var(--font-main); font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid var(--color-accent); border-radius: 30px; padding: 0 24px; line-height: 48px; background: var(--color-accent); color: var(--cream); box-shadow: var(--color-accent-hover) 4px 4px 0 0; transition: background .2s, color .2s, border-color .2s; }
.ticket-cta .t-btn:hover { background: #000; border-color: #000; color: #fff; }
/* Mobile & Responsive Adjustments */
@media (max-width: 1100px) {
#portals .door-card h3 { font-size: 1.4rem; white-space: normal; text-wrap: balance; }
}
@media (max-width: 900px) {
.hero-inner { min-height: calc(100svh - var(--nav-height)); }
.hero-content { width: 100%; min-height: calc(100svh - var(--nav-height)); padding: clamp(3rem, 12vw, 5rem) 24px; background: transparent; }
.hero-copy-panel { width: 100%; }
.hero-visual { display: block; min-height: 0; }
.hero-visual img { object-position: 35% center; transform: scale(1.12); transform-origin: 35% center; }
.mv-band { padding: 36px 20px; }
.mv-grid { grid-template-columns: 1fr; }
.mv-grid::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
.mv-col { padding: 24px 24px; }
.mv-arrow { transform: translate(-50%, -50%) rotate(90deg); }
.firm-editorial-split { grid-template-columns: 1fr; }
.emblem-grid { grid-template-columns: 1fr 1fr; }
.risk-graphic { opacity: .08; }
}
@media (max-width: 620px) {
.firm-rail-row { grid-template-columns: 1fr; gap: 7px; }
#portals .door-card h3 { font-size: 1.25rem; white-space: normal; text-wrap: balance; }
}
@media (max-width: 560px) {
.emblem-grid { grid-template-columns: 1fr; }
}