/* ===============================================
   ISUZU MIGORI × SMARTLAKE MOTORS — DESIGN SYSTEM

   Identity: Isuzu red for action, Smartlake "lake navy"
   for depth, Smartlake gold as the signature accent
   (the slanted gold stripe). Crisp 6px corners,
   condensed uppercase headlines, Manrope body copy.

   Load order:
   - index.html:  bookingfrm → theme → icons → header → footer → styles
   - inner pages: page.css → header → footer → theme → icons
     (theme after page CSS so its tokens re-skin them)
   =============================================== */

/* ===============================================
   FONTS — self-hosted (Latin subset from Google Fonts, SIL OFL)
   Headline faces use font-display: block, so titles are drawn once in
   the right font instead of flashing a fallback first; pages preload
   the main files so the wait is a few frames. Manrope (body copy)
   swaps, onto a fallback sized to match it so text doesn't jump.
   =============================================== */
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 500;
  font-display: block;
  src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-display: block;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-display: block;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  font-display: block;
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-weight: 700 900;
  font-display: block;
  src: url('../fonts/big-shoulders-display.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope.woff2') format('woff2');
}
/* Arial resized to Manrope's width and line metrics */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 102.75%;
  ascent-override: 104.1%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

:root {
  /* ── Palette ───────────────────────────── */
  --brand-red:      #E30613;
  --brand-red-dark: #B5040F;
  --navy:           #0B1D2E;
  --navy-2:         #132B42;
  --navy-3:         #1C3A57;
  --gold:           #C9A23F;
  --gold-soft:      #F3EAD3;
  --ink:            #18222D;
  --ink-muted:      #5C6773;
  --panel:          #F3F4F6;
  --panel-soft:     #F8F9FA;
  --line:           #E3E6EA;

  /* ── Type ──────────────────────────────── */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-text:    'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Shape & rhythm ────────────────────── */
  --radius:       6px;
  --radius-lg:    10px;
  --topbar-h:     38px;
  --header-h:     76px;
  --header-total: calc(var(--topbar-h) + var(--header-h));
  --container:    1280px;
  --gutter:       clamp(16px, 4vw, 40px);
  --section-y:    clamp(64px, 9vw, 112px);
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Legacy token names used by page stylesheets ── */
  --isuzu-red:         var(--brand-red);
  --isuzu-red-dark:    var(--brand-red-dark);
  --isuzu-red-light:   #FF2B36;
  --isuzu-black:       var(--ink);
  --isuzu-dark:        var(--navy);
  --isuzu-gray:        var(--ink-muted);
  --isuzu-gray-light:  #98A1AB;
  --isuzu-gray-lt:     #98A1AB;
  --isuzu-light-gray:  var(--panel-soft);
  --isuzu-white:       #FFFFFF;
  --border-color:      var(--line);
  --white:             #FFFFFF;
  --gray-50:           var(--panel-soft);
  --gray-100:          var(--panel);
  --gray-200:          #E9ECEF;
  --gray-300:          var(--line);
  --gray-800:          var(--ink);
  --gray-900:          var(--navy);
  --font-primary:      var(--font-text);
  --font-secondary:    var(--font-display);
  --section-padding:   var(--section-y);
  --container-padding: var(--gutter);
  --red:        var(--brand-red);
  --red-dark:   var(--brand-red-dark);
  --black:      var(--navy);
  --dark:       var(--navy);
  --gray:       var(--ink-muted);
  --gray-light: #98A1AB;
  --bg:         var(--panel-soft);
  --border:     var(--line);
  --font-head:  var(--font-display);
  --font-body:  var(--font-text);
  --r-sm:       var(--radius);
  --r-md:       var(--radius);
  --r-lg:       var(--radius-lg);
}

@media (max-width: 1100px) {
  :root { --topbar-h: 0px; }
}
@media (max-width: 560px) {
  :root { --header-h: 66px; }
}

/* ===============================================
   BASE
   =============================================== */
*, *::before, *::after { box-sizing: border-box; }

/* No blue flash when tapping links/buttons on phones */
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: #FFFFFF;
  overflow-x: clip; /* clip (not hidden) keeps the sticky header working */
  min-width: 320px;
}

/* Headlines: condensed and confident */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  letter-spacing: normal !important;
  line-height: 1.08;
}
h1, h2 { font-weight: 800 !important; }
h3     { font-weight: 700 !important; }
h4, h5, h6 { font-weight: 600 !important; }

