:root { --ink:#10231f; --paper:#f5f3ed; --sand:#e7e1d4; --orange:#f26b42; --ochre:#df9f52; --mint:#b9d1b3; --line:rgba(16,35,31,.16); --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:absolute; left:-999px; top:0; z-index:10; padding:12px; background:var(--ink); color:#fff; }.skip-link:focus { left:10px; top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.site-header { align-items:center; display:flex; height:84px; justify-content:space-between; margin:auto; max-width:1440px; padding:0 6.2vw; position:relative; z-index:5; }
.brand { align-items:center; display:inline-flex; font-size:18px; font-weight:800; gap:9px; letter-spacing:-.85px; }.brand > span:last-child span { color:var(--orange); }.brand-mark { align-items:flex-end; display:inline-flex; gap:2px; height:20px; }.brand-mark i { background:var(--ink); border-radius:2px 2px 0 0; display:block; width:4px; }.brand-mark i:nth-child(1) { height:9px; }.brand-mark i:nth-child(2) { height:16px; }.brand-mark i:nth-child(3) { background:var(--orange); height:20px; }
nav { align-items:center; display:flex; gap:30px; font-size:13px; font-weight:700; }nav > a:not(.nav-cta) { opacity:.7; transition:opacity .2s; }nav > a:not(.nav-cta):hover { opacity:1; }.nav-cta { border-bottom:1px solid var(--ink); padding-bottom:3px; }.nav-cta span { color:var(--orange); font-size:18px; margin-left:3px; }
.menu-toggle { background:none; border:0; cursor:pointer; display:none; padding:8px; }.menu-toggle span:not(.sr-only) { background:var(--ink); display:block; height:2px; margin:4px 0; width:22px; }
.hero { display:grid; gap:5%; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); margin:0 auto; max-width:1440px; min-height:680px; overflow:hidden; padding:75px 6.2vw 68px; position:relative; }
.hero-copy { max-width:700px; padding-top:28px; position:relative; z-index:1; }.eyebrow { align-items:center; display:flex; font-family:var(--mono); font-size:10px; font-weight:500; gap:8px; letter-spacing:1.15px; margin:0 0 20px; text-transform:uppercase; }.eyebrow > span { background:var(--orange); border-radius:100%; display:block; height:7px; width:7px; }
h1,h2,h3,p { margin-top:0; }h1,h2,h3 { letter-spacing:-.055em; line-height:1.03; }h1 { font-size:clamp(54px,6.2vw,92px); font-weight:700; margin-bottom:27px; }h1 em,h2 em { color:var(--orange); font-style:normal; font-weight:500; }.hero-intro { font-size:17px; line-height:1.7; max-width:495px; opacity:.75; }.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:26px; margin-top:35px; }.button { align-items:center; display:inline-flex; font-size:13px; font-weight:800; gap:21px; justify-content:center; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--orange); color:#fff; min-height:54px; padding:0 20px 0 24px; }.button-primary span { font-size:20px; font-weight:400; }.button-text { border-bottom:1px solid var(--ink); padding-bottom:4px; }.button-text span { color:var(--orange); font-size:18px; }.trust-row { border-top:1px solid var(--line); display:flex; gap:clamp(18px,4.7vw,70px); margin-top:78px; max-width:570px; padding-top:18px; }.trust-row div { display:flex; flex-direction:column; }.trust-row strong { font-size:13px; letter-spacing:-.02em; }.trust-row span { font-family:var(--mono); font-size:9px; letter-spacing:.2px; opacity:.65; }
.hero-visual { align-self:center; height:475px; min-width:0; position:relative; }.sun { background:#ffd678; border-radius:50%; height:240px; position:absolute; right:8%; top:3px; width:240px; }.map-card { background:#ebc56d; border-radius:150px 150px 8px 8px; height:335px; overflow:hidden; position:absolute; right:4%; top:40px; transform:rotate(4deg); width:75%; }.map-card svg { height:100%; left:0; position:absolute; top:0; width:100%; }.map-card path { fill:none; stroke:rgba(16,35,31,.22); stroke-width:2; }.map-dot { background:var(--orange); border:3px solid var(--paper); border-radius:100%; height:17px; position:absolute; width:17px; z-index:1; }.dot-one { left:24%; top:47%; }.dot-two { left:62%; top:25%; }.dot-three { bottom:16%; right:21%; }.hero-label { background:var(--paper); font-family:var(--mono); font-size:9px; letter-spacing:.8px; padding:11px 13px; position:absolute; z-index:2; }.label-top { left:4%; top:61px; }.label-top b { background:#48a16a; border-radius:50%; display:inline-block; height:6px; margin-left:5px; vertical-align:1px; width:6px; }.label-bottom { bottom:7px; left:12%; }.pulse { background:#48a16a; border-radius:50%; box-shadow:0 0 0 4px rgba(72,161,106,.2); display:inline-block; height:6px; margin-right:6px; vertical-align:1px; width:6px; }.parking-card { align-items:center; background:var(--ink); bottom:39px; box-shadow:10px 12px 0 rgba(16,35,31,.08); color:white; display:flex; gap:11px; left:-2%; min-height:91px; padding:14px 17px; position:absolute; transform:rotate(-3deg); width:270px; z-index:3; }.parking-icon { align-items:center; background:var(--orange); display:flex; font-family:var(--mono); font-size:17px; font-weight:500; height:39px; justify-content:center; width:35px; }.parking-card small { display:block; font-family:var(--mono); font-size:7px; letter-spacing:.8px; opacity:.62; }.parking-card strong,.parking-card span { display:block; }.parking-card strong { font-size:12px; letter-spacing:-.02em; margin:1px 0; }.parking-card div span { font-family:var(--mono); font-size:8px; opacity:.7; }.availability { align-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; display:flex; font-family:var(--mono); font-size:11px; height:29px; justify-content:center; margin-left:auto; width:29px; }.car { background:#d9523b; border-radius:32px 58px 11px 10px; bottom:0; height:72px; position:absolute; right:0; transform:rotate(-4deg); width:195px; z-index:2; }.car:before { background:#d9523b; border-radius:38px 50px 0 0; content:""; height:44px; left:43px; position:absolute; top:-29px; transform:skewX(13deg); width:108px; }.car-window { background:#2c5d61; border-radius:26px 38px 2px 2px; height:25px; left:57px; position:absolute; top:-21px; transform:skewX(13deg); width:81px; z-index:1; }.wheel { background:#1e2928; border:4px solid #e8dbbc; border-radius:50%; bottom:-9px; height:29px; position:absolute; width:29px; }.wheel-one { left:28px; }.wheel-two { right:22px; }
.section-shell { margin:0 auto; max-width:1440px; padding-left:6.2vw; padding-right:6.2vw; }.steps { border-top:1px solid var(--line); display:grid; gap:9%; grid-template-columns:.72fr 1.28fr; padding-bottom:105px; padding-top:105px; }.section-heading h2,.locations h2,.contact h2 { font-size:clamp(42px,4.6vw,65px); margin-bottom:0; }.step-list { border-top:1px solid var(--line); }.step { border-bottom:1px solid var(--line); display:grid; gap:26px; grid-template-columns:55px 1fr 1.25fr; padding:25px 0; }.step-number { color:var(--orange); font-family:var(--mono); font-size:10px; padding-top:6px; }.step h3 { font-size:22px; margin:0; }.step p { font-size:14px; line-height:1.65; margin:0; opacity:.68; }
.operator-section { background:var(--ink); color:var(--paper); display:grid; gap:10%; grid-template-columns:1fr .9fr; overflow:hidden; padding:112px max(6.2vw,24px); }.eyebrow-light { color:#dbe1d5; }.eyebrow-light > span { background:#f5c466; }.operator-copy { max-width:610px; }.operator-copy h2 { font-size:clamp(44px,5vw,70px); margin-bottom:29px; }.operator-copy h2 em { color:#f4c372; }.operator-copy > p:not(.eyebrow) { color:#d1dad3; font-size:16px; line-height:1.7; max-width:460px; }.operator-copy ul { list-style:none; margin:32px 0 35px; padding:0; }.operator-copy li { border-top:1px solid rgba(255,255,255,.2); font-size:13px; font-weight:700; padding:13px 0; }.operator-copy li span { color:#f4c372; margin-right:8px; }.button-light { background:var(--paper); color:var(--ink); min-height:52px; padding:0 20px 0 24px; }.button-light span { color:var(--orange); font-size:20px; }.operator-dashboard { align-self:center; background:#f7f4ea; box-shadow:16px 18px 0 rgba(0,0,0,.16); color:var(--ink); min-height:363px; transform:rotate(3deg); }.dashboard-top { align-items:center; border-bottom:1px solid #d7d6ca; display:flex; font-family:var(--mono); font-size:8px; justify-content:space-between; padding:13px 16px; }.dashboard-logo { background:var(--ink); color:#fff; font-family:var(--sans); font-size:12px; font-weight:800; padding:3px 5px; }.dashboard-avatar { align-items:center; background:#d6a558; border-radius:50%; display:flex; font-size:7px; height:22px; justify-content:center; width:22px; }.dashboard-content { padding:26px 28px 24px; }.dashboard-content > p,.chart-label { font-family:var(--mono); font-size:8px; letter-spacing:.8px; }.dashboard-content > p { color:#e06741; margin-bottom:7px; }.dashboard-content h3 { font-size:24px; margin-bottom:19px; }.dashboard-stats { display:flex; gap:11px; }.dashboard-stats div { background:#e6ede2; display:flex; flex:1; flex-direction:column; padding:11px; }.dashboard-stats div:last-child { background:#f1dfbd; }.dashboard-stats strong { font-size:21px; letter-spacing:-.07em; }.dashboard-stats span { font-family:var(--mono); font-size:8px; opacity:.65; }.dashboard-chart { height:84px; margin:18px 0; position:relative; }.chart-label { left:0; position:absolute; top:0; z-index:1; }.dashboard-chart svg { bottom:0; height:68px; left:0; position:absolute; width:100%; }.dashboard-chart path { fill:rgba(242,107,66,.17); }.dashboard-chart polyline { fill:none; stroke:#f26b42; stroke-width:3; }.booking-line { align-items:center; border-top:1px solid #dddcd0; display:flex; gap:8px; padding-top:14px; }.booking-indicator { background:#44a76a; border-radius:50%; height:7px; width:7px; }.booking-line div { display:flex; flex-direction:column; }.booking-line strong { font-size:10px; }.booking-line div span,.booking-line b { font-family:var(--mono); font-size:8px; opacity:.65; }.booking-line b { margin-left:auto; }
.locations { padding-bottom:116px; padding-top:110px; }.locations-intro { display:flex; justify-content:space-between; margin-bottom:53px; }.locations-intro .eyebrow { align-self:flex-start; }.location-grid { display:grid; gap:15px; grid-template-columns:1.2fr .8fr .8fr; }.location-card { color:var(--ink); display:flex; flex-direction:column; min-height:360px; overflow:hidden; padding:24px; position:relative; }.location-card > div { margin-top:auto; position:relative; z-index:1; }.location-index,.location-card p { font-family:var(--mono); font-size:10px; letter-spacing:.8px; }.location-card h3 { font-size:clamp(24px,2.35vw,33px); line-height:1.07; margin:9px 0 22px; max-width:300px; }.location-card a { border-bottom:1px solid var(--ink); font-size:11px; font-weight:800; padding-bottom:3px; }.location-card a span { color:var(--orange); font-size:16px; margin-left:8px; }.location-card-large { background:#e4d4a9; }.location-card-ochre { background:#e77e51; }.location-card-green { background:#b8d4b3; }.arch { border:1px solid rgba(16,35,31,.45); border-bottom:0; border-radius:180px 180px 0 0; position:absolute; }.arch-large { height:285px; right:-36px; top:28px; width:245px; }.arch-large:after { border:1px solid rgba(16,35,31,.3); border-bottom:0; border-radius:140px 140px 0 0; bottom:0; content:""; height:200px; left:33px; position:absolute; width:174px; }.arch-small { height:165px; right:-20px; top:61px; width:134px; }.location-card-green:before,.location-card-green:after { background:rgba(16,35,31,.26); border-radius:100% 0 100% 0; content:""; height:210px; position:absolute; right:-58px; top:-32px; transform:rotate(36deg); width:210px; }.location-card-green:after { background:#79aa7e; height:135px; right:10px; top:40px; width:135px; }
.contact { background:#e9e4d7; margin-bottom:0; padding-bottom:110px; padding-top:100px; text-align:center; }.contact .eyebrow { justify-content:center; }.contact h2 { margin:0 auto 22px; }.contact > p:not(.eyebrow) { font-size:16px; line-height:1.7; margin:0 auto 31px; max-width:440px; opacity:.7; }.site-footer { align-items:center; background:#e9e4d7; border-top:1px solid var(--line); display:flex; gap:30px; justify-content:space-between; padding:25px 6.2vw; }.site-footer p,.site-footer > span { font-family:var(--mono); font-size:9px; margin:0; opacity:.65; }.brand-footer { font-size:15px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (max-width:850px) { .hero { grid-template-columns:1fr; min-height:unset; padding-top:38px; }.hero-copy { padding-top:0; }.hero-visual { height:415px; margin:10px auto 0; max-width:530px; width:100%; }.steps { gap:50px; grid-template-columns:1fr; }.operator-section { gap:70px; grid-template-columns:1fr; }.operator-dashboard { max-width:510px; width:90%; }.locations-intro { display:block; }.location-grid { grid-template-columns:1.1fr .9fr; }.location-card-large { grid-row:span 2; }.location-card-green { grid-column:2; }.site-footer { flex-wrap:wrap; } }
@media (max-width:620px) { .site-header { height:70px; padding:0 24px; }.menu-toggle { display:block; } nav { background:var(--paper); box-shadow:0 13px 23px rgba(16,35,31,.08); display:none; flex-direction:column; gap:18px; left:0; padding:24px; position:absolute; top:70px; width:100%; } nav.is-open { display:flex; }.hero,.section-shell { padding-left:24px; padding-right:24px; }.hero { padding-bottom:52px; }.hero-visual { height:337px; }.sun { height:180px; width:180px; }.map-card { height:255px; }.parking-card { bottom:24px; left:0; transform:rotate(-2deg) scale(.88); transform-origin:left bottom; }.car { bottom:0; right:-20px; transform:rotate(-4deg) scale(.8); transform-origin:right bottom; }.label-top { left:0; top:37px; }.label-bottom { bottom:0; left:27%; }.trust-row { gap:16px; margin-top:51px; }.trust-row strong { font-size:11px; }.trust-row span { font-size:8px; }.steps { padding-bottom:75px; padding-top:75px; }.step { gap:9px; grid-template-columns:43px 1fr; }.step p { grid-column:2; }.operator-section { padding:77px 24px; }.operator-dashboard { margin-left:0; width:100%; }.dashboard-content { padding:22px; }.locations { padding-bottom:70px; padding-top:75px; }.location-grid { grid-template-columns:1fr; }.location-card { min-height:280px; }.location-card-large { grid-row:auto; }.location-card-green { grid-column:auto; }.contact { padding-bottom:75px; padding-top:75px; }.site-footer { padding:24px; }.site-footer p { order:3; width:100%; } }