/* ============================================================
   JEWELL TYRES - BASE
   ============================================================ */

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--jt-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--jt-black);
  background: var(--jt-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display, .display-xl {
  font-family: var(--jt-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.display-xl { font-size: clamp(2.5rem, 7vw, var(--fs-display-xl)); }
.display { font-size: clamp(2rem, 5vw, var(--fs-display)); }

h1.heading, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
h2.heading, .h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
h3.heading, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); }
h4.heading, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--jt-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--jt-earth); }

strong { font-weight: 700; }

/* Mono / technical */
.mono {
  font-family: var(--jt-mono);
  letter-spacing: var(--ls-mono);
  font-size: 0.95em;
}

/* Eyebrow - small caps label */
.eyebrow {
  font-family: var(--jt-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--jt-stone);
}

.eyebrow--yellow { color: var(--jt-yellow-dark); }
.eyebrow--inverse { color: var(--jt-yellow); }

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }

@media (min-width: 768px) {
  .container { padding-left: var(--s-7); padding-right: var(--s-7); }
}

.section { padding-block: var(--s-8); }
.section--lg { padding-block: var(--s-9); }
.section--sm { padding-block: var(--s-6); }

@media (min-width: 768px) {
  .section { padding-block: var(--s-9); }
  .section--lg { padding-block: var(--s-10); }
}

/* Grounds */
.ground--paper { background: var(--jt-paper); color: var(--jt-black); }
.ground--sand { background: var(--jt-sand); color: var(--jt-black); }
.ground--black {
  background: var(--jt-black);
  color: var(--jt-bone);
  position: relative;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(254,192,19,0.04) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0px, transparent 24px, rgba(255,255,255,0.015) 24px, rgba(255,255,255,0.015) 25px);
}
.ground--black .eyebrow { color: var(--jt-yellow); }
.ground--black a { color: var(--jt-bone); }
.ground--black a:hover { color: var(--jt-yellow); }
.ground--yellow { background: var(--jt-yellow); color: var(--jt-black); }
.ground--earth {
  background: var(--jt-earth);
  color: var(--jt-bone);
  background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 32px, rgba(0,0,0,0.08) 32px, rgba(0,0,0,0.08) 33px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.85rem 1.7rem;
  font-family: var(--jt-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--jt-yellow);
  color: var(--jt-black);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn:hover {
  background: var(--jt-black);
  color: var(--jt-yellow);
}
.btn--inverse {
  background: var(--jt-black);
  color: var(--jt-yellow);
  border-color: transparent;
}
.btn--inverse:hover {
  background: var(--jt-yellow);
  color: var(--jt-black);
}
.btn--ghost {
  background: transparent;
  color: var(--jt-black);
  border-color: var(--jt-black);
}
.btn--ghost:hover {
  background: var(--jt-black);
  color: var(--jt-yellow);
}

.btn::after {
  content: '→';
  font-family: var(--jt-mono);
  margin-left: var(--s-1);
  transition: transform var(--t-base);
}
.btn:hover::after { transform: translateX(3px); }

/* Rules */
.rule { display: block; height: 1px; background: var(--jt-rule-light); border: 0; margin: 0; }
.rule--dark { background: var(--jt-rule); }
.rule--yellow { background: var(--jt-yellow); height: 3px; }
.rule--vertical { width: 1px; height: 100%; background: var(--jt-rule-light); }

/* Tags / chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--jt-bone);
  color: var(--jt-black);
  border: 1px solid var(--jt-rule-light);
  border-radius: var(--radius-1);
}
.tag--yellow { background: var(--jt-yellow); border-color: var(--jt-yellow-dark); }
.tag--black { background: var(--jt-black); color: var(--jt-yellow); border-color: var(--jt-black); }

/* Utility */
.uppercase { text-transform: uppercase; }
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* Visually hidden */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   HERO ANIMATION - JT
   One orchestrated page-load reveal. Honours prefers-reduced-motion.
   ============================================================ */

@keyframes jt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jt-rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero { animation: jt-fade-in 400ms ease-out both; }
.hero__meta { animation: jt-rise-in 500ms ease-out 200ms both; }
.hero__display { animation: jt-rise-in 600ms ease-out 350ms both; }
.hero__sub { animation: jt-rise-in 500ms ease-out 500ms both; }
.hero__actions { animation: jt-rise-in 500ms ease-out 650ms both; }
.hero__side { animation: jt-rise-in 600ms ease-out 800ms both; }

/* ============================================================
   ACCESSIBILITY - prefers-reduced-motion
   WCAG 2.2 AA. Disables all transitions and animations for
   users who have requested reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Balanced reduced-motion policy: tame large, looping and parallax ANIMATIONS
     (the vestibular-triggering kind), but keep gentle UI TRANSITIONS - hover
     colour/opacity, the header inversion, buttons, cards, page cross-fade - so
     navigating still feels smooth rather than snapping instantly. */
  *:not(.trust-strip__track):not(.jt-clients__track):not(.jt-brands__track):not(.page-hero__slide):not(.page-hero__media--kb),
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* The brand marquees are explicitly excluded - the design only works
     when they roll. The brand voice IS the motion. */
  .trust-strip__track,
  .jt-clients__track,
  .jt-brands__track {
    animation-duration: 55s !important;
    animation-iteration-count: infinite !important;
  }
  /* The Brands hero Ken Burns is slow and subtle - keep it rolling. */
  .page-hero__media--kb {
    animation-duration: 26s !important;
    animation-iteration-count: infinite !important;
  }
  /* Hero carousel keeps its gentle opacity crossfade (zoom/pan is
     separately disabled in components.css); a hard cut is jarring. */
  .page-hero__slide { transition-duration: 0.8s !important; animation: none !important; }
}