::selection { background: var(--brand-red); color: #FFFFFF; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===============================================
   SIGNATURE: gold slanted stripe + numbered eyebrow
   =============================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 5px;
  background: var(--gold);
  transform: skewX(-24deg);
}
.eyebrow b { color: var(--ink-muted); font-weight: 600; }
.on-dark .eyebrow { color: #FFFFFF; }
.on-dark .eyebrow b { color: rgba(255,255,255,.55); }

.stripe {
  display: inline-block;
  width: 56px;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-red) 0 60%, var(--gold) 60% 100%);
  transform: skewX(-24deg);
}

/* ===============================================
   BUTTONS
   =============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn .fi { font-size: 1.15rem; transition: transform .25s var(--ease); }
.btn:hover .fi-tr-arrow-small-right { transform: translateX(4px); }

.btn--red       { background: var(--brand-red); color: #FFFFFF; }
.btn--red:hover { background: var(--brand-red-dark); }
.btn--navy       { background: var(--navy); color: #FFFFFF; }
.btn--navy:hover { background: var(--navy-3); }
.btn--ghost       { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn--light       { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-red);
  text-decoration: none;
}
.link-arrow .fi { transition: transform .25s var(--ease); }
.link-arrow:hover .fi { transform: translateX(4px); }

/* Re-skin the page stylesheets' own button classes */
.btn-primary, .btn-secondary, .btn-darkfill, .btn-outline, .btn-ghost-offer,
.btn-primary-offer, .btn-load-more, .btn-track, .btn-add-cart,
.cta-btn, .read-more-btn, .cta__btn, .btn-submit,
.service-cta, .card-cta, .story__cta, .newsletter-submit {
  border-radius: var(--radius) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.btn-primary, .btn-primary-offer, .cta-btn.primary, .btn-add-cart, .btn-submit,
.service-cta, .story__cta {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-primary-offer:hover, .cta-btn.primary:hover,
.btn-add-cart:hover, .btn-submit:hover:not(:disabled),
.service-cta:hover, .story__cta:hover {
  background: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  transform: none !important;
}

/* Page stylesheets' eyebrow labels → signature eyebrow */
.section-label, .section-tag, .hero__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--brand-red) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.section-label::before, .section-tag::before, .hero__eyebrow::before {
  content: '' !important;
  display: block !important;
  width: 30px !important;
  height: 5px !important;
  border-radius: 0 !important;
  background: var(--gold) !important;
  transform: skewX(-24deg);
}

/* ===============================================
   SECTION HEADINGS (shared)
   =============================================== */
.sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head.center { text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sec-title {
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.on-dark .sec-title { color: #FFFFFF; }
.sec-lead {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: 1rem;
  color: var(--ink-muted);
}
.sec-head.center .sec-lead { margin-inline: auto; }
.on-dark .sec-lead { color: rgba(255,255,255,.72); }

/* ===============================================
   INNER PAGE HERO — left-aligned, navy wash, breadcrumb
   =============================================== */
body.inner .page-hero,
body.inner > section.hero {
  position: relative;
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(400px, 62vh, 600px);
  padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 7vw, 80px) !important;
  display: flex;
  align-items: flex-end;
  text-align: left !important;
  background-size: cover !important;
  background-position: center !important;
  isolation: isolate;
}
body.inner .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11,29,46,.92) 0%, rgba(11,29,46,.65) 45%, rgba(11,29,46,.1) 100%),
    linear-gradient(0deg, rgba(11,29,46,.5) 0%, rgba(11,29,46,0) 40%);
}
body.inner .page-hero::after,
body.inner > section.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  z-index: 2;
  background: linear-gradient(90deg, var(--brand-red) 0 70%, var(--gold) 70% 100%);
}
body.inner .page-hero .container {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100% !important;
  max-width: var(--container) !important;
  padding: 0 var(--gutter) !important;
  margin-inline: auto !important;
}
body.inner .page-hero h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 5.5rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: .95 !important;
  color: #FFFFFF !important;
  margin: 0 0 16px !important;
}
body.inner .page-hero p {
  max-width: 560px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  line-height: 1.6;
  color: rgba(255,255,255,.85) !important;
  margin: 0 !important;
}

/* Breadcrumb */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}
.crumbs a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: var(--gold); }
.crumbs .fi { font-size: .9rem; }
.page-intro .crumbs { color: var(--ink-muted); }
.page-intro .crumbs a { color: var(--ink); }

