/* ============================================================
   TransfersX — "Precision" theme (black / white / light blue)
   Loaded AFTER qlx-theme.css (and after per-page inline styles)
   on every live page so it wins the cascade.
   - Remaps the legacy quiet-luxury variables so old markup
     inherits the new palette without surgery.
   - One colour per line: heading <em> accents inherit colour.
   - Space Grotesk display, Manrope body, Space Mono data.
   ============================================================ */
:root{
  --ink:#0A0B0D; --ink-2:#141619;
  --paper:#FAFAF8; --white:#FFFFFF;
  --grey:#8A8F98;
  --line:rgba(10,11,13,.10); --line-invert:rgba(250,250,248,.14);
  --sky:#8EC5F2; --sky-strong:#4A9FE8; --sky-wash:#EAF3FB;
  --ease:cubic-bezier(.22,1,.36,1);

  /* legacy variable remap — quiet-luxury names → Precision values */
  --black-green:#0A0B0D; --green-deep:#141619; --green:#141619; --green-mid:#23262B;
  --brass:#4A9FE8; --brass-light:#8EC5F2; --brass-pale:#8EC5F2;
  --bone:#FAFAF8; --ink-soft:rgba(10,11,13,.62);
}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,.display,.sec-head h2,.phero h1,.hero-tagline,.cta h2,.match h2,
.tour h3,.fcard-body h3,.tcard h3,.tour-c h3{
  font-family:'Space Grotesk','Manrope',system-ui,sans-serif;
  font-weight:600;letter-spacing:-.03em;
}
.display,.phero h1{font-weight:500}
/* one colour per line — accent words inherit; emphasis via weight only */
h1 em,h2 em,h3 em,.display em,.phero h1 em,.dark .display em,
h1 span[style*="color"],h2 span[style*="color"],h3 span[style*="color"]{
  color:inherit !important;font-style:normal;font-weight:inherit;
}

/* data voice — Space Mono, uppercase, tabular */
.eyebrow,.hero-eyebrow,.fcard-tag,.tour-eyebrow,.tour-card-sub,.foot-col h4,.kicker{
  font-family:'Space Mono',monospace;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.eyebrow{color:var(--grey)}
.phero .eyebrow,.hero-eyebrow{color:var(--grey)}
.tour-card-sub{color:var(--grey);font-weight:400;font-size:.72rem}
.fcard-price,.stat-n,.stat b,.price,.foot-base{font-variant-numeric:tabular-nums}
.fcard-price{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:-.04em;font-size:15px}
.fcard-price small{display:block;white-space:nowrap;font-family:'Manrope',sans-serif}

/* ── Surfaces ───────────────────────────────────────────── */
/* no body background here — index.html's fixed hero photo (z-index:-2)
   must show through the body; page/theme CSS already sets its own bg */
body{color:var(--ink)}
.section-light{background:var(--paper);color:var(--ink)}
.section-bone{background:var(--white);color:var(--ink)}
.section-deep{background:linear-gradient(180deg,var(--ink),var(--ink-2));color:var(--paper)}
.foot{background:var(--ink)}

/* ── Cards ──────────────────────────────────────────────── */
.section-light .fcard,.section-bone .fcard,
.section-light .tcard,.section-bone .tcard{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.fcard,.tcard{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.fcard:hover,.tcard:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(10,11,13,.08);
  border-color:rgba(74,159,232,.35);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary{background:var(--sky);color:var(--ink)}
.btn-primary:hover{background:var(--sky-strong);color:var(--white);box-shadow:0 14px 30px rgba(74,159,232,.3)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-2)}
.nav-reserve:hover{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.foot-ig{color:var(--sky);border-color:rgba(142,197,242,.3)}
.foot-ig:hover{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.fl-arrow{color:var(--sky);border-color:rgba(142,197,242,.35)}
.fl-arrow:hover:not(:disabled){background:var(--sky);color:var(--ink);border-color:var(--sky)}
.fl-dot.active{background:var(--sky)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sky-strong);outline-offset:2px}

/* ── Imagery — grayscale at rest, colour on hover ───────── */
.fcard-img img,.tcard img,.im img,.tour-img,.gcard img,.tour-card-img img,
.svc-img img,.bento img,.city-card img,.img img,.phero-bg,.hero-photo{
  filter:grayscale(1);transition:filter .6s var(--ease),transform .7s var(--ease);
}
.fcard:hover .fcard-img img,.tcard:hover img,.im:hover img,
.tour:hover .tour-img,.gcard:hover img,.svc-img:hover img,
.tour-card:hover .tour-card-img img,.city-card:hover img,.img:hover img{filter:grayscale(.1)}
/* never grayscale: logos, icons, maps, booking UI */
img[src*="logo"],.nav-logo img,.foot-brand img,svg,img[alt*="map" i],
#haloxWidget img,.gm-style img{filter:none !important}

/* ── Film grain (3%) ────────────────────────────────────── */
body::after{
  content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.03;
  background-image: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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Fleet cards: card → detail page, Book → flow (overlay link) ── */
.fcard{position:relative}
.fcard-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.fcard-cta .fcard-book{position:relative;z-index:3;text-decoration:none;color:var(--paper)}
.fcard-cta .fcard-book:hover{color:var(--sky)}

/* ── Typed wordmark: single colour + sky brand dot after it ── */
.nav-logo sup,.foot-brand .fl sup{color:inherit}
.nav-logo sup::after,.foot-brand .fl sup::after{
  content:'';display:inline-block;width:.38em;height:.38em;border-radius:50%;
  background:var(--sky-strong);margin-left:4px;vertical-align:baseline;
}
.nav-logo,.foot-brand .fl{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){
  .fcard,.tcard,.fcard-img img,.tcard img{transition:none}
}