/* ========================================================= The Motorcar Office — marketing site ========================================================= */ :root { --bg-deep: #0a0807; --bg-card: #14110e; --bg-elev: #1a1612; --bg-card-hover: #1f1a15; --line: #2a241e; --line-strong: #3a322a; --text: #ece4d6; --text-soft: #b8aea0; --text-dim: #807868; --brass: #c8a05a; --brass-soft: rgba(200, 160, 90, 0.08); --emerald: #7aa67a; --crimson: #a04848; --serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Inter', -apple-system, system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--bg-deep); color: var(--text); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--brass); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--text); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--text); letter-spacing: 0.005em; margin: 0 0 16px; } /* Intro splash overlay — session-scoped, injected by inline script in . Black full-viewport backdrop, white SVG logo centered. Timing: 1s fade in, 1s hold, 1s fade out (3s total). JS removes DOM at end. Click to skip. */ #intro-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; animation: intro-backdrop 3s ease-in-out forwards; } .intro-logo { width: min(560px, 88vw); height: auto; opacity: 0; animation: intro-logo-fade 3s ease-in-out forwards; } html.intro-active, html.intro-active body { overflow: hidden; } @keyframes intro-backdrop { /* Backdrop stays fully black for the first 2s (fade in + hold), then dissolves alongside the logo over the final 1s. */ 0%, 66% { opacity: 1; } 100% { opacity: 0; } } @keyframes intro-logo-fade { /* 0-33% (0-1s): fade in · 33-66% (1-2s): hold · 66-100% (2-3s): fade out */ 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } } h1 { font-size: 3.6rem; line-height: 1.1; } h2 { font-size: 2.4rem; line-height: 1.15; } h3 { font-size: 1.5rem; line-height: 1.25; } h4 { font-size: 1.1rem; line-height: 1.3; } p { margin: 0 0 18px; } .shell { max-width: 1120px; margin: 0 auto; padding: 0 32px; } .eyebrow { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); font-weight: 500; margin-bottom: 14px; display: inline-block; } .muted { color: var(--text-soft); } .dim { color: var(--text-dim); } /* ---------- Top nav ---------- */ .topnav { position: sticky; top: 0; z-index: 50; background: rgba(10, 8, 7, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 18px 0; } .topnav-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 32px; } .brand { font-family: var(--serif); font-size: 1.3rem; color: var(--text); letter-spacing: 0.02em; } .brand .brand-emph { color: var(--brass); } .nav-links { display: flex; gap: 26px; align-items: center; } .nav-links a { color: var(--text); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; } .nav-links a:hover { color: var(--brass); } .nav-links .nav-cta { border: 1px solid var(--brass); padding: 9px 18px; color: var(--brass); } .nav-links .nav-cta:hover { background: var(--brass); color: var(--bg-deep); } /* ---------- Mobile nav toggle (hamburger) ---------- */ .nav-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle-line { display: block; width: 24px; height: 1.5px; background: var(--brass); transition: transform 0.3s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------- Mobile drawer ---------- */ .mobile-drawer { position: fixed; inset: 0; background: rgba(10, 8, 7, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 45; /* just below topnav 50 so the close button stays visible */ padding: 92px 24px 40px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .mobile-drawer.open { opacity: 1; visibility: visible; } .mobile-drawer-inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; } .mobile-drawer a { color: var(--text); font-family: var(--serif); font-size: 1.7rem; padding: 22px 4px; border-bottom: 1px solid var(--line); letter-spacing: 0.005em; text-decoration: none; display: block; } .mobile-drawer a:hover, .mobile-drawer a:focus { color: var(--brass); } .mobile-drawer .mobile-cta { color: var(--brass); border-bottom: 1px solid var(--brass); margin-top: 12px; } body.drawer-open { overflow: hidden; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 32px; border: 1px solid var(--brass); background: transparent; color: var(--brass); cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .btn:hover { background: var(--brass); color: var(--bg-deep); } .btn-solid { background: var(--brass); color: var(--bg-deep); } .btn-solid:hover { background: transparent; color: var(--brass); } .btn-ghost { border-color: var(--line-strong); color: var(--text-soft); } .btn-ghost:hover { border-color: var(--brass); color: var(--brass); background: transparent; } /* ---------- Section base ---------- */ .section { padding: 110px 0; position: relative; overflow: hidden; } .section + .section { border-top: 1px solid var(--line); } .section-head { text-align: center; margin-bottom: 84px; max-width: 720px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .section .shell { position: relative; z-index: 1; } /* ---------- Ornamental dividers (between sections) ---------- */ .section-divider { display: flex; align-items: center; justify-content: center; padding: 36px 0; background: var(--bg-deep); position: relative; z-index: 2; } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); max-width: 240px; } .section-divider .glyph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 18px; margin: 0 22px; color: var(--brass); opacity: 0.85; } .section-divider .glyph svg { width: 100%; height: 100%; display: block; } /* Hero positioning context */ .hero { position: relative; overflow: hidden; } .hero .shell { position: relative; z-index: 1; } /* Feature spacing — more air between rows */ .feature { margin-bottom: 128px; } @media (max-width: 900px) { .feature { margin-bottom: 72px; } } .section-head .lead { font-family: var(--serif); font-size: 1.2rem; color: var(--text-soft); font-style: italic; line-height: 1.55; margin-top: 18px; } /* ---------- Hero ---------- */ .hero { padding: 130px 0 110px; background: radial-gradient(ellipse at top, rgba(200, 160, 90, 0.08), transparent 60%), radial-gradient(ellipse at bottom, rgba(122, 166, 122, 0.04), transparent 70%), var(--bg-deep); text-align: center; position: relative; } .hero h1 { /* Scales down on narrower viewports so the first line ("Everything your collection needs,") stays on one line across desktop widths. Ceiling kept close to the original 4.4rem for visual impact on wide screens. */ font-size: clamp(2.8rem, 5.2vw, 4.2rem); line-height: 1.08; max-width: 1120px; margin: 0 auto 28px; } .hero h1 .emph { color: var(--brass); font-style: italic; } .hero .sub { font-family: var(--serif); font-size: 1.4rem; color: var(--text-soft); font-style: italic; max-width: 680px; margin: 0 auto 44px; line-height: 1.55; } .hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Problem section ---------- */ .problem h2 { text-align: center; margin-bottom: 28px; } .problem .body { max-width: 760px; margin: 0 auto; font-family: var(--serif); font-size: 1.18rem; line-height: 1.75; color: var(--text-soft); } .problem .body p + p { margin-top: 18px; } .problem .body .lift { color: var(--text); font-style: italic; margin-top: 56px; text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.35; letter-spacing: -0.005em; } /* ---------- Features ---------- */ .feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; margin-bottom: 72px; } .feature:nth-child(even) { grid-template-columns: 1.1fr 1fr; direction: rtl; } .feature:nth-child(even) > * { direction: ltr; } .feature:last-child { margin-bottom: 0; } .feature-copy h3 { font-size: 1.8rem; margin-bottom: 14px; } .feature-copy .desc { font-family: var(--serif); font-size: 1.08rem; color: var(--text-soft); line-height: 1.7; } .feature-copy ul { margin: 18px 0 0; padding: 0; list-style: none; } .feature-copy ul li { font-size: 0.92rem; color: var(--text-soft); padding: 7px 0 7px 22px; position: relative; line-height: 1.5; } .feature-copy ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 12px; height: 1px; background: var(--brass); } /* Screenshot illustration container */ .screen { display: block; width: 100%; height: auto; /* Cap thumbnail height so tall screenshots (Office, Newsroom, Timeline) don't stretch their feature row and unbalance the layout against the copy column. The full-detail view is one click away in the lightbox. */ max-height: 600px; object-fit: cover; object-position: top; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); background: var(--bg-card); cursor: zoom-in; /* Same gentle bottom fade as the lightbox, so a top-anchored crop reads as considered rather than truncated. */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 120px), rgba(0, 0, 0, 0.75) calc(100% - 80px), rgba(0, 0, 0, 0.35) calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 120px), rgba(0, 0, 0, 0.75) calc(100% - 80px), rgba(0, 0, 0, 0.35) calc(100% - 40px), transparent 100%); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease; position: relative; z-index: 1; } .screen:hover { transform: translateY(-6px) scale(1.06); border-color: var(--brass); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(200, 160, 90, 0.25); z-index: 5; } /* Some screenshots are short cards where a heavy bottom fade eats half the content (Momentum Meter is the first). Opt them out of the mask on both the thumbnail and the lightbox blow-up. Add `no-fade` alongside `screen`. */ .screen.no-fade, .lightbox img.no-fade { -webkit-mask-image: none; mask-image: none; } /* Lightbox overlay (created by JS) */ .lightbox { position: fixed; inset: 0; background: rgba(6, 4, 3, 0.96); display: none; z-index: 1500; padding: 56px 40px 80px; backdrop-filter: blur(8px); /* Allow vertical scroll for tall screenshots (Office is 1600x2532). Previously used flex-centre + max-height:88vh which crushed tall images down to ~500px wide and made text unreadable. */ overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: center; } .lightbox.open { display: block; animation: lightbox-in 0.25s ease; } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } .lightbox img { /* Render up to 1600px wide (source resolution) so text stays legible. Smaller screenshots keep their natural width so we don't upscale-blur. Height uncapped: the overlay scrolls vertically when needed. 92vw cap keeps a comfortable side margin on wide monitors. */ max-width: min(1600px, 92vw); height: auto; display: inline-block; border: 1px solid var(--brass); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(200, 160, 90, 0.2); background: var(--bg-card); /* Soft, drawn-out fade at the bottom so any content cut-off dissolves into the dark overlay rather than ending mid-text. Intermediate opacity stops give an ease-out feel across ~280px — long enough to read as deliberate design language, not a rendering error. */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 280px), rgba(0, 0, 0, 0.75) calc(100% - 180px), rgba(0, 0, 0, 0.35) calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 280px), rgba(0, 0, 0, 0.75) calc(100% - 180px), rgba(0, 0, 0, 0.35) calc(100% - 90px), transparent 100%); } .lightbox-close { position: fixed; top: 18px; right: 28px; color: var(--brass); font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 1501; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--brass); background: rgba(10, 8, 7, 0.7); transition: background 0.2s ease; user-select: none; } .lightbox-close:hover { background: var(--brass); color: var(--bg-deep); } @media (max-width: 540px) { .screen:hover { transform: translateY(-3px) scale(1.02); } .lightbox { padding: 56px 16px 40px; } .lightbox img { max-width: 96vw; } } /* Mockup panel — kept for any non-screenshot illustration */ .mock { background: var(--bg-card); border: 1px solid var(--line); padding: 26px 28px; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .mock-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; } .mock-head .ttl { font-family: var(--serif); font-size: 1.05rem; color: var(--text); } .mock-head .meta { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } .mock-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; font-size: 0.9rem; } .mock-row:last-child { border-bottom: none; } .mock-row .lbl { color: var(--text-soft); } .mock-row .val { color: var(--text); font-family: var(--serif); } .mock-row .val.brass { color: var(--brass); } .mock-row .val.emerald { color: var(--emerald); } .pill { display: inline-block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; } .pill-brass { color: var(--brass); } .pill-emerald { color: var(--emerald); } .pill-crimson { color: var(--crimson); } .pill-dim { color: var(--text-dim); } /* Garage mockup — 3 small car cards */ .mock-garage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mock-car { background: var(--bg-elev); border: 1px solid var(--line); padding: 12px; } .mock-car .ph { aspect-ratio: 4 / 3; background: linear-gradient(135deg, rgba(200, 160, 90, 0.2), rgba(122, 166, 122, 0.1)); border: 1px solid var(--line); margin-bottom: 10px; } .mock-car .yr { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); } .mock-car .nm { font-family: var(--serif); font-size: 0.92rem; color: var(--text); margin-top: 2px; line-height: 1.2; } .mock-car .vl { font-size: 0.74rem; color: var(--text-dim); margin-top: 6px; } /* Showroom mockup — valuation card */ .mock-valuation .market { font-family: var(--serif); font-size: 2.2rem; color: var(--brass); margin: 6px 0 0; } .mock-valuation .delta { font-size: 0.82rem; color: var(--emerald); margin-bottom: 18px; } .mock-adj { font-size: 0.82rem; display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--line); } .mock-adj:last-of-type { border-bottom: none; } .mock-adj .nm { color: var(--text-soft); } .mock-adj .vl { color: var(--brass); font-family: var(--serif); } /* Office mockup — list of dated items */ .mock-office-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; } .mock-office-row:last-child { border-bottom: none; } .mock-office-row .when { font-family: var(--serif); font-size: 1rem; color: var(--brass); text-align: center; border-right: 1px solid var(--line); padding-right: 12px; line-height: 1.1; } .mock-office-row .when .day { display: block; font-size: 1.4rem; } .mock-office-row .when .mo { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; } .mock-office-row .what { font-size: 0.85rem; } .mock-office-row .what .ttl { color: var(--text); font-family: var(--serif); font-size: 0.98rem; } .mock-office-row .what .sub { color: var(--text-dim); font-size: 0.76rem; margin-top: 2px; } /* Filing room mockup — category list with counts */ .mock-cat { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--line); margin-bottom: 6px; align-items: center; } .mock-cat .nm { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); } .mock-cat .ct { font-family: var(--serif); font-size: 0.92rem; color: var(--brass); } /* Rally map mockup — stylised map with pins */ .mock-map { aspect-ratio: 16 / 10; background: var(--bg-elev); border: 1px solid var(--line); position: relative; margin-bottom: 16px; overflow: hidden; } .mock-map svg { display: block; width: 100%; height: 100%; } .mock-rally-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; align-items: baseline; } .mock-rally-row:last-child { border-bottom: none; } .mock-rally-row .nm { color: var(--text); font-family: var(--serif); } .mock-rally-row .nm .ed { color: var(--text-dim); font-size: 0.78rem; } .mock-rally-row .st { color: var(--brass); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .mock-rally-row .st.past { color: var(--text-dim); } .mock-rally-row .st.live { color: var(--emerald); } /* Transport mockup — route summary + carrier */ .mock-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px; background: var(--bg-elev); border: 1px solid var(--line); margin-bottom: 14px; font-size: 0.82rem; } .mock-route .arr { color: var(--brass); font-size: 1.1rem; } .mock-route .where .lbl { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); } .mock-route .where .pl { color: var(--text); font-family: var(--serif); font-size: 0.96rem; margin-top: 2px; } .mock-carrier { background: var(--bg-elev); border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 8px; } .mock-carrier .nm { font-family: var(--serif); font-size: 1rem; color: var(--text); } .mock-carrier .sub { font-size: 0.76rem; color: var(--text-dim); margin-top: 4px; } .mock-carrier .modes { margin-top: 8px; display: flex; gap: 6px; } .mock-carrier .modes span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--brass); color: var(--brass); padding: 3px 7px; } /* Estate mockup — per-car inheritance card */ .mock-estate-car { border-left: 2px solid var(--brass); padding: 10px 14px; margin-bottom: 14px; background: var(--bg-elev); } .mock-estate-car .car { font-family: var(--serif); font-size: 0.96rem; color: var(--text); } .mock-estate-car .note { font-size: 0.8rem; color: var(--text-soft); font-family: var(--serif); font-style: italic; margin-top: 4px; line-height: 1.55; } .mock-estate-car .to { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-top: 6px; } /* Specialist mockup */ .mock-spec { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px; background: var(--bg-elev); border: 1px solid var(--line); margin-bottom: 8px; align-items: center; } .mock-spec .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--brass), #8a6a3a); display: flex; align-items: center; justify-content: center; color: var(--bg-deep); font-family: var(--serif); font-size: 0.92rem; } .mock-spec .nm { font-family: var(--serif); color: var(--text); font-size: 0.96rem; } .mock-spec .ti { color: var(--brass); font-size: 0.7rem; letter-spacing: 0.1em; } .mock-spec .ll { color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; } /* ---------- Pricing ---------- */ .pricing { background: var(--bg-deep); } .currency-toggle { display: flex; justify-content: center; gap: 0; margin: 0 auto 56px; border: 1px solid var(--line-strong); width: fit-content; } .currency-toggle button { background: transparent; border: none; color: var(--text-soft); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 26px; cursor: pointer; transition: all 0.2s ease; border-right: 1px solid var(--line-strong); } .currency-toggle button:last-child { border-right: none; } .currency-toggle button:hover { color: var(--brass); } .currency-toggle button.active { background: var(--brass); color: var(--bg-deep); } .tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 920px; margin: 0 auto; } .tier { background: var(--bg-card); border: 1px solid var(--line); padding: 44px 36px 36px; display: flex; flex-direction: column; position: relative; transition: border-color 0.3s ease; } .tier:hover { border-color: var(--brass); } .tier-feature { border-color: var(--brass); } .tier-feature::before { content: 'Most chosen'; position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); background: var(--bg-deep); color: var(--brass); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 14px; border: 1px solid var(--brass); } .tier .name { font-family: var(--serif); font-size: 1.8rem; color: var(--brass); margin-bottom: 8px; } .tier .name-sub { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 26px; } .tier .monthly { font-family: var(--serif); font-size: 2.6rem; color: var(--text); line-height: 1; } .tier .monthly .per { font-size: 1rem; color: var(--text-dim); font-style: italic; } .tier .onboarding { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--text-soft); } .tier .onboarding .amt { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); display: block; margin-top: 4px; } .tier .term { font-size: 0.74rem; color: var(--text-dim); margin-top: 8px; font-style: italic; font-family: var(--serif); } .tier ul.includes { list-style: none; padding: 0; margin: 28px 0 32px; flex: 1; } .tier ul.includes li { font-size: 0.92rem; color: var(--text-soft); padding: 9px 0 9px 22px; position: relative; border-top: 1px solid var(--line); line-height: 1.5; } .tier ul.includes li:first-child { border-top: none; } .tier ul.includes li::before { content: '✓'; position: absolute; left: 0; top: 9px; color: var(--brass); font-size: 0.9rem; } .tier .tier-cta { width: 100%; text-align: center; } /* ---------- Approach ---------- */ .approach { text-align: center; } .approach h2 { margin-bottom: 28px; } .approach .body { max-width: 720px; margin: 0 auto; font-family: var(--serif); font-size: 1.18rem; line-height: 1.75; color: var(--text-soft); } .approach .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; text-align: left; } .approach .three .item { padding: 28px; background: var(--bg-card); border: 1px solid var(--line); } .approach .three .item h4 { color: var(--brass); margin-bottom: 10px; font-size: 1.1rem; } .approach .three .item p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.65; margin: 0; } /* ---------- Held in confidence (within approach) ---------- */ .confidence { margin-top: 88px; padding: 56px 60px; background: var(--bg-card); border-left: 2px solid var(--brass); text-align: left; position: relative; } .confidence-head { max-width: 760px; margin: 0 auto 44px; text-align: center; } .confidence-head h3 { font-size: 1.9rem; margin-top: 14px; line-height: 1.2; } .confidence-head p { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--text-soft); line-height: 1.65; margin-top: 16px; } .confidence-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 64px; max-width: 980px; margin: 0 auto; } .confidence-point h4 { font-size: 1.08rem; color: var(--brass); margin-bottom: 10px; line-height: 1.3; } .confidence-point p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.7; margin: 0; font-family: var(--sans); } @media (max-width: 900px) { .confidence { padding: 42px 30px; margin-top: 64px; } .confidence-points { grid-template-columns: 1fr; gap: 28px; } .confidence-head h3 { font-size: 1.5rem; } } @media (max-width: 540px) { .confidence { padding: 32px 22px; } } /* ---------- Contact ---------- */ .contact { text-align: center; background: var(--bg-card); } .contact h2 { margin-bottom: 18px; } .contact .body { max-width: 640px; margin: 0 auto 36px; font-family: var(--serif); font-size: 1.18rem; font-style: italic; line-height: 1.7; color: var(--text-soft); } .contact form { max-width: 580px; margin: 0 auto; display: grid; gap: 14px; } .contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact input, .contact textarea { width: 100%; background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--text); padding: 14px 16px; font-family: var(--sans); font-size: 0.95rem; font-weight: 300; } .contact input:focus, .contact textarea:focus { outline: none; border-color: var(--brass); } .contact textarea { min-height: 120px; resize: vertical; font-family: var(--serif); font-size: 1rem; } .contact .form-actions { margin-top: 8px; text-align: center; } .contact .form-note { font-size: 0.78rem; color: var(--text-dim); font-family: var(--serif); font-style: italic; margin-top: 14px; } /* ---------- Footer ---------- */ footer { padding: 48px 0; border-top: 1px solid var(--line); text-align: center; } footer .brand-line { font-family: var(--serif); font-size: 1.2rem; color: var(--text); } footer .powered { font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--text-dim); margin-top: 8px; } footer .copy { font-size: 0.76rem; color: var(--text-dim); margin-top: 16px; letter-spacing: 0.08em; } /* ---------- Mobile ---------- */ @media (max-width: 900px) { .shell { padding: 0 24px; } .topnav-inner { padding: 0 24px; } h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } .hero { padding: 100px 0 110px; } .hero h1 { font-size: 2.8rem; } .hero .sub { font-size: 1.15rem; } .section { padding: 90px 0; } .section-head { margin-bottom: 56px; } .section-divider { padding: 24px 0; } .section-divider::before, .section-divider::after { max-width: 120px; } .feature { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; } .feature:nth-child(even) { grid-template-columns: 1fr; direction: ltr; } .tiers { grid-template-columns: 1fr; gap: 16px; } .approach .three { grid-template-columns: 1fr; gap: 16px; } .nav-links { display: none; } .nav-toggle { display: flex; } } @media (max-width: 540px) { .shell { padding: 0 18px; } .topnav-inner { padding: 0 18px; } .brand { font-size: 1.1rem; } .hero h1 { font-size: 2.2rem; } .hero .sub { font-size: 1rem; } .hero .cta-row { flex-direction: column; } .hero .cta-row .btn { width: 100%; text-align: center; } .section { padding: 56px 0; } h2 { font-size: 1.7rem; } h3 { font-size: 1.3rem; } .problem .body, .approach .body { font-size: 1.05rem; } .currency-toggle button { padding: 10px 18px; font-size: 0.7rem; } .tier { padding: 32px 26px; } .tier .monthly { font-size: 2.2rem; } .contact .form-row { grid-template-columns: 1fr; } .mock-garage-grid { grid-template-columns: repeat(2, 1fr); } } /* Screenshot pair (used by the Attention feature block) and trio (used by the Saleroom feature block). Both stack multiple screens into the image column of a .feature grid so the copy sits alongside a compact set of thumbnails rather than a single tall screenshot. */ .screen-pair, .screen-trio { display: grid; gap: 14px; } .screen-pair { grid-template-columns: 1fr 1fr; } .screen-trio { grid-template-columns: 1fr; } .screen-pair .screen, .screen-trio .screen { max-height: 460px; object-fit: cover; object-position: top center; } @media (max-width: 720px) { .screen-pair { grid-template-columns: 1fr; } }