@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#173b3d; --ink-soft:#31595a; --muted:#6e8582; --mint:#cde4d8; --pale:#f5f8f5; --cream:#fafaf6; --line:#dce7e1; --accent:#e5ad44; --deep:#11383b; --shadow:0 22px 65px rgba(20,66,63,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.page-shell { max-width:1440px; margin:auto; padding:0 54px; overflow:hidden; }
.site-header { height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(49,89,90,.12); position:relative; z-index:3; }
.brand { display:flex; align-items:center; gap:10px; letter-spacing:.06em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#e7f3e9; font-size:11px; font-weight:800; letter-spacing:-.06em; }
.brand strong,.brand small { display:block; line-height:1; }
.brand strong { font-size:17px; font-weight:800; letter-spacing:.13em; }
.brand small { margin-top:4px; font-size:8px; letter-spacing:.32em; color:var(--muted); }
.site-nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.site-nav a { transition:color .2s; }
.site-nav a:hover { color:var(--accent); }
.nav-cta { padding:11px 16px; border:1px solid var(--line); border-radius:99px; color:var(--ink); }
.nav-cta span,.button span,.text-link span { color:var(--accent); margin-left:10px; }
.menu-toggle { display:none; background:transparent; border:0; font-size:24px; color:var(--ink); }
.flash { margin:16px 0 -4px; border-radius:10px; padding:13px 18px; font-size:13px; }
.flash-success { background:#ddf1e5; color:#1d624b; }
.hero { min-height:555px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:50px; padding:75px 7% 62px; }
.hero-copy { max-width:590px; }
.eyebrow,.section-kicker { color:var(--accent); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.22em; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 19px; }
.eyebrow-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; display:block; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:'Manrope',Arial,sans-serif; }
h1 { max-width:590px; margin-bottom:22px; font-size:clamp(42px,5.1vw,73px); line-height:1.06; letter-spacing:-.055em; font-weight:700; }
.hero-text { max-width:510px; color:var(--muted); font-size:16px; line-height:1.8; }
.hero-actions { display:flex; gap:12px; margin:33px 0 38px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:2px; border:0; border-radius:4px; padding:14px 20px; cursor:pointer; font-weight:700; font-size:13px; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:var(--ink); box-shadow:0 9px 20px rgba(23,59,61,.13); }
.button-primary:hover { background:#275a5b; }
.button-ghost { border:1px solid var(--line); color:var(--ink-soft); }
.hero-proof { display:flex; align-items:center; gap:12px; }
.avatar-stack { display:flex; }
.avatar-stack span { width:27px; height:27px; display:grid; place-items:center; margin-left:-5px; border:2px solid var(--cream); border-radius:50%; background:#a8c9b8; color:white; font-size:9px; font-weight:700; }
.avatar-stack span:first-child { margin-left:0; background:#e0b259; }
.avatar-stack span:last-child { background:#587e78; }
.hero-proof strong,.hero-proof small { display:block; }
.hero-proof strong { font-size:12px; }
.hero-proof small { margin-top:2px; color:var(--muted); font-size:10px; }
.hero-visual { min-height:395px; position:relative; display:grid; place-items:center; }
.visual-orbit { border:1px solid #bcd6cd; position:absolute; border-radius:50%; transform:rotate(-17deg); }
.orbit-one { width:90%; height:63%; }
.orbit-two { width:75%; height:88%; transform:rotate(28deg); border-color:#e6d7af; }
.hero-car-shape { width:70%; height:180px; position:relative; margin-top:34px; filter:drop-shadow(0 22px 14px rgba(21,72,68,.17)); z-index:1; }
.car-body { position:absolute; bottom:28px; left:2%; width:96%; height:104px; background:linear-gradient(155deg,#1e5553,#86b2a1); border-radius:48% 54% 18% 22% / 42% 44% 20% 20%; transform:skew(-12deg); }
.car-body:after { content:''; position:absolute; right:0; bottom:0; width:18%; height:42px; border-radius:0 0 18px 8px; background:#1b464a; }
.car-window { position:absolute; z-index:2; left:28%; top:20px; width:48%; height:74px; background:linear-gradient(130deg,#b1d7cf,#38696a); clip-path:polygon(0 100%,19% 0,78% 0,100% 100%); }
.car-window:after { content:''; position:absolute; left:48%; top:0; height:100%; width:3px; background:rgba(255,255,255,.32); transform:skew(-10deg); }
.car-wheel { position:absolute; z-index:3; bottom:0; width:54px; height:54px; border:9px solid #19343a; border-radius:50%; background:#b4c6bd; box-shadow:inset 0 0 0 8px #587475; }
.wheel-left { left:18%; }.wheel-right { right:15%; }
.visual-note { position:absolute; z-index:2; width:112px; height:72px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.86); box-shadow:var(--shadow); font-size:10px; line-height:1.4; }
.visual-note span:first-child { color:var(--accent); font-size:13px; font-weight:800; }
.visual-note b { font-size:12px; }
.note-top { top:11%; right:8%; transform:rotate(5deg); }.note-bottom { bottom:11%; left:5%; transform:rotate(-8deg); }
.note-icon { color:var(--accent); font-size:20px; }.visual-label { position:absolute; bottom:4%; right:4%; font-size:9px; letter-spacing:.2em; color:var(--muted); }.visual-label i { display:inline-block; width:4px; height:4px; margin:0 8px 2px; border-radius:50%; background:var(--accent); }
.stats-strip { display:grid; grid-template-columns:repeat(3,1fr) 1.2fr; gap:18px; align-items:center; padding:21px 7%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-strip > div:not(.stats-tag) { display:flex; align-items:baseline; gap:13px; border-right:1px solid var(--line); }.stats-strip > div:nth-child(3) { border-right:0; }.stats-strip strong { font-family:'Manrope'; font-size:26px; letter-spacing:-.06em; }.stats-strip span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.16em; }.stats-tag { justify-self:end; color:var(--muted); font-size:11px; line-height:1.4; text-align:right; }.stats-tag b { color:var(--ink); font-size:14px; }
.section { padding:112px 7%; }.section-kicker { display:flex; gap:20px; margin-bottom:36px; color:var(--muted); }.section-kicker span:first-child { color:var(--accent); }.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; }.about-heading h2,.section-heading-row h2,.process-heading h2,.contact-copy h2 { margin:0; max-width:500px; font-size:clamp(34px,4vw,56px); line-height:1.11; letter-spacing:-.065em; }.about-heading .eyebrow { margin-bottom:11px; }.about-badge { margin-top:42px; width:130px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; color:white; background:var(--ink); transform:rotate(-10deg); }.about-badge strong { font-family:'Manrope'; font-size:28px; }.about-badge span { color:#b9d4c7; font-size:10px; }.about-copy { padding-top:45px; }.about-copy p { color:var(--muted); font-size:15px; line-height:1.9; white-space:pre-line; }.text-link { display:inline-flex; align-items:center; margin-top:15px; border-bottom:1px solid var(--accent); padding-bottom:5px; color:var(--ink); font-size:13px; font-weight:700; }.strengths-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:87px; }.strength-card { min-height:148px; position:relative; padding:22px; border:1px solid var(--line); background:rgba(255,255,255,.34); }.strength-number { color:var(--accent); font-size:10px; font-weight:800; }.strength-icon { position:absolute; top:19px; right:20px; font-size:20px; color:#99b7aa; }.strength-card p { max-width:200px; margin:30px 0 0; font-size:13px; font-weight:700; line-height:1.5; }
.inventory-section { background:var(--pale); max-width:none; margin:0 -54px; padding-left:calc(7% + 54px); padding-right:calc(7% + 54px); }.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:50px; }.section-heading-row h2 em,.process-heading h2 em,.contact-copy h2 em { color:var(--accent); font-style:normal; }.section-intro { max-width:340px; margin:0 0 8px; color:var(--muted); font-size:13px; line-height:1.8; }.inventory-toolbar { display:flex; align-items:center; justify-content:space-between; gap:25px; margin:48px 0 26px; }.category-filters { display:flex; flex-wrap:wrap; gap:7px; }.filter-pill { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }.filter-pill span { color:var(--accent); }.filter-pill.active,.filter-pill:hover { border-color:var(--ink); background:var(--ink); color:white; }.search-box { display:flex; align-items:center; flex-shrink:0; border-bottom:1px solid #afc4bb; padding:7px 0; }.search-box span { color:var(--accent); font-size:22px; line-height:1; }.search-box input { width:150px; border:0; outline:0; background:transparent; padding:0 8px; color:var(--ink); font-size:11px; }.search-box button { border:0; background:none; color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; }.results-note { color:var(--muted); font-size:12px; }.car-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.car-card { background:white; box-shadow:0 12px 30px rgba(24,69,61,.045); }.car-image-wrap { height:205px; position:relative; overflow:hidden; background:#e8f0eb; }.car-image-wrap img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s; }.car-card:hover .car-image-wrap img { transform:scale(1.04); }.car-category,.featured-label { position:absolute; top:14px; left:14px; padding:6px 9px; background:rgba(255,255,255,.9); color:var(--ink); font-size:9px; font-weight:800; }.featured-label { left:auto; right:14px; color:#8a6119; background:#faebc6; }.car-info { padding:18px 19px 17px; }.car-title-row { display:flex; justify-content:space-between; gap:15px; }.car-title-row h3 { margin:0; font-size:18px; letter-spacing:-.04em; }.car-title-row p { margin:4px 0 0; color:var(--muted); font-size:11px; }.arrow-circle { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; color:var(--accent); font-size:14px; }.car-specs { display:flex; flex-wrap:wrap; gap:7px; margin:19px 0; }.car-specs span { padding-right:8px; border-right:1px solid var(--line); color:var(--muted); font-size:10px; }.car-specs span:last-child { border-right:0; }.car-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:13px; }.car-bottom strong { font-family:'Manrope'; font-size:13px; }.car-bottom a { color:var(--muted); font-size:10px; font-weight:700; }.car-bottom a span { color:var(--accent); margin-left:4px; }.empty-state { padding:50px 24px; border:1px dashed #b7ccc2; text-align:center; }.empty-icon { color:var(--accent); font-size:30px; }.empty-state h3 { margin:8px 0; font-size:18px; }.empty-state p { max-width:440px; margin:0 auto 20px; color:var(--muted); font-size:13px; }
.process-section { margin:0 -54px; background:var(--ink); color:white; }.process-inner { padding-top:98px; padding-bottom:95px; }.light { color:#99b8ad; }.light span:first-child { color:var(--accent); }.process-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; }.process-heading h2 { color:white; }.process-heading p { max-width:370px; margin:0; color:#aac5ba; font-size:14px; line-height:1.8; }.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:67px; }.process-steps > div { border-top:1px solid #416765; padding-top:17px; }.process-steps span { color:var(--accent); font-size:11px; font-weight:800; }.process-steps h3 { margin:28px 0 8px; color:white; font-size:16px; }.process-steps p { margin:0; color:#9fbbb2; font-size:11px; line-height:1.7; }.contact-section { padding-top:103px; padding-bottom:110px; }.contact-card { display:grid; grid-template-columns:1fr 1fr; gap:13%; padding:52px; background:#e7f1e9; }.contact-copy h2 { margin-bottom:22px; }.contact-copy > p { max-width:400px; color:var(--muted); font-size:13px; line-height:1.8; }.contact-details { display:flex; flex-direction:column; gap:12px; margin-top:35px; }.contact-details a,.contact-details p { margin:0; }.contact-details span,.contact-details strong { display:block; }.contact-details span { color:var(--muted); font-size:10px; }.contact-details strong { font-size:13px; }.contact-form { display:flex; flex-direction:column; gap:14px; justify-content:center; }.contact-form label { color:var(--muted); font-size:10px; font-weight:700; }.contact-form input,.contact-form textarea { width:100%; margin-top:5px; border:0; border-bottom:1px solid #b9cfc4; border-radius:0; outline:0; padding:9px 0; background:transparent; color:var(--ink); resize:vertical; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--accent); }.contact-form .button { align-self:flex-start; margin-top:6px; }.site-footer { display:grid; grid-template-columns:1fr 1fr auto auto; gap:20px; align-items:center; padding:26px 0; border-top:1px solid var(--line); }.site-footer p,.site-footer small,.site-footer > a { color:var(--muted); font-size:10px; }.site-footer > a { font-weight:700; }.site-footer > a span { color:var(--accent); margin-left:7px; }
@media (max-width: 1000px) { .page-shell { padding:0 28px; }.hero { padding-left:3%; padding-right:3%; }.stats-strip,.section { padding-left:3%; padding-right:3%; }.inventory-section,.process-section { margin-left:-28px; margin-right:-28px; padding-left:calc(3% + 28px); padding-right:calc(3% + 28px); }.contact-card { gap:7%; padding:38px; }.car-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 720px) { .page-shell { padding:0 18px; }.site-header { height:78px; }.site-nav { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:8px; background:var(--cream); border:1px solid var(--line); box-shadow:var(--shadow); }.site-nav.open { display:flex; }.site-nav a { padding:12px; }.nav-cta { border:0; border-radius:0; }.menu-toggle { display:block; }.hero { display:flex; flex-direction:column; align-items:stretch; gap:25px; padding:62px 3% 50px; }.hero-visual { min-height:270px; }.hero-car-shape { width:80%; height:140px; }.car-body { height:84px; }.car-window { top:21px; height:58px; }.car-wheel { width:43px; height:43px; border-width:7px; }.visual-note { transform:scale(.82) rotate(5deg); }.note-bottom { transform:scale(.82) rotate(-8deg); }.stats-strip { grid-template-columns:1fr 1fr; gap:18px; padding-top:25px; padding-bottom:25px; }.stats-strip > div:not(.stats-tag) { border-right:0; }.stats-tag { grid-column:span 2; justify-self:start; text-align:left; }.section { padding-top:75px; padding-bottom:75px; }.about-grid,.contact-card { grid-template-columns:1fr; gap:35px; }.about-copy { padding-top:0; }.strengths-grid { grid-template-columns:1fr 1fr; margin-top:50px; }.section-heading-row,.process-heading { display:block; }.section-intro { margin-top:25px; }.inventory-toolbar { display:block; margin-top:35px; }.category-filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:10px; }.search-box { width:100%; margin-top:17px; }.search-box input { flex:1; width:auto; }.car-grid { grid-template-columns:1fr; }.process-steps { grid-template-columns:1fr 1fr; margin-top:50px; }.contact-card { padding:29px; }.site-footer { grid-template-columns:1fr 1fr; }.site-footer p { grid-column:span 2; order:3; }.site-footer small { grid-column:span 2; order:4; } }
@media (max-width: 420px) { h1 { font-size:40px; }.hero-actions { flex-wrap:wrap; }.hero-actions .button { flex:1; }.strengths-grid { grid-template-columns:1fr; }.process-steps { grid-template-columns:1fr; }.process-steps h3 { margin-top:18px; } }