/* ===== Self-hosted webfonts — §6b: no CDN hot-link, no FOUT/faux-bold ===== Latin-subset woff2 for every weight the site uses; the above-the-fold faces (Manrope 600 eyebrow, Manrope 700 H1, Jakarta 400 body) are preloaded in each page before this stylesheet. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/manrope-800.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jakarta-400.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jakarta-500.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jakarta-600.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jakarta-700.woff2') format('woff2'); } @font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/sacramento-400.woff2') format('woff2'); } /* ============================================================ Nourished Revival: Plum Authority (tri-color Modern Refined) Locked direction tokens; see brand-kit/design.md. Color role contract: --accent lead: buttons, pull-quote border, link hovers --accent-2 labels: eyebrows, card numbers, tags (AA small text) --accent-3 support: ticks, stars, badge tints (graphic only) --punct punctuation: stat bar, footer link on dark (graphic only) ============================================================ */ :root { --bg: #FAFAF7; --surface: #FFFFFF; --ink: #1A1A1A; --ink-soft: #5E5E5E; --accent: #6d0b74; --accent-on: #FFFFFF; --accent-2: #6d0b74; --accent-3: #57bfda; --punct: #ef830f; --ink-deep: #160820; --radius: 10px; --radius-lg: 14px; --font-heading: 'Manrope', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --line: color-mix(in srgb, var(--ink) 9%, transparent); --header-h: 76px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Leave overscroll-behavior at the default (auto) so mobile pull-to-refresh works. */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-synthesis: none; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--accent); } /* Wave 3: universal focus rings. One spec for every focusable surface: 2px support-blue outline at 4px offset (form fields add a border shift below so the focused field reads inside the ring too). */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 4px; } h1, h2, h3, .eyebrow, .step-num, .stat-figure, .faq-q, .cta-label, .lede { text-wrap: balance; } p { text-wrap: pretty; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--ink); } /* Wave 2: display weight steps up at H1 only (700 vs 600). At hero sizes Manrope 600 reads slightly soft on light pages; H2/H3 hold 600. */ h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s4); } h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; margin-bottom: var(--s3); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--s2); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--accent); color: var(--accent-on); padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } .container { max-width: 1160px; margin-inline: auto; padding-inline: var(--s3); } .eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); margin-bottom: var(--s2); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.1875rem); color: var(--ink-soft); max-width: 640px; } section { padding-block: var(--s5); } @media (min-width: 821px) { section { padding-block: var(--s6); } } .band-surface { background: var(--surface); } /* High-contrast dark pieces (style-guide amendment 2026-06-10): the hero's stage darkness carried into the page. On dark, labels go blue (purple fails contrast), body text is soft white, orange stays. */ .band-dark { background: radial-gradient(900px 460px at 10% -10%, rgba(109, 11, 116, 0.42), transparent 62%), radial-gradient(720px 380px at 92% 112%, rgba(87, 191, 218, 0.14), transparent 60%), var(--ink-deep); color: rgba(255, 255, 255, 0.86); } .band-dark h2, .band-dark h3 { color: #FFFFFF; } .band-dark .eyebrow { color: var(--accent-3); } .band-dark .lede { color: rgba(255, 255, 255, 0.78); } /* ============ Buttons ============ */ /* Wave 3: primary buttons ride a plum-family gradient (lighter #7E1486 in, lead accent mid, deeper #560A5C out) with a soft ambient shadow that sharpens on hover. White text holds AA on every stop: 9.0:1 / 10.8:1 / 12.7:1. Ghost + inverse variants reset background via the shorthand. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #7E1486 0%, var(--accent) 55%, #560A5C 100%); color: var(--accent-on); font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: var(--s2) var(--s4); border-radius: var(--radius); text-decoration: none; border: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; touch-action: manipulation; min-height: 48px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent); } @media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 38%, transparent); } } /* Wave 3 bonus: tactile press feedback. Hover never fires on touch, so the press is the only motion a phone user feels on a CTA. Transform only: every variant keeps its own shadow and ring. */ .btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.06s; } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 26%, transparent); } @media (hover: hover) { .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); transform: translateY(-2px); } } .btn--inverse { background: var(--surface); color: var(--accent); } @media (hover: hover) { .btn--inverse:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.25); } } .btn--compact { padding: 12px 22px; font-size: 0.9375rem; min-height: 44px; } /* ============ Header (P-003: transparent → solid on scroll) ============ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; padding-block: 14px; } .site-header.is-scrolled, .site-header.is-open { background: var(--surface); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08); padding-block: 8px; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { height: 56px; width: auto; } .primary-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); } .primary-nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: 0.9375rem; font-weight: 500; } @media (hover: hover) { .primary-nav a:not(.btn):hover { color: var(--accent); } } .primary-nav a[aria-current="page"] { color: var(--accent-2); font-weight: 600; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 48px; height: 48px; border-radius: var(--radius); align-items: center; justify-content: center; touch-action: manipulation; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } .site-header.is-open .nav-toggle span { background: transparent; } .site-header.is-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); } .site-header.is-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); } /* Nav collapses to the drawer at 1024px (raised from 860) so the 7-item bar + CTA never overflows on tablets / small laptops. */ @media (max-width: 1024px) { .nav-toggle { display: inline-flex; } .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--s3) var(--s3); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12); border-top: 1px solid var(--line); } .site-header.is-open .primary-nav { display: flex; } .primary-nav a:not(.btn) { padding: 14px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--line); } .primary-nav .btn { margin-top: var(--s2); } } /* ============ Hero ============ */ .hero { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 88px)); padding-bottom: var(--s5); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } @media (max-width: 860px) { .hero:not(.hero--cinema) { min-height: 0; } } /* ---- Cinematic full-immersion variant (homepage) ---- Image-overlay-text-bottom per §12d. The workshop photo is soft, so the grade carries it: layered scrims, a plum tint, and film grain make the softness read as filmic instead of low-res. P-002 shadows mandatory. */ .hero--cinema { position: relative; align-items: flex-end; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(56px, 9vh, 104px); isolation: isolate; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .hero-grade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(13, 4, 15, 0.5) 0%, rgba(13, 4, 15, 0.22) 38%, rgba(13, 4, 15, 0) 62%), linear-gradient(180deg, rgba(13, 4, 15, 0.42) 0%, rgba(13, 4, 15, 0.16) 30%, rgba(13, 4, 15, 0.12) 48%, rgba(13, 4, 15, 0.52) 76%, rgba(15, 4, 18, 0.72) 100%), color-mix(in srgb, var(--accent) 11%, transparent); } .hero-grade::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.07; mix-blend-mode: overlay; pointer-events: none; } .hero--cinema .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); width: 100%; min-width: 0; } .hero-copy { max-width: 640px; min-width: 0; } .hero--cinema .btn { max-width: 100%; text-align: center; } .hero--cinema .cta-row { margin-bottom: 0; } .hero--cinema .btn--inverse { box-shadow: 0 12px 32px rgba(10, 2, 12, 0.45); } @media (hover: hover) { .hero--cinema .btn--inverse:hover { box-shadow: 0 16px 40px rgba(10, 2, 12, 0.55); } } /* Trust cluster: bottom-right on desktop, below the CTAs on mobile. Wave 4: .hero-side wraps the stack plus the photo-context caption so .hero-bottom keeps exactly two flex children (copy left, side right). */ .hero-side { flex-shrink: 0; max-width: 360px; min-width: 0; } .hero-caption { margin-top: 12px; padding-left: calc(var(--s2) + 2px); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.66); text-shadow: 0 1px 6px rgba(10, 2, 12, 0.55); } .trust-stack { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; max-width: 360px; min-width: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(10, 2, 12, 0.55); padding-left: var(--s2); border-left: 2px solid rgba(255, 255, 255, 0.22); } .trust-stack li { display: flex; align-items: center; gap: 8px; } .trust-stack .tick { color: var(--accent-3); } @media (max-width: 980px) { .hero--cinema .hero-bottom { flex-direction: column; align-items: stretch; } .hero-side { max-width: none; } /* The caption anchors the projected slide where the slide actually reads (the desktop frame); at column layouts the hero is already packed and the slide is graded down, so the caption stands down. */ .hero-caption { display: none; } .trust-stack { border-left: none; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.24); padding-top: var(--s3); margin-top: var(--s3); max-width: none; } } /* Operator revision (2026-06-11): lift the trust cluster up off the hero floor on desktop so it sits in the right column's upper-middle, not baseline-locked to the CTA row. Two-column layout only (>=981px). */ @media (min-width: 981px) { .hero-side { margin-bottom: clamp(28px, 8vh, 84px); } /* Operator revision (2026-06-11): the keynote photo fills the frame on standard desktop ratios (no vertical crop room), so nudge it down with a slight zoom that creates the room, then shift ~4% of hero height down. scale > the shift so no gap opens at the top. Mobile keeps its framing. */ .hero--cinema .hero-bg { transform: translateY(4%) scale(1.1); transform-origin: center; } } /* Operator revision (2026-06-11): on large, tall monitors (27"+) the bottom- anchored cinematic hero stranded a big empty band above the content. Once the viewport is both wide and tall, center the content so it reads balanced. Laptops (height < 950px) keep the grounded bottom anchor that looks right. */ @media (min-width: 1200px) and (min-height: 950px) { .hero--cinema { align-items: center; } } .hero--cinema .eyebrow { color: #9ADEEF; opacity: 1; text-shadow: 0 2px 8px rgba(10, 2, 12, 0.5); } .hero--cinema h1 { color: #FFFFFF; text-shadow: 0 2px 18px rgba(10, 2, 12, 0.55), 0 1px 3px rgba(10, 2, 12, 0.5); letter-spacing: -0.018em; line-height: 1.04; } /* ===== Cinematic premium hero layer (operator "wow" pass, 2026-06-12) ===== Layers onto the existing grade + grain + P-001 reveal: a slow Ken Burns so the photo breathes, a one-time light sweep that catches the eye on load, a drifting brand aura for depth + warmth, a frosted-glass nav, and a tactile CTA lift. All GPU-cheap (transform/opacity), fully reduced-motion safe. */ /* (Ken Burns zoom removed per operator — the photo holds its static framing.) */ /* One diagonal sheen sweeps across the graded photo, well after load */ .hero--cinema::before { content: ""; position: absolute; inset: -12% -30%; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.03) 47%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.03) 53%, transparent 60%); transform: translateX(-85%); animation: lc-sweep 2.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.3s both; } @keyframes lc-sweep { to { transform: translateX(85%); } } /* Drifting brand aura: a plum bloom behind the copy + a cyan counter-glow */ .hero-aura { position: absolute; z-index: -1; pointer-events: none; left: -8%; bottom: -16%; width: 62%; height: 74%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 60%, transparent), transparent 72%); filter: blur(48px); opacity: 0.4; mix-blend-mode: screen; animation: lc-aura 16s ease-in-out infinite alternate; } .hero-aura::after { content: ""; position: absolute; right: -75%; top: -45%; width: 78%; height: 78%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-3) 50%, transparent), transparent 72%); filter: blur(44px); opacity: 0.55; animation: lc-aura2 21s ease-in-out infinite alternate; } @keyframes lc-aura { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.3; } to { transform: translate3d(7%, -7%, 0) scale(1.18); opacity: 0.5; } } @keyframes lc-aura2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12%, 9%, 0) scale(1.22); } } /* Mobile: the big blur + screen-blend are the costly bits under 4x CPU throttle. Keep a lighter single glow there; desktop keeps the full effect. */ @media (max-width: 860px) { .hero-aura { filter: blur(30px); mix-blend-mode: normal; opacity: 0.3; width: 80%; height: 56%; } .hero-aura::after { display: none; } } /* Cinema-hero nav (operator): fully transparent over the hero, then the foggy-glass look the moment the user scrolls — not a solid white bar. Open drawer stays opaque (§7a), handled by the :not(.is-open) guard. */ body.has-cinema-hero .site-header.is-scrolled:not(.is-open) { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); } .hero--cinema .btn--inverse { transition: transform 0.25s ease, box-shadow 0.3s ease; } @media (hover: hover) { .hero--cinema .btn--inverse:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .hero--cinema .hero-bg { animation: none; } .hero--cinema::before, .hero-aura { display: none; } } /* Accent word in the hero H1 (Wave 1 item 1.3, operator adaptation: the locked direction loads no italic faces and bans decorative serifs, so the accent is color, not slant. Blue pops on the dark photo and the inherited text-shadow keeps contrast. Light-hero pages: Wave 5. */ /* Generic accent words (body + section headings): color only — no italic/decorative faces. */ .accent-word { color: var(--accent-3); } .accent-word--warm { color: var(--punct); } .hero--cinema .accent-word { color: var(--accent-3); } /* .hero.hero--cinema beats the generic `.hero .sub` (ink-soft) declared later in the file; equal specificity let source order gray this out. Wave 1 fix: white sub over the dark grade per P-002. */ .hero.hero--cinema .sub { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 8px rgba(10, 2, 12, 0.6); max-width: 600px; } .btn--ghost-light { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); text-shadow: 0 1px 6px rgba(10, 2, 12, 0.4); } @media (hover: hover) { .btn--ghost-light:hover { background: #FFFFFF; color: var(--ink); box-shadow: none; text-shadow: none; transform: translateY(-2px); } } .trust-strip--light { border-top-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 6px rgba(10, 2, 12, 0.5); } .trust-strip--light .tick { color: var(--accent-3); } .review-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 6px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #FFFFFF; font-weight: 600; } .review-pill .stars { color: var(--accent-3); letter-spacing: 1.5px; } /* P-001 cinematic hero entrance (operator-triggered: "cinematic") */ @keyframes lc-hero-resolve { from { opacity: 0; filter: blur(10px); transform: scale(0.985); } to { opacity: 1; filter: blur(0); transform: scale(1); } } .hero-reveal { opacity: 0; animation: lc-hero-resolve 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero-reveal[data-delay="1"] { animation-delay: 0.20s; } .hero-reveal[data-delay="2"] { animation-delay: 0.50s; } .hero-reveal[data-delay="3"] { animation-delay: 0.80s; } .hero-reveal[data-delay="4"] { animation-delay: 1.10s; } .hero-reveal[data-delay="5"] { animation-delay: 1.35s; } @media (prefers-reduced-motion: reduce) { .hero-reveal { opacity: 1; animation: none; filter: none; transform: none; } } /* Nav over the cinematic hero: light links while transparent (homepage only). The logo rides a white chip so the mark stays §12b-intact over the photo. */ body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .primary-nav a:not(.btn) { color: #FFFFFF; text-shadow: 0 1px 6px rgba(10, 2, 12, 0.55); } @media (hover: hover) { body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .primary-nav a:not(.btn):hover { color: #9ADEEF; } } body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span, body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span::before, body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span::after { background: #FFFFFF; } body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .nav-toggle span { background: #FFFFFF; } body.has-cinema-hero .site-header.is-open .nav-toggle span { background: transparent; } /* Homepage nav logo swap: the light dark-bg mark rides the cinematic hero; the plum mark takes over the moment the nav goes solid (scrolled or the mobile drawer opens). Default state everywhere else = solid only. */ .brand-logo--cinema { display: none; } body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .brand-logo--solid { display: none; } body.has-cinema-hero .site-header:not(.is-scrolled):not(.is-open) .brand-logo--cinema { display: inline-block; filter: drop-shadow(0 2px 10px rgba(10, 2, 12, 0.45)); } @media (max-width: 860px) { .hero-bg { object-position: 61% 30%; } .hero--cinema { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* Mobile slice puts the bright projection screen behind the copy: go full filmic-dark so text owns the frame and the dress pops. Top stop runs deepest (Wave 1): the source photo's slide text is cut mid-letter at its top edge, so the grade sinks it to a ghost instead of letting cropped letters collide with the header. */ .hero-grade { background: linear-gradient(180deg, rgba(13, 4, 15, 0.9) 0%, rgba(13, 4, 15, 0.66) 26%, rgba(13, 4, 15, 0.64) 52%, rgba(13, 4, 15, 0.84) 76%, rgba(15, 4, 18, 0.95) 100%), linear-gradient( color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 24%, transparent)); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } } .hero h1 { margin-bottom: var(--s3); } .hero .sub { font-size: clamp(1.0625rem, 1.7vw, 1.1875rem); color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s4); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .tick { color: var(--accent-3); font-weight: 700; } /* Wave 8 (8.6 blemish sweep): the dormant .trust-strip / .hero-media / .hero-badge block (a pre-cinema hero layout, zero markup matches site-wide since Wave 1) is removed; .hero-badge .label was also the last 13px rule that LOOKED like a conversion surface. */ /* ============ Stat / cost section ============ */ .stat-split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } @media (max-width: 860px) { .stat-split { grid-template-columns: minmax(0, 1fr); } } .stat-figure { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.02em; } .stat-bar { display: block; width: 76px; height: 6px; border-radius: 3px; background: var(--punct); margin: var(--s2) 0; } .stat-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); } .cost-copy p { color: var(--ink-soft); max-width: 600px; } .cost-copy p + p { margin-top: var(--s2); } .cost-copy strong { color: var(--ink); } .cost-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); margin-top: var(--s3); list-style: none; } .cost-chips li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; font-weight: 500; } .band-surface .cost-chips li { background: var(--bg); } /* Dark-band variants of the stat block */ .band-dark .stat-figure { color: #FFFFFF; } .band-dark .stat-label { color: var(--accent-3); } .band-dark .cost-copy p { color: rgba(255, 255, 255, 0.78); } .band-dark .cost-copy strong { color: #FFFFFF; } .band-dark .cost-chips li { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.88); } /* ============ The shift (positive mirror of the cost section) ============ */ /* A bright, energetic band: a soft cyan rise top-left, a warm orange glow bottom-right, on the near-white page base. Reads as the lift after the grey cost band, without going dark. */ .band-lift { background: radial-gradient(940px 500px at 2% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(820px 460px at 102% 116%, color-mix(in srgb, var(--punct) 22%, transparent), transparent 60%), color-mix(in srgb, var(--accent) 11%, var(--bg)); } .shift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); list-style: none; } .shift-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent-3); border-radius: var(--radius-lg); padding: var(--s3); box-shadow: 0 1px 2px rgba(22, 8, 32, 0.04), 0 14px 34px rgba(22, 8, 32, 0.06); } .shift-card__tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 10px; } .shift-card h3 { font-size: 1.18rem; line-height: 1.2; margin: 0 0 8px; } .shift-card p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; margin: 0; } .shift-foot { margin-top: var(--s4); max-width: 46ch; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; } @media (max-width: 980px) { .shift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .shift-grid { grid-template-columns: minmax(0, 1fr); } } /* ============ Generic feature cards (inherited card pattern) ============ */ .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); } @media (max-width: 980px) { .card-grid { grid-template-columns: minmax(0, 1fr); } } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .card-grid--4 { grid-template-columns: minmax(0, 1fr); } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Wave 3 card-hover system: link cards + offer cards lift -6px with a deeper shadow (clickable), static cards a subtle -3px so grids feel alive without implying a click. No inner image zoom anywhere: these cards carry no images by design. Hub link cards add a 4px top bar (rest: line gray) that turns support-blue on hover. */ a.card { color: inherit; display: block; border-top: 4px solid var(--line); transition: transform 0.18s ease, box-shadow 0.18s ease, border-top-color 0.25s ease; } @media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(26, 26, 26, 0.08); } a.card:hover, .offer-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(26, 26, 26, 0.13); } a.card:hover { border-top-color: var(--accent-3); } } .band-surface .card { background: var(--bg); } .card .num { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; } .card h3 { font-size: clamp(1.15rem, 2vw, 1.375rem); margin-bottom: 10px; } .card p { font-size: 0.9685rem; color: var(--ink-soft); } /* ============ Offer cards ============ */ .offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s4); } @media (max-width: 860px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } } .offer-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, border-top-color 0.25s ease; border-top: 4px solid var(--line); } .offer-card--workshop { border-top-color: var(--accent-3); } .offer-card--program { border-top-color: var(--punct); } /* Wave 3: gradient top-bar reveal. A support-blue → punctuation-orange bar fades in over the static offer color on hover (0.25s). The hover lift + deep shadow ride the unified card rule above; the -6px/-3px system replaces the old -3px rule that lived here. */ .offer-card::before { content: ""; position: absolute; top: -4px; left: -1px; right: -1px; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--accent-3), var(--punct)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } @media (hover: hover) { /* The static bar yields while the gradient fades in, so its rounded corner curve cannot peek past the gradient tips (gut-test fix). */ .offer-card:hover { border-top-color: transparent; } .offer-card:hover::before { opacity: 1; } } .offer-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--accent-2); } .offer-card h3 { margin-bottom: 4px; font-size: clamp(1.3rem, 2.2vw, 1.625rem); } .offer-card p { color: var(--ink-soft); font-size: 0.9875rem; } .offer-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } .offer-card ul li { font-size: 0.9375rem; color: var(--ink-soft); padding-left: 24px; position: relative; line-height: 1.5; } .offer-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-3); font-weight: 700; } .offer-link { margin-top: auto; font-weight: 600; font-size: 0.9375rem; color: var(--accent); text-decoration: none; /* Wave 8 (8.4): standalone card link was a ~24px target. Padding + negative margin = 48px tap box, zero visual change (the expansion lands in the card's own padding; no adjacent target to collide). */ display: inline-block; padding-block: 12px; margin-block: -12px; } @media (hover: hover) { .offer-link:hover { text-decoration: underline; } } .band-dark .offer-link { color: var(--accent-3); } /* Cross-sell CTA card: borrows the hero CTA bar's warm-to-plum gradient so a "another service" prompt reads unmistakably as a CTA, not a page section. */ .cross-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); background: linear-gradient(100deg, #ef830f 0%, #e0670a 36%, #b8350f 64%, #7E1486 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 42px) clamp(24px, 4vw, 52px); box-shadow: 0 22px 60px rgba(239,131,15,0.20), 0 1px 0 rgba(255,255,255,0.16) inset, 0 18px 44px rgba(14,5,24,0.28); } .cross-cta .eyebrow { color: rgba(255,255,255,0.85); } .cross-cta h2 { color: #fff; margin: 8px 0 0; } .cross-cta p { color: rgba(255,255,255,0.92); margin: 12px 0 0; max-width: 58ch; } .cross-cta .btn { flex-shrink: 0; white-space: nowrap; background: #fff; color: #3d063f; font-weight: 700; border: none; box-shadow: 0 8px 22px rgba(61,6,63,0.32); } @media (max-width: 860px) { .cross-cta { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--s3); } .cross-cta .btn { align-self: stretch; text-align: center; } } /* ============ Mechanism ============ */ .mechanism-inner { max-width: 760px; margin-inline: auto; text-align: center; } .mechanism-claim { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.875rem); line-height: 1.4; margin: var(--s3) 0 var(--s4); } /* "what" / "how" keep their color accent and also go italic (operator request). */ .mechanism-claim .accent-word, .mechanism-claim .accent-word--warm { font-style: italic; } .isnt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); text-align: left; } @media (max-width: 700px) { .isnt-grid { grid-template-columns: minmax(0, 1fr); } } .isnt-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s3) var(--s4); } .isnt-col h3 { font-size: 1.0625rem; letter-spacing: 0.04em; margin-bottom: var(--s2); } .isnt-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .isnt-col li { padding-left: 24px; position: relative; font-size: 0.9685rem; color: var(--ink-soft); } .isnt-col.is { background: color-mix(in srgb, var(--accent-3) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent-3) 38%, transparent); } .isnt-col.is li::before { content: "✓"; position: absolute; left: 0; color: color-mix(in srgb, var(--accent-3) 80%, var(--ink)); font-weight: 700; } .isnt-col.isnt li::before { content: "✕"; position: absolute; left: 0; color: var(--punct); font-weight: 700; opacity: 0.85; } /* Dark-band glass variants */ .band-dark .isnt-col { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .band-dark .isnt-col h3 { color: #FFFFFF; } .band-dark .isnt-col li { color: rgba(255, 255, 255, 0.82); } .band-dark .isnt-col.is { border-color: color-mix(in srgb, var(--accent-3) 45%, transparent); } .band-dark .isnt-col.is li::before { color: var(--accent-3); } /* ============ Timeline (How it works) ============ */ .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); position: relative; list-style: none; } .timeline::before { /* Operator revision (2026-06-11): dots are centered in their columns, so the connector spans dot-center to dot-center. Each inset = half a column width (W/2), with W = (100% - the grid gaps) / column-count, gap = var(--s4). 3-step: W = (100% - 2*gap)/3, inset = W/2. */ content: ""; position: absolute; top: 26px; left: calc((100% - 2 * var(--s4)) / 6); right: calc((100% - 2 * var(--s4)) / 6); height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent-3) 45%, transparent); } .timeline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 4-step: W = (100% - 3*gap)/4, inset = W/2 = (100% - 3*gap)/8. */ .timeline--4::before { left: calc((100% - 3 * var(--s4)) / 8); right: calc((100% - 3 * var(--s4)) / 8); } @media (max-width: 860px) { .timeline, .timeline--4 { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-left: 60px; } .timeline::before, .timeline--4::before { top: 8px; bottom: 8px; left: 22px; right: auto; width: 4px; height: auto; } } /* Desktop: each step is a centered column (dot + heading + copy centered under it). Mobile reverts to the left-rail vertical timeline. */ .timeline li { position: relative; text-align: center; } .step-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #FFFFFF; border: 2px solid color-mix(in srgb, var(--accent-3) 60%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; margin: 0 auto var(--s2); } .timeline h3 + p, .timeline p { max-width: 34ch; margin-inline: auto; } @media (max-width: 860px) { .timeline li { padding-left: 0; text-align: left; margin-left: 0; } .step-num { position: absolute; left: -60px; top: 2px; width: 44px; height: 44px; font-size: 1rem; margin: 0; } .timeline p { max-width: none; margin-inline: 0; } } .timeline h3 { font-size: 1.25rem; } .timeline p { font-size: 0.9685rem; color: var(--ink-soft); } /* Wave 8 (8.3): programs-page delight. The 4-week connector draws itself in when the section reveals (left to right; top to bottom on mobile), making the program read as a path being laid, not a static diagram. Scoped to .timeline--4 so the homepage keeps its one delight (count-up). Gated on .js + [data-reveal]: no-JS and crawlers see the full line. */ .js [data-reveal] .timeline--4::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; } .js [data-reveal].is-in .timeline--4::before { transform: scaleX(1); } @media (max-width: 860px) { .js [data-reveal] .timeline--4::before { transform: scaleY(0); transform-origin: center top; } .js [data-reveal].is-in .timeline--4::before { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .js [data-reveal] .timeline--4::before { transform: none; transition: none; } } /* ============ Meet the practitioner ============ */ .meet-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 860px) { .meet-grid { grid-template-columns: minmax(0, 1fr); } } .meet-media img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); /* Wave 4 (4.6): outer shadow refined into a soft dual-layer glow, contact layer + wide ambient with a faint plum cast. */ box-shadow: 0 8px 20px rgba(26, 26, 26, 0.08), 0 28px 64px color-mix(in srgb, var(--accent) 14%, rgba(26, 26, 26, 0.10)); } .pull-quote { background: var(--bg); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s3) 0; } .band-surface .pull-quote { background: var(--bg); } .pull-quote blockquote { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--ink); } .pull-quote figcaption { color: var(--ink-soft); font-size: 0.875rem; } .pull-quote cite { display: block; margin-top: var(--s2); font-style: normal; font-size: 0.875rem; color: var(--ink-soft); } .review-grid .pull-quote cite { color: var(--ink); font-weight: 700; } /* ============ Testimonials (Results page) ============ */ .review-feature { margin: var(--s4) 0 0; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent-3); border-radius: var(--radius-lg); padding: var(--s4); box-shadow: 0 1px 2px rgba(22, 8, 32, 0.04), 0 18px 44px rgba(22, 8, 32, 0.07); } .review-feature__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); } .review-feature__badge .stars { color: var(--punct); letter-spacing: 1px; } .review-feature blockquote { margin: 0; } .review-feature blockquote p { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.08rem, 1.6vw, 1.34rem); line-height: 1.5; margin: 0 0 var(--s2); } .review-feature blockquote p:last-child { margin-bottom: 0; } .review-feature figcaption { margin-top: var(--s3); font-size: 0.9rem; color: var(--ink-soft); } .review-feature figcaption cite { font-style: normal; font-weight: 700; color: var(--ink); } .review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); list-style: none; } .review-grid .pull-quote { margin: 0; height: 100%; border-left-color: var(--accent-3); } /* On a light band the cream card fill blends into the white section; a defined border + lift shadow makes the cards (and their top edge) read clearly. */ .band-surface .review-grid .pull-quote { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-left: 4px solid var(--accent-3); box-shadow: 0 2px 4px rgba(22, 8, 32, 0.05), 0 16px 36px rgba(22, 8, 32, 0.10); } .review-grid .pull-quote blockquote { font-size: 1.04rem; line-height: 1.45; font-weight: 500; } @media (max-width: 900px) { .review-grid { grid-template-columns: minmax(0, 1fr); } } /* Wave 8 (8.2): the ONE site-wide signature flourish. The customer's own logo is a script mark, so a single founder signature under the About pull-quote echoes the brand; Caveat loads on /about/ only. design.md's "no script fonts" line governs UI/body type and is operator-adapted here for this single decorative element (aria-hidden, name repeats the cite). */ .signature-script { display: block; margin-top: 4px; font-family: 'Sacramento', 'Snell Roundhand', cursive; font-weight: 400; font-size: 2.9rem; line-height: 1; color: var(--accent-2); transform: rotate(-3deg); transform-origin: left center; width: fit-content; } .badge-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } .badge { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; min-width: 0; font-size: 0.875rem; font-weight: 600; border-radius: 999px; padding: 8px 16px; } .badge--award { background: color-mix(in srgb, var(--punct) 14%, transparent); color: var(--ink); } /* Award medal mark (Wave 1: replaced the OS trophy emoji with a line SVG in the punctuation orange; emojis render platform-dependent and read consumer, not corporate-precise). */ .award-mark { color: var(--punct); flex-shrink: 0; /* Wave 4 (4.8): soft drop-shadow gives the medal the same multi-layer depth the step-num dots carry (plum fill + blue ring + glow). */ filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--punct) 35%, transparent)); } .figure .award-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.1em; } .badge--review { background: color-mix(in srgb, var(--accent-3) 16%, transparent); color: var(--ink); } .badge--review .stars { color: var(--accent-3); } .badge a { color: inherit; } /* ============ Service area ============ */ .area-inner { text-align: center; max-width: 800px; margin-inline: auto; } .city-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s3); list-style: none; } .city-chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-size: 0.9375rem; font-weight: 500; } .area-note { margin-top: var(--s3); color: var(--ink-soft); font-size: 0.9375rem; max-width: 72ch; margin-inline: auto; } /* Dark-band variant of the service-area chips */ .band-dark .city-chips li { background: rgba(255, 255, 255, 0.06); border-color: color-mix(in srgb, var(--accent-3) 45%, transparent); color: #FFFFFF; } .band-dark .area-note { color: rgba(255, 255, 255, 0.72); } /* ============ FAQ (§7b: centered column, left-aligned items) ============ */ .faq-head { text-align: center; max-width: 720px; margin-inline: auto; } .faq-list { max-width: 760px; margin: var(--s4) auto 0; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s2); overflow: hidden; } .band-surface .faq-item { background: var(--bg); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3); font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; touch-action: manipulation; } .faq-item summary::-webkit-details-marker { display: none; } /* Wave 2: circular +/x toggle replaces the chevron. The plus is two CSS-drawn 2px bars; the whole circle rotates 45deg to an x on [open]. Accent-2 purple on light surfaces per the role contract. */ .faq-item summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border: 1.5px solid color-mix(in srgb, var(--accent-2) 35%, transparent); border-radius: 50%; background-image: linear-gradient(var(--accent-2), var(--accent-2)), linear-gradient(var(--accent-2), var(--accent-2)); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } /* Wave 3 hover affordance: the circle's 35% border strengthens to full purple under the pointer, distinct from both rest and open states. */ @media (hover: hover) { .faq-item summary:hover::after { border-color: var(--accent-2); } } /* Wave 3 (queued from Wave 2): the open circle fills purple and the x goes white. Same single hue, but the state now reads at a glance. */ .faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--accent-2); border-color: var(--accent-2); background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF); } @media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } } .faq-item p { padding: 0 var(--s3) var(--s3); color: var(--ink-soft); font-size: 0.9685rem; max-width: 72ch; } .faq-item p a { white-space: nowrap; } /* short offer-name links wrap as a unit, never split at the hyphen */ /* ============ Closer ============ */ .closer { background: radial-gradient(640px 320px at 88% 112%, rgba(87, 191, 218, 0.16), transparent 60%), linear-gradient(160deg, var(--accent) 0%, #3A1144 58%, #1C0A24 100%); } .closer-inner { text-align: center; max-width: 720px; margin-inline: auto; } .closer h2 { color: var(--accent-on); } .closer p { color: color-mix(in srgb, var(--accent-on) 82%, transparent); margin-bottom: var(--s4); } .closer .microline { display: block; margin-top: var(--s2); font-size: 0.875rem; color: color-mix(in srgb, var(--accent-on) 75%, transparent); } /* Service-areas closer: centered eyebrow + CTA row, plus FAQ accordions restyled for the dark gradient (everything center-aligned to match). */ .closer .eyebrow { color: var(--accent-3); } .closer .cta-row { justify-content: center; margin-bottom: 0; } .closer-link { font-weight: 600; font-size: 0.9375rem; color: var(--accent-3); text-decoration: none; padding-block: 12px; } @media (hover: hover) { .closer-link:hover { text-decoration: underline; } } .closer .faq-list { text-align: left; margin-top: var(--s5); } .closer .faq-item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .closer .faq-item summary { color: #fff; } .closer .faq-item p { color: rgba(255, 255, 255, 0.80); } .closer .faq-item summary::after { border-color: rgba(255, 255, 255, 0.40); background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } .closer .faq-item summary:hover::after { border-color: rgba(255, 255, 255, 0.8); } .closer .faq-item[open] summary::after { background-color: var(--accent-3); border-color: var(--accent-3); background-image: linear-gradient(#1C0A24, #1C0A24), linear-gradient(#1C0A24, #1C0A24); } /* ============ Footer ============ */ .site-footer { background: #140A18; color: color-mix(in srgb, var(--bg) 86%, transparent); padding-block: var(--s5) var(--s4); } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: var(--s4); } @media (max-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* Footer logo: the all-white transparent mark reads clean on the plum-black footer, so no chip (the colored mark in nav keeps the chip- free glow over the hero; interior navs sit on white). */ .footer-brand img { height: 76px; width: auto; } .footer-brand p { font-size: 0.875rem; line-height: 1.6; margin-top: var(--s2); opacity: 0.85; max-width: 360px; } .site-footer h3 { color: var(--accent-3); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s2); } .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .site-footer a { color: color-mix(in srgb, var(--bg) 86%, transparent); text-decoration: none; font-size: 0.9375rem; } @media (hover: hover) { .site-footer a:hover { color: var(--bg); text-decoration: underline; } } /* Wave 8 (8.4): footer links measured ~24px tall in the tap sense. On touch widths, padding (not font-size) lifts each to a 44px target; the -4px margins keep boxes from overlapping (2px clear at the 10px list gap) while the column only breathes slightly. */ @media (max-width: 860px) { .site-footer a { display: inline-block; padding-block: 10px; margin-block: -4px; } } .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); margin-top: var(--s4); padding-top: var(--s3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); font-size: 0.75rem; opacity: 0.85; } .footer-bottom .built a { color: var(--punct); font-weight: 600; text-decoration: underline; } /* ============ Interior pages ============ */ .site-header--solid { background: var(--surface); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08); padding-block: 8px; } .page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(36px, 7vh, 72px)); padding-bottom: var(--s5); /* Wave 7 fix: the halo below is 480px wide from left -80px, so its right edge sits at a fixed 400px and forced sideways scroll on every interior page at sub-400px viewports (25px of drift on a 375px iPhone). clip on the x-axis only: no scroll container is created and the halo still paints upward past the section top. */ overflow-x: clip; } /* Wave 3: a soft radial halo behind the H1's top-left gives light page heroes a hint of the brand's stage-glow depth (7% lead-plum, gone by 70%). Pointer-blind, painted behind the hero content; the left calc tracks the container edge so the halo stays under the H1 on any viewport. The cinematic homepage hero is excluded: its grade owns depth. */ .page-hero::before { content: ""; position: absolute; top: -40px; left: max(-80px, calc(50vw - 700px)); width: 480px; height: 480px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); pointer-events: none; z-index: -1; } .page-hero .lede { margin-top: 0; } .page-hero .cta-row { margin-top: var(--s4); margin-bottom: 0; } /* Wave 7 (7.4): compact trust line under interior hero CTA rows, the light-surface sibling of the closer's .microline. Real proof only (credential + live review count); blue tick per the role contract. */ .cta-trust { margin-top: var(--s2); font-size: 0.875rem; color: var(--ink-soft); } .cta-trust .tick { margin-right: 4px; } /* Wave 2: accent word on every interior H1. Blue fails contrast on the cream page-hero (2.0:1), so light heroes use the purple (10.8:1); the cinematic homepage hero keeps blue over its dark grade. */ .page-hero .accent-word { color: var(--accent-2); } /* Wave 5 (5.3): per-page-type hero rhythm. Interior heroes share bones, but each page type owns a modifier; the homepage cinematic hero is already unique, and workshops/programs keep the default rhythm while differing via their numbered eyebrows + cross-linked CTA rows. */ /* Service-area family (hub + 5 city pages): tighter opening (the local proof is the point, get to it) and a small blue location dot ahead of the eyebrow (support hue, graphic role only, per the role contract). */ .page-hero--area { padding-top: calc(var(--header-h) + clamp(24px, 5vh, 52px)); } .page-hero--area .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); margin-right: 10px; vertical-align: 1px; } /* Wave 8 (8.3): city-page delight. The location dot sends a single soft ring on load ("you are here"), once, then rests. Scoped to the five city pages (--city) so the hub keeps its one delight (card-grid lift). */ @keyframes lc-dot-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-3) 50%, transparent); } to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-3) 0%, transparent); } } .page-hero--city .eyebrow::before { animation: lc-dot-pulse 1.2s ease-out 0.6s 1 both; } @media (prefers-reduced-motion: reduce) { .page-hero--city .eyebrow::before { animation: none; } } /* About: the story page breathes: a touch more display size on the H1 (the name is the headline) and a wider lede measure (700px ~ 68ch). */ .page-hero--story h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); } .page-hero--story .lede { max-width: 700px; } /* ===== About: cinematic, image-led hero (it's about her) ===== Full-bleed portrait of Abigail behind a directional grade, copy anchored bottom-left. Mirrors the homepage cinema hero so the transparent nav + light logo (body.has-cinema-hero) read correctly over it. */ .about-hero { position: relative; min-height: clamp(580px, 88vh, 840px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-deep); isolation: isolate; } .about-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; z-index: -2; } .about-hero-grade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 8, 32, 0.52) 0%, rgba(22, 8, 32, 0.04) 26%, rgba(22, 8, 32, 0.12) 52%, rgba(22, 8, 32, 0.88) 100%), linear-gradient(90deg, rgba(22, 8, 32, 0.72) 0%, rgba(22, 8, 32, 0.22) 46%, rgba(22, 8, 32, 0) 78%); } .about-hero-inner { width: 100%; padding-block: calc(var(--header-h) + clamp(40px, 10vh, 96px)) clamp(44px, 8vh, 84px); } .about-hero-copy { max-width: 660px; } .about-hero-copy .eyebrow { color: var(--accent-3); } .about-hero-copy h1 { color: #fff; margin-top: 0.5rem; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.06; } .about-hero-copy .accent-word { color: var(--accent-3); } .about-hero-copy .lede { color: rgba(255, 255, 255, 0.88); margin-top: 1.1rem; max-width: 600px; } @media (max-width: 860px) { .about-hero { min-height: clamp(540px, 92vh, 760px); } .about-hero-bg { object-position: 54% 30%; } .about-hero-grade { background: linear-gradient(180deg, rgba(22, 8, 32, 0.44) 0%, rgba(22, 8, 32, 0) 24%, rgba(22, 8, 32, 0.34) 54%, rgba(22, 8, 32, 0.95) 100%); } } /* Contact + results: the action page hands off fast into the form band; the evidence page hands off fast into the dark proof band (the stats are the hero's payoff; no CTA row on either hero by design). */ .page-hero--action, .page-hero--proof { padding-bottom: var(--s4); } .proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin-top: var(--s4); list-style: none; } .proof-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); text-align: center; } .band-dark .proof-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); } .proof-card .figure { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1.1; color: var(--ink); } .band-dark .proof-card .figure { color: #FFFFFF; } .proof-card .stars { color: var(--accent-3); letter-spacing: 2px; font-size: 1.1rem; } .proof-card .label { font-size: 0.875rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; } .band-dark .proof-card .label { color: rgba(255, 255, 255, 0.75); } .proof-card a { color: inherit; } .photo-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 860px) { .photo-feature { grid-template-columns: minmax(0, 1fr); } } /* Programs hero: wider copy column pulls the H1 down to 4 lines, and the image column carries a tall portrait that balances the stacked copy. */ .photo-feature--hero-portrait { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); } .photo-feature--hero-portrait .photo-frame img { max-height: 640px; } @media (max-width: 860px) { .photo-feature--hero-portrait { grid-template-columns: minmax(0, 1fr); } } .photo-feature img { width: 100%; height: auto; /* Operator revision (2026-06-11): the In-Real-Rooms + programs photos are real portrait shots; cap height + cover so a tall portrait sits balanced beside its text column instead of towering over it. */ max-height: 600px; object-fit: cover; object-position: center; border-radius: var(--radius-lg); /* Wave 4 (4.6): same refined glow as .meet-media img. */ box-shadow: 0 8px 20px rgba(26, 26, 26, 0.08), 0 28px 64px color-mix(in srgb, var(--accent) 14%, rgba(26, 26, 26, 0.10)); } .photo-feature figcaption { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 10px; } /* ============ Wave 4: framed-image treatment (4.6 + 4.7) ============ Inner 1px ring (white 35%; every framed photo sits over a light ground) plus a bottom fade (ink 18% -> transparent by 45%) for caption/ground weight. One ::after carries both; border-radius matches the img radius so the overlay clips identically. An inset box-shadow directly on an paints UNDER the replaced content, hence the overlay element. The homepage .hero-bg is a full-bleed cinematic backdrop, not a framed image: it is exempt by design (its grade owns that surface). */ .photo-frame { position: relative; } .photo-frame img { display: block; } .photo-frame::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 18%, transparent) 0%, transparent 45%); pointer-events: none; } /* Wave 7 (7.1): every in-page anchor target clears the sticky header. Without this, the header CTA + callbar on /contact/ jump #contact-form underneath the fixed header, hiding the card's top bar, heading, and first expectation line at the exact moment of highest intent. */ [id] { scroll-margin-top: calc(var(--header-h) + 16px); } /* Contact form (§9b/§9c compliant; pixel captures submissions) */ .contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } /* Stacked: the form comes first so quick contact is obvious without scrolling past the intro and email column. */ .contact-grid > .form-card { order: -1; } } .form-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); } /* Wave 7 (7.1): 4px gradient accent bar across the card top, the .btn plum family rotated to 90deg, so the form visually belongs to the same conversion system as the buttons that point at it. overflow: hidden on the card clips the bar to the rounded corners. */ .form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #7E1486 0%, var(--accent) 55%, #560A5C 100%); } /* Wave 7 (7.1): expectation-setter above the fields. Three lines, each a claim the page already makes (solo practitioner replies herself, the success note's one-business-day window, the no-obligation microline). Hairline separator hands off into the fields. */ .form-expect { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); } .form-expect li { position: relative; padding-left: 24px; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; } .form-expect .tick { position: absolute; left: 0; top: 0; } .form-row { margin-bottom: var(--s2); } .form-row label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); } .form-row input, .form-row textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--radius); padding: 12px 14px; } /* Wave 3: fields take the universal 2px/4px ring from the global rule; the border shift marks the focused field inside the ring as well. */ .form-row input:focus-visible, .form-row textarea:focus-visible { border-color: var(--accent-3); } .form-row textarea { min-height: 120px; resize: vertical; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Wave 8 (8.6): 0.8125rem -> 0.875rem. The note pair (direct email line, privacy reassurance beside the submit) is conversion microcopy on the site's #1 conversion surface, so it rides the 14px floor, not the fine-print exemption. */ .form-note { font-size: 0.875rem; color: var(--ink-soft); margin-top: var(--s2); } .form-success { display: none; background: color-mix(in srgb, var(--accent-3) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-3) 45%, transparent); border-radius: var(--radius); padding: var(--s3); font-weight: 500; } .form-success.is-shown { display: block; } .call-points { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); } .call-points li { position: relative; padding-left: 26px; font-size: 0.9685rem; color: var(--ink-soft); line-height: 1.55; min-width: 0; } .call-points .tick { position: absolute; left: 0; top: 0; color: var(--accent-3); font-weight: 700; } .band-dark .call-points li { color: rgba(255, 255, 255, 0.85); } /* ============ Mobile sticky CTA (§7a: hidden on load, reveals after hero) ============ */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--accent); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(calc(100% + env(safe-area-inset-bottom))); transition: transform 0.3s ease; display: none; } .callbar.is-visible { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .callbar { transition: none; } } @media (max-width: 720px) { .callbar { display: block; } } /* Where the sticky callbar shows, give the footer enough bottom room that the disclaimer can scroll clear of it (callbar is ~74px + the device safe area). */ @media (max-width: 720px) { .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } } .callbar a { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface); color: var(--accent); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: var(--radius); min-height: 50px; touch-action: manipulation; transition: transform 0.06s ease; } .callbar a:active { transform: scale(0.985); } /* ============ Wave 2: entrance reveals ============ */ /* Hidden state rides html.js, set in only when IntersectionObserver exists: crawlers, no-JS visitors, and legacy browsers always see content. Sections rise 14px as they enter; the observer unobserves after firing. */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* Wave 3 (queued from Wave 2): staggered child entrances inside revealed grids. Runs as an animation with BACKWARDS fill only: children hide during their delay, rise in sequence, and once finished no fill pins the transform, so the Wave 3 card hover lift stays live. */ @keyframes lc-child-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > * { animation: lc-child-rise 0.5s ease backwards; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > :nth-child(2) { animation-delay: 0.08s; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > :nth-child(3) { animation-delay: 0.16s; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > :nth-child(4) { animation-delay: 0.24s; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > :nth-child(5) { animation-delay: 0.32s; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > :nth-child(6) { animation-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > * { animation: none; } } /* Mechanism quote on the dark band (rhythm rebalance 2026-06-11): the USP claim now lands as a white statement on ink-deep. */ .band-dark .mechanism-claim { color: #FFFFFF; } /* ============ Calendly inline embed (contact page) ============ Operator revision (2026-06-11): book on-site, no redirect. The widget carries the same gradient top bar as the form so the scheduler reads as the primary conversion surface. */ .calendly-wrap { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04); } .calendly-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, #7E1486 0%, var(--accent) 55%, #560A5C 100%); } /* Calendly inline embed (canonical: no overlay and no child element, so nothing can ever sit on top of Calendly's injected iframe). A page_height listener on the schedule page grows the container to fit each step; the fixed height is the pre-load / no-message fallback. */ .calendly-inline-widget { min-width: 0; width: 100%; height: 720px; } @media (max-width: 720px) { .calendly-inline-widget { height: 1040px; } } /* The schedule page leads with the scheduler (no hero), so its first band has to clear the fixed header on its own. */ .book-lead, .contact-lead { padding-top: calc(var(--header-h) + clamp(28px, 6vh, 64px)); } .book-lead .lede, .contact-lead .lede { margin-top: var(--s2); } .contact-lead .accent-word { color: var(--accent-2); } /* Contact page leads with quick-contact, then the form rides high: trim the lead's bottom and the form section's top so the form is in view on load. */ .contact-lead { padding-bottom: var(--s4); } .contact-form-section { padding-top: var(--s4); } /* Slim "book a time instead" chip (replaces the tall CTA card) so it stays high without pushing the form down. */ .book-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding: 14px var(--s3); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: background 0.2s ease, transform 0.2s ease; } @media (hover: hover) { .book-chip:hover { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); transform: translateY(-1px); } } .book-chip__text { font-size: 0.9375rem; } .book-chip__cta { color: var(--accent); font-weight: 700; white-space: nowrap; } @media (max-width: 560px) { .book-chip { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ============ Service-area map (hub hero) ============ */ .area-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 900px) { .area-hero-grid { grid-template-columns: 1fr; gap: var(--s4); } } .area-hero-copy { min-width: 0; } .area-hero-map { margin: 0; min-width: 0; } .area-map-embed { width: 100%; height: clamp(340px, 46vh, 480px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(22, 8, 32, 0.14); background: #eef1f4; } @media (max-width: 900px) { .area-map-embed { height: 320px; } } .area-map-loading { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: var(--s4); text-align: center; font-size: 0.875rem; color: var(--ink-soft); } .area-map-cap { margin: var(--s2) 0 0; font-size: 0.8125rem; color: var(--ink-soft); } /* ============ Legal / policy pages ============ */ .legal-prose { max-width: 760px; margin-inline: auto; } .legal-prose .legal-meta { color: var(--ink-soft); font-size: 0.875rem; margin-bottom: var(--s4); } .legal-prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: var(--s4); margin-bottom: var(--s2); } .legal-prose h2:first-of-type { margin-top: 0; } .legal-prose p, .legal-prose li { color: var(--ink-soft); line-height: 1.7; } .legal-prose p { margin-bottom: var(--s2); } .legal-prose ul { list-style: disc; padding-left: var(--s3); margin-bottom: var(--s3); } .legal-prose li { margin-bottom: 8px; } .legal-prose strong { color: var(--ink); } .legal-prose a { color: var(--accent); } @media (hover: hover) { .legal-prose a:hover { text-decoration: underline; } } /* ============ Cost-of-tired chart ============ */ .cost-viz { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: var(--s4); } @media (max-width: 880px) { .cost-viz { grid-template-columns: 1fr; gap: var(--s4); } } .cost-figure { margin: 0; } .cost-chart { width: 100%; height: auto; display: block; overflow: visible; } .cc-slump { fill: color-mix(in srgb, var(--punct) 7%, transparent); } .cc-axis { stroke: var(--line); stroke-width: 1.5; } .cc-marker { stroke: color-mix(in srgb, var(--ink) 28%, transparent); stroke-width: 1.4; stroke-dasharray: 4 5; } .cc-flag { fill: var(--ink-soft); font: 700 12px 'Manrope', system-ui, sans-serif; letter-spacing: 0.06em; } .cc-energy { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .cc-cost { fill: none; stroke: var(--punct); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .cc-dot-e { fill: var(--accent); } .cc-dot-c { fill: var(--punct); } .cc-tick { fill: var(--ink-soft); font: 600 12px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: 0.04em; } .cc-tick--mark { fill: var(--accent); font-weight: 700; } .cost-figcap { margin-top: var(--s3); font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55; } .cost-key { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; padding: 0; } .cost-key li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--ink); } .cost-key__sw { width: 20px; height: 4px; border-radius: 2px; flex-shrink: 0; } .cost-key__sw--energy { background: var(--accent); } .cost-key__sw--cost { background: var(--punct); } @media (prefers-reduced-motion: no-preference) { .js .cc-energy, .js .cc-cost { stroke-dasharray: 1200; stroke-dashoffset: 1200; } /* Draw only once the chart itself is well into view (its own observer adds .cc-in), not when the section heading first peeks in. */ .js .cost-chart.cc-in .cc-energy { animation: ccDraw 1.1s ease 0.1s forwards; } .js .cost-chart.cc-in .cc-cost { animation: ccDraw 1.1s ease 0.32s forwards; } } @keyframes ccDraw { to { stroke-dashoffset: 0; } } /* ============ Contact: ready-to-book pointer ============ */ .schedule-pointer { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; padding: clamp(24px, 3.5vw, 40px); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 68%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 2px 12px rgba(26, 26, 26, 0.04); } .schedule-pointer__copy { max-width: 48ch; } .schedule-pointer__copy h2 { margin: 6px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .schedule-pointer__copy p { color: var(--ink-soft); } .schedule-pointer .btn { flex-shrink: 0; } @media (max-width: 640px) { .schedule-pointer .btn { width: 100%; text-align: center; } } /* ============ Credibility bar (slim "trusted by" strip) ============ */ .credbar-band { padding: clamp(26px, 4vw, 42px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .credbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 52px); } .credbar-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; } .credbar-logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 52px); padding: 0; margin: 0; } .credbar-logos img { height: clamp(28px, 3.6vw, 40px); width: auto; filter: grayscale(1); opacity: 0.6; transition: filter 0.2s ease, opacity 0.2s ease; } .credbar-logos__tall img { height: clamp(40px, 5.2vw, 58px); } @media (hover: hover) { .credbar-logos img:hover { filter: none; opacity: 1; } } /* ============ Founder quote breakout (results page) ============ */ .founder-aside { display: flex; flex-direction: column; gap: var(--s4); } .founder-aside .photo-frame img { max-height: 460px; } .founder-quote { margin: 0; } /* ============ Footer legal: disclaimer + policy links ============ */ .footer-links { display: flex; gap: var(--s3); flex-wrap: wrap; } .footer-disclaimer { margin-top: var(--s3); font-size: 0.75rem; line-height: 1.6; color: color-mix(in srgb, var(--bg) 58%, transparent); max-width: 860px; } /* ============ Print ============ */ @media print { .site-header, .callbar, .skip-link { display: none !important; } section { padding-block: 16px; } body { background: #fff; } .js [data-reveal] { opacity: 1; transform: none; } .js [data-reveal].is-in :is(.card-grid, .offer-grid, .proof-row, .timeline) > * { animation: none; } .photo-frame::after { display: none !important; } } /* ===== Homepage v2 hero (concept option: on-stage action shot fading to black, Mel-Robbins-style, with a white CTA bar bridging into the page) ===== */ .hero-v2 { position: relative; background: radial-gradient(74% 60% at 13% -12%, rgba(6,2,12,0.97) 0%, rgba(6,2,12,0.6) 30%, rgba(6,2,12,0) 62%), radial-gradient(120% 100% at 22% 44%, #4a0c4d 0%, #38073c 32%, #240a30 62%, #160820 86%, #0e0518 100%), linear-gradient(180deg, #1b0a27 0%, #160820 68%, #0e0518 100%); background-color: #160820; color: #fff; min-height: 100vh; min-height: calc(100vh - clamp(76px, 10vh, 120px)); overflow: hidden; isolation: isolate; display: flex; align-items: center; } /* Stage-light aura: screen-blended glow pulled from the real photo (cool-blue rim, plum depth, one low coral ember) sitting BEHIND the photo so it rims her like a lit room. */ .hero-v2-aura { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; filter: saturate(106%); background: radial-gradient(44% 52% at 33% 30%, rgba(87,191,218,0.38) 0%, rgba(87,191,218,0.12) 42%, transparent 72%), radial-gradient(56% 60% at 26% 50%, rgba(126,20,134,0.46) 0%, rgba(126,20,134,0.16) 46%, transparent 76%), radial-gradient(30% 26% at 44% 72%, rgba(239,131,15,0.26) 0%, rgba(239,131,15,0.07) 50%, transparent 78%); animation: heroAuraBreathe 9s ease-in-out infinite; } @keyframes heroAuraBreathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } .hero-v2-photo { position: absolute; left: 0; bottom: 0; z-index: 2; height: 94%; width: auto; max-width: 62%; object-fit: contain; object-position: left bottom; /* Hand-safe: solid to 66%, near-solid (0.92) through 80% to keep the extended clicker hand lit, long soft tail to 98% so there is no rectangular edge; vertical pass melts the floor. */ -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, rgba(0,0,0,0.92) 80%, rgba(0,0,0,0.55) 90%, transparent 98%), linear-gradient(0deg, transparent 0%, #000 7%, #000 89%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 66%, rgba(0,0,0,0.92) 80%, rgba(0,0,0,0.55) 90%, transparent 98%), linear-gradient(0deg, transparent 0%, #000 7%, #000 89%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero-v2-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(135% 108% at 18% 56%, transparent 30%, rgba(22,8,32,0.5) 74%, rgba(14,5,24,0.82) 100%), linear-gradient(0deg, #0e0518 0%, rgba(14,5,24,0.62) 12%, rgba(14,5,24,0) 27%), linear-gradient(180deg, rgba(22,8,32,0.35) 0%, rgba(22,8,32,0) 18%); } .hero-v2-copy { position: relative; z-index: 3; width: 100%; text-align: right; padding-top: clamp(54px, 7vh, 70px); padding-bottom: clamp(40px, 7vh, 92px); } .hero-v2-copy .eyebrow { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); margin-bottom: 0.4rem; } /* Supporting paragraph + capper line: desktop hides them (hero stays tight); mobile shows them. */ .hero-v2-sub, .hero-v2-cap { display: none; } .hero-v2-pre { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.4rem, 3.2vw, 2.6rem); color: rgba(255, 255, 255, 0.85); margin: 0 0 0.06em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } .hero-v2-big { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3.1rem, 7vw, 6.2rem); line-height: 0.96; letter-spacing: -0.025em; color: #fff; margin: 0 0 0 auto; max-width: 11ch; text-shadow: 0 6px 50px rgba(14,5,24,0.6), 0 2px 14px rgba(14,5,24,0.5); } /* Two-tier headline: smaller lead-in, big payoff (the V2 "small setup / big punch" treatment). */ .hero-lead { display: block; font-size: 0.42em; line-height: 1.08; letter-spacing: -0.01em; font-weight: 700; margin-bottom: 0.12em; } .hero-punch { display: block; text-transform: uppercase; } /* Google reviews pill under the H1 (inherits the copy's right-alignment; centers on mobile). */ .hero-v2-review { margin: clamp(14px, 2.4vh, 26px) 0 0; font-family: var(--font-body); font-size: 0.98rem; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 8px rgba(14, 5, 24, 0.65); } .hero-v2-review .stars { color: var(--accent-3); letter-spacing: 1.5px; margin-right: 3px; } .hero-v2-review #reviewCount { font-weight: 700; } /* Credibility checks below the CTA card — they sit on the light page, so dark text. */ .hero-v2-credits { list-style: none; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s4) clamp(28px, 4vh, 48px); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; column-gap: clamp(18px, 2.6vw, 44px); row-gap: 8px; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); } .hero-v2-credits li { display: flex; align-items: center; gap: 8px; } .hero-v2-credits .tick { color: var(--accent-3); font-weight: 700; } /* Warm glow floor: one continuous wash anchored to the hero's true bottom (the seam), so it never reads as an overlay that stops at the card's top edge. */ .hero-v2-floor { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(240px, 40vh, 440px); z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(239,131,15,0.32) 0%, rgba(216,86,24,0.2) 20%, rgba(150,30,110,0.1) 48%, rgba(126,20,134,0.045) 72%, transparent 100%); } /* The white seam under the hero (was showing the cream page bg). flow-root contains the credits' margins but lets the CTA card's negative margin-top poke up into the hero, so the card still straddles the dark->white seam. */ .hero-v2-seam { background: var(--surface); display: flow-root; } /* CTA: a full rounded card straddling the hero -> white seam. Rises into the hero bottom; its lower body sits on white. */ .hero-v2-ctabar { position: relative; z-index: 6; margin-top: clamp(-84px, -8vh, -56px); margin-bottom: clamp(24px, 4vh, 48px); } .hero-v2-ctabar-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); background: linear-gradient(100deg, #ef830f 0%, #e0670a 36%, #b8350f 64%, #7E1486 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 52px); box-shadow: 0 22px 60px rgba(239,131,15,0.22), 0 1px 0 rgba(255,255,255,0.16) inset, 0 18px 44px rgba(14,5,24,0.42); } .hero-v2-cta-h { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.6rem); margin: 0; color: #fff; } .hero-v2-cta-sub { font-size: 0.95rem; color: rgba(255,255,255,0.9); margin: 5px 0 0; max-width: 54ch; } /* White pill on the warm bar: the single brightest, unmistakable tap target (scoped override of the base plum-gradient btn). */ .hero-v2-ctabar .btn { flex-shrink: 0; white-space: nowrap; background: #fff; color: #3d063f; font-weight: 700; border: none; box-shadow: 0 8px 22px rgba(61,6,63,0.32); } .hero-v2-ctabar .btn:hover { background: #FFF7EE; color: #3d063f; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(61,6,63,0.4); } @media (max-width: 860px) { .hero-v2 { align-items: flex-end; padding-bottom: 0; } /* Mobile uses the wide on-stage-with-audience shot as a full-bleed cinematic cover. */ .hero-v2-photo { left: 0; top: 0; right: 0; bottom: 0; transform: none; max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%; -webkit-mask-image: none; mask-image: none; } /* Cinematic scrim so the white copy reads over the lit stage; deepens toward the CTA card. */ .hero-v2-veil { background: linear-gradient(180deg, rgba(8,3,16,0.5) 0%, rgba(8,3,16,0.16) 26%, rgba(8,3,16,0.34) 54%, rgba(8,3,16,0.78) 82%, rgba(8,3,16,0.94) 100%); } /* Lift the headline group toward her bust line; padding-bottom scales with height (more lift on tall phones) and always clears the CTA card's upward overlap. */ .hero-v2-copy { text-align: center; padding-top: clamp(20px, 4vh, 40px); padding-bottom: clamp(120px, calc(20vh - 10px), 250px); } /* Drop the eyebrow on mobile — keeps the headline the clean focal point over the photo. */ .hero-v2-copy .eyebrow { display: none; } /* Mobile-only supporting paragraph + capper line (desktop hides them). */ .hero-v2-sub { display: block; color: rgba(255, 255, 255, 0.94); font-size: 1rem; line-height: 1.5; max-width: 33ch; margin: clamp(14px, 2.6vh, 22px) auto 0; text-shadow: 0 1px 3px rgba(8,3,16,0.92), 0 2px 16px rgba(8,3,16,0.7); } .hero-v2-cap { display: block; margin: clamp(10px, 1.8vh, 16px) auto 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.25rem, 5.6vw, 1.6rem); letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 6px rgba(8,3,16,0.92), 0 3px 22px rgba(8,3,16,0.7); } .hero-v2-pre { color: #fff; text-shadow: 0 1px 3px rgba(8,3,16,0.92), 0 3px 22px rgba(8,3,16,0.72); } .hero-v2-big { text-shadow: 0 2px 6px rgba(8,3,16,0.92), 0 4px 34px rgba(8,3,16,0.74); margin: 0 auto; max-width: 18ch; } /* Stars on their own line, above the review text. */ .hero-v2-review { margin-top: clamp(12px, 2.6vh, 22px); font-size: 0.95rem; text-shadow: 0 1px 3px rgba(8,3,16,0.9), 0 2px 16px rgba(8,3,16,0.66); } .hero-v2-review .stars { display: block; margin: 0 0 5px; font-size: 1.15rem; letter-spacing: 3px; } .hero-v2-credits { font-size: 0.86rem; column-gap: clamp(14px, 4vw, 26px); padding-bottom: clamp(22px, 3.5vh, 36px); } .hero-v2-credits li { align-items: flex-start; } .hero-v2-credits .tick { line-height: 1.45; } .cta-line2 { display: block; } .hero-v2-ctabar { margin-top: clamp(-185px, -16vh, -125px); margin-left: var(--s4); margin-right: var(--s4); } .hero-v2-ctabar .container { padding-left: 0; padding-right: 0; } .hero-v2-ctabar-inner { flex-direction: column; align-items: stretch; text-align: center; gap: var(--s3); } .hero-v2-ctabar .btn { align-self: center; width: auto; } .hero-v2-cta-sub { max-width: none; } } @media (prefers-reduced-motion: reduce) { .hero-v2-aura { animation: none; opacity: 0.92; } }