/* ========================================================================== Empyreal Infotech · Homepage prototype · new/ Aesthetic: editorial-brutalist with engineering precision ========================================================================== */ /* ---- 1. Tokens --------------------------------------------------------- */ :root { /* paper — warm off-white */ --paper: #fafaf7; --paper-2: #f1f1ec; --paper-grain: #e6e6df; /* ink — deep black */ --ink: #0a0a10; --ink-2: #18181f; --ink-soft: #2a2a32; --muted: #6a6a78; /* accent palette — switchable via [data-accent] on ; default green */ --accent-rgb: 0, 133, 125; --accent-deep-rgb: 0, 107, 101; --accent-bright-rgb: 60, 234, 199; --accent-light-rgb: 168, 240, 227; /* teal palette — built from the accent triplets above (name kept for reuse) */ --teal: rgb(var(--accent-rgb)); --teal-deep: rgb(var(--accent-deep-rgb)); --teal-bright: rgb(var(--accent-bright-rgb)); --teal-light: rgb(var(--accent-light-rgb)); --teal-tint: rgba(var(--accent-rgb),0.08); /* punch — readable contrast on light bg uses --teal (deep); dark-bg sections override with teal-bright for vivid pop */ --punch: var(--teal); --punch-vivid: var(--teal-bright); /* rules + states */ --rule: rgba(10,10,16,0.12); --rule-strong: rgba(10,10,16,0.32); --hairline: rgba(10,10,16,0.07); /* type families */ --font-display: 'Bricolage Grotesque', 'PP Neue Montreal', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* type scale — 8 sizes, canonical, used everywhere */ --fs-display-xxl: clamp(48px, 9vw, 124px); /* hero H1 only */ --fs-display-xl: clamp(38px, 5.4vw, 76px); /* section H2 */ --fs-display-l: clamp(28px, 2.6vw, 36px); /* large h3 (work item titles, large quote) */ --fs-display-m: clamp(22px, 1.9vw, 26px); /* card h3 (pillar names, process titles) */ --fs-lede: clamp(18px, 1.5vw, 22px); /* paragraph lede + hero thesis */ --fs-body: 16px; /* default body copy */ --fs-small: 14px; /* card bodies, fine print */ --fs-mono: 11.5px; /* eyebrows, monospaced labels */ /* motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --d-fast: 180ms; --d-base: 420ms; --d-slow: 820ms; /* layout — fixed side padding, sections full width after padding mobile ≤ 640px → 20px each side tablet ≤ 1024 → 32px each side desktop > 1024 → 60px each side */ --container: 100%; --gutter: 60px; --radius: 0.125em; } @media (max-width: 1024px) { :root { --gutter: 32px; } } @media (max-width: 640px) { :root { --gutter: 20px; } } /* ---- 2. Reset & base --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; /* reserve scrollbar space so menu-lock never reflows */ /* Fluid root: 14px on mobile (320px) → 18px on desktop (1920px+). Every em-based value scales with viewport automatically. */ font-size: clamp(0.875rem, 0.55rem + 1vw, 1.125rem); } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; font-feature-settings: 'ss01', 'ss02', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* native cursor always visible; hover states do the heavy lifting */ } a, button, [role="button"], .pillar, .work-item, .why-card, .t-card, summary { cursor: pointer; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } ::selection { background: var(--ink); color: var(--paper); } /* ---- 3. Background atmosphere ----------------------------------------- */ body::before { /* grain overlay */ content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } /* ---- 4. (Custom cursor removed — native cursor + strong hover states) - */ .cursor { display: none !important; } .pillar:focus-visible, .work-item:focus-visible, .why-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; } /* ---- 5. Layout primitives --------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; } /* Uniform 80px top/bottom padding on every section except hero (42px on mobile) */ body > section:not(.hero) { padding-top: 80px !important; padding-bottom: 80px !important; } @media (max-width: 640px) { body > section:not(.hero) { padding-top: 42px !important; padding-bottom: 42px !important; } } /* ========================================================================== SECTION DIVIDERS — exactly one hairline at every section boundary. Legacy sections used border-top: var(--hairline) (7% alpha, invisible). The sN sections used border-BOTTOM, so a mixed pair drew two lines and a legacy pair drew none. faq, belief, pilot, imgsplit, imgframe, s20, s21 and s26 to s29 drew nothing at all. One top border on every non-hero section == one line per boundary. Specificity (0,1,2) beats the per-section .sN-section rules (0,1,0). ========================================================================== */ body > section:not(.hero) { border-top: 1px solid var(--rule); border-bottom: 0; } /* Bands that are dark in BOTH themes — an ink-coloured rule vanishes on them. Same specificity as the rule above, so these must stay after it. */ body > section.proof, body > section.pilot, body > section.manifesto, body > section.s29-section { border-top-color: rgba(250, 250, 247, 0.16); } /* NOT s27-section: its background is --surface (#E8EBE8, light). Only the inner banner is dark, so it keeps the standard ink rule. */ /* Marquee band — compact 20px padding + smaller type (all pages with the marquee) */ body > section.manifesto { padding-top: 20px !important; padding-bottom: 20px !important; } .manifesto .manifesto-item { font-size: clamp(15px, 1.8vw, 24px); gap: 32px; } /* Section heading (h2) size — hero excluded. Desktop 72 / tablet 52 / mobile 42 */ body > section:not(.hero) h2 { font-size: 72px !important; } @media (max-width: 1024px) { body > section:not(.hero) h2 { font-size: 52px !important; } } @media (max-width: 640px) { body > section:not(.hero) h2 { font-size: 42px !important; } } /* ========================================================================== SECTION SPACING — `gap` only. No wrapper divs, no helper classes, no margins. label -> heading var(--gap-label) 20px header container `gap` heading -> body var(--gap-head) 24px gap + padding-top delta body -> content var(--gap-body) 40px gap + padding-top delta header -> section var(--gap-body) 40px section container `gap` A flex column emits ONE gap for every row, so the two larger steps are the base gap plus a padding-top delta on the element that follows. padding is used, never margin. Selectors are prefixed `body section:not(.hero)` -> specificity (0,2,2), which beats the `.custom-sections-body .sN-header { gap: 0 }` block (0,2,0) in sections.css. That file loads after this one, so a bare class would lose. ========================================================================== */ :root { --gap-label: 20px; --gap-head: 24px; --gap-body: 40px; } @media (max-width: 1024px) { :root { --gap-label: 18px; --gap-head: 20px; --gap-body: 32px; } } @media (max-width: 640px) { :root { --gap-label: 14px; --gap-head: 16px; --gap-body: 28px; } } /* ---- section container: header -> content ------------------------------ */ body section:not(.hero) > .container, body section:not(.hero) > [class$="-container"] { display: flex; flex-direction: column; gap: var(--gap-body); } /* Vertical margins are what the gap replaces. margin-inline is preserved so centred blocks (.imgframe-head, .s18-header-centered) stay centred. */ body section:not(.hero) > .container > *, body section:not(.hero) > [class$="-container"] > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* ---- header container: label -> heading -------------------------------- */ body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) { display: flex; flex-direction: column; justify-content: flex-start; /* .s22-top-right sets space-between, which would spread the rows and defeat the gap */ gap: var(--gap-label); /* align-items deliberately unset: each header keeps the alignment it already had (stretch for block ones, flex-start for flex ones). Forcing flex-start would shrink-wrap .s22-quote-area and friends. */ } body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* centred headers keep their centring */ body section:not(.hero) :is(.imgframe-head) { align-items: center; /* .s18-header-centered NOT included: the custom-sections theme deliberately left-aligns it (text-align:left, max-width:none), so centring its flex items fought that. */ } /* ---- heading -> body : gap(20) + 4 = 24 -------------------------------- The delta hangs off the PRECEDING element (h2 / desc), never the following one: .belief-support has padding 56px 0 and .s29-form-card has padding 48px, and a padding-top on the follower would have clobbered both. No h2 and no -desc carries padding, so padding-bottom there is free. */ body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > h2:has(+ p), body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > h2:has(+ [class$="-desc"]), body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > h2:has(+ [class$="-subtitle"]), body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > p:has(+ p) { padding-bottom: calc(var(--gap-head) - var(--gap-label)); } /* ---- body -> content : gap(20) + 20 = 40 ------------------------------- */ body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > p:has(+ :not(p)), body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > [class$="-desc"]:has(+ :not(p)), body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) > h2:has(+ :not(p, [class$="-desc"], [class$="-subtitle"])) { padding-bottom: calc(var(--gap-body) - var(--gap-label)); } /* ---- belief:

is a SIBLING of .belief-head, so .container IS the header container. head -> h2 = 20 (base gap), h2 -> support = 40. -------------- */ body section.belief > .container { gap: var(--gap-label); } body section.belief > .container > h2:not(:last-child) { padding-bottom: calc(var(--gap-body) - var(--gap-label)); } /* eyebrows nested one level deeper than the header's direct children */ .belief-head .eyebrow, .belief-head .belief-counter, .s22-top-left .eyebrow { margin: 0 !important; } /* ========================================================================== SECTION HEADING MEASURE - every

that is a section heading gets 75pct of its row. Written against the CONTAINER, not the heading class, because many headings are a bare

with no class (.faq-head h2, .imgsplit-copy h2 ...). Specificity (0,2,3) beats both `.faq-head h2` (0,1,1) and the `.custom-sections-body .sN-title` list (0,2,0). .s27-content's base 500px cap is overridden to none by the theme (sections.css HEADER FIXES), and .imgframe-head is now uncapped too, so neither compounds. .imgframe-head stays centred via align-items:center. ========================================================================== */ body section:not(.hero) :is( .imgframe-head, .s27-content, .audiences-head, .caps-head, .cta-head, .faq-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .svcg-head, .svc-cat-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s28-header, .s29-right ) > h2 { max-width: 75%; } /* Mobile: a phone column is already narrow — 75pct would strand the heading. Same (0,2,3) selector, so it beats the legacy `.X-head h2` (0,1,1) and the `.custom-sections-body .sN-title` list (0,2,0) without !important. */ @media (max-width: 768px) { body section:not(.hero) :is( .imgframe-head, .s27-content, .audiences-head, .caps-head, .cta-head, .faq-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .svcg-head, .svc-cat-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s28-header, .s29-right ) > h2 { max-width: 100%; } /* .belief-statement's mobile max-width is set in the later @media 768 block (search "belief-statement {" around the .belief section). Setting it here is dead code: the unmediated `.belief-statement { max-width: 75% }` rule lives further down the file at the SAME specificity (0,1,0), and a media query adds none, so source order hands the win to the 75%. */ } /* ---- headers are not always a direct child of the section container -------- .pilot-head lives in section.pilot > .container > .pilot-frame, so the child-combinator reset above matched .pilot-frame, not the header, and its `margin: 0 0 80px` (plus the 72px/56px responsive clamps) survived. Zero the block margins on the headers THEMSELVES. margin-inline is untouched, so .imgframe-head / .s18-header-centered keep their `margin-inline: auto`. */ body section:not(.hero) :is(.audiences-head, .caps-head, .cta-head, .faq-head, .imgframe-head, .imgsplit-copy, .journey-head, .pilot-head, .process-head, .proof-head, .stack-head, .svc-flow-head, .svcb-head, .testimonials-head, .why-head, .work-head, .s4-left, .s5-content-col, .s6-header, .s8-header, .s9-header, .s10-header, .s11-header, .s12-header-left, .s14-header, .s18-header-centered, .s19-header-standard, .s20-header, .s22-top-right, .s23-header, .s25-header, .s26-header, .s27-content, .s28-header, .s29-right) { margin-block: 0 !important; } /* .pilot-frame is the real spacing parent inside .pilot — give it the gap and kill .pilot-foot's `margin-top: clamp(56px,6vw,80px)`. */ body section.pilot > .container > .pilot-frame { display: flex; flex-direction: column; gap: var(--gap-body); } body section.pilot > .container > .pilot-frame > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* The former `margin-bottom: var(--head-mb) !important` on every header is gone. header -> section content is now the section container's `gap`. */ /* Uniform card corners — every card matches the .wcard 6px radius */ .wcard, .wgrid-card, .wgrid-stat, .journey-track, .aud-panel, .s1-card, .s2-card, .s3-card, .s4-card, .s5-card, .s6-card, .s7-card, .s8-card, .s9-card, .s10-card, .s11-card, .s12-card, .s13-card, .s14-card, .s15-card, .s16-card, .s17-card, .s18-card, .s19-card, .s20-card, .s21-card, .s22-card, .s23-card, .s24-card, .s24-text-card, .s24-img-card, .s25-card, .s26-card, .s27-card, .s28-card, .s29-card, .s29-form-card, .s25-contact-box, .s26-feature-box { border-radius: 6px !important; } /* Section subline (paragraph right after the heading) — same size site-wide */ body section h2 + p { font-size: clamp(16px, 1.2vw, 19px) !important; line-height: 1.6 !important; } /* Section sublines that sit in a separate column (not h2-adjacent) — match the same size */ .s4-desc, .s7-desc, .s8-desc, .s9-desc, .s11-desc, .s12-desc, .s14-desc, .s16-desc, .s18-desc, .s21-desc { font-size: clamp(16px, 1.2vw, 19px) !important; line-height: 1.6 !important; } /* Uniform inner card padding — desktop 32 / tablet 28 / mobile 24 */ :root { --card-pad: 32px; } @media (max-width: 1024px) { :root { --card-pad: 28px; } } @media (max-width: 640px) { :root { --card-pad: 24px; } } .wcard, .wgrid-card, .aud-panel, .s1-card, .s2-card, .s3-card, .s4-card, .s5-card, .s6-card, .s7-card, .s8-card, .s9-card, .s10-card, .s11-card, .s12-card, .s13-card, .s14-card, .s15-card, .s16-card, .s17-card, .s18-card, .s19-card, .s20-card, .s21-card, .s22-card, .s23-card, .s24-card, .s24-text-card, .s24-img-card, .s25-card, .s26-card, .s27-card, .s28-card, .s29-card, .s29-form-card, .s25-contact-box, .s26-feature-box { padding: var(--card-pad) !important; } /* wcard feature signature is a light colour meant for dark cards — fix it on the light .why section */ .why .wcard-feature-sig { color: var(--muted); } /* stack layer name — bigger on mobile */ @media (max-width: 767px) { .stk-layer-name { font-size: 24px !important; } } /* stack tech pills: right-aligned (desktop), left-aligned when stacked (mobile) */ .stk-layer-chips { justify-content: flex-end; } @media (max-width: 767px) { .stk-layer-chips { justify-content: flex-start; } } /* timeline step icon: drop the big desktop top-gap on mobile */ @media (max-width: 767px) { .jstep-icon { margin-top: 0 !important; } } /* Uniform 22px gap between cards in a row (desktop) */ @media (min-width: 769px) { .aud-split, .wgrid, .why-bento, .s2-grid, .s3-grid, .s4-track, .s5-grid, .s6-grid, .s7-grid, .s8-grid, .s10-grid, .s11-grid, .s12-grid, .s16-grid, .s18-grid, .s20-grid, .s21-grid, .s22-grid, .s23-card-stats, .s24-track, .s25-grid, .s25-features-grid, .s26-grid, .s28-grid, .s29-grid { gap: 22px !important; } } /* Lucide inline arrow icons — inherit text colour + size, replace text arrows */ .lic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--lic) center / contain no-repeat; mask: var(--lic) center / contain no-repeat; } .lic-ar { --lic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); } .lic-aur { --lic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); } /* CANONICAL LABEL. Every eyebrow/kicker/hero label matches this: mono 11.5px, 0.18em tracking, 10px gap, 7px teal square optically centred on the FIRST line (align-items:center would float it between lines when the text wraps). */ .eyebrow { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.18em; line-height: 1.6; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; } .eyebrow::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; margin-top: calc((1.6em - 7px) / 2); /* half-leading of line 1 */ background: var(--teal); } .eyebrow.is-light, .is-dark .eyebrow { color: var(--paper); } .is-dark .eyebrow::before { background: var(--teal); } /* ---- 6. Type system --------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.028em; line-height: 0.98; font-variation-settings: 'opsz' 96; } h1 { font-size: var(--fs-display-xxl); font-weight: 500; line-height: 0.94; letter-spacing: -0.038em; } h2 { font-size: var(--fs-display-xl); font-weight: 500; line-height: 0.98; letter-spacing: -0.032em; } h3 { font-size: var(--fs-display-l); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; } h4 { font-size: var(--fs-display-m); font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; } em { font-style: normal; color: var(--teal); font-weight: 600; position: relative; padding: 0 0.05em 0; background-image: linear-gradient(180deg, transparent 78%, var(--teal-light) 78%, var(--teal-light) 92%, transparent 92%); background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; /* without this, a highlight that wraps onto a second line paints as one continuous box across both. Each line-fragment gets its own underline. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } .is-visible em, em.is-visible, .reveal.is-visible em { background-size: 100% 100%; } /* Dark sections: use vivid teal-bright slab + same wipe */ /* Dark-background sections only. `.cta em` was in here, but .cta is `background: var(--paper)` — a LIGHT section — so its em rendered in the bright teal meant for ink backgrounds. It now falls through to the base `em` rule (var(--teal) + var(--teal-light) highlight). */ .proof em, .manifesto em, .nav.is-dark em { color: var(--teal-bright); background-image: linear-gradient(180deg, transparent 78%, rgba(var(--accent-bright-rgb),0.42) 78%, rgba(var(--accent-bright-rgb),0.42) 92%, transparent 92%); } /* pilot heading em — softer highlight so the word stays readable on the dark panel */ .pilot em { color: var(--teal-bright); background-image: linear-gradient(180deg, transparent 74%, rgba(var(--accent-bright-rgb),0.22) 74%, rgba(var(--accent-bright-rgb),0.22) 92%, transparent 92%); } .mono { font-family: var(--font-mono); letter-spacing: 0.02em; font-feature-settings: 'ss02'; } p { color: var(--ink-soft); } strong { font-weight: 600; color: var(--ink); } /* ---- 7. Navigation ---------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 24px 0; background: color-mix(in srgb, var(--paper) 80%, transparent); /* theme-white glass, visible over the hero */ backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); transition: background var(--d-base) var(--ease-out), backdrop-filter var(--d-base) var(--ease-out), padding var(--d-base) var(--ease-out); } .nav.is-scrolled { background: color-mix(in srgb, var(--paper) 86%, transparent); padding: 14px 0; border-bottom: 1px solid var(--hairline); } .nav-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lede); letter-spacing: -0.01em; } .nav-brand-dot { width: 10px; height: 10px; background: var(--teal); border-radius: 50%; display: inline-block; animation: pulseDot 2.4s var(--ease-out) infinite; box-shadow: 0 0 0 0 var(--teal-light); } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } .nav-links { display: flex; justify-content: center; gap: 38px; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } .nav-links a { position: relative; padding: 6px 0; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--ink); transition: width 320ms var(--ease-out), left 320ms var(--ease-out); } .nav-links a:hover::after { width: 100%; left: 0; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; border-radius: 100px; transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); } .nav-cta:hover { background: var(--punch); transform: translateY(-2px); } @media (max-width: 880px) { .nav-links { display: none; } .nav-grid { grid-template-columns: 1fr auto; } } /* ---- 9. Manifesto marquee --------------------------------------------- */ .manifesto { background: var(--ink); color: var(--paper); padding: 32px 0; position: relative; overflow: hidden; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); } .manifesto-track { display: flex; white-space: nowrap; animation: marquee 18s linear infinite; /* was 28s */ gap: 56px; align-items: center; } .manifesto:hover .manifesto-track { animation-play-state: paused; } .manifesto-item { display: inline-flex; align-items: center; gap: 56px; font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 56px); font-weight: 400; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; letter-spacing: -0.015em; } .manifesto-item::after { content: '✦'; font-family: var(--font-display); font-style: normal; color: var(--punch-vivid); font-size: 0.6em; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---- 10. Section base ------------------------------------------------- */ section { position: relative; padding: clamp(96px, 12vw, 160px) 0; } .section-title { margin-bottom: 64px; } .section-title h2 em { color: var(--punch); font-style: italic; } /* ---- 14. Selected work — asymmetric image grid w/ stat chips ---- */ .work { background: var(--paper); } /* Section header — locked single-column pattern */ .work-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 72px; } .work-head .eyebrow { margin-bottom: 20px; } .work-head h2 { max-width: 75%; margin-bottom: 28px; } .work-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } /* Asymmetric 12-col bento with grid-template-areas */ .wgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; grid-template-areas: "a a a a a a a b b b b b" "a a a a a a a c c c c c" "d d d d d d e e e e e e"; } .wgrid-a { grid-area: a; } .wgrid-b { grid-area: b; } .wgrid-c { grid-area: c; } .wgrid-d { grid-area: d; } .wgrid-e { grid-area: e; } /* Card */ .wgrid-card { display: flex; flex-direction: column; /* 32px inner padding; 24px between image and content, via gap not margins */ padding: 32px; gap: 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; position: relative; transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .wgrid-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 24px 48px -22px rgba(10,10,16,0.22); } /* Image area */ .wgrid-img { position: relative; overflow: hidden; background: var(--paper-2); flex: 0 0 auto; /* The image sits flush at the top of the card, so it only picked up the card's TOP corners — its bottom edge is interior and rendered square. `inherit` takes .wgrid-card's computed radius, so it stays in sync with the uniform 6px rule. */ border-radius: inherit; } .wgrid-a .wgrid-img { aspect-ratio: 16 / 11; } .wgrid-b .wgrid-img, .wgrid-c .wgrid-img { aspect-ratio: 16 / 9; } .wgrid-d .wgrid-img, .wgrid-e .wgrid-img { aspect-ratio: 16 / 9; } .wgrid-img img { width: 100%; height: 100%; object-fit: cover; display: block; /* .wgrid-card:hover scales this img. A transformed child of an overflow:hidden + border-radius box leaks past the corners in Safari, so the radius must be on the img as well, not just the clipping parent. */ border-radius: inherit; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .wgrid-card:hover .wgrid-img img { transform: scale(1.04); } /* Highlighted stat chip — overlays bottom-left of the image */ .wgrid-stat { position: absolute; bottom: 14px; left: 14px; display: inline-flex; flex-direction: row; /* was column — number above label */ align-items: center; gap: 12px; padding: 12px 16px; background: var(--teal-bright); color: var(--ink); border-radius: 6px; box-shadow: 0 12px 24px -10px rgba(0,0,0,0.28); z-index: 2; } /* badge is always bright-teal, so its text must stay dark even in dark mode */ :root[data-theme="dark"] .wgrid-stat, :root[data-theme="dark"] .wgrid-stat-num, :root[data-theme="dark"] .wgrid-stat-unit, :root[data-theme="dark"] .wgrid-stat-lab { color: #0a0a10; } .wgrid-stat-num { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; line-height: 0.88; letter-spacing: -0.035em; color: var(--ink); font-variation-settings: 'opsz' 96; white-space: nowrap; } .wgrid-stat-unit { font-size: 0.55em; margin-left: 2px; color: var(--ink); } .wgrid-stat-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10,10,16,0.72); font-weight: 600; /* `ch` ignores the 0.16em tracking, so any ch cap under-measures by ~27% and the label wrapped mid-phrase (and split at hyphens). Every chip label is one line; the hero's two lines come from an explicit
. */ white-space: nowrap; max-width: none; line-height: 1.3; } /* Hero card gets a bigger stat chip */ .wgrid-stat-lg { bottom: 20px; left: 20px; padding: 16px 22px; gap: 16px; } .wgrid-stat-lg .wgrid-stat-num { font-size: clamp(40px, 3.6vw, 56px); } .wgrid-stat-lg .wgrid-stat-lab { font-size: 11px; max-width: none; /* was 22ch — this rule is later than the base one and was re-capping the label, so it kept wrapping mid-phrase */ } /* Body */ .wgrid-body { padding: 0; /* the card's 32px padding owns this */ display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .wgrid-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); } .wgrid-name { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.0; letter-spacing: -0.028em; color: var(--ink); margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-variation-settings: 'opsz' 96; } .wgrid-a .wgrid-name { font-size: clamp(30px, 2.8vw, 40px); } .wgrid-arrow { font-family: var(--font-mono); font-size: 0.55em; color: var(--ink-mute); transition: transform var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); } .wgrid-card:hover .wgrid-arrow { transform: translate(4px, -4px); color: var(--teal); } .wgrid-tag { font-family: var(--font-display); font-size: 15px; line-height: 1.4; letter-spacing: -0.012em; color: var(--ink-soft); font-style: italic; margin: 0; /* was 2px 0 0 — .wgrid-body's gap owns the spacing */ /* was 38ch (~313px). `ch` is the width of a "0", so it under-measured these italic lines badly — they need 388-564px and the card bodies are 506-740px. Uncapped they fit on one line; on mobile the narrow card still wraps. */ max-width: none; font-variation-settings: 'opsz' 24; } .wgrid-stack { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } /* Footer row — See-all CTA */ .work-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--hairline); } /* Button sits right, meta left. `order` rather than row-reverse so the flex-wrap fallback still stacks meta-then-button in reading order on mobile. */ .work-foot .btn-classy { order: 2; } .work-foot-meta { order: 1; } .work-foot-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } @media (max-width: 980px) { .wgrid { grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a a a a a" "b b b c c c" "d d d e e e"; } } @media (max-width: 640px) { .wgrid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; } .wgrid-a .wgrid-img, .wgrid-b .wgrid-img, .wgrid-c .wgrid-img, .wgrid-d .wgrid-img, .wgrid-e .wgrid-img { aspect-ratio: 16 / 10; } } /* ---- Pilot Run — triptych editorial dark moment ---------------- */ .pilot { position: relative; background: var(--ink); color: var(--paper); padding: clamp(96px, 13vw, 168px) 0; overflow: hidden; isolation: isolate; } .pilot-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(250,250,247,0.06) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.7; } .pilot-bg::after { content: ''; position: absolute; top: -180px; right: -240px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),0.18) 0%, transparent 65%); pointer-events: none; } .pilot-bg::before { content: ''; position: absolute; bottom: -200px; left: -200px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),0.10) 0%, transparent 70%); pointer-events: none; } .pilot-frame { position: relative; z-index: 2; } /* Dark-section overrides — same pattern as .proof */ .pilot h2, .pilot h3 { color: var(--paper); } .pilot p { color: rgba(250,250,247,0.7); } .pilot .eyebrow { color: var(--paper); } .pilot .eyebrow::before { background: var(--teal); } /* Section header — identical to .proof-head */ .pilot-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .pilot-head .eyebrow { margin-bottom: 20px; } .pilot-head h2 { max-width: 75%; margin-bottom: 28px; color: var(--paper); } .pilot-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: rgba(250,250,247,0.7); margin: 0; } .pilot-head p strong { color: var(--teal-bright); font-weight: 600; } /* TRIPTYCH — three vertical panes */ .pilot-tri { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(250,250,247,0.18); border-bottom: 1px solid rgba(250,250,247,0.18); position: relative; } /* Dotted teal pipeline connecting the three numbers across the top */ .pilot-tri::after { content: ''; position: absolute; top: clamp(80px, 7vw, 100px); left: clamp(40px, 4vw, 64px); right: clamp(40px, 4vw, 64px); height: 1px; background: repeating-linear-gradient(90deg, var(--teal-bright) 0, var(--teal-bright) 4px, transparent 4px, transparent 12px); opacity: 0.35; pointer-events: none; z-index: 1; } .pilot-pane { position: relative; z-index: 2; padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px); border-right: 1px solid rgba(250,250,247,0.10); display: flex; flex-direction: column; gap: 18px; } .pilot-pane:last-child { border-right: 0; } .pilot-pane-no { font-family: var(--font-display); font-size: clamp(64px, 7vw, 96px); font-weight: 500; line-height: 0.85; letter-spacing: -0.045em; color: var(--teal-bright); font-variation-settings: 'opsz' 96; /* sits on the pipeline */ position: relative; z-index: 2; background: var(--ink); display: inline-block; padding-right: 14px; margin-left: -4px; align-self: flex-start; } .pilot-pane-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,250,247,0.55); font-weight: 600; margin-top: -8px; } .pilot-pane-h { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.022em; color: var(--paper); margin: 6px 0 0; max-width: 22ch; font-variation-settings: 'opsz' 72; } .pilot-pane-body { font-size: 14.5px; line-height: 1.65; color: rgba(250,250,247,0.72); margin: 0; } .pilot-pane-list { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid rgba(250,250,247,0.10); display: flex; flex-direction: column; gap: 9px; } .pilot-pane-list li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,247,0.6); position: relative; padding-left: 16px; line-height: 1.4; } .pilot-pane-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 1px; background: var(--teal-bright); } /* FOOT strip — pull-quote left + CTAs right */ .pilot-foot { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: end; margin-top: clamp(56px, 6vw, 80px); } .pilot-foot-trust { display: flex; flex-direction: column; gap: 14px; } .pilot-foot-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; } .pilot-foot-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; letter-spacing: -0.014em; color: rgba(250,250,247,0.9); margin: 0; max-width: 52ch; font-variation-settings: 'opsz' 72; } .pilot-foot-sig { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,247,0.5); } .pilot-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .pilot-cta-row .btn-classy-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .pilot-cta-row .btn-classy-primary:hover { background: var(--teal-bright); color: var(--ink); border-color: var(--teal-bright); box-shadow: 0 12px 30px rgba(var(--accent-bright-rgb),0.32); } .pilot-cta-row .btn-classy-ghost { background: transparent; color: var(--paper); border-color: rgba(250,250,247,0.32); } .pilot-cta-row .btn-classy-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } @media (max-width: 980px) { .pilot-tri { grid-template-columns: 1fr; } .pilot-pane { border-right: 0; border-bottom: 1px solid rgba(250,250,247,0.10); } .pilot-pane:last-child { border-bottom: 0; } .pilot-tri::after { display: none; } .pilot-pane-no { background: transparent; padding-right: 0; } .pilot-foot { grid-template-columns: 1fr; } .pilot-cta-row { justify-content: flex-start; } } /* ---- FAQ ------------------------------------------------------------- */ .faq { background: var(--paper); } .faq-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 72px; } .faq-head .eyebrow { margin-bottom: 20px; } .faq-head h2 { max-width: 75%; margin-bottom: 28px; } .faq-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } .faq-list { border-top: 1px solid var(--rule-strong); } .faq-item { border-bottom: 1px solid var(--rule-strong); padding: 0; } .faq-item summary { list-style: none; cursor: pointer; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; transition: padding var(--d-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; /* no mobile tap flash */ -webkit-user-select: none; user-select: none; outline: none; } .faq-item summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-q { font-family: var(--font-display); /* was var(--fs-display-m) = clamp(22px,1.9vw,26px). Matched to .s14-accordion-title, the FAQ question on the other 110 pages. */ font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.018em; color: var(--ink); line-height: 1.2; flex: 1 1 auto; /* summary is space-between; fill the row, icon stays right */ min-width: 0; transition: color var(--d-fast) var(--ease-out); } .faq-toggle { font-size: 0; /* hide the literal "+"; use a Lucide-style plus */ color: var(--ink); position: relative; display: grid; width: 40px; height: 40px; border: 1px solid var(--rule-strong); border-radius: 50%; flex-shrink: 0; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease-out); } .faq-toggle::before { width: 14px; height: 2px; transform: translate(-50%, -50%); } .faq-toggle::after { width: 2px; height: 14px; transform: translate(-50%, -50%); } .faq-item:hover .faq-q { color: var(--teal); } .faq-item:hover .faq-toggle { background: var(--teal); color: var(--paper); border-color: var(--teal); } .faq-item[open] .faq-toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); } .faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); } /* plus -> minus */ .faq-a { padding: 0 0 28px; /*
snaps its height open/closed — the old `animation: faqOpen` only faded the content in, and did nothing on close. The inline script at the end of the page drives max-height so it eases both ways, like .s14-accordion-content on every other page. */ overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .faq-a p { font-size: 18px; /* desktop */ line-height: 1.6; color: var(--ink-soft); } @media (max-width: 1024px) { .faq-a p { font-size: 16px; } } /* tablet */ @media (max-width: 640px) { .faq-a p { font-size: 15px; } } /* mobile */ .faq-a a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } @keyframes faqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .faq-head { grid-template-columns: 1fr; gap: 28px; } /* faq-head already single-column */ .faq-q { font-size: var(--fs-lede); } } /* ========================================================================== 21. Lovable-inspired additions ========================================================================== */ /* ---- CTA section — "One paragraph. That's it." ---------------------- */ .cta { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); position: relative; overflow: hidden; } /* Locked title head */ .cta-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 64px; } .cta-head .eyebrow { margin-bottom: 20px; } .cta-head h2 { max-width: 75%; margin-bottom: 28px; } .cta-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } /* MASSIVE email centrepiece — hairline-framed, ink-bold */ .cta-email { display: flex; flex-direction: column; gap: 22px; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; color: var(--ink); position: relative; } .cta-email-prefix { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; font-weight: 600; } .cta-email-prefix-arrow { display: inline-block; color: var(--teal); font-size: 14px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease; } .cta-email:hover .cta-email-prefix-arrow { color: var(--teal-deep); transform: translate(3px, -3px); } /* The address line — flex row that shrinks to content so the slab is content-width */ .cta-email-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; align-self: flex-start; max-width: 100%; } /* The address — animated teal slab wipes in left→right beneath the text only */ .cta-email-addr { display: inline; font-family: var(--font-display); font-size: clamp(36px, 6vw, 84px); font-weight: 500; line-height: 0.95; letter-spacing: -0.038em; color: var(--ink); font-variation-settings: 'opsz' 96; word-break: break-word; background-image: linear-gradient( to top, transparent 4%, rgba(var(--accent-bright-rgb), 0.45) 4%, rgba(var(--accent-bright-rgb), 0.45) 30%, transparent 30% ); background-position: 0 100%; background-size: 0% 100%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .cta-email:hover .cta-email-addr { background-size: 100% 100%; } .cta-email-mark { display: inline-block; font-family: var(--font-mono); font-size: 0.42em; color: var(--ink-mute); transform: translateY(-0.18em); transition: color 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .cta-email:hover .cta-email-mark { color: var(--teal-deep); transform: translate(12px, calc(-0.18em - 10px)); } .cta-email-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; transition: color 0.3s ease; } .cta-email:hover .cta-email-meta { color: var(--ink); } .cta-email-meta > span:not(.cta-email-dot) { position: relative; } .cta-email-dot { opacity: 0.35; color: var(--teal); } /* 3-step horizontal timeline with dotted teal pipeline */ .cta-timeline { /* no padding-top: .cta-timeline is a direct child of .cta > .container, whose gap (var(--gap-body)) already spaces it off the email block. The old clamp(56px,6vw,80px) stacked on top of that gap. */ } .cta-timeline-lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin-bottom: 36px; } .cta-timeline-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 64px); position: relative; } .cta-timeline-steps::before { /* Dotted teal connector across the top of step numbers */ content: ''; position: absolute; top: clamp(22px, 2.4vw, 32px); left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--teal) 0, var(--teal) 4px, transparent 4px, transparent 12px); opacity: 0.42; z-index: 0; pointer-events: none; } .cta-step { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; } .cta-step-num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 0.85; letter-spacing: -0.035em; color: var(--teal-deep); font-variation-settings: 'opsz' 96; background: var(--paper); display: inline-block; padding-right: 14px; align-self: flex-start; white-space: nowrap; } .cta-step-h { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); margin: 6px 0 0; font-variation-settings: 'opsz' 72; } .cta-step-body { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 34ch; } @media (max-width: 820px) { .cta-timeline-steps { grid-template-columns: 1fr; gap: 32px; } .cta-timeline-steps::before { display: none; } .cta-email-addr { font-size: clamp(28px, 8vw, 48px); } } /* ========================================================================== 22. REDESIGN PASS — hero, marquee, refarch, intro, pillars, why, process, proof, industries ========================================================================== */ /* ---- TRUST MARQUEE -------------------------------------------------- */ .trust { padding: 40px 0; background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; /* label row (.container) and .trust-marquee-wrap are siblings — 24px between them, via gap rather than a margin. */ display: flex; flex-direction: column; gap: 24px; } /* 40px top/bottom only. `body > section:not(.hero) { padding: 80px !important }` (styles.css:138) has the same (0,1,2) specificity, so this needs !important and must sit later. Padding ONLY — folding it into the .trust rule above would lift that rule's `border-top: var(--hairline)` to (0,1,2) and beat the unified section divider, making the boundary invisible again. */ body > section.trust { padding: 40px 0 !important; } .trust-head { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0; /* was 28px */ } .trust-label { position: relative; /* match the canonical .eyebrow: ink, 0.18em tracking, weight 500. .trust-head paints the whole row var(--muted) — correct for .trust-meta, wrong for the label. padding-left is the offset for the absolutely-positioned teal square: 7px square + 10px gap = 17px, same as .eyebrow's `gap: 10px`. */ padding-left: 17px; color: var(--ink); font-weight: 500; letter-spacing: 0.18em; line-height: 1.6; } .trust-label::before { content: ''; position: absolute; /* was top:50% — on mobile the label wraps to 2 lines and the square floated between them. 0.8em = half of the 1.6 line-height, i.e. centre of line 1. */ left: 0; top: 0.8em; width: 7px; height: 7px; transform: translateY(-50%); background: var(--teal); } .trust-marquee-wrap { width: 100%; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .trust-marquee-track { display: flex; align-items: center; gap: 48px; animation: trustScroll 38s linear infinite; width: max-content; white-space: nowrap; padding: 0; /* was 12px 0 */ } .trust:hover .trust-marquee-track { animation-play-state: paused; } .trust-mark { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 48px); font-weight: 500; letter-spacing: -0.022em; color: var(--ink); transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); white-space: nowrap; } .trust-mark:hover { color: var(--teal); transform: translateY(-2px); } .trust-sep { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 48px); font-weight: 300; color: var(--teal); opacity: 0.6; } @keyframes trustScroll { to { transform: translateX(-50%); } } /* ---- REFARCH — animated data-flow lines + status pulse ------------ */ .refarch-board { position: relative; } .ra-layer-ai::after { content: ''; position: absolute; top: 50%; right: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-bright); transform: translateY(-50%); box-shadow: 0 0 0 0 rgba(var(--accent-bright-rgb),0.7); animation: raIntelPulse 2s ease-out infinite; } @keyframes raIntelPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-bright-rgb),0.7); } 100% { box-shadow: 0 0 0 16px rgba(var(--accent-bright-rgb),0); } } .ra-layer { transition: transform var(--d-fast) var(--ease-out); } .ra-layer:hover { transform: translateX(6px); } .ra-layer-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--teal-bright); vertical-align: middle; border-radius: 1px; opacity: 0.6; } .ra-layer-ai .ra-layer-label::before { opacity: 1; } /* connecting flow lines between layers — animated dashes */ .refarch-board::after { content: ''; position: absolute; left: 92px; top: 78px; bottom: 78px; width: 2px; background-image: linear-gradient(to bottom, var(--teal-bright) 50%, transparent 50%); background-size: 2px 8px; opacity: 0.5; animation: raFlow 1.4s linear infinite; } @keyframes raFlow { to { background-position: 0 16px; } } @media (max-width: 880px) { .refarch-board::after { display: none; } } /* ---- INDUSTRIES — col-lede + new card spacing ----------------------- */ .industries-col-lede { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--hairline); } /* ========================================================================== 27. HERO v7 — classy editorial, subtle blueprint bg, text-only CTAs ========================================================================== */ .hero { padding: clamp(140px, 18vh, 200px) 0 clamp(80px, 12vh, 120px); position: relative; background: var(--paper); overflow: hidden; min-height: clamp(640px, 92vh, 880px); display: grid; align-content: center; } .hero > .container { position: relative; z-index: 3; } /* ===== Background pattern layer ===== */ .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* 1. Architectural blueprint grid — fine intersecting lines */ .hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(10,10,16,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,16,0.06) 1px, transparent 1px); background-size: 64px 64px; background-position: 50% 50%; -webkit-mask-image: radial-gradient(ellipse 88% 70% at 50% 55%, #000 0%, transparent 90%); mask-image: radial-gradient(ellipse 88% 70% at 50% 55%, #000 0%, transparent 90%); } /* 2. Soft teal-light rays in the background */ .hero-bg-rays { position: absolute; inset: -20% -10% -10% -10%; /* keep the subtle bottom-centre wash static */ background: radial-gradient(30% 35% at 50% 100%, rgba(var(--accent-rgb),0.10), transparent 60%); } /* bottom-left teal-light blob — drifts up & right */ .hero-bg-rays::before { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 56% at 8% 90%, rgba(var(--accent-light-rgb),0.40), transparent 75%); filter: blur(44px); /* soft, no hard edge */ animation: heroOrbitBL 20s linear infinite; will-change: transform; } /* top-right teal-bright blob — orbits the opposite way */ .hero-bg-rays::after { content: ''; position: absolute; inset: 0; background: radial-gradient(42% 50% at 92% 10%, rgba(var(--accent-bright-rgb),0.26), transparent 75%); filter: blur(44px); animation: heroOrbitTR 26s linear infinite; will-change: transform; } /* circular (round) orbit, not a left↔right drift */ @keyframes heroOrbitBL { 0% { transform: translate(7%, 0); } 25% { transform: translate(0, 7%); } 50% { transform: translate(-7%, 0); } 75% { transform: translate(0, -7%); } 100% { transform: translate(7%, 0); } } @keyframes heroOrbitTR { 0% { transform: translate(-6%, 0); } 25% { transform: translate(0, -6%); } 50% { transform: translate(6%, 0); } 75% { transform: translate(0, 6%); } 100% { transform: translate(-6%, 0); } } @media (prefers-reduced-motion: reduce) { .hero-bg-rays::before, .hero-bg-rays::after { animation: none; } } /* 3. Corner architectural marks */ .hero-bg-mark { position: absolute; width: 30px; height: 30px; pointer-events: none; opacity: 0; animation: heroMarkIn 1.0s 0.4s var(--ease-out) forwards; } .hero-bg-mark::before, .hero-bg-mark::after { content: ''; position: absolute; background: var(--teal); opacity: 0.7; } .hero-bg-mark::before { width: 30px; height: 1px; } .hero-bg-mark::after { width: 1px; height: 30px; } .hbm-tl { top: 32px; left: 32px; } .hbm-tr { top: 32px; right: 32px; } .hbm-tr::before, .hbm-tr::after { right: 0; } .hbm-bl { bottom: 32px; left: 32px; } .hbm-bl::before, .hbm-bl::after { bottom: 0; } .hbm-br { bottom: 32px; right: 32px; } .hbm-br::before, .hbm-br::after { bottom: 0; right: 0; } @keyframes heroMarkIn { to { opacity: 1; } } @media (max-width: 600px) { .hero-bg-mark { display: none; } } /* 4. Continuously flowing arc lines (slow, classy) */ .hero-bg-arc { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--teal); opacity: 0.32; } .hba-line { stroke-dasharray: 1900; stroke-dashoffset: 1900; animation: heroArcDraw 14s ease-in-out infinite; } .hba-2 { animation-duration: 18s; animation-delay: 3s; opacity: 0.6; } @keyframes heroArcDraw { 0% { stroke-dashoffset: 1900; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1900; } } /* ===== Inner content layout — left-aligned ===== */ .hero-inner { max-width: 1180px; margin: 0 auto 0 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } /* hero label === .eyebrow (was --ink-soft / 0.22em / 12px gap / weight 400) */ .hero-eyebrow { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.18em; line-height: 1.6; text-transform: uppercase; color: var(--ink); margin-bottom: 32px; opacity: 0; animation: heroFadeUp 0.7s 0.1s var(--ease-out) forwards; } .hero-eyebrow::before { content: ''; display: block; width: 7px; height: 7px; flex: 0 0 auto; margin-top: calc((1.6em - 7px) / 2); background: var(--teal); } .hero-h1 { font-family: var(--font-display); font-size: clamp(56px, 10vw, 144px); font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; color: var(--ink); margin: 0 0 36px; font-variation-settings: 'opsz' 96; } .hh-line { display: block; overflow: hidden; } .hh-line > span, .hh-line .hh-codewrap { display: inline-block; transform: translateY(110%); animation: heroH1Rise 1.0s var(--ease-out) forwards; } .hh-line:nth-child(1) > span { animation-delay: 0.18s; } .hh-line:nth-child(2) .hh-codewrap { animation-delay: 0.32s; } @keyframes heroH1Rise { to { transform: translateY(0); } } .hh-codewrap { position: relative; padding: 0 6px; } .hh-code { color: var(--ink); position: relative; z-index: 3; } .hh-dot { color: var(--teal); } .hh-marker { position: absolute; left: 38%; right: -3%; bottom: -8%; width: 66%; height: auto; color: var(--teal-light); z-index: 1; pointer-events: none; } .hh-marker path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: heroMarkerDraw 1.6s 1.1s var(--ease-out) forwards; } @keyframes heroMarkerDraw { to { stroke-dashoffset: 0; } } .hero-promise { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; margin: 0 0 44px; font-variation-settings: 'opsz' 96; opacity: 0; animation: heroFadeUp 0.8s 1.4s var(--ease-out) forwards; } .hero-promise strong { color: var(--ink); font-weight: 600; position: relative; padding: 0 0.12em; background-image: linear-gradient(180deg, transparent 78%, var(--teal-light) 78%, var(--teal-light) 92%, transparent 92%); background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; transition: background-size 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } .hero-promise strong.is-visible, .is-visible .hero-promise strong { background-size: 100% 100%; } .brmd { display: none; } @media (min-width: 760px) { .brmd { display: inline; } } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } /* ===== Classy CTAs — text only, refined hover ===== */ .hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 56px; opacity: 0; animation: heroFadeUp 0.8s 1.6s var(--ease-out) forwards; } .btn-classy { display: inline-flex; align-items: center; gap: 0; padding: 16px 30px; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0; border-radius: 100px; position: relative; transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); text-transform: none; border: 1.5px solid transparent; } .btn-classy-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-classy-primary:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--accent-rgb),0.28); } .btn-classy-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-classy-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } /* ===== Trust row — left aligned ===== */ .hero-trust-row { display: inline-flex; align-items: center; justify-content: flex-start; gap: 36px; flex-wrap: wrap; padding: 24px 36px; background: rgba(250,250,247,0.65); border: 1px solid var(--rule); border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; animation: heroFadeUp 0.8s 1.8s var(--ease-out) forwards; align-self: flex-start; } .htr-item { display: flex; align-items: baseline; gap: 10px; } .htr-num { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; color: var(--ink); font-variation-settings: 'opsz' 96; } .htr-num::after { content: attr(data-suffix); color: var(--teal); font-size: 0.58em; margin-left: 2px; } .htr-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .htr-divider { width: 1px; height: 26px; background: var(--rule-strong); } @media (max-width: 760px) { /* numbers align in one column, labels in another — no ragged edge */ .hero-trust-row { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 18px; align-items: baseline; width: 100%; padding: 24px 26px; border-radius: 18px; } .htr-item { display: contents; } .htr-num { font-size: clamp(30px, 9vw, 40px); } .htr-lab { align-self: center; line-height: 1.3; } .htr-divider { display: none; } .hero-actions { gap: 14px; } } /* ========================================================================== 28. JOURNEY — engagement timeline (replaces refarch) ========================================================================== */ .journey { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .journey-head { text-align: left; max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .journey-head .eyebrow { display: inline-flex; margin: 0 0 24px; justify-content: flex-start; } .journey-head h2 { margin-bottom: 24px; max-width: 75%; } .journey-head p { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0; } .journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; background: var(--paper); } .journey-line { position: absolute; top: 92px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--rule-strong) 0%, var(--rule-strong) 100%); z-index: 1; } .journey-line::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal-bright), var(--teal)); transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--ease-out); } .journey-track.is-visible .journey-line::before { transform: scaleX(1); } .jstep { position: relative; padding: 40px 28px 36px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 12px; background: var(--paper); transition: background 0.18s var(--ease-out); } .jstep:last-child { border-right: 0; } .jstep:hover { background: var(--paper-2); } .jstep-when { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 600; } .jstep-dot { position: absolute; top: 86px; left: 28px; width: 14px; height: 14px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; z-index: 2; transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); } .jstep:hover .jstep-dot { background: var(--teal); border-color: var(--teal); transform: scale(1.2); } .jstep-emph .jstep-dot { background: var(--teal-bright); border-color: var(--teal-bright); box-shadow: 0 0 0 4px rgba(var(--accent-bright-rgb),0.18); } .jstep-title { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-top: 36px; color: var(--ink); } .jstep-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .jstep-meta { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--rule); } .jstep-meta li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: none; } .jstep-meta li::before { content: '→ '; color: var(--teal); font-weight: 600; margin-right: 4px; } @media (max-width: 980px) { .journey-track { grid-template-columns: repeat(2, 1fr); } .jstep:nth-child(2) { border-right: 0; } .jstep:nth-child(1), .jstep:nth-child(2) { border-bottom: 1px solid var(--rule-strong); } .journey-line { display: none; } .jstep-dot { top: 52px; } } @media (max-width: 560px) { .journey-track { grid-template-columns: 1fr; } .jstep { border-right: 0; border-bottom: 1px solid var(--rule-strong); } .jstep:last-child { border-bottom: 0; } } /* ========================================================================== 32. BELIEF STATEMENT — replaces founder letter (Section 3) ========================================================================== */ .belief { background: var(--paper-2); padding: clamp(120px, 14vw, 200px) 0; position: relative; overflow: hidden; } .belief-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .belief-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(10,10,16,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,16,0.05) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 100% 60% at 30% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 100% 60% at 30% 50%, #000, transparent 80%); } .belief-glow { position: absolute; top: 14%; right: -20%; width: 80%; height: 85%; background: radial-gradient(ellipse 62% 62% at 60% 50%, rgba(var(--accent-bright-rgb),0.20), rgba(var(--accent-bright-rgb),0) 70%); filter: blur(46px); animation: beliefGlow 10s ease-in-out infinite alternate; } @keyframes beliefGlow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-30px, 20px) scale(1.1); } } .belief > .container { position: relative; z-index: 2; } .belief-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: 64px; } .belief-counter { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .belief-statement { font-family: var(--font-display); font-size: clamp(48px, 9vw, 132px); font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; color: var(--ink); margin: 0 0 80px; max-width: 75%; font-variation-settings: 'opsz' 96; } /* Two classes only: .bs-body is the black run, .bs-accent the teal phrase. The old .bs-line spans were display:block, so each fragment was forced onto its own line and the black text read as three broken chunks. Both are inline now, so the sentence flows and wraps naturally. */ .bs-body { display: inline; color: var(--ink); } .bs-accent { font-style: normal; color: var(--teal); /* inline + box-decoration-break: clone → each wrapped line gets its own highlighter sized to THAT line's text width, not the full box width. */ display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1; padding-bottom: 0.05em; vertical-align: baseline; background-image: linear-gradient(180deg, transparent 80%, var(--teal-light) 80%, var(--teal-light) 95%, transparent 95%); background-size: 100% 100%; background-repeat: no-repeat; background-position: left top; } @keyframes beliefRise { to { transform: translateY(0); } } .belief-support { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 56px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); position: relative; } /* Tag sitting on the bottom border — cuts through the line */ .belief-support-tag { position: absolute; bottom: 0; left: 50%; /* was 11% — caption is centred on the rule */ transform: translate(-50%, 50%); text-align: center; background: var(--paper-2); padding: 6px 18px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-weight: 600; white-space: nowrap; } .belief-support::before, .belief-support::after { content: ''; position: absolute; top: 56px; bottom: 56px; width: 1px; background: var(--rule); } .belief-support::before { left: 33.333%; } .belief-support::after { left: 66.666%; } .bsup { padding: 0 32px; display: flex; flex-direction: column; gap: 18px; } .bsup:first-child { padding-left: 0; } .bsup:last-child { padding-right: 0; } .bsup-num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.18em; color: var(--teal); font-weight: 600; } .bsup p { font-family: var(--font-body); /* DM Sans (was --font-display / Bricolage) */ font-size: clamp(15px, 1.15vw, 17px); /* was clamp(16px, 1.3vw, 19px) */ font-weight: 400; line-height: 1.55; color: var(--ink-soft); /* no font-variation-settings: 'opsz' 96 — that axis is Bricolage's. DM Sans is loaded with opsz 9..40, so 96 would just clamp. Let it use its default. */ } .bsup p em { color: var(--teal); font-style: italic; background: none; padding: 0; } /* .belief-foot removed — tag now sits on the belief-support bottom border */ @media (max-width: 880px) { .belief-support { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; } .belief-support::before, .belief-support::after { display: none; } .bsup { padding: 0; padding-bottom: 32px; border-bottom: 1px solid var(--rule); } .bsup:last-child { border-bottom: 0; padding-bottom: 0; } } /* ========================================================================== 33. CAPABILITIES — interactive expanding stack (replaces pillars grid) ========================================================================== */ .caps { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .caps-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 var(--gutter) 64px var(--gutter); } .caps > .container > .caps-head { margin: 0 0 64px; } .caps-head h2 { margin-bottom: 24px; max-width: 75%; } .caps-head p { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; } .caps-stack { display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .cap { border-bottom: 1px solid var(--rule); position: relative; } .cap:last-child { border-bottom: 0; } .cap-row { display: grid; grid-template-columns: 60px 1fr auto 56px; gap: 28px; align-items: center; width: 100%; padding: 30px 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; /* no mobile tap flash/box */ -webkit-user-select: none; user-select: none; outline: none; } .cap-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .cap-num { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--teal); transition: color var(--d-base) var(--ease-out); } .cap[data-open="true"] .cap-num { color: var(--teal); } .cap-name { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 24px); /* FAQ-title-ish, nudged up a touch */ font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); transition: color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); font-variation-settings: 'opsz' 96; } .cap:hover .cap-name { color: var(--teal); } .cap[data-open="true"] .cap-name { color: var(--teal); } .cap-tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } @media (max-width: 760px) { .cap-tag { display: none; } } .cap-mark { grid-column: -2 / -1; } .cap-mark { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong); display: grid; place-items: center; color: var(--ink); transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } .cap-mark svg { width: 16px; height: 16px; stroke-width: 2; stroke-linecap: round; transition: transform var(--d-base) var(--ease-out); } .cap-mark-v { transition: transform var(--d-base) var(--ease-out); transform-origin: center; transform-box: fill-box; } .cap:hover .cap-mark { background: var(--teal); border-color: var(--teal); color: var(--paper); } .cap[data-open="true"] .cap-mark { background: var(--ink); border-color: var(--ink); color: var(--paper); } .cap[data-open="true"] .cap-mark-v { transform: scaleY(0); } /* plus -> minus */ /* Panel expansion — smooth grid-row transition */ .cap-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .cap[data-open="true"] .cap-panel { grid-template-rows: 1fr; } .cap-panel-inner { overflow: hidden; min-height: 0; padding: 0; } /* Inner content fades up together, anchored to the row */ .cap-panel-content { padding: 0 0 36px 88px; /* top 4px removed */ max-width: 75%; opacity: 0; transform: translateY(6px); transition: opacity 0.4s 0.06s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s 0.06s cubic-bezier(0.22, 1, 0.36, 1); } .cap[data-open="true"] .cap-panel-content { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } @media (max-width: 760px) { /* was 4px 0 36px 88px — the 36px tail left dead space above the next row's rule */ .cap-panel-content { padding: 0; max-width: 100%; } /* 75% is a desktop measure */ .cap-panel-inner { padding: 0; } .cap-panel-content > :last-child { margin-bottom: 16px; } } .cap-body { font-family: var(--font-body); /* DM Sans — body copy, not the Bricolage display face */ font-size: clamp(16px, 1.3vw, 18px); /* matched to FAQ answer size */ line-height: 1.6; color: var(--ink-soft); /* 64ch cap removed — the 75% measure now lives on .cap-panel-content, and this fills it. Putting 75% on both would compound to 0.75*0.75 = 56%. */ max-width: 100%; margin-bottom: 0; /* was 24px — dead trailing space under the answer */ /* no font-variation-settings — 'opsz' 96 is a Bricolage axis; DM Sans loads opsz 9..40. */ } /* 41 cards have a .cap-cta / chips / second paragraph after the body, and .cap-panel-content is a plain block with no gap — keep the 24px only there. */ .cap-body:not(:last-child) { margin-bottom: 24px; } .cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .cap-chip { padding: 8px 14px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; border-radius: 100px; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); } .cap-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cap-outcome { display: flex; align-items: baseline; gap: 20px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; margin-bottom: 22px; position: relative; overflow: hidden; } .cap-outcome::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--teal-bright); } .cap-outcome-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 600; white-space: nowrap; } .cap-outcome-val { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } /* .cap-cta is styled by .btn-classy.btn-classy-ghost (see markup). Kept only as a hook for the mobile size tweak below. */ .cap-cta > i { transition: transform var(--d-fast) var(--ease-out); } .cap-cta:hover > i { transform: translateX(3px); } @media (max-width: 600px) { .cap-row { grid-template-columns: 40px 1fr auto 44px; gap: 14px; padding: 22px 4px; } .cap-tag { grid-column: 1 / -1; padding-left: 54px; } } /* ========================================================================== 35. WHY EMPYREAL — editorial bento (no numbers, category-led cards) ========================================================================== */ .why { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .why-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .why-head .eyebrow { margin-bottom: 20px; } .why-head h2 { max-width: 75%; margin-bottom: 28px; } .why-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } .why-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* The featured card spans all 3 columns and sits in the middle (row 2) */ .wcard-feature { grid-column: 1 / -1; } .wcard { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); min-height: 260px; } .wcard::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--teal), transparent); opacity: 0; transition: height var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out); } .wcard:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 16px 40px rgba(var(--accent-rgb),0.10); } .wcard:hover::before { height: 3px; opacity: 1; } .wcard-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 600; position: relative; padding-left: 30px; } .wcard-kicker::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); background: var(--teal); } .wcard h3 { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); margin: 0; font-variation-settings: 'opsz' 96; } .wcard p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; margin-top: auto; } /* Featured card — inverted ink slab spanning full width */ .wcard-feature { background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 300px; padding: clamp(48px, 5vw, 72px) clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: end; position: relative; } .wcard-feature::before { background: linear-gradient(180deg, var(--teal-bright), transparent); } .wcard-feature::after { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 130% at 100% 0%, rgba(var(--accent-bright-rgb), 0.20) 0%, rgba(var(--accent-bright-rgb), 0.07) 28%, transparent 58%); pointer-events: none; } .wcard-feature:hover { border-color: var(--teal-bright); box-shadow: 0 20px 60px rgba(var(--accent-bright-rgb),0.20); } .wcard-kicker-light { color: var(--teal-bright); } .wcard-kicker-light::before { background: var(--teal); } /* The four children used to auto-place across the 2-col grid: kicker->(1,1), h3->(1,2), p->(2,1), sig->(2,2) — i.e. label left / title right, para left / caption right. Grouped into two column wrappers so label+title stay left and para+caption stay right. */ .wcard-feature-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .wcard-feature .wcard-feature-h { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.028em; color: var(--paper); max-width: 18ch; margin: 18px 0 0; } .wcard-feature .wcard-feature-h em { color: var(--teal-bright); } .wcard-feature p { color: rgba(250,250,247,0.8); font-size: 16.5px; line-height: 1.55; max-width: 56ch; margin: 0; } .wcard-feature-sig { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,247,0.5); } @media (max-width: 980px) { .why-bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .why-bento { grid-template-columns: 1fr; gap: 14px; } .wcard-feature { grid-template-columns: 1fr; align-items: stretch; } .wcard-feature p { margin-top: 16px; } } /* ========================================================================== 37. PROCESS — editorial magazine spread (massive numbers + inline narrative) ========================================================================== */ .process { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .process-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .process-head .eyebrow { margin-bottom: 20px; } .process-head h2 { max-width: 75%; margin-bottom: 28px; } .process-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } .proc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); } .proc-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: clamp(36px, 5vw, 80px); padding: clamp(40px, 4.5vw, 56px) clamp(32px, 3.5vw, 48px); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; position: relative; align-items: start; box-shadow: 0 12px 28px rgba(10,10,16,0.04); opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .proc-row.is-visible { opacity: 1; transform: translateY(0); } .proc-row:hover { border-color: var(--teal); box-shadow: 0 22px 50px rgba(var(--accent-rgb),0.10); } /* Big phase number, but low opacity so it doesn't fight the title for attention */ .proc-num { font-family: var(--font-display); font-size: clamp(72px, 10vw, 156px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.85; color: var(--ink); opacity: 0.16; font-variation-settings: 'opsz' 96; transition: opacity var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } .proc-row:hover .proc-num { opacity: 0.55; color: var(--teal); } .proc-content { padding-top: 14px; } .proc-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .proc-time { margin-left: auto; } .proc-tag { font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); /* was clamp(28px, 2.8vw, 40px) — 32px on desktop */ font-weight: 500; letter-spacing: -0.028em; color: var(--ink); line-height: 1.15; font-variation-settings: 'opsz' 96; } .proc-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 600; padding: 5px 12px; border: 1px solid var(--teal); border-radius: 100px; } .proc-lead { font-family: var(--font-body); /* DM Sans (was --font-display) */ font-size: clamp(16px, 1.3vw, 18px); /* was clamp(18px, 1.6vw, 22px) */ font-weight: 400; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; margin: 0 0 22px; /* no font-variation-settings: 'opsz' 96 — that axis belongs to Bricolage. DM Sans loads with opsz 9..40, so 96 would just clamp to 40. */ } .proc-out { display: block; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; margin: 0; padding: 16px 20px; border-left: 3px solid var(--teal); background: rgba(var(--accent-rgb), 0.05); border-radius: 0 8px 8px 0; } .proc-out span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 600; display: block; margin-bottom: 10px; } .proc-out strong { color: var(--ink); font-weight: 600; } /* The Build card — emphasised with teal-light wash + teal border */ .proc-row-feature { background: linear-gradient(180deg, rgba(var(--accent-light-rgb),0.22), rgba(var(--accent-light-rgb),0.04)); border-color: var(--teal); box-shadow: 0 16px 40px rgba(var(--accent-rgb),0.10); } .proc-row-feature:hover { border-color: var(--teal-deep); box-shadow: 0 26px 56px rgba(var(--accent-rgb),0.18); } .proc-row-feature .proc-num { color: var(--teal); } .proc-row-feature .proc-tag { color: var(--teal-deep); } /* dark mode: the ghosted numeral needs more presence on the dark teal wash */ :root[data-theme="dark"] .proc-num { opacity: 0.24; } :root[data-theme="dark"] .proc-row-feature .proc-num { color: var(--teal-bright); opacity: 0.42; } :root[data-theme="dark"] .proc-row-feature .proc-tag { color: var(--teal-bright); } @media (max-width: 760px) { .proc-row { grid-template-columns: 1fr; gap: 16px; } .proc-num { font-size: clamp(56px, 14vw, 84px); } /* tag pill: keep it tidy when the label wraps on narrow screens */ .proc-meta { align-items: flex-start; row-gap: 12px; } .proc-time { margin-left: 0; letter-spacing: 0.06em; font-size: 10px; line-height: 1.5; border-radius: 12px; padding: 6px 12px; max-width: 100%; } } /* ========================================================================== 39. PROOF — clean editorial 3-col on dark, minimal chrome ========================================================================== */ .proof { background: var(--ink); color: var(--paper); padding: clamp(96px, 12vw, 160px) 0 clamp(72px, 9vw, 110px); border-top: 1px solid var(--ink-2); position: relative; overflow: hidden; } .proof h2, .proof h3 { color: var(--paper); } .proof p { color: rgba(250,250,247,0.7); } .proof .eyebrow { color: var(--paper); } .proof .eyebrow::before { background: var(--teal); } .proof-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .proof-head .eyebrow { margin-bottom: 20px; } .proof-head h2 { max-width: 75%; margin-bottom: 28px; color: var(--paper); } .proof-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: rgba(250,250,247,0.7); margin: 0; } /* The stat bar — top border only */ .proof-bar { border-top: 1px solid rgba(250,250,247,0.14); } .pb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: clamp(24px, 3vw, 40px); /* gap between top border and vertical dividers */ } .pb-stat { padding: clamp(40px, 5vw, 64px) clamp(20px, 2.4vw, 36px) clamp(40px, 5vw, 64px) 0; border-right: 1px solid rgba(250,250,247,0.10); display: flex; flex-direction: column; gap: 22px; } .pb-stat:first-child { padding-right: clamp(20px, 2.4vw, 36px); } .pb-stat:last-child { border-right: 0; padding-right: 0; padding-left: clamp(20px, 2.4vw, 36px); } .pb-stat:nth-child(2) { padding-left: clamp(20px, 2.4vw, 36px); } .pb-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; display: inline-flex; align-items: center; gap: 12px; } .pb-cat::before { content: ''; width: 7px; height: 7px; background: var(--teal); } .pb-num { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 500; line-height: 0.88; letter-spacing: -0.045em; color: var(--paper); font-variation-settings: 'opsz' 96; white-space: nowrap; display: block; } .pb-unit { font-size: 0.32em; font-weight: 500; color: var(--teal-bright); letter-spacing: -0.02em; margin-left: 4px; vertical-align: top; margin-top: 0.3em; display: inline-block; } .pb-desc { font-family: var(--font-display); font-size: clamp(14.5px, 1.15vw, 17px); font-weight: 400; line-height: 1.5; color: rgba(250,250,247,0.78); margin: auto 0 0 0; max-width: 32ch; font-variation-settings: 'opsz' 96; } /* Metadata row — no divider, flows below the stats */ .pb-meta { display: flex; align-items: center; gap: 18px; padding: 22px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,247,0.55); flex-wrap: wrap; } .pb-meta > span:not(.pb-meta-rule):first-child, .pb-meta > span:not(.pb-meta-rule):last-child { color: var(--teal-bright); font-weight: 600; } .pb-meta-rule { flex: 1; height: 1px; background: rgba(250,250,247,0.16); } @media (max-width: 880px) { .pb-stats { grid-template-columns: 1fr; } .pb-stat { border-right: 0; border-bottom: 1px solid rgba(250,250,247,0.10); padding: 36px 0; } .pb-stat:last-child { border-bottom: 0; padding-left: 0; } .pb-stat:nth-child(2) { padding-left: 0; } .pb-num { font-size: clamp(38px, 11vw, 66px); } .pb-meta { gap: 12px; padding: 20px 0; } .pb-meta-rule { display: none; } } /* ========================================================================== 40. AUDIENCES — two-world editorial split (the page's main commercial moment) ========================================================================== */ .audiences { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .audiences-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .audiences-head .eyebrow { margin-bottom: 20px; } .audiences-head h2 { max-width: 75%; margin-bottom: 28px; } .audiences-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } /* Split layout */ .aud-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); } /* Shared panel base */ .aud-panel { position: relative; border-radius: 10px; padding: clamp(40px, 4.5vw, 64px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 36px); overflow: hidden; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .aud-light { background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); } .aud-light:hover { border-color: var(--teal); } .aud-dark { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .aud-dark:hover { border-color: var(--teal-bright); box-shadow: 0 24px 60px rgba(var(--accent-bright-rgb),0.15); } /* Deco gradient blob in dark panel */ .aud-deco { position: absolute; top: -35%; right: -25%; width: 95%; height: 100%; background: radial-gradient(ellipse 110% 110% at top right, rgba(var(--accent-bright-rgb),0.22), rgba(var(--accent-bright-rgb),0) 62%); filter: blur(34px); pointer-events: none; animation: audDecoDrift 14s ease-in-out infinite alternate; } @keyframes audDecoDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-24px, 20px) scale(1.08); } } /* Meta header row */ .aud-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; flex-wrap: wrap; gap: 12px; } .aud-light .aud-no { color: var(--teal); } .aud-light .aud-mode { color: var(--muted); } .aud-dark .aud-no { color: var(--teal-bright); } .aud-dark .aud-mode { color: rgba(250,250,247,0.55); } /* Massive name */ .aud-name { font-family: var(--font-display); /* was clamp(56px, 8vw, 120px) — 8vw tracks the VIEWPORT, but the panel is only ~half of it, so the word overpowered its card at every desktop width. */ font-size: clamp(34px, 4.6vw, 68px); font-weight: 500; line-height: 0.9; /* Word and sub were two lines of one inline flow, so the sub sat in a line box the height of the h3's strut (68px * 0.9 = 61.2px), not its own 28.6px. Flex column gives a real 12px gap. The
had to go — it would have become an anonymous third flex item. */ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; letter-spacing: -0.045em; margin: 0; font-variation-settings: 'opsz' 96; } .aud-light .aud-name { color: var(--ink); } .aud-dark .aud-name { color: var(--paper); } /* keep "Agencies" + dot together so the dot never wraps to its own line */ .aud-name-word { white-space: nowrap; } .aud-name-dot { display: inline-block; width: 0.13em; height: 0.13em; margin-left: 0.08em; border-radius: 50%; background: var(--teal); vertical-align: baseline; } .aud-dark .aud-name-dot { background: var(--teal-bright); } .aud-name-sub { display: inline-block; font-size: 0.42em; font-weight: 400; font-style: italic; letter-spacing: -0.02em; margin-top: 0; /* was 0.2em — the gap owns this now */ opacity: 0.85; } /* Editorial quote */ .aud-quote { font-family: var(--font-body); /* DM Sans (was --font-display / Bricolage) */ font-size: clamp(15px, 1.15vw, 17px); /* was clamp(17px, 1.5vw, 21px) */ font-weight: 400; line-height: 1.55; /* no font-variation-settings: 'opsz' 96 — that axis is Bricolage's. DM Sans loads with opsz 9..40, so 96 would just clamp to its largest optical size. */ max-width: none; /* was 36ch (= 449px at 21px), which left the quote at half the panel width. Fill the panel; .aud-panel's padding still sets the measure. */ margin: 0; font-style: italic; } .aud-light .aud-quote { color: var(--ink-soft); } .aud-dark .aud-quote { color: rgba(250,250,247,0.78); } .aud-light .aud-quote em { color: var(--teal); background: none; padding: 0; font-style: italic; } .aud-dark .aud-quote em { color: var(--teal-bright); background: none; padding: 0; font-style: italic; } /* Sectors block */ .aud-block-lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; } .aud-light .aud-block-lab { color: var(--muted); } .aud-dark .aud-block-lab { color: rgba(250,250,247,0.5); } .aud-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .aud-chips li { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 100px; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); cursor: default; } .aud-light .aud-chips li { background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); } .aud-light .aud-chips li:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); } .aud-dark .aud-chips li { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--paper); } .aud-dark .aud-chips li:hover { background: var(--teal-bright); color: var(--ink); border-color: var(--teal-bright); transform: translateY(-2px); } /* Footer */ .aud-foot { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-top: auto; padding-top: 28px; } .aud-light .aud-foot { border-top: 1px solid var(--rule); } .aud-dark .aud-foot { border-top: 1px solid rgba(255,255,255,0.12); } .aud-foot-stat { display: flex; flex-direction: column; gap: 4px; } .aud-foot-num { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; letter-spacing: -0.032em; line-height: 0.9; font-variation-settings: 'opsz' 96; } .aud-light .aud-foot-num { color: var(--ink); } .aud-dark .aud-foot-num { color: var(--paper); } .aud-foot-sup { font-size: 0.45em; vertical-align: top; margin-left: 2px; margin-top: 0.3em; display: inline-block; } .aud-light .aud-foot-sup { color: var(--teal); } .aud-dark .aud-foot-sup { color: var(--teal-bright); } .aud-foot-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; max-width: none; /* was 24ch — `ch` ignores the 0.16em tracking, so it wrapped early */ line-height: 1.5; } .aud-light .aud-foot-lab { color: var(--muted); } .aud-dark .aud-foot-lab { color: rgba(250,250,247,0.5); } /* Outline pill (was an underlined text link: border-bottom + padding-bottom). Shape copied from .btn-classy-ghost — transparent fill, 1.5px border, border-radius 100px — but keeps the panel's mono type. */ .aud-link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 1.5px solid currentColor; border-radius: 100px; background: transparent; justify-content: center; /* .aud-foot makes this a full-width 1fr grid item on mobile */ /* type matched to .btn-classy, the site's button */ font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); } /* nudge only the arrow, not the whole pill */ .aud-link > span { transition: transform var(--d-fast) var(--ease-out); } .aud-link:hover > span { transform: translateX(3px); } .aud-light .aud-link { color: var(--teal); border-color: var(--teal); } .aud-light .aud-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .aud-dark .aud-link { color: var(--teal-bright); border-color: var(--teal-bright); } .aud-dark .aud-link:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* Reveal animation per panel — left fades from left, right from right */ .aud-light.reveal { transform: translateX(-32px); opacity: 0; } .aud-dark.reveal { transform: translateX(32px); opacity: 0; } .aud-panel.is-visible { transform: translateX(0); opacity: 1; } @media (max-width: 980px) { .aud-split { grid-template-columns: 1fr; gap: 18px; } .aud-light.reveal, .aud-dark.reveal { transform: translateY(20px); } .aud-foot { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 600px) { .aud-panel { padding: clamp(30px, 6vw, 40px); } } /* ========================================================================== 41. STACK — light editorial layered diagram ========================================================================== */ .stack { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .stack-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 80px; } .stack-head .eyebrow { margin-bottom: 20px; } .stack-head h2 { max-width: 75%; margin-bottom: 28px; } .stack-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } .stk-board { display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; } .stk-board-frame { display: flex; flex-direction: column; gap: 0; } .stk-layer { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--hairline); } .stk-layer:last-child { border-bottom: 1px solid var(--hairline); } /* L3 feature — label + chips carry the accent, no background tint */ .stk-layer-feature { background: transparent; } .stk-layer-head { display: flex; flex-direction: column; gap: 6px; padding-left: 0; } .stk-layer-no { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .stk-layer-feature .stk-layer-no { color: var(--teal); } .stk-layer-name { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.022em; color: var(--ink); margin: 0; line-height: 1.15; font-variation-settings: 'opsz' 96; } .stk-layer-feature .stk-layer-name { color: var(--teal-deep); } :root[data-theme="dark"] .stk-layer-feature .stk-layer-name { color: var(--teal-bright); } .stk-layer-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; } .stk-layer-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; } .stk-chip { padding: 7px 13px; background: transparent; border: 1px solid var(--rule-strong); color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; border-radius: 100px; } .stk-layer-feature .stk-chip { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.32); color: var(--teal-deep); } :root[data-theme="dark"] .stk-layer-feature .stk-chip { background: rgba(var(--accent-bright-rgb), 0.12); border-color: rgba(var(--accent-bright-rgb), 0.45); color: var(--teal-bright); } /* Aside cross-cutting */ .stk-aside { padding: 0 0 0 28px; border-left: 2px solid var(--teal); position: sticky; top: 110px; } .stk-aside-lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin-bottom: 14px; } .stk-aside-text { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--ink-soft); font-style: italic; font-variation-settings: 'opsz' 96; } @media (max-width: 980px) { .stk-board { grid-template-columns: 1fr; gap: 40px; } .stk-aside { position: relative; top: auto; } .stk-layer { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; } } /* ========================================================================== 42. TESTIMONIALS — stat-led editorial slides ========================================================================== */ .testimonials { background: var(--paper); padding: clamp(96px, 12vw, 160px) 0; border-top: 1px solid var(--hairline); } .testimonials-head { max-width: none; /* was 880px — h2's 75% must resolve against the row */ margin: 0 0 72px; } .testimonials-head .eyebrow { margin-bottom: 20px; } .testimonials-head h2 { max-width: 75%; margin-bottom: 28px; } .testimonials-head p { font-size: var(--fs-lede); line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0; } .tcaro { position: relative; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); display: flex; flex-direction: column; } .tcaro-track { position: relative; min-height: clamp(340px, 40vh, 420px); flex: 1; } .tcaro-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 3vw, 48px); margin: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .tcaro-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* LEFT column — stat-hero + author */ .tcaro-left { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .tcaro-stat { display: flex; flex-direction: column; gap: 10px; } .tcaro-stat-num { font-family: var(--font-display); font-size: clamp(80px, 11vw, 180px); font-weight: 500; line-height: 0.85; letter-spacing: -0.045em; color: var(--ink); font-variation-settings: 'opsz' 96; } .tcaro-stat-unit { color: var(--teal); font-size: 0.55em; margin-left: 4px; } .tcaro-stat-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); max-width: 22ch; } .tcaro-author { display: flex; flex-direction: column; gap: 4px; max-width: 28ch; } .tcaro-name { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.018em; color: var(--ink); } .tcaro-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } /* RIGHT column — quote */ .tcaro-right { display: flex; flex-direction: column; justify-content: center; position: relative; } .tcaro-right::before { content: '\201C'; position: absolute; top: -28px; left: -8px; font-family: var(--font-display); font-size: clamp(80px, 8vw, 120px); line-height: 1; color: var(--teal); opacity: 0.16; pointer-events: none; font-variation-settings: 'opsz' 144; font-weight: 600; } .tcaro-quote { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.4; letter-spacing: -0.014em; color: var(--ink); margin: 0; max-width: 38ch; font-variation-settings: 'opsz' 72; position: relative; z-index: 2; } .tcaro-quote em { color: var(--teal-deep); background: none; padding: 0; font-style: italic; font-weight: 500; } /* Controls — sit beneath the slide track in normal flow */ .tcaro-controls { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 3; gap: 18px; flex-wrap: wrap; padding: clamp(28px, 3vw, 40px) 0; } .tcaro-dots { display: flex; gap: 10px; align-items: center; } .tcaro-dot { width: 32px; height: 2px; background: var(--rule-strong); border: 0; cursor: pointer; padding: 0; border-radius: 1px; transition: background var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out); } .tcaro-dot.is-active { background: var(--teal); width: 64px; } .tcaro-buttons { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .tcaro-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); } .tcaro-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .tcaro-count > span { color: var(--ink); font-weight: 600; } @media (max-width: 820px) { .tcaro-slide { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 32px; } .tcaro-left { gap: 28px; } .tcaro-stat-num { font-size: clamp(72px, 18vw, 120px); } .tcaro-right::before { top: -16px; left: 0; font-size: 80px; } .tcaro-quote { max-width: none; } .tcaro-track { min-height: clamp(520px, 70vh, 640px); } } @media (max-width: 560px) { .tcaro-controls { position: relative; bottom: auto; padding-bottom: 24px; } .tcaro-track { min-height: auto; } .tcaro-slide { position: relative; inset: auto; } .tcaro-slide:not(.is-active) { display: none; } } /* ========================================================================== 43. FOOTER — editorial dark closing ========================================================================== */ .footer { position: relative; background: var(--ink); color: var(--paper); padding: 60px 0; overflow: hidden; isolation: isolate; } .footer-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(250,250,247,0.05) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6; } .footer-bg::after { content: ''; position: absolute; top: -200px; left: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),0.10) 0%, transparent 70%); pointer-events: none; } .footer .container { position: relative; z-index: 2; } /* ---- Top: brand identity + locations -------------------------------- */ .footer-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(250,250,247,0.14); } .footer-ident { display: flex; flex-direction: column; gap: 18px; } .footer-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; display: inline-flex; align-items: flex-start; line-height: 1.6; gap: 10px; } .footer-eyebrow::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; margin-top: calc((1.6em - 7px) / 2); background: var(--teal); } .footer-wordmark { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; color: var(--paper); margin: 0; font-variation-settings: 'opsz' 96; } .footer-wordmark em { color: var(--teal-bright); background: none; padding: 0; font-style: italic; } .footer-tagline { font-size: 15.5px; line-height: 1.55; color: rgba(250,250,247,0.7); max-width: 48ch; margin: 0; } /* Locations block */ .footer-locations { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .footer-loc-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,250,247,0.5); font-weight: 600; } .footer-locations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: right; } .footer-locations li { display: flex; flex-direction: column; gap: 2px; } .footer-locations li > span:first-child { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.018em; color: var(--paper); font-variation-settings: 'opsz' 24; } .footer-locations li > span:last-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,250,247,0.45); } /* ---- Middle: 4-col nav --------------------------------------------- */ .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(48px, 5vw, 72px) 0 clamp(48px, 5vw, 72px); border-bottom: 1px solid rgba(250,250,247,0.10); } .footer-col { display: flex; flex-direction: column; gap: 18px; } .footer-col-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; margin: 0 0 4px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col li a { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; color: rgba(250,250,247,0.75); text-decoration: none; font-variation-settings: 'opsz' 24; line-height: 1.35; display: inline-flex; align-items: baseline; gap: 6px; transition: color var(--d-fast) var(--ease-out), padding-left var(--d-fast) var(--ease-out); position: relative; } .footer-col li a:hover { color: var(--teal-bright); padding-left: 6px; } .footer-col li a > span { font-size: 0.7em; opacity: 0.55; } /* ---- Bottom: copyright bar ----------------------------------------- */ .footer-bottom { display: grid; grid-template-columns: 1fr auto; /* © left, back-to-top right (logo removed) */ gap: 24px; align-items: center; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,247,0.5); } .footer-brand { display: none !important; } /* bottom logo removed (overrides §46) */ .footer-brand-dot { width: 8px; height: 8px; background: var(--teal-bright); border-radius: 50%; } .footer-brand-name { color: var(--paper); } .footer-rights { justify-self: start; text-align: left; color: rgba(250,250,247,0.45); } .footer-totop { justify-self: end; color: rgba(250,250,247,0.5); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color var(--d-fast) var(--ease-out), gap var(--d-fast) var(--ease-out); } .footer-totop:hover { color: var(--teal-bright); gap: 14px; } @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-locations { align-items: flex-start; } .footer-locations ul { text-align: left; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 40px; } } @media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { grid-template-columns: 1fr; text-align: left; gap: 12px; } .footer-rights, .footer-totop, .footer-brand { justify-self: start; text-align: left; } } /* ========================================================================== 44. LOCK — section rhythm + CTA system (final override pass) ========================================================================== */ /* ---- 44.1 Section rhythm ------------------------------------------- */ /* Canonical section padding for all standard sections */ .journey, .why, .audiences, .process, .stack, .testimonials, .work, .faq, .cta, .pilot, .proof { padding: clamp(96px, 12vw, 160px) 0; } /* Paper-on-paper transitions: single hairline at the top */ .journey, .why, .audiences, .process, .stack, .testimonials, .work, .faq, .cta { border-top: 1px solid var(--hairline); border-bottom: 0; } /* Dark sections: bg change is the divider — no hairline */ .pilot, .proof, .footer { border-top: 0; } /* Belief is the manifesto moment — keeps its own taller padding */ .belief { padding: clamp(120px, 14vw, 200px) 0; } /* Hero keeps top-heavy padding for above-the-fold breathing room */ .hero { padding: clamp(140px, 18vh, 200px) 0 clamp(80px, 12vh, 120px); } /* Trust marquee is a transitional band, not a full section */ .trust { padding: 40px 0 !important; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } /* ---- 44.2 CTA SYSTEM — locked primary + secondary patterns -------- */ /* Canonical button — shared shape, padding, type */ .btn-classy { display: inline-flex; align-items: center; gap: 8px; padding: 16px 30px; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-transform: none; white-space: nowrap; transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .btn-classy:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; } /* PRIMARY — light context (default) */ .btn-classy-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-classy-primary:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(var(--accent-rgb), 0.42); } /* SECONDARY — light context (default) */ .btn-classy-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-classy-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(10, 10, 16, 0.32); } /* DARK CONTEXT — applies inside any dark section */ .pilot .btn-classy-primary, .proof .btn-classy-primary, .footer .btn-classy-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .pilot .btn-classy-primary:hover, .proof .btn-classy-primary:hover, .footer .btn-classy-primary:hover { background: var(--teal-bright); color: var(--ink); border-color: var(--teal-bright); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(var(--accent-bright-rgb), 0.42); } .pilot .btn-classy-ghost, .proof .btn-classy-ghost, .footer .btn-classy-ghost { background: transparent; color: var(--paper); border-color: rgba(250, 250, 247, 0.36); } .pilot .btn-classy-ghost:hover, .proof .btn-classy-ghost:hover, .footer .btn-classy-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(250, 250, 247, 0.22); } /* Nav CTA — same primary palette, smaller scale (chip in the header) */ .nav-cta { background: var(--ink); color: var(--paper); padding: 11px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 1.5px solid var(--ink); border-radius: 100px; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); } .nav-cta:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.4); } .nav-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* TERTIARY — inline text-link CTA (mono caps + arrow + underline). .cap-cta removed: it now carries .btn-classy.btn-classy-ghost in the markup, matching about.html's "Jump to section" pill. This block's border-bottom + padding-bottom + uppercase were overriding that (same specificity, later). */ .btn-link { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--ink); text-decoration: none; transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), gap var(--d-fast) var(--ease-out); } .btn-link:hover { color: var(--teal); border-color: var(--teal); gap: 12px; transform: none; } .btn-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; } /* Tertiary on dark surfaces */ .pilot .btn-link, .proof .btn-link, .footer .btn-link { color: var(--paper); border-color: var(--paper); } .pilot .btn-link:hover, .proof .btn-link:hover, .footer .btn-link:hover { color: var(--teal-bright); border-color: var(--teal-bright); } /* ========================================================================== 45. RESPONSIVE LOCK — tablet + mobile pass (final override) ========================================================================== */ /* ============== TABLET — ≤ 1024px ============== */ @media (max-width: 1024px) { /* gutter stays at 10% across all breakpoints */ /* Section padding scales down */ .journey, .why, .audiences, .process, .stack, .testimonials, .work, .faq, .cta, .pilot, .proof { padding: clamp(72px, 9vw, 120px) 0; } .belief { padding: clamp(96px, 11vw, 160px) 0; } .hero { padding: clamp(120px, 14vh, 160px) 0 clamp(64px, 10vh, 96px); } /* Section header bottom margins */ .stack-head, .testimonials-head, .work-head, .faq-head, .cta-head, .pilot-head, .proof-head, .audiences-head, .why-head { margin-bottom: clamp(48px, 6vw, 72px); } /* Hero h1 — keep aggressive but not overflowing */ .hero-h1 { font-size: clamp(48px, 9vw, 96px); margin-bottom: 28px; } .hero-promise { font-size: 16.5px; margin-bottom: 32px; } /* Trust marquee tighter */ .trust { padding: 40px 0 !important; } /* CTA email — softer scale on tablet */ .cta-email-addr { font-size: clamp(34px, 5.6vw, 60px); } /* Pilot title head — already responsive via clamp */ } /* ============== MOBILE TABLET BORDER — ≤ 768px ============== */ @media (max-width: 768px) { /* Section padding compacts further */ .journey, .why, .audiences, .process, .stack, .testimonials, .work, .faq, .cta, .pilot, .proof { padding: clamp(56px, 9vw, 88px) 0; } .belief { padding: clamp(72px, 11vw, 120px) 0; } .hero { padding: clamp(96px, 16vh, 120px) 0 clamp(48px, 8vh, 72px); } /* Header bottom margins compress */ .stack-head, .testimonials-head, .work-head, .faq-head, .cta-head, .pilot-head, .proof-head, .audiences-head, .why-head { margin-bottom: clamp(36px, 6vw, 56px); } /* H1 scales down further */ .hero-h1 { font-size: clamp(40px, 11vw, 64px); line-height: 0.96; margin-bottom: 24px; } .hero-promise { font-size: 15.5px; line-height: 1.5; margin-bottom: 26px; } /* All section H2s tighten */ h2 { font-size: clamp(32px, 7.5vw, 52px); line-height: 1.04; } /* Eyebrow tighter spacing */ .stack-head .eyebrow, .testimonials-head .eyebrow, .work-head .eyebrow, .faq-head .eyebrow, .cta-head .eyebrow, .pilot-head .eyebrow, .proof-head .eyebrow, .audiences-head .eyebrow, .why-head .eyebrow { margin-bottom: 16px; } /* H2 + p margin tightens */ .stack-head h2, .testimonials-head h2, .work-head h2, .faq-head h2, .cta-head h2, .pilot-head h2, .proof-head h2 { margin-bottom: 22px; } /* Lede paragraph */ .stack-head p, .testimonials-head p, .work-head p, .faq-head p, .cta-head p, .pilot-head p, .proof-head p { font-size: 16px; } /* CTA buttons — full-width EVERYWHERE on mobile. .btn-classy is the design-system button; all 488 uses, and every sN-btn variant (s5-btn, s27-btn-white, s25-btn, s26-btn-full, s29-submit-btn…), carry it. Deliberately excluded: .s14-accordion-btn, .cap-row, .tcaro-btn, .tcaro-dot, .theme-toggle, .nav-burger —