/* ========================================================================== 24-7 Executive Transportation — design system Palette drawn from the brand logo: deep black, metallic gold, silver. Display: Cormorant Garamond · Body/UI: Jost (loaded in each page ) ========================================================================== */ :root{ --ink: #070708; /* page background */ --ink-2: #0C0C0E; /* alternate section background */ --card: #121215; /* card surfaces */ --paper: #F4F1E8; /* primary text — warm white */ --silver: #A9ADB6; /* secondary text */ --gold: #D4AF37; --gold-soft: #E9D48A; --gold-deep: #8A6D1F; --line: rgba(212,175,55,.24); /* gold hairlines */ --line-dim: rgba(255,255,255,.07); --grad-gold: linear-gradient(105deg,#8A6D1F 0%,#C9A227 30%,#F6E7AE 50%,#C9A227 70%,#8A6D1F 100%); --ease: cubic-bezier(.22,.61,.2,1); --font-display: "Cormorant Garamond", "Palatino Linotype", Georgia, serif; --font-body: "Jost", "Segoe UI", system-ui, sans-serif; --header-h: 76px; } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px) } body{ background:var(--ink); color:var(--paper); font-family:var(--font-body); font-weight:300; font-size:1.0625rem; line-height:1.65; letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* subtle grain + top glow atmosphere */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(1200px 520px at 50% -140px, rgba(212,175,55,.075), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); } img{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } ul{ list-style:none } button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit } :focus-visible{ outline:1.5px solid var(--gold); outline-offset:3px; border-radius:2px } ::selection{ background:rgba(212,175,55,.28); color:#fff } .container{ width:min(1180px, 92vw); margin-inline:auto; position:relative } main{ position:relative; z-index:1 } /* ---------- typography helpers ---------- */ .display{ font-family:var(--font-display); font-weight:500; line-height:1.04; letter-spacing:.005em; text-wrap:balance; } .gold-text{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; } @supports not (background-clip:text){ .gold-text{ color:var(--gold) } } .kicker{ display:flex; align-items:center; gap:14px; font-size:.72rem; font-weight:500; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); } .kicker::before{ content:""; width:42px; height:1px; background:var(--grad-gold); flex:none } .kicker .num{ color:var(--silver); letter-spacing:.2em } .lede{ color:var(--silver); max-width:56ch } /* ---------- buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:1.02em 2.1em; font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; border:1px solid transparent; transition:transform .35s var(--ease), border-color .35s, color .35s, background-color .35s; overflow:hidden; white-space:nowrap; } .btn:active{ transform:translateY(1px) } .btn-gold{ background:var(--grad-gold); color:#141005; font-weight:600; } .btn-gold::before{ /* metallic shine sweep */ content:""; position:absolute; inset:-2px; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%); transform:translateX(-130%); transition:transform .7s var(--ease); } .btn-gold:hover::before{ transform:translateX(130%) } .btn-ghost{ border-color:var(--line); color:var(--paper); background:rgba(255,255,255,.015); } .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft) } .btn-wide{ padding-inline:3em } /* ---------- header ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:60; height:var(--header-h); display:flex; align-items:center; transition:background-color .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(7,7,8,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--line-dim); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px } .brand{ display:flex; align-items:center; gap:14px; flex:none } .brand img{ height:54px; width:auto } .brand-name{ display:none } /* logo carries the name */ .site-nav{ display:flex; align-items:center; gap:34px } .site-nav a:not(.btn){ position:relative; font-size:.78rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); padding:6px 0; transition:color .3s; } .site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"]{ color:var(--paper) } .site-nav a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--grad-gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1) } .header-call{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; margin-left:6px; } .header-call .label{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--silver) } .header-call .tel{ font-family:var(--font-display); font-size:1.12rem; font-weight:600; color:var(--gold-soft) } .header-call:hover .tel{ color:var(--gold) } .site-nav .btn{ padding:.78em 1.7em } /* hamburger */ .nav-toggle{ display:none; z-index:80; width:44px; height:44px; position:relative } .nav-toggle span{ position:absolute; left:10px; right:10px; height:1.5px; background:var(--paper); transition:transform .4s var(--ease), opacity .3s, top .4s var(--ease); } .nav-toggle span:nth-child(1){ top:15px } .nav-toggle span:nth-child(2){ top:21.5px } .nav-toggle span:nth-child(3){ top:28px } .nav-open .nav-toggle span:nth-child(1){ top:21.5px; transform:rotate(45deg) } .nav-open .nav-toggle span:nth-child(2){ opacity:0 } .nav-open .nav-toggle span:nth-child(3){ top:21.5px; transform:rotate(-45deg) } /* ---------- hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--header-h) + 48px) 0 0; isolation:isolate; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:-2 } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 72%; filter:saturate(.82) brightness(.94); } .hero-bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 108%, transparent 40%, rgba(7,7,8,.5) 74%, rgba(7,7,8,.82) 100%), linear-gradient(180deg, rgba(7,7,8,.66) 0%, rgba(7,7,8,.28) 42%, rgba(7,7,8,.55) 74%, var(--ink) 99%); } /* thin gold arc — echo of the logo mark */ .hero-arc{ position:absolute; z-index:-1; top:50%; left:50%; width:min(880px,120vw); height:min(880px,120vw); transform:translate(-50%,-58%); opacity:.5; } .hero-arc circle{ fill:none; stroke:url(#arcGold); stroke-width:1.1; stroke-dasharray: 1490 820; /* incomplete ring, like the logo */ stroke-dashoffset: 260; stroke-linecap:round; } .hero-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:28px } .hero-slogan{ font-size:.74rem; font-weight:500; letter-spacing:.5em; text-transform:uppercase; color:var(--gold-soft); display:flex; align-items:center; gap:18px; } .hero-slogan::before,.hero-slogan::after{ content:""; width:52px; height:1px; background:var(--grad-gold); opacity:.85; } .hero h1{ font-size:clamp(2.9rem, 8vw, 6rem); max-width:15ch } .hero h1 em{ font-style:italic; font-weight:500 } .hero-sub{ color:#D4D2C8; max-width:52ch; font-size:clamp(1.02rem, 1.5vw, 1.18rem); font-weight:300; } .hero-sub strong{ font-weight:400; color:var(--gold-soft) } .hero-actions{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:10px } /* trust bar pinned to hero bottom (§7.3) */ .trust-bar{ margin-top:auto; padding:34px 0 30px; border-top:1px solid var(--line-dim); background:linear-gradient(180deg, transparent, rgba(7,7,8,.5)); } .trust-bar .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .trust-item{ display:flex; align-items:center; justify-content:center; gap:13px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); text-align:left; } .trust-item + .trust-item{ border-left:1px solid var(--line-dim) } .trust-item svg{ width:21px; height:21px; flex:none; color:var(--gold) } /* ---------- marquee ---------- */ .marquee{ overflow:hidden; border-block:1px solid var(--line-dim); padding:20px 0; background:var(--ink-2); } .marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 46s linear infinite; } .marquee span{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.35rem; color:rgba(244,241,232,.34); white-space:nowrap; } .marquee b{ color:var(--gold); font-weight:500; padding-inline:1.4em } @keyframes marquee{ to{ transform:translateX(-50%) } } /* ---------- sections ---------- */ .section{ padding:112px 0; position:relative } .section.alt{ background:var(--ink-2); border-block:1px solid var(--line-dim) } .section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:64px; max-width:720px; } .section-head h2{ font-size:clamp(2.1rem, 4.6vw, 3.4rem) } .section-head.center{ margin-inline:auto; text-align:center; align-items:center } /* ---------- services ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; } .service-card{ grid-column:span 2; position:relative; background:var(--card); border:1px solid var(--line-dim); padding:44px 36px 40px; display:flex; flex-direction:column; gap:16px; transition:transform .5s var(--ease), border-color .4s, background-color .4s; } .service-card:nth-child(1), .service-card:nth-child(2){ grid-column:span 3 } /* art-deco corner accents */ .service-card::before,.service-card::after{ content:""; position:absolute; width:16px; height:16px; border:0 solid var(--gold); opacity:0; transition:opacity .45s; } .service-card::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px } .service-card::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px } .service-card:hover{ transform:translateY(-6px); border-color:var(--line); background:#141419 } .service-card:hover::before,.service-card:hover::after{ opacity:1 } .service-icon{ width:44px; height:44px; color:var(--gold); margin-bottom:6px } .service-icon svg{ width:100%; height:100% } .service-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.62rem; line-height:1.15; } .service-card p{ color:var(--silver); font-size:.98rem } .service-tag{ position:absolute; top:22px; right:26px; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep); } /* ---------- airports ---------- */ .airports{ position:relative; isolation:isolate; overflow:hidden } .airports-bg{ position:absolute; inset:0; z-index:-1 } .airports-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(.5); } .airports-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink) 0%, rgba(7,7,8,.72) 26%, rgba(7,7,8,.78) 74%, var(--ink) 100%); } .airports-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px } .airport-card{ border:1px solid var(--line-dim); background:rgba(10,10,12,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:42px 36px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; transition:border-color .4s, transform .5s var(--ease); } .airport-card:hover{ border-color:var(--line); transform:translateY(-5px) } .airport-code{ font-family:var(--font-display); font-weight:600; font-size:3.6rem; line-height:1; } .airport-card h3{ font-size:.82rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--paper) } .airport-card p{ color:var(--silver); font-size:.95rem; max-width:30ch } .airport-card .rule{ width:44px; height:1px; background:var(--grad-gold); margin-block:8px } .airports-note{ margin-top:54px; text-align:center; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.25rem, 2.4vw, 1.7rem); color:#CFCCC0; max-width:34em; margin-inline:auto; } .airports-note b{ color:var(--gold-soft); font-weight:600 } /* ---------- areas ---------- */ .areas-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; } .area-list{ display:flex; flex-direction:column } .area-item{ display:flex; align-items:baseline; gap:26px; padding:26px 4px; border-bottom:1px solid var(--line-dim); transition:padding-left .4s var(--ease), border-color .4s; } .area-item:first-child{ border-top:1px solid var(--line-dim) } .area-item:hover{ padding-left:16px; border-color:var(--line) } .area-item .idx{ font-family:var(--font-display); font-style:italic; color:var(--gold-deep); font-size:1.05rem; flex:none; width:2ch; } .area-item h3{ font-family:var(--font-display); font-weight:500; font-size:1.9rem; line-height:1.1 } .area-item p{ color:var(--silver); font-size:.92rem; margin-left:auto; text-align:right; max-width:20ch } /* framed photo, gallery style */ .photo-frame{ position:relative } .photo-frame img{ width:100%; aspect-ratio:4/4.6; object-fit:cover; filter:saturate(.8) brightness(.9) } .photo-frame::before{ content:""; position:absolute; inset:0; transform:translate(18px,18px); border:1px solid var(--line); pointer-events:none; transition:transform .5s var(--ease); } .photo-frame:hover::before{ transform:translate(12px,12px) } .photo-frame figcaption{ position:absolute; left:24px; bottom:20px; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper); display:flex; align-items:center; gap:12px; } .photo-frame figcaption::before{ content:""; width:30px; height:1px; background:var(--gold) } .photo-frame.wide img{ aspect-ratio:16/10.6 } /* ---------- fleet ---------- */ .fleet-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:center; } .fleet-copy{ display:flex; flex-direction:column; gap:22px } .fleet-copy h2{ font-size:clamp(2.1rem, 4.2vw, 3.2rem) } .fleet-features{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:8px; } .fleet-features li{ display:flex; align-items:center; gap:12px; font-size:.94rem; color:#D8D5CB; } .fleet-features svg{ width:15px; height:15px; flex:none; color:var(--gold) } /* ---------- CTA band ---------- */ .cta-band{ position:relative; isolation:isolate; overflow:hidden; padding:150px 0; text-align:center; } .cta-bg{ position:absolute; inset:0; z-index:-1 } .cta-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.75) } .cta-bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(90% 130% at 50% 50%, rgba(7,7,8,.25), rgba(7,7,8,.9)), linear-gradient(180deg, var(--ink), transparent 30%, transparent 70%, var(--ink)); } .cta-band .container{ display:flex; flex-direction:column; align-items:center; gap:22px } .cta-band h2{ font-size:clamp(2.4rem, 5.4vw, 4.2rem); max-width:18ch } .cta-band p{ color:#D0CDC2; font-size:1.1rem } .cta-actions{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:14px } /* ---------- contact ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start } .contact-phone{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4vw, 3rem); margin-top:6px; transition:opacity .3s; } .contact-phone:hover{ opacity:.82 } .contact-block{ padding:26px 0; border-bottom:1px solid var(--line-dim) } .contact-block:first-child{ border-top:1px solid var(--line-dim) } .contact-block .label{ font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block; } .contact-block p{ color:#D8D5CB } .contact-block .sub{ color:var(--silver); font-size:.9rem; margin-top:4px } .contact-actions{ display:flex; flex-direction:column; gap:14px; margin-top:8px } .contact-actions .btn{ width:100% } .contact-note{ color:var(--silver); font-size:.9rem; margin-top:18px; text-align:center } /* ---------- footer ---------- */ .site-footer{ border-top:1px solid var(--line-dim); background:var(--ink-2); padding:70px 0 0; position:relative; z-index:1; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:56px; padding-bottom:56px; } .footer-brand img{ height:74px; margin-bottom:18px } .footer-brand p{ color:var(--silver); font-size:.95rem; max-width:34ch } .footer-brand .tel{ display:inline-block; margin-top:14px; font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--gold-soft); } .footer-col h4{ font-size:.72rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; } .footer-col li{ margin-bottom:12px } .footer-col a{ color:var(--silver); font-size:.95rem; transition:color .3s } .footer-col a:hover{ color:var(--paper) } .footer-col p{ color:var(--silver); font-size:.95rem; line-height:1.9 } .footer-bottom{ border-top:1px solid var(--line-dim); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#7C7F87; } .footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap } .footer-bottom a{ color:var(--silver) } .footer-bottom a:hover{ color:var(--paper) } /* ---------- mobile call bar ---------- */ .mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); background:rgba(9,9,10,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding-bottom:env(safe-area-inset-bottom); } .mobile-bar a{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 10px; font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; } .mobile-bar a svg{ width:16px; height:16px } .mobile-bar .m-call{ color:var(--gold-soft) } .mobile-bar .m-book{ background:var(--grad-gold); color:#141005; font-weight:600 } /* ---------- booking page ---------- */ .page-hero{ position:relative; isolation:isolate; overflow:hidden; padding:calc(var(--header-h) + 96px) 0 88px; } .page-hero-bg{ position:absolute; inset:0; z-index:-1 } .page-hero-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5) saturate(.7) } .page-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,8,.72), rgba(7,7,8,.55) 55%, var(--ink) 100%); } .page-hero .container{ display:flex; flex-direction:column; gap:20px; max-width:880px; text-align:center; align-items:center } .page-hero h1{ font-size:clamp(2.5rem, 5.6vw, 4.2rem) } .page-hero p{ color:#D4D1C6; max-width:56ch } .booking-wrap{ max-width:880px; margin-inline:auto } .booking-form{ background:var(--card); border:1px solid var(--line-dim); padding:56px; position:relative; } .booking-form::before,.booking-form::after{ content:""; position:absolute; width:22px; height:22px; border:0 solid var(--gold); opacity:.7; } .booking-form::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px } .booking-form::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 26px } .field{ display:flex; flex-direction:column; gap:9px } .field.full{ grid-column:1 / -1 } .field label{ font-size:.68rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--silver); } .field label b{ color:var(--gold); font-weight:500 } .field input,.field select,.field textarea{ width:100%; background:#0D0D10; border:1px solid var(--line-dim); color:var(--paper); font:inherit; font-size:1rem; padding:.9em 1.05em; transition:border-color .3s, background-color .3s; border-radius:0; color-scheme:dark; /* dark native date/time pickers */ } .field textarea{ resize:vertical; min-height:104px } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:#101014; } .field input.invalid,.field select.invalid{ border-color:#b0483f } .field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23D4AF37' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.05em center; padding-right:2.6em; } .field select:invalid{ color:var(--silver) } .field option{ background:#121215; color:var(--paper) } .form-note{ grid-column:1/-1; color:var(--silver); font-size:.88rem } .form-actions{ grid-column:1/-1; display:flex; flex-direction:column; gap:16px; margin-top:6px } .form-actions .btn{ width:100% } .form-error{ color:#E08A81; font-size:.9rem; display:none; text-align:center } .form-error.show{ display:block } /* success view */ .booking-success{ display:none; text-align:center; padding:26px 8px } .booking-success.show{ display:block } .booking-success .ok-ring{ width:74px; height:74px; margin:0 auto 26px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; } .booking-success .ok-ring svg{ width:28px; height:28px; color:var(--gold) } .booking-success h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px } .booking-success p{ color:var(--silver); max-width:48ch; margin:0 auto 8px } .booking-success .summary{ margin:28px auto; padding:22px 26px; border:1px dashed var(--line); text-align:left; font-size:.92rem; color:#D8D5CB; max-width:520px; white-space:pre-wrap; font-family:"Consolas", monospace; } .booking-success .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px } /* cal.diy embed mode */ .cal-embed{ border:1px solid var(--line-dim); background:var(--card); padding:10px } .cal-embed iframe{ width:100%; height:1050px; border:0; display:block } .cal-fallback{ text-align:center; color:var(--silver); font-size:.9rem; padding:14px 0 6px } .cal-fallback a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px } /* ---------- legal pages ---------- */ .legal{ max-width:760px; margin-inline:auto; padding:calc(var(--header-h) + 90px) 0 110px } .legal h1{ font-size:clamp(2.3rem, 5vw, 3.4rem); margin-bottom:10px } .legal .updated{ color:var(--silver); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:52px } .legal h2{ font-family:var(--font-display); font-weight:600; font-size:1.55rem; margin:44px 0 14px; display:flex; align-items:baseline; gap:16px; } .legal h2 span{ color:var(--gold-deep); font-style:italic; font-size:1.1rem } .legal p, .legal li{ color:#C9C6BC; font-size:1rem } .legal ul{ list-style:none; margin:12px 0 } .legal li{ padding-left:22px; position:relative; margin-bottom:9px } .legal li::before{ content:"—"; position:absolute; left:0; color:var(--gold) } .legal a{ color:var(--gold-soft) } /* ---------- reveal on scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); will-change:opacity, transform; } [data-reveal].is-visible{ opacity:1; transform:none } /* hero load-in */ .hero [data-hero], .page-hero [data-hero]{ opacity:0; transform:translateY(24px); animation:heroIn 1.1s var(--ease) forwards; animation-delay:var(--d,0s) } @keyframes heroIn{ to{ opacity:1; transform:none } } /* ---------- responsive ---------- */ @media (max-width:1080px){ .areas-grid,.fleet-grid,.contact-grid{ gap:56px } } @media (max-width:960px){ .site-nav{ position:fixed; inset:0; z-index:70; flex-direction:column; justify-content:center; gap:34px; background:rgba(7,7,8,.97); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; } .nav-open .site-nav{ opacity:1; visibility:visible } .site-nav a:not(.btn){ font-family:var(--font-display); font-size:1.7rem; letter-spacing:.1em; text-transform:none; color:var(--paper) } .header-call{ align-items:center } .nav-toggle{ display:block } .services-grid{ grid-template-columns:1fr 1fr } .service-card, .service-card:nth-child(1), .service-card:nth-child(2){ grid-column:span 1 } .service-card:last-child{ grid-column:1 / -1 } .airports-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto } .areas-grid,.fleet-grid{ grid-template-columns:1fr; gap:60px } .fleet-grid .photo-frame{ order:-1 } .contact-grid{ grid-template-columns:1fr; gap:48px } } @media (max-width:760px){ .section{ padding:84px 0 } .trust-bar .container{ grid-template-columns:1fr 1fr; gap:18px 10px } .trust-item{ justify-content:flex-start } .trust-item + .trust-item{ border-left:0 } .services-grid{ grid-template-columns:1fr } .service-card:last-child{ grid-column:auto } .booking-form{ padding:34px 22px } .form-grid{ grid-template-columns:1fr } .footer-grid{ grid-template-columns:1fr; gap:40px } .mobile-bar{ display:grid } body{ padding-bottom:60px } .area-item p{ display:none } .hero-actions .btn{ width:100% } .hero{ padding-top:calc(var(--header-h) + 26px) } .cta-band{ padding:110px 0 } } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important } [data-reveal]{ opacity:1; transform:none } .hero [data-hero], .page-hero [data-hero]{ opacity:1; transform:none; animation:none } .marquee-track{ animation:none } } /* ========================================================================== Booking: live quote, online payment, success page ========================================================================== */ /* honeypot — visually gone, still in the form for bots */ .hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none } .quote-panel{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px 26px; flex-wrap:wrap; border:1px solid var(--line); background:rgba(212,175,55,.05); padding:18px 24px; } .quote-kicker{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--silver); margin-bottom:2px; } .quote-price{ font-family:var(--font-display); font-size:clamp(1.7rem, 3vw, 2.2rem); line-height:1.1; color:var(--gold-soft); } .quote-note{ color:var(--silver); font-size:.88rem; max-width:34ch; text-align:right } .pay-terms{ color:var(--silver); font-size:.8rem; text-align:center } .pay-terms b{ color:var(--paper); font-weight:500 } .pay-terms a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px } .form-notice{ border:1px solid rgba(224,138,129,.4); background:rgba(176,72,63,.08); color:var(--paper); font-size:.92rem; padding:14px 18px; margin-bottom:26px; } .form-notice b{ color:#E08A81; font-weight:500 } button[data-submit]:disabled{ opacity:.6; cursor:wait } /* success page */ .spinner{ width:44px; height:44px; margin:0 auto 22px; border-radius:50%; border:2px solid var(--line-dim); border-top-color:var(--gold); animation:spin .9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg) } } .trip-summary{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1px; background:var(--line-dim); border:1px solid var(--line-dim); max-width:640px; margin:26px auto 18px; text-align:left; } .trip-summary > div{ background:#0d0d0f; padding:13px 18px } .trip-summary dt{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); margin-bottom:4px; } .trip-summary dd{ color:var(--paper); font-size:.98rem } .ref-line{ color:var(--silver); font-size:.88rem } .ref-line b{ color:var(--gold-soft); font-weight:500; letter-spacing:.08em } @media (max-width:640px){ .quote-panel{ flex-direction:column; align-items:flex-start } .quote-note{ text-align:left } }