/* Prox Car Rental design. Sizes follow HOME_PAGE_SPEC_2026-10-28.md (Baker layout measured at 1440 and 375 wide). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2"); }
/* options for the big home-page "DUBAI" (Google Fonts, SIL Open Font License) */
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url(../fonts/oswald-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Fjalla One"; font-weight: 400; font-display: swap; src: url(../fonts/fjalla-one-latin-400-normal.woff2) format("woff2"); }

:root {
	--prox-red: #F40000;        /* logo red: icons, headline blocks, lines */
	--prox-red-btn: #CC0000;    /* buttons and labels: white text passes contrast */
	--prox-green: #167F3B;      /* WhatsApp green: white text 5.1:1 (Lighthouse contrast, 29 Oct 2026) */
	--prox-ink: #141414;
	--prox-dark: #1E1E1E;
	--prox-band: #282828;
	--prox-foot: #212121;
	--prox-light: #EEEEEE;
	--prox-tint: #F1ECE8;
	--prox-white: #FFFFFF;
	--prox-side: 30px;
	--prox-head-h: 116px;
	--prox-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--prox-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
	--theme-font-family: var(--prox-sans);
	--theme-text-color: var(--prox-ink);
	--theme-link-initial-color: var(--prox-red-btn);
	--theme-link-hover-color: var(--prox-ink);
	--theme-button-background-initial-color: var(--prox-red-btn);
	--theme-button-background-hover-color: var(--prox-ink);
}
@media (max-width: 999px) { :root { --prox-head-h: 72px; --prox-side: 16px; } }

/* Blocksy's own colour palette (its default accent is blue #2872fa) drives its buttons, page numbers, arrows, links and
   form focus on every page. Replace all eight with Prox Car Rental colours so no Blocksy blue can appear anywhere. */
html:root {
	--theme-palette-color-1: #CC0000;   /* accent: buttons, links, active page number */
	--theme-palette-color-2: #141414;   /* accent hover */
	--theme-palette-color-3: #2A2A2A;   /* body text */
	--theme-palette-color-4: #141414;   /* headings */
	--theme-palette-color-5: #E2E2E2;   /* borders */
	--theme-palette-color-6: #F4F4F4;   /* light panels */
	--theme-palette-color-7: #FFFFFF;
	--theme-palette-color-8: #FFFFFF;
	--theme-link-initial-color: #CC0000;
	--theme-link-hover-color: #141414;
	--theme-button-background-initial-color: #141414;
	--theme-button-background-hover-color: #CC0000;
	--theme-button-text-initial-color: #FFFFFF;
	--theme-button-text-hover-color: #FFFFFF;
	--theme-headings-color: #141414;
	--theme-heading-color: #141414;
	--theme-text-color: #2A2A2A;
	--theme-border-color: #E2E2E2;
	--theme-form-field-border-focus-color: #CC0000;
	--theme-button-border-radius: 0;
	--theme-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* Blocksy's default is the system font */
	--theme-headings-font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
}
body, button, input, select, textarea { font-family: var(--prox-sans); }

/* Blocksy hides sideways overflow with overflow-x: hidden on <body>, which turns <body> into its own scroll box and
   breaks sticky/pinned sections. "clip" hides the overflow without creating a scroll box. */
html, body { overflow-x: clip !important; }
body { overflow-y: visible !important; font-family: var(--prox-sans); color: var(--prox-ink); background: var(--prox-white); --theme-palette-color-7: var(--prox-white); --theme-palette-color-8: var(--prox-white); }
h1, h2, h3, h4, h5, h6 { font-family: var(--prox-cond); }
.prox-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.prox-icon svg { width: 100%; height: 100%; }
.prox-icon .acc { fill: var(--prox-red); }
.prox-icon--lg { width: 48px; height: 48px; }
.prox-icon--xl { width: 72px; height: 72px; }
.prox-brand { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.prox-brand svg { width: 100%; height: 100%; }
/* owner-supplied PNG icons (LinkedIn, phone): the picture is a cut-out painted in the text colour */
.prox-mask { background: currentColor; -webkit-mask: var(--prox-mask) center / contain no-repeat; mask: var(--prox-mask) center / contain no-repeat; }

/* ---------- header (every page) ---------- */
.prox-header { position: sticky; top: 0; z-index: 50; background: var(--prox-dark); color: var(--prox-white); transition: background-color .3s; }
.prox-header.is-over-hero { position: fixed; left: 0; right: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.prox-header.is-over-hero.is-solid, .prox-header.is-open { background: var(--prox-dark); }
.admin-bar .prox-header { top: 32px; }
.prox-header__in { display: flex; align-items: center; justify-content: space-between; height: var(--prox-head-h); padding: 0 var(--prox-side); }
.prox-header__logo img { display: block; width: auto; height: 64px; }
.prox-nav ul { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0; list-style: none; }
.prox-nav a { color: var(--prox-white); font-family: var(--prox-sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.prox-nav a:hover, .prox-nav a:focus-visible { color: var(--prox-red); }
/* Packages drop-down: opens on hover or keyboard focus on desktop, with the caret button on phones */
.prox-nav__has-sub { position: relative; display: flex; align-items: center; gap: 4px; }
.prox-nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; color: var(--prox-white); cursor: pointer; }
.prox-nav__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.prox-nav__sub { position: absolute; top: calc(100% + 18px); left: -24px; display: none !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-width: 280px; padding: 10px !important; background: var(--prox-white); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.prox-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.prox-nav__has-sub:hover .prox-nav__sub, .prox-nav__has-sub:focus-within .prox-nav__sub, .prox-nav__has-sub.is-open .prox-nav__sub { display: flex !important; }
.prox-nav__has-sub.is-open .prox-nav__caret { transform: translateY(2px) rotate(-135deg); }
.prox-nav__sub a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--prox-ink); text-transform: none; letter-spacing: 0; font-size: 16px; }
.prox-nav__sub a:hover, .prox-nav__sub a:focus-visible { background: #F4F4F4; color: var(--prox-red-btn); }
.prox-nav__sub .prox-icon { width: 34px; height: 34px; }
.prox-nav__sub small { display: block; font-size: 13px; font-weight: 400; color: #666; }
/* "Reach Us Now": WhatsApp button in place of the phone number */
.prox-reach { display: inline-flex !important; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; background: var(--prox-green); color: var(--prox-white) !important; border-radius: 0; letter-spacing: .06em; transition: background-color .2s; }
.prox-reach:hover, .prox-reach:focus-visible { background: #0F5E2B; color: var(--prox-white) !important; }
.prox-reach .prox-brand { width: 22px; height: 22px; }
.prox-header__toggle { display: none; }
@media (max-width: 999px) {
	.prox-header__logo img { height: 44px; }
	.prox-header__toggle { display: block; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--prox-white); cursor: pointer; }
	.prox-burger, .prox-burger::before, .prox-burger::after { display: block; width: 26px; height: 2px; margin: 0 auto; background: currentColor; position: relative; transition: transform .2s; }
	.prox-burger::before, .prox-burger::after { content: ""; position: absolute; left: 0; }
	.prox-burger::before { top: -8px; } .prox-burger::after { top: 8px; }
	.is-open .prox-burger { background: transparent; }
	.is-open .prox-burger::before { transform: translateY(8px) rotate(45deg); }
	.is-open .prox-burger::after { transform: translateY(-8px) rotate(-45deg); }
	.prox-nav { display: none; position: absolute; top: var(--prox-head-h); left: 0; right: 0; background: var(--prox-dark); padding: 8px var(--prox-side) 24px; }
	.is-open .prox-nav { display: block; }
	.prox-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.prox-nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
	.prox-nav a { display: flex; padding: 16px 0; font-size: 16px; }
	.prox-nav__has-sub { flex-wrap: wrap; justify-content: space-between; }
	.prox-nav__sub-toggle { width: 44px; height: 44px; }
	.prox-nav__has-sub:hover .prox-nav__sub, .prox-nav__has-sub:focus-within .prox-nav__sub { display: none !important; }
	.prox-nav__has-sub.is-open .prox-nav__sub { display: flex !important; }
	.prox-nav__sub { position: static; width: 100%; min-width: 0; padding: 0 0 12px !important; background: transparent; box-shadow: none; }
	.prox-nav__sub::before { display: none; }
	.prox-nav__sub li { border: 0 !important; }
	.prox-nav__sub a { padding: 10px 0 10px 8px; color: var(--prox-white); font-size: 15px; }
	.prox-nav__sub a:hover { background: transparent; }
	.prox-nav__sub small { color: #BDBDBD; }
	.prox-nav__sub .prox-icon path:not(.acc) { fill: var(--prox-white); }
	.prox-nav__cta { border: 0 !important; padding-top: 16px; }
	.prox-reach { justify-content: center; width: 100%; }
}

/* ---------- shared pieces ---------- */
.prox-sec { padding: 0 var(--prox-side) 80px; }
.prox-intro { max-width: 560px; margin: 0 auto; padding: 120px 0 60px; text-align: center; }
.prox-intro p { margin: 24px 0 0; font-size: 18px; line-height: 1.75; }
.prox-h2 { margin: 0; font-family: var(--prox-cond); font-weight: 700; font-size: clamp(39px, 4.3vw, 62px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: inherit; }
.prox-h2::before { content: ""; display: block; width: 55px; height: 3px; margin: 0 auto 28px; background: var(--prox-red); }
.prox-h2--left::before { margin-left: 0; }
.prox-btns { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 0; }
.prox-btns--center { justify-content: center; }
.prox-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 29px; background: var(--prox-red-btn); color: var(--prox-white) !important; font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--prox-red-btn); border-radius: 0; transition: background-color .2s, border-color .2s; }
.prox-btn:hover, .prox-btn:focus-visible { background: var(--prox-ink); border-color: var(--prox-ink); }
.prox-btn .prox-icon path { fill: var(--prox-white); }
.prox-btn .prox-icon .acc { fill: var(--prox-white); opacity: .55; }
.prox-btn--ghost { background: transparent; border-color: var(--prox-white); }
.prox-btn--dark { background: var(--prox-ink); border-color: var(--prox-ink); }
.prox-btn--dark:hover, .prox-btn--dark:focus-visible { background: var(--prox-red-btn); border-color: var(--prox-red-btn); }
.prox-btn--big { min-height: 58px; padding: 18px 40px; font-size: 18px; }
:where(.prox-hero, .prox-sec, .prox-fleet, .prox-about, .prox-talk, .prox-footer, .prox-explore, .prox-post) a:focus-visible { outline: 3px solid var(--prox-red); outline-offset: 3px; }

/* ---------- 1 hero: blurred frame at once, still frame next, video fades in when playing ---------- */
.prox-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--prox-dark) center / cover no-repeat; color: var(--prox-white); }
.prox-hero__poster, .prox-hero__media, .prox-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.prox-hero__poster { object-fit: cover; }
.prox-hero__video { object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.prox-hero__video.is-on { opacity: 1; }
/* pause button for the clips (WCAG 2.2.2): small, bottom right; two bars = pause, triangle = play */
.prox-hero__pause { position: absolute; z-index: 3; right: var(--prox-side); bottom: 24px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(0,0,0,.45); color: var(--prox-white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.prox-hero__pause[hidden] { display: none; }
.prox-hero__pause:hover, .prox-hero__pause:focus-visible { background: rgba(0,0,0,.7); border-color: var(--prox-white); }
.prox-hero__pause:focus-visible { outline: 3px solid var(--prox-red); outline-offset: 3px; }
.prox-hero__pause-ico { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.prox-hero__pause[aria-pressed="true"] .prox-hero__pause-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.prox-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 65%, rgba(0,0,0,0) 100%); }
.prox-hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 1440px; margin: 0 auto; padding: var(--prox-head-h) var(--prox-side) 0 max(var(--prox-side), 8vw); }
/* ORIGINAL hero heading: two lines on red boxes. To go back, uncomment this block, remove the BIG "DUBAI" block below,
   and swap the heading line in front-page.php (instructions there).
.prox-h1 { margin: 0; font-family: var(--prox-cond); font-weight: 700; font-size: clamp(52px, 7vw, 100px); line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--prox-white); }
.prox-h1 span { display: inline; padding: 0 .18em; background: rgba(244, 0, 0, .85); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
*/

/* BIG "DUBAI" hero heading (owner's sample, 29 Oct 2026): white "RENT A CAR IN" sitting on a huge red "DUBAI", no boxes.
   The sample uses an extra-narrow poster font; IBM Plex Sans Condensed is stretched taller to come close. */
.prox-h1--big { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-family: var(--prox-cond); font-weight: 700; text-transform: uppercase; line-height: 1; }
.prox-h1__small { position: relative; z-index: 1; font-size: clamp(28px, 3.6vw, 54px); letter-spacing: .02em; color: var(--prox-white); text-shadow: 0 2px 14px rgba(0,0,0,.45); margin-bottom: -.32em; }
/* Without Impact (most phones): IBM Plex stretched taller, and an outline in the same red thickens it toward the poster look */
.prox-h1__big { display: block; font-size: clamp(120px, 19vw, 290px); letter-spacing: -.01em; line-height: .8; color: var(--prox-red); -webkit-text-stroke: .045em var(--prox-red); paint-order: stroke fill; transform: scaleY(1.32); transform-origin: top left; margin-bottom: .27em; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
/* With Impact (owner's choice, 29 Oct 2026; a licensed system font, so it is used only where the computer already has it):
   already narrow and heavy, so no stretch or outline; a plain "I" */
.has-impact .prox-h1__big { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif; font-weight: 400; font-size: clamp(130px, 21vw, 320px); letter-spacing: .005em; line-height: .86; -webkit-text-stroke: 0; transform: none; margin-bottom: .08em; }
.has-impact .prox-h1__small { margin-bottom: -.12em; }
/* letters carry built-in space on their left (Plex "R" 0.058 of its size, Impact "D" 0.031); pull each line back by its own
   amount so the ink of "R" and "D" starts on the same line (measured in the browser, 29 Oct 2026) */
.prox-h1__small { margin-left: -.0675em; }   /* Plex Condensed 700 "R" ink starts 0.0675 em in (pixel-measured, 29 Oct 2026) */
.prox-h1__big { margin-left: -.04em; }             /* Plex "D" 0.0625, less the half of the red outline that sits outside it */
.has-impact .prox-h1__big { margin-left: -.031em; }

/* "DUBAI" in Oswald Bold or Fjalla One (free, hosted with the site, so phones show it too); chosen in functions.php.
   Both are narrow and heavy already: no stretch or outline. Left shifts are measured below and set after checking. */
.prox-dubai-oswald .prox-h1__big, .prox-dubai-fjalla .prox-h1__big { -webkit-text-stroke: 0; transform: none; line-height: .9; margin-bottom: .1em; }
.prox-dubai-oswald .prox-h1__big { font-family: "Oswald", var(--prox-cond); font-weight: 700; font-size: clamp(120px, 19vw, 300px); letter-spacing: -.03em; }   /* letters closer together (owner, 29 Oct 2026) */
.prox-dubai-fjalla .prox-h1__big { font-family: "Fjalla One", var(--prox-cond); font-weight: 400; font-size: clamp(120px, 19vw, 300px); letter-spacing: 0; }
.prox-dubai-oswald .prox-h1__small, .prox-dubai-fjalla .prox-h1__small { margin-bottom: -.1em; }
.prox-dubai-oswald .prox-h1__big { margin-left: -.06em; }   /* Oswald 700 "D" ink starts 0.0600 em in (pixel-measured, 29 Oct 2026) */
/* "RENT A CAR IN" sits on "DUBAI" with a 2 px gap: remove the empty space under the small letters (0.1045 of their size)
   and above the big ones (0.0889 of theirs), each in its own size so it holds at every screen width (measured 29 Oct 2026) */
.prox-dubai-oswald .prox-h1__small { margin-bottom: -.1045em; }
.prox-dubai-oswald .prox-h1__big { margin-top: calc(2px - .0889em); }
.prox-dubai-fjalla .prox-h1__big { margin-left: -.0625em; }   /* Fjalla One "D" ink starts 0.0625 in (measured) */
.prox-hero__sub { max-width: 640px; margin: 28px 0 0; font-size: 20px; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.5); text-wrap: pretty; }

/* ---------- 2 why prox: big tall icons, small heading and text below ---------- */
.prox-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1380px; margin: 0 auto; padding: 0; list-style: none; }
/* big icon on top, heading and text underneath, all centred (owner, 29 Oct 2026) */
.prox-why__box { display: flex; flex-direction: column; align-items: center; padding: 40px 36px 40px; border: 1px solid #E2E2E2; background: var(--prox-white); text-align: center; }
.prox-icon--why { width: 132px; height: 132px; }
.prox-why__box h3 { margin: 28px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.prox-why__box p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--prox-ink); }
@media (max-width: 999px) { .prox-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .prox-why__box { padding: 24px 16px; } .prox-icon--why { width: 84px; height: 84px; } .prox-why__box h3 { font-size: 17px; margin-top: 18px; } .prox-why__box p { font-size: 14px; } }
@media (max-width: 420px) { .prox-why__grid { grid-template-columns: 1fr; } }

/* "What you pay" list under the why boxes (approved copy, 29 Oct 2026) */
.prox-pay { max-width: 1380px; margin: 56px auto 0; padding: 32px 36px; border-top: 4px solid var(--prox-red); background: #F6F6F6; }
.prox-pay__h { margin: 0 0 18px; font-family: var(--prox-cond); font-size: 26px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* two newspaper columns, so a two-line item no longer leaves a gap beside the next row; every item has the same space below */
.prox-pay__list { columns: 2; column-gap: 56px; margin: 0; padding: 0; list-style: none; }
.prox-pay__list li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; font-size: 16px; line-height: 1.55; break-inside: avoid; }
.prox-pay__list li:last-child { margin-bottom: 0; }
.prox-pay__list .prox-icon { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.prox-pay__list .prox-icon path:not(.acc) { fill: var(--prox-white); }
@media (max-width: 999px) { .prox-pay { margin-top: 36px; padding: 24px 18px; } .prox-pay__list { columns: 1; } .prox-pay__list li { font-size: 15px; } }

/* ---------- 3 fleet gallery: the frame sticks (CSS sticky) while the cars move sideways (home.js); phones swipe ---------- */
.prox-fleet { position: relative; background: var(--prox-dark); color: var(--prox-white); }
.prox-fleet__stick { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; overflow: hidden; }
.prox-fleet .prox-intro { flex: none; padding: calc(var(--prox-head-h) + 16px) var(--prox-side) 24px; }
.prox-fleet .prox-intro p { margin-top: 14px; }
.prox-fleet .prox-h2::before { margin-bottom: 18px; }
/* the view is the space left under the heading; cards take that height minus room for the name and rate */
.prox-fleet__view { flex: 1; min-height: 0; display: flex; align-items: center; padding-bottom: 28px; container-type: size; }
/* each car is exactly as wide as its photo (a long name wraps under it), so the space between photos is the same 24 px
   everywhere; photos line up at the top, with room for a two-line name and the rate below */
.prox-fleet__track { --card-h: clamp(200px, calc(100cqh - 112px), 560px); display: flex; align-items: flex-start; gap: 24px; margin: 0; padding: 0 var(--prox-side); list-style: none; }
.prox-fleet__item { flex: none; width: min-content; }
.prox-car { display: block; color: var(--prox-white) !important; text-decoration: none; }
.prox-car img { display: block; height: var(--card-h); width: auto; max-width: none; background: #333; transition: transform .4s; }
.prox-car:hover img, .prox-car:focus-visible img { transform: scale(1.02); }
.prox-car__name { display: block; margin-top: 14px; font-family: var(--prox-cond); font-size: 22px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.prox-car__rate { display: block; margin-top: 4px; font-size: 15px; color: #D6D6D6; }
.prox-car--end { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 340px; height: var(--card-h); padding: 40px; border: 2px solid var(--prox-red); }
.prox-car__all { font-family: var(--prox-cond); font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
.prox-car--end .prox-icon path:not(.acc), .prox-review--more .prox-icon path:not(.acc) { fill: var(--prox-white); }
.prox-car--end .prox-icon, .prox-review--more .prox-icon { width: 56px; height: 56px; }
.prox-car--end:hover, .prox-car--end:focus-visible { background: var(--prox-red-btn); }
/* phones, tablets and reduced motion: a normal sideways swipe row that stops on each car */
.prox-fleet.is-swipe .prox-fleet__stick { position: static; height: auto; }
.prox-fleet.is-swipe .prox-intro { padding-top: 64px; }
.prox-fleet.is-swipe .prox-fleet__view { container-type: normal; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 56px; }
.prox-fleet.is-swipe .prox-fleet__view::-webkit-scrollbar { display: none; }
.prox-fleet.is-swipe .prox-fleet__track { --card-h: 300px; gap: 14px; padding-right: var(--prox-side); }
.prox-fleet.is-swipe .prox-fleet__item { scroll-snap-align: start; scroll-margin-left: var(--prox-side); }
.prox-fleet.is-swipe .prox-car--end { width: 220px; padding: 24px; }
.prox-fleet.is-swipe .prox-car__all { font-size: 26px; }
@media (max-width: 999px) { .prox-car__name { font-size: 18px; } }

/* ---------- 4 car types: photo cards with a shadow; red label hangs over the top-left corner ---------- */
.prox-tiles { display: grid; gap: 64px; max-width: 1380px; margin: 0 auto; padding: 24px 0 0 28px; list-style: none; }
.prox-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prox-tile { position: relative; display: block; aspect-ratio: 419 / 482; background: #333; color: var(--prox-white) !important; text-decoration: none; box-shadow: 0 22px 40px -12px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.12); transition: transform .3s, box-shadow .3s; }
.prox-tile__photo { position: absolute; inset: 0; overflow: hidden; }
.prox-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.prox-tile:hover, .prox-tile:focus-visible { transform: translateY(-6px); box-shadow: 0 30px 50px -12px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.14); }
.prox-tile:hover img, .prox-tile:focus-visible img { transform: scale(1.04); }
.prox-tile__label { position: absolute; z-index: 1; top: 24px; left: -28px; padding: 12px 30px; background: var(--prox-red-btn); color: var(--prox-white); font-family: var(--prox-cond); font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(0,0,0,.3); }
@media (max-width: 999px) {
	.prox-tiles { gap: 36px; padding-left: 16px; }
	.prox-tiles--3 { grid-template-columns: 1fr; }
	.prox-tile { aspect-ratio: 315 / 300; }
	.prox-tile__label { left: -16px; font-size: 28px; padding: 10px 22px; }
}

/* six car-type links with "from" prices, under the photo tiles */
.prox-typelinks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: 1380px; margin: 56px auto 0; padding: 0 0 0 28px; list-style: none; }
.prox-typelinks a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 14px; border: 1px solid #D6D6D6; border-left: 4px solid var(--prox-red); color: var(--prox-ink, #141414) !important; text-decoration: none; transition: border-color .2s, transform .2s; }
.prox-typelinks a:hover, .prox-typelinks a:focus-visible { border-color: var(--prox-red); transform: translateY(-2px); }
.prox-typelinks__name { font-family: var(--prox-cond); font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prox-typelinks__from { font-size: 14px; color: #555; }
@media (max-width: 1279px) { .prox-typelinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) { .prox-typelinks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; padding-left: 0; } }

/* ---------- car cards on the fleet and car-type pages: same family as the home "Car types" cards ----------
   tall photo with a shadow, the car's name on a red label over the top-left, black "Read more" box underneath */
.woocommerce ul.products { row-gap: 64px !important; column-gap: 40px !important; padding-left: 16px !important; }
.woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; text-align: left; }
.woocommerce ul.products li.product figure { margin: 0 0 22px; box-shadow: 0 22px 40px -14px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.12); transition: transform .3s, box-shadow .3s; }
.woocommerce ul.products li.product:hover figure, .woocommerce ul.products li.product:focus-within figure { transform: translateY(-6px); box-shadow: 0 30px 50px -14px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.14); }
.woocommerce ul.products li.product figure .ct-media-container { display: block; overflow: hidden; border-radius: 0; }
.woocommerce ul.products li.product figure img { width: 100%; aspect-ratio: 3 / 4 !important; height: auto; object-fit: cover; object-position: center; border-radius: 0 !important; transition: transform .5s; }
.woocommerce ul.products li.product:hover figure img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { position: absolute; z-index: 2; top: 20px; left: -16px; max-width: calc(100% - 8px); margin: 0 !important; padding: 8px 14px; background: var(--prox-red-btn); box-shadow: 0 8px 18px rgba(0,0,0,.3); font-family: var(--prox-cond) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .05em; text-transform: uppercase; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--prox-white) !important; text-decoration: none; }
.woocommerce ul.products li.product .entry-meta { display: none; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .ct-woo-card-actions .button { align-self: flex-start; min-height: 46px; padding: 12px 26px; margin: 0; border-radius: 0 !important; background: var(--prox-ink) !important; color: var(--prox-white) !important; font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .button:focus-visible { background: var(--prox-red-btn) !important; }
/* ---------- page numbers: ONE style everywhere (fleet, car types, blog) ----------
   square boxes, thin grey outline; the current page is black with white text; hover turns a number red */
/* one centred row: Previous, the numbers, Next. Blocksy lays its bar out as a 3-column grid ([data-pagination]); that grid
   scattered the numbers into separate cells, so the bar is a flex row here, with the numbers box unwrapped */
.ct-pagination, .ct-pagination[data-pagination], .woocommerce-pagination, .prox-pages { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 56px 0 0; padding: 0; border: 0 !important; grid-template-columns: none; }
.ct-pagination > div, .ct-pagination[data-pagination] > div, .woocommerce-pagination ul { display: contents; margin: 0; }
.ct-pagination[data-pagination] .prev, .ct-pagination[data-pagination] .next { grid-column: auto; justify-self: auto; }
.ct-pagination[data-pagination] > div .page-numbers { flex: 0 0 auto; width: auto; }
.ct-pagination .page-numbers, .woocommerce-pagination .page-numbers, .prox-pages .page-numbers {
	display: inline-flex !important; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px !important; margin: 0 !important;
	border: 1px solid #D6D6D6 !important; border-radius: 0 !important; background: var(--prox-white) !important; color: var(--prox-ink) !important;
	font-family: var(--prox-sans); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.ct-pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current, .prox-pages .page-numbers.current {
	background: var(--prox-ink) !important; border-color: var(--prox-ink) !important; color: var(--prox-white) !important; }
.ct-pagination a.page-numbers:hover, .woocommerce-pagination a.page-numbers:hover, .prox-pages a.page-numbers:hover,
.ct-pagination a.page-numbers:focus-visible, .woocommerce-pagination a.page-numbers:focus-visible, .prox-pages a.page-numbers:focus-visible {
	background: var(--prox-red-btn) !important; border-color: var(--prox-red-btn) !important; color: var(--prox-white) !important; }
.ct-pagination .page-numbers.dots, .prox-pages .page-numbers.dots { border-color: transparent !important; }
.ct-pagination .next, .ct-pagination .prev, .prox-pages .next, .prox-pages .prev { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.ct-pagination svg { fill: currentColor; }
/* phones: one short row everywhere: previous, the current page, next (the full list wrapped into several rows;
   Blocksy hid every number on the fleet lists, so you could not see which page you were on) */
@media (max-width: 689.98px) {
	.ct-pagination > div.ct-hidden-sm { display: contents !important; }
	.ct-pagination .page-numbers:not(.current):not(.prev):not(.next), .prox-pages .page-numbers:not(.current):not(.prev):not(.next) { display: none !important; }
}

/* fleet and car-type pages: the title stays at the top; the page text is shown below the cars (functions.php) */
.woocommerce-shop .hero-section .page-description, .tax-product_cat .hero-section .page-description { display: none; }
.woocommerce-shop .hero-section .page-title, .tax-product_cat .hero-section .page-title { font-family: var(--prox-cond); font-size: clamp(36px, 4vw, 56px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prox-archivetext { margin-top: 88px; padding-top: 56px; border-top: 1px solid #E2E2E2; }
.prox-archivetext:not(.has-toc) .prox-post { padding-left: 0; padding-right: 0; }

/* ---------- car page (woocommerce/content-single-product.php) ---------- */
.single-product .ct-container-full[data-vertical-spacing] { padding-top: 0; }
.single-product .hero-section { display: none; }    /* empty title area: the car's name is in the booking panel */
.prox-carpage { max-width: 1380px; margin: 0 auto; padding: 28px var(--prox-side) 0; }
.prox-carhead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.prox-carhead__media .woocommerce-product-gallery, .prox-carhead__media .ct-product-gallery-container { margin: 0 !important; width: 100% !important; }
.prox-carhead__media img { border-radius: 0 !important; }
/* photos and booking panel end on the same line: the gallery fills its column and the main photo takes the remaining height
   (shown with object-fit, the photo file is unchanged; thumbnails keep their size) */
@media (min-width: 1000px) {
	/* the booking panel alone sets the row height; the gallery is laid over the photo column at exactly that height */
	.prox-carhead { min-height: 640px; }
	.prox-carhead__media { position: relative; }
	.prox-carhead__media > .woocommerce-product-gallery { position: absolute !important; inset: 0; }
	.prox-carhead__media .woocommerce-product-gallery, .prox-carhead__media .ct-product-gallery-container, .prox-carhead__media .flexy-container { display: flex; flex-direction: column; height: 100%; }
	.prox-carhead__media .ct-product-gallery-container, .prox-carhead__media .flexy-container { flex: 1; min-height: 0; }
	.prox-carhead__media .flexy { flex: 1; min-height: 0; }
	.prox-carhead__media .flexy-view, .prox-carhead__media .flexy-items, .prox-carhead__media .flexy-item, .prox-carhead__media .flexy-item .ct-media-container { height: 100% !important; }
	.prox-carhead__media .flexy-item .ct-media-container { aspect-ratio: auto !important; }
	.prox-carhead__media .flexy-item img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
	.prox-carhead__media .flexy-pills { flex: none; }
	/* cars with ONE photo: Blocksy puts the photo straight in the gallery box (no slider), so stretch that one too,
	   or the photo stops short of the booking panel's bottom edge */
	.prox-carhead__media .ct-product-gallery-container > .ct-media-container { flex: 1; min-height: 0; height: 100% !important; aspect-ratio: auto !important; }
	.prox-carhead__media .ct-product-gallery-container > .ct-media-container img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
}
/* booking panel: Prox Car Rental dark panel, sharp corners, red accents; Book now sits at the bottom, level with the photos */
.prox-book { display: flex; flex-direction: column; padding: 30px 32px 28px; background: var(--prox-dark); color: var(--prox-white); border-top: 4px solid var(--prox-red); }
.prox-book a { color: inherit; }
.prox-book__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #BDBDBD; }
.prox-book__kicker a { color: #BDBDBD !important; text-decoration: none; }
.prox-book__kicker a:hover { color: var(--prox-white) !important; }
.prox-book__name { margin: 0; font-family: var(--prox-cond); font-size: clamp(32px, 3.2vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; color: var(--prox-white) !important; }
.prox-book__lead { margin: 14px 0 0; font-size: 20px; line-height: 1.4; color: #E6E6E6; }
.prox-book__lead strong { font-family: var(--prox-cond); font-size: 30px; font-weight: 700; color: var(--prox-white); }
.prox-book__lead span { font-size: 15px; color: #BDBDBD; }
.prox-book__promise { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 14px; background: rgba(255,255,255,.06); font-size: 15px; font-weight: 600; }
.prox-book__promise .prox-icon, .prox-book__points .prox-icon { width: 26px; height: 26px; }
.prox-book .prox-icon path:not(.acc) { fill: var(--prox-white); }
.prox-pkgs { margin: 26px 0 0; padding: 0; border: 0; }
.prox-pkgs legend { margin: 0 0 10px; padding: 0; font-family: var(--prox-cond); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #BDBDBD; }
.prox-pkgs__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prox-pkg { position: relative; cursor: pointer; }
.prox-pkg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.prox-pkg__tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid rgba(255,255,255,.28); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s, background-color .15s; }
.prox-pkg__tile .prox-icon { width: 30px; height: 30px; }
.prox-pkg:hover .prox-pkg__tile { border-color: var(--prox-white); }
.prox-pkg input:checked + .prox-pkg__tile { background: var(--prox-red-btn); border-color: var(--prox-red-btn); }
.prox-pkg input:checked + .prox-pkg__tile .prox-icon .acc { fill: var(--prox-white); opacity: .55; }
.prox-pkg input:focus-visible + .prox-pkg__tile { outline: 3px solid var(--prox-white); outline-offset: 2px; }
.prox-pkgout { margin: 16px 0 0; padding: 18px 20px; background: var(--prox-white); color: var(--prox-ink); }
.prox-pkgout p { margin: 0; }
.prox-pkgout__price { font-family: var(--prox-cond); font-size: 30px; font-weight: 700; line-height: 1.15; }
.prox-pkgout__price span { font-family: var(--prox-sans); font-size: 15px; font-weight: 400; color: #555; }
.prox-pkgout__km { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; font-size: 16px; font-weight: 600; }
.prox-pkgout__km .prox-icon { width: 22px; height: 22px; }
.prox-pkgout__km .prox-icon path:not(.acc) { fill: var(--prox-ink) !important; }
.prox-pkgout__extra { margin-top: 4px !important; font-size: 14px; color: #555; }
.prox-pkgout__note { margin-top: 8px !important; font-size: 14px; font-weight: 700; color: var(--prox-red-btn); }
.prox-book__h { margin: 26px 0 10px; font-family: var(--prox-cond); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #BDBDBD !important; }
.prox-terms { margin: 0; padding: 0; list-style: none; }
.prox-terms li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; line-height: 1.5; color: #E6E6E6; }
.prox-terms li:first-child { border-top: 0; }
.prox-terms .prox-icon { width: 24px; height: 24px; margin-top: 1px; }
.prox-terms strong { color: var(--prox-white); font-weight: 700; }
.prox-book__points { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: var(--prox-red-btn); font-family: var(--prox-cond); font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prox-book__points .prox-icon .acc { fill: var(--prox-white); opacity: .55; }
.prox-booknow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: auto; min-height: 60px; padding: 0 24px; background: var(--prox-green); color: var(--prox-white) !important; font-family: var(--prox-cond); font-size: 22px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .15s; }
.prox-terms + .prox-booknow, .prox-book__points + .prox-booknow, .prox-pkgout + .prox-booknow { margin-top: 28px; }
.prox-book > .prox-booknow { margin-top: auto; }
.prox-book > :nth-last-child(2) { margin-bottom: 28px; }
.prox-booknow:hover, .prox-booknow:focus-visible { background: #0F5E2B; }
.prox-booknow .prox-brand { width: 28px; height: 28px; }
@media (max-width: 999px) {
	.prox-carhead { grid-template-columns: 1fr; gap: 0; }
	.prox-book { padding: 26px 18px 22px; }
	.prox-pkgs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prox-carpage { padding-left: 0; padding-right: 0; }
	.prox-carhead__media { padding: 0 var(--prox-side) 16px; }
}
/* the car's own text below the photos */
.prox-carbody { margin-top: 72px; }
.prox-carbody .prox-post { padding-top: 0; }
.prox-carbody .prox-toc { padding-top: 0; }
.prox-related { margin: 80px 0 0; }
/* the related cars use the page's full width (Blocksy narrowed and centred them), so they line up with the photo above and Explore below */
.prox-related section.related { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.prox-related .related > h2, .prox-related h2 { margin: 0 0 32px; font-family: var(--prox-cond); font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prox-carpage .prox-explore { padding-left: 0; padding-right: 0; }
/* phones: the related heading and Explore keep the 16 px side margin the rest of the page has (they touched the screen edge) */
@media (max-width: 999px) { .prox-carpage .prox-explore, .prox-related .related > h2, .prox-related > h2 { padding-left: var(--prox-side, 16px); padding-right: var(--prox-side, 16px); } }

/* ---------- lists and spec tables inside page, post and car text (every page) ---------- */
.prox-post__body ul:not(.prox-links):not(.prox-minis) { margin: 1em 0 1.4em; padding: 0; list-style: none; }
.prox-post__body ul:not(.prox-links):not(.prox-minis) > li { position: relative; margin: 0 0 .55em; padding-left: 34px; }
.prox-post__body ul:not(.prox-links):not(.prox-minis) > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; background: url(../icons/bullet-check.svg) center / contain no-repeat; }
/* feature lists: short items in columns */
.prox-post__body ul.car-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.prox-post__body ul.car-features > li { margin: 0; padding: 12px 12px 12px 46px; background: #F6F6F6; font-size: 15px; line-height: 1.4; }
.prox-post__body ul.car-features > li::before { left: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 1199px) { .prox-post__body ul.car-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .prox-post__body ul.car-features { grid-template-columns: 1fr; } }
/* at-a-glance spec tables: two-column cards */
.prox-post__body table.car-specs { width: 100%; margin: 1em 0 1.6em; border-collapse: collapse; border: 0; }
.prox-post__body table.car-specs tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prox-post__body table.car-specs tr { display: flex; flex-direction: column; padding: 14px 16px; background: var(--prox-white); border: 1px solid #E2E2E2; border-left: 4px solid var(--prox-red); }
.prox-post__body table.car-specs th, .prox-post__body table.car-specs td { padding: 0; border: 0; text-align: left; background: none; }
.prox-post__body table.car-specs th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6B6B6B; }
.prox-post__body table.car-specs td { font-family: var(--prox-cond); font-size: 22px; font-weight: 700; color: var(--prox-ink); }
@media (max-width: 600px) { .prox-post__body table.car-specs tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* other tables in text */
.prox-post__body table:not(.car-specs) { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 16px; }
.prox-post__body table:not(.car-specs) th, .prox-post__body table:not(.car-specs) td { padding: 10px 12px; border: 1px solid #E2E2E2; text-align: left; }
.prox-post__body table:not(.car-specs) th { background: var(--prox-ink); color: var(--prox-white); font-weight: 600; }
.prox-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2em 0; }
.prox-table-scroll > table:not(.car-specs) { margin: 0; }
@media (max-width: 600px) {
	.prox-post__body table:not(.car-specs) { font-size: 15px; }
	.prox-post__body table:not(.car-specs) th, .prox-post__body table:not(.car-specs) td { padding: 8px 10px; min-width: 6.5em; }
}
@media (max-width: 689px) { .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; left: -10px; } }

/* ---------- Google reviews: three reviews and a "read more" card ---------- */
.prox-reviews { background: #F7F7F7; }
.prox-reviews__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1380px; margin: 0 auto; padding: 0; list-style: none; }
.prox-review { display: flex; flex-direction: column; padding: 32px 28px; background: var(--prox-white); box-shadow: 0 10px 28px rgba(0,0,0,.08); border-top: 4px solid var(--prox-red); }
.prox-review blockquote { flex: 1; margin: 0; padding: 0; border: 0; quotes: none; }
.prox-review blockquote p { margin: 0; font-size: 15px; line-height: 1.7; color: #2A2A2A; }
.prox-review__icon { width: 40px; height: 40px; margin-bottom: 18px; color: var(--prox-red); }   /* owner's pencil icon, in place of quote marks */
.prox-review__who { display: flex; flex-direction: column; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #ECECEC; }
.prox-review__name { font-weight: 600; font-size: 16px; }
.prox-review__meta { font-size: 13px; color: #666; }
.prox-review--more { padding: 0; background: var(--prox-ink); border-top-color: var(--prox-red); }
.prox-review--more a { display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; padding: 32px 28px; color: var(--prox-white) !important; text-decoration: none; }
.prox-review--more a:hover, .prox-review--more a:focus-visible { background: var(--prox-red-btn); }
.prox-review--more .prox-icon path:not(.acc) { fill: var(--prox-white); }
.prox-review--more a:hover .prox-icon .acc { fill: var(--prox-white); }
.prox-review__big { font-family: var(--prox-cond); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1199px) { .prox-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prox-reviews__grid { grid-template-columns: 1fr; } }

/* ---------- 5 packages: dark band ---------- */
.prox-pack { background: var(--prox-band); color: var(--prox-white); padding-bottom: 120px; }
.prox-pack__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1380px; margin: 0 auto; padding: 0; list-style: none; }
.prox-pack__grid a { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 44px 16px 36px; border: 1px solid rgba(255,255,255,.35); color: var(--prox-white) !important; text-decoration: none; text-align: center; transition: background-color .2s, border-color .2s; }
.prox-pack__grid a:hover, .prox-pack__grid a:focus-visible { background: rgba(255,255,255,.06); border-color: var(--prox-red); }
.prox-pack__grid .prox-icon path:not(.acc) { fill: var(--prox-white); }
.prox-pack__name { margin-top: 24px; font-family: var(--prox-sans); font-size: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.prox-pack__short { margin-top: 10px; max-width: 260px; font-size: 15px; line-height: 1.5; color: #CFCFCF; }
.prox-pack__from { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--prox-white); }
.prox-pack__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--prox-white); }
.prox-pack__more .prox-icon { width: 18px; height: 18px; }
@media (max-width: 999px) { .prox-pack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .prox-pack { padding-bottom: 72px; } .prox-pack__grid a { padding: 28px 10px 24px; } }

/* ---------- 6 about us ---------- */
.prox-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: 820px; padding: 80px var(--prox-side) 80px 15%; }
.prox-about__text { max-width: 455px; }
.prox-about__text p { font-size: 20px; font-weight: 300; line-height: 1.75; }
.prox-about__img { justify-self: center; }
.prox-about__img img { display: block; width: 100%; max-width: 500px; height: auto; }
@media (max-width: 999px) { .prox-about { grid-template-columns: 1fr; min-height: 0; padding: 72px var(--prox-side); gap: 32px; } .prox-about__text p { font-size: 18px; } }

/* ---------- 7 blog cards (Nicepage style): tinted panel, inset photo, title, text, button ---------- */
.prox-blogcards .prox-intro { padding-top: 100px; }
.prox-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1140px; margin: 0 auto; }
.prox-card { display: flex; flex-direction: column; padding: 30px 30px 40px; background: var(--prox-tint); }
.prox-card--white { background: var(--prox-white); box-shadow: inset 0 0 0 1px #ECE6E1; }
.prox-card__img { display: block; aspect-ratio: 320 / 329; overflow: hidden; background: #ddd; }
.prox-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prox-card:hover .prox-card__img img { transform: scale(1.04); }
.prox-card__date { margin: 22px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6B6B6B; }
.prox-card__title { margin: 0 0 12px; font-family: var(--prox-cond); font-size: 24px; font-weight: 600; line-height: 1.25; }
.prox-card__title a { color: var(--prox-ink); text-decoration: none; }
.prox-card__title a:hover, .prox-card__title a:focus-visible { color: var(--prox-red-btn); }
.prox-card__text { flex: 1; margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #333; }
.prox-card__btn { align-self: flex-start; }
@media (max-width: 999px) { .prox-cards { grid-template-columns: 1fr; } .prox-card { padding: 20px 20px 28px; } }

/* ---------- 8 talk with an expert: big rounded square buttons ---------- */
.prox-talk { background: var(--prox-light); padding: 0 var(--prox-side) 100px; }
.prox-talk .prox-intro { padding-top: 100px; padding-bottom: 0; }
.prox-talk .prox-h2 { color: #000; }
.prox-talk__btns { display: flex; justify-content: center; gap: 56px; margin: 48px 0 0; padding: 0; list-style: none; }
.prox-square { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--prox-ink) !important; text-decoration: none; }
.prox-square__tile { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 40px; color: var(--prox-white); transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.prox-square--wa .prox-square__tile { background: var(--prox-green); }
.prox-square--call .prox-square__tile { background: var(--prox-red-btn); }
.prox-square__tile .prox-brand, .prox-square__tile .prox-icon { width: 84px; height: 84px; }
.prox-square__tile .prox-icon path, .prox-square__tile .prox-icon .acc { fill: var(--prox-white); }
.prox-square__tile .prox-icon .acc { opacity: .6; }
.prox-square:hover .prox-square__tile, .prox-square:focus-visible .prox-square__tile { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.2); }
@media (max-width: 600px) { .prox-talk__btns { gap: 28px; } .prox-square__tile { width: 132px; height: 132px; border-radius: 32px; } .prox-square__tile .prox-brand, .prox-square__tile .prox-icon { width: 64px; height: 64px; } }

/* ---------- breadcrumbs and "Explore" link blocks (every page) ---------- */
/* one breadcrumb trail per page: ours (Rank Math, with search-engine markup); Blocksy's own copy is hidden */
.ct-breadcrumbs { display: none !important; }
.prox-crumbs { max-width: 1380px; margin: 0 auto; padding: 18px var(--prox-side) 0; font-size: 17px; color: #444; }
.prox-crumbs a { color: var(--prox-red-btn); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prox-crumbs a:hover { text-decoration: underline; }
.prox-explore { max-width: 1380px; margin: 64px auto 0; padding: 48px var(--prox-side) 72px; border-top: 1px solid #E2E2E2; }
/* car-type and fleet lists: the whole page already sits in Blocksy's container, so Explore adds no second side margin */
.ct-container .prox-explore { max-width: none; padding-left: 0; padding-right: 0; }
.prox-explore__h { margin: 0 0 24px; font-family: var(--prox-cond); font-size: 30px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.prox-explore__h + .prox-minis { margin-bottom: 48px; }
.prox-explore__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.prox-explore__cols h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.prox-links { margin: 0; padding: 0; list-style: none; }
.prox-links li { margin: 0 0 6px; }
.prox-links a { color: var(--prox-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.prox-links a:hover, .prox-links a:focus-visible { color: var(--prox-red-btn); border-bottom-color: currentColor; }
/* small car cards fill the full row, so their outer edges line up with the Explore columns below */
.prox-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.prox-mini a { display: block; color: var(--prox-ink); text-decoration: none; }
.prox-mini img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E6E6E6; box-shadow: 0 14px 26px -12px rgba(0,0,0,.35); }
.prox-mini__name { display: block; margin-top: 14px; font-family: var(--prox-cond); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.prox-mini__rate { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: #555; }
.prox-mini a:hover .prox-mini__name { color: var(--prox-red-btn); }
@media (max-width: 999px) { .prox-explore__cols { grid-template-columns: 1fr; gap: 24px; } .prox-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- blog post page ---------- */
.prox-posthead { position: relative; display: flex; align-items: flex-end; min-height: 520px; padding: calc(var(--prox-head-h) + 40px) var(--prox-side) 56px; background: var(--prox-dark) var(--prox-posthead-img) center / cover no-repeat; color: var(--prox-white); }
.prox-posthead::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%); }
.prox-posthead__in { position: relative; margin: 0 auto; width: 100%; }
.prox-posthead__meta { margin: 0 0 12px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.prox-posthead__meta a { color: var(--prox-white); }
.prox-posthead__title { margin: 0; font-family: var(--prox-cond); font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; line-height: 1.12; color: var(--prox-white); }
.prox-post { max-width: 760px; margin: 0 auto; padding: 48px var(--prox-side) 0; font-size: 18px; line-height: 1.75; }
/* "On this page": sticky list of the page's sections on the left (desktop); a fold-out list above the text (phones) */
/* sidebar 280 + gap 56 + text 760 = 1096 px; the page title above uses the same width so it starts where the sidebar starts */
.prox-postwrap.has-toc { display: grid; grid-template-columns: 280px minmax(0, 760px); justify-content: start; gap: 56px; max-width: calc(1096px + 2 * var(--prox-side)); margin: 0 auto; padding: 0 var(--prox-side); }
.prox-posthead.has-toc .prox-posthead__in { max-width: 1096px; }
.prox-posthead:not(.has-toc) .prox-posthead__in { max-width: calc(760px - 2 * var(--prox-side)); }
.prox-postwrap.has-toc .prox-post { margin: 0; padding-left: 0; padding-right: 0; }
/* main headings on plain white; the open one shows its sub-headings on a cream panel, joined by a dotted line */
.prox-toc { padding-top: 48px; }
.prox-toc__box { position: sticky; top: calc(var(--prox-head-h) + 24px); max-height: calc(100vh - var(--prox-head-h) - 48px); overflow-y: auto; padding: 0 4px 12px 0; scrollbar-width: none; }
.prox-toc__box::-webkit-scrollbar { display: none; }   /* the list still scrolls; no bar or track is drawn */
.admin-bar .prox-toc__box { top: calc(var(--prox-head-h) + 56px); }
.prox-toc__title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--prox-ink); font-family: var(--prox-cond); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--prox-ink); cursor: pointer; list-style: none; }
.prox-toc__title::-webkit-details-marker { display: none; }
.prox-toc ol { margin: 0; padding: 0; list-style: none; }
.prox-toc__item { position: relative; }
.prox-toc__link { position: relative; display: block; padding: 9px 26px 9px 18px; font-family: var(--prox-cond); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--prox-ink); text-decoration: none; }
.prox-toc__link::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; background: #C9C9C9; transform: rotate(45deg); transition: background-color .2s; }
.prox-toc__item.has-subs > .prox-toc__link::after { content: ""; position: absolute; right: 6px; top: 14px; width: 7px; height: 7px; border-right: 2px solid #8A8A8A; border-bottom: 2px solid #8A8A8A; transform: rotate(45deg); transition: transform .2s; }
.prox-toc__item.is-open > .prox-toc__link::after { transform: translateY(4px) rotate(-135deg); border-color: var(--prox-red-btn); }
.prox-toc__link:hover, .prox-toc__link:focus-visible, .prox-toc__item.is-current > .prox-toc__link { color: var(--prox-red-btn); }
.prox-toc__item.is-current > .prox-toc__link::before, .prox-toc__link:hover::before { background: var(--prox-red); }
/* sub-headings: listed plainly under their main heading on the cream panel; the one being read is bold black */
.prox-toc__subs { display: none; margin: 2px 0 10px 18px !important; padding: 8px 14px !important; background: var(--prox-tint); }
.prox-toc__item.is-open > .prox-toc__subs { display: block; }
.prox-toc__subs a { display: block; padding: 6px 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: #3A3A3A; text-decoration: none; }
.prox-toc__subs a:hover, .prox-toc__subs a:focus-visible { color: var(--prox-ink); text-decoration: underline; text-underline-offset: 3px; }
.prox-toc__subs a.is-current { color: var(--prox-ink); font-weight: 700; }
.prox-post__body [id] { scroll-margin-top: calc(var(--prox-head-h) + 24px); }
@media (max-width: 1099px) {
	.prox-postwrap.has-toc { display: block; padding: 0; }
	.prox-postwrap.has-toc .prox-post { margin: 0 auto; padding: 24px var(--prox-side) 0; }
	.prox-toc { padding: 24px var(--prox-side) 0; max-width: 760px; margin: 0 auto; }
	.prox-toc__box { position: static; max-height: none; padding: 14px 16px; border: 1px solid #E2E2E2; }
	.prox-toc__title { margin: 0; display: flex; justify-content: space-between; align-items: center; }
	.prox-toc__title::after { content: "+"; font-size: 22px; line-height: 1; color: var(--prox-red-btn); }
	.prox-toc__box[open] .prox-toc__title { margin-bottom: 12px; }
	.prox-toc__box[open] .prox-toc__title::after { content: "–"; }
}
.prox-post__body h2 { margin: 1.8em 0 .5em; font-size: 32px; line-height: 1.2; }
.prox-post__body h3 { margin: 1.5em 0 .4em; font-size: 24px; }
.prox-post__body figure, .prox-post__body .wp-block-image { margin: 2em 0; }
.prox-post__body img { display: block; width: 100%; height: auto; }
.prox-post__body .alignwide, .prox-post__body .alignfull { width: min(1140px, 100vw - 2 * var(--prox-side)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.prox-post__body .alignleft { float: left; width: 46%; margin: .4em 28px 1em 0; }
.prox-post__body .alignright { float: right; width: 46%; margin: .4em 0 1em 28px; }
.prox-post__body figcaption { margin-top: 8px; font-size: 14px; color: #666; text-align: center; }
/* end of a post or page: a short line and two buttons, left-aligned with the text, set apart by a rule and kept clear of the footer */
.prox-post__cta { margin: 56px 0 0; padding: 32px 0 0; background: none; border-top: 2px solid var(--prox-ink); }
.prox-post__cta p { margin: 0; }
.prox-post__cta > p:first-child { font-family: var(--prox-cond); font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--prox-ink); }
/* the closing line's two links: coloured words with a soft highlighter underline that fills in on hover (owner, 29 Oct 2026) */
.prox-hl { position: relative; padding: 0 .08em; text-decoration: none !important; white-space: nowrap; transition: background-size .25s ease, color .25s ease;
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .32em; }
.prox-hl--wa { color: var(--prox-green) !important; background-image: linear-gradient(rgba(22, 127, 59, .18), rgba(22, 127, 59, .18)); }
.prox-hl--red { color: var(--prox-red-btn) !important; background-image: linear-gradient(rgba(204, 0, 0, .14), rgba(204, 0, 0, .14)); }
.prox-hl:hover, .prox-hl:focus-visible { background-size: 100% 100%; }
@media (max-width: 700px) { .prox-posthead { min-height: 380px; } .prox-post { font-size: 17px; } .prox-post__body .alignleft, .prox-post__body .alignright { float: none; width: 100%; margin: 1.5em 0; } }

/* ---------- footer (every page) ---------- */
.prox-footer { background: var(--prox-foot); color: var(--prox-white); padding: 80px 15%; }
.prox-footer a { color: var(--prox-white); text-decoration: none; }
.prox-footer a:hover, .prox-footer a:focus-visible { color: var(--prox-red); }
.prox-footer__index { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.15); }
.prox-links--inline { display: flex; flex-wrap: wrap; gap: 4px 0; }
.prox-links--inline li { margin: 0; font-size: 14px; line-height: 1.6; color: #BDBDBD; }
.prox-links--inline li:not(:last-child)::after { content: "·"; margin: 0 8px; color: #6B6B6B; }
.prox-footer .prox-links--inline a { color: #D6D6D6; }
.prox-footer .prox-links a { border: 0; }
.prox-footer__cols { display: grid; grid-template-columns: 1.1fr .8fr 1fr 1.5fr; gap: 40px; }
.prox-footer__cols p, .prox-footer__cols li { font-size: 17px; line-height: 1.75; }
.prox-footer__cols .prox-links li { margin: 0; }
.prox-footer__cols .prox-links a { color: var(--prox-white); }
.prox-footer__label { margin: 0 0 22px; font-family: var(--prox-cond); font-size: 14px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #BDBDBD; }
.prox-footer__label--gap { margin-top: 28px; }
.prox-footer__big { font-family: var(--prox-cond); font-size: 27px !important; font-weight: 700; line-height: 1.5 !important; }
/* Follow: red icon, white platform name, one per row */
.prox-social { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.prox-social a, .prox-social__soon { display: inline-flex; align-items: center; gap: 12px; color: var(--prox-white) !important; }
.prox-social__ico { display: inline-flex; width: 26px; height: 26px; color: var(--prox-red); }
.prox-social .prox-brand { width: 26px; height: 26px; }
.prox-social__name { font-size: 17px; line-height: 1.75; }
.prox-social a:hover .prox-social__name, .prox-social a:focus-visible .prox-social__name { color: var(--prox-red); }
.prox-social__soon { cursor: default; }
/* car types in two columns so all four footer columns end on the same line */
.prox-links--2col { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 28px; }
.prox-footer__cols > div { display: flex; flex-direction: column; }
.prox-footer__legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; line-height: 1.6; color: #BDBDBD; }
.prox-footer__legal p { margin: 0 0 6px; }
.prox-attr-btn { padding: 0; background: none; border: 0; color: #BDBDBD; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prox-attr-btn:hover, .prox-attr-btn:focus-visible { color: var(--prox-white); }
.prox-attr-btn + .prox-attr-btn { margin-left: 22px; }
/* attributions pop-up */
.prox-credits { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 28px 32px 32px; border: 0; background: var(--prox-white); color: var(--prox-ink); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.prox-credits::backdrop { background: rgba(0,0,0,.6); }
.prox-credits__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prox-credits h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prox-credits h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #666; }
.prox-credits ul { margin: 0; padding: 0; list-style: none; }
.prox-credits li { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.prox-credits a { color: var(--prox-red-btn); }
.prox-credits a:hover, .prox-credits a:focus-visible { color: var(--prox-ink); }
.prox-credits__close { width: 44px; height: 44px; padding: 0; background: none; border: 0; font-size: 34px; line-height: 1; color: var(--prox-ink); cursor: pointer; }
.prox-credits__close:hover, .prox-credits__close:focus-visible { color: var(--prox-red-btn); }
.prox-credits__note { margin: 22px 0 0; font-size: 14px; color: #555; }
@media (max-width: 999px) { .prox-footer { padding: 64px var(--prox-side); } .prox-footer__index { grid-template-columns: 1fr; gap: 28px; } .prox-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 420px) { .prox-footer__cols { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .prox-car img, .prox-tile img, .prox-card__img img, .prox-hero__video, .prox-square__tile { transition: none; } }

/* ---------- line breaks that read well (owner, 29 Oct 2026) ----------
   names like "5-Door", "CX-5", amounts, phone numbers and "+ 5% VAT" never split across lines (inc/format.php marks them);
   headings share their words evenly between lines, and paragraphs avoid a single word alone on the last line */
.prox-nw, .prox-figure { white-space: nowrap; }
h1, h2, h3, h4, .prox-book__name, .prox-car__name, .woocommerce-loop-product__title, .prox-tile__label, .prox-explore__h { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }