/* ==========================================================================
   Pristine Classic Cars — PPF PPC landing page
   Brand tokens extracted from live Elementor kit + pristine-gold-logo.svg
   (9 Sep 2026). Gold #C2986B on #1D2439 = 5.9:1 (AA pass).
   ========================================================================== */

.ppf-lp {
  --pcc-gold: #C2986B;        /* sole fill in pristine-gold-logo.svg; kit accent */
  --pcc-gold-hover: #E8C79E;  /* lighter gold present in live kit CSS */
  --pcc-black: #141928;       /* hue-matched deepening of kit dark #1D2439 */
  --pcc-charcoal: #1D2439;    /* kit text/dark colour */
  --pcc-navy: #293352;        /* kit primary */
  --pcc-off-white: #EAEBEE;   /* kit light */
  --pcc-body: #C5C9D4;        /* body text on dark, derived from off-white */
  --pcc-border: rgba(194, 152, 107, 0.28);

  --pcc-font-head: "Playfair Display", Georgia, serif;
  --pcc-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* ---- Reset / base (scoped to the template body class) ---- */
.ppf-lp, .ppf-lp * { box-sizing: border-box; }
.ppf-lp {
  margin: 0;
  background: var(--pcc-black);
  color: var(--pcc-body);
  font-family: var(--pcc-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
.ppf-lp h1, .ppf-lp h2, .ppf-lp h3 {
  font-family: var(--pcc-font-head);
  color: var(--pcc-off-white);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 600;
  text-wrap: balance;
}
.ppf-lp h1 { font-size: clamp(2.1rem, 6.5vw, 3.6rem); }
.ppf-lp h2 { font-size: clamp(1.65rem, 4.5vw, 2.4rem); }
.ppf-lp h3 { font-size: 1.25rem; }
.ppf-lp p { margin: 0 0 1em; }
.ppf-lp img { max-width: 100%; height: auto; display: block; }
.ppf-lp a { color: var(--pcc-gold); }
.ppf-lp a:hover { color: var(--pcc-gold-hover); }
.ppf-lp :focus-visible { outline: 2px solid var(--pcc-gold); outline-offset: 3px; }

.ppf-container { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }
.ppf-section { padding: clamp(3.25rem, 8vw, 5.5rem) 0; scroll-margin-top: 76px; /* clears the sticky header on anchor jumps */ }
.ppf-section__lead { max-width: 42em; color: var(--pcc-body); }

/* Symmetric full-width sections (grids of cards/tiles/steps/images) get centred
   headings and support copy, matching the "Who it's for" section; reading-flow
   sections (location, FAQ, form) stay left-aligned. */
.ppf-pricing h2, .ppf-benefits h2, .ppf-process h2, .ppf-gallery h2 { text-align: center; }
.ppf-pricing .ppf-section__lead { margin-left: auto; margin-right: auto; text-align: center; }
.ppf-benefits__copy { text-align: center; }

/* ---- Buttons (min 48px tap target) ---- */
.ppf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.75rem 1.75rem;
  font: 600 1rem/1.2 var(--pcc-font-body);
  letter-spacing: 0.02em; text-decoration: none;
  border-radius: 3px; transition: background-color .18s, color .18s, border-color .18s;
  cursor: pointer;
}
/* .ppf-lp prefix needed: `.ppf-lp a` outranks a bare single-class selector */
.ppf-lp .ppf-btn--gold { background: var(--pcc-gold); color: var(--pcc-charcoal); border: 1px solid var(--pcc-gold); }
.ppf-lp .ppf-btn--gold:hover { background: var(--pcc-gold-hover); border-color: var(--pcc-gold-hover); color: var(--pcc-charcoal); }
.ppf-lp .ppf-btn--outline { background: transparent; color: var(--pcc-gold); border: 1px solid var(--pcc-gold); }
.ppf-lp .ppf-btn--outline:hover { color: var(--pcc-charcoal); background: var(--pcc-gold); }
.ppf-btn--lg { min-height: 54px; padding: 0.9rem 2.1rem; font-size: 1.0625rem; }

/* ---- Conversion header ---- */
.ppf-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pcc-black) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ppf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.ppf-header__logo img { width: 150px; height: auto; }
.ppf-header__actions { display: flex; align-items: center; gap: 1.25rem; }
.ppf-header__phone { font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
  .ppf-header__cta { display: none; } /* sticky bottom bar covers it */
  .ppf-header__logo img { width: 124px; }
}

/* ---- Hero ---- */
.ppf-hero { position: relative; min-height: min(88svh, 780px); display: flex; align-items: center; overflow: hidden; }
/* Poster URLs come from custom properties set inline on .ppf-hero__media by each
   page (static site and WP template use different upload paths). */
.ppf-hero__media {
  position: absolute; inset: 0;
  background-image: var(--ppf-hero-poster);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (max-width: 640px) {
  /* Content-sized hero on phones — no dead bands above/below — with a dedicated
     portrait poster crop (falls back to the landscape one where not provided).
     The video is not loaded on small screens (see ppf-lp.js). */
  .ppf-hero { min-height: auto; }
  .ppf-hero__content { padding-top: 3.5rem; padding-bottom: 3.25rem; }
  .ppf-hero__media { background-image: var(--ppf-hero-poster-mobile, var(--ppf-hero-poster)); }
  .ppf-hero__overlay { background: linear-gradient(180deg, rgba(20, 25, 40, 0.3) 0%, rgba(20, 25, 40, 0.72) 55%, var(--pcc-black) 100%); }
}
/* The poster visual comes from a background-image on .ppf-hero__media (set inline)
   because iOS letterboxes <video> posters instead of honouring object-fit — that
   was the black band under the header on mobile. The video itself stays invisible
   until it is actually playing, then fades in over the background. */
.ppf-hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; transform: scale(1.32); /* the footage has ~12% letterbox bars baked into each edge; the scale pushes them outside the hero's overflow:hidden */ }
.ppf-hero__video.is-playing { opacity: 1; }
.ppf-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 25, 40, 0.55) 0%, rgba(20, 25, 40, 0.78) 78%, var(--pcc-black) 100%);
}
.ppf-hero__content { position: relative; width: 100%; /* flex child: stop shrink-to-fit so it aligns with the page container */ padding-top: 4.5rem; padding-bottom: 4rem; }
.ppf-eyebrow {
  color: var(--pcc-gold); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem;
}
.ppf-hero__sub { font-size: clamp(1.05rem, 2.5vw, 1.25rem); max-width: 34em; color: var(--pcc-off-white); }
.ppf-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 1.75rem 0 2.25rem; }
.ppf-trust {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.875rem; color: var(--pcc-off-white);
}
.ppf-trust li { display: flex; align-items: center; gap: 0.5rem; }
.ppf-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pcc-gold); flex: none; }

