/* CFH Executive Chauffeurs — shared styling for programmatic SEO landing pages.
   Uses the same tokens as the main site; section composition is varied per page
   by the generator so no two pages share an identical structure. */

.seo-main { position: relative; z-index: 1; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 72px); }
.wrap-wide { max-width: 1340px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 72px); }

.eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #B49A57; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; letter-spacing: 0.02em; color: rgba(255,255,255,0.5); }
.crumbs a { color: rgba(255,255,255,0.62); text-decoration: none; }
.crumbs a:hover { color: #B49A57; }
.crumbs span[aria-hidden] { color: rgba(255,255,255,0.3); }

/* Hero */
.seo-hero { padding: clamp(128px, 15vw, 176px) 0 clamp(48px, 6vw, 72px); position: relative; overflow: hidden; }
.seo-hero.has-media { min-height: 82svh; display: flex; align-items: flex-end; }
.seo-hero h1 { margin: 20px 0 0; font-family: 'Marcellus', Georgia, serif; font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }
.seo-hero .lead { margin: 22px 0 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Full-bleed background-video hero */
.seo-hero.has-bg { min-height: 88svh; display: flex; align-items: flex-end; padding-top: clamp(150px, 20vw, 210px); padding-bottom: clamp(56px, 7vw, 88px); }
.seo-hero.has-bg .hero-inner { position: relative; z-index: 2; width: 100%; }
.seo-hero .hero-bg { position: absolute; inset: 0; z-index: 0; background: #061820; }
.seo-hero .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.seo-hero .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* The ribboned wedding E-Class is a tall portrait shot with the car in the lower half;
   bias the crop downward so the car (not the venue above it) is the subject on wide viewports. */
.seo-hero .hero-bg[data-img="wedding"] img { object-position: 50% 68%; }
/* The "walking" clip's subjects (walking to the car, then seated in the rear) all sit in
   the upper part of the frame, with heads right near the top in the in-car shots. On wide
   viewports cover-crop trims top/bottom, so top-align the crop to guarantee no head is cut. */
.seo-hero .hero-bg[data-vid="walking"] video { object-position: 50% 0%; }
/* Scrim: keeps the copy crisp over moving footage, and fades the base back in at the seam. */
.seo-hero .hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(4,15,22,0.86) 0%, rgba(4,15,22,0.55) 46%, rgba(4,15,22,0.30) 100%),
    linear-gradient(0deg, rgba(3,15,22,0.96) 2%, rgba(3,15,22,0.15) 46%, rgba(3,15,22,0.55) 100%);
}
/* On phones the wide left-weighted scrim above blankets the whole (now narrow)
   frame and hides the photo. Swap to a vertical-only scrim: the top two-thirds
   stay clear so the car/venue reads, and only the base darkens under the copy. */
@media (max-width: 879px) {
  .seo-hero .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(4,15,22,0.28) 0%,
      rgba(4,15,22,0.06) 20%,
      rgba(4,15,22,0.10) 42%,
      rgba(4,15,22,0.52) 68%,
      rgba(4,15,22,0.86) 88%,
      rgba(4,15,22,0.96) 100%);
  }
  /* The 88svh background hero is far too tall on a portrait phone — the 16:9
     film/photo over-zooms and crops to a narrow slice. Drop to a compact band
     and trim the copy padding so the frame reads and nothing clips. */
  .seo-hero.has-bg { min-height: 62svh; padding-top: 120px; padding-bottom: 52px; }
}
.seo-hero.has-bg h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.45); }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 16px 34px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; 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); }
.btn-gold { background-color: #BE9E4F; background-image: linear-gradient(177deg, #D3B972 0%, #C1A254 46%, #AC8B3C 100%); border: 1px solid rgba(255,255,255,0.18); color: #0A2029; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 14px 34px -18px rgba(180,154,87,0.95); }
.btn-gold:hover { filter: brightness(1.06) saturate(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 20px 44px -18px rgba(206,178,104,1); transform: translateY(-2px); }
.btn-ghost { background: transparent; border: 1px solid rgba(201,178,120,0.5); color: #E9DFC8; }
.btn-ghost:hover { background: rgba(180,154,87,0.12); border-color: #C9AE66; color: #F5EEDA; transform: translateY(-2px); }

/* Generic section */
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec-tight { padding: clamp(48px, 6vw, 80px) 0; }
.sec h2 { margin: 14px 0 0; font-family: 'Marcellus', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }
.sec .lead { margin: 20px 0 0; font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 68ch; }
.prose { margin-top: clamp(22px, 2.2vw, 30px); }
.prose p { margin: 18px 0 0; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.74); max-width: 70ch; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: #FFFFFF; font-weight: 600; }

/* Stat / fact grid */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-top: clamp(36px, 4vw, 52px); }
.stat { background: #0C2836; padding: clamp(24px, 3vw, 34px); }
.stat dt { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #B49A57; }
.stat dd { margin: 12px 0 0; font-family: 'Marcellus', Georgia, serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; color: #FFFFFF; }
.stat dd small { display: block; margin-top: 8px; font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); }

/* Split media + text */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 880px) {
  .split.media-left { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .split.media-right { grid-template-columns: minmax(0, 54%) minmax(0, 46%); }
  /* Let the media track the text-column height so the two sides balance
     instead of a fixed-portrait crop towering over shorter copy (which left
     large voids above/below the text on wide screens). Media grows with the
     prose on copy-heavy pages and never drops below a comfortable minimum. */
  .split { align-items: stretch; }
  .split .media { aspect-ratio: auto; height: 100%; min-height: clamp(360px, 40vw, 460px); }
}
.media { position: relative; aspect-ratio: 4 / 5; background: #10303E; }
.media.wide { aspect-ratio: 16 / 9; }
.media.band { aspect-ratio: 21 / 8; }
/* On phones a portrait 4/5 slot crops landscape video too hard — show video
   sections in their native 16/9 so the car is fully visible. */
@media (max-width: 879px) {
  .media:has(.img-slot.has-video) { aspect-ratio: 16 / 9; }
}

/* Detail rows */
.rows { margin-top: 26px; display: flex; flex-direction: column; }
.rows .row { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.rows .row h3 { margin: 0; font-size: 16px; font-weight: 600; color: #FFFFFF; }
.rows .row p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.66); max-width: 62ch; }

/* Steps */
.steps { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); }
.step { background: #0A2230; padding: clamp(26px, 3vw, 38px); }
.step .n { font-family: 'Marcellus', Georgia, serif; font-size: 15px; color: #B9924A; letter-spacing: 0.1em; }
.step h3 { margin: 14px 0 0; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.step p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.64); }

/* Route table */
.rtable-scroll { margin-top: clamp(32px, 4vw, 44px); }
.rtable { width: 100%; border-collapse: collapse; }
.rtable-scroll .rtable { margin-top: 0; }
/* On phones, tighten the cells so the four columns fit; if a long route name
   still pushes past the edge, the wrapper scrolls horizontally instead of
   overflowing the whole page (which stretched the fixed header). */
@media (max-width: 560px) {
  .rtable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rtable { min-width: 340px; }
  .rtable th, .rtable td { padding: 12px 11px !important; font-size: 13px !important; }
  .rtable th:first-child, .rtable td:first-child { white-space: normal; }
  .rtable th:not(:first-child), .rtable td:not(:first-child) { white-space: nowrap; }
}
.rtable caption { text-align: left; font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.rtable th, .rtable td { text-align: left; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 15px; }
.rtable th { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #B49A57; }
.rtable td { color: rgba(255,255,255,0.8); }
.rtable td a { color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(180,154,87,0.5); }
.rtable td a:hover { color: #B49A57; }
.rtable tbody tr:hover td { background: rgba(255,255,255,0.03); }

/* Cards / internal links */
.cards { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.card { display: block; padding: clamp(24px, 2.6vw, 32px); background: #0C2836; border: 1px solid rgba(255,255,255,0.1); text-decoration: none; transition: border-color 0.2s ease, transform 0.3s cubic-bezier(0.22,0.61,0.36,1); }
.card:hover { border-color: rgba(180,154,87,0.6); transform: translateY(-3px); }
.card .k { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #B49A57; }
.card h3 { margin: 12px 0 0; font-family: 'Marcellus', Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.15; color: #FFFFFF; }
.card p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.62); }
.card .go { display: inline-block; margin-top: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #B49A57; }

/* Chips (coverage / list) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }
.chips a, .chips span { font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.75); text-decoration: none; padding: 9px 16px; border: 1px solid rgba(255,255,255,0.16); }
.chips a:hover { border-color: #B49A57; color: #B49A57; }

/* FAQ */
.faq details { border-top: 1px solid rgba(255,255,255,0.14); }
.faq details:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.14); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #B49A57; }
.faq .plus { flex: none; width: 16px; height: 16px; position: relative; margin-top: 4px; transition: transform 0.25s ease; }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; background: #B9924A; }
.faq .plus::before { left: 0; right: 0; top: 7.25px; height: 1.5px; }
.faq .plus::after { top: 0; bottom: 0; left: 7.25px; width: 1.5px; }
.faq details[open] .plus { transform: rotate(135deg); }
.faq .ans { margin: 0 0 22px; font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,0.68); max-width: 74ch; }

/* CTA band */
.ctaband { position: relative; overflow: hidden; background: #04121A; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: clamp(56px, 7vw, 96px) 0; }
.ctaband h2 { margin: 0; font-family: 'Marcellus', Georgia, serif; font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.01em; }
.ctaband .lead { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.7); max-width: 56ch; }

.divider { height: 1px; background: rgba(255,255,255,0.1); }

/* ===== Cinema slider (occasions / airport hubs) =====
   Full-bleed, one slide at a time. Motion + layout values follow the handoff spec;
   colours/fonts use the site's own tokens (gold #B49A57, Marcellus/Manrope) so the
   slider is coherent with the rest of the site rather than the prototype's near-identical
   palette. JS lives in site.js under [data-slider]. */
.cin { position: relative; background: #061820; overflow: hidden; }
.cin-stage { position: relative; width: 100%; height: clamp(480px, calc(100svh - 300px), 700px); overflow: hidden; }
.cin-track { display: flex; height: 100%; will-change: transform; touch-action: pan-y; }
.cin-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }

/* Photo — right side of the slide, dark-scrimmed for AA contrast on the copy */
.cin-photo { position: absolute; top: 0; right: 0; width: 760px; max-width: 62%; height: 100%; overflow: hidden; background: #10303E; }
.cin-photo img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.cfh-anim .cin-slide[aria-hidden="false"] .cin-photo img { animation: cin-drift 26s ease-in-out infinite alternate; }
@keyframes cin-drift { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.14) translate(-16px, -12px); } }
.cin-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, #061820 0%, #061820 36%, rgba(6,24,32,0.72) 58%, rgba(6,24,32,0.10) 100%); }

/* Text block — left */
.cin-text { position: absolute; left: 88px; top: 150px; z-index: 2; width: 520px; max-width: calc(100% - 176px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cin-num { font-family: 'Marcellus', Georgia, serif; font-size: 76px; line-height: 0.8; color: rgba(180,154,87,0.34); }
.cin-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #B49A57; }
.cin-title { margin: 0; font-family: 'Marcellus', Georgia, serif; font-weight: 500; font-size: 64px; line-height: 1; color: #F4F2EC; }
.cin-body { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.74); text-wrap: pretty; max-width: 34ch; }
.cin-explore { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: #B49A57; text-decoration: none; transition: color 0.3s ease; }
.cin-explore:hover { color: #C9AE66; }
.cin-explore span { display: inline-block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.cin-explore:hover span { transform: translateX(5px); }

/* Controls row */
.cin-controls { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 40px clamp(24px, 6vw, 88px) 70px; }
.cin-rail { position: relative; display: flex; align-items: center; gap: 22px; padding-bottom: 16px; }
.cin-rail-item { -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  width: 44px; min-height: 44px; padding: 0; font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: 0.2em;
  color: #7D9295; transition: color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; }
.cin-rail-item:hover, .cin-rail-item.is-active { color: #F4F2EC; }
.cin-indicator { position: absolute; left: 0; bottom: 0; width: 30px; height: 1px; background: #B49A57;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.cin-arrows { display: flex; gap: 12px; }
.cin-arrow { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(226,232,230,0.22); color: #E2E8E6; font-size: 15px; cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease; }
.cin-arrow:hover { border-color: #B49A57; color: #B49A57; }

/* < 1024px: photo becomes a top band, text beneath it */
@media (max-width: 1023px) {
  .cin-stage { height: auto; }
  .cin-slide { display: flex; flex-direction: column; }
  .cin-photo { position: relative; width: 100%; max-width: none; height: 46svh; }
  /* stop the continuous drift on touch/mobile — combined with svh it prevents the
     image from appearing to move as the address bar collapses on scroll */
  .cfh-anim .cin-slide[aria-hidden="false"] .cin-photo img { animation: none !important; transform: none !important; }
  .cin-scrim { background: linear-gradient(180deg, rgba(6,24,32,0) 34%, rgba(6,24,32,0.10) 60%, rgba(6,24,32,0.72) 100%); }
  .cin-text { position: relative; left: auto; top: auto; z-index: 2; width: auto; max-width: none;
    padding: 34px clamp(24px, 5vw, 40px) 8px; gap: 16px; }
  .cin-num { font-size: 60px; }
  .cin-title { font-size: 44px; }
  .cin-body { font-size: 16px; max-width: 56ch; }
  .cin-controls { padding: 14px clamp(24px, 5vw, 40px) 22px; }
}

/* < 640px: rail becomes dots, arrows hidden, drag is primary */
@media (max-width: 639px) {
  .cin-arrows { display: none; }
  .cin-rail { gap: 12px; padding-bottom: 0; }
  .cin-rail-item { width: 44px; height: 44px; min-height: 44px; font-size: 0; letter-spacing: 0; }
  .cin-rail-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.55; transition: opacity 0.3s ease; }
  .cin-rail-item.is-active::before { opacity: 1; }
  .cin-indicator { display: none; }
  .cin-num { font-size: 56px; }
  .cin-title { font-size: 34px; }
  .cin-controls { justify-content: center; padding: 8px 24px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cin-track { transition: none !important; }
  .cin-photo img { animation: none !important; }
}