/* CFH Executive Chauffeurs — shared header/footer chrome + image placeholders + reveal.
   Page-specific styles ship inline in each page head (carried over from the design). */

/* Guard against a mobile overflow bug: wide cinematic bands use inline
   `aspect-ratio` + a `min-height`. On narrow screens the min-height wins on the
   height axis and the aspect-ratio then derives the *width* from it (e.g. 280px
   tall * 21/8 = 735px wide), overflowing the viewport and stretching the fixed
   header. Capping width to the container stops the width ever being back-computed
   from the height. No-op on desktop, where the container already limits width. */
[style*="aspect-ratio"] { max-width: 100%; }

/* Base canvas colour — a safety layer beneath the fixed radial backdrop. The
   sections are transparent and rely on [data-backdrop] (position:fixed, z-index:-1)
   for their deep-navy field. If that layer is ever obscured or fails to paint,
   the page still reads on-brand dark rather than flashing white/black. */
html { background: #05141C; }

/* Header responsive rules (from the shared Header component) */
@media (max-width: 999px) { [data-dt] { display: none !important; } }
[data-mobilebar] { display: none; }
@media (max-width: 999px) {
  [data-mobilebar] { display: flex !important; }
  body { padding-bottom: 60px; }
  /* Give the three actions equal width so nothing clips on narrow phones —
     the old fixed 62px "Call" column truncated its label on smaller devices.
     Equal thirds keeps every label centred and fully visible. */
  [data-mobilebar] > a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }
}

/* ============================================================
   Mobile overlay menu — tighten spacing so the full menu (nav +
   Speak to us + Book Now / Get a Quote) sits on one screen and the
   CTAs never hide below the fold on standard phones. Shared markup,
   so this one rule covers every page. Spacing/size only.
   ============================================================ */
@media (max-width: 999px) {
  [data-menu] { padding-top: 96px !important; padding-bottom: 34px !important; }
  [data-menu] nav[aria-label="Menu"] > a { padding-top: 11px !important; padding-bottom: 11px !important; }
}
@media (max-width: 999px) and (max-height: 860px) {
  [data-menu] nav[aria-label="Menu"] > a {
    font-size: clamp(23px, 4vh, 33px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (prefers-reduced-motion: reduce) { [data-cfh-header] * { transition: none !important; } }
/* On phones, kill the ken-burns zoom on every hero film so more of the shot is
   visible (less crop) and playback stays smooth — the constant scale animation
   forces expensive per-frame compositing on mobile GPUs. */
@media (max-width: 900px) {
  [data-kb] { animation: none !important; transform: none !important; }
}

/* Placeholder for the client's photography/video slots */
.img-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: #10303E;
  overflow: hidden;
}
.img-slot::before {
  content: attr(data-label);
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-transform: uppercase;
}
/* Video-backed slots: the film covers the placeholder label and fills the frame. */
.img-slot > .slot-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.img-slot.has-video::before { opacity: 0; }
/* Homepage hero film: the E-Class + cottage sit centre-left in the frame. Bias
   the crop there so the subject stays visible instead of being pushed off-edge
   when the slot renders tall (paired with the gentler ken-burns zoom). */
[data-label^="HERO FILM"] > .slot-video { object-position: 30% 38%; }
/* Photo-backed slots: the still fills the frame like the video slots do. */
.img-slot > .slot-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.img-slot.has-photo::before { opacity: 0; }
/* Parallax-enabled framed photos: give the still vertical overscan so the
   scroll drift ([data-plx] in site.js) never exposes a slot edge. The slot
   clips with overflow:hidden, so the extra height stays hidden. The fixed +
   percentage overscan keeps a safe margin at every breakpoint (short bands on
   mobile included). GPU-composited via translate3d in the parallax loop. */
.img-slot > .slot-photo[data-plx] {
  top: -80px;
  bottom: auto;
  height: calc(100% + 160px);
  will-change: transform;
}
/* The main car photo (Glass Wharf) is a tall portrait shot with the E-Class in
   the lower half; bias the crop downward so the car — not the building — is the
   subject when the slot renders wide/short. Keep the airport + street stills
   weighted to the vehicle too. */
#the-car .img-slot.has-photo > .slot-photo { object-position: 42% 60%; }
[data-label^="AIRPORT"].has-photo > .slot-photo { object-position: 50% 64%; }
[data-label*="E-Class Saloon detail"].has-photo > .slot-photo { object-position: 38% 92%; }
[data-label^="WEDDINGS"].has-photo > .slot-photo { object-position: 50% 88%; }
[data-label^="EVENTS"].has-photo > .slot-photo { object-position: 22% 46%; }
[data-label^="WIDE BAND"].has-photo > .slot-photo { object-position: 50% 88%; }
/* Split panels (home "Two ways we drive"): keep the panel copy above the
   video slot. The film sits at z-index 1 and its scrim at 2, so the heading /
   body / link layer must ride above both or the video hides the text. */
[data-split-body] { position: relative; z-index: 3; }
/* Panel legibility: deepen a bottom + left-weighted scrim under the copy (the
   text is left-aligned at the base of each panel) so white type never blends
   into the brighter areas of the black-and-white footage, and add a soft dark
   halo so the headings stay crisp on any frame. */
[data-split-panel] .img-slot.has-video::after {
  background:
    linear-gradient(180deg, rgba(4,15,21,0) 16%, rgba(4,15,21,0.48) 46%, rgba(4,15,21,0.82) 74%, rgba(4,15,21,1) 100%),
    linear-gradient(90deg, rgba(4,15,21,0.92) 0%, rgba(4,15,21,0.58) 36%, rgba(4,15,21,0.12) 72%);
}
/* Knock the footage brightness down so the whole panel reads darker/moodier. */
[data-split-panel] .img-slot.has-video > .slot-video { filter: brightness(0.74) contrast(1.03); }
[data-split-body] h3,
[data-split-body] p,
[data-split-body] > span {
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 22px rgba(0,0,0,0.45);
}
/* Subtle gradual darkening so overlaid text stays legible on lighter footage. */
.img-slot.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6,24,32,0.20) 0%, rgba(6,24,32,0) 34%, rgba(6,24,32,0.30) 100%);
  pointer-events: none;
}