/* ---- Pricing ---- */
.ppf-pricing { background: var(--pcc-charcoal); }
.ppf-pricing__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2.25rem; }
.ppf-card {
  background: var(--pcc-black); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;
}
.ppf-card img { aspect-ratio: 1003 / 518; /* matches the GYEON coverage renders (16 Sep) — near-2:1, no visible crop */ object-fit: cover; width: 100%; }
.ppf-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; gap: 0.25rem; }
.ppf-card__body p { margin-bottom: 0.75rem; }
.ppf-lp .ppf-card__price { margin-top: auto; color: var(--pcc-off-white); } /* .ppf-lp prefix: outranks `.ppf-lp p` margin shorthand so the price+CTA bottom-align across cards */
.ppf-card__price strong { font-family: var(--pcc-font-head); font-size: 1.75rem; color: var(--pcc-gold); font-weight: 600; }
.ppf-card__price span { font-size: 0.875rem; color: var(--pcc-body); }
.ppf-card .ppf-btn { margin-top: 0.75rem; }

/* ---- Benefit tiles ---- */
.ppf-benefits__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 2.25rem 0; }
.ppf-tile { border: 1px solid rgba(255, 255, 255, 0.07); border-top: 2px solid var(--pcc-border); border-radius: 4px; padding: 1.5rem; }
.ppf-tile svg { width: 34px; height: 34px; color: var(--pcc-gold); margin-bottom: 0.9rem; }
.ppf-tile h3 { font-family: var(--pcc-font-body); font-size: 1.0625rem; font-weight: 600; }
.ppf-tile p { margin: 0; font-size: 0.95rem; }
.ppf-lp .ppf-benefits__copy { max-width: 46em; margin-left: auto; margin-right: auto; } /* .ppf-lp prefix: outranks `.ppf-lp p` margin shorthand */

