/* Theme Name: Vanta Exotic Rentals Theme URI: https://vantaexoticrentals.com Description: A luxury exotic vehicle rental theme. Complete on its own — every page, the hero, the rental terms and the legal notices ship with the theme. Install Vanta Exotic Core to add the fleet, reservation requests and the CRM. Version: 5.12.0 Author: Vanta Exotic Rentals Text Domain: vanta-exotic-rentals */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&display=swap'); /* ========================================================================== Tokens ========================================================================== */ :root{ /* Neutral-cool blacks. The previous set was green-biased (G above R and B), which is what tinted every surface. */ --ink:#0A0A0C; --ink-soft:#101013; --ink-card:#151519; --ink-raise:#1C1C21; --steel:#2A2A32; /* Neutral whites, matching the logo's own #FDFCFD rather than a cream. */ --cream:#F2F2F4; --mist:#B3B3BB; --muted:#84848F; /* 4.5:1 on --ink-raise, the darkest card it lands on */ /* Champagne gold sampled from the supplied logo. */ --gold:#EDC677; --gold-pale:#F6DFAB; --gold-deep:#9C7C3C; --line:rgba(237,198,119,.15); --line-soft:rgba(237,198,119,.075); --hair:rgba(255,255,255,.07); /* Vertical rhythm. Sections use these so spacing stays consistent and two images never end up touching. */ --section:clamp(56px,7vw,96px); --section-lg:clamp(72px,9vw,124px); --shell:1240px; --display:'Archivo Narrow','Arial Narrow',Arial,sans-serif; --sans:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--cream); font:15px/1.65 var(--sans); overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4{margin:0} p{margin:0} ul{margin:0;padding:0} .shell{width:min(100% - 48px,var(--shell));margin-inline:auto} .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* The field only a bot fills in. Moved off-screen rather than display:none, which some form-fillers check for and skip. */ .vanta-booking__trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px; overflow:hidden} .skip-link:focus{position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto; clip:auto;padding:12px 18px;background:var(--gold);color:#141216;font-weight:800} :focus-visible{outline:2px solid var(--gold-pale);outline-offset:3px} /* ========================================================================== Type primitives ========================================================================== */ .kicker{ margin:0 0 14px;color:var(--gold); font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase; } h1,h2,h3{overflow-wrap:break-word} h1,h2{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em; line-height:.92;text-wrap:balance} h1 em,h2 em{color:var(--gold-pale);font-weight:500;font-style:italic} .lede{max-width:52ch;color:var(--mist);font-size:16px} .button{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:48px;padding:0 24px;border:1px solid var(--gold);background:var(--gold); color:#141216;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; cursor:pointer;transition:background .22s ease,border-color .22s ease,transform .22s ease; } .button:hover{background:var(--gold-pale);border-color:var(--gold-pale);transform:translateY(-1px)} .button-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:var(--cream)} .button-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-1px)} .button-dark{background:transparent;border-color:var(--gold);color:var(--gold-pale)} .button-dark:hover{background:var(--gold);border-color:var(--gold);color:#141216} .text-link{display:inline-flex;align-items:center;gap:10px;color:var(--gold-pale); font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .text-link span{font-size:16px;line-height:1;transition:transform .2s ease} .text-link:hover span{transform:translateX(4px)} .section-head{display:flex;align-items:flex-end;justify-content:space-between; gap:32px;margin-bottom:36px;flex-wrap:wrap} .section-head h2{font-size:clamp(30px,3.4vw,50px)} /* ========================================================================== Header ========================================================================== */ .site-header{position:absolute;top:0;left:0;right:0;z-index:30; border-bottom:1px solid rgba(255,255,255,.1)} .nav{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:84px} .brand{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0} .vanta-logo{max-height:44px;width:auto} .vanta-logo--text{display:inline-flex;align-items:center;gap:10px;max-height:none} .vanta-logo__mark{flex:none;display:grid;place-items:center;width:27px;height:27px; border:1px solid var(--gold);color:var(--gold-pale); font:600 19px/1 var(--display);font-style:italic} .vanta-logo__type{display:block;color:#faf7ef;white-space:nowrap; font:600 clamp(14px,1.3vw,18px)/1.06 var(--display);letter-spacing:.1em;text-transform:uppercase} .vanta-logo__type small{display:block;margin-top:4px;color:var(--gold); font:700 7px/1 var(--sans);letter-spacing:.2em} #primary-menu{display:flex;align-items:center;flex:0 1 auto;min-width:0} .nav-list{display:flex;align-items:center;gap:24px;list-style:none;flex-wrap:nowrap} .nav-list li{flex:none} .nav-list a{display:block;padding:31px 0;white-space:nowrap;color:#e9e5db; font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; transition:color .2s ease} .nav-list a:hover,.nav-list .current-menu-item>a{color:var(--gold-pale)} .nav-phone{display:none} .nav-cta{flex:none;display:inline-flex;align-items:center;padding:13px 20px; border:1px solid var(--gold);color:var(--gold-pale);white-space:nowrap; font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; transition:background .22s ease,color .22s ease} .nav-cta:hover{background:var(--gold);color:#141216} .menu-toggle{display:none;gap:5px;padding:14px 10px;background:none;border:0;cursor:pointer} .menu-toggle span{display:block;width:24px;height:2px;background:var(--cream); transition:transform .26s ease,opacity .18s ease} /* Three bars fold into a cross rather than swapping to a different glyph, so the control reads as the same object in both states. */ body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .menu-toggle span:nth-child(2){opacity:0} body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ========================================================================== Hero ========================================================================== */ .hero{position:relative;min-height:min(92vh,780px);min-height:min(92svh,780px); display:grid;align-items:end;overflow:hidden;background:#0d0d10} .hero-slide{position:absolute;inset:0;display:grid;align-items:end; opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s} .hero-slide.is-active{opacity:1;visibility:visible;z-index:1} .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-shade{position:absolute;inset:0; background:linear-gradient(90deg,rgba(7,7,10,.92),rgba(7,7,10,.45) 55%,rgba(7,7,10,.08)), linear-gradient(0deg,rgba(7,7,10,.94),transparent 55%)} .hero-copy{position:relative;z-index:2;padding:170px 0 96px} .hero-copy h1{font-size:clamp(44px,7.4vw,104px);letter-spacing:.02em} .hero-copy .lede{margin:24px 0 30px} .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .hero-location{margin:28px 0 0;color:var(--mist); font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .hero-setup{margin-top:16px;color:var(--gold-pale)} .hero-slider__controls{position:absolute;z-index:3;bottom:24px;align-items:center; left:max(24px,calc((100% - var(--shell))/2));display:flex;gap:8px} /* The bar stays 2px because that is the design. The button around it is 44px because that is what a finger needs — they are no longer the same box. */ .hero-slider__controls button{display:grid;align-items:center;width:34px;height:44px; padding:0;border:0;background:none;cursor:pointer} .hero-slider__controls button span{display:block;height:2px; background:rgba(255,255,255,.38);transition:background .25s ease} .hero-slider__controls button:hover span{background:rgba(255,255,255,.7)} .hero-slider__controls button[aria-current="true"] span{background:var(--gold-pale)} .hero-slider__controls button:focus-visible{outline:2px solid var(--gold-pale);outline-offset:3px} /* ========================================================================== Page hero (interior pages) ========================================================================== */ .page-hero{padding:168px 0 76px;border-bottom:1px solid var(--line-soft); background:var(--ink)} .page-hero h1{font-size:clamp(42px,6.4vw,96px);letter-spacing:.02em} .page-hero p:not(.kicker){max-width:54ch;margin-top:22px;color:var(--mist);font-size:16px} .page-hero--image{background:url('assets/images/vanta-chauffeur-hero.jpg') center right/cover} /* the photograph carries this variant, so the scrim stays lighter than the default */ .page-hero--image .page-hero__shade{ background:linear-gradient(90deg,rgba(8,8,11,.94) 12%,rgba(8,8,11,.62) 46%,rgba(8,8,11,.1)), linear-gradient(0deg,rgba(8,8,11,.72),transparent 55%)} /* ========================================================================== Service strip ========================================================================== */ .service-strip{border-block:1px solid var(--line-soft);background:var(--ink-soft)} .service-strip .shell{display:flex;flex-wrap:wrap;justify-content:space-between; gap:10px 26px;padding:16px 0;color:var(--gold); font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} /* ========================================================================== Fleet controls ========================================================================== */ .fleet-section{padding:48px 0 100px} .fleet-tools{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;padding:14px 16px;margin-bottom:18px; border:1px solid var(--line-soft);background:var(--ink-soft)} .fleet-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0} .filter-chip{padding:11px 16px;border:1px solid var(--gold);background:transparent; color:var(--gold-pale);cursor:pointer;white-space:nowrap; font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; transition:background .2s ease,color .2s ease} .filter-chip.is-active,.filter-chip:hover{background:var(--gold);color:#141216} .filter-select,.fleet-sort{position:relative;display:inline-flex;align-items:center;gap:10px} .filter-select select,.fleet-sort select{ appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer; padding:11px 34px 11px 14px;border:1px solid var(--line);background:var(--ink-raise); color:var(--cream);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .filter-select::after,.fleet-sort::after{content:'';position:absolute;right:14px;top:50%; width:6px;height:6px;margin-top:-4px;pointer-events:none; border-right:1px solid var(--gold-pale);border-bottom:1px solid var(--gold-pale); transform:rotate(45deg)} .fleet-sort>span{color:var(--muted);font-size:9px;font-weight:800; letter-spacing:.15em;text-transform:uppercase;white-space:nowrap} /* The grid's own heading. The fleet page went

straight to the card

