/* ═══════════════════════════════════════════════════════════════
   JLH TRAILER HIRE — "COASTAL PREMIUM" LIGHT THEME (trial)
   White · Metallic Gold · Charcoal — Apple/Porsche-inspired
   ---------------------------------------------------------------
   This is a pure OVERRIDE layer loaded after styles.css.
   Remove this one <link> tag from any page to return to the
   dark theme instantly. Zero functionality changes.
   Admin panel + modals intentionally stay dark (scoped re-pin).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette remap — same variable names, premium light values */
  --black: #f6f6f4;               /* page base */
  --surface: #eef0f2;             /* alternating section tint */
  --card: #ffffff;
  --card-hover: #fdfbf6;
  --border: rgba(20, 26, 34, 0.10);
  --border-bright: rgba(176, 138, 40, 0.45);
  --amber: #a87f1f;               /* metallic gold, AA on white */
  --amber-dark: #8a6817;
  --amber-glow: rgba(200, 162, 60, 0.16);
  --steel: #2a5d94;
  --steel-light: #3d76b5;
  --text: #232a33;                /* charcoal body text */
  --muted: #5b6470;
  --light-muted: #454e59;
  --white: #14181f;               /* semantic: heading colour → charcoal */
  --gold-hi: #d9b757;
  --gold-lo: #a87f1f;
  --charcoal: #171b21;
}

/* ── LAYERED PREMIUM BACKGROUND ─────────────────────────────── */
body {
  background:
    /* faint vignette */
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 140% 100% at 50% 115%, rgba(200,205,212,0.35), rgba(255,255,255,0) 60%),
    /* faint gold sheen top-right */
    radial-gradient(ellipse 60% 40% at 85% 0%, rgba(217,183,87,0.10), rgba(255,255,255,0) 70%),
    /* trailer silhouette — barely there, mid left */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22520%22%20height%3D%22290%22%20viewBox%3D%220%200%20240%20112%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23141a22%22%20stroke-opacity%3D%220.030%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%22176%22%20height%3D%2256%22%20rx%3D%225%22%2F%3E%0A%3Cline%20x1%3D%2211%22%20y1%3D%2234%22%20x2%3D%22185%22%20y2%3D%2234%22%20stroke-width%3D%221.8%22%2F%3E%0A%3Cline%20x1%3D%2232%22%20y1%3D%2215%22%20x2%3D%2232%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%2254%22%20y1%3D%2215%22%20x2%3D%2254%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%2276%22%20y1%3D%2215%22%20x2%3D%2276%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%2298%22%20y1%3D%2215%22%20x2%3D%2298%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%22120%22%20y1%3D%2215%22%20x2%3D%22120%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%22142%22%20y1%3D%2215%22%20x2%3D%22142%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cline%20x1%3D%22164%22%20y1%3D%2215%22%20x2%3D%22164%22%20y2%3D%2269%22%20stroke-width%3D%221.5%22%2F%3E%0A%3Cpath%20d%3D%22M2%2076%20L194%2076%20L228%2085%20L238%2085%22%2F%3E%0A%3Ccircle%20cx%3D%2298%22%20cy%3D%2290%22%20r%3D%2212%22%2F%3E%0A%3Ccircle%20cx%3D%2298%22%20cy%3D%2290%22%20r%3D%224%22%20stroke-width%3D%222%22%2F%3E%0A%3Cline%20x1%3D%22196%22%20y1%3D%2280%22%20x2%3D%22196%22%20y2%3D%2298%22%20stroke-width%3D%221.8%22%2F%3E%0A%3Ccircle%20cx%3D%22196%22%20cy%3D%22103%22%20r%3D%225%22%20stroke-width%3D%221.8%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat left -150px bottom 22%,
    /* the Island itself — barely there, top right */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22760%22%20height%3D%22451%22%20viewBox%3D%220%200%20300%20178%22%3E%3Cpath%20d%3D%22M22.4%2095.2%20L29.1%2093.4%20L30.7%2087.1%20L41.7%2082.7%20L47.9%2072.0%20L48.0%2065.9%20L54.2%2060.9%20L72.2%2061.0%20L100.0%2046.2%20L108.7%2046.8%20L136.5%2036.3%20L142.9%2025.4%20L157.0%2014.0%20L178.0%2015.4%20L193.8%2031.9%20L208.9%2039.1%20L233.2%2040.5%20L257.9%2049.7%20L264.2%2068.2%20L277.6%2077.0%20L265.9%2088.1%20L263.7%2093.6%20L246.4%2096.1%20L233.2%20105.4%20L226.0%20124.9%20L225.5%20139.1%20L220.6%20146.6%20L189.0%20159.2%20L166.4%20164.0%20L159.9%20162.0%20L154.7%20152.5%20L120.1%20123.8%20L91.1%20110.5%20L72.4%2092.3%20L53.3%2091.5%20L26.4%2097.5%20L22.4%2095.2%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23141a22%22%20stroke-opacity%3D%220.030%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat right -120px top 90px,
    /* topographic contour lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23141a22' stroke-opacity='0.020' stroke-width='1.4'%3E%3Cpath d='M60 700q180-140 380-90t400-60'/%3E%3Cpath d='M20 620q220-160 420-100t440-80'/%3E%3Cpath d='M-20 540q260-180 460-110t480-100'/%3E%3C/g%3E%3C/svg%3E"),
    /* fine grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.017'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fbfbfa 0%, #f4f4f2 45%, #eef0f1 100%);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
  color: var(--text);
}

/* Kill the dark theme's ambient glows */
.hero-glow, .hero-stars, .hero-clouds, .hero-sun { display: none !important; }

/* ── TICKER — slim charcoal band, gold text ─────────────────── */
.ticker-wrap, .announcement-ticker, [class*="ticker"] {
  background: linear-gradient(90deg, #14181f, #1c222b 50%, #14181f) !important;
  border-bottom: 1px solid rgba(217,183,87,0.35) !important;
  color: #d9b757 !important;
}
[class*="ticker"] * { color: #d9b757 !important; }

/* ── NAV — white glass ──────────────────────────────────────── */
nav {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(20,26,34,0.08) !important;
  box-shadow: 0 1px 24px rgba(20,26,34,0.06);
}
nav .nav-links a { color: #333c47; }
nav .nav-links a:hover { color: var(--amber); }
.nav-links a.active { color: var(--amber); }
.nav-burger span { background: #232a33 !important; }
@media (max-width: 1180px) {
  .nav-links { background: rgba(255,255,255,0.97) !important; box-shadow: 0 18px 40px rgba(20,26,34,0.14); }
}
.nav-cta {
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo)) !important;
  color: #1a1206 !important;
  box-shadow: 0 3px 14px rgba(168,127,31,0.35);
}

/* ── HEADINGS & TEXT ────────────────────────────────────────── */
.section-title, .page-hero h1, h1, h2, h3 { color: var(--white); }
.section-title span, .page-hero h1 span { 
  background: linear-gradient(160deg, #c9a53c, #8a6817);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub, .page-hero p { color: var(--light-muted); }
.section-tag { color: var(--amber); border-color: rgba(168,127,31,0.4); background: rgba(217,183,87,0.10); }

/* ── BUTTONS — metallic gold, shimmer, hover lift ───────────── */
.btn-primary, .sale-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #dfc06a 0%, #c9a53c 38%, #a87f1f 100%) !important;
  color: #1a1206 !important;
  border: 1px solid rgba(138,104,23,0.55) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(168,127,31,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn-primary::after, .sale-btn::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; width: 34%;
  left: -55%; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
  transition: left .55s ease;
}
.btn-primary:hover, .sale-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(168,127,31,0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-primary:hover::after, .sale-btn:hover::after { left: 125%; }
.btn-outline, .sale-btn.outline {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(20,26,34,0.18) !important;
  color: #232a33 !important;
  border-radius: 12px !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn-outline:hover, .sale-btn.outline:hover { transform: translateY(-2px); border-color: var(--amber) !important; box-shadow: 0 6px 18px rgba(20,26,34,0.10); }

/* ── CARDS — floating white, thin gold border, hover lift ───── */
.content-card, .sale-card, .trailer-card, .how-card, .trust-card, .faq-item,
.cm-card, .avail-status-card, .enquiry-card {
  background: #ffffff;
  border: 1px solid rgba(20,26,34,0.09);
  box-shadow: 0 2px 8px rgba(20,26,34,0.05), 0 14px 34px rgba(20,26,34,0.06);
}
.content-card { border-top: 2px solid rgba(176,138,40,0.5); }
.sale-card:hover, .trailer-card:hover {
  border-color: rgba(176,138,40,0.55);
  box-shadow: 0 6px 16px rgba(20,26,34,0.08), 0 24px 54px rgba(20,26,34,0.11);
}
.sale-card-img { background-color: #eef0f2; }
.price-pill { background: rgba(217,183,87,0.14); border-color: rgba(168,127,31,0.4); color: #8a6817; }

/* ── SECTION TRANSITIONS — soft alternation, curved divider ─── */
section { position: relative; }
section[style*="var(--surface)"] {
  background: linear-gradient(180deg, #f0f1f3 0%, #eaecee 100%) !important;
}
section[style*="var(--surface)"]::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 46px;
  background: radial-gradient(140% 100% at 50% 0%, #f6f6f4 49%, rgba(246,246,244,0) 50.5%);
  pointer-events: none;
}

/* ── FORMS — light inputs everywhere on public pages ────────── */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: #ffffff; border: 1px solid rgba(20,26,34,0.16); color: #232a33;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--amber); outline: none;
  box-shadow: 0 0 0 3px rgba(200,162,60,0.18);
}
::placeholder { color: #8a929d; }
.sales-toolbar select, .sales-toolbar input { background: #ffffff; border-color: rgba(20,26,34,0.16); color: #232a33; }
.spec-table td { border-color: rgba(20,26,34,0.10); color: #38414c; }
.spec-table td:first-child { color: #6b7480; }

/* ── IMAGERY — soft fade into background, no harsh edges ────── */
[data-site-img], .img-fade {
  -webkit-mask-image: radial-gradient(115% 115% at 50% 42%, #000 62%, transparent 98%);
  mask-image: radial-gradient(115% 115% at 50% 42%, #000 62%, transparent 98%);
}
img { max-width: 100%; }

/* ── FOOTER — premium charcoal (stays dark by design) ───────── */
footer {
  background: linear-gradient(180deg, #171b21, #101318) !important;
  border-top: 1px solid rgba(217,183,87,0.35) !important;
  color: #aeb6c0 !important;
}
footer * { color: #aeb6c0; }
footer a { color: #c8ccd3 !important; }
footer a:hover { color: #d9b757 !important; }
footer h3, footer h4, footer strong { color: #f2f4f6 !important; }

/* ── FLOAT BADGE — style the pill, not its container ────────── */
.float-badge, #floatBadge { background: transparent !important; box-shadow: none !important; }
.float-badge a {
  background: linear-gradient(160deg, #dfc06a, #a87f1f) !important;
  color: #1a1206 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 26px rgba(168,127,31,0.42) !important;
  border: 1px solid rgba(138,104,23,0.5);
}

/* ── SCROLL PROGRESS ────────────────────────────────────────── */
.scroll-progress, #scrollProgress { background: linear-gradient(90deg, #d9b757, #a87f1f) !important; }

/* ── STATUS COLOURS retuned for white ───────────────────────── */
.sale-badge.reserved { background: #c9a53c; color: #1a1206; }
.sale-badge.sold { background: #c23434; }
.sale-badge.featured { background: #1f8a4c; }

/* ═══ ADMIN AREA — INTENTIONALLY PINNED DARK ═════════════════
   The admin panel, gate, and every modal keep the original dark
   cockpit look (and their original variables), so nothing Josh
   uses day-to-day shifts an inch. */
#adminPanel, #adminGate, [id$="Modal"], [id$="modal"], #paymentSuccess {
  --black: #080a0d; --surface: #0f1218; --card: #161c26; --card-hover: #1d2535;
  --border: rgba(255,255,255,0.07); --border-bright: rgba(245,166,35,0.3);
  --amber: #f5a623; --amber-dark: #c4841a; --amber-glow: rgba(245,166,35,0.15);
  --text: #e2e8f0; --muted: #64748b; --light-muted: #94a3b8; --white: #ffffff;
  color: var(--text);
}
#adminPanel input:not([type="checkbox"]), #adminPanel select, #adminPanel textarea,
#adminGate input, [id$="Modal"] input, [id$="Modal"] select, [id$="Modal"] textarea {
  background: #12161e; border-color: rgba(255,255,255,0.12); color: #e2e8f0;
}
#adminPanel .sale-btn, #adminGate .sale-btn { background: var(--amber) !important; color: #111 !important; border: none !important; box-shadow: none; }
#adminPanel .sale-btn.outline { background: transparent !important; color: #e2e8f0 !important; border: 1px solid rgba(255,255,255,0.15) !important; }

/* ── ACCESSIBILITY ──────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(168,127,31,0.6); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── NEW HERO ("Coastal Premium") ───────────────────────────── */
#hero { background: transparent !important; }
.heroX {
  max-width: 1180px; margin: 0 auto; padding: 46px 24px 30px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center;
}
@media (max-width: 940px) { .heroX { grid-template-columns: 1fr; padding-top: 26px; } }
.heroX-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600;
  color: var(--amber); border: 1px solid rgba(168,127,31,0.4);
  background: rgba(217,183,87,0.10); border-radius: 999px; padding: 7px 16px;
}
.heroX-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(168,127,31,0.8); }
.heroX-title {
  font-family: 'Bebas Neue'; font-size: clamp(52px, 8.2vw, 92px); line-height: 0.98;
  letter-spacing: 2.5px; color: #14181f; margin: 18px 0 8px;
}
.heroX-title em {
  font-style: normal;
  background: linear-gradient(160deg, #d9b757 10%, #a87f1f 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heroX-sub { font-size: 17px; color: #454e59; letter-spacing: 0.4px; margin-bottom: 26px; }
.heroX-sub b { color: #8a6817; font-weight: 600; }
.heroX-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.heroX-photo {
  position: relative; border-radius: 26px; overflow: hidden; min-height: 340px;
  background:
    radial-gradient(90% 70% at 70% 20%, rgba(217,183,87,0.16), rgba(255,255,255,0) 60%),
    linear-gradient(200deg, #e8eaec 0%, #d5d9dd 55%, #c6ccd2 100%);
  box-shadow: 0 3px 10px rgba(20,26,34,0.07), 0 30px 70px rgba(20,26,34,0.14);
  border: 1px solid rgba(20,26,34,0.10);
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.heroX-photo .ph-note { text-align: center; color: #6b7480; font-size: 13px; padding: 20px; }
.heroX-photo .ph-note .ph-ico { font-size: 44px; display: block; margin-bottom: 10px; opacity: 0.75; }
.heroX-photo.has-img .ph-note { display: none; }
.heroX-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1180px; margin: 6px auto 0; padding: 0 24px 26px;
}
@media (max-width: 940px) { .heroX-cards { grid-template-columns: repeat(2, 1fr); } }
.heroX-card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(20,26,34,0.09); border-top: 2px solid rgba(176,138,40,0.55);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(20,26,34,0.05), 0 12px 28px rgba(20,26,34,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.heroX-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(20,26,34,0.08), 0 20px 44px rgba(20,26,34,0.10); }
.heroX-card .hc-ico { font-size: 22px; }
.heroX-card .hc-t { font-weight: 600; color: #1c222b; font-size: 14px; margin-top: 6px; }
.heroX-card .hc-s { font-size: 12px; color: #6b7480; margin-top: 2px; }
/* keep the old animated coastline/truck scene out of the light hero (elements stay in DOM for JS) */
.hero-coastline, .hero-grid, .hero-stats { display: none !important; }

/* ── SECTION TAG — fix full-width band, restore pill ────────── */
.section-tag { display: inline-block !important; padding: 7px 16px; border-radius: 999px; }

/* ── FAQ — floating cards, not a spreadsheet ────────────────── */
#faq .faq-list { max-width: 820px; margin: 34px auto 0; padding: 0 24px; }
#faq .faq-item {
  background: #ffffff;
  border: 1px solid rgba(20,26,34,0.09);
  border-left: 3px solid rgba(176,138,40,0.35);
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 4px 22px;
  box-shadow: 0 2px 8px rgba(20,26,34,0.04), 0 10px 26px rgba(20,26,34,0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
#faq .faq-item:hover {
  transform: translateY(-2px);
  border-left-color: #a87f1f;
  box-shadow: 0 4px 12px rgba(20,26,34,0.07), 0 18px 40px rgba(20,26,34,0.09);
}
#faq .faq-item.open {
  border-color: rgba(176,138,40,0.5);
  border-left-color: #a87f1f;
  box-shadow: 0 4px 14px rgba(168,127,31,0.10), 0 20px 46px rgba(20,26,34,0.10);
}
#faq .faq-q { font-weight: 600; color: #1c222b; font-size: 15.5px; padding: 16px 0; }
#faq .faq-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(168,127,31,0.5); color: #a87f1f;
  font-size: 18px; font-weight: 400; line-height: 1;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
#faq .faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: linear-gradient(160deg, #dfc06a, #a87f1f);
  border-color: #8a6817; color: #1a1206;
}
#faq .faq-a-inner { color: #454e59; line-height: 1.85; font-size: 14px; padding-bottom: 18px; }

/* ── NTTA TRUST STRIP ───────────────────────────────────────── */
.ntta-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(217,183,87,0.10), rgba(217,183,87,0.20) 50%, rgba(217,183,87,0.10));
  border-bottom: 1px solid rgba(168,127,31,0.28);
  padding: 9px 18px; font-size: 13px; color: #38414c; text-align: center;
}
.ntta-strip strong { color: #14181f; }
.ntta-strip .ntta-strip-ico { font-size: 15px; }
.ntta-strip a { color: #8a6817; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ntta-strip a:hover { text-decoration: underline; }

/* ── CONTACT PAGE ───────────────────────────────────────────── */
.cm-card { margin: 0 !important; text-decoration: none; text-align: center; padding: 20px 14px !important;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.cm-card:hover { transform: translateY(-3px); border-color: rgba(176,138,40,0.55);
  box-shadow: 0 6px 14px rgba(20,26,34,0.08), 0 20px 44px rgba(20,26,34,0.10); }
.cm-card .cm-t { font-weight: 600; color: #1c222b; font-size: 14.5px; }
.cm-card .cm-s { font-size: 12.5px; color: #5b6470; word-break: break-word; }
@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .cf-grid { grid-template-columns: 1fr !important; }
}


/* ── ISLAND WATERMARK (section decor) ───────────────────────── */
.iow-host { position: relative; overflow: hidden; }
.iow-watermark {
  position: absolute; z-index: -1; pointer-events: none;
  right: -90px; bottom: -40px; width: 640px; height: 380px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22380%22%20viewBox%3D%220%200%20300%20178%22%3E%3Cpath%20d%3D%22M22.4%2095.2%20L29.1%2093.4%20L30.7%2087.1%20L41.7%2082.7%20L47.9%2072.0%20L48.0%2065.9%20L54.2%2060.9%20L72.2%2061.0%20L100.0%2046.2%20L108.7%2046.8%20L136.5%2036.3%20L142.9%2025.4%20L157.0%2014.0%20L178.0%2015.4%20L193.8%2031.9%20L208.9%2039.1%20L233.2%2040.5%20L257.9%2049.7%20L264.2%2068.2%20L277.6%2077.0%20L265.9%2088.1%20L263.7%2093.6%20L246.4%2096.1%20L233.2%20105.4%20L226.0%20124.9%20L225.5%20139.1%20L220.6%20146.6%20L189.0%20159.2%20L166.4%20164.0%20L159.9%20162.0%20L154.7%20152.5%20L120.1%20123.8%20L91.1%20110.5%20L72.4%2092.3%20L53.3%2091.5%20L26.4%2097.5%20L22.4%2095.2%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23a87f1f%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
@media (max-width: 780px) { .iow-watermark { width: 440px; height: 262px; right: -110px; } }

/* ── TRAILER CARD PRICE — solid black for maximum readability ── */
.trailer-price-num { color: #14181f !important; }
.trailer-price-unit { color: #5b6470 !important; }

/* Keep checkout distraction-free: hide the review float when payment success shows */
body:has(#paymentSuccess[style*="display: flex"]) .review-float,
body:has(#paymentSuccess.open) .review-float { display: none; }

/* ── COMING SOON MINI SPECS ─────────────────────────────────── */
.mini-spec { background: rgba(20,26,34,0.03); border: 1px solid rgba(20,26,34,0.08);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.mini-spec strong { font-size: 13.5px; color: #1c222b; }
.mini-spec span { font-size: 12px; color: #5b6470; line-height: 1.5; }

/* ── FOOTER — cleaned layout ────────────────────────────────── */
.footer-links li { margin-bottom: 9px; line-height: 1.5; }
.fl-soon { display: inline-flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.fl-badge {
  font-size: 9px; letter-spacing: 0.6px; font-weight: 600; white-space: nowrap;
  background: rgba(217,183,87,0.16); color: #d9b757;
  border: 1px solid rgba(217,183,87,0.35);
  padding: 2px 7px; border-radius: 100px;
}
.footer-facts { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-fact {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--light-muted);
  margin-bottom: 9px; line-height: 1.5;
}
.footer-bottom { padding-top: 26px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-legal { text-align: center; margin-top: 22px; }
.fl-links {
  display: flex; justify-content: center; align-items: center;
  gap: 8px 22px; flex-wrap: wrap; margin-bottom: 14px;
}
.fl-links a { font-size: 13px; color: var(--light-muted); text-decoration: none; transition: color .2s; }
.fl-links a:hover { color: var(--amber); }
.fl-copy { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.fl-reg { font-size: 11px; color: var(--muted); line-height: 1.8; opacity: 0.75; }
@media (max-width: 700px) {
  .fl-links { gap: 6px 16px; }
  .footer-review-block { text-align: center; }
}

/* ── BOOKINGS CLOSED — CTA state ────────────────────────────── */
.cta-closed { position: relative; opacity: 0.92; }
.nav-cta.cta-closed::after,
.float-badge a.cta-closed::after {
  content: 'SOON';
  position: absolute; top: -7px; right: -7px;
  background: #a87f1f; color: #fff;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 100px;
  border: 1.5px solid #fff;
}

/* ── FIX: titles that inherited var(--black), which the light theme
      remaps to a near-white page colour — they were rendering
      white-on-white and effectively invisible. ────────────────── */
.enquiry-card-title { color: #a87f1f !important; }
.quote-panel-title  { color: #a87f1f !important; }

/* ── MOBILE HARDENING ───────────────────────────────────────── */
/* Nothing may cause sideways scroll on a phone — decorative layers
   are positioned and can exceed the viewport, so clamp at the root. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Tap targets: Apple and Google both want ~44px minimum */
@media (max-width: 820px) {
  .distance-lookup-btn { min-height: 44px; padding: 12px 18px; }
  .footer-review-block .fr-btn { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; padding: 12px 22px; }
  .review-float { min-height: 44px; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .toggle-btn { min-height: 44px; }
  .form-control, select.form-control { min-height: 46px; font-size: 16px; }
  .sale-btn, .btn-primary { min-height: 46px; }
}

/* iOS zooms the page in when a focused input is under 16px — this stops it */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Tables and wide blocks scroll inside themselves rather than the page */
@media (max-width: 820px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTRAST CORRECTIONS — WCAG AA PASS (v20)
   ---------------------------------------------------------------
   Root cause of every failure fixed here: --green and --red were
   never remapped for the light theme, and several accent colours
   were being used as TEXT when they only ever worked as FILLS.

   Locked rule from here on:
     • gold/green/red as a FILL  → keep the bright value
     • gold/green/red as TEXT    → use the deep value below
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Status colours — deep enough to read on white/tinted panels */
  --green: #15803d;             /* 5.02:1 on white, 4.52:1 on green tint */
  --green-deep: #14532d;        /* headline weight on pale green */
  --green-fill: #15803d;        /* fills — 5.02:1 with white text */
  --red: #b91c1c;               /* 6.47:1 on white */
  --red-fill: #dc2626;

  /* Gold used as TEXT on light surfaces */
  --amber-text: #7a5a12;        /* 6.37:1 on white, 5.58:1 on gold tint */
  --ink-on-gold: #2a1e05;       /* text sitting on a gold fill */
  --ink-on-gold-soft: #3d2c09;
  --btn-on-amber: #ffffff;      /* label on a solid --amber button */
}

/* ── QUOTE PANEL HEADER — was gold text on a gold slab (1.00:1) ── */
.quote-panel-header {
  background: linear-gradient(135deg, #dfc06a 0%, #c9a53c 55%, #b8912c 100%) !important;
}
.quote-panel-title {
  color: var(--ink-on-gold) !important;   /* 6.9:1 */
  -webkit-text-fill-color: var(--ink-on-gold) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.quote-panel-sub {
  color: var(--ink-on-gold-soft) !important;   /* 5.7:1 */
  opacity: 1 !important;
}

/* ── REFUNDABLE DEPOSIT PANEL — was 1.49:1 ─────────────────────── */
.quote-total {
  background: #fdf8ee !important;
  border: 1px solid rgba(168,127,31,0.34) !important;
}
.quote-total-label { color: var(--amber-text) !important; }   /* 6.1:1 */
.quote-total-value { color: #14181f !important; }
.quote-deposit-note {
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 3px;
  max-width: 34ch;
  color: var(--amber-text) !important;                        /* 6.1:1 */
}

/* ── QUOTE BODY — gold values were 3.67:1 ──────────────────────── */
.quote-line-value.amber { color: var(--amber-text) !important; }
.quote-line-value.green { color: var(--green) !important; }
#q-total, #q-due-today { color: #14181f !important; }

/* ── DELIVERY "FREE" BADGE — green as fill, white as text ──────── */
.delivery-free-badge {
  background: var(--green-fill) !important;
  border: 1px solid var(--green-fill) !important;
  color: #ffffff !important;                                  /* 4.9:1 */
}
.delivery-launch-sub {
  color: var(--green) !important;                             /* 5.0:1 */
  opacity: 1 !important;
  font-weight: 600;
}
.delivery-strikethrough { color: #6b7480 !important; }

/* ── LAUNCH OFFER / LONG-STAY PANELS ───────────────────────────── */
.delivery-launch-text strong,
#q-longstay > div:first-child,
#bf-longstay-msg { color: var(--green-deep) !important; }
#q-longstay { background: #f1f8f3 !important; border-color: rgba(31,138,76,0.35) !important; }
#q-longstay-mail {
  background: var(--green-fill) !important;
  border-color: var(--green-fill) !important;
  color: #ffffff !important;
}

/* ── ACCENT PILLS — gold text on gold tint was 3.22:1 ──────────── */
.section-tag, .heroX-kicker { color: var(--amber-text) !important; }
.price-pill { color: var(--amber-text) !important; }

/* Card titles that took the same gold-on-white 3.67:1 hit */
.enquiry-card-title { color: var(--amber-text) !important; }

/* ── SOLID GOLD BUTTONS — var(--black) resolves to near-WHITE here ─ */
.quote-body button[onclick*="applyCoupon"],
button[style*="background: var(--amber)"] {
  background: var(--amber-dark) !important;
  color: #ffffff !important;                                  /* 5.2:1 */
}

/* ── PLACEHOLDERS — was 3.14:1 ─────────────────────────────────── */
::placeholder { color: #6b7480 !important; opacity: 1; }

/* ── FOOTER — stays dark, but inherited the LIGHT muted values,
      putting dark-grey text on near-black (2.09:1) on every page ─ */
footer {
  --muted: #98a1ad;             /* 6.8:1 on the footer */
  --light-muted: #aeb6c0;       /* 8.6:1 */
  --amber: #d9b757;
}
.fl-reg { opacity: 1 !important; color: #98a1ad !important; }
.footer-fact, .fl-links a { color: #aeb6c0 !important; }
.fl-copy { color: #98a1ad !important; }
.fl-links a:hover { color: #d9b757 !important; }

/* ── ADMIN + MODALS stay dark: re-pin the bright status colours ── */
#adminPanel, #adminGate, [id$="Modal"], [id$="modal"], #paymentSuccess {
  --green: #22c55e;
  --green-deep: #22c55e;
  --green-fill: #22c55e;
  --red: #ef4444;
  --red-fill: #ef4444;
  --amber-text: #f5a623;
  --btn-on-amber: #111111;
}

/* ── FOCUS VISIBILITY — keyboard users need this on every control ─ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #8a6817 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── SITEWIDE: GOLD USED AS TEXT ────────────────────────────────
   --amber (#a87f1f) is correct as a FILL but only 3.67:1 as text
   on white. Every text use is remapped to --amber-text (6.37:1).
   Inside the admin/modal scope --amber-text is re-pinned to the
   bright value, so the dark cockpit is untouched. ─────────────── */
.nav-logo-sub,
.nav-links a:hover,
.nav-links a.active,
.hero-tag,
.how-step-num,
.checkbox-label a,
.docs-list li::before,
.faq-q:hover,
.footer-links a:hover,
.footer-legal a:hover,
.content-page h3,
.distance-result.paid,
.brand-word em,
.ntta-strip a,
.heroX-sub b {
  color: var(--amber-text) !important;
}

/* Inline gold text anywhere (attribute match), admin-safe via the var */
[style*="color:var(--amber)"],
[style*="color: var(--amber)"],
[style*="color:#f5a623"],
[style*="color: #f5a623"] {
  color: var(--amber-text) !important;
}

/* Footer keeps its own gold — it is a dark surface */
footer [style*="color:var(--amber)"],
footer [style*="color: var(--amber)"],
footer .footer-col-title,
footer .footer-links a:hover,
footer .footer-legal a:hover {
  color: #d9b757 !important;
}

/* Review stars stay bright — they are a graphic, not body copy */
.review-stars { color: #a8781a !important; }