/* ============================================================
   JEWELL - UX (Section 5): reveal, hover, cards
   ============================================================ */
.jt-reveal{opacity:0;transform:translateY(32px);transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1),transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.jt-reveal.is-visible{opacity:1;transform:translateY(0);}
.jt-stagger>*{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.jt-stagger.is-visible>*:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0ms;}
.jt-stagger.is-visible>*:nth-child(2){opacity:1;transform:translateY(0);transition-delay:100ms;}
.jt-stagger.is-visible>*:nth-child(3){opacity:1;transform:translateY(0);transition-delay:200ms;}
.jt-stagger.is-visible>*:nth-child(4){opacity:1;transform:translateY(0);transition-delay:300ms;}
@media(prefers-reduced-motion:reduce){.jt-reveal,.jt-stagger>*{opacity:1;transform:none;transition:none;}}

a[href*="buy"],a[href*="contact"],button,[class*="btn"]{transition:transform 0.15s ease,box-shadow 0.15s ease;}
a[href*="buy"]:hover,a[href*="contact"]:hover,button:hover,[class*="btn"]:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(254,192,19,0.3);}

#jt-grid>div{transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),box-shadow 0.2s cubic-bezier(0.16,1,0.3,1),border-color 0.2s ease;}
#jt-grid>div:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,11,11,0.12);border-color:#FEC013;}

/* ============================================================
   ACCESSIBILITY - focus rings (Section A3)
   ============================================================ */
