/* ============================================================
QAT THEME — Quick Airport Transfers
Built 2026-08-04 from the approved homepage design.
Fonts: Source Serif 4 (headings) + Noto Sans (everything else)
Accent: taxi yellow #F2BB1C with dark text
============================================================ */
:root{
--primary:#146CB2; --primary-dark:#0E55A0; --grad-start:#0E55A0; --grad-end:#1E84D4;
--yellow:#F2BB1C; --yellow-hover:#e0aa10; --yellow-ink:#a97c06; --on-yellow:#0f1c2c;
--bg-tint:#E5F2FF; --background:#f8f9ff; --white:#fff;
--on-surface:#0f1c2c; --text-body:#4A5568; --border-ui:#E2E8F0; --outline:#717782;
--green:#00A559;
--serif:'Source Serif 4',Georgia,'Times New Roman',serif;
--sans:'Noto Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
/* Widened 19 Aug 2026. Content used to start 57px from the screen edge (1200px
box + 24px gutter); the competitor's starts at 25px, which reads less boxed-in.
1260 + 20 puts our content edge at ~22px on a 1265px screen - near identical -
and gives every section ~68px more usable width. Both are variables, so this
one line moves the whole page consistently. */
--container:1260px; --gutter:20px;
--lux-shadow:0 8px 24px -8px rgba(13,27,42,.10);
--lux-hover-shadow:0 16px 32px -8px rgba(13,27,42,.14);
}
/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body.qat{margin:0;background:var(--background);color:var(--on-surface);font-family:var(--sans);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.qat h1,.qat h2{font-family:var(--serif);font-weight:700;margin:0;line-height:1.2;letter-spacing:-.02em}
.qat h3,.qat h4{font-family:var(--sans);font-weight:600;margin:0;line-height:1.4}
.qat p{margin:0}
.qat a{color:inherit;text-decoration:none}
.qat img{max-width:100%;height:auto}
.qat-wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.qat-wrap-narrow{max-width:800px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.qat section[id]{scroll-margin-top:104px}
.qat :focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.qat-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- shared bits ---------- */
.qat-divider{width:56px;height:3px;background:var(--yellow);margin:0 auto 16px}
.qat-divider-left{width:56px;height:3px;background:var(--yellow);margin:0 0 16px}
.qat-shadow{box-shadow:var(--lux-shadow)}
.qat-hover{transition:all .25s ease}
.qat-hover:hover{transform:translateY(-4px);box-shadow:var(--lux-hover-shadow)}
/* line-height:1 so the star row is only as tall as the glyphs. Left to the default
the 24px stars occupied a 38px line box, which alone made every card 14px taller
than the competitor's. */
.qat-stars{color:var(--yellow);letter-spacing:1px;line-height:1}
.qat-stars-green{color:#00B67A;letter-spacing:1px;line-height:1}
.qat-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
border:none;border-radius:4px;padding:14px 24px;transition:background .2s,color .2s;text-align:center}
.qat-btn:active{transform:scale(.98)}
.qat-btn-yellow{background:var(--yellow);color:var(--on-yellow)}
.qat-btn-yellow:hover{background:var(--yellow-hover)}
.qat-btn-primary{background:var(--primary);color:#fff}
.qat-btn-primary:hover{background:var(--primary-dark)}
.qat-btn-outline{background:transparent;color:var(--primary);border:1px solid var(--border-ui)}
.qat-btn-outline:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.qat-btn-white{background:transparent;border:2px solid #fff;color:#fff}
.qat-btn-white:hover{background:#fff;color:var(--primary-dark)}
/* ---------- announcement strip ---------- */
.qat-announce{background:var(--primary-dark);color:#fff}
.qat-announce .qat-wrap{display:flex;gap:28px;justify-content:center;align-items:center;
padding:9px 24px;flex-wrap:wrap;font-size:14px;font-weight:500}
.qat-announce span{display:inline-flex;align-items:center;gap:7px}
.qat-announce svg,.qat-announce img{width:17px;height:17px;color:var(--yellow);flex:none;display:block}
/* ---- announcement strip on phones -------------------------------------------
Three statements side by side do not fit a phone, and flex-wrap stacked them into
a tall blue block. On small screens we show ONE at a time, rotating every 3s, in a
bar only as tall as a single line.
The items are stacked on top of each other (absolute, all in the same spot) so the
bar height never changes as they swap - a height that jumped every 3 seconds would
push the page around under the reader's thumb.
Without JS the first statement simply stays put: .qat-announce only gets .js once
the rotator is running, so there is never a blank bar. */
@media(max-width:780px){
/* height INCLUDES padding (border-box), so vertical padding here would eat the
text's own space and push it out under the header. Instead: no vertical padding,
one fixed bar height, and each statement stretched edge-to-edge inside it and
centred - so the text can never overflow however tall the line box turns out. */
.qat-announce .qat-wrap{position:relative;display:block;height:32px;
padding:0 16px;font-size:13.5px;flex-wrap:nowrap}
.qat-announce span{position:absolute;left:16px;right:16px;top:0;bottom:0;
display:flex;align-items:center;justify-content:center;white-space:nowrap;
opacity:0;transition:opacity .45s ease}
.qat-announce span:first-child{opacity:1}
.qat-announce.js span:first-child{opacity:0}
.qat-announce.js span.on{opacity:1}
.qat-announce svg,.qat-announce img{width:15px;height:15px}
}
/* Readers who ask for less motion get the swap without the cross-fade. */
@media(prefers-reduced-motion:reduce){
.qat-announce span{transition:none}
}
/* ---------- header (blends into hero, solid on scroll) ---------- */
.qat-head{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent;box-shadow:none;
transition:background .35s ease,box-shadow .35s ease}
.qat-head.scrolled{position:fixed;background:var(--primary);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
/* The header alone spans the FULL viewport - logo hard left, phone hard right -
while every other section keeps the 1260px container. A modest inset stops the
logo and button touching the screen edge on a large monitor. */
.qat-head .qat-wrap{height:80px;display:flex;justify-content:space-between;align-items:center;gap:24px;
max-width:none;padding-left:30px;padding-right:30px}
@media(max-width:640px){.qat-head .qat-wrap{padding-left:18px;padding-right:18px}}
/* Brand = the logo mark. line-height:0 kills the inline-image descender gap so the
mark sits optically centred in the 80px bar. Intrinsic width/height are on the
itself, so the space is reserved before the file loads (no layout shift). */
.qat-brand{display:flex;align-items:center;gap:13px;line-height:0;flex:none}
.qat-brand img{height:48px;width:auto;display:block}
/* Divider + company name beside the mark.
The wordmark is two lines, so its line-height is set in PIXELS at exactly half the
logo height - 2 x 24px = the 48px mark. A unitless multiplier would drift as the
font size changes and the two would stop lining up. The divider takes the same
height, so mark, rule and name all start and finish together. */
.qat-bdiv{width:1px;height:48px;background:rgba(255,255,255,.38);flex:none}
.qat-brandtext{font-family:var(--sans);font-size:16px;font-weight:700;line-height:24px;
letter-spacing:.02em;text-transform:uppercase;color:#fff;white-space:nowrap}
.qat-nav{display:flex;align-items:center;gap:32px}
.qat-nav a{font-size:14px;font-weight:500;color:#fff;transition:color .2s}
.qat-nav a:hover,.qat-nav a.active{color:var(--yellow)}
.qat-head-right{display:flex;align-items:center;gap:20px}
/* Phone: an OUTLINED PILL BUTTON (matches the reference the client supplied) —
a bordered box reads as clickable, where plain text just looked like a caption.
Sits on the blue hero, so the outline + text are white; on hover it inverts to
a solid white button with blue text. */
.qat-phone{display:inline-flex;align-items:center;gap:9px;
color:#fff!important;font-size:15.5px;font-weight:700;white-space:nowrap;line-height:1;
border:1.5px solid rgba(255,255,255,.55);border-radius:10px;padding:11px 16px;
transition:background .2s,border-color .2s,color .2s}
.qat-phone::after{content:"\2192";font-size:16px;font-weight:600;transition:transform .2s}
.qat-phone:hover{background:#fff;border-color:#fff;color:var(--primary)!important}
/* Header Book Now is sized to sit with the phone CTA beside it: same 40px height and
same 10px radius. Scoped to the header on purpose - .qat-btn is shared with the
quote button, the CTA section and How It Works, which want the larger default. */
/* nowrap matters: without it "Book Now" broke onto two lines and the button came out
56px tall instead of 40px, which is what made it disagree with the phone pill. */
/* ONLY height and corner radius are changed here - the font stays at the .qat-btn
default (14px / 700, unchanged). line-height is pinned so the 40px height does not
depend on the font size, and nowrap stops "Book Now" breaking onto two lines, which
was what made it 56px tall instead of 40px. */
.qat-book-scroll i{display:none} /* only the mobile bar shows it */
.qat-head .qat-btn{border-radius:10px;padding:12px 22px;line-height:16px;
white-space:nowrap;flex:none}
.qat-phone:hover::after{transform:translateX(3px)}
/* the "Book by phone" caption is redundant inside a button that already shows a number */
.qat-phone small{display:none}
/* Circular call button, phones only. The desktop header keeps the full .qat-phone
number pill, so this is hidden above 980px to avoid showing the number twice. */
.qat-head-call{display:none}
.qat-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.qat-burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px}
@media(max-width:980px){
.qat-nav,.qat-phone{display:none}
.qat-burger{display:block}
.qat-head-call{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;flex:none;border-radius:50%;
border:1.5px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;
transition:background .2s,border-color .2s}
/* The supplied file wrapped the handset in ~70 units of empty padding per side, which
left only 19px of ink inside the 40px circle. The symbol viewBox is cropped to the
drawing (assets/qat/icons.php), so this size now IS the ink. 26px keeps the corners
clear of the ring: half-diagonal 18.4px against the 20px inner radius. */
.qat-head-call svg{width:26px;height:26px}
.qat-head-call:active{background:rgba(255,255,255,.15);border-color:#fff}
/* the visible gap is the flex gap PLUS the burger's own left padding, so both come
down together - 20+8 = 28px was too airy beside the call button. */
.qat-head-right{gap:10px}
.qat-burger{padding:8px 4px}
}
/* Adding a 40px button + its 20px gap pushed the burger 17px off the right edge at
320px (measured - the page scrolled sideways). Below 380px the button, the gap and
the burger's padding all tighten so the row fits again. */
@media(max-width:380px){
.qat-head-right{gap:8px}
.qat-head-call{width:34px;height:34px}
.qat-head-call svg{width:21px;height:21px} /* 14.8px half-diagonal vs the 15.5px inner radius of the 34px circle */
.qat-burger{padding:8px 2px}
.qat-nav.open{display:flex;position:absolute;top:80px;left:0;right:0;background:var(--primary);
flex-direction:column;gap:0;padding:8px 24px 16px}
.qat-nav.open a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);width:100%}
}
/* ---------- hero ---------- */
/* Hero photo + a left-to-right scrim. The headline sits over the left half, which
is also where the car is, so the scrim darkens that side just enough to keep
white text readable while the car still reads through on the right. The gradient
underneath is the fallback if the image fails to load. */
.qat-hero{position:relative;min-height:720px;display:flex;align-items:center;overflow:visible;
background:
linear-gradient(90deg,rgba(8,42,80,.62) 0%,rgba(8,42,80,.34) 34%,rgba(8,42,80,.06) 58%,rgba(8,42,80,0) 100%),
url("../images/hero-backdrop.webp") center bottom/cover no-repeat,
linear-gradient(155deg,#2079c2 0%,#1a6fb6 42%,#3a94d4 100%)}
@media(max-width:980px){
/* No car in the hero, so the heavy overlay that used to mute it is gone —
this is just enough to keep white text comfortably legible full-width. */
.qat-hero{background:
linear-gradient(180deg,rgba(8,42,80,.60) 0%,rgba(8,42,80,.50) 55%,rgba(8,42,80,.58) 100%),
url("../images/hero-backdrop.webp") center bottom/cover no-repeat,
linear-gradient(155deg,#2079c2 0%,#1a6fb6 42%,#3a94d4 100%)}
}
.qat-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(900px 460px at 78% 8%,rgba(255,255,255,.14),transparent 62%)}
.qat-hero > .qat-wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr 1fr;
gap:48px;align-items:center;padding-top:118px;padding-bottom:88px}
.qat-hero-copy{color:#fff}
.qat-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--yellow);margin-bottom:14px}
/* Soft black glow behind the hero copy - lifts white text off the blue and stops it
flattening into the background. No offset, so it reads as depth rather than a
dropped shadow. */
.qat-hero h1{font-size:36px;color:#fff;margin-bottom:16px;line-height:1.15;
text-shadow:0 0 7px rgba(0,0,0,.55)}
.qat-hero .qat-lede{font-size:18px;color:rgba(255,255,255,.92);max-width:520px;margin-bottom:28px;
text-shadow:0 0 4px rgba(0,0,0,.5)}
.qat-pills{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:22px}
.qat-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);
backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:9999px;
font-size:12px;font-weight:600;color:#fff;white-space:nowrap}
.qat-pill svg,.qat-pill img{width:15px;height:15px;flex:none;display:block}
.qat-agg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.85)}
.qat-agg b{color:#fff;font-weight:700}
.qat-agg .qat-agg-dot{opacity:.5;padding:0 2px}
/* Tripadvisor's official lockup already contains the wordmark, so it sits alone in
the .plat row where the other two cards show a small mark plus a text label. Height
is matched to that text so all three card headers line up. */
/* Tripadvisor's owl, cropped from their official lockup. Matched on HEIGHT to the
Google and Trustpilot marks and allowed its natural width - the owl is wider
than tall (1.56:1), so matching on width would shrink it out of balance. */
.qat-revcard .taowl{height:16px;width:auto;display:block;flex:none}
@media(min-width:768px){.qat-hero h1{font-size:48px}}
@media(max-width:1080px){.qat-pills{flex-wrap:wrap}}
/* ---- hero badges on phones: plain text, no pill ----------------------------
Under 900px the pill background, border and blur are dropped and the three points
become a quiet line of reassurance under the headline. The wording and the icons
are untouched.
Why not one single row: with the full labels the three need ~420px even at 10px
with no chrome at all, against 350px of usable width on a 390px phone. So they
flow onto two lines instead - still far shorter than the three stacked pills, and
nothing is hidden or shortened to achieve it.
Desktop is untouched: above 900px the pills keep their background and border. */
@media(max-width:900px){
.qat-pills{flex-wrap:wrap;gap:7px 16px;margin-bottom:18px}
.qat-pill{
background:none;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
padding:0;border-radius:0;
font-size:12.5px;font-weight:600;color:rgba(255,255,255,.93);
white-space:nowrap;gap:6px;
}
.qat-pill img{width:14px;height:14px}
}
@media(max-width:900px){
.qat-hero{min-height:0}
/* The header is absolutely positioned over the hero and is 80px tall, so this
top padding has to clear it. 130px left a 50px empty band under the logo before
the eyebrow started. 96px clears the header with 16px of breathing space instead.
Bottom trimmed too - 96px was tuned for a desktop hero that is far taller. */
.qat-hero > .qat-wrap{grid-template-columns:1fr;padding-top:96px;padding-bottom:70px} /* 64 -> 70: the review cards are pulled up into the hero, so this padding minus
.qat-revstrip's negative margin IS the visible gap under the booking card.
64-45 left only 14px there; 70-45 gives 25px. */
.qat-book{margin-left:auto;margin-right:auto} /* centred once stacked */
}
/* ---------- booking widget ---------- */
/* The hero splits 1fr/1fr, so widening the page container pushed this card from
510px to 586px. Capped and pinned to the right - the extra width goes to the
headline column, which reads better long than the form does wide. */
.qat-book{background:#fff;border-radius:12px;padding:28px;border:1px solid var(--border-ui);
box-shadow:var(--lux-shadow);width:100%;max-width:520px;margin-left:auto}
/* width:100% matters. On a grid item an auto margin cancels the default stretch, so
max-width alone left the card at its shrink-to-fit width (438px). Filling the
track first, then capping, gives a true 520px pinned to the right. */
.qat-book h2{font-size:20px;font-weight:700;color:var(--on-surface);margin-bottom:4px;font-family:var(--sans)}
.qat-book .qat-book-sub{font-size:13px;color:var(--text-body);margin-bottom:18px;
padding-bottom:14px;border-bottom:1px solid var(--border-ui)}
.qat-field{margin-bottom:13px;position:relative}
.qat-field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
letter-spacing:.05em;color:var(--on-surface);opacity:.6;margin-bottom:4px}
.qat-control{position:relative}
.qat-control > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
width:20px;height:20px;color:var(--primary);pointer-events:none}
.qat-control input,.qat-control select{width:100%;font-family:var(--sans);font-size:14px;color:var(--on-surface);
background:var(--background);border:1px solid var(--border-ui);border-radius:8px;
padding:12px 16px 12px 40px;outline:none;appearance:none;transition:border .15s,box-shadow .15s}
.qat-control input::placeholder{color:var(--outline)}
.qat-control input:focus,.qat-control select:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
/* ---- iOS date/time inputs -------------------------------------------------
Safari on iOS sizes and from its own
intrinsic metrics and does not honour the padding the other fields use, so on
iPhone the Date and Time boxes rendered noticeably shorter than From / To.
Turning the native appearance off and pinning an explicit min-height makes every
field in the widget the same height on iOS, Android and desktop alike.
44px is also Apple's minimum comfortable tap target.
The value inside is centred by default on iOS; left-align it to match the
text fields either side of it. */
.qat-control input[type="date"],
.qat-control input[type="time"]{
-webkit-appearance:none;appearance:none;
min-height:48px;line-height:normal;display:block;
padding-top:11px;padding-bottom:11px} /* lands on 48px, matching From / To */
/* The date field alone gets 3px more room before its text. Measured, the two icons
clear their placeholders almost identically (4.5px vs 4.8px) - but the calendar's
right edge is a FLAT wall the full height of the glyph while the clock's is a circle
that curves away, so at the same measured gap the date reads as cramped. This is the
usual optical correction for a square set against a round shape. Padding and the
.qat-ph stand-in below move together, or the placeholder and the typed date would
sit on different lines. */
.qat-control > input[type="date"]{padding-left:43px}
@media(max-width:480px){
.qat-control > input[type="date"]{padding-left:39px}
}
.qat-control input[type="date"]::-webkit-date-and-time-value,
.qat-control input[type="time"]::-webkit-date-and-time-value{text-align:left}
/* iOS zooms the whole page in when a focused field is under 16px. Bumping the
widget's fields to 16px on small screens stops that jarring zoom on tap. */
@media(max-width:640px){
.qat-control input,.qat-control select{font-size:16px}
}
.qat-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qat-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* Grid items default to min-width:auto, which refuses to shrink below their content's
intrinsic width - so the Passengers / Large bags / Hand bags steppers pushed the whole
widget wider than the phone and the page scrolled sideways. (15px of this pre-dated the
16px font bump above, which then made it 42px.) min-width:0 lets the tracks share the
space properly, which is what 1fr was meant to do. */
.qat-grid2>*,.qat-grid3>*{min-width:0}
.qat-step{display:flex;align-items:center;border:1px solid var(--border-ui);border-radius:6px;
overflow:hidden;background:var(--background)}
.qat-step button{width:34px;height:40px;background:transparent;border:none;font-size:18px;font-weight:700;
cursor:pointer;color:var(--primary);transition:background .15s;flex:none;line-height:1}
.qat-step button:hover{background:var(--bg-tint)}
.qat-step input{flex:1;min-width:0;width:100%;text-align:center;font-weight:700;font-size:15px;
color:var(--on-surface);border:none;background:transparent;outline:none;
-moz-appearance:textfield;appearance:textfield;font-family:var(--sans)}
.qat-step input::-webkit-outer-spin-button,.qat-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qat-book .qat-btn{width:100%;padding:16px;margin-top:8px;font-size:14px;letter-spacing:.1em}
.qat-book-note{margin-top:12px;text-align:center;font-size:12px;color:var(--text-body)}
/* airport suggestion dropdown used by asp-p.js */
.custom-airport-list{position:absolute;z-index:40;left:0;right:0;top:100%;margin:2px 0 0;padding:0;
list-style:none;background:#fff;border:1px solid var(--border-ui);border-radius:8px;
box-shadow:var(--lux-shadow);max-height:230px;overflow-y:auto}
.custom-airport-list:empty{display:none}
.custom-airport-list li{padding:10px 14px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--background)}
.custom-airport-list li:last-child{border-bottom:none}
.custom-airport-list li:hover{background:var(--bg-tint)}
/* ---------- review platform strip ---------- */
.qat-revstrip{position:relative;z-index:10;margin-top:-50px;padding-bottom:30px}
/* Card geometry matched to the competitor: 210x103, 18px radius, 12/16 padding,
13px gap, and all three LEVEL - their row has no raised middle card. */
.qat-revstrip .qat-row{display:flex;justify-content:center;align-items:stretch;gap:13px;flex-wrap:wrap}
.qat-revcard{text-decoration:none;color:inherit;background:#fff;border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;
align-items:center;gap:2px;box-shadow:0 4px 16px rgba(13,27,42,.12)}
/* Width now follows the content (the "· N reviews" suffix was removed, so the old
212px minimum left dead space). The floor keeps it a touch wider than the two
180px squares beside it, so it still reads as the focal card. */
.qat-revcard.main{padding:12px 16px;min-width:0;width:fit-content;border:2px solid var(--yellow);
box-shadow:0 12px 32px rgba(13,27,42,.20)} /* lift removed - all three sit level */
/* min-height keeps all three header rows the same depth whatever they contain -
Tripadvisor's is a logo image, the other two are icon + text, and without this
the shorter one pulled its whole card out of line with its neighbours. */
.qat-revcard .plat{display:flex;align-items:center;justify-content:center;gap:8px;
min-height:25px;font-size:13px;font-weight:700;color:var(--on-surface)}
.qat-revcard.main .plat{font-size:16px}
.qat-revcard .sc{font-size:12px;color:var(--text-body);font-weight:500}
.qat-revcard.main .sc{font-size:14px;font-weight:600}
@media(max-width:640px){.qat-revcard.main{transform:none}}
/* ---------- section shells ---------- */
.qat-sec{padding-top:60px;padding-bottom:60px}
.qat-sec-white{background:#fff}
.qat-sec-tint{background:var(--bg-tint)}
.qat-sec-bg{background:var(--background)}
.qat-sechead{text-align:center;margin-bottom:40px}
.qat-sechead h2{font-size:30px;color:var(--on-surface);margin-bottom:12px}
.qat-sechead p{font-size:16px;color:var(--text-body);max-width:620px;margin:0 auto}
/* ---------- USP bar ---------- */
.qat-usp{background:#fff;padding-top:52px;padding-bottom:36px;border-bottom:1px solid var(--border-ui)}
.qat-usp .qat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
/* Icon beside the text, not above it. Aligned to the TOP of the text block rather
than centred, so the icon lines up with the heading whether the description runs
to one line or three. min-width:0 lets the text column shrink inside the grid
track instead of forcing the row wider. */
.qat-usp .qat-row > div{display:flex;align-items:flex-start;gap:15px;text-align:left}
.qat-usp .txt{min-width:0}
.qat-usp svg{width:48px;height:48px;display:block;flex:none}
/* No gap under the heading: the title and its description are one block, and the
4px was what pushed the text taller than the icon beside it. */
.qat-usp h3{font-size:20px;font-weight:700;color:var(--on-surface);margin-bottom:0}
.qat-usp p{font-size:14px;color:var(--text-body);max-width:none;margin:0}
@media(max-width:760px){.qat-usp .qat-row{grid-template-columns:1fr;gap:26px}}
/* ---------- airport coverage ---------- */
.qat-coverage{background:#fff;padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--border-ui)}
.qat-coverage .qat-wrap{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.qat-coverage .lbl{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--on-surface);white-space:nowrap}
.qat-ports{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.qat-port{background:var(--primary);color:#fff;font-size:14px;font-weight:500;padding:8px 24px;border-radius:9999px}
.qat-port.here{background:var(--yellow);color:var(--on-yellow);font-weight:700}
/* ---------- fleet ---------- */
.qat-fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1040px){.qat-fleet{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.qat-fleet{grid-template-columns:1fr}}
/* Blue outline = brand. Only the "Most Popular" card gets the yellow treatment,
so yellow keeps meaning "this one" rather than being decoration. */
.qat-vcard{background:#fff;border:1.5px solid var(--primary);border-radius:12px;overflow:hidden;
display:flex;flex-direction:column;position:relative;box-shadow:var(--lux-shadow);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.qat-vcard:hover{transform:translateY(-5px);box-shadow:var(--lux-hover-shadow)}
.qat-vcard.feat{border:2px solid var(--yellow);box-shadow:0 0 0 4px rgba(242,187,28,.16),var(--lux-shadow)}
/* Car photos are TRANSPARENT PNG/WebP, so this panel must be light — a blue
gradient here showed as a blue block behind each car, clashing with the white
card. 'contain' (not cover) keeps the whole vehicle visible, uncropped. */
.qat-vpic{width:100%;height:190px;background:#fff;padding:6px 10px;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.qat-vpic img{width:100%;height:100%;object-fit:contain;object-position:center}
.qat-vpic svg{width:130px;color:rgba(15,28,44,.18)}
.qat-vbadge{position:absolute;top:12px;right:12px;background:var(--yellow);color:var(--on-yellow);
font-size:10px;font-weight:800;padding:4px 12px;border-radius:9999px;text-transform:uppercase;
letter-spacing:.05em;z-index:2}
.qat-vbody{padding:24px;display:flex;flex-direction:column;flex-grow:1}
.qat-vbody h3{font-size:18px;font-weight:700;color:var(--on-surface);margin-bottom:4px}
.qat-vbody .desc{font-size:13px;color:var(--text-body);margin-bottom:16px;line-height:1.55}
/* capacity row: tinted band (echoes Step 1) so the key numbers stand out
instead of sitting as plain grey text */
.qat-vcap{background:var(--bg-tint);border-radius:8px;margin:0 0 16px;padding:10px 12px!important;
border-top:none!important;color:var(--primary)!important;font-weight:700!important}
.qat-vcap-legacy{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--border-ui);
border-bottom:1px solid var(--border-ui);font-size:13px;font-weight:600;color:var(--primary);margin-bottom:16px}
.qat-vcap span{display:inline-flex;align-items:center;gap:6px}
.qat-vcap svg{width:16px;height:16px}
.qat-vlist{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.qat-vlist li{display:flex;gap:8px;font-size:13px;color:var(--text-body);line-height:1.5}
.qat-vlist svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:2px}
.qat-vbody .qat-btn{margin-top:auto;width:100%}
.qat-nl-m{display:none}
.qat-fleet-note{margin-top:20px;text-align:center;font-size:12px;font-style:italic;color:var(--text-body)}
/* ---------- how it works ---------- */
.qat-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;text-align:center}
@media(max-width:760px){.qat-steps{grid-template-columns:1fr}}
.qat-stepcircle{width:80px;height:80px;border-radius:9999px;background:var(--bg-tint);display:flex;
align-items:center;justify-content:center;margin:0 auto 24px;position:relative}
.qat-stepcircle svg{width:38px;height:38px;color:var(--primary)}
.qat-stepnum{position:absolute;top:-8px;right:-8px;width:32px;height:32px;border-radius:9999px;
background:var(--primary);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.qat-steps h3{font-size:20px;font-weight:700;color:var(--on-surface);margin-bottom:12px}
.qat-steps p{font-size:14px;color:var(--text-body);max-width:280px;margin:0 auto}
/* ---------- promise ---------- */
.qat-promise{background:linear-gradient(150deg,var(--primary-dark),#17609f);padding-top:64px;padding-bottom:64px}
.qat-promise .qat-sechead h2{color:#fff}
.qat-pgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:32px}
@media(max-width:900px){.qat-pgrid{grid-template-columns:1fr}}
.qat-pmain{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;
padding:40px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;
overflow:hidden;min-height:330px}
/* The shield IS the rating badge now - the separate 4.9 that sat top-right was removed
from promise.php, so its rules went with it rather than linger as dead selectors.
The sizes below are viewBox user units (the viewBox is 104x124), so every part of the
crest scales together with .shield's width/height. */
.qat-pmain .shield{position:absolute;top:24px;left:28px;width:92px;height:104px}
.qat-pmain .shield .cbody{fill:rgba(5,38,78,.62);stroke:var(--yellow);stroke-width:3;stroke-linejoin:round}
.qat-pmain .shield .cinner{fill:none;stroke:rgba(242,187,28,.5);stroke-width:1.3;stroke-linejoin:round}
.qat-pmain .shield .cnum{font-family:var(--serif);font-weight:700;font-size:28px;fill:var(--yellow);text-anchor:middle}
.qat-pmain .shield .cstars path{fill:var(--yellow)}
.qat-pmain .shield .clab{font-family:var(--sans);font-weight:700;font-size:7.2px;
letter-spacing:.8px;fill:rgba(255,255,255,.82);text-anchor:middle}
.qat-pmain h3{font-size:24px;font-weight:700;color:var(--yellow);margin-bottom:12px}
.qat-pmain p{font-size:16px;color:rgba(255,255,255,.9);max-width:46ch}
.qat-plist{display:grid;gap:12px}
.qat-pl{background:#fff;border-radius:8px;padding:20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--lux-shadow)}
.qat-pl svg{width:26px;height:26px;color:var(--primary);flex:none;margin-top:2px}
.qat-pl h4{font-size:16px;font-weight:700;color:var(--on-surface);margin-bottom:4px}
.qat-pl p{font-size:13px;color:var(--text-body);line-height:1.55}
/* ---------- difference (4 tiles) ---------- */
.qat-diff{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.qat-diff{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.qat-diff{grid-template-columns:1fr}}
.qat-dcard{background:#fff;border:1px solid var(--border-ui);border-radius:8px;padding:26px 22px;
text-align:center;box-shadow:var(--lux-shadow)}
.qat-dcard svg{width:38px;height:38px;color:var(--primary);margin:0 auto 14px;display:block}
.qat-dcard h4{font-size:16px;font-weight:700;color:var(--on-surface);margin-bottom:6px}
.qat-dcard p{font-size:13px;color:var(--text-body);line-height:1.55}
/* ---------- driver vetting ---------- */
.qat-vet{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.qat-vet{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.qat-vet{grid-template-columns:1fr}}
.qat-vetcard{background:#fff;border:1px solid var(--border-ui);border-radius:8px;padding:26px 22px;
text-align:center;
position:relative;box-shadow:var(--lux-shadow)}
.qat-vetnum{position:absolute;top:20px;right:20px;width:26px;height:26px;border-radius:9999px;
background:var(--bg-tint);color:var(--primary);font-size:12px;font-weight:700;
display:flex;align-items:center;justify-content:center}
.qat-vetcard > svg{width:38px;height:38px;color:var(--primary);margin:0 auto 14px;display:block}
.qat-vetcard h4{font-size:16px;font-weight:700;color:var(--on-surface);margin-bottom:6px}
.qat-vetcard p{font-size:13px;color:var(--text-body);line-height:1.55}
/* ---------- testimonials ---------- */
.qat-revtop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
flex-wrap:wrap;margin-bottom:48px}
.qat-revtop h2{font-size:30px;color:var(--on-surface);margin-bottom:8px}
.qat-revtop p{font-size:16px;color:var(--text-body)}
.qat-gpill{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-ui);
border-radius:6px;padding:10px 16px}
.qat-gpill .g{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--primary)}
.qat-gpill small{font-size:12px;color:var(--text-body)}
/* Reviews slider (14 Sep 2026, the client's choice over the fixed 3-card grid):
3 cards across on laptops, 2 on tablets, and on phones one card at 73% so the next
one peeks in by about 13% - the same as the fleet cards. One card per swipe, the
arrow buttons and their disabled/hidden states come from qatSwipeRow in
assets/qat/scripts.php; the CSS snapping here is the fallback if that has not run.
The track has 12px of room above and 22px below (cancelled by matching negative
margins) so the hover lift and the card shadow are not clipped by the scroller. */
.qat-rtrack{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding:12px 0 22px;margin:-12px 0 -22px}
.qat-rtrack::-webkit-scrollbar{display:none}
.qat-rtrack > .qat-rcard{flex:0 0 calc((100% - 48px) / 3);min-width:0;scroll-snap-align:start}
@media(max-width:1040px){.qat-rtrack > .qat-rcard{flex-basis:calc((100% - 24px) / 2)}}
@media(max-width:699px){
.qat-rtrack{gap:14px}
.qat-rtrack > .qat-rcard{flex-basis:73%;padding:24px;scroll-snap-align:center}
.qat-rtrack > .qat-rcard:first-child{scroll-snap-align:start}
.qat-rtrack > .qat-rcard:last-child{scroll-snap-align:end}
}
@media(hover:none){.qat-rtrack > .qat-rcard:hover{transform:none;box-shadow:var(--lux-shadow)}}
.qat-rnav{display:flex;justify-content:center;gap:12px;margin-top:28px}
.qat-rnav[hidden]{display:none}
.qat-rbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--primary);background:#fff;
color:var(--primary);display:inline-flex;align-items:center;justify-content:center;padding:0;
cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.qat-rbtn svg{width:20px;height:20px}
.qat-rbtn:hover:not(:disabled){background:var(--primary);color:#fff}
.qat-rbtn:disabled{opacity:.35;cursor:default}
.qat-rcard{background:#fff;border:1px solid var(--border-ui);border-radius:8px;padding:32px;
position:relative;box-shadow:var(--lux-shadow)}
.qat-rcard .quote{font-size:16px;font-style:italic;color:var(--on-surface);line-height:1.65;margin:14px 0 20px}
.qat-rcard .who{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
/* ---------- FAQ ---------- */
/* Two columns, each an independent stack - see the note in assets/qat/faq.php for why
this is not a grid over the items themselves. align-items:start stops a column
stretching to match its taller neighbour. */
.qat-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.qat-faqcol{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:900px){.qat-faq{grid-template-columns:1fr}}
.qat-qa{border:1px solid var(--border-ui);border-radius:6px;overflow:hidden;background:#fff}
.qat-qa .qbtn{width:100%;text-align:left;background:#fff;border:none;cursor:pointer;font-family:var(--sans);
padding:20px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-size:14px;font-weight:700;color:var(--on-surface);transition:background .2s}
.qat-qa .qbtn:hover{background:var(--bg-tint)}
.qat-qa .chev{width:20px;height:20px;color:var(--primary);flex:none;transition:transform .2s}
.qat-qa .ans{display:none;padding:20px 32px;background:var(--background);
border-top:1px solid var(--border-ui);font-size:14px;color:var(--text-body);line-height:1.7}
.qat-qa.open .ans{display:block}
.qat-qa.open .qbtn{border-left:4px solid var(--primary);background:var(--background)}
.qat-qa.open .chev{transform:rotate(180deg)}
/* ---------- closing CTA ---------- */
.qat-cta{position:relative;padding-top:96px;padding-bottom:96px;overflow:hidden;text-align:center;
background:linear-gradient(to right,var(--grad-start),var(--grad-end))}
.qat-cta h2{font-size:36px;color:#fff;margin-bottom:16px}
.qat-cta p{font-size:18px;color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 48px}
.qat-cta .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.qat-cta .qat-btn{padding:18px 44px}
/* ---------- footer ---------- */
/* Footer base rule - RESTORED. A previous edit replaced a block that happened to
include this line, which silently took the text colour and both paddings with it. */
.qat-footer{background:var(--on-surface);color:rgba(255,255,255,.7);padding-top:80px;padding-bottom:32px}
/* The only intended change: layers 1 and 3 of the MOBILE hero - its scrim and its
blue base, copied verbatim from the .qat-hero rule in the max-width:980px block.
The hero's other two layers are deliberately left out: its photograph is sized
`cover`, so on a short wide footer it would show a quite different crop, and its
::after highlight is a fixed 900x460 ellipse that lands elsewhere on a shorter
box. These two are pure gradients and render the same on any element. */
.qat-footer{background:
linear-gradient(180deg,rgba(8,42,80,.60) 0%,#052D5C 50%,#052D5C 100%),
linear-gradient(155deg,#2079c2 0%,#1a6fb6 42%,#3a94d4 100%)}
.qat-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:48px}
@media(max-width:820px){.qat-fgrid{grid-template-columns:1fr 1fr}}
/* One section per row, left aligned. The centred two-column version read badly: the
brand block ended up with a left logo over centred copy over left socials, and the
two link lists had to be propped to the same height to stay level. */
@media(max-width:520px){
.qat-fgrid{grid-template-columns:1fr}
/* Brand block ONLY - the link lists and Contact Us stay left aligned.
.qat-brand and .qat-social are both flex, so justify-content is what moves them;
text-align alone would centre the paragraph and leave the logo and icons on the
left, which is exactly how this went wrong the first time. */
.qat-fgrid > *:nth-child(1){text-align:center}
.qat-fgrid > *:nth-child(1) .qat-brand,
.qat-fgrid > *:nth-child(1) .qat-social{justify-content:center}
/* the blurb has max-width:34ch, so it needs auto margins to sit centred */
.qat-fgrid > *:nth-child(1) .about{margin-left:auto;margin-right:auto}
/* 80px of empty cap above the footer is a lot of dead space on a phone */
.qat-footer{padding-top:44px}
}
@media(max-width:360px){
.qat-fgrid .qat-brand{justify-content:center}
.qat-fgrid .qat-social{justify-content:center}
.qat-fgrid .about{margin-left:auto;margin-right:auto}
/* contact rows are icon + text side by side, so they need centring as flex rows,
not just text-align */
.qat-fgrid .qat-crow{justify-content:center;text-align:left}
}
.qat-footer .qat-brand{margin-bottom:20px}
.qat-footer .qat-brand img{height:52px}
.qat-footer .about{font-size:14px;line-height:1.7;max-width:34ch}
.qat-footer h5{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
color:var(--yellow);margin:0 0 20px}
.qat-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.qat-footer ul a{font-size:14px;color:rgba(255,255,255,.7);transition:color .2s}
.qat-footer ul a:hover{color:#fff}
.qat-crow{display:flex;gap:12px;font-size:14px;line-height:1.5;margin-bottom:16px;color:rgba(255,255,255,.85)}
.qat-crow svg{width:18px;height:18px;color:var(--yellow);flex:none;margin-top:2px}
.qat-fbase{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:24px;display:flex;
justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}
.qat-fbase a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
.qat-fbase .sep{font-style:normal;color:rgba(255,255,255,.3);margin:0 14px}
.qat-fbase a:hover{color:#fff}
/* ---------- floating contact buttons ---------- */
.qat-float{position:fixed;right:20px;bottom:92px;z-index:60;display:flex;flex-direction:column;gap:10px}
.qat-float a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(13,27,42,.28);transition:transform .2s}
.qat-float a:hover{transform:scale(1.06)}
.qat-float .wa{background:#25D366}
.qat-float .tel{background:var(--primary)}
.qat-float svg{width:26px;height:26px;color:#fff}
/* ============================================================
HEADER DROPDOWNS (added 4 Aug 2026)
============================================================ */
.qat-nav{gap:24px}
.qat-drop{position:relative}
.qat-droptop{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
font-family:var(--sans);font-size:14px;font-weight:500;color:#fff;padding:6px 0;transition:color .2s}
.qat-droptop svg{width:14px;height:14px;transition:transform .2s}
.qat-drop:hover .qat-droptop,.qat-drop.open .qat-droptop{color:var(--yellow)}
.qat-drop:hover .qat-droptop svg,.qat-drop.open .qat-droptop svg{transform:rotate(180deg)}
.qat-dropmenu{position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;border-radius:8px;
box-shadow:0 14px 34px rgba(13,27,42,.22);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.qat-drop:hover .qat-dropmenu,.qat-drop.open .qat-dropmenu{opacity:1;visibility:visible;transform:translateY(0)}
.qat-dropmenu a{display:block;padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--on-surface);
border-radius:5px;white-space:nowrap;transition:background .15s,color .15s}
.qat-dropmenu a:hover{background:var(--bg-tint);color:var(--primary)}
.qat-dropmenu-wide{min-width:265px}
.qat-dropall{margin-top:6px;border-top:1px solid var(--border-ui);border-radius:0 0 5px 5px;
color:var(--primary)!important;font-weight:700!important}
/* keeps the menu reachable while the mouse travels down to it */
.qat-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
/* ============================================================
MINIMAL HEADER / FOOTER — Google Ads landing pages
Logo + phone + trust strip only. No menu, no footer links.
============================================================ */
.qat-head-min .qat-wrap{justify-content:space-between}
.qat-head-min .qat-phone{display:block}
.qat-footer-min{padding-top:26px;padding-bottom:26px}
.qat-minrow{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}
.qat-minbrand{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff}
.qat-minphone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.qat-minphone svg{width:16px;height:16px;color:var(--yellow)}
.qat-minlinks a{color:rgba(255,255,255,.7);margin-right:18px}
.qat-minlinks a:hover{color:#fff}
.qat-mincopy{color:rgba(255,255,255,.55);font-size:12px}
/* ============================================================
FOOTER: social, payment cards, trust badges
============================================================ */
.qat-social{display:flex;gap:10px;margin-top:18px}
.qat-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.qat-social a:hover{background:var(--yellow);transform:translateY(-2px)}
.qat-social a:hover svg{color:var(--on-yellow)}
.qat-social svg{width:17px;height:17px;color:#fff;transition:color .2s}
/* ---- footer trust cards + secure payment (client reference, 25 Aug 2026) --------
Was: a "Secure payment" label with a white card strip, and three small pills. Now a
card per promise - lead icon, title, one line of detail, a rule, paired icon - with
the payment block centred beneath. Same treatment on desktop and phone; only the
grid changes (3 across -> stacked). */
.qat-trustrow{padding-top:34px;border-top:1px solid rgba(255,255,255,.1);margin-top:44px}
.qat-tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qat-tcard{display:flex;align-items:center;gap:14px;min-width:0;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
border-radius:14px;padding:15px 17px}
.qat-tcard .lead{width:32px;height:32px;flex:none;color:var(--yellow)}
.qat-tcard .txt{flex:1;min-width:0}
.qat-tcard h6{font-size:15px;font-weight:700;color:#fff;margin:0 0 3px;line-height:1.25}
.qat-tcard p{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.6);margin:0}
/* the rule lives on the span, not the svg - a border on a replaced element sits tight
against the artwork and there is nowhere to put the breathing space */
.qat-tcard .tail{flex:none;display:flex;align-items:center;
padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.qat-tcard .tail svg{width:28px;height:28px;color:var(--yellow)}
.qat-pay{margin-top:26px;text-align:center}
.qat-pay .lock{display:block;width:20px;height:20px;margin:0 auto 8px;color:#4a9be0}
.qat-payhead{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:8px}
.qat-payhead::before,.qat-payhead::after{content:"";flex:1 1 0;max-width:200px;height:1px;
background:rgba(255,255,255,.16)}
.qat-payhead span{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:#fff;white-space:nowrap}
/* artwork is transparent, so no white box behind it any more */
.qat-pay img{display:block;margin:0 auto;width:100%;max-width:430px;height:auto}
@media(max-width:640px){
.qat-minrow{justify-content:center;text-align:center}
}
/* mobile: dropdowns become plain expanded lists inside the slide-down menu */
@media(max-width:980px){
.qat-nav.open .qat-drop{width:100%}
.qat-nav.open .qat-droptop{width:100%;justify-content:space-between;padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.12)}
.qat-nav.open .qat-dropmenu{position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;background:transparent;padding:4px 0 8px 12px;min-width:0;display:none}
.qat-nav.open .qat-drop.open .qat-dropmenu{display:block}
.qat-nav.open .qat-dropmenu a{color:rgba(255,255,255,.82);padding:8px 0}
.qat-nav.open .qat-dropmenu a:hover{background:transparent;color:var(--yellow)}
.qat-dropall{border-top-color:rgba(255,255,255,.12)}
}
/* Book Now in the header on hero pages: hidden until the visitor scrolls past the
hero (the quote box is visible up there, so the button would be pointless).
scripts.php adds .show once the hero has scrolled out of view. */
/* display:none (not visibility:hidden) — otherwise the invisible button still
reserves space and pushes the phone away from the right edge on the hero. */
.qat-book-scroll{display:none}
/* The reveal is keyed on the WRAPPER now (.show moved there when the phone tray was
built). A `.qat-book-scroll.show` rule here would match nothing, so the desktop
header button would never come back after scrolling. */
.qat-cta-tray.show .qat-book-scroll{display:inline-flex;animation:qatFadeBtn .25s ease both}
@keyframes qatFadeBtn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* On phones the header Book Now becomes a STICKY BAR pinned to the bottom of the
screen, so once the quote form has scrolled away the call to action stays with the
reader instead of disappearing off the top.
It stops short of the right edge on purpose: the WhatsApp button and the Tawk.to
chat bubble live in that corner, and Tawk renders at z-index 1000003 - far above
anything set here - so the bar clears the corner rather than fighting it. */
@media(max-width:980px){
.qat-book-scroll{display:none}
/* The pinned-bar rules that used to live here are GONE - .show now sits on the
.qat-cta-tray wrapper, not on this button, so a `.qat-book-scroll.show` rule
would match nothing. See "phones: BOTTOM CTA TRAY" at the end of this file. */
}
@keyframes qatSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Logo scales down with the bar on small screens so it never crowds the burger. */
@media(max-width:640px){.qat-brand img{height:40px}.qbook .brand img{height:38px}
/* logo 40px -> two 20px lines */
.qat-bdiv{height:40px}
.qat-brandtext{font-size:13.5px;line-height:20px}}
@media(max-width:400px){.qat-brand img{height:35px}
/* logo 35px -> two 17.5px lines */
.qat-bdiv{height:35px}
.qat-brandtext{font-size:12px;line-height:17.5px}}
/* Book Now / Get Instant Quote anchor: the sticky header is 80px, so without a
scroll margin the top of the quote box (its heading) lands underneath it. */
#qat-book{scroll-margin-top:108px}
/* fleet card rating row — echoes Step 1's hierarchy (name > model > rating > capacity) */
.qat-vrate{display:flex;align-items:center;gap:6px;margin:0 0 14px;font-size:13px;color:var(--text-body)}
.qat-vrate .stars{color:var(--yellow);letter-spacing:1px;font-size:14px}
.qat-vrate b{color:var(--on-surface);font-weight:700}
.qat-vrate .cnt{color:var(--outline);font-size:12px}
.qat-vbody h3{font-size:19px!important}
.qat-vbody .desc{margin-bottom:10px!important}
/* Trustpilot official widget inside our review card.
The row is bottom-aligned (align-items:flex-end), so this block's height
decides whether the card lines up with Reviews.io beside it. Matching the
two-line (stars + score) height of that card keeps the row even. */
/* The Trustpilot iframe reports its own intrinsic width and was stretching its
card wider than the Reviews.io card beside it. Clamping the widget to the card
(width:100%) and giving BOTH side cards one fixed width keeps the trio even. */
.qat-tp{margin-top:4px;height:26px;width:100%;max-width:100%;display:flex;
align-items:center;justify-content:center;overflow:hidden}
.qat-tp iframe{max-width:100%!important}
.qat-tp a{color:#00B67A;font-size:12px;text-decoration:none}
/* All three cards share the same shape and sizing. Left to hug their own content
they came out three different widths purely because "Tripadvisor" is a longer word
than "Google" — and the focal card ended up the NARROWEST of the set. A shared
floor lines them up; Google still reads as the focal one via the yellow border and
lift, not by being a different size. */
.qat-revcard:not(.main){width:fit-content;min-width:210px;padding:12px 16px;
align-items:center;justify-content:center;text-align:center;gap:2px;
/* Brand-blue outline to mirror the yellow one on the Google card, so all three read
as one set. Placed on THIS rule, not the base .qat-revcard - the base rule sits
earlier in the file at the same specificity and would be overridden here anyway. */
border:2px solid var(--primary)}
.qat-revcard.main{min-width:210px}
.qat-revcard:not(.main) .plat{justify-content:center;font-size:15px}
/* Stars matched to the Google card (20px). They were inheriting the card's body
size, which left Tripadvisor and Trustpilot looking like the lesser two. */
.qat-revcard:not(.main) .qat-stars-green{font-size:24px}
/* Google's card is .main, so it is not covered by the rule above. Its size used to be
an inline style; it is a class now, and the class had to be re-declared here after a
revert rolled back the stylesheet but not the markup - which left Google's stars at
the 16px default while the other two were 24px. */
.qat-stars-lg{font-size:24px}
.qat-revcard:not(.main) .sc{font-size:13.5px}
/* PARTIAL star: the glyph is painted with a hard-stop gradient and then clipped to the
text itself, so a 4.7 shows the fifth star 70% filled rather than rounding to 4 or 5.
--fill is set per star in reviews-strip.php. -webkit-text-fill-color is required as
well as color for Safari, which otherwise paints over the clipped background. */
.qat-stars .part,.qat-stars-green .part{
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent}
.qat-stars-green .part{background-image:linear-gradient(90deg,
#00B67A var(--fill,50%),rgba(0,182,122,.26) var(--fill,50%))}
.qat-stars .part{background-image:linear-gradient(90deg,
var(--yellow) var(--fill,50%),rgba(242,187,28,.30) var(--fill,50%))}
/* unfilled star: same glyph, faded — so a 4.2 score shows 4 lit stars, not 5 */
.qat-revcard .dim{opacity:.26}
/* USP bar: supplied brand-coloured SVG icons replace the old inline line-icons.
No auto margins now - the icon is a flex item beside the text, not a centred
block above it. */
/* 72px matches the height of the title + description block beside it, so the icon
and the text start and finish on the same lines. */
.qat-usp .uspico{width:72px;height:72px;display:block;margin:0;flex:none}
/* fleet card interior — brought closer to the Step-1 cards: a rating row, a
tinted capacity band, and tighter type hierarchy so the card is not just
a photo over plain text. */
.qat-vstars{display:flex;align-items:center;gap:6px;margin:2px 0 12px;font-size:12.5px}
.qat-vstars .s{color:var(--yellow);letter-spacing:1px}
.qat-vstars b{color:var(--on-surface);font-weight:700}
.qat-vstars .n{color:var(--outline);font-size:11.5px}
.qat-vbody h3{font-size:19px!important}
.qat-vlist li{font-size:13px}
/* ==========================================================================
RESPONSIVE PASS - 19 Aug 2026
Audited at 320 / 375 / 412 / 768 / 1280. No horizontal overflow was found at
any width; these fix the issues that were found instead.
========================================================================== */
/* --- 1. The passenger / bag counters were unusable on small phones ---------
.qat-step is [-] [number] [+]. The two 34px buttons are fixed, so the number
took whatever was left - which at 375px was 13px and at 320px only 4px, i.e.
the customer could not see how many passengers they had selected. Slimming the
card padding, the grid gap and the buttons gives the number real room back. */
@media(max-width:480px){
.qat-book{padding:18px}
.qat-grid3{gap:8px}
.qat-step button{width:28px}
.qat-step input{min-width:16px;font-size:15px}
.qat-control input,.qat-control select{padding-left:36px}
.qat-control > svg{left:10px}
}
/* --- 2. Form labels were 11px ---------------------------------------------
Small text on the one form that has to be filled in on a phone. 12px is the
practical floor for a label; anything less is a squint. */
@media(max-width:780px){
.qat-field label{font-size:12px}
}
/* --- 3. Footer links were 19px tall ---------------------------------------
Sixteen links stacked close together with no padding is easy to mis-tap on a
phone. Vertical padding roughly doubles the target without stretching the
footer the way a full 44px row would. */
@media(max-width:780px){
.qat-footer a{padding:7px 0}
.qat-footer .qat-fbot a{padding:4px 0}
}
/* --- 4. Remaining small labels on phones ----------------------------------
"Google rated" (11.5px) and the "Most Popular" badge (10px) are secondary, but
10px is below what most people read comfortably at arm's length. */
@media(max-width:780px){
.qat-vstars .n{font-size:12px}
.qat-vbadge{font-size:11px}
}
/* --- 5. Social icons were 36px - nudged to a comfortable 40px ------------- */
@media(max-width:780px){
.qat-fsocial a,.qat-footer a[href*="facebook"],.qat-footer a[href*="instagram"],
.qat-footer a[href*="tiktok"]{width:40px;height:40px}
}
/* Very narrow phones only. At 320px the text column is 193px, and "24/7 Customer
Support" needs a 16px heading to stay on one line - at 17px and up it wraps,
which alone made that item 29px taller than its icon. 68px icon then matches the
shorter text block. Above 340px the 20px heading fits fine, so this is scoped
tightly rather than shrinking headings on every phone. */
/* NB: this sits at the END of the file on purpose - the base .uspico rule further
up has the same specificity, so an override placed above it silently loses. */
@media(max-width:340px){
.qat-usp h3{font-size:16px}
.qat-usp .uspico{width:68px;height:68px}
}
/* ---- review cards on phones: one row, logo only ----------------------------
Three 210px cards need 656px; below ~700px they no longer fit and were stacking
into three rows. Here the platform NAME is hidden and the logo carries the card
instead - the same approach the competitor uses, and the only way three fit across
a phone with the score still readable.
The name is only hidden, never removed from the page, so it is still read out by a
screen reader and still indexed.
Cards share the width equally (flex:1 with min-width:0) rather than each sizing to
its own content, otherwise "Tripadvisor" would make its card wider than the rest.
Desktop is untouched: above 700px the names and 24px stars stay exactly as they are. */
@media(max-width:699px){
/* The card is 90px tall here (fixed type sizes), so pulling it up by exactly half
its height sits it dead centre on the line where the hero ends. The base rule's
-50px is right for the taller 103px desktop card - do not change that one. */
.qat-revstrip{margin-top:-45px}
.qat-revstrip .qat-row{flex-wrap:nowrap;gap:6px;align-items:stretch}
.qat-revcard,
.qat-revcard.main,
.qat-revcard:not(.main){flex:1 1 0;min-width:0;width:auto;padding:10px 5px}
.qat-revcard .pname{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.qat-revcard .plat{min-height:26px;gap:0}
.qat-revcard .taowl{height:20px}
.qat-revcard .plat svg{width:22px;height:22px}
/* :not(.main) is repeated here on purpose. The desktop rule is
`.qat-revcard:not(.main) .qat-stars-green` - three classes - so a two-class
selector loses to it however late it appears in the file. */
.qat-revcard:not(.main) .qat-stars-green,
.qat-revcard.main .qat-stars,
.qat-revcard.main .qat-stars-lg{font-size:14px;letter-spacing:.5px}
.qat-revcard .sc{font-size:11px;white-space:nowrap}
}
/* ---- phones: equal air around the USP row -----------------------------------
The gap ABOVE this section is two paddings stacked - the review strip's own
bottom padding PLUS this section's top padding - which is why it measured
30+52 = 82px against 36px below. Split as 12+28 so both sides are 40px. */
@media(max-width:760px){
.qat-revstrip{padding-bottom:12px}
.qat-usp{padding-top:28px;padding-bottom:40px}
}
.qat-cta-tray{display:contents} /* declared up with the desktop reveal rule too */
/* The WhatsApp and Call links exist only inside the phone bar. The wrapper is
display:contents on desktop, so without this they would drop straight into the
header row beside the logo. */
.qat-tray-side{display:none}
/* ---- phones: BOTTOM CTA TRAY + FLOATING BUTTONS ----------------------------
The button does NOT run to the screen edges. It sits inside a WHITE TRAY that is
pinned flush to the bottom, with the button inset 16px on each side - the pattern
the client supplied as the reference.
Why the extra in header.php: one element cannot be both
the full-width white bar and the rounded inset pill. A ::before was tried first and
is wrong - inside a stacking context a negative-z-index child paints ON TOP of its
parent's own background, so the white tray would cover the yellow button.
On desktop the span is display:contents, so it vanishes from layout entirely and the
button stays a normal flex child of the header exactly as before.
Geometry, kept in step with assets/qat/scripts.php (qatTawkLift reads BAR = 68):
tray 68px = 48px button + 10px padding above and below
Tawk bubble 68 + 12 gap = 80px up
WhatsApp 68 + 12 + 64 bubble + 10 gap = 154px up
env(safe-area-inset-bottom) is the iPhone home-indicator strip: the white runs into
it so there is no dead gap under the tray, while the padding keeps the button above
it. A permanently visible tray also hides the last 68px of the page, so the footer
gets that height back. */
@media(max-width:980px){
.qat-cta-tray{display:none}
.qat-cta-tray.show{
display:flex;align-items:center;justify-content:space-between;gap:10px;
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:#146CB2; /* brand blue. PREVIOUS VALUE: #05264E (the hero navy) */
padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
box-shadow:0 -6px 18px rgba(13,27,42,.30);
animation:qatSlideUp .22s ease both}
/* flex:0 0 auto - each side takes only the width its own icon + label needs, so every
remaining pixel is left for Book Now (which is flex:1 1 auto below). An earlier
version gave the sides an equal share instead; that centred the button perfectly but
capped it at its text width and left big empty gaps either side of it. */
.qat-cta-tray.show .qat-tray-side{display:flex;align-items:center;gap:9px;
flex:0 0 auto;text-decoration:none;min-width:0}
/* The right-hand item hugs the RIGHT edge, mirroring WhatsApp hugging the left.
Both sides already take an equal share of the row, so Book Now is geometrically
centred - but with BOTH contents left-aligned the spare space all piled up at the
far right (measured 43px there against 12px on the left), and that lopsided outer
margin is what reads as the button sitting off-centre. */
.qat-cta-tray.show .qat-tray-side:last-of-type{justify-content:flex-end}
.qat-tray-ico{width:40px;height:40px;border-radius:50%;flex:none;
display:flex;align-items:center;justify-content:center}
.qat-tray-ico.is-wa{background:#25D366}
/* WAS background:var(--primary) with a white glyph - but --primary IS the bar
colour now, so the disc would disappear into it. Inverted to keep it visible. */
.qat-tray-ico.is-chat{background:#fff}
.qat-tray-ico.is-chat svg{color:var(--primary)}
.qat-tray-ico svg{width:21px;height:21px;color:#fff}
/* Labels appear only when there is room for them - see the two blocks below. */
.qat-tray-txt{display:none;line-height:1.25;color:#fff;min-width:0;overflow:hidden}
.qat-tray-txt b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap}
.qat-cta-tray.show .qat-book-scroll b{font-weight:800}
.qat-cta-tray.show .qat-book-scroll i{display:block;font-style:normal;font-weight:600;
font-size:10.5px;line-height:1;letter-spacing:.01em;text-transform:none;opacity:.72;margin-top:0}
.qat-tray-txt i{display:none;font-style:normal;font-size:11.5px;
color:rgba(255,255,255,.88);white-space:nowrap} /* WAS .72 - too faint on the lighter blue */
.qat-cta-tray.show .qat-book-scroll{
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
position:static;flex:1 1 auto;min-width:0;min-height:46px;height:auto;line-height:1.15;gap:2px;
padding:0 14px;border-radius:8px;font-size:14.5px;letter-spacing:.03em;
box-shadow:none;animation:none}
/* WhatsApp has MOVED INTO the bar, so the floating one is redundant while the bar is
up. It is still needed before the bar appears - body.qat-bar-on is toggled by the
same script that shows the bar (assets/qat/scripts.php). */
body.qat-bar-on .qat-float{display:none}
/* No lift here any more. This used to sit 152px up to clear the bar, but the bar is
only on screen past the hero - before that the buttons hung in mid-air. The bar
hides them outright (rule above), so off-bar they belong at the base 92px, which
already clears the Tawk bubble sitting at its own ~20px. */
/* 66px bar + 12px breathing room; was 106px, which left a 40px hole */
.qat-footer{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.qat-tcards{grid-template-columns:1fr}
.qat-fbase{flex-direction:column;align-items:center;text-align:center;gap:7px}
}
/* The labels come back in stages, because a narrow phone cannot hold two labelled
buttons AND a usable Book Now. Measured at 390px: full-size icons plus both labels
leave the button 84px, which is not enough for the words. Trimming the icons to 36px
and the type a point buys it back to ~146px, which fits. Below 380px the labels go
entirely and the icons stand alone. */
@media(min-width:380px) and (max-width:980px){.qat-tray-txt{display:block}}
@media(min-width:380px) and (max-width:479px){
.qat-cta-tray.show{gap:8px;padding-left:10px;padding-right:10px}
.qat-cta-tray.show .qat-tray-side{gap:7px}
.qat-tray-ico{width:36px;height:36px}
.qat-tray-ico svg{width:19px;height:19px}
.qat-tray-txt b{font-size:11.5px}
.qat-cta-tray.show .qat-book-scroll{font-size:13px;padding:0 8px;letter-spacing:.02em}
}
/* the reference shows the second line on a phone, so it comes in with the labels
at 380px rather than waiting for 560px */
@media(min-width:380px) and (max-width:980px){.qat-tray-txt i{display:block}}
/* ---- homepage fleet cards: brought up to the Step 1 cards --------------------
THE GAP. The old card left ~53px of dead space between the car and its name,
from three stacked causes: a fixed 190px photo box letterboxing a 2:1 image
(23px of nothing above AND below it), 6px of padding on that box, then 24px
more as the body opened. The car webps were measured directly - each is
1000x500 with the vehicle running to the very bottom edge (0% transparent
below, 5-11% above) - so letting the image set its own height puts the wheels
straight onto the type with no letterboxing at all. Same full-bleed photo the
Step 1 cards use.
COLOUR. The feature ticks were --green (#00A559), which is not in the brand
palette, so they are now brand blue. The two greens that REMAIN on this page
are deliberate and must not be "corrected": .qat-stars-green (#00B67A) is
Trustpilot's and Tripadvisor's own star colour, and .qat-float .wa (#25D366)
is WhatsApp's. Those belong to those brands, not to us.
TYPE. Vehicle name moves to the serif at 20px in brand blue, matching the
Step 1 card, and the rhythm below it is tightened so the card reads as one
block rather than four loose rows. */
/* The badge sits ON the photo, so the photo needs room above it or the pill lands on
the car's roof. The clearance has to allow for each file's own transparent top,
which is NOT the same across the four (measured: saloon 7%, business 11%, mpv6 5%,
mpv8 7%) - mpv6 is the tight one, so the padding is set for that worst case.
Applied to all four cards, not just the badged one, so the row stays level. */
.qat-vpic{height:auto;padding:30px 16px 0;display:block;overflow:hidden}
.qat-vbadge{top:9px;right:12px;font-size:9.5px;padding:3px 10px}
.qat-vpic img{width:100%;height:auto;display:block}
.qat-vbody{padding:14px 18px 18px}
.qat-vbody h3{font-family:var(--serif);font-size:20px!important;color:var(--primary-dark);
font-weight:700;margin-bottom:2px}
.qat-vbody .desc{font-size:12.5px;margin-bottom:8px!important}
.qat-vstars{margin:0 0 10px}
.qat-vcap{margin:0 0 12px;padding:9px 12px!important;font-size:12.5px}
.qat-vlist{gap:7px;margin:0}
.qat-vlist li{font-size:12.5px}
.qat-vlist svg{color:var(--primary);margin-top:1px}
.qat-fleet-note{margin-top:22px}
/* ---- THE JOURNEY ROAD (assets/qat/how-it-works.php) -------------------------
Four stops from quote to arrival, laid along a road: navy tarmac, brand-yellow
centre line. Two layouts - a left-to-right road on desktop, a top-to-bottom one
below 1000px - because a single path cannot do both.
The markers and labels are positioned in PERCENTAGES of the wrapper, never px:
each road