/* F&G Detail — site-level overrides on top of design system. */

:root {
  --accent: var(--fg-steel);
  --hairline: var(--fg-line);
  --container: 1280px;
}

html, body { margin: 0; padding: 0; background: var(--fg-paper); }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }

/* Headings inherit color so dark sections look right */
h1, h2, h3, h4, h5, h6 { color: inherit; }

/* Standard container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* Section padding */
.section { padding: 128px 32px; }
.section--tight { padding: 96px 32px; }
@media (max-width: 900px) {
  .section, .section--tight { padding: 72px 20px; }
  .container { padding: 0 20px; }
}

/* Eyebrow with a hairline mark */
.eyebrow-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent);
}
.eyebrow-mark::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: currentColor;
}
.eyebrow-mark--chrome { color: var(--fg-chrome); }

/* Big editorial headlines */
.display-xl {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(56px, 9.5vw, 144px); line-height: 0.9;
  letter-spacing: -0.025em; text-transform: uppercase;
  text-wrap: balance; margin: 0;
}
.display-lg {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 5.6vw, 76px); line-height: 0.96;
  letter-spacing: -0.018em; text-transform: uppercase;
  text-wrap: balance; margin: 0;
}
.display-md {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.04;
  letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0;
}

/* Button system */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: all 200ms var(--ease-out);
  letter-spacing: 0.01em;
}
.btn--primary { background: var(--fg-paper); color: var(--fg-ink); box-shadow: 0 14px 32px rgba(10,27,24,.24); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(10,27,24,.32); }
.btn--ink { background: var(--fg-ink); color: var(--fg-paper); }
.btn--ink:hover { background: var(--fg-ink-3); }
.btn--ghost-light { background: transparent; color: var(--fg-paper); border-color: rgba(245,245,242,.35); }
.btn--ghost-light:hover { border-color: var(--fg-paper); background: rgba(255,255,255,.04); }
.btn--ghost-ink { background: transparent; color: var(--fg-ink); border-color: var(--fg-line-2); }
.btn--ghost-ink:hover { border-color: var(--fg-ink); }

.btn--sm { padding: 10px 16px; font-size: 13px; }
.btn--lg { padding: 16px 26px; font-size: 15px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-arrow i { transition: transform 200ms var(--ease-out); }
.link-arrow:hover i { transform: translateX(3px); }

/* Hairline divider used between editorial sections */
.rule { height: 1px; background: var(--fg-line); border: 0; margin: 0; }
.rule--ink { background: rgba(198,203,199,.16); }

/* "Stamp" — metadata caption under photos / on hero */
.stamp {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.stamp--chrome { color: var(--fg-chrome); }

/* Numeric / mono */
.num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Reveal on scroll (subtle) */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* Image card */
.imgcard {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--fg-ink-2);
}
.imgcard img { width: 100%; height: 100%; object-fit: cover; }

/* Caption stamp overlay on dark photos */
.imgcard__cap {
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  display: flex; justify-content: space-between; align-items: end; gap: 12px;
  color: var(--fg-paper);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.imgcard__cap-l {
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.imgcard__cap-r {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.78);
}

/* Inputs on Ink */
.input-ink {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--fg-paper);
  font-family: var(--font-body); font-size: 14px;
  padding: 14px 16px; border-radius: 10px; width: 100%;
  outline: none; transition: border-color 200ms;
}
.input-ink:focus { border-color: var(--fg-chrome); }
.input-ink::placeholder { color: rgba(198,203,199,.55); }

/* FAQ disclosure */
details.faq {
  border-top: 1px solid var(--fg-line);
  padding: 28px 0;
}
details.faq:last-of-type { border-bottom: 1px solid var(--fg-line); }
details.faq > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.005em; color: var(--fg-ink);
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-plus {
  width: 22px; height: 22px; position: relative; flex-shrink: 0;
  color: var(--fg-mute); transition: transform 240ms var(--ease-out), color 240ms;
}
details.faq > summary .faq-plus::before,
details.faq > summary .faq-plus::after {
  content: ""; position: absolute; background: currentColor;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
details.faq > summary .faq-plus::before { width: 16px; height: 1.5px; }
details.faq > summary .faq-plus::after { width: 1.5px; height: 16px; transition: opacity 200ms; }
details.faq[open] > summary .faq-plus::after { opacity: 0; }
details.faq[open] > summary .faq-plus { color: var(--fg-ink); }
details.faq > div.faq-body {
  margin-top: 16px;
  max-width: 760px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--fg-fg-2);
}

/* Marquee/strip */
.brand-strip {
  display: flex; gap: 56px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.brand-strip__item {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-ink);
  opacity: 0.78;
}

/* Responsive grids */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .hide-mobile { display: none !important; }
  .display-xl { font-size: 56px !important; }
  .display-lg { font-size: 40px !important; }
}

/* ============================================================
   Mobile pass — stacks all 2-column section layouts, tightens
   spacing and type for small screens.
   ============================================================ */
@media (max-width: 820px) {
  /* Section padding */
  .section, .section--tight { padding: 56px 20px !important; }

  /* Display type scale on mobile */
  .display-xl { font-size: clamp(40px, 11vw, 56px) !important; line-height: .96 !important; }
  .display-lg { font-size: clamp(32px, 7vw, 40px) !important; }
  .display-md { font-size: clamp(22px, 5vw, 28px) !important; }

  /* Stack ALL grid-template-columns in sections we know about.
     We target by id/structure to avoid bleeding into the design system. */
  #top > div,
  #book > div.container,
  #book .container > div,
  #faq > div.container,
  #reviews > div.container > div,
  #work > div.container > div,
  #packages > div.container > div,
  #root > section.section > div.container[style*="grid-template-columns"],
  footer > div.container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }

  /* Featured Work pair: stack the spread + tile column */
  #work > div.container > div[style*="grid-template-columns: 1.6fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Booking form inner 2-col → 1-col */
  #book .container > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Booking sidebar — drop sticky on mobile */
  #book aside[style*="sticky"] { position: static !important; }

  /* FAQ — drop the sticky title behavior */
  #faq [style*="sticky"] { position: static !important; }

  /* Packages: stop the "popular" card from translating up on mobile */
  #packages article[style*="translateY"] { transform: none !important; }

  /* Vehicle-type selector horizontal scroll on tight screens */
  #packages [style*="border-radius: 999"] { flex-wrap: wrap; }

  /* Hero: shrink padding, lighten the left vignette */
  #top { min-height: auto !important; }
  #top > div[style*="z-index: 2"] { padding: 120px 20px 72px !important; gap: 24px !important; }

  /* Hero status strip → 2 columns instead of 4 */
  #top > div[style*="border-top"] > div { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }

  /* Footer top: lift CTA back below the wordmark */
  footer .btn--lg { padding: 12px 18px !important; font-size: 13px !important; }
  footer a[href^="tel:"] { justify-content: flex-start !important; }

  /* Footer columns */
  footer .container > div[style*="repeat(3"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Nav: hide the desktop link row on mobile (logo + CTA stays) */
  .nav-links { display: none !important; }
  header > div { gap: 12px !important; padding: 14px 20px !important; }

  /* Testimonials: smaller card padding */
  #reviews figure { padding: 24px !important; min-height: 0 !important; }
}

@media (max-width: 480px) {
  .btn--lg { padding: 14px 20px !important; font-size: 14px !important; }
  .display-xl { font-size: 40px !important; }
}