/* ============================================================ The Unknown Unknown — Site components (shared across pages) Depends on brand.css (design tokens + base rules). Load order in : brand.css → site.css Rules of the road ("Signal" light system): - No raw ink values here. Colour comes from brand tokens (--paper/--ink, --fgN, --hairline*, --surface*, --sig*, --deep, --olive, --cyan, --aqua, --beige). brand.css is the single source of truth; sync it from herstory-brand, don't fork it. - THE SIZE GATE, all hues: >=1rem may use --sig / --cyan; <1rem needs --sig-deep / --cyan-deep / --olive / --deep. On --deep / --olive grounds the gate INVERTS: small type goes brighter (--sig-bright, --aqua, --on-dark). - The fuchsia signal is the ask. One moment per screen — it belongs to the hero's outcome word, the primary button, and the one number being sold. Never decoration. - Beige grounds carry OLIVE ink only (7.2:1, no headroom to spare). - Violet (--violet) is heritage-only: founding material, never a button, link or UI state. It does not appear in this file. - Ink tiers on paper: --fg3 body (9.1:1), --fg4 captions (8.1:1), --fg5 tracked mono labels (14.4:1), --fg1/--fg2 emphasis + lead, --fg6 decorative only. - Sharp corners everywhere. Elevation = border shift + lift, never a shadow. ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Disable mobile-browser font boosting (Chrome/Android "text autosizing", also applied in DevTools device mode): it inflates rem/px text past our type scale and re-breaks the nav/hero at phone widths. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: var(--w-reg); /* brand rule: 400 default; 300 only for large display/lead */ overflow-x: hidden; } /* The film grain lives in brand.css (body::before, assets/grain.svg) and is mandatory — do not add a second grain layer here. */ /* ---------- ACCESSIBILITY: focus + reduced motion ---------- */ /* Visible keyboard focus ring on every interactive element. --sig is 4.7:1 on paper (clears 2.4.7 + 3:1 non-text). */ :focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ticker-inner { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero-headline, .hero-bottom { opacity: 1 !important; animation: none !important; } } /* ---------- NAV ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.8rem 5rem; transition: border-color var(--dur-mid), background var(--dur-mid); } /* Solid paper once scrolled — the canvas is light, so an opaque scrim reads cleaner than a translucent one and keeps this file token-only. */ nav.scrolled { background: var(--paper); border-bottom: 1px solid var(--hairline); } .nav-logo { font-family: var(--mono); font-size: 0.75rem; letter-spacing: var(--track-eyebrow); color: var(--deep); /* wordmark = structure, not the ask */ text-transform: uppercase; white-space: nowrap; } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-links a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: var(--track-label); color: var(--fg3); text-decoration: none; text-transform: uppercase; transition: color var(--dur-fast); white-space: nowrap; } .nav-links a:hover { color: var(--cyan-deep); } .nav-actions { display: flex; align-items: center; gap: 2rem; } .nav-meta { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: var(--track-label); color: var(--fg5); text-transform: uppercase; white-space: nowrap; } /* ---------- BUTTONS ---------- */ /* The primary button is THE ask: signal fill, white label (5.2:1). Hover deepens the fill rather than lightening it, so the label stays white and the contrast goes UP (white on --sig-deep = 7.7:1). */ .btn-primary { background: var(--sig); color: var(--on-dark); padding: 0.85rem 2.2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase; border: 1px solid var(--sig); cursor: pointer; transition: all var(--dur-fast); text-decoration: none; display: inline-block; white-space: nowrap; } .btn-primary:hover { background: var(--sig-deep); border-color: var(--sig-deep); color: var(--on-dark); transform: var(--lift-sm); } .btn-ghost { background: transparent; color: var(--fg2); padding: 0.85rem 2.2rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase; border: 1px solid var(--hairline-2); cursor: pointer; transition: all var(--dur-fast); text-decoration: none; display: inline-block; white-space: nowrap; } .btn-ghost:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); transform: var(--lift-sm); } /* Ghost button sitting on the hero — full-strength label on paper. */ .btn-ghost.on-hero { border-color: var(--hairline-2); color: var(--fg1); } .btn-ghost.on-hero:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); } /* Ghost button on a --deep ground: the gate inverts, so the border and label go brighter, not darker. */ .on-dark .btn-ghost { border-color: var(--rule-dark); color: var(--on-dark); } .on-dark .btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); } /* ---------- HERO ---------- */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 8rem 5rem 6rem; position: relative; overflow: hidden; } .hero-bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: clamp(12rem, 20vw, 22rem); font-weight: var(--w-bold); font-style: italic; color: transparent; /* Decorative only. --fg6 is the watermark token, but at full strength on paper the outline competes with the body copy it sits behind, so the stroke is thinned rather than swapped for a non-brand value. */ -webkit-text-stroke: 1px color-mix(in srgb, var(--fg6) 45%, transparent); white-space: nowrap; pointer-events: none; user-select: none; } .hero-orb { position: absolute; top: 20%; right: 10%; width: 400px; height: 400px; background: radial-gradient(circle, var(--deep-glow) 0%, transparent 70%); pointer-events: none; } .hero-tag { display: none; } .hero-headline { font-family: var(--serif); /* Brand hero scale (--t-hero: clamp(3.4rem, 7.4vw, 7rem)). max-width is set so the LONGEST pair ("Better engagement." / "Same custom GPTs.") still sets as two lines at this scale — otherwise the line count changes on every word swap and the page below bounces. The mobile block overrides the floor, which is too large for a two-line set at phone widths. */ font-size: var(--t-hero); font-weight: var(--w-semi); line-height: var(--lh-tight); letter-spacing: var(--track-tight); position: relative; z-index: 2; opacity: 0; animation: fadeUp 1s ease forwards 0.5s; max-width: 1200px; } /* Brand rule (Typography): inside a serif headline the pivotal word goes italic signal — ONE per headline. That budget belongs to the outcome word, so it alone is italic + fuchsia. The system word still has to read as the other rotating slot, so it takes cyan — the meta layer, which is what that line names. The brand's own two-part display element sets the precedent: a stat figure is "serif, prussian, unit in cyan", i.e. the secondary half of a display pair takes cyan. It stays roman: the hierarchy between the two lines comes from italic-vs-roman, the rotation cue from the hue. */ .hero-headline em { font-style: italic; color: var(--sig); } .hero-headline .system-word { color: var(--cyan); } /* Rotating hero words — slide-up flip. The inline-block wrapper clips the travel; bottom padding keeps italic descenders inside the clip box, and the negative margin cancels it so the baseline stays put. */ .rotator { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; } .rotator-word { display: inline-block; transition: transform 0.26s ease, opacity 0.26s ease; } .rotator-word.rot-out { transform: translateY(-130%); opacity: 0; } .rotator-word.rot-in { transform: translateY(130%); opacity: 0; transition: none; } .hero-bottom { display: flex; flex-wrap: wrap; /* columns reflow on tablets instead of crushing */ gap: 2rem 3rem; justify-content: space-between; align-items: flex-end; margin-top: 4rem; position: relative; z-index: 2; opacity: 0; animation: fadeUp 0.9s ease forwards 0.8s; } .hero-sub { font-size: var(--t-lead); line-height: 1.75; color: var(--fg2); /* lead tier */ max-width: 440px; } /* Hero punchline — the business-problem thesis. Serif display italic (rhymes with the closing line); olive carries the emphasis because this is argued, not sold. */ .hero-punch { margin-top: 1.5rem; max-width: 480px; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-style: italic; font-weight: var(--w-reg); line-height: 1.3; color: var(--fg1); } .hero-punch em { font-style: italic; color: var(--olive); } .hero-ctas { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-end; margin-top: 2rem; } /* ---------- TICKER ---------- */ /* Beige is the interval ground. Its ink is olive — always, and only. */ .ticker { padding: 1rem 0; background: var(--beige); border-top: 1px solid var(--olive-border); border-bottom: 1px solid var(--olive-border); overflow: hidden; white-space: nowrap; } .ticker-inner { display: inline-block; animation: ticker 40s linear infinite; } .ticker-item { display: inline-block; font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.15em; color: var(--olive); text-transform: uppercase; padding: 0 3rem; } .ticker-item span { color: var(--olive); margin-right: 3rem; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- RULES / DIVIDERS ---------- */ .full-rule { height: 1px; background: var(--hairline); } .deep-rule { height: 2px; background: linear-gradient(to right, var(--deep), transparent); } section[id] { scroll-margin-top: 6rem; } /* ---------- PROBLEM ---------- */ .problem { display: grid; grid-template-columns: 220px 1fr; } .problem-sidebar { border-right: 1px solid var(--hairline); padding: 6rem 2.5rem; display: flex; flex-direction: column; justify-content: space-between; } .sidebar-label { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: var(--track-eyebrow); color: var(--fg5); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .problem-main { padding: 6rem 5rem; } /* Eyebrows are the meta layer → cyan. */ .section-eyebrow { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: var(--track-eyebrow); color: var(--cyan-deep); text-transform: uppercase; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; } .section-eyebrow::after { content: ''; display: block; height: 1px; width: 40px; background: var(--cyan); } .problem-headline { font-family: var(--serif); font-size: var(--t-h1); font-weight: var(--w-semi); line-height: var(--lh-snug); margin-bottom: 3rem; } /* "bias" / "absence" — the argument, so olive rather than the signal. */ .problem-headline em { font-style: italic; color: var(--olive); } .problem-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; color: var(--fg3); font-size: var(--t-body); line-height: var(--lh-body); } .problem-body p + p { margin-top: 1.2rem; } /* ---------- PULL QUOTE ---------- */ /* Beige band, olive type — the brand's quote treatment. */ .pull-quote-section { padding: 5rem; background: var(--beige); border-top: 1px solid var(--olive-border); border-bottom: 1px solid var(--olive-border); } .pull-quote { font-family: var(--serif); font-size: var(--t-quote); font-style: italic; font-weight: var(--w-light); line-height: var(--lh-quote); color: var(--olive); max-width: 26em; /* brand type scale: pull quote, max 26em */ margin: 0 auto; text-align: center; } /* Emphasis on beige comes from weight, not a second hue — beige has no contrast headroom for anything but olive. */ .pull-quote strong { font-weight: var(--w-bold); font-style: normal; color: var(--olive); } .pull-quote-sub { display: inline-block; font-size: 0.6em; font-style: normal; font-weight: var(--w-reg); /* mono label — never 300 */ color: var(--olive); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- BELIEFS / ARCHITECTURE LIST ---------- */ .beliefs { padding: 6rem 0; } .beliefs-header { padding: 0 5rem 3rem; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--hairline); } .beliefs-title { font-family: var(--serif); font-size: 2.2rem; font-weight: var(--w-semi); } /* Section counts are structure → Prussian (brand .sec-count). */ .beliefs-count { font-family: var(--mono); font-size: var(--t-mono-sm); color: var(--deep); letter-spacing: 0.15em; } .beliefs-list { list-style: none; } .belief-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--hairline); transition: background 0.25s; } .belief-row:hover { background: var(--olive-faint); } .belief-num { padding: 2.5rem; font-family: var(--mono); font-size: var(--t-mono-sm); color: var(--deep); /* numerals are structure */ letter-spacing: 0.15em; border-right: 1px solid var(--hairline); display: flex; align-items: center; } /* Italic rows are quotes → olive, the second voice. The .plain modifier (method + architecture rows) is running text → ink tier. */ .belief-content { padding: 2.5rem 5rem; font-family: var(--serif); font-size: var(--t-lead); font-style: italic; line-height: var(--lh-quote); color: var(--olive); } .belief-content.plain { font-style: normal; color: var(--fg2); } /* Architecture-row helpers (reused across the 3 layer rows) */ .arch-label { display: block; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.18em; color: var(--olive); /* brand .rule-label */ text-transform: uppercase; margin-bottom: 0.8rem; font-style: normal; } .arch-sublabel { font-style: italic; color: var(--fg3); font-size: 0.9rem; } .arch-accent { font-style: italic; color: var(--cyan); } /* ---------- VALUE (What You Get) ---------- */ .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3rem 5rem 0; } .value-card { background: var(--paper); border: 1px solid var(--hairline); padding: 3rem 2.5rem; display: flex; flex-direction: column; transition: all var(--dur-mid); } .value-card:hover { border-color: var(--cyan); background: var(--surface-1); transform: var(--lift); } .value-card-label { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.18em; color: var(--olive); /* rule label */ text-transform: uppercase; margin-bottom: 1.5rem; } .value-card-body { font-size: var(--t-body); line-height: 1.75; color: var(--fg3); margin-bottom: 2rem; } .value-card-proof { margin-top: auto; font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.12em; color: var(--fg4); border-top: 1px solid var(--hairline); padding-top: 1.2rem; } /* Series one is always the signal: this is the number being sold. */ .value-card-proof strong { font-family: var(--serif); font-size: 1.1rem; font-weight: var(--w-semi); color: var(--sig); margin-right: 0.3rem; } /* ---------- TEAM ---------- */ .team { padding: 6rem 5rem; border-top: 1px solid var(--hairline); } .team-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3rem; } .team-title { font-family: var(--serif); font-size: 2.2rem; font-weight: var(--w-semi); } .team-subtitle { font-family: var(--mono); font-size: var(--t-mono-sm); color: var(--fg5); letter-spacing: 0.15em; text-transform: uppercase; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 2px; } .team-card { background: var(--paper); border: 1px solid var(--hairline); padding: 2.5rem; transition: all var(--dur-mid); position: relative; } .team-card:hover { border-color: var(--cyan); background: var(--surface-1); transform: translateY(-3px); } .team-card-role { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.18em; color: var(--cyan-deep); text-transform: uppercase; margin-bottom: 0.8rem; } .team-card-name { font-family: var(--serif); font-size: 1.4rem; font-weight: var(--w-semi); margin-bottom: 0.8rem; line-height: 1.15; } .team-card-desc { font-size: 0.95rem; line-height: 1.65; color: var(--fg3); margin-bottom: 1.5rem; } .team-card-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: var(--track-label); color: var(--fg4); text-decoration: none; text-transform: uppercase; transition: color var(--dur-fast); border-bottom: 1px solid var(--hairline-2); padding-bottom: 0.2rem; } .team-card-link:hover { color: var(--cyan-deep); border-color: var(--cyan-deep); } /* Second link stacked under the first in a card */ .team-card-link.stacked { margin-top: 0.4rem; } /* ---------- BUSINESS ---------- */ .business { display: grid; grid-template-columns: 1fr 1fr; } .business-left { padding: 6rem 5rem; border-right: 1px solid var(--hairline); } .business-headline { font-family: var(--serif); font-size: var(--t-h2); font-weight: var(--w-semi); line-height: var(--lh-snug); margin-bottom: 2rem; } /* "Hard-core business." is the commercial ask — this screen's signal. */ .business-headline em { font-style: italic; color: var(--sig); } .business-body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg2); /* lead tier */ margin-bottom: 2.5rem; } .use-cases { display: flex; flex-direction: column; gap: 2px; margin-top: 2.5rem; } .use-case { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.5rem; background: var(--surface-1); border-left: 3px solid var(--olive); font-size: var(--t-body); color: var(--fg3); transition: all var(--dur-fast); } .use-case:hover { background: var(--olive-faint); color: var(--ink); } .business-right { padding: 6rem 5rem; } .stat-row { padding: 2.5rem 0; border-bottom: 1px solid var(--hairline); } .stat-row:first-child { border-top: 1px solid var(--hairline); } .stat-fig { font-family: var(--serif); font-size: var(--t-stat); font-weight: var(--w-bold); color: var(--deep); /* stat figures are structure */ line-height: 1; margin-bottom: 0.4rem; } .stat-fig span { color: var(--cyan); } .stat-desc { font-size: var(--t-sm); color: var(--fg4); line-height: 1.5; max-width: 280px; } /* ---------- JOIN ---------- */ .join { padding: 6rem 5rem; background: var(--surface-1); border-top: 1px solid var(--hairline); } .join-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3rem; } .join-title { font-family: var(--serif); font-size: 2.5rem; font-weight: var(--w-semi); } .join-subtitle { font-family: var(--mono); font-size: var(--t-mono-sm); color: var(--fg5); letter-spacing: 0.15em; text-transform: uppercase; } .join-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 4rem; } .join-card { background: var(--paper); border: 1px solid var(--hairline); padding: 3rem 2.5rem; transition: all var(--dur-mid); } .join-card:hover { border-color: var(--cyan); background: var(--surface-2); transform: var(--lift); } .join-card-tag { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.18em; color: var(--cyan-deep); text-transform: uppercase; margin-bottom: 1.5rem; } .join-card-title { font-family: var(--serif); font-size: 1.6rem; font-weight: var(--w-semi); margin-bottom: 1.2rem; } .join-card-body { font-size: var(--t-body); line-height: 1.75; color: var(--fg3); } .email-block { max-width: 560px; } .email-label { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.15em; color: var(--fg5); text-transform: uppercase; margin-bottom: 1rem; } .email-row { display: flex; gap: 2px; flex-wrap: wrap; } .email-input { flex: 1; background: var(--surface-2); border: 1px solid var(--hairline-2); border-right: none; color: var(--ink); padding: 1rem 1.2rem; font-family: var(--sans); font-size: 0.85rem; transition: all var(--dur-fast); } .email-input::placeholder { color: var(--fg4); } .email-input:focus-visible { border-color: var(--sig); background: var(--sig-faint); outline: 2px solid var(--sig); outline-offset: 2px; } .email-btn { background: var(--sig); color: var(--on-dark); border: 1px solid var(--sig); padding: 1rem 1.8rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; transition: all var(--dur-fast); white-space: nowrap; text-decoration: none; display: inline-block; } .email-btn:hover { background: var(--sig-deep); border-color: var(--sig-deep); color: var(--on-dark); } /* Standalone (non-paired) form button — a touch wider */ .email-btn.wide { padding: 1rem 2.5rem; } /* ---------- CLOSE ---------- */ /* The Prussian band that closes the document. On this ground the size gate inverts: small type goes brighter, not darker. */ .close-section { padding: 9rem 5rem; text-align: center; position: relative; overflow: hidden; background: var(--deep); color: var(--on-dark); } .close-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; background: radial-gradient(circle, color-mix(in srgb, var(--aqua) 12%, transparent) 0%, transparent 65%); pointer-events: none; } .close-headline { font-family: var(--serif); font-size: var(--t-display); font-weight: var(--w-bold); line-height: 1.05; position: relative; z-index: 1; margin-bottom: 1.5rem; color: var(--on-dark); } .close-headline em { font-style: italic; color: var(--sig-bright); } .close-body { font-size: var(--t-body); color: var(--on-dark-3); position: relative; z-index: 1; max-width: 580px; margin: 0 auto 3rem; line-height: 1.75; text-wrap: pretty; /* no single-word last lines in the close copy */ } .close-body.lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-style: italic; color: var(--on-dark); margin-bottom: 2.5rem; margin-top: -1rem; /* Short centred display lines strand their last word at some widths. Balancing shares the words across the lines instead of leaving a widow; browsers without support just fall back to normal wrapping. */ text-wrap: balance; } .founders { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--on-dark-2); position: relative; z-index: 1; margin-top: 4rem; } /* ---------- FOOTER ---------- */ footer { padding: 2rem 5rem; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; } .footer-left { font-family: var(--mono); font-size: 0.68rem; letter-spacing: var(--track-label); color: var(--fg5); text-transform: uppercase; } .footer-right { display: flex; gap: 2rem; } .footer-right a { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: var(--track-label); color: var(--fg5); text-decoration: none; text-transform: uppercase; transition: color var(--dur-fast); } .footer-right a:hover { color: var(--cyan-deep); } /* ---------- LONG-FORM BODY WEIGHT ---------- Brand rule: screen body is weight 400, never 300. On paper the ink tiers already carry the contrast (--fg3 is 9.1:1); 300 strokes would thin the prose without buying anything. */ .hero-sub, .problem-body, .business-body, .join-card-body, .close-body, .team-card-desc { font-weight: var(--w-reg); } /* ---------- SCROLL REVEAL ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ---------- RESPONSIVE ---------- */ /* Nav squeeze zone: between the mobile collapse (960) and the width where the full-size nav (logo + 7 links + meta + button) genuinely fits on one line, compress it instead of letting the links collide with the meta. */ @media (max-width: 1500px) and (min-width: 961px) { nav { padding: 1.8rem 2rem; } .nav-links { gap: 1rem; } .nav-links a { font-size: 0.62rem; letter-spacing: 0.1em; } .nav-logo { font-size: 0.68rem; letter-spacing: 0.12em; } .nav-meta { display: none; } nav .btn-primary { padding: 0.8rem 1.4rem; } } @media (max-width: 960px) { nav { padding: 1.2rem 1.2rem; } .nav-links { display: none; } .nav-meta { display: none; } .nav-logo { white-space: nowrap; } nav .btn-primary { padding: 0.7rem 1.2rem; } .hero { padding: 7rem 2rem 5rem; min-height: 0; } .hero-headline { font-size: clamp(2.2rem, 9vw, 4rem); } .hero-bg-text { display: none; } .hero-bottom { flex-direction: column; gap: 2rem; align-items: flex-start; } .hero-ctas { align-items: flex-start; } .problem { grid-template-columns: 1fr; } .problem-sidebar { display: none; } .problem-main { padding: 4rem 2rem; } .problem-body { grid-template-columns: 1fr; } .pull-quote-section { padding: 3rem 2rem; } .beliefs-header { padding: 0 2rem 2rem; } .belief-row { grid-template-columns: 1fr; } .belief-num { display: none; } .belief-content { padding: 2rem; } .value-grid { grid-template-columns: 1fr; padding: 2rem; } .business { grid-template-columns: 1fr; } .business-left { padding: 4rem 2rem; border-right: none; border-bottom: 1px solid var(--hairline); } .business-right { padding: 4rem 2rem; } .join { padding: 4rem 2rem; } .join-header { flex-direction: column; gap: 0.5rem; } .join-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .team { padding: 4rem 2rem; } .team-header { flex-direction: column; gap: 0.5rem; } .close-section { padding: 5rem 2rem; } footer { padding: 1.5rem 2rem; flex-direction: column; gap: 1rem; text-align: center; } }