/* ============================================================ thirteen. — landing page Centered structure (trust badge / headline / CTA / floating stat badges / services grid), rendered in the brand voice. Surfaces + hero variants are driven by data-attributes on . ============================================================ */ :root { /* brand constants (surface-independent) */ --purple: #9d6add; --purple-2: #b487ee; --champagne: #c9a96e; --maxw: 1200px; --shell: 1200px; --gutter: 40px; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */ } /* ---------- DARK surface (default) ---------- */ html[data-surface="dark"], html:not([data-surface]) { --bg-0: #0c0a10; --bg-1: #14111b; --bg-2: #1b1724; --fg-1: #f4f1ec; --fg-2: rgba(244, 241, 236, 0.74); --fg-3: rgba(244, 241, 236, 0.52); --fg-4: rgba(244, 241, 236, 0.34); --rule: rgba(244, 241, 236, 0.11); --rule-2: rgba(244, 241, 236, 0.18); --card: #14111b; --card-hover: #1b1724; --badge-bg: rgba(244, 241, 236, 0.035); --badge-border: rgba(244, 241, 236, 0.12); --cta-fg: #0c0a10; --logo-filter: brightness(0) invert(1); /* @kind other */ --wash-1: radial-gradient(58% 50% at 50% 8%, rgba(157,106,221,0.20), transparent 62%); /* @kind color */ --wash-2: radial-gradient(40% 40% at 82% 78%, rgba(201,169,110,0.07), transparent 70%); /* @kind color */ --grain-op: 0.04; /* @kind other */ } /* ---------- LIGHT surface (warm ivory, never pure white) ---------- */ html[data-surface="light"] { --bg-0: #f4f1ec; --bg-1: #ece7de; --bg-2: #e4ddd1; --fg-1: #17131c; --fg-2: rgba(23, 19, 28, 0.70); --fg-3: rgba(23, 19, 28, 0.50); --fg-4: rgba(23, 19, 28, 0.36); --rule: rgba(23, 19, 28, 0.12); --rule-2: rgba(23, 19, 28, 0.20); --card: #efeae1; --card-hover: #e8e1d6; --badge-bg: rgba(23, 19, 28, 0.025); --badge-border: rgba(23, 19, 28, 0.12); --cta-fg: #f4f1ec; --logo-filter: none; /* @kind other */ --purple: #7b46c9; --purple-2: #8d5bd9; --champagne: #a07c39; --wash-1: radial-gradient(58% 50% at 50% 6%, rgba(123,70,201,0.10), transparent 62%); /* @kind color */ --wash-2: radial-gradient(40% 40% at 84% 80%, rgba(160,124,57,0.08), transparent 70%); /* @kind color */ --grain-op: 0; /* @kind other */ } * , *::before, *::after { box-sizing: border-box; } html, body { background: var(--bg-0); color: var(--fg-1); } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background 0.5s var(--ease), color 0.5s var(--ease); } ::selection { background: var(--champagne); color: var(--bg-0); text-shadow: 0 0 10px rgba(201, 169, 110, 0.45); } ::-moz-selection { background: var(--champagne); color: var(--bg-0); } a { color: inherit; text-decoration: none; } /* ---------- Type helpers ---------- */ .cormorant, .italic { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-style: italic; font-weight: 500; letter-spacing: -0.005em; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.02em; color: var(--fg-3); } .mono.up { text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; } .champ { color: var(--champagne); } .pur { color: var(--purple); } em.acc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--champagne); } /* ---------- Wordmark ---------- */ .wm { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-1); line-height: 1; } .wm .dot { color: var(--champagne); margin-left: -0.04em; } /* ============================================================ NAV ============================================================ */ nav.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-0) 78%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--rule); } .nav-inner { max-width: calc(var(--shell) + var(--gutter) * 2); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); } nav.top .brand { font-size: 26px; } nav.top .center { display: flex; gap: 30px; justify-self: center; } nav.top .center a { font-size: 13px; color: var(--fg-2); transition: color 0.2s var(--ease); } nav.top .center a:hover { color: var(--fg-1); } nav.top .center a .d { color: var(--champagne); } nav.top .right { justify-self: end; display: flex; align-items: center; gap: 16px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--badge-border); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-2); background: var(--badge-bg); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgba(157,106,221,0.5); animation: live 2.6s ease-out infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(157,106,221,0.5); } 70% { box-shadow: 0 0 0 9px rgba(157,106,221,0); } 100% { box-shadow: 0 0 0 0 rgba(157,106,221,0); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn .arr { transition: transform 0.25s var(--ease); } .btn:hover .arr { transform: translateX(3px); } .btn.primary { background: var(--purple); color: var(--cta-fg); box-shadow: 0 14px 38px -14px rgba(157,106,221,0.6), inset 0 1px 0 rgba(255,255,255,0.18); } .btn.primary:hover { transform: translateY(-1px); background: var(--purple-2); box-shadow: 0 20px 50px -12px rgba(157,106,221,0.75), inset 0 1px 0 rgba(255,255,255,0.22); } .btn.ghost { color: var(--fg-1); border-color: var(--rule-2); background: transparent; } .btn.ghost:hover { border-color: var(--fg-3); } .btn.sm { padding: 9px 15px; font-size: 12.5px; } /* ============================================================ MAGNETIC CTA — cursor-tracked champagne light, sheen sweep, and a subtle magnetic pull. Distinctive, on-brand. ============================================================ */ .btn.primary.magnetic { position: relative; overflow: hidden; isolation: isolate; transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform 0.18s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); } .btn.primary.magnetic .lbl { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; } /* champagne light that follows the cursor across the button */ .btn.primary.magnetic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(150px 150px at var(--bx, 50%) var(--by, 50%), rgba(247,228,184,0.85), rgba(201,169,110,0.35) 38%, rgba(201,169,110,0) 64%); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .btn.primary.magnetic:hover::before { opacity: 1; } /* specular sheen that sweeps once on hover */ .btn.primary.magnetic::after { content: ""; position: absolute; top: -25%; bottom: -25%; left: -60%; width: 42%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-16deg); opacity: 0; pointer-events: none; } .btn.primary.magnetic:hover::after { animation: sheen 0.85s var(--ease); } @keyframes sheen { 0% { left: -60%; opacity: 0; } 18% { opacity: 0.85; } 100% { left: 130%; opacity: 0; } } .btn.primary.magnetic:hover { transform: translate(var(--tx, 0px), var(--ty, 0px)); background: var(--purple-2); box-shadow: 0 26px 64px -16px rgba(157,106,221,0.85), 0 0 0 1px rgba(247,228,184,0.35), inset 0 1px 0 rgba(255,255,255,0.28); } @media (prefers-reduced-motion: reduce) { .btn.primary.magnetic { transform: none; } .btn.primary.magnetic:hover::after { animation: none; } } /* ============================================================ CURSOR-FOLLOW DOT — a small champagne dot trailing the cursor ============================================================ */ #cursor-dot { position: fixed; top: 0; left: 0; z-index: 200; width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease), width 0.22s var(--ease), height 0.22s var(--ease), background 0.22s var(--ease); will-change: top, left; } #cursor-dot.on { opacity: 0.55; } #cursor-dot.hot { width: 17px; height: 17px; background: var(--purple); opacity: 0.3; } @media (hover: none), (pointer: coarse) { #cursor-dot { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: 96px 40px 88px; overflow: hidden; } .hero .wash { position: absolute; inset: -10% -10% 0; background: var(--wash-1), var(--wash-2); opacity: 0.4; pointer-events: none; } .hero .cursor-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 86% at var(--gx, 50%) -34%, rgba(157,106,221,0.30), transparent 60%), radial-gradient(86% 64% at var(--gx, 50%) -42%, rgba(201,169,110,0.20), transparent 58%); } /* ============================================================ SQUARE GRID — reusable line-grid motif (hero + closer). ============================================================ */ .dot-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6; background-image: linear-gradient(to right, color-mix(in srgb, var(--fg-1) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--fg-1) 8%, transparent) 1px, transparent 1px); background-size: 7px 7px; -webkit-mask: linear-gradient(to bottom, #000 0%, #000 15%, transparent 56%); mask: linear-gradient(to bottom, #000 0%, #000 15%, transparent 56%); } /* hero testimonials — revealed by a cursor spotlight circle */ .hero .testimonials { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); -webkit-mask: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 45%), #000 0%, #000 34%, transparent 66%); mask: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 45%), #000 0%, #000 34%, transparent 66%); } .hero:hover .testimonials { opacity: 1; } /* two side rails in the gutters — fixed readable width, centered in each gutter */ .rail { position: absolute; top: 92px; bottom: 132px; width: 250px; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .rail-l { right: calc(50% + 456px); } .rail-r { left: calc(50% + 456px); } .tcard { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 20px 15px; box-shadow: 0 22px 50px -30px rgba(23, 19, 28, 0.45); text-align: left; } /* travelling neon "snake" outlines — separate unmasked overlay so they stay visible while the spotlight reveals the card content */ .testi-snakes { position: absolute; inset: 0; z-index: 2; pointer-events: none; } @media (max-width: 1439px) { .testi-snakes { display: none; } } .testi-snake { position: absolute; overflow: visible; opacity: 0; transition: opacity 0.7s var(--ease); } .testi-snake.snaking { opacity: 1; } .snake-run { fill: none; stroke: var(--champagne); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 15 85; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--champagne) 85%, transparent)); animation: snakeRun 16s linear infinite; } @keyframes snakeRun { to { stroke-dashoffset: -100; } } @media (prefers-reduced-motion: reduce) { .snake-run { animation: none; } } .tcard .stars { color: var(--champagne); font-size: 12px; letter-spacing: 2px; } .tcard blockquote { margin: 10px 0 12px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--fg-1); } .tcard figcaption { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.5; } /* show on laptops and up (incl. 14" MBP @ 1512px); hidden on tablet/mobile where there's no gutter */ @media (max-width: 1439px) { .hero .testimonials { display: none; } } .hero .inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } /* hero entrance — staggered fade-up on load */ @media (prefers-reduced-motion: no-preference) { .hero .inner > * { animation: heroIn 0.85s var(--ease) both; } .hero .aud-eyebrow { animation-delay: 0.08s; } .hero .copyset { animation-delay: 0.20s; } .hero .cta-row { animation-delay: 0.34s; } .hero .reassure { animation-delay: 0.46s; } } @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* trust badge above headline */ .trust { display: inline-flex; align-items: center; gap: 11px; padding: 7px 8px 7px 12px; border: 1px solid var(--badge-border); background: var(--badge-bg); border-radius: 999px; margin-bottom: 30px; font-size: 12.5px; color: var(--fg-2); } .trust .av { width: 26px; height: 26px; border-radius: 50%; background-image: url('assets/founder-256.jpg'); background-size: cover; background-position: center; border: 1.5px solid var(--bg-0); } .trust .dotmark { color: var(--champagne); font-weight: 600; } .trust b { color: var(--fg-1); font-weight: 500; } /* audience eyebrow with flanking lines */ .aud-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 28px; } .aud-eyebrow .ln { width: 42px; height: 1px; background: var(--champagne); opacity: 0.65; } .aud-eyebrow .txt { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; } /* headline */ .hero h1 { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(44px, 7.2vw, 100px); line-height: 1.08; letter-spacing: -0.038em; color: var(--fg-1); max-width: 17ch; text-wrap: balance; } .hero h1 .hi { display: inline-block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1em; color: var(--champagne); letter-spacing: -0.01em; background-image: linear-gradient(var(--champagne), var(--champagne)); background-size: 100% 0.04em; background-repeat: no-repeat; background-position: 0 96%; padding-bottom: 0.06em; margin-top: 0.04em; } .hero .sub { margin: 34px auto 0; max-width: 50ch; font-size: 18px; line-height: 1.55; color: var(--fg-2); } .hero .sub em.acc { font-size: 20px; } .hero .sub .hl-days { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.42em; color: var(--champagne); letter-spacing: -0.01em; background-image: linear-gradient(var(--champagne), var(--champagne)); background-size: 100% 0.045em; background-repeat: no-repeat; background-position: 0 90%; padding-bottom: 0.04em; margin-left: 0.08em; } .hero .cta-row { margin-top: 38px; display: flex; gap: 13px; align-items: center; justify-content: center; flex-wrap: wrap; } .hero .reassure { margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-3); } .hero .reassure .champ { color: var(--champagne); } /* copy variants: show only the active one */ .copyset { display: none; } html[data-copy="1"] .copyset[data-c="1"], html[data-copy="2"] .copyset[data-c="2"], html[data-copy="3"] .copyset[data-c="3"] { display: block; } html:not([data-copy]) .copyset[data-c="1"] { display: block; } /* ---------- Floating stat badges (variant A, Monk style) ---------- */ .hero .floats { display: none; } .float-badge { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--card); border: 1px solid var(--badge-border); border-radius: 12px; max-width: 172px; box-shadow: 0 18px 44px -22px rgba(0,0,0,0.6); text-align: left; animation: floaty 7s var(--ease) infinite; } html[data-surface="light"] .float-badge { box-shadow: 0 16px 40px -24px rgba(23,19,28,0.35); } .float-badge .v { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 25px; line-height: 1; color: var(--fg-1); letter-spacing: -0.01em; } .float-badge .v .u { font-size: 14px; color: var(--fg-3); font-style: italic; margin-left: 3px; } .float-badge .k { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .float-badge .ic { position: absolute; top: 11px; right: 12px; width: 13px; height: 13px; color: var(--champagne); opacity: 0.85; } .float-badge.f1 { top: 17%; left: 12px; } .float-badge.f2 { top: 51%; left: 26px; animation-delay: -2.3s; } .float-badge.f3 { top: 21%; right: 12px; animation-delay: -1.1s; } .float-badge.f4 { top: 55%; right: 26px; animation-delay: -3.6s; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-9px) rotate(0.4deg); } } @media (prefers-reduced-motion: reduce) { .float-badge { animation: none; } } /* ---------- Inline stat row (variant B) ---------- */ .hero .statrow { display: none; } .statrow { margin-top: 52px; width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--card); } .statrow .cell { padding: 22px 18px; border-right: 1px solid var(--rule); text-align: center; } .statrow .cell:last-child { border-right: none; } .statrow .cell .v { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 38px; line-height: 1; color: var(--fg-1); letter-spacing: -0.02em; } .statrow .cell .v .u { font-size: 16px; color: var(--champagne); } .statrow .cell .k { margin-top: 9px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.5; } /* variant switching */ html[data-hero="a"][data-badges="on"] .hero .floats, html:not([data-hero])[data-badges="on"] .hero .floats, html[data-hero="a"]:not([data-badges]) .hero .floats, html:not([data-hero]):not([data-badges]) .hero .floats { display: block; } html[data-hero="b"] .hero .statrow { display: grid; } /* variant c shows neither — quietest */ /* hero vertical sizing tweaks per variant */ html[data-hero="a"] .hero, html:not([data-hero]) .hero { padding-top: 110px; padding-bottom: 120px; } html[data-hero="c"] .hero { padding-top: 120px; padding-bottom: 130px; } html[data-hero="c"] .hero h1 { font-size: clamp(58px, 9vw, 132px); } /* ============================================================ CLIENT LOGO MARQUEE — real logos, re-backgrounded to ivory, running continuously. "trusted by" ============================================================ */ .marquee { position: relative; z-index: 2; max-width: calc(var(--shell) + var(--gutter) * 2); margin: 0 auto; padding: 6px var(--gutter) 10px; } .marquee-lab { text-align: center; margin-bottom: 26px; } .marquee-viewport { overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee-track { display: flex; width: max-content; animation: marq 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-set { display: flex; align-items: center; gap: 78px; padding-right: 78px; } .logo-item { position: relative; display: inline-flex; align-items: center; padding: 14px 22px; transition: transform 0.3s var(--ease); } .logo-item img { position: relative; z-index: 1; display: block; width: auto; opacity: 0.7; filter: var(--logo-filter, none); transition: opacity 0.3s var(--ease); -webkit-user-drag: none; user-select: none; } /* champagne silhouette revealed on hover — "this one's ours" */ .logo-item::after { content: ""; position: absolute; inset: 14px 22px; z-index: 2; background: var(--champagne); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .logo-item:hover { transform: translateY(-2px); } .logo-item:hover img { opacity: 0; } .logo-item:hover::after { opacity: 1; } /* "your logo next?" placeholder chip in the marquee */ .logo-next { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); border: 1px dashed color-mix(in srgb, var(--champagne) 50%, transparent); border-radius: 999px; padding: 11px 20px; white-space: nowrap; opacity: 0.8; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease); } .logo-next::after { display: none; } .logo-next:hover { opacity: 1; transform: translateY(-2px); border-color: var(--champagne); } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; transform: none; } .marquee-viewport { overflow-x: auto; } } /* ============================================================ NARRATIVE — scroll story. Messages flow upward, sharpening at the optical center and blurring/fading away (depth of field). ============================================================ */ .narrative { position: relative; /* tall scroll runway; JS reads this height. ~one viewport per message. */ height: 300vh; background: var(--bg-0); } .narr-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } .narr-stack { position: absolute; inset: 0; } .narr-msg { position: absolute; top: 50%; left: 50%; width: min(960px, 88vw); margin: 0; transform: translate(-50%, -50%); text-align: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: clamp(28px, 4vw, 60px); line-height: 1.16; letter-spacing: -0.025em; color: var(--fg-1); text-wrap: balance; opacity: 0; will-change: transform, opacity, filter; } .narr-msg .ac { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.08em; color: var(--champagne); letter-spacing: -0.01em; } /* graceful fallback before JS runs / reduced motion: stack them readably */ @media (prefers-reduced-motion: reduce) { .narrative { height: auto; } .narr-sticky { position: static; height: auto; overflow: visible; padding: 80px 0; } .narr-stack { position: static; display: flex; flex-direction: column; gap: 80px; } .narr-msg { position: static; transform: none; opacity: 1; left: auto; top: auto; margin: 0 auto; filter: none !important; } } /* ============================================================ PROMISE — scattered words converge into one sentence on scroll. ============================================================ */ .wordmf { position: relative; height: 460vh; background: var(--bg-0); } .wmf-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } .wmf-track { display: flex; width: 200vw; height: 100%; will-change: transform; } .wmf-progress { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(360px, 54vw); height: 2px; background: color-mix(in srgb, var(--fg-1) 14%, transparent); border-radius: 2px; overflow: hidden; z-index: 5; } .wmf-progress-fill { display: block; height: 100%; width: 100%; background: var(--champagne); transform: scaleX(0); transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .wmf-progress { display: none; } } .wmf-slide { width: 100vw; height: 100%; flex: 0 0 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 60px 5vw; } .wmf-eyebrow { position: relative; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-3); text-align: center; } .wmf-sentence, .wmf-tail, .wmf-big { margin: 0; text-align: center; max-width: 1180px; } .wmf-sentence { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(23px, 2.9vw, 44px); line-height: 1.24; letter-spacing: -0.03em; color: var(--fg-1); } .wmf-tail { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; } .wmf-big { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(34px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -0.02em; color: var(--champagne); margin-top: 10px; } .wmf-sentence .w, .wmf-tail .w, .wmf-big .w { display: inline-block; will-change: transform, opacity; } .wmf-sentence .w.ac { color: var(--champagne); } @media (prefers-reduced-motion: reduce) { .wordmf { height: auto; } .wmf-sticky { position: static; height: auto; padding: 110px 5vw; } .wmf-sentence .w, .wmf-tail .w, .wmf-big .w { transform: none !important; opacity: 1 !important; } } /* ============================================================ GUARANTEE — second slide in the horizontal track. ============================================================ */ .wmf-slide.grt-inner { gap: 8px; }.grt-inner .wmf-eyebrow { margin-bottom: 14px; } .grt-mid { margin: 10px 0 2px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); } .grt-big { margin: 2px 0; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(40px, 8vw, 116px); line-height: 1.02; letter-spacing: -0.04em; color: var(--fg-1); } .grt-big em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; color: var(--champagne); letter-spacing: -0.02em; } .proc-cta { display: flex; justify-content: center; margin-top: 56px; } /* subtle hero link under the CTA */ .hero-assess-link { display: inline-block; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); background-image: linear-gradient(var(--champagne), var(--champagne)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 50% 100%; padding-bottom: 3px; transition: color 0.25s var(--ease), background-size 0.3s var(--ease); } .hero-assess-link:hover { color: var(--champagne); background-size: 100% 1px; } /* ============================================================ TESTIMONIALS — two-column quotes with champagne highlights. ============================================================ */ .testify { background: var(--bg-0); padding: 124px var(--gutter) 132px; } .testify-title { text-align: center; margin: 0 0 78px; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 62px); letter-spacing: -0.038em; line-height: 1.04; color: var(--fg-1); } .testify-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 76px 96px; max-width: 1080px; margin: 0 auto; } /* faint center divider */ .testify-grid::before { content: ""; position: absolute; top: 4%; bottom: 4%; left: 50%; border-left: 1px dashed color-mix(in srgb, var(--fg-1) 16%, transparent); } .tq { text-align: center; margin: 0; } .tq blockquote { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.58; letter-spacing: -0.01em; color: var(--fg-2); text-wrap: pretty; } .tq blockquote .hl { color: var(--champagne); } .tq figcaption { margin-top: 30px; display: flex; flex-direction: column; gap: 7px; align-items: center; } .tq .who { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(21px, 1.8vw, 28px); color: var(--fg-1); } .tq .co { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal-up.in { opacity: 1; transform: none; } @media (max-width: 760px) { .testify { padding: 84px var(--gutter) 90px; } .testify-grid { grid-template-columns: 1fr; gap: 56px; max-width: 520px; } .testify-grid::before { display: none; } .testify-title { margin-bottom: 54px; } } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; } } /* ============================================================ FAQ — accordion. ============================================================ */ .faq { background: var(--bg-0); padding: 124px var(--gutter) 132px; } .faq-head { text-align: center; margin-bottom: 64px; } .faq-title { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(36px, 5vw, 76px); letter-spacing: -0.04em; line-height: 1; color: var(--fg-1); } .faq-sub { margin: 18px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: clamp(16px, 1.7vw, 22px); color: var(--fg-3); letter-spacing: -0.01em; } .faq-list { max-width: 880px; margin: 0 auto; } .faq-item { border-radius: 16px; border: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .faq-item + .faq-item { margin-top: 2px; } .faq-item.open { background: var(--card); border-color: var(--rule); box-shadow: 0 30px 70px -52px rgba(23, 19, 28, 0.4); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 28px; background: none; border: none; cursor: pointer; text-align: left; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: clamp(17px, 1.7vw, 23px); letter-spacing: -0.018em; line-height: 1.3; color: var(--fg-1); } .faq-chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--fg-3); transition: transform 0.35s var(--ease), color 0.3s var(--ease); } .faq-item.open .faq-chev { transform: rotate(180deg); color: var(--champagne); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); } .faq-a-inner { padding: 0 28px 28px; } .faq-a-inner p { margin: 0; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.62; color: var(--fg-2); max-width: 64ch; } .faq-cta { text-align: center; margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .faq-cta-lead { margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); color: var(--fg-1); } @media (max-width: 760px) { .faq { padding: 84px var(--gutter) 96px; } .faq-q { padding: 22px 20px; gap: 18px; } .faq-a-inner { padding: 0 20px 22px; } } /* ============================================================ PROCESS — three cards; the line-art visual draws as you scroll. ============================================================ */ .process { background: var(--bg-0); padding: 124px var(--gutter) 132px; overflow-x: clip; } .proc-head { text-align: center; margin-bottom: 64px; } .proc-title { margin: 14px 0 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 60px); letter-spacing: -0.035em; line-height: 1.05; color: var(--fg-1); } .pcard { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; max-width: 1060px; margin: 0 auto 30px; } .pcard:last-child { margin-bottom: 0; } .pnum { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(80px, 9vw, 130px); line-height: 1; text-align: center; background: linear-gradient(180deg, var(--champagne) 20%, color-mix(in srgb, var(--champagne) 8%, transparent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .pcard-inner { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; padding: 38px 42px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); box-shadow: 0 30px 70px -50px rgba(23, 19, 28, 0.4); } .pvis { display: flex; align-items: center; justify-content: center; } .pvis svg { width: 170px; height: 170px; } .pvis [data-draw] { stroke: var(--fg-1); stroke-width: 1.4; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; /* hidden until scroll draws it */ vector-effect: non-scaling-stroke; } .pbody h3 { margin: 0 0 12px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.02em; color: var(--fg-1); } .pbody p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--fg-2); max-width: 46ch; } .pbody p .assess { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.18em; color: var(--champagne); letter-spacing: -0.01em; } .pbody p strong { font-weight: 700; color: var(--fg-1); } .pbody p .pl-link { color: var(--champagne); font-weight: 600; background-image: linear-gradient(var(--champagne), var(--champagne)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 1px; transition: opacity 0.2s var(--ease); } .pbody p .pl-link:hover { opacity: 0.7; } /* card entrance */ .pcard.reveal { opacity: 0; transform: translateX(90px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .pcard.reveal.in { opacity: 1; transform: none; } @media (max-width: 760px) { .process { padding: 80px var(--gutter) 90px; } .pcard { grid-template-columns: 1fr; gap: 6px; max-width: 100%; } .pnum { text-align: left; font-size: 72px; } .pcard-inner { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; text-align: center; } .pvis svg { width: 130px; height: 130px; } .pbody p { max-width: none; } .pbody { text-align: center; } } @media (prefers-reduced-motion: reduce) { .pvis [data-draw] { stroke-dashoffset: 0; } .pcard.reveal { opacity: 1; transform: none; } } /* per-logo optical sizing */ .l-gj { height: 32px; } .l-idm { height: 46px; } .l-itk { height: 46px; } .l-mas { height: 34px; } .l-ndc { height: 46px; } .l-tsa { height: 48px; } .l-tbm { height: 34px; } .l-cco { height: 26px; } .l-lrl { height: 32px; } @media (max-width: 1000px) { .marquee-set { gap: 54px; padding-right: 54px; } .l-gj { height: 28px; } .l-idm { height: 40px; } .l-itk { height: 40px; } .l-mas { height: 30px; } .l-ndc { height: 40px; } .l-tsa { height: 42px; } .l-tbm { height: 30px; } .l-cco { height: 22px; } .l-lrl { height: 28px; } } /* ============================================================ SECTION SHELL ============================================================ */ section.band { position: relative; padding: 104px 40px; } .wrap { max-width: var(--maxw); margin: 0 auto; } .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); } .eyebrow .champ { color: var(--champagne); } .sec-title { margin: 18px 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg-1); max-width: 18ch; } .sec-title em, .sec-title .champ { color: var(--champagne); } .sec-lead { margin-top: 20px; max-width: 46ch; font-size: 17px; color: var(--fg-2); line-height: 1.6; } /* ============================================================ SERVICES GRID (Monk-style bordered grid w/ hatch corners) ============================================================ */ .services-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 52px; } .services-head .right { text-align: right; max-width: 32ch; } .svc-frame { position: relative; border: 1px solid var(--rule); background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--rule) 7px, var(--rule) 7.7px) no-repeat, var(--bg-0); background-size: 64px 100%, 100% 100%; background-position: left top, 0 0; padding-left: 0; } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 64px; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); background: var(--bg-0); } .svc { position: relative; padding: 34px 30px 30px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 210px; display: flex; flex-direction: column; background: var(--bg-0); transition: background 0.25s var(--ease); } .svc:hover { background: var(--card-hover); } .svc .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .svc .ico { width: 22px; height: 22px; color: var(--champagne); } .svc .idx { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); } .svc h3 { margin: 0 0 9px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.04; color: var(--fg-1); letter-spacing: -0.015em; } .svc h3 .champ { color: var(--champagne); } .svc p { margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.6; max-width: 30ch; } .svc-foot { margin: 22px 64px 0; display: flex; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .svc-foot .champ { color: var(--champagne); } /* ============================================================ THE ASSESSMENT (offer block) ============================================================ */ .assess-wrap { position: relative; border: 1px solid var(--rule); background: radial-gradient(120% 80% at 100% 0%, rgba(157,106,221,0.07), transparent 60%), var(--card); padding: 56px; border-radius: 6px; } html[data-surface="light"] .assess-wrap { background: radial-gradient(120% 80% at 100% 0%, rgba(123,70,201,0.06), transparent 60%), var(--card); } .assess-wrap::before { content: ''; position: absolute; inset: -1px; border-radius: 7px; border: 1px solid transparent; background: linear-gradient(135deg, rgba(157,106,221,0.4), transparent 30%, transparent 70%, rgba(201,169,110,0.28)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .assess-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; } .assess .label-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 30px; } .assess .ttl { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 50px; line-height: 1; color: var(--fg-1); letter-spacing: -0.02em; } .assess .ttl .champ { color: var(--champagne); } .assess .spec { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; text-align: right; line-height: 1.7; } .assess .lead { font-size: 17px; line-height: 1.6; color: var(--fg-1); max-width: 42ch; margin: 0 0 22px; } .assess .lead em.acc { font-size: 19px; } .assess .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; margin-top: 32px; } .assess .stats .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 7px; } .assess .stats .v { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 28px; color: var(--fg-1); line-height: 1; } .assess .stats .v .champ { color: var(--champagne); } .steps { display: flex; flex-direction: column; } .step { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .step:last-child { border-bottom: none; } .step .n { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--fg-3); } .step .n .champ { color: var(--champagne); } .step h4 { margin: 0 0 5px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15.5px; color: var(--fg-1); letter-spacing: -0.005em; } .step h4 em.acc { font-size: 16.5px; } .step p { margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.55; max-width: 48ch; } /* ============================================================ FOUNDER LETTER ============================================================ */ .letter-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: start; } .photo { position: relative; width: 100%; aspect-ratio: 1/1; border: 1px solid var(--rule); background: var(--bg-1) url('assets/founder-256.jpg') center/cover; overflow: hidden; border-radius: 4px; } .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(12,10,16,0.62)); } html[data-surface="light"] .photo::after { background: linear-gradient(180deg, transparent 60%, rgba(23,19,28,0.34)); } .photo .meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: #e7e2da; } .photo .meta .champ { color: var(--champagne); } .photo .corners span { position: absolute; width: 13px; height: 13px; border: 1px solid var(--champagne); opacity: 0.7; } .photo .corners .tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .photo .corners .tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .photo .corners .bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .photo .corners .br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } .letter { font-size: 17.5px; line-height: 1.7; color: var(--fg-1); max-width: 56ch; } .letter p { margin: 0 0 20px; color: var(--fg-1); } .letter p em.acc { font-size: 19px; } .letter .strike { color: var(--fg-3); text-decoration: line-through; } .letter .from { margin-top: 24px; color: var(--fg-2); font-size: 14px; } .letter .sig { font-family: 'Caveat', cursive; font-weight: 600; color: var(--fg-1); font-size: 38px; line-height: 1; margin-top: 4px; } .letter .sig .dot { color: var(--champagne); } /* ============================================================ FINAL CTA ============================================================ */ .cta-block { position: relative; padding: 128px 40px; text-align: center; overflow: hidden; } .cta-block .wash { position: absolute; inset: -10%; background: radial-gradient(40% 50% at 50% 55%, rgba(157,106,221,0.18), transparent 70%); pointer-events: none; } html[data-surface="light"] .cta-block .wash { background: radial-gradient(40% 50% at 50% 55%, rgba(123,70,201,0.10), transparent 70%); } .cta-block h2 { position: relative; margin: 0 auto; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(48px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.025em; max-width: 16ch; color: var(--fg-1); } .cta-block h2 .champ { color: var(--champagne); } .cta-block .sub { position: relative; margin: 24px auto 40px; color: var(--fg-2); font-size: 16.5px; max-width: 50ch; } .cta-block .actions { position: relative; display: inline-flex; gap: 13px; flex-wrap: wrap; justify-content: center; } /* ============================================================ BOOK (cal.com embed) — split copy + calendar ============================================================ */ .book-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 60px; align-items: start; } .aud-eyebrow.left { justify-content: flex-start; } .book-title { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em; color: var(--fg-1); max-width: 13ch; } .book-title .hi { display: inline-block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--champagne); letter-spacing: -0.01em; background-image: linear-gradient(var(--champagne), var(--champagne)); background-size: 100% 0.04em; background-repeat: no-repeat; background-position: 0 96%; padding-bottom: 0.06em; margin-top: 0.04em; } .book-lead { margin: 22px 0 0; color: var(--fg-2); font-size: 16px; line-height: 1.6; max-width: 42ch; } .book-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 13px; } .book-list li { position: relative; padding-left: 22px; color: var(--fg-1); font-size: 14.5px; } .book-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); } .book-fine { margin: 28px 0 0; color: var(--fg-3); font-size: 12.5px; line-height: 1.6; max-width: 40ch; } .book-cal { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 10px; box-shadow: 0 30px 70px -45px rgba(23, 19, 28, 0.35); } .cal-embed { position: relative; z-index: 1; width: 100%; min-height: 600px; border-radius: 10px; overflow: hidden; background: var(--bg-0); } .cal-fallback { display: block; text-align: center; margin: 12px 0 2px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .cal-fallback:hover { color: var(--champagne); } /* ============================================================ CLOSER — dramatic urgency section before the footer. Theme-aware (ivory by default, flips on midnight) with a rising purple -> champagne glow. ============================================================ */ .closer { position: relative; overflow: hidden; background: var(--bg-0); padding: clamp(110px, 16vh, 200px) var(--gutter); text-align: center; isolation: isolate; } .closer-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 86% at var(--cgx, 50%) 132%, rgba(157,106,221,0.30), transparent 60%), radial-gradient(86% 64% at var(--cgx, 50%) 140%, rgba(201,169,110,0.22), transparent 58%); transition: background 0.05s linear; } .closer-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; background-image: linear-gradient(to right, color-mix(in srgb, var(--fg-1) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--fg-1) 8%, transparent) 1px, transparent 1px); background-size: 7px 7px; -webkit-mask: linear-gradient(to top, #000 0%, #000 18%, transparent 58%); mask: linear-gradient(to top, #000 0%, #000 18%, transparent 58%); } .closer-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; } .closer-head { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: clamp(32px, 5.4vw, 84px); line-height: 1.08; letter-spacing: -0.035em; color: var(--fg-1); text-wrap: balance; } .closer-head .ac { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; color: var(--champagne); letter-spacing: -0.02em; } .closer-line { margin: clamp(40px, 7vh, 80px) auto 0; max-width: 760px; padding: 26px 20px; border: 1px dashed color-mix(in srgb, var(--champagne) 55%, transparent); border-radius: 6px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: clamp(26px, 4vw, 60px); letter-spacing: -0.03em; line-height: 1; color: var(--fg-1); } .closer-line span { color: var(--champagne); } .closer-cta { margin-top: clamp(40px, 6vh, 64px); display: flex; justify-content: center; } @media (max-width: 600px) { .closer-line { font-size: 30px; padding: 20px 16px; } } /* ============================================================ FOOTER ============================================================ */ footer.site-footer { display: flex; align-items: center; gap: 26px; max-width: calc(var(--shell) + var(--gutter) * 2); margin: 0 auto; padding: 36px var(--gutter) 40px; border-top: 1px solid var(--rule); } .ft-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: var(--fg-1); flex: 0 0 auto; } .ft-mark .dot { color: var(--champagne); } .ft-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--champagne), color-mix(in srgb, var(--fg-1) 16%, transparent) 38%, color-mix(in srgb, var(--fg-1) 16%, transparent)); } .ft-links { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; } .ft-links a { color: var(--fg-3); transition: color 0.25s var(--ease); } .ft-links a:hover { color: var(--champagne); } .ft-links .sep { opacity: 0.4; } @media (max-width: 720px) { footer.site-footer { flex-wrap: wrap; gap: 18px; } .ft-line { order: 3; flex-basis: 100%; } .ft-links { flex-wrap: wrap; white-space: normal; gap: 10px 12px; } } /* ============================================================ RESPONSIVE ============================================================ */ /* floats need wide gutters — only show on large desktops */ @media (max-width: 1300px) { .float-badge { display: none !important; } } @media (max-width: 1000px) { .nav-inner { padding: 14px 22px; } nav.top .center { display: none; } nav.top .right .pill { display: none; } .hero { padding: 84px 22px 70px !important; } .float-badge { display: none !important; } .statrow { grid-template-columns: 1fr 1fr; } .statrow .cell:nth-child(2) { border-right: none; } .statrow .cell:nth-child(1), .statrow .cell:nth-child(2) { border-bottom: 1px solid var(--rule); } section.band { padding: 72px 22px; } .services-head { grid-template-columns: 1fr; gap: 16px; } .book-grid { grid-template-columns: 1fr; gap: 38px; } .services-head .right { text-align: left; } .svc-grid { grid-template-columns: 1fr 1fr; margin: 0 28px; } .svc-frame { background-size: 28px 100%, 100% 100%; } .svc-foot { margin: 18px 28px 0; } .assess-wrap { padding: 32px 24px; } .assess-grid { grid-template-columns: 1fr; gap: 40px; } .letter-wrap { grid-template-columns: 1fr; gap: 36px; } .photo { max-width: 320px; } footer .grid { grid-template-columns: 1fr 1fr; gap: 36px; } .cta-block { padding: 88px 22px; } } @media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; margin: 0 18px; } .svc-frame { background-size: 18px 100%, 100% 100%; } .svc-foot { margin: 16px 18px 0; } .statrow { grid-template-columns: 1fr 1fr; } .assess .stats { grid-template-columns: 1fr 1fr; } footer .grid { grid-template-columns: 1fr; } } /* ============================================================ MOBILE / TABLET (<=1000px) — collapse desktop scroll-choreography to clean static stacks. JS for these sections also bails <=1000px, so content renders in natural flow (mirrors the reduced-motion path). ============================================================ */ @media (max-width: 1000px) { /* NARRATIVE: stack the messages, no sticky pin, natural height */ .narrative { height: auto; } .narr-sticky { position: static; height: auto; overflow: visible; padding: 64px 0; } .narr-stack { position: static; display: flex; flex-direction: column; gap: 48px; } .narr-msg { position: static; transform: none !important; opacity: 1 !important; left: auto; top: auto; margin: 0 auto; filter: none !important; } /* PROMISE: stack both slides vertically, words pre-composed */ .wordmf { height: auto; } .wmf-sticky { position: static; height: auto; overflow: visible; } .wmf-track { width: 100%; flex-direction: column; transform: none !important; } .wmf-slide { width: 100%; flex: 0 0 auto; min-height: auto; padding: 72px 6vw; } .wmf-sentence .w, .wmf-tail .w, .wmf-big .w { transform: none !important; opacity: 1 !important; } .wmf-progress { display: none; } /* PROCESS: show line-art fully drawn (scroll-draw is disabled on mobile) */ .process [data-draw] { stroke-dashoffset: 0 !important; } }