/* ---- Who it's for ---- */
.ppf-for { background: var(--pcc-charcoal); text-align: center; }
.ppf-for__row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  list-style: none; padding: 0; margin: 1.75rem 0;
}
.ppf-for__row li {
  border: 1px solid var(--pcc-border); border-radius: 999px;
  padding: 0.55rem 1.2rem; color: var(--pcc-off-white); font-size: 0.9375rem;
}
.ppf-lp .ppf-for__copy { max-width: 42em; margin: 0 auto; } /* .ppf-lp prefix: outranks `.ppf-lp p` margin shorthand */

/* ---- Location ---- */
.ppf-location__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .ppf-location__grid { grid-template-columns: 1.15fr 1fr; } }
.ppf-ticks { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.5rem; }
.ppf-ticks li { display: flex; gap: 0.6rem; align-items: baseline; color: var(--pcc-off-white); }
.ppf-ticks li::before { content: "✓"; color: var(--pcc-gold); font-weight: 700; }
.ppf-location__towns { font-size: 0.9375rem; }
.ppf-location__map svg { width: 100%; height: auto; }
.ppf-map__ring { fill: none; stroke: var(--pcc-border); stroke-dasharray: 4 5; }
.ppf-map__pin { fill: var(--pcc-gold); }
.ppf-map__rail { fill: none; stroke: var(--pcc-gold); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.ppf-map__label { fill: var(--pcc-body); font: 500 13px var(--pcc-font-body); }
.ppf-map__label--pin { fill: var(--pcc-off-white); font-weight: 600; text-anchor: middle; }
.ppf-map__label--rail { fill: var(--pcc-gold); font-size: 11.5px; }

/* ---- Process ---- */
.ppf-process { background: var(--pcc-charcoal); }
.ppf-process__steps {
  list-style: none; counter-reset: step; padding: 0; margin: 2.25rem 0 0;
  display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ppf-process__steps li { position: relative; padding-top: 0.25rem; }
.ppf-process__steps span {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--pcc-gold); border-radius: 50%; color: var(--pcc-gold);
  font: 600 1.125rem var(--pcc-font-head); margin-bottom: 0.9rem;
}
.ppf-process__steps h3 { font-family: var(--pcc-font-body); font-size: 1.0625rem; font-weight: 600; }
.ppf-process__steps p { margin: 0; font-size: 0.95rem; }

/* ---- Gallery ---- */
.ppf-gallery__grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
@media (min-width: 720px) { .ppf-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.ppf-gallery__item { display: block; border-radius: 3px; overflow: hidden; }
.ppf-gallery__item img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform 0.3s; }
.ppf-gallery__item:hover img { transform: scale(1.03); }

/* Lightbox */
.ppf-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 22, 0.94); padding: 1.5rem;
}
.ppf-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 3px; }
.ppf-lightbox__close {
  position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px;
  background: none; border: 1px solid var(--pcc-border); border-radius: 50%;
  color: var(--pcc-off-white); font-size: 1.4rem; cursor: pointer;
}

/* ---- Detailing cross-sell (client request 15 Sep 2026) ---- */
.ppf-detailing { background: var(--pcc-charcoal); }
.ppf-detailing h2 { text-align: center; }
.ppf-detailing .ppf-section__lead { margin-left: auto; margin-right: auto; text-align: center; }
.ppf-detailing__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 2.25rem 0 1.75rem; }
.ppf-detailing .ppf-tile { background: var(--pcc-black); display: flex; flex-direction: column; }
.ppf-lp .ppf-tile__price { margin: auto 0 0; padding-top: 0.9rem; color: var(--pcc-gold); font-weight: 600; font-size: 0.9375rem; } /* .ppf-lp prefix: outranks `.ppf-lp p` margin shorthand */
.ppf-detailing .ppf-tile p { margin-bottom: 0; }
.ppf-detailing__cta { text-align: center; }
.ppf-detailing__cta p { max-width: 42em; margin: 0 auto 1.25rem; }