:focus-visible {
  outline: 2px solid #FEC013;
  outline-offset: 3px;
}
.jt-skiplink {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 12px 24px;
  background: #FEC013;
  color: #0B0B0B;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  z-index: 9999;
}
.jt-skiplink:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
}
.jt-skiplink:focus-visible { outline: 3px solid #0B0B0B; outline-offset: 0; }

/* ============================================================
   ACCESSIBILITY - touch targets (Section A7)
   ============================================================ */
a, button, select, input[type="submit"], input[type="button"] {
  min-height: 44px;
}

/* ============================================================
   PERFORMANCE - will-change hints (Section C4)
   ============================================================ */
/* Blanket will-change hints removed: they force a permanent GPU layer per
   element (every nav/header/reveal/card) and width/background-color aren't
   compositable anyway. Browsers auto-promote elements while they animate. */

/* ============================================================
   MOBILE - overflow + responsive helpers (Section E)
   ============================================================ */
html, body { overflow-x: hidden; }

@media (max-width: 600px) {
  #jt-f-brand, #jt-f-cond, #jt-f-app, #jt-f-search {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .jt-founder-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ENHANCED MOTION (Section animations + transitions)
   ============================================================ */

/* Page-load fade-in: opacity-only on <body>. Avoids leaving a residual
   transform on body, which would make body a containing block for any
   position:fixed children (e.g. the buy-tyres enquiry cart drawer). */
@keyframes jt-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: jt-page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hero ken burns: slow drift to give the still photo life */
@keyframes jt-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}
.jt-hero img {
  animation: jt-kenburns 22s ease-in-out infinite alternate;
}
/* Note: the hero <video> is deliberately NOT animated — continuously
   re-scaling a playing full-viewport video melts weak GPUs. */

/* Hero content fades up after image is set */
@keyframes jt-hero-content-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.jt-hero__content > * {
  opacity: 0;
  animation: jt-hero-content-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.jt-hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.jt-hero__content > *:nth-child(2) { animation-delay: 0.30s; }
.jt-hero__content > *:nth-child(3) { animation-delay: 0.45s; }
.jt-hero__content > *:nth-child(4) { animation-delay: 0.60s; }
.jt-hero__content > *:nth-child(5) { animation-delay: 0.75s; }

/* Tyre filter cards stagger in when they mount */
@keyframes jt-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
#jt-grid > div {
  animation: jt-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#jt-grid > div:nth-child(1)  { animation-delay: 0ms; }
#jt-grid > div:nth-child(2)  { animation-delay: 40ms; }
#jt-grid > div:nth-child(3)  { animation-delay: 80ms; }
#jt-grid > div:nth-child(4)  { animation-delay: 120ms; }
#jt-grid > div:nth-child(5)  { animation-delay: 160ms; }
#jt-grid > div:nth-child(6)  { animation-delay: 200ms; }
#jt-grid > div:nth-child(7)  { animation-delay: 240ms; }
#jt-grid > div:nth-child(8)  { animation-delay: 280ms; }
#jt-grid > div:nth-child(n+9){ animation-delay: 320ms; }

/* Nav link: static colour change on hover. No underline animation.
   The active link keeps a quiet yellow underline as a permanent mark. */
.site-nav a {
  position: relative;
  border-bottom: 0 !important;
}
.site-nav a.is-active {
  text-decoration: underline;
  text-decoration-color: var(--jt-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Smoother service / feature panel entrance */
.feature-panel, .service-panel, .quote, .jt-pillars > div {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.service-panel:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(11, 11, 11, 0.18); }

/* Anchor link smooth scroll target offset (so sticky header doesn't cover headings) */
:target { scroll-margin-top: 120px; }

/* Honour reduced-motion across every new keyframe */
@media (prefers-reduced-motion: reduce) {
  body, .jt-hero img, .jt-hero video, .jt-hero__content > *, #jt-grid > div {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HEADER-FUSION LAYOUT
   Header is fixed and transparent at rest. Body grows a dark
   padding-top equal to the header height so the area sitting
   behind the transparent header reads as part of the hero. The
   home hero overrides that padding by pulling itself up under
   the header, gaining the same extra height back so it still
   fills the viewport exactly.
   ============================================================ */

body {
  padding-top: var(--header-h);
  background: var(--jt-black);
}

section.jt-hero {
  margin-top: calc(-1 * var(--header-h)) !important;
  min-height: calc(100vh + var(--header-h)) !important;
}

/* Every page: pull the first section up under the fixed, transparent header
   so the header fuses with the top of the page (same treatment as the home
   hero). The nav's theme machine then keeps the header light or dark to suit
   whatever section sits beneath it. */
body > section:first-of-type {
  margin-top: calc(-1 * var(--header-h));
}
/* Photo heroes are bottom-aligned, so their content already clears the header.
   Every other top section carries its heading at the top, so add clearance
   below the header after the pull-up (overrides any inline padding-block top). */
body > section:first-of-type:not(.jt-hero):not(.page-hero):not(.about-hero) {
  padding-top: calc(var(--header-h) + var(--s-6)) !important;
}

/* :target offset already 120px; raise to account for the now-fixed header */
:target { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ============================================================
   HERO: "BUY & SELL" rendered in yellow text (no highlight box)
   ============================================================ */
.jt-sweep {
  color: #FEC013;
}

/* ============================================================
   PAGE TRANSITIONS - premium cross-document navigation
   Uses the native View Transitions API where supported
   (Chrome/Edge/Safari 18+): the outgoing page cross-fades out
   while the new page fades and gently rises into place.
   Browsers without it get a JS opacity fade-out (see layout.js).
   ============================================================ */
@view-transition { navigation: auto; }

@keyframes jt-vt-out { to { opacity: 0; } }
@keyframes jt-vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Movement-free fade for reduced-motion - a cross-fade reads as gentle. */
@keyframes jt-vt-fade { from { opacity: 0; } to { opacity: 1; } }

::view-transition-old(root) {
  animation: jt-vt-out 0.30s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(root) {
  animation: jt-vt-in 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* JS fallback: fade the page out on internal navigation (no initial hide,
   so there is never a flash of hidden content). */
html.jt-pt-out body {
  opacity: 0;
  transition: opacity 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep page navigation cross-fading, but with opacity only (no slide). */
  ::view-transition-old(root) { animation: jt-vt-out 0.24s ease both; }
  ::view-transition-new(root) { animation: jt-vt-fade 0.30s ease both; }
  html.jt-pt-out body { opacity: 0; transition: opacity 0.24s ease; }
}

/* Scraper-resistant, hover-to-reveal phone links (see js/layout.js).
   Subtle affordance only — inherits its surrounding colour. The dotted
   hint is suppressed on button-styled instances (e.g. .contact-btn). */
.jt-tel { cursor: pointer; }
.jt-tel:not(.contact-btn) { border-bottom: 1px dotted currentColor; }