/* Reveal-on-scroll: hidden initial state only when motion is allowed (class set inline in head).
   Without JS/motion, content stays fully visible. */
html.cfh-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

/* ============================================================
   Luxury buttons — refined gold fill + hairline ghost.
   Applied via .lux-gold / .lux-ghost classes added at build time.
   Uses !important to layer over the prototype's inline styles
   without disturbing each button's box model / placement.
   ============================================================ */
a.lux-gold, a.lux-ghost {
  letter-spacing: 0.2em !important;
  -webkit-font-smoothing: antialiased;
  transition: filter 0.4s cubic-bezier(0.22,0.61,0.36,1),
              background-color 0.4s cubic-bezier(0.22,0.61,0.36,1),
              border-color 0.4s cubic-bezier(0.22,0.61,0.36,1),
              color 0.4s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.4s cubic-bezier(0.22,0.61,0.36,1) !important;
}
a.lux-gold {
  background-color: #BE9E4F !important;
  background-image: linear-gradient(177deg, #D3B972 0%, #C1A254 46%, #AC8B3C 100%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #0A2029 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 14px 34px -18px rgba(180,154,87,0.95) !important;
}
a.lux-gold:hover {
  filter: brightness(1.06) saturate(1.04) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 20px 44px -18px rgba(206,178,104,1) !important;
  transform: translateY(-2px) !important;
}
a.lux-ghost {
  background: transparent !important;
  border: 1px solid rgba(201,178,120,0.5) !important;
  color: #E9DFC8 !important;
}
a.lux-ghost:hover {
  background: rgba(180,154,87,0.12) !important;
  border-color: #C9AE66 !important;
  color: #F5EEDA !important;
  transform: translateY(-2px) !important;
}
/* Touch bars don't hover and must stay flush — cancel the lift there. */
[data-mobilebar] a.lux-gold, [data-mobilebar] a.lux-ghost { box-shadow: none !important; }
[data-mobilebar] a.lux-gold:hover, [data-mobilebar] a.lux-ghost:hover { transform: none !important; }

/* ============================================================
   Cinematic photo band (home "Ready" section) + parallax layer.
   ============================================================ */
.cta-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cta-photo__img {
  position: absolute; inset: -16% 0; display: block;
  background-size: cover; background-position: 64% 42%;
  will-change: transform;
}
.cta-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,18,26,0.94) 0%, rgba(5,18,26,0.72) 40%, rgba(5,18,26,0.40) 100%),
    linear-gradient(0deg, rgba(5,18,26,0.72) 0%, rgba(5,18,26,0.30) 46%, rgba(5,18,26,0.52) 100%);
}
/* Keep the copy + buttons above the photo layer. */
section[data-screen-label="Ready"] > [data-reveal] { position: relative; z-index: 2; }

