@font-face { font-family: 'Fraunces'; src: url('../vendor/fonts/fraunces-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../vendor/fonts/fraunces-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JBMono'; src: url('../vendor/fonts/jbmono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JBMono'; src: url('../vendor/fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root { color-scheme: dark; --bg: #070b14; --bg-rgb: 7, 11, 20; --navy: #0f1729; --navy-rgb: 15, 23, 41; --ink: #ece9f4; --ink-rgb: 236, 233, 244; --ink-dim: rgba(236, 233, 244, 0.62); --ink-soft: rgba(236, 233, 244, 0.55); --ink-faint: rgba(236, 233, 244, 0.32); --purple: #955eba; --accent: #7f6ce0; --accent-rgb: 127, 108, 224; --season: #9d8bff; --hairline: rgba(236, 233, 244, 0.14); --err: #ef8383; --radius: 6px; --serif: 'Fraunces', 'Georgia', serif; --mono: 'JBMono', 'Consolas', monospace; --ease-out: cubic-bezier(0.19, 1, 0.22, 1); } body.season-spring { --season: #9d8bff; } body.season-summer { --season: #e6b96e; } body.season-fall { --season: #d98a4a; } body.season-winter { --season: #8fc3e8; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } html.has-cursor, html.has-cursor * { cursor: none !important; } body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-weight: 500; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--bg); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :is(a, button, summary):focus-visible { outline: 1px solid var(--season); outline-offset: 3px; border-radius: 2px; } .pill:focus-visible { border-radius: 99px; } .mono { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; } .world { position: fixed; inset: 0; z-index: 0; background: var(--bg); } .world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: 0; } .world picture:first-child img { opacity: 1; } .world video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: 0; transition: opacity 0.9s ease; } .world video.on { opacity: 1; } #morph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.35s ease; } #morph.on { opacity: 1; } .world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--bg-rgb),0.32) 0%, transparent 30%, transparent 62%, rgba(var(--bg-rgb),0.66) 100%), linear-gradient(90deg, rgba(var(--bg-rgb),0.52) 0%, rgba(var(--bg-rgb),0.30) 32%, transparent 58%); pointer-events: none; } .world .veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(var(--bg-rgb), 0.94) 0%, rgba(var(--bg-rgb), 0.86) 40%, rgba(var(--bg-rgb), 0.62) 66%, rgba(var(--bg-rgb), 0.44) 100%); opacity: 0; pointer-events: none; will-change: opacity; } .world .dim { position: absolute; inset: 0; z-index: 2; background: rgba(var(--bg-rgb),0.82); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .world.is-dimmed .dim { opacity: 1; } #particles { position: fixed; inset: 0; z-index: 3; pointer-events: none; } .vignette { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 52%, rgba(var(--bg-rgb), 0.52) 100%); } .grain { position: fixed; inset: -100%; z-index: 41; pointer-events: none; background-repeat: repeat; opacity: 0.06; mix-blend-mode: overlay; animation: grainShift 1.1s steps(10) infinite; } @keyframes grainShift { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-3%, -4%); } 20% { transform: translate(-6%, 2%); } 30% { transform: translate(4%, -8%); } 40% { transform: translate(-3%, 9%); } 50% { transform: translate(-7%, 5%); } 60% { transform: translate(7%, 0); } 70% { transform: translate(0, 7%); } 80% { transform: translate(2%, 12%); } 90% { transform: translate(-5%, 5%); } } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 2.2rem; } .nav::before { content: ''; position: absolute; inset: 0; background: rgba(var(--bg-rgb),0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .nav.nav--scrolled::before { opacity: 1; } .nav > * { position: relative; z-index: 1; } .nav .wordmark { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.22em; font-weight: 500; display: inline-flex; align-items: center; gap: 0.65rem; } .nav-icon { width: 26px; height: 26px; border-radius: 50%; } .nav .navlinks { display: flex; align-items: center; gap: 1.6rem; } .nav .navlink { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s ease; padding: 0.5rem 0.2rem; } .nav .navlink:hover, .nav .navlink[aria-current="page"] { color: var(--ink); } .nav .wordmark em { font-style: normal; color: var(--season); transition: color 1.2s ease; } .pill { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.78rem 1.5rem; border: 1px solid var(--hairline); border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(var(--bg-rgb),0.45); transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease; will-change: transform; } .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--season); transition: background 1.2s ease; } .pill:hover { border-color: var(--season); background: rgba(var(--bg-rgb),0.65); } .pill--solid { background: var(--accent); border-color: var(--accent); color: #fff; } .pill--solid:hover { background: var(--purple); border-color: var(--purple); } .pill--solid .dot { background: #fff; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px 0; border-radius: 50%; color: var(--ink-soft); transition: color 0.3s ease; } .theme-toggle:hover { color: var(--ink); } .theme-toggle svg { width: 17px; height: 17px; display: block; } .theme-toggle .i-moon { display: none; } .rail { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; align-items: center; gap: 1.1rem; } .rail .track { width: 1px; height: 130px; background: var(--hairline); position: relative; overflow: hidden; } .rail .track .fill { position: absolute; inset: 0; background: var(--season); transform-origin: top; transform: scaleY(0); transition: background 1.2s ease; } .rail ol { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } .rail button { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.5s ease; } .rail button[aria-current="true"] { color: var(--season); } .rail button:hover { color: var(--ink); } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; } .cursor-dot { width: 5px; height: 5px; background: var(--season); } .cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(var(--ink-rgb), 0.35); transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), border-color 0.35s ease; } .cursor-ring.is-hover { width: 62px; height: 62px; border-color: var(--season); } @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } .loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; } .loader .wordmark { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.34em; } .loader .count { font-family: var(--serif); font-size: 3.2rem; font-weight: 500; color: var(--ink-dim); font-variant-numeric: tabular-nums; } .loader .bar { width: 120px; height: 1px; background: var(--hairline); overflow: hidden; } .loader .bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); } main { position: relative; z-index: 10; } .chapter { position: relative; height: 120vh; } .chapter .hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 2.2rem; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } .eyebrow { display: flex; align-items: center; gap: 0.9rem; color: var(--season); transition: color 1.2s ease; margin-bottom: 1.4rem; } .eyebrow .line { width: 42px; height: 1px; background: currentColor; } @media (min-width: 1024px) { #hero .hold { justify-content: flex-start; padding-top: 6.6rem; } #hero .eyebrow { margin-top: auto; } } @media (min-width: 1024px) and (max-height: 820px) { .chapter .hold { padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); } #hero .hold { padding-top: 6rem; } } h1, h2 { font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; } h1 { font-size: clamp(2.6rem, min(7.4vw, 14vh), 7.6rem); max-width: 12ch; } .chapter h2 { font-size: clamp(2.4rem, min(6.4vw, 12.5vh), 6.4rem); max-width: 14ch; } @media (min-width: 1024px) and (max-width: 1600px) { h1 { font-size: clamp(2.6rem, min(6.6vw, 13vh), 6.2rem); } .chapter h2 { font-size: clamp(2.4rem, min(5.6vw, 11.5vh), 5.4rem); } .after h3 { font-size: clamp(2rem, 4.2vw, 3.6rem); } } @media (min-width: 1024px) and (max-height: 820px) { h1 { font-size: clamp(2.6rem, min(6.6vw, 11.5vh), 6.2rem); } .chapter h2 { font-size: clamp(2.4rem, min(5.6vw, 10.5vh), 5.4rem); } } @media (min-width: 1024px) and (max-height: 790px) { .chapter .hold { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); } h1 { font-size: clamp(2.4rem, min(6.6vw, 10.5vh), 6.2rem); } .chapter h2 { font-size: clamp(2.2rem, min(5.6vw, 9.6vh), 5.4rem); } } .sub { font-family: var(--mono); font-weight: 400; font-size: clamp(0.8125rem, 1vw, 0.9375rem); line-height: 1.75; letter-spacing: 0.02em; color: var(--ink-dim); max-width: 44ch; margin-top: 1.6rem; } #hero .sub { font-size: clamp(0.9rem, 1.1vw, 1.0625rem); color: rgba(var(--ink-rgb), 0.78); } .tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.8rem; } .tags span { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.95rem; border: 1px solid var(--hairline); border-radius: 99px; color: var(--ink-dim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(var(--bg-rgb),0.4); } .hero-q { margin-top: 2rem; max-width: 520px; } .hero-q-ask { display: inline-block; color: var(--ink); font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.85rem; padding: 0.42rem 0.72rem; background: rgba(var(--bg-rgb),0.9); border-radius: var(--radius); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .hero-choices { gap: 0.5rem; } #hero .hero-choices button { padding: 0.72rem 0.8rem; font-size: 0.9rem; text-align: center; min-height: 44px; color: var(--ink); background: rgba(var(--bg-rgb),0.9); border: 1px solid rgba(var(--ink-rgb), 0.3); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } #hero .hero-choices button:hover { background: rgba(var(--navy-rgb),0.94); border-color: var(--accent); } #hero .hero-choices button.picked { background: rgba(var(--accent-rgb),0.42); border-color: var(--accent); } .hero-ctas { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; } .scroll-cue { position: absolute; bottom: 2.2rem; right: 2.4rem; display: flex; align-items: center; gap: 0.7rem; color: var(--ink-soft); } .scroll-cue .tick { width: 1px; height: 34px; background: var(--ink-soft); overflow: hidden; position: relative; } .scroll-cue .tick::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--season); animation: cue 2.2s ease-in-out infinite; } @keyframes cue { 0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; } } .detail { position: absolute; right: 6vw; top: 16vh; width: clamp(180px, 20vw, 300px); border: 1px solid var(--hairline); padding: 0.55rem; background: rgba(var(--bg-rgb),0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); will-change: transform; } .detail img { aspect-ratio: 4 / 3; object-fit: cover; } .detail figcaption { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); padding: 0.65rem 0.25rem 0.2rem; display: flex; justify-content: space-between; } .harvest { display: flex; gap: 0.9rem; margin-top: 2rem; flex-wrap: wrap; } .harvest .card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.15rem 1.3rem; min-width: 200px; background: rgba(var(--bg-rgb),0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .harvest .num { font-family: var(--serif); font-size: 2rem; color: var(--season); transition: color 1.2s ease; } .harvest .lbl { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.45rem; line-height: 1.6; } .after { position: relative; z-index: 10; background: var(--bg); } .after::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/t1-texture.webp'); background-repeat: repeat; background-size: 900px auto; opacity: 0.22; pointer-events: none; } .after > section { position: relative; padding: 9rem 2.2rem; max-width: 1200px; margin: 0 auto; } .after .kicker { color: var(--accent); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.9rem; } .after .kicker .line { width: 42px; height: 1px; background: currentColor; } .after h3 { font-size: clamp(2rem, 4.6vw, 4.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.015em; max-width: 16ch; } .after .pill .dot { background: var(--accent); } .faq .a, .founder-copy p, .quote p { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-dim); max-width: 58ch; } .proof-note { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-dim); max-width: 58ch; margin-top: 1.4rem; } .clients { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3rem; } .client { display: flex; flex-direction: column; gap: 0.9rem; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.8rem 2rem; background: rgba(var(--navy-rgb),0.5); transition: border-color 0.35s ease, transform 0.35s var(--ease-out); } .client:hover { border-color: var(--accent); transform: translateY(-3px); } .client-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .client h4 { font-size: 1.45rem; font-weight: 600; } .client .visit { color: var(--ink-soft); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.3s ease; } .client:hover .visit { color: var(--accent); } .client .what { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: none; } .client .tags { margin-top: 0.2rem; } .clients .client:nth-child(odd):last-child { grid-column: 1 / -1; } .more-builds { margin-top: 2.6rem; } .more-label { color: var(--ink-soft); margin-bottom: 1.2rem; } .clients-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hairline); } .clients-more > * { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 0.4rem; border-bottom: 1px solid var(--hairline); } .clients-more span:first-child { font-family: var(--serif); font-weight: 500; font-size: 0.9875rem; color: var(--ink-dim); transition: color 0.3s ease; } .clients-more .mono { font-size: 0.5938rem; letter-spacing: 0.12em; color: var(--ink-soft); text-transform: uppercase; } .clients-more a:hover span:first-child { color: var(--accent); } @media (max-width: 1023px) { .clients-more { grid-template-columns: 1fr; } } @media (max-width: 1023px) { .clients { grid-template-columns: 1fr; } .clients .client:nth-child(odd):last-child { grid-column: auto; } } .paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 3.2rem; } .path { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2.2rem; background: rgba(var(--navy-rgb),0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 1.3rem; transition: border-color 0.4s ease, transform 0.4s var(--ease-out); } .path:hover { border-color: var(--accent); transform: translateY(-4px); } .path .path-n { color: var(--accent); } .path h4 { font-size: 1.7rem; font-weight: 500; } .path ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .path li { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; line-height: 1.6; color: var(--ink-dim); padding-left: 1.2rem; position: relative; } .path li::before { content: '+'; position: absolute; left: 0; color: var(--accent); } .path .pill { align-self: flex-start; margin-top: auto; } .own-list { margin-top: 3rem; display: flex; flex-direction: column; } .own-list .row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--hairline); } .own-list .row:first-child { border-top: 1px solid var(--hairline); } .own-list .what { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 500; transition: color 0.35s ease; } .own-list .row:hover .what { color: var(--accent); } .own-list .who { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .founder-grid { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: center; margin-top: 3rem; } .portrait { aspect-ratio: 4 / 5; border: 1px solid var(--hairline); border-radius: var(--radius); display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(160deg, rgba(149, 94, 186, 0.22), rgba(var(--navy-rgb),0.75)); overflow: clip; } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .builton { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; color: var(--ink-soft); } .chip { display: inline-flex; align-items: center; } .chip img { height: 38px; width: auto; display: block; } .chip img[src*="claude"] { height: 36px; border-radius: 8px; } .stack-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; color: var(--ink-soft); } .founder-copy p { margin-top: 1.1rem; } .founder-copy .name { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; max-width: none; } .founder-copy .pill { margin-top: 1.6rem; } #academy .academy-panel { background: #fdfcff; color: #16181d; border: 1px solid #e6e4ee; border-radius: var(--radius); padding: 4.2rem 3.6rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } #academy .kicker { color: #7C45A1; } #academy h3 { color: #16181d; } #academy .academy-lead { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.65; color: #4a4f5c; max-width: 58ch; margin-top: 1.4rem; } #academy .academy-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.8rem; } #academy .session { background: #faf9fc; border: 1px solid #e6e4ee; border-radius: var(--radius); padding: 1.8rem 2rem; transition: border-color 0.35s ease, transform 0.35s var(--ease-out); } #academy .session:hover { border-color: #6D57DB; transform: translateY(-3px); } #academy .s-day { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7C45A1; } #academy .session h4 { font-size: 1.35rem; font-weight: 600; margin: 0.7rem 0 0.5rem; } #academy .session p { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; line-height: 1.7; color: #6b7280; } #academy .academy-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.8rem; } #academy .pill { background: #6D57DB; border-color: #6D57DB; color: #fff; } #academy .pill:hover { background: #7C45A1; border-color: #7C45A1; } #academy .pill .dot { background: #fff; } #academy .academy-note { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7280; } @media (max-width: 1023px) { #academy .academy-panel { padding: 2.6rem 1.5rem; } #academy .academy-sessions { grid-template-columns: 1fr; } } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3.2rem; } .step { border-top: 1px solid var(--hairline); padding-top: 1.3rem; transition: border-color 0.4s ease; } .step:hover { border-color: var(--accent); } .step-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: 1.2rem; filter: saturate(0.85); transition: filter 0.5s ease, transform 0.5s var(--ease-out); } .step:hover .step-img { filter: saturate(1.15); transform: translateY(-3px); } .step .n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em; color: var(--accent); } .step h4 { font-size: 1.25rem; font-weight: 500; margin: 0.7rem 0 0.5rem; } .step p { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; line-height: 1.7; color: var(--ink-dim); } .faq { margin-top: 3rem; } .faq details { border-bottom: 1px solid var(--hairline); } .faq details:first-child { border-top: 1px solid var(--hairline); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; transition: color 0.3s ease; } .faq summary:hover { color: var(--accent); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--mono); color: var(--accent); font-size: 1.2rem; transition: transform 0.3s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .a { padding-bottom: 1.6rem; overflow: clip; } .book-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .book-wrap h3 { max-width: 22ch; } .apply { width: 100%; max-width: 680px; margin-top: 1.5rem; text-align: left; border: 1px solid var(--hairline); border-radius: var(--radius); background: rgba(var(--navy-rgb),0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 2.4rem 2.6rem 2.2rem; } .apply-head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2.2rem; } .apply-head .step-count { color: var(--accent); white-space: nowrap; } .apply-bar { flex: 1; height: 1px; background: var(--hairline); overflow: hidden; } .apply-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0.167); transition: transform 0.5s var(--ease-out); } .apply fieldset { border: none; display: none; } .apply fieldset.is-active { display: block; animation: stepIn 0.5s var(--ease-out); } @keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .apply .q { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; margin-bottom: 1.5rem; } .apply input { width: 100%; background: transparent; border: none; outline: none; border-bottom: 1px solid var(--hairline); font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--ink); padding: 0.7rem 0 0.8rem; transition: border-color 0.35s ease; border-radius: 0; } .apply input:focus { border-color: var(--accent); } .apply input::placeholder { color: var(--ink-faint); } .ferr { display: block; margin-top: 0.8rem; color: var(--err); } .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .choices--stack { grid-template-columns: 1fr; } .choices--grid button { text-align: center; padding: 0.85rem 0.7rem; font-size: 0.98rem; } .apply .choices + input:not([hidden]) { margin-top: 1.1rem; } .choices button { text-align: left; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; padding: 1.05rem 1.2rem; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink-dim); background: rgba(var(--bg-rgb),0.35); transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out); } .choices button:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); } .choices button.picked { border-color: var(--accent); color: var(--ink); background: rgba(var(--accent-rgb),0.16); } .apply-nav { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.4rem; } .apply-nav .ghost { color: var(--ink-soft); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s ease; } .apply-nav .ghost:hover { color: var(--ink); } .apply-nav .hint { color: var(--ink-faint); margin-left: auto; } .apply-nav .pill { justify-content: center; min-width: 150px; } .apply-nav .pill .dot { display: none; } .apply.is-choice .apply-nav .pill, .apply.is-choice .apply-nav .hint { visibility: hidden; } .cal-wrap { width: 100%; max-width: 900px; } .cal-note { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--ink-dim); margin-bottom: 2rem; } #cal-embed { min-height: 700px; border-radius: var(--radius); overflow: clip; background: rgba(var(--navy-rgb),0.4); } #cal-embed iframe { min-height: 700px; } footer { position: relative; z-index: 10; background: var(--bg); border-top: 1px solid var(--hairline); padding: 4.5rem 2.2rem 2.4rem; } footer .sign { font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 2.6rem; } footer .entity-line { font-family: var(--serif); font-weight: 500; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); max-width: 72ch; margin-bottom: 2.6rem; } footer .entity-line a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; } footer .entity-line a:hover { color: var(--ink); } footer .foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--ink-soft); } footer a:hover, footer .to-top:hover { color: var(--ink); } footer .foot-row a, footer .to-top { padding: 0.55rem 0.7rem; margin: -0.55rem -0.7rem; } footer .to-top { letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s ease; } .fade-up { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); } .fade-up.is-in { opacity: 1; transform: none; } .split-parent .line { overflow: clip; } @media (max-width: 1023px) { .world img, .world video { inset: auto; top: 27%; left: 50%; width: 125%; max-width: none; height: auto; aspect-ratio: 2560 / 1096; transform: translateX(-50%); object-fit: cover; object-position: center center; } .world::before { content: ''; position: absolute; z-index: 1; top: 27%; left: 50%; width: 125%; aspect-ratio: 2560 / 1096; transform: translateX(-50%); background: linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 76%, var(--bg) 100%); pointer-events: none; } .rail { display: none; } .chapter { height: 120vh; } .chapter .hold { padding: 0 1.4rem; padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } .detail { top: 10vh; right: 1.4rem; width: 150px; } .paths-grid, .founder-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .after > section { padding: 5.5rem 1.4rem; } .scroll-cue { display: none; } .nav { padding: 1.1rem 1.4rem; gap: 1.25rem; } .nav .wordmark { font-size: 0.6875rem; letter-spacing: 0.16em; gap: 0.5rem; white-space: nowrap; } .nav-icon { width: 22px; height: 22px; } .nav .navlinks { gap: 1.15rem; } .nav .navlink { font-size: 0.625rem; } .nav .pill { padding: 0.94rem 1.15rem; font-size: 0.625rem; letter-spacing: 0.14em; white-space: nowrap; } .pill, .tags span, .detail, .harvest .card, .path { -webkit-backdrop-filter: none; backdrop-filter: none; } .grain { display: none; } .pill, .detail { will-change: auto; } .detail.fade-up { transform: none; transition: opacity 0.6s var(--ease-out); } .detail { position: static; top: auto; right: auto; width: auto; align-self: flex-end; display: flex; flex-direction: row-reverse; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; border: none; background: none; padding: 0; } .detail img { width: 64px; aspect-ratio: 1; flex: none; border: 1px solid var(--hairline); border-radius: 8px; } .detail figcaption { padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right; } #hero .hold { justify-content: flex-start; padding-top: calc(5.4rem + env(safe-area-inset-top)); } #hero .eyebrow { margin-bottom: 0.75rem; font-size: 0.5938rem; letter-spacing: 0.11em; gap: 0.55rem; } #hero .eyebrow .line { width: 26px; } #hero h1 { max-width: none; font-size: clamp(2rem, 9.6vw, 3.4rem); } #hero .sub { margin-top: 1.35rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.88); } #hero .hero-q { margin-top: auto; } #hero .hero-ctas { flex-wrap: wrap; } #hero .hero-ctas .pill { padding: 0.95rem 1.15rem; letter-spacing: 0.12em; flex: none; } .chapter:not(#hero) .eyebrow { order: 1; } .chapter:not(#hero) h2 { order: 2; } .chapter:not(#hero) .detail { order: 3; margin-bottom: 0; } .chapter:not(#hero) .sub { order: 4; } .chapter:not(#hero) .tags, .chapter:not(#hero) .harvest, .chapter:not(#hero) .hero-ctas { order: 5; } .chapter:not(#hero) .hold { justify-content: flex-start; padding-top: calc(5.4rem + env(safe-area-inset-top)); } #spring .detail, #summer .detail, #winter .detail, #fall .detail { margin-top: auto; } #finale .sub { margin-top: auto; } #fall h2 { font-size: clamp(1.85rem, 6vw, 6.4rem); max-width: none; } #fall .sub { margin-top: 1rem; line-height: 1.55; } .harvest { margin-top: 0.8rem; gap: 0.45rem; } .harvest .card { padding: 0.65rem 1rem; } .harvest .num { font-size: 1.35rem; } .harvest .lbl { margin-top: 0.3rem; } .chapter .sub { color: rgba(var(--ink-rgb), 0.88); text-shadow: 0 1px 2px rgba(var(--bg-rgb),0.95), 0 0 14px rgba(var(--bg-rgb),0.82); } .detail figcaption { color: rgba(var(--ink-rgb), 0.8); text-shadow: 0 1px 2px rgba(var(--bg-rgb),0.95), 0 0 12px rgba(var(--bg-rgb),0.85); } .chapter h1, .chapter h2 { text-shadow: 0 2px 26px rgba(var(--bg-rgb),0.5); } .chapter .eyebrow { text-shadow: 0 1px 10px rgba(var(--bg-rgb),0.7); } } @media (max-width: 700px) { .navlink { display: none; } .nav .wordmark { font-size: 0.5625rem; letter-spacing: 0.11em; gap: 0.4rem; } .nav-icon { width: 18px; height: 18px; } .nav .pill { padding: 0.95rem 0.8rem; font-size: 0.5938rem; letter-spacing: 0.12em; } .theme-toggle { width: 34px; height: 34px; } .nav .navlinks { gap: 0.7rem; } .apply { padding: 1.7rem 1.4rem 1.6rem; } .choices { gap: 0.6rem; } .choices button { padding: 0.9rem 1rem; font-size: 1rem; } } @media (max-width: 1023px) and (max-height: 760px) { .chapter h2 { font-size: clamp(2.1rem, 6.4vw, 6.4rem); } .chapter .hold { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); } } @media (max-width: 1023px) and (max-height: 600px) { .harvest { margin-top: 0.6rem; gap: 0.35rem; } .harvest .card { padding: 0.45rem 0.85rem; } .harvest .num { font-size: 1.1rem; } .harvest .lbl { line-height: 1.45; } .detail img { width: 48px; } .hero-q { margin-top: 1.1rem; } .hero-q-ask { margin-bottom: 0.55rem; font-size: 0.65rem; letter-spacing: 0.1em; padding: 0.32rem 0.6rem; } .hero-choices { gap: 0.4rem; } .hero-choices button { padding: 0.5rem 0.55rem; font-size: 0.8rem; min-height: 44px; } .hero-ctas { margin-top: 1rem; } } @media (max-width: 359px) { .nav .wm-tail { display: none; } #hero .hero-ctas .pill { padding: 0.95rem 0.8rem; font-size: 0.625rem; letter-spacing: 0.1em; } #hero .eyebrow .line { display: none; } } :root[data-theme="light"] { color-scheme: light; --bg: #fdfcff; --bg-rgb: 253, 252, 255; --navy: #f4f2f9; --navy-rgb: 244, 242, 249; --ink: #16181d; --ink-rgb: 22, 24, 29; --ink-dim: rgba(22, 24, 29, 0.72); --ink-soft: rgba(22, 24, 29, 0.6); --ink-faint: rgba(22, 24, 29, 0.35); --purple: #7C45A1; --accent: #6D57DB; --accent-rgb: 109, 87, 219; --season: #5B49CE; --hairline: rgba(22, 24, 29, 0.15); --err: #c23636; } :root[data-theme="light"] body.season-spring { --season: #5B49CE; } :root[data-theme="light"] body.season-summer { --season: #9A6A14; } :root[data-theme="light"] body.season-fall { --season: #B05E1E; } :root[data-theme="light"] body.season-winter { --season: #28709F; } :root[data-theme="light"] .world::after { background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0.55) 0%, rgba(var(--bg-rgb), 0.28) 30%, rgba(var(--bg-rgb), 0.28) 62%, rgba(var(--bg-rgb), 0.9) 100%), linear-gradient(90deg, rgba(var(--bg-rgb), 0.85) 0%, rgba(var(--bg-rgb), 0.6) 32%, rgba(var(--bg-rgb), 0.25) 58%); } :root[data-theme="light"] .grain { opacity: 0.045; } :root[data-theme="light"] .after::before, :root[data-theme="light"] .lp::before, :root[data-theme="light"] .post-body::before, :root[data-theme="light"] .blog-body::before { filter: invert(1) hue-rotate(180deg); opacity: 0.12; } :root[data-theme="light"] #academy .academy-panel { background: #ffffff; box-shadow: 0 18px 60px rgba(22, 19, 29, 0.1); } :root[data-theme="light"] .lp-shot { border-color: rgba(22, 24, 29, 0.12); box-shadow: 0 22px 60px rgba(22, 19, 29, 0.16); } :root[data-theme="light"] img[src*="ghl-logo-dark"] { filter: brightness(0); } :root[data-theme="light"] .theme-toggle .i-sun { display: none; } :root[data-theme="light"] .theme-toggle .i-moon { display: block; } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } .scroll-cue .tick::after { animation: none; } .grain { animation: none; } } .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.6rem; } .work-grid--3 { grid-template-columns: repeat(3, 1fr); } .work-grid figure, figure.work-one { margin: 0; } .work-grid img, figure.work-one img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius, 10px); background: var(--navy); } .work-grid figcaption, figure.work-one figcaption { margin-top: 0.7rem; font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.55; color: var(--ink-dim); } .work-grid figcaption strong, figure.work-one figcaption strong { color: var(--ink); font-weight: 500; } figure.work-one { margin-top: 2.4rem; max-width: 56rem; } .work-grid .phone img { max-width: 15rem; margin: 0 auto; border: 0; background: none; } .work-note { margin-top: 1.6rem; font-size: 0.85rem; color: var(--ink-dim); max-width: 60ch; } @media (max-width: 760px) { .work-grid, .work-grid--3 { grid-template-columns: 1fr; } } .post-related { margin-top: 3rem; padding: 1.6rem 1.6rem 1.2rem; border: 1px solid var(--hairline); border-left: 2px solid var(--season, #7f6ce0); border-radius: var(--radius); } .post-related h2 { margin: 0 0 0.8rem; font-size: 1.15rem; } .post-related ul { margin: 0; padding-left: 1.1rem; } .post-related li { margin-bottom: 0.55rem; } .client-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--hairline); margin-bottom: 0.4rem; } .helped { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; } .helped li { padding: 0.9rem 0; border-top: 1px solid var(--hairline); line-height: 1.55; } .helped li strong { font-weight: 600; color: var(--ink); } @media (max-width: 760px) { .helped { grid-template-columns: 1fr; } } .lp { position: relative; z-index: 10; background: var(--bg); } .lp::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: url('../assets/t1-texture.webp'); background-repeat: repeat; background-size: 900px auto; opacity: 0.15; pointer-events: none; } .lp section { max-width: 1080px; margin: 0 auto; padding: 5.5rem 2.2rem; } .lp-hero { padding-top: 9.5rem !important; } .lp-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); max-width: 18ch; } .lp-hero .sub { font-size: clamp(0.9rem, 1.1vw, 1.0625rem); color: rgba(var(--ink-rgb), 0.78); max-width: 52ch; } .lp-ctas { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.2rem; flex-wrap: wrap; } .lp-ctas .alt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s ease; } .lp-ctas .alt:hover { color: var(--ink); } .proof-strip { margin-top: 2.6rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); line-height: 2; } .lp-shot { position: relative; margin-top: 3.4rem; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--navy); } .lp-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .lp-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 11, 20, 0) 58%, rgba(7, 11, 20, 0.9) 100%); } .tool-strip { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); } .tool-strip .k { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .tool-strip .marks { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .tool-strip i { display: block; width: 1.5rem; height: 1.5rem; background: currentColor; color: var(--ink-soft); opacity: 0.75; transition: opacity 0.3s ease, color 0.3s ease; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .tool-strip:hover i { opacity: 1; color: var(--season); } .tool-strip img { height: 1.15rem; width: auto; opacity: 0.55; transition: opacity 0.3s ease; } .tool-strip:hover img { opacity: 0.85; } .tool-strip i.t-anthropic { -webkit-mask-image: url('../assets/brand/anthropic.svg'); mask-image: url('../assets/brand/anthropic.svg'); } .tool-strip i.t-google { -webkit-mask-image: url('../assets/brand/google.svg'); mask-image: url('../assets/brand/google.svg'); } .tool-strip i.t-meta { -webkit-mask-image: url('../assets/brand/meta.svg'); mask-image: url('../assets/brand/meta.svg'); } .tool-strip i.t-stripe { -webkit-mask-image: url('../assets/brand/stripe.svg'); mask-image: url('../assets/brand/stripe.svg'); } .pas p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.5; color: var(--ink-dim); max-width: 30ch; } .pas p + p { margin-top: 1.4rem; } .pas p strong { color: var(--ink); font-weight: 600; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; } .stat { border-top: 1px solid var(--hairline); padding-top: 1.2rem; } .stat .n { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; color: var(--season); } .stat .l { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.7; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; } .pillar { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2rem; background: rgba(var(--navy-rgb),0.5); } .pillar .k { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .pillar h3 { font-size: 1.45rem; font-weight: 600; margin: 0.8rem 0; line-height: 1.15; max-width: none; } .pillar p { font-family: var(--serif); font-weight: 500; font-size: 0.9875rem; line-height: 1.65; color: var(--ink-dim); } .pillar .mp { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 1rem; text-transform: uppercase; } .calc { border: 1px solid var(--hairline); border-radius: var(--radius); background: rgba(var(--navy-rgb),0.55); padding: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; margin-top: 3rem; } .calc label { display: block; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 1.2rem 0 0.4rem; } .calc label:first-child { margin-top: 0; } .calc input[type=range] { width: 100%; accent-color: var(--accent); } .calc .val { font-family: var(--serif); font-size: 1rem; color: var(--ink); } .calc-out { text-align: center; } .calc-out .big { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; color: var(--season); line-height: 1; } .calc-out .cap { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1rem; line-height: 1.8; } .magnet { border: 1px solid var(--accent); border-radius: var(--radius); background: rgba(var(--accent-rgb),0.08); padding: 3rem; text-align: center; } .magnet h3 { margin: 0 auto; } .magnet .mdesc { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-dim); max-width: 52ch; margin: 1.2rem auto 0; } .mform { display: flex; gap: 0.8rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .mform input { background: rgba(var(--bg-rgb), 0.5); border: 1px solid var(--hairline); border-radius: 99px; font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--ink); padding: 0.85rem 1.4rem; min-width: 220px; outline: none; transition: border-color 0.3s ease; } .mform input:focus { border-color: var(--accent); } .mform input::placeholder { color: var(--ink-faint); } .mnote { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1rem; } .merr { font-family: var(--mono); font-size: 0.6875rem; color: var(--err); margin-top: 0.8rem; display: none; } form.is-stepped { display: block; max-width: 560px; margin: 2rem auto 0; text-align: left; } .lsteps { border: 1px solid var(--hairline); border-radius: var(--radius); background: rgba(var(--bg-rgb), 0.4); padding: 1.9rem 1.8rem 1.6rem; } .lhead { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.8rem; } .lcount { color: var(--accent); white-space: nowrap; font-size: 0.625rem; letter-spacing: 0.16em; } .lbar { flex: 1; height: 1px; background: var(--hairline); overflow: hidden; } .lbar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform 0.45s ease; } .lstep { display: none; } .lstep.is-active { display: block; animation: lStepIn 0.4s ease; } @keyframes lStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .lstep .q { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 3.4vw, 1.55rem); line-height: 1.3; margin-bottom: 1.3rem; color: var(--ink); } form.is-stepped .lstep input, form.is-stepped .lstep textarea { width: 100%; min-width: 0; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--hairline); outline: none; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); padding: 0.65rem 0 0.75rem; } form.is-stepped .lstep input:focus, form.is-stepped .lstep textarea:focus { border-color: var(--accent); } form.is-stepped .lstep .consent-row input[type="checkbox"] { width: 18px; flex: 0 0 auto; } form.is-stepped .lstep > div:not(.lead-q):not(.consent-row) { display: block; } form.is-stepped .lstep .consent-row { margin: 0 0 1.4rem; } form.is-stepped .lstep button[type="submit"] { align-self: auto; margin: 0; } .lead-q { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } .lead-q--grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; } .lead-q--grid button { padding: 0.8rem 0.7rem; font-size: 0.94rem; text-align: center; } .lead-q button { text-align: left; font-family: var(--serif); font-weight: 500; font-size: 1rem; padding: 0.95rem 1.1rem; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink-dim); background: rgba(var(--bg-rgb), 0.35); cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .lead-q button:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); } .lead-q button.picked { border-color: var(--accent); color: var(--ink); background: rgba(var(--accent-rgb),0.16); } .lnav { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.9rem; } .lnav .lback { color: var(--ink-soft); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem; background: none; border: none; cursor: pointer; } .lnav .lback:hover { color: var(--ink); } .lnav .lnext { margin-left: auto; justify-content: center; min-width: 130px; } .lnav .lnext .dot { display: none; } .lnav [hidden] { display: none; } @media (max-width: 700px) { .lsteps { padding: 1.5rem 1.2rem 1.3rem; } .lead-q button { padding: 0.85rem 1rem; } } .msuccess { display: none; text-align: center; } .msuccess.on { display: block; } .msuccess .big-link { display: inline-flex; margin-top: 1.6rem; } .msuccess .bridge { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--ink); margin-top: 3rem; max-width: 30ch; margin-left: auto; margin-right: auto; } .msuccess #lp-cal { min-height: 640px; margin-top: 2rem; border-radius: var(--radius); overflow: clip; background: rgba(var(--navy-rgb),0.4); } .msuccess #lp-cal iframe { min-height: 640px; } .aform { display: flex; flex-direction: column; gap: 0.9rem; max-width: 480px; margin: 2rem auto 0; text-align: left; } .aform label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .aform input, .aform textarea { width: 100%; background: rgba(var(--bg-rgb), 0.5); border: 1px solid var(--hairline); border-radius: var(--radius); font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--ink); padding: 0.85rem 1.1rem; outline: none; transition: border-color 0.3s ease; resize: vertical; } .aform input:focus, .aform textarea:focus { border-color: var(--accent); } .aform input::placeholder, .aform textarea::placeholder { color: var(--ink-faint); } .aform button { align-self: center; margin-top: 0.6rem; } .router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; } .router a { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2rem; background: rgba(var(--navy-rgb),0.5); transition: border-color 0.35s ease, transform 0.35s var(--ease-out); display: flex; flex-direction: column; gap: 0.8rem; } .router a:hover { border-color: var(--accent); transform: translateY(-3px); } .router h3 { font-size: 1.35rem; font-weight: 600; max-width: none; } .router p { font-family: var(--serif); font-weight: 500; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-dim); } .router .go { margin-top: auto; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .router a:hover .go { color: var(--season); } .lp .kicker { color: var(--accent); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.9rem; } .lp .kicker .line { width: 42px; height: 1px; background: currentColor; } .lp h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; max-width: 20ch; } @media (max-width: 1023px) { .lp section { padding: 3.5rem 1.4rem; } .lp-hero { padding-top: 7rem !important; } .stats, .pillars, .router { grid-template-columns: 1fr; } .calc { grid-template-columns: 1fr; padding: 1.6rem; } .magnet { padding: 2rem 1.4rem; } } .guide { position: relative; z-index: 10; max-width: 760px; margin: 0 auto; padding: 8.5rem 2.2rem 5rem; } .guide h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 0.8rem; } .guide .gsub { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; line-height: 1.6; color: var(--ink-dim); } .guide h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; margin: 3rem 0 1rem; line-height: 1.1; } .guide p, .guide li { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-dim); } .guide p + p { margin-top: 1rem; } .guide ul, .guide ol { margin: 1rem 0 0 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; } .guide strong { color: var(--ink); font-weight: 600; } .guide .script { border-left: 2px solid var(--accent); background: rgba(var(--navy-rgb),0.55); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.2rem 1.5rem; margin-top: 1rem; font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ink); } .guide .check { list-style: none; margin-left: 0; } .guide .check li { padding-left: 1.8rem; position: relative; } .guide .check li::before { content: '☐'; position: absolute; left: 0; color: var(--accent); } .guide .gcta { border: 1px solid var(--accent); border-radius: var(--radius); background: rgba(var(--accent-rgb),0.08); padding: 2.2rem; margin-top: 3.5rem; text-align: center; } .guide .gcta p { color: var(--ink); font-size: 1.125rem; } .guide .gcta .pill { margin-top: 1.4rem; } @media print { .nav, .grain, .vignette, .gcta .pill { display: none !important; } body { background: #fff; color: #111; } .guide p, .guide li, .guide h1, .guide h2, .guide .gsub { color: #111; } .guide .script { background: #f4f2fa; color: #111; } } @media (max-width: 1023px) { .guide { padding: 6.5rem 1.4rem 3rem; } } .consent-row { flex: 1 0 100%; display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.4rem; text-align: left; } .consent-row input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); cursor: pointer; border-radius: 3px; } .consent-row label { font-family: var(--sans, system-ui, sans-serif); font-size: 0.72rem; line-height: 1.5; color: var(--ink-faint); cursor: pointer; } .consent-row a { color: var(--ink-dim); text-decoration: underline; } .funnel { margin-top: 2.6rem; } .lp .funnel-kicker { display: flex; align-items: center; gap: 1.1rem; font-size: 0.75rem; font-weight: 500; line-height: 1.7; letter-spacing: 0.2em; color: var(--ink-dim); max-width: none; } .funnel-kicker .line { width: 42px; height: 1px; background: var(--accent); flex: none; } .funnel-brace { position: relative; height: 26px; margin: 2.8rem 0 1.9rem; } .funnel-brace .rail { position: absolute; inset: 0 0 auto; height: 26px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; } .funnel-brace .lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; background: var(--accent); color: #fff; border-radius: 99px; padding: 0.62rem 1.5rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; } .funnel-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; column-gap: 6px; } .fstep { padding: 10px; border: 2px solid transparent; border-radius: 12px; } .fstep.is-flagged { border-style: dashed; border-color: var(--season); } .fcard { height: 100%; box-sizing: border-box; background: rgba(var(--navy-rgb), 0.5); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.6rem 0.6rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.05rem; } .fcard .ic { width: 3.1rem; height: 3.1rem; flex: none; border-radius: var(--radius); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .fcard .ic svg { width: 1.4rem; height: 1.4rem; display: block; } .fstep[data-tone="purple"] .ic { background: var(--purple); } .fstep[data-tone="season"] .ic { background: var(--season); } .fcard .tx { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; } .fcard h3 { font-family: var(--serif); font-weight: 600; max-width: none; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.08; letter-spacing: -0.01em; } .fcard .cap { font-size: 0.625rem; letter-spacing: 0.06em; line-height: 1.5; color: var(--ink-soft); } .funnel-arrow { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--purple); } .funnel-arrow svg { width: 1.6rem; height: 0.85rem; display: block; opacity: 0.55; } .funnel-callout { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; } .funnel-callout .drop { width: 0; height: 22px; border-left: 2px dashed var(--season); } .funnel-callout .box { border: 2px dashed var(--season); border-radius: 8px; padding: 0.7rem 0.9rem; color: var(--season); text-align: center; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; } @media (max-width: 900px) { .funnel-grid { grid-template-columns: 1fr; } .funnel-brace { height: auto; margin: 2rem 0 1.6rem; text-align: center; } .funnel-brace .rail { display: none; } .funnel-brace .lbl { position: static; transform: none; display: inline-block; white-space: normal; line-height: 1.7; } .fcard { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1.1rem 1.2rem; } .fcard .tx { text-align: left; } .funnel-arrow { height: auto; padding: 0.45rem 0; } .funnel-arrow svg { transform: rotate(90deg); } .funnel-callout { grid-column: auto; grid-row: auto; padding-bottom: 0.2rem; } } #builton { padding-top: 0 !important; padding-bottom: 3.2rem; } .tool-strip--color { margin-top: 0; padding-top: 0; border-top: 0; gap: 1.8rem; } .tool-strip--color .marks { gap: 2.1rem; } .tool-strip--color .m { display: block; height: 1.7rem; opacity: 0.88; transition: opacity 0.3s ease, transform 0.35s var(--ease-out); } .tool-strip--color .m svg { height: 100%; width: auto; display: block; } .tool-strip--color .m-openai { color: var(--ink); } .tool-strip--color .m:hover { opacity: 1; transform: translateY(-2px); } @media (max-width: 700px) { #builton { padding-bottom: 2.2rem; } .tool-strip--color { gap: 1rem; } .tool-strip--color .marks { gap: 1.5rem; } .tool-strip--color .m { height: 1.45rem; } }
.skip-link{position:fixed;top:0;left:1rem;z-index:9999;padding:1rem;background:var(--bg);color:var(--ink);transform:translateY(-150%)}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#qbody{height:auto;min-height:300px}.qcard .face{position:static}.qcard .face.on{display:flex}.qcard .q-note,.qcard .consent2 label{color:var(--ink-soft)}.qcard .consent2 label{font-size:.75rem;max-height:none;overflow:visible}.qcard .consent2 input{min-width:24px;min-height:24px}.qcard .q-back{min-height:32px;min-width:44px}.qcard .fields input:focus-visible,.qcard input[type=checkbox]:focus-visible{outline:2px solid var(--season);outline-offset:3px}.form-error{color:var(--err);font-size:.875rem;margin-top:.5rem}.form-error:empty{display:none}.qcard .q-ask:focus,.qcard .dx:focus,.qcard .done2 h3:focus{outline:2px solid var(--season);outline-offset:4px}.qcard .q-head{min-height:55px}.hero2 h1{font-family:Georgia,serif}
@media(min-width:1000px){.hero2 h1{font-family:var(--serif)}}@media(prefers-reduced-motion:reduce){.qcard{transition:none!important;transform:none!important}.lp .fade-up{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.lp .eyebrow{color:var(--season)}.lp .tool-strip .k{color:var(--ink-soft)}:root:not([data-theme=light]) .qcard{--good:#6acf99}