/* ============================================================ GLOBAL — Reset, base, shared components, homepage sections. Depends on tokens.css (loaded first in ). ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-base); line-height: var(--lh-body); color: var(--dark-ink); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---- Skip link ---- */ .skip-link { position: absolute; top: -100px; left: var(--sp-4); background: var(--black); color: var(--white); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); font-size: var(--text-sm); z-index: 1000; transition: top var(--dur-fast) ease; } .skip-link:focus { top: var(--sp-4); } /* ---- Layout ---- */ .container { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-left: var(--px); padding-right: var(--px); } .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .section--light { background: var(--white); } .section--tint { background: var(--bg-green); } .section--dark { background: var(--black); color: var(--white); } /* ---- Section label (the quiet "premium tell") ---- */ .label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-8); } .section--dark .label, .section--dark .label-h2 { color: var(--sage); } /* h2 styled as a label (for sections whose label IS the heading) */ .label-h2 { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-12); display: inline-block; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-regular); line-height: var(--lh-heading); color: var(--dark-ink); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); } .h-display { font-size: var(--text-5xl); font-weight: var(--weight-light); line-height: var(--lh-tight); letter-spacing: -0.01em; } .h-xl { font-size: var(--text-4xl); font-weight: var(--weight-light); line-height: var(--lh-snug); letter-spacing: -0.005em; } .h-lg { font-size: var(--text-3xl); font-weight: var(--weight-light); line-height: var(--lh-snug); } .h-md { font-size: var(--text-2xl); font-weight: var(--weight-light); line-height: var(--lh-heading); } .h-sm { font-size: var(--text-xl); font-weight: var(--weight-regular); line-height: var(--lh-heading); } /* ---- Body text variants ---- */ .lede { font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); max-width: 38em; } .section--dark .lede { color: var(--sage); } .body { font-size: var(--text-base); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); max-width: 38em; } .section--dark .body { color: var(--sage); } .caption { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); } .section--dark .caption { color: var(--sage); } /* ---- Inline accent link with arrow ---- */ .link-arrow { color: var(--accent); font-weight: var(--weight-regular); border-bottom: 1px solid transparent; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .link-arrow:hover { color: var(--accent-mid); border-bottom-color: currentColor; } .section--dark .link-arrow { color: var(--accent-light); } .section--dark .link-arrow:hover { color: var(--sage); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.9rem 1.875rem; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: 1; letter-spacing: var(--ls-wide); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .btn-primary { background: var(--black); color: var(--white); } .btn-primary:hover { background: var(--gray-800); } .btn-ghost { background: transparent; color: var(--gray-500); padding-left: 0; padding-right: 0; border-color: transparent; } .btn-ghost::after { content: '→'; display: inline-block; transition: transform var(--dur-fast) ease; font-size: 1.05em; line-height: 1; } .btn-ghost:hover { color: var(--dark-ink); } .btn-ghost:hover::after { transform: translateX(4px); } .section--dark .btn-ghost { color: var(--sage); } .section--dark .btn-ghost:hover { color: var(--white); } .btn-submit { background: var(--white); color: var(--black); padding: 1rem 2.25rem; } .btn-submit:hover { background: var(--gray-100); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .btn-group { display: inline-flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } /* ---- Stat / metric ---- */ .stat-value { font-size: var(--text-3xl); font-weight: var(--weight-light); color: var(--accent); line-height: 1; letter-spacing: -0.01em; } .stat-label { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); margin-top: var(--sp-3); line-height: var(--lh-snug); } .section--dark .stat-value { color: var(--accent-light); } .section--dark .stat-label { color: var(--sage); } /* ---- Card ---- */ .card { background: var(--white); border-radius: var(--r-card); padding: var(--sp-10) var(--sp-8); } .card-tint { background: var(--bg-green); } /* ---- Chip / credential tag ---- */ .chip { display: inline-block; padding: 0.5rem 1rem; background: var(--bg-green); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-800); line-height: 1.4; } .chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ---- Pull quote ---- */ .pull-quote-text { font-size: var(--text-xl); font-weight: var(--weight-light); line-height: var(--lh-relaxed); color: var(--dark-ink); font-style: italic; } .pull-quote-attr { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); font-style: normal; color: var(--gray-500); margin-top: var(--sp-6); } /* ---- Editorial annotations (provisional copy markers) ---- */ .note-mock, .note-confirm { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-light); font-style: italic; color: var(--gray-300); letter-spacing: var(--ls-wide); line-height: var(--lh-snug); } .section--dark .note-mock, .section--dark .note-confirm { color: rgba(168, 197, 181, 0.5); } /* ---- Asset placeholder ---- */ .placeholder { background: var(--bg-green); border: 1px dashed var(--gray-300); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6); color: var(--gray-500); font-size: var(--text-xs); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--weight-light); line-height: var(--lh-snug); } .placeholder-headshot { aspect-ratio: 4 / 5; width: 100%; max-width: 320px; } .placeholder small { display: block; margin-top: var(--sp-2); font-size: 0.95em; opacity: 0.7; letter-spacing: var(--ls-wide); text-transform: none; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .nav--scrolled { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--gray-100); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); } .nav-logo { display: inline-flex; align-items: center; } .nav-logo img { height: 26px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--sp-8); } .nav-links a { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--dark-ink); transition: color var(--dur-fast) ease; } .nav-links a:hover { color: var(--accent); } .nav-cta { margin-left: var(--sp-4); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; padding: 0; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--dark-ink); transform-origin: center; transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; } .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .nav-mobile { display: none; position: fixed; inset: 0; background: var(--white); z-index: 99; flex-direction: column; padding: calc(var(--nav-h) + var(--sp-6)) var(--px) var(--sp-8); } .nav-mobile.is-open { display: flex; } .nav-mobile-links { flex: 1; display: flex; flex-direction: column; border-top: 1px solid var(--gray-100); } .nav-mobile-links li { border-bottom: 1px solid var(--gray-100); } .nav-mobile-links a { display: block; padding: var(--sp-5) 0; font-size: var(--text-xl); font-weight: var(--weight-light); color: var(--dark-ink); } .nav-mobile-cta { padding-top: var(--sp-8); margin-top: auto; } .nav-mobile-cta .btn { width: 100%; justify-content: center; padding: var(--sp-5) var(--sp-6); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--black); padding: var(--sp-12) 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-6); max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); } .footer-logo img { height: 22px; width: auto; } .footer-right { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; } .footer-link { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--sage); transition: color var(--dur-fast) ease; } .footer-link:hover { color: var(--white); } .footer-copy { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-300); } /* ============================================================ FORM — light by default, .section--dark overrides at the end ============================================================ */ .form { width: 100%; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-field { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); } .form-label { font-size: var(--text-xs); font-weight: var(--weight-light); color: var(--gray-500); text-transform: uppercase; letter-spacing: var(--ls-label); } .form-input, .form-textarea { width: 100%; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-light); color: var(--dark-ink); background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); padding: 0.9rem 1.125rem; line-height: 1.5; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; } .form-input::placeholder, .form-textarea::placeholder { color: var(--gray-300); font-weight: var(--weight-light); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent); } .form-textarea { resize: vertical; min-height: 140px; } .form-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .form-submit-row { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--sp-6); } .form-success { padding: var(--sp-10) 0; } .form-success-title { font-size: var(--text-xl); font-weight: var(--weight-light); color: var(--dark-ink); margin-bottom: var(--sp-3); } .form-success-body { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-500); } .form-error { font-size: var(--text-sm); font-weight: var(--weight-light); color: #b04444; margin-top: var(--sp-3); } /* Dark-section overrides */ .section--dark .form-label { color: var(--sage); } .section--dark .form-input, .section--dark .form-textarea { color: var(--white); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); } .section--dark .form-input::placeholder, .section--dark .form-textarea::placeholder { color: rgba(255, 255, 255, 0.3); } .section--dark .form-input:focus, .section--dark .form-textarea:focus { border-color: var(--sage); background: rgba(255, 255, 255, 0.07); } .section--dark .form-success-title { color: var(--white); } .section--dark .form-success-body { color: var(--sage); } .section--dark .form-error { color: #e0a8a8; } /* ============================================================ MOTION — slow fade + translateY, ~0.5s, no bounce ============================================================ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-in, .fade-in.visible { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn, .btn-ghost::after, .nav-hamburger span, .form-input, .form-textarea { transition: none; } } /* ============================================================ HOMEPAGE — section-specific styles ============================================================ */ /* ---- Hero ---- */ .hero { background: var(--bg-green); padding-top: var(--hero-pt); padding-bottom: var(--section-py); } .hero-head { max-width: 22ch; margin-bottom: var(--sp-8); } .hero-lede { max-width: 40em; margin-bottom: var(--sp-10); } .hero-actions { margin-bottom: var(--sp-10); } .hero-trust { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); margin-bottom: var(--sp-16); } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); max-width: 880px; padding-top: var(--sp-10); border-top: 1px solid rgba(110, 110, 106, 0.18); } .hero-stats .stat-value { font-size: var(--text-2xl); } .hero-stat-caption { grid-column: 1 / -1; margin-top: var(--sp-6); font-size: var(--text-xs); font-weight: var(--weight-light); color: var(--gray-500); letter-spacing: var(--ls-wide); font-style: italic; } /* ---- Problem ---- */ .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .problem-card { background: var(--bg-green); padding: var(--sp-10) var(--sp-8); border-radius: var(--r-card); } .problem-card-title { font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--lh-heading); margin-bottom: var(--sp-4); color: var(--dark-ink); } .problem-card-body { font-size: var(--text-base); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); } /* ---- Proof ---- */ .proof-head { max-width: 22ch; margin-bottom: var(--sp-8); } .proof-body { margin-bottom: var(--sp-16); } .proof-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); padding: var(--sp-10) 0; border-top: 1px solid rgba(110, 110, 106, 0.18); border-bottom: 1px solid rgba(110, 110, 106, 0.18); margin-bottom: var(--sp-16); } .proof-metrics .stat-value { font-size: var(--text-2xl); } .proof-quote { max-width: 680px; margin: 0 0 var(--sp-12); } .proof-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: center; } /* ---- How It Works ---- */ .process-head { max-width: 28ch; margin-bottom: var(--sp-16); } .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); } .process-step-num { display: block; font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-5); } .process-step-title { font-size: var(--text-xl); font-weight: var(--weight-regular); margin-bottom: var(--sp-4); color: var(--dark-ink); line-height: var(--lh-heading); } .process-step-body { font-size: var(--text-base); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); } /* ---- What We Build ---- */ .build-head { max-width: 22ch; margin-bottom: var(--sp-6); } .build-intro { margin-bottom: var(--sp-12); } .build-table { width: 100%; } .build-row-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(110, 110, 106, 0.18); } .build-col-label { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); } .build-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding: var(--sp-6) 0; border-bottom: 1px solid rgba(110, 110, 106, 0.18); } .build-say { font-size: var(--text-md); font-weight: var(--weight-light); font-style: italic; color: var(--dark-ink); line-height: var(--lh-body); } .build-response { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-500); line-height: var(--lh-body); } .build-footer { margin-top: var(--sp-12); font-size: var(--text-md); font-weight: var(--weight-light); color: var(--gray-500); } /* ---- Credibility ---- */ .cred-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-16); align-items: start; } .cred-head { max-width: 22ch; margin-bottom: var(--sp-8); } .cred-body { margin-bottom: var(--sp-8); } .cred-chips { margin-bottom: var(--sp-10); } .cred-chips .chip { background: var(--bg-green); color: var(--dark-ink); } .cred-links { display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: center; } .cred-photo { position: sticky; top: calc(var(--nav-h) + var(--sp-8)); } /* ---- Built Different (BLACK) ---- */ .diff-head { max-width: 16ch; margin-bottom: var(--sp-8); } .diff-body { max-width: 40em; margin-bottom: var(--sp-16); } .diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid rgba(168, 197, 181, 0.18); } .diff-item { display: flex; align-items: flex-start; gap: var(--sp-4); font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--lh-heading); color: var(--white); } .diff-mark { flex: 0 0 1.25em; font-size: 1em; line-height: var(--lh-heading); font-weight: var(--weight-regular); color: var(--sage); } .diff-mark--neg { color: var(--gray-300); } /* ---- Investment ---- */ .invest-head { max-width: 22ch; margin-bottom: var(--sp-6); } .invest-lede { margin-bottom: var(--sp-5); } .invest-body { margin-bottom: var(--sp-16); } .invest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-12); } .invest-card { background: var(--bg-green); border-radius: var(--r-card); padding: var(--sp-10) var(--sp-8); display: flex; flex-direction: column; } .invest-card-price { font-size: var(--text-2xl); font-weight: var(--weight-light); color: var(--accent); line-height: 1.15; margin-bottom: var(--sp-3); letter-spacing: -0.01em; } .invest-card-confirm { display: block; font-size: var(--text-xs); font-weight: var(--weight-light); font-style: italic; color: var(--gray-300); margin-bottom: var(--sp-6); letter-spacing: var(--ls-wide); line-height: var(--lh-snug); } .invest-card-body { font-size: var(--text-base); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); } .invest-card-note { display: inline; font-size: var(--text-sm); font-style: italic; color: var(--gray-300); } .invest-footer { font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--lh-body); color: var(--gray-500); max-width: 40em; } /* ---- Contact (BLACK) ---- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-16); align-items: start; } .contact-head { margin-bottom: var(--sp-8); } .contact-body { margin-bottom: var(--sp-12); } .contact-details { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid rgba(168, 197, 181, 0.18); } .contact-details dt { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sage); margin-bottom: var(--sp-2); } .contact-details dd { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--white); margin-bottom: var(--sp-6); line-height: var(--lh-body); } .contact-details dd:last-child { margin-bottom: 0; } .contact-details a { color: var(--accent-light); border-bottom: 1px solid currentColor; transition: color var(--dur-fast) ease; } .contact-details a:hover { color: var(--white); } .form-footer { margin-top: var(--sp-6); font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); line-height: var(--lh-body); } .section--dark .form-footer { color: var(--sage); } .section--dark .form-footer .note-confirm { color: rgba(168, 197, 181, 0.5); } /* ============================================================ RESPONSIVE — mobile equal priority, breakpoint 768px ============================================================ */ @media (max-width: 768px) { /* Section padding */ .section, .hero { padding-top: var(--section-py-mobile); padding-bottom: var(--section-py-mobile); } .hero { padding-top: 100px; } /* Heading scale */ .h-display { font-size: var(--text-3xl); } .h-xl { font-size: var(--text-2xl); } .h-lg { font-size: var(--text-2xl); } .h-md { font-size: var(--text-xl); } /* Nav */ .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } /* Hero */ .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); margin-bottom: var(--sp-12); } .hero-actions .btn { width: 100%; justify-content: center; } .hero-actions .btn-ghost { padding: 0.9rem 1.875rem; } .hero-trust { margin-bottom: var(--sp-12); } .hero-stats { grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-8); } .hero-stats .stat-value { font-size: var(--text-xl); } /* Problem */ .problem-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .problem-card { padding: var(--sp-8) var(--sp-6); } /* Proof */ .proof-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-6); padding: var(--sp-8) 0; } .proof-metrics .stat-value { font-size: var(--text-xl); } .proof-actions { flex-direction: column; align-items: stretch; gap: var(--sp-4); } .proof-actions .btn-primary { width: 100%; justify-content: center; } /* How It Works */ .process-steps { grid-template-columns: 1fr; gap: var(--sp-10); } /* What We Build — table to cards */ .build-row-head { display: none; } .build-row { display: block; background: var(--white); border: none; border-radius: var(--r-card); padding: var(--sp-6); margin-bottom: var(--sp-3); } .build-row:last-of-type { margin-bottom: 0; } .build-say { display: block; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--gray-100); } /* Credibility */ .cred-grid { grid-template-columns: 1fr; gap: var(--sp-10); } .cred-photo { position: static; order: -1; max-width: 240px; } /* Built Different */ .diff-grid { grid-template-columns: 1fr; gap: var(--sp-5); } /* Investment */ .invest-grid { grid-template-columns: 1fr; } /* Contact */ .contact-grid { grid-template-columns: 1fr; gap: var(--sp-10); } .form-grid-2 { grid-template-columns: 1fr; } .form-submit-row { justify-content: stretch; } .form-submit-row .btn { width: 100%; justify-content: center; } /* Footer */ .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-8); } } /* ============================================================ ADDITIONAL UTILITIES ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container--narrow { max-width: 760px; } /* Active nav link */ .nav-links a[aria-current="page"], .nav-mobile-links a[aria-current="page"] { color: var(--accent); } /* Shared callout (Audit phase, Case Study 02) */ .callout { border-left: 2px solid var(--accent); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-8); font-size: var(--text-md); font-weight: var(--weight-light); color: var(--gray-800); line-height: var(--lh-body); } .section--light .callout { background: var(--bg-green); } .section--tint .callout { background: var(--white); } /* Hero subtext (Demo) */ .hero-subtext { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); letter-spacing: var(--ls-wide); margin-top: var(--sp-6); } .hero-subtext em { font-style: italic; } /* ============================================================ SERVICES — Three phases timeline ============================================================ */ .phases-head { max-width: 22ch; margin-bottom: var(--sp-6); } .phases-intro { margin-bottom: var(--sp-16); } .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); padding-top: var(--sp-10); border-top: 1px solid var(--gray-100); } .timeline-marker { display: block; font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-5); } .timeline-title { font-size: var(--text-xl); font-weight: var(--weight-regular); margin-bottom: var(--sp-3); color: var(--dark-ink); line-height: var(--lh-heading); } .timeline-duration { font-size: var(--text-sm); font-weight: var(--weight-light); color: var(--gray-500); } /* ---- Services — Phase sections ---- */ .phase-head { max-width: 22ch; margin-bottom: var(--sp-8); } .phase-body { max-width: 38em; margin-bottom: var(--sp-16); } .phase-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: start; } .phase-subhead { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-6); } .phase-list { display: flex; flex-direction: column; gap: var(--sp-4); } .phase-list li { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--dark-ink); line-height: var(--lh-body); padding-left: var(--sp-6); position: relative; } .phase-list li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 14px; height: 1px; background: var(--accent); } .phase-list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-10); margin-bottom: var(--sp-12); } .phase-pricing { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--gray-500); margin-top: var(--sp-12); max-width: 38em; line-height: var(--lh-body); } /* ---- Services — Tier cards ---- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-12); } .tier-card { background: var(--white); border-radius: var(--r-card); padding: var(--sp-10) var(--sp-8); border: 1px solid var(--gray-100); display: flex; flex-direction: column; } .tier-card--featured { border-color: var(--accent); } .tier-label { font-size: var(--text-xl); font-weight: var(--weight-regular); color: var(--dark-ink); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .tier-marker { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); padding: 0.25rem 0.625rem; border: 1px solid var(--accent); border-radius: var(--r-pill); line-height: 1; } .tier-price { font-size: var(--text-lg); font-weight: var(--weight-light); color: var(--accent); margin-bottom: var(--sp-2); line-height: var(--lh-snug); } .tier-price .note-confirm { display: block; margin-top: var(--sp-2); color: var(--gray-300); } .tier-body { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-500); line-height: var(--lh-body); margin-top: var(--sp-3); } .lanes { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--gray-500); line-height: var(--lh-body); max-width: 50em; } /* ---- Services — How we price ---- */ .pricing-head { max-width: 22ch; margin-bottom: var(--sp-6); } .pricing-body { margin-bottom: var(--sp-16); } .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } .fact { padding-top: var(--sp-6); border-top: 1px solid var(--accent); } .fact-text { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--dark-ink); line-height: var(--lh-body); } /* ---- Shared narrow CTA section ---- */ .cta-narrow { max-width: 760px; } .cta-head { margin-bottom: var(--sp-6); } .cta-body { margin-bottom: var(--sp-10); } /* ============================================================ OUR WORK ============================================================ */ .work-frame { margin-bottom: var(--sp-10); max-width: 48em; } .work-logo { margin-top: var(--sp-8); max-width: 240px; } .work-logo .placeholder { aspect-ratio: 3 / 1; width: 100%; } .case-tag { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-wide); color: var(--gray-500); margin-bottom: var(--sp-6); line-height: var(--lh-body); } .case-head { max-width: 22ch; margin-bottom: var(--sp-12); } .case-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); margin-bottom: var(--sp-16); } .case-sub { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-4); } .case-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); padding: var(--sp-10) 0; border-top: 1px solid rgba(110, 110, 106, 0.18); border-bottom: 1px solid rgba(110, 110, 106, 0.18); } .case-metrics .stat-value { font-size: var(--text-2xl); } .case-cta { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--gray-500); margin-top: var(--sp-10); } /* ---- Our Work — Before / After table ---- */ .ba-wrap { margin-top: var(--sp-12); } .ba-row-head { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(110, 110, 106, 0.18); } .ba-col-label { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); } .ba-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid rgba(110, 110, 106, 0.18); } .ba-metric { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--dark-ink); } .ba-before { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-500); font-style: italic; } .ba-after { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--dark-ink); } .case-callout-wrap { margin-top: var(--sp-10); } /* ---- Our Work — Standalone testimonial ---- */ .testimonial-section .pull-quote-wrap { max-width: 760px; } .testimonial-section .pull-quote-text { font-size: var(--text-2xl); line-height: var(--lh-snug); } /* ---- Our Work — Background + CTA (black) ---- */ .bg-head { max-width: 22ch; margin-bottom: var(--sp-8); } .bg-body { max-width: 40em; margin-bottom: var(--sp-12); } .creds { margin-bottom: var(--sp-16); } .cred-point { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); padding: var(--sp-5) 0; border-top: 1px solid rgba(168, 197, 181, 0.18); } .cred-point:last-child { border-bottom: 1px solid rgba(168, 197, 181, 0.18); } .cred-point-title { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sage); line-height: var(--lh-heading); } .cred-point-body { font-size: var(--text-md); font-weight: var(--weight-light); color: var(--white); line-height: var(--lh-body); } .bg-headshot { max-width: 240px; margin-bottom: var(--sp-8); } .bg-headshot .placeholder { background: rgba(168, 197, 181, 0.04); border-color: rgba(168, 197, 181, 0.3); color: var(--sage); } .bg-links { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-20); } .bg-ask { padding-top: var(--sp-12); border-top: 1px solid rgba(168, 197, 181, 0.18); } .bg-ask-head { font-size: var(--text-2xl); font-weight: var(--weight-light); margin-bottom: var(--sp-5); color: var(--white); max-width: 24ch; line-height: var(--lh-heading); } .bg-ask-body { max-width: 38em; margin-bottom: var(--sp-10); } .bg-ask-actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; } /* ============================================================ DEMO ============================================================ */ .demo-section { text-align: center; } .browser-frame { margin: 0 auto var(--sp-8); max-width: 960px; border-radius: var(--r-card); border: 1px solid var(--gray-100); background: var(--white); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .browser-bar { display: flex; align-items: center; justify-content: center; padding: var(--sp-3) var(--sp-5); background: var(--gray-50); border-bottom: 1px solid var(--gray-100); } .browser-url { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-wide); color: var(--gray-500); padding: 0.25rem 0.875rem; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-pill); } .browser-viewport { padding: 0; background: var(--white); } .placeholder-demo { aspect-ratio: 16 / 10; border: none; border-radius: 0; background: var(--bg-green); min-height: 440px; padding: var(--sp-8); } .demo-note { font-size: var(--text-sm); font-weight: var(--weight-light); font-style: italic; color: var(--gray-500); margin-bottom: var(--sp-8); display: none; } .demo-cta { margin-bottom: var(--sp-20); } .try-list { text-align: left; max-width: 760px; margin: 0 auto; } .try-label { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-6); display: block; } .try-items { display: flex; flex-direction: column; gap: var(--sp-3); counter-reset: try; } .try-items li { display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-md); font-size: var(--text-base); font-weight: var(--weight-light); color: var(--dark-ink); line-height: var(--lh-body); counter-increment: try; } .try-items li::before { content: counter(try, decimal-leading-zero); font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); color: var(--accent); min-width: 2.5em; text-transform: uppercase; } .try-items li em { font-style: italic; color: var(--gray-500); } .solved-head { max-width: 22ch; margin-bottom: var(--sp-6); } .solved-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); padding: var(--sp-10) 0; border-top: 1px solid rgba(110, 110, 106, 0.18); border-bottom: 1px solid rgba(110, 110, 106, 0.18); margin: var(--sp-12) 0 var(--sp-16); max-width: 880px; } .solved-metrics .stat-value { font-size: var(--text-2xl); } .solved-quote { max-width: 720px; } /* ============================================================ CONTACT PAGE (light) ============================================================ */ .contact-page { background: var(--bg-green); padding-top: var(--hero-pt); padding-bottom: var(--section-py); } .contact-lede { max-width: 38em; margin-bottom: var(--sp-16); } .contact-grid-light { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-16); align-items: start; } .contact-reassure h2, .contact-reassure h3 { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-4); } .contact-reassure p { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-800); line-height: var(--lh-body); } .contact-details-light { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--gray-300); } .contact-details-light dt { font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); margin-bottom: var(--sp-2); } .contact-details-light dd { font-size: var(--text-base); font-weight: var(--weight-light); color: var(--dark-ink); margin-bottom: var(--sp-6); line-height: var(--lh-body); } .contact-details-light dd:last-child { margin-bottom: 0; } .contact-details-light a { color: var(--accent); border-bottom: 1px solid currentColor; transition: color var(--dur-fast) ease; } .contact-details-light a:hover { color: var(--accent-mid); } /* ============================================================ PRIVACY (prose) ============================================================ */ .prose { max-width: 38em; font-size: var(--text-base); font-weight: var(--weight-light); color: var(--gray-800); line-height: var(--lh-body); } .prose h2 { font-size: var(--text-xl); font-weight: var(--weight-regular); color: var(--dark-ink); margin-top: var(--sp-16); margin-bottom: var(--sp-4); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--dark-ink); margin-top: var(--sp-10); margin-bottom: var(--sp-3); } .prose p { margin-bottom: var(--sp-5); } .prose ul { list-style: disc; padding-left: var(--sp-6); margin-bottom: var(--sp-5); } .prose ul li { margin-bottom: var(--sp-2); } .prose a { color: var(--accent); border-bottom: 1px solid currentColor; transition: color var(--dur-fast) ease; } .prose a:hover { color: var(--accent-mid); } /* ============================================================ 404 ============================================================ */ .error-section { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding-top: var(--hero-pt); padding-bottom: var(--section-py); background: var(--bg-green); } .error-section .label { color: var(--gray-500); font-size: var(--text-sm); } .error-head { margin-bottom: var(--sp-6); } .error-body { margin-bottom: var(--sp-10); max-width: 38em; } .error-actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; } /* ============================================================ RESPONSIVE — additional pages ============================================================ */ @media (max-width: 768px) { /* Services */ .timeline { grid-template-columns: 1fr; gap: var(--sp-8); padding-top: var(--sp-6); } .phase-grid { grid-template-columns: 1fr; gap: var(--sp-8); } .phase-list--cols { grid-template-columns: 1fr; } .tiers { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; gap: var(--sp-6); } /* Our Work */ .case-body-grid { grid-template-columns: 1fr; gap: var(--sp-8); } .case-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); padding: var(--sp-8) 0; } .case-metrics .stat-value { font-size: var(--text-xl); } /* Before/After → cards on mobile */ .ba-row-head { display: none; } .ba-row { display: block; background: var(--white); border: none; border-radius: var(--r-card); padding: var(--sp-6); margin-bottom: var(--sp-3); } .ba-row:last-of-type { margin-bottom: 0; } .ba-metric { display: block; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--gray-100); } .ba-before, .ba-after { display: block; padding-left: 4.5em; position: relative; margin-bottom: var(--sp-2); } .ba-before::before, .ba-after::before { position: absolute; left: 0; font-size: var(--text-xs); font-weight: var(--weight-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-500); top: 0.25em; } .ba-before::before { content: 'Before'; } .ba-after::before { content: 'After'; color: var(--accent); } .cred-point { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-6) 0; } .bg-ask-actions { flex-direction: column; align-items: stretch; } .bg-ask-actions .btn { width: 100%; justify-content: center; } /* Demo */ .browser-frame { margin-bottom: var(--sp-6); } .placeholder-demo { min-height: 220px; padding: var(--sp-4); } .demo-note { display: block; } .demo-cta { margin-bottom: var(--sp-12); } .solved-metrics { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-8) 0; } .solved-metrics .stat-value { font-size: var(--text-xl); } /* Contact light */ .contact-page { padding-top: 100px; } .contact-grid-light { grid-template-columns: 1fr; gap: var(--sp-10); } .contact-left { order: 2; } .contact-right { order: 1; } /* 404 */ .error-actions { flex-direction: column; align-items: stretch; } .error-actions .btn { width: 100%; justify-content: center; } }