/* ---- Reviews ---- */
.ppf-reviews { background: var(--pcc-charcoal); }
.ppf-reviews__summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ppf-reviews__stars { color: var(--pcc-gold); font-size: 1.4rem; letter-spacing: 0.15em; }
.ppf-reviews__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---- FAQ ---- */
.ppf-faq__list { margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.ppf-faq__list details { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.ppf-faq__list summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.1rem 3rem 1.1rem 0; color: var(--pcc-off-white); font-weight: 600;
}
.ppf-faq__list summary::-webkit-details-marker { display: none; }
.ppf-faq__list summary::after {
  content: "+"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  color: var(--pcc-gold); font-size: 1.5rem; font-weight: 400; transition: transform 0.2s;
}
.ppf-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ppf-faq__list details > div { padding: 0 0 1.25rem; max-width: 50em; }

/* ---- Quote / form panel ---- */
.ppf-quote { background: var(--pcc-charcoal); border-top: 2px solid var(--pcc-border); }
/* keep the section on the page's container grid; cap only its content width */
.ppf-quote__inner > * { max-width: 760px; }
.ppf-quote__alt { margin-top: 1.5rem; font-size: 0.9375rem; }
.ppf-quote__fallback { font-size: 1.125rem; }

/* WPForms restyle (scoped) */
.ppf-lp .wpforms-container { margin-top: 1.5rem; }
.ppf-lp .wpforms-field-label { color: var(--pcc-off-white); font-weight: 500; font-size: 0.9375rem; }
.ppf-lp .wpforms-field input[type="text"],
.ppf-lp .wpforms-field input[type="tel"],
.ppf-lp .wpforms-field input[type="email"],
.ppf-lp .wpforms-field select,
.ppf-lp .wpforms-field textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  background: var(--pcc-black); color: var(--pcc-off-white);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px;
  font: 400 1rem var(--pcc-font-body);
}
.ppf-lp .wpforms-field input:focus, .ppf-lp .wpforms-field select:focus, .ppf-lp .wpforms-field textarea:focus {
  border-color: var(--pcc-gold); outline: none;
}
.ppf-lp .wpforms-submit {
  background: var(--pcc-gold) !important; color: var(--pcc-charcoal) !important;
  border: none !important; border-radius: 3px !important;
  min-height: 54px; padding: 0.9rem 2.5rem !important;
  font: 600 1.0625rem var(--pcc-font-body) !important; cursor: pointer;
}
.ppf-lp .wpforms-submit:hover { background: var(--pcc-gold-hover) !important; }
/* visually-hidden tracking field (WPForms Lite fallback — field carries class ppf-hidden) */
.ppf-lp .wpforms-field.ppf-hidden { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Native lead form (Vercel-hosted page; WP uses the WPForms styles above) ---- */
.ppf-form { margin-top: 1.75rem; }
.ppf-form__grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ppf-field { display: block; }
.ppf-field--full { margin-top: 1.1rem; }
.ppf-label { display: block; color: var(--pcc-off-white); font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.4rem; }
.ppf-form input[type="text"],
.ppf-form input[type="tel"],
.ppf-form input[type="email"],
.ppf-form textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  background: var(--pcc-black); color: var(--pcc-off-white);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px;
  font: 400 1rem var(--pcc-font-body);
}
.ppf-form input:focus, .ppf-form textarea:focus { border-color: var(--pcc-gold); outline: none; }
.ppf-consent { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; margin-top: 1.1rem; }
.ppf-form__submit { margin-top: 1.4rem; border: none; }
.ppf-lp .ppf-form__status { margin: 0.9rem 0 0; min-height: 1.3em; color: var(--pcc-gold-hover); font-size: 0.9375rem; }
.ppf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
.ppf-footer {
  padding: 2.5rem 0 6rem; /* bottom padding clears the mobile sticky bar */
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.875rem; text-align: center;
}
.ppf-footer strong { color: var(--pcc-off-white); }
@media (min-width: 641px) { .ppf-footer { padding-bottom: 2.5rem; } }

/* ---- Sticky mobile bar ---- */
.ppf-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 0.6rem; padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--pcc-black) 94%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.ppf-sticky .ppf-btn { flex: 1; }
@media (max-width: 640px) { .ppf-sticky { display: flex; } }
.ppf-sticky.is-hidden { display: none; }

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .ppf-lp { scroll-behavior: auto; }
  .ppf-gallery__item img { transition: none; }
}