/* Policy pages — light intro */
body.inner .page-intro {
  padding: clamp(48px, 7vw, 80px) 0 48px !important;
  margin-top: 0 !important;
  background: var(--panel) !important;
  text-align: left !important;
  border-bottom: 6px solid var(--navy);
}
body.inner .page-intro .intro-inner { margin: 0 !important; text-align: left !important; }
body.inner .page-intro h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
  color: var(--ink) !important;
  text-transform: uppercase;
}

/* ===============================================
   INNER PAGE — shared component re-skin
   =============================================== */
body.inner .section-header h2,
body.inner .intro-content h2,
body.inner .cta-content h2,
body.inner .section-title {
  font-size: clamp(2.25rem, 4.4vw, 3.4rem) !important;
  text-transform: uppercase;
  color: var(--ink) !important;
}

body.inner .service-item,
body.inner .process-step,
body.inner .testimonial-card,
body.inner .faq-item,
body.inner .blog-card,
body.inner .offer-card,
body.inner .product-card,
body.inner .value-card,
body.inner .team-card .card-front,
body.inner .policy-section,
body.inner .featured-offer {
  border-radius: var(--radius-lg) !important;
}
body.inner .service-item,
body.inner .blog-card,
body.inner .offer-card,
body.inner .testimonial-card,
body.inner .value-card {
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  position: relative;
}
body.inner .service-item:hover,
body.inner .blog-card:hover,
body.inner .offer-card:hover,
body.inner .value-card:hover {
  border-color: var(--brand-red) !important;
  box-shadow: 0 18px 40px rgba(11, 29, 46, .08) !important;
}

/* Closing CTA strips → navy band */
body.inner .contact-cta,
body.inner .team-cta,
body.inner .offers-cta-banner {
  background: var(--navy) !important;
  color: #FFFFFF;
  position: relative;
}
body.inner .contact-cta::before,
body.inner .team-cta::before,
body.inner .offers-cta-banner::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-red) 0 70%, var(--gold) 70% 100%);
}
body.inner .contact-cta h2,
body.inner .team-cta h2,
body.inner .offers-cta-banner h2 { color: #FFFFFF !important; }
body.inner .contact-cta p,
body.inner .team-cta p,
body.inner .offers-cta-banner p { color: rgba(255,255,255,.78) !important; }

/* ===============================================
   SCROLL REVEAL (shared)
   =============================================== */
/* Slide-up only (no fade): items stay fully visible and glide into place.
   A keyframe animation (not a transition) so it never clashes with a
   component's own hover transitions. fill-mode "backwards" applies the
   start frame during the stagger delay, then hands control back to the
   element's normal styles, so hover lifts keep working afterwards.
   animations.js staggers items that enter together via animation-delay. */
.reveal-up { transform: translateY(36px) scale(.985); }
.reveal-up.is-visible {
  transform: none;
  animation: revealUp 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes revealUp {
  from { transform: translateY(36px) scale(.985); }
  to   { transform: none; }
}

/* ── Page-to-page transitions ──
   Cross-document View Transitions: the page content fades across while
   the header and floating buttons stay put. Browsers without support
   simply navigate as normal. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.header        { view-transition-name: site-header; }
.float-actions { view-transition-name: float-actions; }
::view-transition-old(root) { animation: vtPageOut .18s ease-out both; }
::view-transition-new(root) { animation: vtPageIn .34s var(--ease) both; }
::view-transition-group(site-header) { animation-duration: .3s; }
@keyframes vtPageOut { to { opacity: 0; } }
@keyframes vtPageIn {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal-up { transform: none; }
  .reveal-up.is-visible { animation: none; }
}

/* ===============================================
   NO COLOURED ACCENT EDGES ON CARDS & CALLOUTS
   One place to keep cards clean across every page
   (incl. the article components ported from Smartlake).
   Full-width section dividers are intentionally kept.
   =============================================== */
.partner-tile,
.fleet-points li,
.sv-steps li,
.sv-callout,
.tab-panel-link,
.team-commitment,
.callout,
.tip-box,
.warning-box,
.info-box,
.check-card-header,
.redflag-list li,
.warning-card-header,
.part-card h3,
.look-for-strip,
.look-for-strip.warn,
.flood-warning-box,
.pull-quote,
.warn {
  border-left: 0 !important;
  border-top: 0 !important;
}
.tip-box, .warning-box, .info-box, .callout, .team-commitment,
.sv-callout, .tab-panel-link, .fleet-points li, .sv-steps li,
.redflag-list li, .look-for-strip, .flood-warning-box, .pull-quote {
  border-radius: var(--radius) !important;
}
.part-card h3 { padding-left: 0 !important; }
.booking-card::before,
.sv-book::before,
.post-cta::before { display: none !important; }