s with nothing between them; this is the missing rung, and it doubles as a place for the keyword to appear in the body copy. */ .fleet-heading{margin:0 0 14px;color:var(--cream);font-family:var(--display); font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:.01em} .fleet-count{margin:0 0 20px;color:var(--muted); font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase} .fleet-empty{padding:32px 0;color:var(--mist)} .fleet-empty button.text-link{border:0;background:none;cursor:pointer;padding:0} /* ========================================================================== Thank you — where a reservation request lands ========================================================================== */ .thanks{text-align:center} .thanks .shell{display:grid;justify-items:center} .thanks__mark{display:grid;place-items:center;width:96px;height:96px;margin-bottom:26px; border:1px solid var(--line);border-radius:50%;color:var(--gold); background:radial-gradient(circle at 50% 40%,rgba(237,198,119,.14),transparent 68%)} .thanks__lede{max-width:62ch;margin-top:22px;font-size:clamp(15px,1.3vw,18px)} .thanks .page-hero__rule{margin-inline:auto} .thanks-next{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);align-items:start;padding:var(--section) 0} .thanks-next h2{font-size:clamp(19px,1.7vw,25px);letter-spacing:.08em} .thanks-next__steps ol{counter-reset:step;margin:26px 0 0;padding:0;list-style:none;display:grid;gap:22px} .thanks-next__steps li{counter-increment:step;position:relative;padding-left:60px} .thanks-next__steps li::before{content:counter(step,decimal-leading-zero); position:absolute;left:0;top:2px;color:var(--gold); font:600 15px/1 var(--display);letter-spacing:.1em} .thanks-next__steps strong{display:block;margin-bottom:7px;color:var(--cream); font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .thanks-next__steps span{display:block;color:var(--mist);line-height:1.8} .thanks-next__reach{padding:28px 26px;background:var(--ink-card); border:1px solid var(--line-soft)} .thanks-next__reach p{margin:14px 0 20px;color:var(--mist)} .thanks-next__reach .button{display:flex;width:100%;margin-bottom:10px} .thanks-next__email{margin:16px 0 0;font-size:13px} .thanks-extra{padding-bottom:var(--section)} @media (max-width:900px){ .thanks-next{grid-template-columns:1fr;gap:36px} .thanks-next__steps li{padding-left:48px} } /* Long legal documents: paragraphs and dashed lists inside a numbered clause */ .legal-doc .terms__item p{margin:0 0 14px} .legal-doc .terms__item p:last-child{margin-bottom:0} .legal-list{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px} .legal-list li{position:relative;padding-left:20px;color:var(--mist);line-height:1.75} .legal-list li::before{content:'';position:absolute;left:0;top:.72em; width:11px;height:1px;background:var(--gold)} /* ========================================================================== Vehicle card ========================================================================== */ .vehicle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .vehicle-card{position:relative;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line-soft);background:var(--ink-card); transition:border-color .28s ease,transform .28s ease} .vehicle-card:hover{border-color:var(--line);transform:translateY(-3px)} .vehicle-card[hidden]{display:none} /* 4:3 gives the car noticeably more room than the old 16:10 letterbox without pushing the name and specs below the fold on a three-across grid. */ .vehicle-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0f0f12} /* --v-x / --v-y / --v-fit / --v-zoom are written onto the image by vanta_frame_style() from the framing set on the vehicle itself. Nothing is emitted for a vehicle on the defaults, which is why they all have fallbacks that reproduce the old centred fill exactly. */ .vehicle-card__media img{position:absolute;inset:0;width:100%;height:100%; object-fit:var(--v-fit,cover);object-position:var(--v-x,50%) var(--v-y,50%); transform:scale(var(--v-zoom,1));transform-origin:var(--v-x,50%) var(--v-y,50%); transition:transform .8s cubic-bezier(.2,.7,.2,1)} .vehicle-card:hover .vehicle-card__media img{transform:scale(calc(var(--v-zoom,1) * 1.05))} .vehicle-card__flag,.vehicle-card__status{position:absolute;top:12px;left:12px; padding:5px 10px;background:rgba(8,8,11,.85);border:1px solid var(--line); color:var(--gold-pale);font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .vehicle-card__status{left:auto;right:12px;color:#e8c3c3;border-color:rgba(232,195,195,.3)} .vehicle-card__body{display:flex;flex-direction:column;gap:14px;padding:18px 18px 20px;flex:1 1 auto} .vehicle-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .vehicle-card__head>div{flex:1 1 auto;min-width:0} .vehicle-card__make{display:block;color:var(--gold); font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase} .vehicle-card__name{margin:7px 0 0;color:var(--cream);overflow-wrap:break-word; font:600 clamp(19px,1.6vw,24px)/1.06 var(--display);letter-spacing:.01em;text-transform:uppercase} .vehicle-card__price{flex:none;text-align:right;white-space:nowrap} .vehicle-card__price strong{display:block;color:var(--cream); font:600 clamp(19px,1.55vw,23px)/1 var(--display)} .vehicle-card__price span{display:block;margin-top:5px;color:var(--muted); font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .vehicle-card__specs{display:flex;flex-wrap:wrap;gap:5px 14px;list-style:none} .vehicle-card__specs li{color:var(--mist); font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase} .vehicle-card__specs li.is-power{color:var(--gold-pale);font-weight:800} .vehicle-card__specs li+li{position:relative;padding-left:15px} .vehicle-card__specs li+li::before{content:'';position:absolute;left:0;top:50%; width:6px;height:1px;background:var(--line)} .vehicle-card__cta{display:block;margin-top:auto;padding:12px;text-align:center; border:1px solid var(--gold);color:var(--gold-pale); font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; transition:background .22s ease,color .22s ease} /* the link covers the whole card, so hovering anywhere lights the button */ .vehicle-card:hover .vehicle-card__cta, .vehicle-card:focus-within .vehicle-card__cta{background:var(--gold);color:#141216} .vehicle-card__link{position:absolute;inset:0;z-index:3} .vehicle-card__link:focus-visible{outline:2px solid var(--gold-pale);outline-offset:-4px} /* ========================================================================== Collection / editorial blocks ========================================================================== */ .collection{padding:96px 0;background:var(--ink-soft)} .collection--alt{background:var(--ink)} .manifesto{display:grid;grid-template-columns:1fr 1.1fr;gap:70px; align-items:center;padding:104px 0} .manifesto__copy{min-width:0} .manifesto h2{font-size:clamp(32px,4vw,62px)} .manifesto p:not(.kicker){max-width:52ch;margin:22px 0 26px;color:var(--mist);font-size:16px} .manifesto--presence img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-soft)} .pillars{padding:88px 0} .pillars>div{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:38px} .pillars article{padding-top:18px;border-top:1px solid var(--line-soft)} .pillars b{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.18em} .pillars h3{margin:18px 0 10px;font-family:var(--display);font-size:26px; font-weight:600;text-transform:uppercase;letter-spacing:.01em} .pillars p{color:var(--muted)} .requirements-band{padding:32px 0;border-block:1px solid var(--line-soft);background:var(--ink-soft)} .requirements-band .kicker{margin-bottom:10px} .requirements-band__text{max-width:82ch;color:var(--mist);font-size:14px;line-height:1.75} .final-cta{padding:var(--section) 0;background:var(--ink-soft); border-block:1px solid var(--line-soft);color:var(--cream)} .final-cta .shell{display:flex;align-items:center;justify-content:space-between; gap:28px;flex-wrap:wrap} .final-cta .kicker{color:var(--gold)} .final-cta h2{font-size:clamp(30px,3.4vw,50px)} /* ========================================================================== Vehicle detail ========================================================================== */ .vehicle-overview{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;padding:64px 0 72px;align-items:start} .vehicle-overview__copy{min-width:0} .vehicle-overview h2{font-size:clamp(28px,3.2vw,46px)} .vehicle-description{max-width:58ch;margin-top:22px;color:var(--mist)} .vehicle-book{align-self:start;min-width:0;padding:26px; background:var(--ink-card);border-top:2px solid var(--gold)} .vehicle-book h3{margin:10px 0 8px;font-family:var(--display);font-size:32px; font-weight:600;text-transform:uppercase;letter-spacing:.01em} .vehicle-book__lede{color:var(--mist);font-size:13px} .vehicle-details{padding:52px 0 72px;background:var(--ink-soft)} .rate-table{margin-top:0;padding-top:0;border-top:0} .rate-table>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:20px} .rate-table article{padding:0 18px;border-left:1px solid var(--line-soft)} .rate-table article:first-child{padding-left:0;border-left:0} .rate-table span{display:block;color:var(--muted); font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .rate-table strong{display:block;margin-top:7px;color:var(--gold-pale); font-family:var(--display);font-size:30px;font-weight:600;line-height:1} .rate-table strong em{margin-left:5px;color:var(--muted);font-style:normal; font:800 8px var(--sans);letter-spacing:.14em;text-transform:uppercase} .rate-table small{display:block;margin-top:22px;max-width:80ch;color:var(--muted);line-height:1.7} .gallery{display:grid;grid-template-columns:.65fr 1.35fr;gap:44px;padding:88px 0} .gallery h2{font-size:clamp(28px,3.2vw,44px)} .gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .gallery-grid img{width:100%;aspect-ratio:1.05;object-fit:cover} /* ========================================================================== Booking widget ========================================================================== */ .vanta-booking{display:grid;gap:14px;margin-top:20px} .vanta-booking label{display:grid;gap:6px;color:var(--gold-pale); font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .vanta-booking label i{margin-left:6px;color:var(--muted);font-style:normal;font-weight:700;letter-spacing:.1em} .vanta-booking input,.vanta-booking textarea{width:100%;max-width:100%;padding:12px;border-radius:0; border:1px solid var(--line);background:var(--ink);color:var(--cream); font-family:inherit;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none; transition:border-color .2s ease} .vanta-booking input:focus,.vanta-booking textarea:focus{ border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px} .vanta-booking textarea{resize:vertical} .vanta-booking__dates{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* who we are calling back — collected in the same step as the dates */ .vanta-booking__fields{display:grid;grid-template-columns:1fr 1fr;gap:10px; padding-top:14px;border-top:1px solid var(--line-soft)} .vanta-booking__fields label.is-wide{grid-column:1/-1} .vanta-booking__fineprint{margin:0;color:var(--muted);font-size:11px;line-height:1.6} .vanta-booking__summary{display:grid;gap:5px;padding:14px; border:1px solid var(--line-soft);background:#0f0f12} .vanta-booking__summary span,.vanta-booking__summary small{color:var(--mist);font-size:11px} .vanta-booking__terms{display:grid;gap:6px;list-style:none} .vanta-booking__terms li{position:relative;padding-left:16px;color:var(--mist); font-size:11px;line-height:1.5} .vanta-booking__terms li::before{content:'';position:absolute;left:0;top:6px; width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)} .vanta-booking__offline{padding:12px;border:1px solid var(--line-soft); background:#0f0f12;color:var(--mist);font-size:12px} .vanta-booking__offline a{color:var(--gold-pale);text-decoration:underline} .vanta-booking__message{min-height:15px;margin:0;font-size:11px;color:var(--mist)} .vanta-booking__message.is-error{color:#e8a5a5} .vanta-booking button:disabled{opacity:.65;cursor:wait} /* what replaces the form once a request is sent */ .vanta-booking__done{display:grid;gap:10px;justify-items:start;margin-top:20px;padding:24px; border:1px solid var(--gold-deep);background:linear-gradient(180deg,rgba(237,198,119,.09),transparent)} .vanta-booking__done-mark{display:grid;place-items:center;width:34px;height:34px; background:var(--gold);color:#141216;font-size:17px;font-weight:800} .vanta-booking__done h4{margin:0;color:var(--gold-pale);font-family:var(--display); font-size:24px;font-weight:600;letter-spacing:.02em;text-transform:uppercase} .vanta-booking__done p{margin:0;color:var(--mist);font-size:13px;line-height:1.7} .vanta-quote{display:grid;gap:8px;margin:0} .vanta-quote>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .vanta-quote dt{color:var(--muted);font-size:9.5px;font-weight:800; letter-spacing:.13em;text-transform:uppercase} .vanta-quote dd{margin:0;color:var(--cream);font-size:14px;font-weight:600} .vanta-quote .is-subtotal{margin-top:2px;padding-top:9px;border-top:1px dashed var(--line-soft)} .vanta-quote .is-subtotal dt{color:var(--mist)} .vanta-quote .is-subtotal dd{color:var(--cream);font-size:16px} .vanta-quote .is-total{margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft)} .vanta-quote .is-total dt{color:var(--gold-pale)} .vanta-quote .is-total dd{color:var(--gold-pale);font-family:var(--display);font-size:24px} .vanta-quote__saving{margin:10px 0 0;color:var(--gold-pale);font-size:11px} /* ========================================================================== Contact / forms / generic pages ========================================================================== */ .contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;padding:88px 0} .contact-grid h2{font-family:var(--display);font-size:30px;font-weight:600; text-transform:uppercase;margin-bottom:16px} .contact-details p{margin:0 0 8px} .contact-details a{color:var(--gold-pale)} .contact-details address{margin:14px 0;color:var(--mist);font-style:normal;line-height:1.7} .vanta-request-form{display:grid;grid-template-columns:1fr 1fr;gap:14px} .vanta-request-form label{display:grid;gap:6px;color:var(--gold-pale); font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .vanta-request-form label.is-wide{grid-column:1/-1} .vanta-request-form input,.vanta-request-form textarea{width:100%;padding:12px;border-radius:0; border:1px solid var(--line);background:var(--ink);color:var(--cream); font-size:13px;letter-spacing:0;text-transform:none} .vanta-request-form__terms{grid-column:1/-1;margin:0;color:var(--muted);font-size:11px} .vanta-request-form .button{grid-column:1/-1;justify-self:start} .vanta-notice{padding:14px 16px;margin:0 0 20px;border-left:3px solid var(--gold); background:rgba(197,165,107,.12);color:#efe9dc;font-size:13px} .vanta-notice--error{border-color:#c36d6d;background:rgba(195,109,109,.12)} .legal-content{max-width:76ch;padding:80px 0;color:var(--mist)} .legal-content h2{margin-top:36px;color:var(--cream);font-size:32px} .legal-content p{margin-bottom:16px} .legal-content .button{margin-top:20px} .service-cards,.about-steps{padding:0 0 88px} .service-cards .shell,.about-steps .shell{display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)} .service-cards article,.about-steps article{padding:30px; border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .service-cards span,.about-steps b{color:var(--gold); font-size:10px;font-weight:800;letter-spacing:.18em} .service-cards h2,.about-steps h2{margin:26px 0 12px;font-size:28px} .service-cards p,.about-steps p{color:var(--muted)} .dark-quote{padding:88px 0;background:var(--ink-soft)} .dark-quote h2{max-width:18ch;font-size:clamp(30px,3.6vw,54px)} .dark-quote .shell>p:not(.kicker){max-width:52ch;margin-top:20px;color:var(--mist);font-size:16px} .dark-quote .button{margin-top:24px} /* ========================================================================== Footer ========================================================================== */ .site-footer{padding:72px 0 20px;background:var(--ink)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.1fr; gap:44px;padding-bottom:52px} .footer-brand{min-width:0} .site-footer .vanta-logo{max-height:40px} .site-footer .vanta-logo__type{font-size:16px;white-space:normal} .footer-statement{max-width:34ch;margin-top:16px;color:var(--muted)} .footer-grid h2{margin:2px 0 14px;color:var(--gold);font-family:var(--sans); font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase} .footer-grid>div>a:not(.brand){display:block;margin:7px 0;color:#d5cfc4;font-size:13px} .footer-grid>div>a:not(.brand):hover{color:var(--gold-pale)} .footer-menu{list-style:none} .footer-menu a{display:block;margin:7px 0;color:#d5cfc4;font-size:13px} .footer-grid address{margin:12px 0;color:var(--muted);font-style:normal; font-size:13px;line-height:1.7} .footer-grid p{color:var(--muted);font-size:13px} .footer-hours{color:var(--gold-pale)!important;font-size:11px;letter-spacing:.06em} .footer-requirements{max-width:32ch;line-height:1.7} .footer-social{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px;list-style:none} .footer-social a{color:var(--gold-pale);font-size:9px;font-weight:800; letter-spacing:.15em;text-transform:uppercase} .footer-social a:hover{color:var(--cream)} .footer-cta{display:inline-block;margin-top:14px;padding:11px 16px; border:1px solid var(--gold);color:var(--gold-pale); font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .footer-cta:hover{background:var(--gold);color:#141216} .footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; padding-top:20px;border-top:1px solid var(--line-soft); color:#82827b;font-size:10px;letter-spacing:.06em} /* ========================================================================== Hero detail ========================================================================== */ .vanta-icon{display:block;stroke:currentColor} .hero-copy h1{letter-spacing:.06em} .hero-sub{max-width:48ch;margin:22px 0 30px;color:#d8d4ca; font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase} .hero-badge{display:inline-flex;align-items:center;gap:12px;margin:34px 0 0} .hero-badge__pin{display:grid;place-items:center;width:34px;height:34px;flex:none; border:1px solid var(--line);border-radius:50%;color:var(--gold)} .hero-badge strong{display:block;color:var(--cream); font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .hero-badge em{display:block;margin-top:3px;color:var(--muted);font-style:normal; font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase} /* ========================================================================== Featured fleet ========================================================================== */ .featured{padding:88px 0;background:var(--ink)} .rule-head{display:flex;align-items:center;gap:22px;margin-bottom:34px} .rule-head h2{flex:0 1 auto;min-width:0;font-size:clamp(20px,2.6vw,36px);letter-spacing:.1em} .rule-head__line{flex:1;height:1px;background:var(--line)} .rule-head .text-link{flex:none} /* The homepage used to have its own lighter card. It now runs the fleet card, so this is only a layout alias — kept so any saved markup still lines up. */ .feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} /* ========================================================================== Services ========================================================================== */ .services{position:relative;overflow:hidden;background:var(--ink-soft); border-block:1px solid var(--line-soft)} .services__bg{position:absolute;inset:0; background:url('assets/images/vanta-concierge-interior.png') right center/58% auto no-repeat; opacity:.5} .services__bg::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--ink-soft) 30%,rgba(16,18,16,.65) 62%,rgba(16,18,16,.25))} .services__inner{position:relative;z-index:1;display:grid; grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;padding:88px 0} .services__lead{min-width:0} .services__lead h2{font-size:clamp(28px,3.2vw,46px);letter-spacing:.05em} .services__lead p{max-width:44ch;margin:22px 0 26px;color:var(--mist)} .services__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 22px;list-style:none} .services__grid li{text-align:center;min-width:0} .services__icon{display:grid;place-items:center;height:44px;margin-bottom:16px;color:var(--gold)} .services__icon .vanta-icon{margin-inline:auto} .services__grid h3{margin-bottom:9px;color:var(--cream);font-family:var(--sans); font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .services__grid p{color:var(--muted);font-size:12px;line-height:1.65} /* ========================================================================== Assurance bar ========================================================================== */ .assurance{background:var(--ink);border-bottom:1px solid var(--line-soft)} .assurance ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;padding:34px 0;list-style:none} .assurance li{display:flex;align-items:flex-start;gap:14px;min-width:0} .assurance__icon{flex:none;color:var(--gold);margin-top:1px} .assurance__text strong{display:block;color:var(--gold-pale); font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .assurance__text span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.6} /* ========================================================================== Page hero with photography ========================================================================== */ .page-hero{position:relative;overflow:hidden} .page-hero>.shell{position:relative;z-index:2} .page-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .page-hero__shade{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(8,8,11,.96) 18%,rgba(8,8,11,.7) 48%,rgba(8,8,11,.18)), linear-gradient(0deg,rgba(8,8,11,.9),transparent 62%)} .page-hero__rule{display:block;width:96px;height:1px;margin-top:30px;background:var(--gold)} /* ========================================================================== 404 — a way back in rather than a dead end ========================================================================== */ .page-hero--notfound{padding:168px 0 74px;background:var(--ink-soft); border-bottom:1px solid var(--line-soft)} .page-hero--notfound .kicker{font-size:13px;letter-spacing:.3em} .notfound{padding:70px 0 90px} .notfound__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px;margin-top:58px;padding-top:44px;border-top:1px solid var(--line-soft)} @media (max-width:900px){ .notfound__links{grid-template-columns:1fr;gap:28px} .page-hero--notfound{padding:128px 0 52px} } /* ========================================================================== Reviews — only ever rendered when real ones have been entered ========================================================================== */ .reviews{padding:86px 0 94px;background:var(--ink-soft); border-block:1px solid var(--line-soft)} .reviews h2{margin:0 0 18px;font-size:clamp(26px,3.2vw,42px)} .reviews__average{display:flex;align-items:center;gap:12px;margin:0 0 34px; color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .stars{display:inline-flex;gap:3px;line-height:1} .stars i{font-style:normal;color:rgba(237,198,119,.24);font-size:14px} .stars i.is-on{color:var(--gold)} .reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;margin:0;padding:0;list-style:none;background:var(--line-soft)} .review{display:flex;flex-direction:column;gap:13px;padding:30px 28px;background:var(--ink)} .review__text{margin:0;color:var(--mist);font-size:15px;line-height:1.75} .review__by{margin:auto 0 0;color:var(--cream);font-size:12px;font-weight:700; letter-spacing:.06em} .review__by span{display:block;margin-top:3px;color:var(--muted);font-size:10px; font-weight:600;letter-spacing:.12em;text-transform:uppercase} @media (max-width:767px){ .reviews{padding:58px 0 64px} } /* ========================================================================== Guides — the index and the reading page Deliberately narrower and plainer than the rest of the site. Everything else here is built to sell a car; this is built to be read, and the job of the layout is to stay out of the way. ========================================================================== */ .shell--narrow{width:min(100% - 48px,72ch);margin-inline:auto} .page-hero--guides{padding:150px 0 64px;background:var(--ink-soft); border-bottom:1px solid var(--line-soft)} .guides-section{padding:74px 0 90px} .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px;margin:0;padding:0;list-style:none;background:var(--line-soft)} .guide-card{display:flex;flex-direction:column;gap:9px;padding:28px 26px 26px; background:var(--ink);transition:background .22s ease} .guide-card:hover{background:var(--ink-card)} .guide-card h3{margin:0;font-family:var(--display);font-size:19px;font-weight:600; line-height:1.3;letter-spacing:.005em;text-transform:none} .guide-card h3 a{color:var(--cream)} .guide-card:hover h3 a{color:var(--gold-pale)} .guide-card p{margin:0;color:var(--mist);font-size:13.5px;line-height:1.65} .guide-card__meta{margin-top:auto;padding-top:6px;color:var(--muted); font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .guide__head{padding:142px 0 42px;background:var(--ink-soft); border-bottom:1px solid var(--line-soft)} .guide__head h1{margin:0 0 14px;font-size:clamp(28px,4vw,46px);letter-spacing:.01em} .guide__dek{margin:0 0 16px;color:var(--mist);font-size:17px;line-height:1.6} .guide__meta{margin:0;color:var(--muted);font-size:9px;font-weight:800; letter-spacing:.15em;text-transform:uppercase} .guide__body{padding:52px 0 90px} .guide__intro{margin:0 0 34px;color:var(--cream);font-size:17.5px;line-height:1.75} .guide__toc{margin:0 0 42px;padding:22px 24px;background:var(--ink-card); border-left:2px solid var(--gold-deep)} .guide__toc h2{margin:0 0 12px;color:var(--muted);font-family:var(--sans); font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .guide__toc ol{margin:0;padding-left:20px;display:grid;gap:7px; color:var(--muted);font-size:14px} .guide__toc a{color:var(--gold-pale)} .guide__toc a:hover{color:var(--cream)} .guide__section{margin:0 0 38px} /* Sentence case, not the site-wide caps. Eight capitalised headings down a page of body copy reads as shouting, and caps are measurably slower to read at this length — which is the opposite of what this page is for. */ .guide__section h2, .guide__faq h2, .guide__cta h2, .guide__head h1{text-transform:none;letter-spacing:.005em;line-height:1.2} .guide__section h2{margin:0 0 14px;font-family:var(--display); font-size:clamp(20px,2.5vw,26px);font-weight:600;scroll-margin-top:110px} .guide__section p{margin:0 0 15px;color:var(--mist);font-size:16px;line-height:1.8} .guide__section p:last-child{margin-bottom:0} .guide__faq{margin:52px 0 0;padding-top:38px;border-top:1px solid var(--line-soft)} .guide__faq h2{margin:0 0 22px;font-family:var(--display);font-size:24px;font-weight:600} .guide__faq dl{margin:0;display:grid;gap:22px} .guide__faq dt{color:var(--cream);font-size:15px;font-weight:700;line-height:1.5} .guide__faq dd{margin:7px 0 0;color:var(--mist);font-size:15px;line-height:1.75} .guide__cta{margin:52px 0 0;padding:32px 30px;background:var(--ink-card); border:1px solid var(--line-soft)} .guide__cta h2{margin:0 0 12px;font-family:var(--display);font-size:22px;font-weight:600} .guide__cta p{margin:0 0 18px;color:var(--mist);font-size:15px;line-height:1.75} .guide__cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0} .guide__more{margin:46px 0 0;padding-top:32px;border-top:1px solid var(--line-soft)} .guide__more h2{margin:0 0 14px;color:var(--muted);font-family:var(--sans); font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .guide__more ul{margin:0;padding:0;list-style:none;display:grid;gap:9px} .guide__more a{color:var(--gold-pale);font-size:15px} .guide__more a:hover{color:var(--cream)} /* ========================================================================== Landing cross-links — seventeen areas and ten marques need to find each other, or the ones the footer cannot fit rank for nothing ========================================================================== */ .landing-links{padding:66px 0 76px;background:var(--ink-soft); border-top:1px solid var(--line-soft)} .landing-links .shell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px} .landing-links__set h2{margin:0 0 14px;color:var(--muted);font-family:var(--sans); font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .landing-links__set ul{margin:0;padding:0;list-style:none; display:flex;flex-wrap:wrap;gap:7px 16px} .landing-links__set a{color:var(--gold-pale);font-size:13.5px} .landing-links__set a:hover{color:var(--cream)} @media (max-width:900px){ .landing-links .shell{grid-template-columns:1fr;gap:28px} .guide__head{padding:120px 0 34px} .guides-section{padding:52px 0 66px} } /* ========================================================================== Closing band ========================================================================== */ .closing-band{padding:56px 0;background:var(--ink-soft);border-top:1px solid var(--line-soft)} .closing-band .shell{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .closing-band__mark{flex:none;color:var(--gold);opacity:.85} .closing-band h2{flex:1 1 300px;font-size:clamp(22px,2.5vw,34px);letter-spacing:.05em;line-height:1.15} .closing-band h2 em{color:var(--muted);font-style:normal} .closing-band p{flex:1 1 240px;max-width:40ch;color:var(--muted);font-size:13px} .closing-band .button{flex:none} .closing-band__tag{flex-basis:100%;margin-top:-4px;color:var(--gold); font-size:9px;font-weight:800;letter-spacing:.24em;text-transform:uppercase} /* ========================================================================== Experiences page ========================================================================== */ .xp-hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch; background:var(--ink);border-bottom:1px solid var(--line-soft)} .xp-hero__copy{display:flex;flex-direction:column;justify-content:center; padding:150px 56px 76px max(24px,calc((100vw - var(--shell))/2))} .xp-hero__copy h1{font-size:clamp(32px,4.4vw,62px);letter-spacing:.02em} .xp-hero__rule{display:block;width:96px;height:1px;margin:26px 0;background:var(--gold)} .xp-hero__copy p{max-width:46ch;margin-bottom:14px;color:var(--mist);font-size:15px} .xp-hero__media{position:relative;min-height:420px} .xp-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .xp-hero__media::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--ink),transparent 34%)} .expect{padding:72px 0;background:var(--ink-soft);border-bottom:1px solid var(--line-soft)} .expect__eyebrow{text-align:center;margin:0 0 34px;font-size:10px;font-weight:800;line-height:1.6} h2.kicker{font-family:var(--sans)} .expect__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;list-style:none;counter-reset:none} .expect__grid li{padding:0 22px;border-left:1px solid var(--line-soft);min-width:0} .expect__grid li:first-child{border-left:0;padding-left:0} .expect__grid li:last-child{padding-right:0} .expect__icon{display:block;margin-bottom:18px;color:var(--gold)} .expect__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .expect__head b{color:rgba(232,211,165,.62);font-family:var(--display); font-size:26px;font-weight:600;line-height:1} .expect__grid h3{color:var(--cream);font-family:var(--sans); font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .expect__grid p{color:var(--muted);font-size:12px;line-height:1.65} .elevated{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;background:var(--ink)} .elevated__copy{display:flex;flex-direction:column;justify-content:center; padding:76px 56px 76px max(24px,calc((100vw - var(--shell))/2))} .elevated__copy h2{font-size:clamp(28px,3.4vw,48px)} .elevated__list{margin:26px 0 30px;list-style:none;display:grid;gap:0} .elevated__list li{display:flex;align-items:center;gap:13px;padding:13px 0; border-bottom:1px solid var(--line-soft);color:var(--mist);font-size:14px} .elevated__list li:first-child{border-top:1px solid var(--line-soft)} .elevated__list span{flex:none;color:var(--gold)} .elevated__copy .button{align-self:start} /* One photograph, not a collage. The image is taken out of flow, so its height is the column's height whatever the copy beside it does — and it needs no entry in the hostile-CSS block below: inset:0 and the clipping box already bound it, with or without a stylesheet forcing img{height:auto}. */ .elevated__image{position:relative;min-height:560px;overflow:hidden} .elevated__image img{position:absolute;inset:0;display:block; width:100%;height:100%;object-fit:cover;object-position:74% 58%} /* ========================================================================== The booking band — price, the discount, and the dates, straight under the photographs. This is what the page is for; everything below it supports it. ========================================================================== */ .book-band{padding:0 0 10px;background:var(--ink);scroll-margin-top:88px} .book-band__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch;border:1px solid var(--line);border-radius:3px;overflow:hidden} .book-band__price{padding:34px 34px 32px; background:linear-gradient(165deg,var(--ink-card),var(--ink-soft)); border-right:1px solid var(--line-soft)} .book-band__rate{display:flex;align-items:baseline;gap:9px;margin:6px 0 0} .book-band__rate strong{color:var(--cream);font-family:var(--display); font-size:clamp(38px,5vw,58px);font-weight:600;line-height:1;letter-spacing:-.01em} .book-band__rate span{color:var(--muted);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase} /* The discount applies automatically, so the only way it ever wins a second day is if somebody is told about it before they choose the dates. */ .book-band__deal{display:flex;align-items:flex-start;gap:11px;margin:18px 0 0; padding:13px 15px;border-radius:2px;background:rgba(237,198,119,.09); border-left:2px solid var(--gold);color:var(--mist);font-size:13px;line-height:1.6} .book-band__deal strong{color:var(--gold-pale)} .book-band__deal-tag{flex:none;padding:4px 9px;border-radius:2px;background:var(--gold); color:#141216;font-size:10px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;white-space:nowrap} .book-band__facts{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px} .book-band__facts li{display:flex;gap:8px;align-items:baseline; color:var(--muted);font-size:13px;line-height:1.5} .book-band__facts span{color:var(--cream);font-weight:700;white-space:nowrap} .book-band__steps{margin:24px 0 0;padding:22px 0 0;list-style:none; display:grid;gap:13px;border-top:1px solid var(--line-soft)} .book-band__steps li{display:flex;gap:11px;align-items:flex-start; color:var(--mist);font-size:13px;line-height:1.6} .book-band__steps span{flex:none;display:grid;place-items:center; width:21px;height:21px;border-radius:50%;border:1px solid var(--line); color:var(--gold);font-size:10px;font-weight:800} .book-band__call{margin:22px 0 0;color:var(--muted);font-size:13px} .book-band__call a{color:var(--gold);font-weight:700;white-space:nowrap} .book-band__form{padding:34px 34px 32px} .book-band__form h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,30px)} /* The multi-day deal, on the gold slab at the very top of the page. */ .viewer__price-deal{display:block;margin-top:6px;text-align:center; color:var(--gold-pale);font-size:10px;font-weight:800; letter-spacing:.11em;text-transform:uppercase} /* The overview no longer shares its row with the booking column. */ .vehicle-overview--solo{grid-template-columns:1fr} @media (max-width:1023px){ .book-band__inner{grid-template-columns:1fr} .book-band__price{border-right:0;border-bottom:1px solid var(--line-soft)} } @media (max-width:767px){ .book-band__price,.book-band__form{padding:26px 20px 24px} .book-band__deal{flex-direction:column;gap:8px} } /* ========================================================================== Vehicle viewer — main image with the rest of the shoot beneath it ========================================================================== */ .viewer{padding:118px 0 0} .viewer__crumbs{display:flex;gap:9px;align-items:center;margin-bottom:22px; color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .viewer__crumbs a{color:var(--gold-pale)} .viewer__crumbs a:hover{color:var(--cream)} .viewer__head{display:flex;align-items:flex-end;justify-content:space-between; gap:26px 34px;flex-wrap:wrap;margin-bottom:22px} .viewer__ident{flex:1 1 320px;min-width:0} .viewer__head h1{font-size:clamp(28px,4vw,58px);letter-spacing:.02em} /* The daily rate is the first thing a renter looks for, so it is a solid gold slab rather than a caption — the same treatment as the price tag on a fleet card, mirrored so the cut corner faces the headline. */ .viewer__price{flex:0 0 auto;display:block;text-decoration:none;white-space:nowrap; filter:drop-shadow(0 20px 34px rgba(0,0,0,.6))} .viewer__price-slab{display:block;min-width:248px;padding:16px 26px 15px 24px; background:linear-gradient(104deg,var(--gold-pale),var(--gold) 44%,#d9b466); clip-path:polygon(0 0,100% 0,100% 100%,17px 100%); transition:transform .3s cubic-bezier(.2,.7,.2,1)} .viewer__price-from{display:block;color:rgba(20,18,22,.8); font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .viewer__price-figure{display:flex;align-items:baseline;gap:8px;margin-top:6px; color:#141216;font:700 clamp(36px,3.7vw,52px)/1 var(--display);letter-spacing:-.02em} .viewer__price-figure em{color:rgba(20,18,22,.8);font-style:normal; font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} .viewer__price-cta{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px; border-top:1px solid rgba(20,18,22,.22);color:rgba(20,18,22,.78); font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .viewer__price-cta svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .viewer__price:hover .viewer__price-slab{transform:translateY(-3px)} .viewer__price:hover .viewer__price-cta svg{transform:translateX(5px)} .viewer__price:focus-visible{outline:none} .viewer__price:focus-visible .viewer__price-slab{outline:2px solid var(--cream);outline-offset:4px} .viewer__stage{position:relative;aspect-ratio:3/2;overflow:hidden; background:#0f0f12;border:1px solid var(--line-soft)} /* contain, not cover. A gallery holds photographs of different shapes and subjects; cropping them all to one frame is what cut the cars in half and turned an interior shot into a close-up of a door handle. The stage is 3:2 because that is what most of these were shot at, so the common case fills it edge to edge and the odd one out is letterboxed against the same ink the page is already made of. */ .viewer__stage img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:50% 50%; transition:opacity .3s ease} .viewer__status{position:absolute;top:14px;right:14px;padding:6px 12px; background:rgba(10,10,12,.85);border:1px solid rgba(232,195,195,.32);color:#e8c3c3; font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .viewer__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr; gap:10px;margin-top:10px;list-style:none} .viewer__thumb{display:block;width:100%;padding:0;border:1px solid var(--line-soft); background:#0f0f12;cursor:pointer;overflow:hidden;position:relative; transition:border-color .22s ease,opacity .22s ease} .viewer__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;opacity:.62; transition:opacity .22s ease,transform .5s cubic-bezier(.2,.7,.2,1)} .viewer__thumb:hover img{opacity:.9;transform:scale(1.05)} .viewer__thumb.is-active{border-color:var(--gold)} .viewer__thumb.is-active img{opacity:1} /* ========================================================================== Performance panel — the four figures buyers scan first ========================================================================== */ .perf{padding:0 0 4px;margin-top:34px} .perf__grid{display:grid;grid-template-columns:repeat(var(--perf-cols,4),minmax(0,1fr));gap:1px; list-style:none;background:var(--line-soft);border:1px solid var(--line-soft)} .perf__grid li{position:relative;display:flex;flex-direction:column;gap:8px; padding:22px 20px 20px;background:var(--ink-card);overflow:hidden; transition:background .28s ease} .perf__grid li::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .38s cubic-bezier(.2,.7,.2,1)} .perf__grid li:hover{background:var(--ink-raise)} .perf__grid li:hover::after{transform:scaleX(1)} .perf__icon{color:var(--gold);opacity:.85} .perf__figure{display:flex;align-items:baseline;gap:5px;color:var(--cream); font:600 clamp(26px,2.7vw,38px)/1 var(--display);letter-spacing:-.01em} .perf__figure.is-compact{font-size:clamp(20px,2vw,27px);letter-spacing:.02em} .perf__figure em{color:var(--gold-pale);font-style:normal; font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} .perf__label{color:var(--muted);font-size:9px;font-weight:800; letter-spacing:.16em;text-transform:uppercase} /* ========================================================================== Compact specification list ========================================================================== */ .spec-title{margin:38px 0 4px;color:var(--cream);font-family:var(--display); font-size:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .spec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px;margin:14px 0 0} .spec-list>div{display:flex;align-items:baseline;justify-content:space-between; gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft); transition:border-color .22s ease} .spec-list>div:hover{border-bottom-color:var(--gold)} .spec-list dt{color:var(--muted);font-size:9.5px;font-weight:800; letter-spacing:.15em;text-transform:uppercase;white-space:nowrap} .spec-list dd{margin:0;color:var(--cream);font-size:14px;font-weight:600;text-align:right} /* ========================================================================== Fleet page — stronger presence ========================================================================== */ .page-hero--fleet{padding:150px 0 88px} .page-hero--fleet h1{font-size:clamp(40px,6.6vw,88px)} .fleet-tools{background:linear-gradient(180deg,var(--ink-raise),var(--ink-soft)); border-color:var(--line)} .fleet-count{display:flex;align-items:center;gap:12px} .fleet-count::after{content:'';flex:1;height:1px;background:var(--line-soft)} .vehicle-card{background:linear-gradient(180deg,var(--ink-card),var(--ink-soft))} .vehicle-card:hover{border-color:var(--gold); box-shadow:0 24px 60px -32px rgba(0,0,0,.9)} .vehicle-card__media::after{content:'';position:absolute;inset:0; background:linear-gradient(0deg,rgba(10,10,12,.72),transparent 46%);pointer-events:none} /* the price rides on the photograph, so it reads at a glance */ .vehicle-card__tag{position:absolute;left:0;bottom:0;z-index:2; display:flex;align-items:baseline;gap:6px;padding:11px 16px 11px 18px; background:linear-gradient(100deg,var(--gold),#dcb96d); clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)} .vehicle-card__tag strong{color:#141216;font:700 24px/1 var(--display);letter-spacing:-.01em} .vehicle-card__tag span{color:rgba(20,18,22,.7);font-size:9px;font-weight:800; letter-spacing:.13em;text-transform:uppercase} .vehicle-card__body{gap:12px;padding:17px 18px 18px} .vehicle-card__name{font-size:clamp(20px,1.7vw,25px)} .vehicle-card__specs li{color:var(--mist)} .vehicle-card__cta{position:relative;overflow:hidden} .vehicle-card__cta::after{content:'';position:absolute;inset:0;background:var(--gold); transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:-1} .vehicle-card:hover .vehicle-card__cta{border-color:var(--gold-pale)} .vehicle-card__chip{flex:none;padding:5px 9px;border:1px solid var(--line-soft); color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} /* ========================================================================== Split editorial block (chauffeur, about) ========================================================================== */ .split{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;background:var(--ink)} .split--reverse .split__copy{order:2} .split--reverse .split__media{order:1} .split__copy{display:flex;flex-direction:column;justify-content:center;gap:16px; padding:82px 56px 82px max(24px,calc((100vw - var(--shell))/2))} .split--reverse .split__copy{padding:82px max(24px,calc((100vw - var(--shell))/2)) 82px 56px} .split__copy h2{font-size:clamp(28px,3.4vw,50px)} .split__copy p{max-width:48ch;color:var(--mist)} .split__copy .button{align-self:start;margin-top:8px} .split__media{position:relative;min-height:440px} .split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split__media::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--ink),transparent 30%)} .split--reverse .split__media::after{background:linear-gradient(270deg,var(--ink),transparent 30%)} .services--plain{background:var(--ink-soft)} .services--plain .shell{padding:80px 0} .services__grid--wide{grid-template-columns:repeat(4,minmax(0,1fr));text-align:left} .services__grid--wide li{text-align:left} .services__grid--wide .services__icon{place-items:start} .services__grid--wide .services__icon .vanta-icon{margin-inline:0} .expect--four .expect__grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* ========================================================================== Proof bar (about) ========================================================================== */ .proof{background:var(--ink-soft);border-block:1px solid var(--line-soft)} .proof ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;padding:40px 0;list-style:none} .proof li{display:flex;flex-direction:column;gap:6px;padding-left:18px; border-left:1px solid var(--line-soft)} .proof li:first-child{padding-left:0;border-left:0} .proof strong{color:var(--gold-pale);font:600 clamp(30px,3.4vw,46px)/1 var(--display)} .proof span{color:var(--muted);font-size:9px;font-weight:800; letter-spacing:.16em;text-transform:uppercase} /* ========================================================================== Values (about) ========================================================================== */ .values{padding:82px 0;background:var(--ink);border-top:1px solid var(--line-soft)} .values__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;list-style:none;background:var(--line-soft);border:1px solid var(--line-soft)} .values__grid li{display:flex;gap:16px;padding:26px 24px;background:var(--ink-card); transition:background .25s ease} .values__grid li:hover{background:var(--ink-raise)} .values__icon{flex:none;color:var(--gold);margin-top:2px} .values__grid h3{margin-bottom:8px;color:var(--cream);font-family:var(--sans); font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .values__grid p{color:var(--muted);font-size:13px;line-height:1.7} /* ========================================================================== Contact ========================================================================== */ .contact-cards{background:var(--ink-soft);border-bottom:1px solid var(--line-soft)} .contact-cards ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;padding:40px 0;list-style:none} .contact-cards li{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px; background:var(--ink-card);border:1px solid var(--line-soft); transition:border-color .25s ease} .contact-cards li:hover{border-color:var(--gold)} .contact-cards__icon{color:var(--gold);margin-bottom:4px} .contact-cards h2{color:var(--gold-pale);font-family:var(--sans); font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .contact-cards a{color:var(--cream);font-family:var(--display);font-size:22px; font-weight:600;letter-spacing:.01em;word-break:break-word} .contact-cards a:hover{color:var(--gold-pale)} .contact-cards address{color:var(--cream);font-style:normal;font-size:15px;line-height:1.6} .contact-cards p{color:var(--muted);font-size:12px} .contact-grid{display:block;padding:0} .contact-grid__inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;padding:80px 0} .contact-aside h2{font-size:clamp(26px,3vw,42px);margin-bottom:22px} .contact-steps{list-style:none;display:grid;gap:0} .contact-steps li{display:flex;gap:14px;padding:13px 0; border-bottom:1px solid var(--line-soft);color:var(--mist);font-size:14px} .contact-steps li:first-child{border-top:1px solid var(--line-soft)} .contact-steps b{flex:none;color:var(--gold);font-family:var(--display); font-size:14px;font-weight:600} .contact-note{margin-top:20px;color:var(--muted);font-size:12px;line-height:1.7} .contact-form-wrap{padding:32px;background:var(--ink-card);border-top:2px solid var(--gold)} .contact-form-wrap h2{margin-bottom:20px;font-size:clamp(24px,2.6vw,34px)} /* ========================================================================== Global rhythm rule Two image-led blocks must never sit flush against one another. Order pages so a text band separates them; this rule is the backstop when they cannot be. ========================================================================== */ .media-block + .media-block{ margin-top:var(--section-lg); border-top:1px solid var(--line-soft); } /* ========================================================================== About — included / standards / FAQ ========================================================================== */ .included{padding:var(--section-lg) 0;background:var(--ink-soft); border-block:1px solid var(--line-soft)} .included .shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .included__lead h2{font-size:clamp(26px,3vw,44px)} .included__lead p{margin-top:18px;color:var(--mist);max-width:40ch} .included__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px;list-style:none} .included__list li{display:flex;align-items:flex-start;gap:12px;padding:14px 0; border-bottom:1px solid var(--line-soft);color:var(--mist);font-size:14px;line-height:1.55} .included__list li span{flex:none;color:var(--gold);margin-top:1px} .standards{padding:var(--section-lg) 0;background:var(--ink)} .standards__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;list-style:none;background:var(--line-soft);border:1px solid var(--line-soft)} .standards__grid li{display:flex;gap:18px;padding:28px 26px;background:var(--ink-card); transition:background .25s ease} .standards__grid li:hover{background:var(--ink-raise)} .standards__grid b{flex:none;color:var(--gold);opacity:.5; font:600 26px/1 var(--display)} .standards__grid h3{margin-bottom:9px;color:var(--cream);font-family:var(--sans); font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .standards__grid p{color:var(--muted);font-size:13px;line-height:1.7} .faq{padding:var(--section-lg) 0;background:var(--ink-soft);border-top:1px solid var(--line-soft)} .faq__list{display:grid;border-top:1px solid var(--line-soft)} .faq__item{border-bottom:1px solid var(--line-soft)} .faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:20px; padding:20px 0;cursor:pointer;list-style:none;color:var(--cream); font-family:var(--display);font-size:clamp(17px,1.7vw,22px);font-weight:600; letter-spacing:.02em;text-transform:uppercase;transition:color .2s ease} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary:hover{color:var(--gold-pale)} .faq__item summary i{position:relative;flex:none;width:14px;height:14px} .faq__item summary i::before,.faq__item summary i::after{content:'';position:absolute; background:var(--gold);transition:transform .28s cubic-bezier(.2,.7,.2,1)} .faq__item summary i::before{left:0;top:6px;width:14px;height:1.5px} .faq__item summary i::after{left:6px;top:0;width:1.5px;height:14px} .faq__item[open] summary i::after{transform:scaleY(0)} .faq__item[open] summary{color:var(--gold-pale)} .faq__item p{max-width:78ch;padding:0 0 22px;color:var(--mist);font-size:14px;line-height:1.75} /* ========================================================================== Brand marquee ========================================================================== */ .marquee{position:relative;overflow:hidden;background:var(--ink-soft); border-block:1px solid var(--line-soft)} .marquee__track{display:flex;align-items:center;gap:66px;width:max-content; padding:20px 30px;animation:vanta-marquee 46s linear infinite} .marquee:hover .marquee__track, .marquee:focus-within .marquee__track{animation-play-state:paused} /* Every mark is normalised to one optical height and rendered flat, so a dozen different brand colours do not fight each other along the strip. */ .marquee__track span{flex:none;display:grid;place-items:center;overflow:hidden; /* The bundled files are optically normalised by brand-normalise.py — a wide badge and a compact shield read at the same size in one box only if the artwork itself is corrected first. */ height:var(--marque-h,54px);width:var(--marque-w,142px); color:var(--mist);opacity:.72;transition:opacity .28s ease,color .28s ease} .marquee__track span:hover{opacity:1;color:var(--gold-pale)} /* Marques arrive in wildly different shapes — a tall crest, a wide wordmark, a circle. Fitting each one inside the same box instead of forcing a height is what makes a mixed set sit on one optical line. */ /* The box is fixed and the artwork is fitted inside it. A percentage max-height collapses to none on a centred grid item, so sizing the element to the box and letting object-fit do the work is what actually holds the line. */ .marquee__track img,.marquee__track svg{width:var(--marque-w,142px); height:var(--marque-h,54px);object-fit:contain;display:block; /* A stray `img{height:auto}` from a plugin stylesheet would otherwise let a tall badge push straight out of the strip. max-* is not overridden by it. */ max-width:var(--marque-w,142px);max-height:var(--marque-h,54px)} /* Uploaded files are rarely a matching set. Flattening them to one silver keeps the strip calm; switch it off in Settings once the files are prepared. */ /* Desaturate and lift rather than silhouette: brightness(0) invert(1) would flatten a prancing horse into a plain white shield. */ .marquee--flatten .marquee__track img{filter:grayscale(1) brightness(1.45) contrast(.92)} .marquee--flatten .marquee__track span:hover img{filter:grayscale(1) brightness(1.7) contrast(.95)} .marquee__fade{position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none} .marquee__fade--l{left:0;background:linear-gradient(90deg,var(--ink-soft),transparent)} .marquee__fade--r{right:0;background:linear-gradient(270deg,var(--ink-soft),transparent)} @keyframes vanta-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ========================================================================== Counters (About) ========================================================================== */ .proof ul{grid-template-columns:repeat(3,minmax(0,1fr));padding:var(--section) 0} /* Deliberately never stacks — three abreast reads as a stat bar at any width. */ @media (max-width:767px){ .proof ul{gap:0;padding:38px 0} .proof li{padding:0 8px;gap:7px} .proof strong{font-size:clamp(26px,8.4vw,38px)} .proof span{font-size:7.5px;letter-spacing:.1em;line-height:1.35} } .proof li{align-items:center;text-align:center;gap:10px; padding:0 18px;border-left:1px solid var(--line-soft)} .proof li:first-child{padding-left:18px;border-left:0} .proof strong{font-size:clamp(38px,4.6vw,64px);line-height:1; font-variant-numeric:tabular-nums;transition:color .4s ease,text-shadow .4s ease} .proof strong.is-settled{animation:vanta-settle .9s ease-out} @keyframes vanta-settle{ 0%{color:var(--gold-pale);text-shadow:0 0 0 rgba(237,198,119,0)} 35%{color:#FFF3D6;text-shadow:0 0 26px rgba(237,198,119,.55)} 100%{color:var(--gold-pale);text-shadow:0 0 0 rgba(237,198,119,0)} } @media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} .proof strong.is-settled{animation:none} } /* ========================================================================== Filled-box images -------------------------------------------------------------------------- Some hosts and image-optimisation plugins inject a global img{height:auto!important}. Where an image is a background — a hero, a card cover, a section photograph — that rule makes it render at full natural height and spill over the section beneath it. These boxes are structural, so they say so at the same weight. Every one of them is clipped by its container too. ========================================================================== */ .hero-media, .page-hero__media, .split__media img, .gallery-grid img, .manifesto--presence img{height:100% !important;object-fit:cover} /* Cards and the viewer take the same guarantee, but through the framing variables — hard-coding object-fit:cover here would silently defeat a vehicle set to "show the whole car". */ .viewer__stage img{height:100% !important;object-fit:contain} .vehicle-card__media img{height:100% !important;object-fit:var(--v-fit,cover)} .viewer__stage,.vehicle-card__media,.split__media, .gallery-grid,.hero,.page-hero{overflow:hidden} .gallery-grid img,.manifesto--presence img{height:auto !important} .gallery-grid img{aspect-ratio:1.05} /* ========================================================================== Rental terms, legal pages, landing pages, and the mobile call bar ========================================================================== */ /* --- shared page-hero variants --- */ .page-hero--compact{padding:150px 0 76px} .page-hero--plain{border-bottom:1px solid var(--line-soft);background:var(--ink-soft)} .page-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* --- Rental terms --- */ .terms{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;padding:var(--section-lg) 0} .terms__index{position:sticky;top:110px;align-self:start} .terms__index ul{margin-top:14px;list-style:none;display:grid;gap:9px} .terms__index a{color:var(--mist);font-size:13px;line-height:1.5; border-left:1px solid var(--line-soft);padding-left:12px;display:block; transition:color .2s ease,border-color .2s ease} .terms__index a:hover{color:var(--gold-pale);border-color:var(--gold)} .terms__body{min-width:0;display:grid;gap:34px} .terms__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px; padding-bottom:32px;border-bottom:1px solid var(--line-soft);scroll-margin-top:110px} .terms__item:last-of-type{border-bottom:0;padding-bottom:0} .terms__num{color:var(--gold);font:600 13px/1 var(--display);letter-spacing:.14em;padding-top:6px} .terms__item h2{margin-bottom:10px;font-family:var(--display);font-size:clamp(22px,2.2vw,30px); font-weight:600;letter-spacing:.02em;text-transform:uppercase} .terms__item p{color:var(--mist);line-height:1.8;max-width:70ch} .terms__extra{color:var(--mist);line-height:1.8} .terms__note{padding:22px;border:1px solid var(--line-soft);background:var(--ink-card); color:var(--muted);font-size:13px;line-height:1.8} /* --- Privacy / Terms of service --- */ .legal-page{max-width:74ch;padding:var(--section-lg) 0;display:grid;gap:32px} .legal-page h2{font-family:var(--display);font-size:clamp(20px,2vw,27px);font-weight:600; letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px} .legal-page p{color:var(--mist);line-height:1.85} .legal-page a{color:var(--gold-pale);text-decoration:underline} .legal-page__extra{color:var(--mist);line-height:1.85} .legal-page__updated{color:var(--muted);font-size:11px;font-weight:800; letter-spacing:.14em;text-transform:uppercase} /* --- Landing pages --- */ .landing-points{padding:0} .landing-points ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; list-style:none;background:var(--line-soft);border-bottom:1px solid var(--line-soft)} .landing-points li{display:grid;gap:9px;padding:34px 30px;background:var(--ink-soft)} .landing-points__icon{color:var(--gold)} .landing-points strong{color:var(--cream);font-family:var(--display);font-size:19px; font-weight:600;letter-spacing:.02em} .landing-points span:not(.landing-points__icon){color:var(--mist);font-size:13px;line-height:1.7} .landing-copy{max-width:72ch;padding:var(--section) 0 0;color:var(--mist);line-height:1.85} .landing-faq{padding:var(--section-lg) 0;border-top:1px solid var(--line-soft)} .landing-faq h2{margin:10px 0 34px;font-family:var(--display); font-size:clamp(28px,3.2vw,44px);font-weight:600;letter-spacing:.02em;text-transform:uppercase} .landing-faq dl{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} .landing-faq dl>div{padding:26px 28px;background:var(--ink-card)} .landing-faq dt{color:var(--cream);font-family:var(--display);font-size:19px; font-weight:600;letter-spacing:.02em;margin-bottom:9px} .landing-faq dd{margin:0;color:var(--mist);line-height:1.8;max-width:80ch} .landing-faq__note{margin-top:22px;color:var(--muted);font-size:13px;line-height:1.7} .landing-faq__note a{color:var(--gold-pale);text-decoration:underline} /* --- rate table addenda --- */ .rate-table__terms{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px;max-width:80ch} .rate-table__terms li{position:relative;padding-left:16px;color:var(--muted);font-size:13px;line-height:1.7} .rate-table__terms li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px; border:1px solid var(--gold);transform:rotate(45deg)} .rate-table__link{margin:16px 0 0} .rate-table__link a{color:var(--gold-pale);font-size:12px;font-weight:800; letter-spacing:.12em;text-transform:uppercase} /* --- footer additions --- */ /* one quiet line rather than a wall of links — the pages still get found, the footer does not turn into a directory */ .footer-serving{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px; margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line-soft); color:var(--muted);font-size:12px} .footer-serving>span{color:var(--muted);font-size:9px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;margin-right:2px} .footer-serving a{color:#b9b2a5} .footer-serving a:hover{color:var(--gold-pale)} .footer-serving i{color:var(--line);font-style:normal} /* marque links live with the fleet, where someone is actually choosing a car */ .marque-band{padding:0 0 var(--section)} .marque-band .shell{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px; padding-top:30px;border-top:1px solid var(--line-soft)} .marque-band .kicker{margin-right:6px} .marque-band ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none} .marque-band a{display:block;padding:9px 15px;border:1px solid var(--line-soft); color:var(--mist);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; transition:border-color .2s ease,color .2s ease,background .2s ease} .marque-band a:hover{border-color:var(--gold);color:var(--gold-pale);background:var(--ink-card)} .footer-link{display:block;margin:10px 0;color:var(--gold-pale);font-size:13px;text-decoration:underline} .footer-legal{display:flex;flex-wrap:wrap;gap:18px} .footer-legal a{color:var(--muted);font-size:11px;letter-spacing:.06em} .footer-legal a:hover{color:var(--gold-pale)} /* --- the bar that follows you on a phone --- */ .callbar{display:none} /* ========================================================================== Responsive — three explicit tiers Desktop >= 1024px (the base rules above) Tablet 768–1023px Mobile <= 767px ========================================================================== */ /* ---- wide desktop refinement, still the desktop layout ---- */ @media (max-width:1279px){ .nav-list{gap:18px} .nav-list a{letter-spacing:.11em} .vehicle-grid{gap:16px} .manifesto{gap:48px} .vehicle-overview{gap:44px} } /* ---- TABLET : 768–1023 ---- */ @media (max-width:1023px){ .shell{width:min(100% - 40px,var(--shell))} /* nav collapses: six items plus a wordmark no longer fit on one line */ .nav{min-height:74px;gap:16px} .menu-toggle{display:grid;order:3} #primary-menu{display:none} body.nav-open #primary-menu{ display:flex;flex-direction:column;align-items:stretch; position:absolute;top:74px;left:0;right:0;padding:6px 20px 18px; background:var(--ink);border-bottom:1px solid var(--line-soft)} body.nav-open .nav-list{flex-direction:column;align-items:stretch;gap:0} body.nav-open .nav-list a{padding:15px 0;font-size:11px; border-bottom:1px solid rgba(255,255,255,.08)} body.nav-open .nav-phone{display:block;padding:16px 0 0;color:var(--gold-pale); font-size:11px;font-weight:800;letter-spacing:.14em} /* space-between left the Reserve button marooned in the middle of the bar. Pushing it right groups it with the hamburger as one set of controls. */ .nav-cta{margin-left:auto;padding:11px 15px;font-size:9px} .menu-toggle{margin-left:2px} .hero{min-height:min(84vh,740px);min-height:min(84svh,740px)} .hero-copy{padding:150px 0 80px} .hero-copy h1{font-size:clamp(44px,7.6vw,74px)} .page-hero{padding:136px 0 62px} .page-hero h1{font-size:clamp(42px,7.6vw,72px)} /* two-up is the tablet signature */ .vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .rate-table>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:0} .rate-table article{padding:14px 18px;border-top:1px solid var(--line-soft)} .rate-table article:first-child{padding-left:18px} .gallery-grid{grid-template-columns:repeat(2,1fr)} .pillars>div{grid-template-columns:repeat(2,1fr);gap:28px} .service-cards .shell,.about-steps .shell{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px} /* single-column editorial, but keep generous type */ .manifesto,.vehicle-overview,.gallery,.contact-grid{grid-template-columns:1fr;gap:36px} .manifesto--presence img{aspect-ratio:16/9} .collection,.pillars,.vehicle-details{padding:72px 0} .manifesto,.vehicle-overview,.gallery,.contact-grid{padding:72px 0} /* reference sections at tablet */ .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .services__inner{grid-template-columns:1fr;gap:40px;padding:72px 0} .services__bg{background-size:cover;opacity:.28} .services__bg::after{background:linear-gradient(0deg,var(--ink-soft) 20%,rgba(16,18,16,.7))} .services__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px} .services__grid li{text-align:left} .services__icon{place-items:start} .services__icon .vanta-icon{margin-inline:0} .assurance ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .xp-hero,.elevated{grid-template-columns:1fr} .xp-hero__copy{padding:130px 32px 56px;width:min(100% - 40px,var(--shell));margin-inline:auto} .xp-hero__media{min-height:340px;order:-1} .xp-hero__media::after{background:linear-gradient(0deg,var(--ink),transparent 55%)} .elevated__copy{padding:64px 32px;width:min(100% - 40px,var(--shell));margin-inline:auto} .elevated__image{min-height:440px} .expect__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 0} .expect__grid li:nth-child(3n+1){border-left:0;padding-left:0} .expect__grid li:first-child{padding-left:0} .rule-head{flex-wrap:wrap;gap:14px} .rule-head__line{order:3;flex-basis:100%} .split,.contact-grid__inner{grid-template-columns:1fr} .split--reverse .split__copy{order:2} .split--reverse .split__media{order:1} .split__copy,.split--reverse .split__copy{ padding:64px 32px;width:min(100% - 40px,var(--shell));margin-inline:auto} .split__media{min-height:320px;order:1} .split__media::after,.split--reverse .split__media::after{ background:linear-gradient(0deg,var(--ink),transparent 55%)} .services__grid--wide,.expect--four .expect__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .included .shell{grid-template-columns:1fr;gap:32px} .standards__grid{grid-template-columns:1fr} .values__grid{grid-template-columns:1fr} .contact-cards ul{grid-template-columns:1fr;gap:14px} .vehicle-book{padding:24px} .terms{grid-template-columns:1fr;gap:34px} .terms__index{position:static} .terms__index ul{grid-template-columns:repeat(2,minmax(0,1fr))} .landing-points ul{grid-template-columns:1fr} .page-hero--compact{padding:130px 0 62px} .viewer{padding-top:104px} .viewer__head{align-items:flex-start} .viewer__price-slab{min-width:222px;padding:14px 22px 13px 21px} .viewer__price-figure{font-size:38px} .perf__grid{grid-template-columns:repeat(min(var(--perf-cols,4),2),minmax(0,1fr))} .spec-list{grid-template-columns:1fr} .viewer__thumbs{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto} } /* ---- MOBILE : <= 767 ---- */ @media (max-width:767px){ .shell{width:min(100% - 32px,var(--shell))} .nav{min-height:64px;gap:6px} .nav-cta{padding:10px 13px;font-size:8.5px;letter-spacing:.12em} body.nav-open #primary-menu{top:64px;padding:6px 16px 18px} .vanta-logo{max-height:36px} .vanta-logo__type{font-size:13px;letter-spacing:.08em} .vanta-logo__type small{font-size:6.5px;letter-spacing:.16em} .vanta-logo__mark{width:24px;height:24px;font-size:17px} /* The hero flows instead of stacking absolutely, so copy can never be clipped — but it still fills the phone screen. svh keeps the whole frame visible when the browser's address bar is showing; vh is the fallback. */ .hero{min-height:min(88vh,760px);min-height:min(88svh,760px)} .hero-slide{position:relative;display:none;min-height:inherit} .hero-slide.is-active{display:grid} /* These photographs are roughly 16:9 and a phone screen is nothing like it. Filling the whole frame with object-fit:cover showed about a quarter of the picture — enough that the car itself was off screen. The image keeps a natural shape at the top of the hero instead and the copy sits beneath it, so the frame is still full height and you can still see the car. Masking the bottom edge fades the photograph into the hero's own background wherever it happens to end, which beats guessing at a percentage that changes with every screen size. */ .hero-slide.is-active{grid-template-rows:auto 1fr;align-items:stretch} .hero-media{position:relative;inset:auto;height:auto;aspect-ratio:5/4; object-position:50% 46%; -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent); mask-image:linear-gradient(180deg,#000 68%,transparent)} .hero-shade{display:none} /* Centred in what is left rather than pinned to the bottom: pinning left a conspicuous hole between the photograph and the headline. */ .hero-copy{align-self:center;padding:18px 0 34px} .hero-copy h1{font-size:clamp(36px,11.2vw,56px)} .hero-copy .lede{font-size:15px} .hero-actions{gap:10px} .hero-actions .button{flex:1 1 auto;min-width:0;padding:0 16px;font-size:9px} .hero-slider__controls{left:16px;bottom:20px} .page-hero{padding:104px 0 48px} .page-hero h1{font-size:clamp(34px,10.5vw,50px)} /* On a phone the left-heavy wash is doing the job of a full-width one, so the photograph behind it disappeared entirely. Shade top-to-bottom instead, and pull the framing up slightly — the subject in these shots sits above the middle. */ .page-hero__media{object-position:50% 40%} .page-hero__shade{background:linear-gradient(0deg,rgba(8,8,11,.94) 22%,rgba(8,8,11,.72) 62%,rgba(8,8,11,.42))} .page-hero p:not(.kicker){font-size:15px} .service-strip .shell{gap:8px 16px;font-size:8px;letter-spacing:.14em} .fleet-tools{flex-direction:column;align-items:stretch;padding:12px} .fleet-filters{flex-direction:column;align-items:stretch} .filter-select,.filter-select select,.filter-chip{width:100%} .fleet-sort{justify-content:space-between} .fleet-sort select{flex:1} .vehicle-grid{grid-template-columns:1fr;gap:14px} /* full-bleed single column, so a touch wider than the desktop 4:3 */ .vehicle-card__media{aspect-ratio:3/2} .vehicle-card__name{font-size:21px} .vehicle-card__tag strong{font-size:22px} .vehicle-card__price strong{font-size:21px} .manifesto h2,.section-head h2,.final-cta h2,.dark-quote h2, .vehicle-overview h2,.specs h2,.gallery h2{font-size:clamp(26px,8vw,38px)} .manifesto,.vehicle-overview,.gallery,.contact-grid, .collection,.pillars,.vehicle-details{padding:56px 0} .pillars>div,.service-cards .shell,.about-steps .shell{grid-template-columns:1fr} .manifesto--presence img{aspect-ratio:4/3} .marquee__track{gap:32px;padding:15px 18px} .marquee__track span{--marque-h:42px;--marque-w:112px} /* the ways to reach a person follow the visitor down the page */ /* The bar is fixed over the page, so the page has to end above it or its last 60px — the legal links, and on a short screen the submit button — sit permanently underneath and cannot be reached. */ body{padding-bottom:60px} .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid; grid-auto-flow:column;grid-auto-columns:1fr; background:rgba(12,12,15,.96);backdrop-filter:blur(14px); border-top:1px solid var(--line-soft); padding-bottom:env(safe-area-inset-bottom)} .callbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;padding:11px 6px 10px;color:var(--mist); font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; border-left:1px solid var(--line-soft)} .callbar__item:first-child{border-left:0} .callbar__item svg{color:var(--gold)} .callbar__item--call{color:var(--cream)} /* WhatsApp keeps a hint of its own green so it is recognisable at a glance, muted well down so it still belongs on a black and gold page. */ .callbar__item--whatsapp{color:var(--cream)} .callbar__item--whatsapp svg{color:#5fbf7d} .callbar__item--book{background:linear-gradient(100deg,var(--gold),#dcb96d);color:#141216} .callbar__item--book svg{color:#141216} /* nothing on the page hides behind the bar */ .site-footer{padding-bottom:74px} .terms{grid-template-columns:1fr;gap:30px} .terms__index{position:static} .terms__index ul{grid-template-columns:1fr} .terms__item{grid-template-columns:1fr;gap:8px} .terms__num{padding-top:0} .landing-points ul{grid-template-columns:1fr} .footer-legal{gap:14px} .viewer{padding-top:88px} .viewer__crumbs{margin-bottom:16px} .viewer__head{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px} .viewer__ident{flex:0 0 auto} .viewer__head h1{font-size:clamp(24px,8vw,36px)} /* on a phone the slab spans the column and carries the rate on one line */ .viewer__price{width:100%;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))} .viewer__price-slab{min-width:0;padding:14px 18px 13px 17px; clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)} .viewer__price-figure{font-size:34px;margin-top:5px} .viewer__price-cta{margin-top:9px;padding-top:9px;justify-content:space-between} /* the main photograph keeps a natural shape on a phone rather than a letterbox */ .viewer__stage{aspect-ratio:3/2} .viewer__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:7px} .perf{margin-top:26px} .perf__grid{grid-template-columns:repeat(min(var(--perf-cols,4),2),minmax(0,1fr))} .perf__grid li{padding:17px 15px 15px} .perf__figure{font-size:25px} .spec-title{margin-top:30px;font-size:18px} .spec-list{grid-template-columns:1fr} .split__copy,.split--reverse .split__copy{padding:52px 0} .split__media{min-height:240px} .services__grid--wide,.expect--four .expect__grid{grid-template-columns:1fr} .included__list{grid-template-columns:1fr;gap:0} .standards__grid li{padding:22px 18px;gap:14px} .faq__item summary{font-size:17px;padding:17px 0} .values{padding:56px 0} .values__grid li{padding:22px 18px} .contact-grid__inner{padding:56px 0;gap:36px} .contact-form-wrap{padding:22px} .vehicle-book{padding:20px} .vehicle-book h3{font-size:26px} .rate-table>div,.gallery-grid, .vanta-booking__dates,.vanta-booking__fields,.vanta-request-form{grid-template-columns:1fr} .rate-table article,.rate-table article:first-child{padding:13px 0;border-left:0} .hero-sub{font-size:10px;letter-spacing:.16em;margin:18px 0 24px} .hero-badge{margin-top:26px} .featured{padding:56px 0} .feat-grid{grid-template-columns:1fr;gap:14px} .rule-head{flex-wrap:wrap;gap:10px} .rule-head h2{flex:1 1 100%;font-size:22px} .rule-head__line{display:none} .services__inner{padding:56px 0;gap:32px} .services__lead h2{font-size:clamp(24px,7.2vw,34px)} .services__grid{grid-template-columns:1fr;gap:24px} .assurance ul{grid-template-columns:1fr;gap:18px;padding:28px 0} .expect{padding:56px 0} .expect__grid{grid-template-columns:1fr;gap:0} .expect__grid li{padding:22px 0;border-left:0;border-top:1px solid var(--line-soft)} .expect__grid li:first-child{border-top:0;padding-top:0} .expect__grid li:last-child{padding-right:0} .xp-hero__copy{padding:104px 0 48px} .xp-hero__copy h1{font-size:clamp(28px,8.5vw,40px)} .xp-hero__media{min-height:240px} .elevated__copy{padding:52px 0} .elevated__image{min-height:0;aspect-ratio:4/3} .closing-band{padding:40px 0} .closing-band .shell{gap:20px} .closing-band h2{flex-basis:100%;font-size:22px} .closing-band p{flex-basis:100%} .final-cta{padding:36px 0} .final-cta .shell{flex-direction:column;align-items:flex-start;gap:20px} .footer-grid{grid-template-columns:1fr;gap:26px} .footer-bottom{flex-direction:column;gap:8px} .legal-content{padding:56px 0} } /* ---- very small phones: the header CTA yields to the hamburger ---- */ @media (max-width:359px){ .nav-cta{display:none} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} }