/* Centered CTA photo variant — symmetric scrim so centred copy stays legible. */
.cta-photo--center .cta-photo__img { background-position: 50% 44%; }
.cta-photo--center::after {
  background:
    radial-gradient(125% 100% at 50% 46%, rgba(5,18,26,0.52) 0%, rgba(5,18,26,0.74) 55%, rgba(5,18,26,0.93) 100%);
}
section[data-screen-label="Ready"] > span[aria-hidden] { z-index: 1; }
/* Collapse the CTA band to a single left-aligned column so the heading + buttons
   sit over the dark left side of the photo and never cross the man/phone focal
   point on the right. Overrides the prototype's 2-column auto-fit grid. */
section[data-screen-label="Ready"] > [data-reveal] {
  grid-template-columns: minmax(0, 34em) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: clamp(30px, 3.5vw, 44px) !important;
  margin: 0 !important;
}
/* Lay the two primary buttons side by side, phone number beneath. */
section[data-screen-label="Ready"] > [data-reveal] > div:last-child {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px 18px !important;
}
section[data-screen-label="Ready"] > [data-reveal] > div:last-child > a[href^="tel:"] {
  flex-basis: 100% !important;
  margin-top: 2px !important;
}
@media (max-width: 560px) {
  section[data-screen-label="Ready"] > [data-reveal] > div:last-child { flex-direction: column !important; align-items: stretch !important; }
  section[data-screen-label="Ready"] > [data-reveal] > div:last-child > a[href^="tel:"] { text-align: center; }
}

/* ============================================================
   Ambient film — the former hero clip drifts faint + blurred
   behind a content band ("Why CFH"), reading as subtle motion
   rather than a foreground video. Kept dark so copy stays crisp.
   ============================================================ */
section[data-cfh-ambient] { position: relative; isolation: isolate; }
.cfh-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cfh-ambient video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: grayscale(1) brightness(0.82) contrast(1.05);
}
/* Bottom/top-weighted scrim in the band's own tone so the film never
   competes with the headings and the section edges blend seamlessly. */
.cfh-ambient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,34,48,0.80) 0%, rgba(8,34,48,0.58) 46%, rgba(8,34,48,0.84) 100%);
}

/* ============================================================
   Page transition — a light navy crossfade on same-origin
   navigation, cohesive with the intro reveal. Gated on .cfh-anim,
   so reduced-motion visitors get plain, instant navigation. The
   header is fixed and identical across pages, so it stays stable;
   only <main> (which contains the footer) crossfades. The page
   background is already navy (html), so it never flashes white.
   Opacity-only — no transform — so no fixed-element containing-block
   shift and zero layout shift. JS trigger lives in site.js.
   ============================================================ */
@keyframes cfh-pagein { from { opacity: 0; } to { opacity: 1; } }
.cfh-anim main { animation: cfh-pagein 0.45s ease both; }
.cfh-anim main.cfh-leaving { animation: none; opacity: 0; transition: opacity 0.3s ease; }

/* ============================================================
   Hiring strip backdrop — the chauffeur-at-the-door photo sits
   behind the "We're hiring" band. The image lives on the right
   (subject side); a left-weighted scrim in the band's own tone
   keeps the heading + copy crisp while the figure reads softly.
   ============================================================ */
section[data-hire-photo] { position: relative; isolation: isolate; overflow: hidden; }
.hire-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hire-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 38%;
  opacity: 0.6;
}
.hire-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,40,54,0.97) 0%, rgba(12,40,54,0.9) 26%, rgba(12,40,54,0.6) 58%, rgba(12,40,54,0.34) 100%),
    linear-gradient(0deg, rgba(12,40,54,0.6) 0%, rgba(12,40,54,0.2) 55%, rgba(12,40,54,0.5) 100%);
}

/* Generic parallax elements get GPU-friendly compositing. */
[data-plx] { will-change: transform; }

/* ============================================================
   Booking widget (Contact page)
   The cdserver1 booking system is a responsive cross-origin iframe, so we
   cannot measure its content height from here. On desktop it fits in ~980px;
   on narrow screens its fields stack and it grows well beyond that, which
   previously left it clipped behind an awkward inner scrollbar. Cross-origin
   frames can't self-size, so we give it progressively more room as the
   viewport narrows. Erring tall is safe — the iframe body just ends in
   whitespace — whereas erring short hides the submit button.
   ============================================================ */
.booking-frame {
  width: 100%;
  height: 980px;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .booking-frame { height: 1180px; }
}
@media (max-width: 560px) {
  .booking-frame { height: 1420px; }
}