/* ============================================================
   JEWELL TYRES - COMPONENTS
   ============================================================ */

/* ==========================================
   SITE HEADER
   ========================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  color: var(--jt-bone);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.is-scrolled {
  background: rgba(11, 11, 11, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Hide on scroll-down */
.site-header.is-hidden {
  transform: translateY(-100%);
  box-shadow: none !important;
}

/* Theme inversion: over light-coloured sections, swap to cream bg + dark
   text + black logo so contrast stays on side. Frosted glass still applies. */
.site-header.theme-light {
  background: rgba(250, 248, 244, 0.86);
  color: var(--jt-black);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.site-header.theme-light .site-header__strip {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
.site-header.theme-light .site-header__strip,
.site-header.theme-light .site-header__strip a,
.site-header.theme-light .site-nav a {
  color: var(--jt-black);
}
.site-header.theme-light .site-header__strip a:hover,
.site-header.theme-light .site-nav a:hover {
  color: var(--jt-earth);
}

/* Logo swap: yellow on dark, brown on light. Both <img> tags live in the
   anchor; CSS shows exactly one at a time. Identical dimensions = no shift. */
.site-header__logo .logo-dark  { display: block; }
.site-header__logo .logo-light { display: none;  }
.site-header.theme-light .site-header__logo .logo-dark  { display: none;  }
.site-header.theme-light .site-header__logo .logo-light { display: block; }
.site-header__logo img { transition: opacity 0.3s ease; }

.site-header__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) 0;
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-scrolled .site-header__strip {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.site-header__strip a { color: var(--jt-bone); text-decoration: none; }
.site-header__strip a:hover { color: var(--jt-yellow); }
.site-header__strip-left,
.site-header__strip-right { display: flex; gap: var(--s-5); }

/* Three-column grid: logo left, nav truly centred, CTA right.
   1fr | auto | 1fr keeps the nav optically centred regardless of the
   widths of the logo or the CTA. */
.site-header__main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: var(--s-4);
  gap: var(--s-6);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--jt-bone);
  justify-self: start;
}
.site-header__logo svg { display: block; }
.site-header__logo img {
  height: 88px;
  width: auto;
  display: block;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--s-5);
  justify-self: center;
}

.site-nav a {
  font-family: var(--jt-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jt-bone);
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a.is-active {
  color: var(--jt-yellow);
  border-bottom-color: var(--jt-yellow);
}

.site-header__cta {
  display: none;
  white-space: nowrap;
}

/* Right-side header actions: Contact CTA plus the quiet staff padlock.
   The wrapper takes the grid's third cell so the 1fr auto 1fr template
   is unchanged. */
.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--s-4);
  justify-self: end;
}
.site-header__staff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--jt-bone);
  opacity: 0.4;
  transition: all var(--t-fast);
}
.site-header__staff:hover,
.site-header__staff:focus-visible {
  opacity: 1;
  color: var(--jt-yellow);
  background: rgba(255, 255, 255, 0.06);
}
.mobile-menu__staff { opacity: 0.65; }

.mobile-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--jt-bone);
}

/* Mobile: collapse the 3-column grid back to a 2-edge flex (logo left,
   hamburger right) since the nav + Contact are hidden. */
@media (max-width: 1023px) {
  .site-header__main {
    display: flex;
    justify-content: space-between;
  }
  .site-header__logo img { height: 56px; }
}

@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .site-header__actions { display: flex; }
  .site-header__cta { display: flex; }
  .mobile-toggle { display: none; }
}

.mobile-menu {
  display: none;
  padding: var(--s-5) 0;
  background: var(--jt-charcoal);
  border-top: 1px solid var(--jt-rule);
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: var(--s-3) 0;
  font-family: var(--jt-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jt-bone);
  text-decoration: none;
  border-bottom: 1px solid var(--jt-rule);
}
.mobile-menu a:last-of-type { border-bottom: 0; }

/* ==========================================
   SITE FOOTER
   ========================================== */
.site-footer {
  background: var(--jt-black);
  color: var(--jt-bone);
  border-top: 3px solid var(--jt-yellow);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-block: var(--s-8);
  align-items: start;
}

@media (min-width: 768px) {
  .site-footer__main {
    /* The roundel column sizes to its badge so the three text columns share
       the leftover space evenly and the badge sits hard on the right edge. */
    grid-template-columns: minmax(240px, 1.6fr) 1fr 1fr auto;
    gap: var(--s-7);
  }
}

.site-footer__col h4 {
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jt-yellow);
  margin-bottom: var(--s-4);
  font-weight: 500;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__col li { margin-bottom: 0.4rem; }
.site-footer__col a {
  color: var(--jt-bone);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.5;
}
.site-footer__col a:hover { color: var(--jt-yellow); }

/* base.css puts a 44px minimum on every link for touch, and the footer
   links are inline-block so it actually applies. That is right under a
   thumb but turns a six-item list into a half-screen sprawl with a mouse,
   so mice get compact rows back; the coarse-pointer rules further down
   keep the full 44px boxes on phones and tablets. */
@media (pointer: fine) {
  .site-footer__col li a { min-height: 0; }
  .site-footer__col li { margin-bottom: 0.55rem; }
}

/* The phone number keeps its tap-or-hover reveal, but the dotted underline
   under a row of placeholder dots reads as a rendering fault, not an
   affordance. The hover colour still signals it is live. */
.site-footer .jt-tel:not(.contact-btn) { border-bottom: 0; }

/* Badge column: hard right on desktop next to the columns, left-aligned
   and slightly smaller when the footer stacks on a phone. */
.site-footer__col--roundel img {
  display: block;
  width: 135px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .site-footer__col--roundel { justify-self: end; }
}
@media (max-width: 767px) {
  .site-footer__col--roundel img { width: 110px; }
}

.site-footer__brand {
  font-family: var(--jt-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--jt-yellow);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}

.site-footer__legal {
  padding-block: var(--s-5);
  border-top: 1px solid var(--jt-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-family: var(--jt-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jt-stone);
}
.site-footer__legal-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-footer__legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.site-footer__dot { opacity: 0.4; }
/* Stacked and left-aligned when narrow, so the two clusters read as tidy
   rows instead of ragged wrapping around the centre line. */
@media (max-width: 639px) {
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .site-footer__dot { display: none; }
  .site-footer__legal-links { gap: 0.4rem 1.1rem; }
}

/* ==========================================
   HERO
   ========================================== */
.hero {
  position: relative;
  background: var(--jt-black);
  color: var(--jt-bone);
  padding-block: var(--s-9);
  overflow: hidden;
  border-bottom: 3px solid var(--jt-yellow);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 75% 25%, rgba(254,192,19,0.08) 0%, transparent 40%),
    repeating-linear-gradient(135deg, transparent 0px, transparent 18px, rgba(255,255,255,0.02) 18px, rgba(255,255,255,0.02) 19px);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--s-7);
  align-items: end;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s-8);
  }
  .hero { padding-block: var(--s-10); }
}

.hero__meta {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.hero__display {
  font-family: var(--jt-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.hero__display em {
  font-style: normal;
  color: var(--jt-yellow);
}

.hero__sub {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--jt-bone);
  max-width: 560px;
  margin-bottom: var(--s-6);
}

.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--jt-rule);
  background: rgba(255,255,255,0.02);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--jt-rule);
}
.hero__stat:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__stat-value {
  font-family: var(--jt-display);
  font-size: 2.5rem;
  color: var(--jt-yellow);
  line-height: 1;
}
.hero__stat-label {
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jt-stone);
}

/* ==========================================
   TRUST STRIP - auto-rolling marquee, no border
   ========================================== */
.trust-strip {
  background: transparent;
  color: var(--jt-bone);
  padding-block: var(--s-5);
  overflow: hidden;
  position: relative;
}
/* Soft edge mask so items fade in/out at the strip's edges */
.trust-strip__marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.trust-strip__track {
  display: flex;
  align-items: center;
  gap: 4.5rem;                 /* generous spacing between items */
  width: max-content;          /* the track is as wide as its content */
  animation: trust-marquee 38s linear infinite;
  will-change: transform;
}
@keyframes trust-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exactly one set scrolls off */
}
/* Marquee keeps rolling on hover: uninterrupted brand motion is the point. */
.trust-strip__item {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trust-strip__sep {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.30);
}
/* Marquee is essential to the brand feel - keep it rolling at the same pace
   for reduced-motion users too. They've already asked us to make it move. */
@media (prefers-reduced-motion: reduce) {
  .trust-strip__track { animation-duration: 38s; }
}

/* ==========================================
   SERVICE PANELS
   ========================================== */
.service-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--jt-rule-light);
}

@media (min-width: 768px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
}

.service-panel {
  padding: var(--s-7);
  border-bottom: 1px solid var(--jt-rule-light);
}
.service-panel:last-child { border-bottom: 0; }

@media (min-width: 768px) {
  .service-panel { border-bottom: 0; border-right: 1px solid var(--jt-rule-light); padding: var(--s-8); }
  .service-panel:last-child { border-right: 0; }
}

.service-panel--dark {
  background: var(--jt-black);
  color: var(--jt-bone);
  border-color: var(--jt-rule);
}
.service-panel--dark .eyebrow { color: var(--jt-yellow); }
.service-panel--earth {
  background: var(--jt-earth);
  color: var(--jt-bone);
  border-color: var(--jt-earth-deep);
}
.service-panel--earth .eyebrow { color: var(--jt-yellow); }

.service-panel__title {
  font-family: var(--jt-display);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: var(--s-4) 0 var(--s-5);
}

.service-panel__lead {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: var(--s-5);
  opacity: 0.95;
}

.service-panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
}
.service-panel li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid currentColor;
  border-color: rgba(255,255,255,0.1);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.service-panel--dark li,
.service-panel--earth li { border-color: rgba(255,255,255,0.12); }
.service-panel li::before {
  content: counter(panel-item, decimal-leading-zero);
  counter-increment: panel-item;
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  color: var(--jt-yellow);
  min-width: 28px;
}
.service-panel ul { counter-reset: panel-item; }

/* ==========================================
   FEATURE PANEL (Unrivalled / Independent)
   ========================================== */
.feature-panel {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .feature-panel {
    grid-template-columns: 320px 1fr;
    gap: var(--s-8);
  }
}

.feature-panel__label {
  font-family: var(--jt-display);
  font-size: 2.5rem;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  padding-bottom: var(--s-4);
  border-bottom: 3px solid var(--jt-yellow);
  color: var(--jt-black);
}

.feature-panel__body p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: var(--s-4);
}
.feature-panel__body p:last-child { margin-bottom: 0; }

/* ==========================================
   QUOTE BLOCK
   ========================================== */
.quote {
  position: relative;
  padding-block: var(--s-9);
  background: var(--jt-black);
  color: var(--jt-bone);
  background-image: repeating-linear-gradient(135deg, transparent 0px, transparent 24px, rgba(255,255,255,0.02) 24px, rgba(255,255,255,0.02) 25px);
}

.quote__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
  padding-inline: var(--s-5);
}

.quote__mark {
  font-family: var(--jt-display);
  font-size: 5rem;
  color: var(--jt-yellow);
  line-height: 1;
  margin-bottom: var(--s-4);
}

.quote__text {
  font-family: var(--jt-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-5);
}
.quote__text em { color: var(--jt-yellow); font-style: normal; }

.quote__attr {
  font-family: var(--jt-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jt-stone);
}
.quote__attr strong { color: var(--jt-yellow); }

/* ==========================================
   FAQ
   ========================================== */
.faq-list { border-top: 1px solid var(--jt-rule-light); }

/* Two-column layout on wider screens - balanced, Apple-style. Each item is
   kept whole (no splitting across columns). */
@media (min-width: 760px) {
  .faq-list { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
  .faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

.faq-item {
  border-bottom: 1px solid var(--jt-rule-light);
}

.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--jt-display);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  font-family: var(--jt-mono);
  font-size: 1.25rem;
  color: var(--jt-yellow-dark);
  transition: transform var(--t-base);
}

.faq-item[open] .faq-item__icon { transform: rotate(45deg); }

.faq-item__a {
  padding-bottom: var(--s-4);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 680px;
}

/* ==========================================
   SECTION HEADERS
   ========================================== */
.section-header {
  display: flex;
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}

.section-header__main { flex: 1; min-width: 280px; }

.section-header__title {
  font-family: var(--jt-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: var(--s-3);
}

.section-header__title em { color: var(--jt-yellow); font-style: normal; }
.ground--black .section-header__title em { color: var(--jt-yellow); }

.section-header__meta {
  font-family: var(--jt-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jt-stone);
  text-align: right;
}

/* ==========================================
   CARDS (generic)
   ========================================== */
.card {
  display: flex;
  flex-direction: column;
  background: var(--jt-paper);
  border: 1px solid var(--jt-rule-light);
  padding: var(--s-5);
  transition: border-color var(--t-base),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s ease;
}
.card:hover {
  border-color: var(--jt-black);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -18px rgba(11, 11, 11, 0.22);
}

.card__eyebrow { margin-bottom: var(--s-3); }
.card__title {
  font-family: var(--jt-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: var(--s-3);
}
.card__body { color: var(--jt-stone); font-size: 0.95rem; }
.card__footer {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--jt-rule-light);
  font-family: var(--jt-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================
   FORMS
   ========================================== */
.form-group { margin-bottom: var(--s-5); }
.form-group label {
  display: block;
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jt-stone);
  margin-bottom: var(--s-2);
}
.form-group label .req { color: var(--jt-error); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--jt-sans);
  font-size: 1rem;
  color: var(--jt-black);
  background: var(--jt-paper);
  border: 1px solid var(--jt-rule);
  border-radius: var(--radius-1);
  transition: border-color var(--t-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 2px solid var(--jt-yellow);
  outline-offset: -2px;
  border-color: var(--jt-yellow-dark);
}
.form-textarea { min-height: 120px; resize: vertical; }

/* Native date and time pickers: phones render these with their own intrinsic
   width, height and centred value, so the box sits out of line with the other
   fields and on iOS can push past the card edge. Strip the native chrome and
   size them exactly like every other .form-input. Chromium keeps its calendar
   icon; iOS falls back to a plain tappable field that still opens the wheel. */
input[type="date"].form-input,
input[type="time"].form-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Matches the rendered height of a text .form-input, and stops an empty
     value collapsing the box once the native chrome is stripped. */
  min-height: 44px;
  height: 44px;
  text-align: left;
}
/* iOS centres the value inside the control; pin it left like typed text. */
input[type="date"].form-input::-webkit-date-and-time-value,
input[type="time"].form-input::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

.form-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
/* A label that wraps to two lines (e.g. "Position on machine" in a narrow
   column) would otherwise push only its own control down. Bottom-align the
   controls so every field in the row lines up whatever its label does. */
.form-row > .form-group {
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width:auto, so a control with an intrinsic
     minimum (native date/time pickers) could stretch its column past the
     card. Allow the column to shrink instead. */
  min-width: 0;
}
.form-row > .form-group > label { margin-bottom: var(--s-2); }
.form-row > .form-group > .form-input,
.form-row > .form-group > .form-select,
.form-row > .form-group > .form-textarea { margin-top: auto; }

/* ==========================================
   ANNIVERSARY ROUNDEL
   ========================================== */
.roundel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--jt-yellow);
  color: var(--jt-black);
  text-transform: uppercase;
  text-align: center;
  border: 3px solid var(--jt-black);
  position: relative;
}
.roundel__years {
  font-family: var(--jt-display);
  font-size: 2.25rem;
  line-height: 0.9;
}
.roundel__label {
  font-family: var(--jt-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.roundel__tag {
  font-family: var(--jt-display);
  font-size: 0.7rem;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid currentColor;
  width: 70%;
}

/* ==========================================
   IMAGE PLACEHOLDERS (until real photography lands)
   ========================================== */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jt-earth);
  background-image:
    repeating-linear-gradient(45deg, transparent 0px, transparent 20px, rgba(0,0,0,0.1) 20px, rgba(0,0,0,0.1) 21px),
    repeating-linear-gradient(-45deg, transparent 0px, transparent 20px, rgba(0,0,0,0.08) 20px, rgba(0,0,0,0.08) 21px);
  color: var(--jt-yellow);
  font-family: var(--jt-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 240px;
  border: 1px solid var(--jt-rule);
}

.img-placeholder--lg { min-height: 480px; }
.img-placeholder--sm { min-height: 160px; }

.img-placeholder__label {
  text-align: center;
  padding: var(--s-4);
}
.img-placeholder__caption {
  display: block;
  color: rgba(255,255,255,0.5);
  margin-top: var(--s-2);
  font-size: 0.7rem;
}

/* ==========================================
   BRANDS GRID
   ========================================== */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--jt-rule-light);
}
@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(5, 1fr); } }

.brand-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: var(--jt-paper);
  border-right: 1px solid var(--jt-rule-light);
  border-bottom: 1px solid var(--jt-rule-light);
  text-align: center;
  text-decoration: none;
  color: var(--jt-black);
  min-height: 120px;
  transition: background var(--t-base);
}
.brand-cell:hover { background: var(--jt-yellow); }
.brand-cell__name {
  font-family: var(--jt-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand-cell__sub {
  font-family: var(--jt-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-stone);
  margin-top: 4px;
}

/* ==========================================
   PULL QUOTE (inline within copy)
   ========================================== */
.pull-quote {
  border-left: 4px solid var(--jt-yellow);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin: var(--s-6) 0;
  font-family: var(--jt-display);
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Light variant of the service panel (Orderly Dispersal) */
.service-panel.service-panel--light {
  background: #ECE9E2;
  color: var(--jt-black);
}
.service-panel.service-panel--light .eyebrow { color: var(--jt-stone); }
.service-panel.service-panel--light .service-panel__lead,
.service-panel.service-panel--light ul,
.service-panel.service-panel--light li { color: var(--jt-black); }
.service-panel.service-panel--light .btn {
  background: var(--jt-black); color: var(--jt-yellow); border-color: var(--jt-black);
}
.service-panel.service-panel--light .btn:hover {
  background: var(--jt-yellow); color: var(--jt-black);
}

/* Client logo strip - slow continuous marquee on cream ground */
.jt-clients {
  background: var(--jt-paper);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--jt-rule-light);
}
.jt-clients__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.jt-clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: jt-clients-marquee 65s linear infinite;
  will-change: transform;
}
@keyframes jt-clients-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.jt-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 56px;
  /* Spacing lives on the item (not track gap) so the duplicated set has an
     equal trailing gap: translateX(-50%) then loops perfectly seamlessly. */
  margin-right: 4rem;
}
.jt-clients__item img {
  max-height: 52px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.jt-clients__item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}
@media (prefers-reduced-motion: reduce) {
  .jt-clients__track { animation-duration: 130s; }
}

/* (Old .jt-sector rules removed - superseded by the .jt-sectors-band block below.) */

/* Process cards on Sell Tyres - hover animation (yellow accent slides in) */
.process-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, background 0.3s ease;
}
.process-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--jt-yellow);
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.process-card > * { position: relative; z-index: 1; }
.process-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(11,11,11,0.12);
}
.process-card:hover::before { transform: translateX(0); }
.process-card:hover h3, .process-card:hover p, .process-card:hover span { color: var(--jt-black) !important; }

/* ============================================================
   FIVE SECTORS - premium minimalist band
   ============================================================ */
.jt-sectors-band {
  background: #F6F1E8;                       /* warm off-white panel */
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}
.jt-sectors-band::before {
  /* faint radial wash, gives the band weight without visible borders */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(254,192,19,0.045), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(11,11,11,0.025), transparent 70%);
  pointer-events: none;
}
.jt-sectors-band > .container { position: relative; z-index: 1; }
.jt-sectors-band__header { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.jt-sectors-band__lead {
  margin: 1rem 0 0;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--jt-stone);
}

.jt-sectors-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
}
@media (min-width: 560px)  { .jt-sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .jt-sectors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .jt-sectors-grid { grid-template-columns: repeat(5, 1fr); } }

/* Each card = a clean full-colour photo, then a tidy caption block below
   (number, title, one line of copy). Text lives under the image - never on
   top of it - so the photos read clean and the grid breathes. */
.jt-sector {
  position: relative;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.jt-sector:hover { transform: translateY(-6px); }

.jt-sector__hero {
  position: relative;
  margin: 0 0 1.25rem;
  aspect-ratio: 1 / 1;           /* matches the square source photos so nothing crops */
  overflow: hidden;
  background: #ECE6D7;            /* placeholder while img loads */
  border-radius: 4px;
}
.jt-sector__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.jt-sector:hover .jt-sector__hero img {
  transform: scale(1.05);
}

.jt-sector__body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 1.1rem;
  border-top: 1px solid var(--jt-rule-light);
}
.jt-sector__body::before {
  /* fixed-width yellow tab sitting on the hairline - identical on every card */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--jt-yellow);
}
.jt-sector__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.jt-sector__num {
  font-family: var(--jt-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--jt-yellow-dark);
  font-weight: 700;
}
.jt-sector__title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--jt-black);
  margin: 0;
  line-height: 1.1;
}
.jt-sector__copy {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--jt-stone);
  max-width: 26ch;
}

/* ============================================================
   UNRIVALLED EXPERTISE - full-bleed photo with dark overlay
   ============================================================ */
.jt-expertise {
  position: relative;
  isolation: isolate;
  color: var(--jt-bone);
  overflow: hidden;
  background-color: #0B0B0B;
  background-image:
    /* mobile: even dark wash top-to-bottom so the overlaid copy stays legible */
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.78) 100%),
    url("../public/img/jt-expertise-david.jpg");
  background-size: cover;
  background-position: center 26%;
  background-attachment: scroll;
}
@media (min-width: 1024px) {
  /* Desktop: keep the left of the frame clear so David Jewell reads in colour,
     and pull the dark wash to the right where the copy sits. Subtle parallax. */
  .jt-expertise {
    display: flex;
    align-items: center;
    min-height: 600px;
    background-image:
      linear-gradient(90deg,
        rgba(11,11,11,0.04) 0%, rgba(11,11,11,0.10) 30%,
        rgba(11,11,11,0.46) 50%, rgba(11,11,11,0.82) 68%, rgba(11,11,11,0.92) 100%),
      url("../public/img/jt-expertise-david.jpg");
    background-attachment: fixed;
    background-position: center 32%;
  }
  /* Stack the label over the copy and push the whole block to the right half,
     leaving the left of the photo clear for David. */
  .jt-expertise .feature-panel {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
  }
}
.jt-expertise > .container { position: relative; z-index: 1; }
.jt-expertise .feature-panel__label,
.jt-expertise .feature-panel__body p { color: var(--jt-bone); }
.jt-expertise .feature-panel__body p { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.jt-expertise .eyebrow { color: var(--jt-yellow); }

/* ============================================================
   FOOTER ADD-ONS - 50 Years / No BS roundel + yellow legal links
   ============================================================ */
/* Roundel now lives inside the Contact column, under "Full contact details". */
.site-footer__col img[alt="50 years. No BS."] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__col img[alt="50 years. No BS."]:hover {
  transform: rotate(-6deg) scale(1.04);
}
.site-footer a.footer-yellow {
  color: var(--jt-yellow);
}
.site-footer a.footer-yellow:hover {
  color: var(--jt-yellow);
  text-decoration: underline;
}

/* ============================================================
   DAVID QUOTE - photo background
   Editorial brown-earth tyre-tread shot with a dark wash so the
   white quote text + yellow accent stay sharply legible.
   ============================================================ */
.quote.quote--photo {
  position: relative;
  isolation: isolate;
  color: var(--jt-bone);
  overflow: hidden;
  background-color: #1A0F08;
  background-image:
    linear-gradient(95deg,
      rgba(11, 7, 4, 0.78) 0%,
      rgba(11, 7, 4, 0.62) 50%,
      rgba(11, 7, 4, 0.48) 100%),
    url("../public/img/jt-quote-bg.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 1024px) {
  .quote.quote--photo { background-attachment: fixed; }
}
.quote.quote--photo .quote__mark { color: var(--jt-yellow); opacity: 0.45; }
.quote.quote--photo .quote__text { color: var(--jt-bone); text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.quote.quote--photo .quote__text em { color: var(--jt-yellow); }
.quote.quote--photo .quote__attr { color: rgba(245, 244, 240, 0.85); }
.quote.quote--photo .quote__attr strong { color: var(--jt-yellow); }

/* ============================================================
   NAV TREATMENTS: Ask ↗ stays brand-yellow as the outbound CTA.
   Inspection (.nav-yellow) inherits the default nav colour now
   (white on dark, black on light); it only goes yellow on hover
   or when it's the active page.
   ============================================================ */
.site-nav a.nav-cta {
  color: var(--jt-yellow);
}
.site-nav a.nav-cta:hover {
  color: var(--jt-yellow);
}
.site-header.theme-light .site-nav a.nav-cta {
  color: var(--jt-yellow-dark);
}
.site-header.theme-light .site-nav a.nav-cta:hover {
  color: var(--jt-yellow-dark);
}

/* Brand strip - grayscale logo marquee on cream ground */
.jt-brands {
  background: var(--jt-paper);
  padding-block: var(--s-7);
  border-top: 1px solid var(--jt-rule-light);
  border-bottom: 1px solid var(--jt-rule-light);
}
.jt-brands__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.jt-brands__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: jt-brands-marquee 70s linear infinite;
  will-change: transform;
}
@keyframes jt-brands-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
/* Each logo sits in an identical bounding box so wildly different aspect
   ratios (square BHP vs. very wide Bridgestone) all read at a balanced
   visual weight. The image is scaled to FIT the box (contain), capped on
   both axes - no logo can dominate the row. */
.jt-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 170px;
  height: 60px;
  /* Spacing on the item (not track gap) keeps translateX(-50%) seamless. */
  margin-right: 3rem;
}
.jt-brands__item img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.jt-brands__item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}
.jt-brands__caption {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jt-stone);
  margin: 1.5rem 0 0;
}
@media (max-width: 720px) {
  .jt-brands__item { width: 130px; height: 48px; margin-right: 2rem; }
  .jt-brands__item img { max-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .jt-brands__track { animation-duration: 110s; }
}

/* ============================================================
   PAGE HERO - reusable full-bleed photo hero (premium pass)
   Use: <section class="page-hero">
          <div class="page-hero__media" style="background-image:url(...); background-position:center 35%"></div>
          <div class="page-hero__overlay"></div>
          <div class="container page-hero__content">…eyebrow + h1 + p…</div>
        </section>
   Falls back to solid near-black if the image is missing.
   ============================================================ */
.page-hero { position: relative; overflow: hidden; background: #0B0B0B;
  min-height: clamp(380px, 60vh, 580px); display: flex; align-items: flex-end; }
.page-hero__media { position: absolute; inset: 0; background-color: #0B0B0B;
  background-repeat: no-repeat; background-size: cover; background-position: center 35%; }
.page-hero__overlay { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgba(11,11,11,0.92) 0%, rgba(11,11,11,0.50) 38%, rgba(11,11,11,0.12) 72%, rgba(11,11,11,0.34) 100%),
  linear-gradient(to right, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0) 55%); }
.page-hero__content { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 5rem); }
.page-hero__content .display, .page-hero__content h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.page-hero__content p { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

/* ---- Hero carousel: crossfading full-bleed slides (ecommerce style) ---- */
.page-hero__carousel { position: absolute; inset: 0; overflow: hidden; background: #0B0B0B; }
.page-hero__slide { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover;
  /* slides are 16:9 with the machine centred; bias slightly low so tyres stay in frame */
  background-position: center 60%; opacity: 0; transform: scale(1.05);
  transition: opacity 0.8s ease; }
/* Active slide is always in gentle continuous motion (Ken Burns) */
.page-hero__slide.is-active { opacity: 1; animation: jt-kenburns 11s ease-in-out infinite alternate; }
@keyframes jt-kenburns {
  from { transform: scale(1.06) translate3d(-2.2%, 1.8%, 0); }
  to   { transform: scale(1.20) translate3d(2.2%, -1.8%, 0); }
}
/* Full-viewport variant: hero fills the whole first screen */
/* Full-bleed hero: section fills the viewport edge-to-edge.
   100dvh handles mobile URL-bar contraction. The video child is scaled
   up a touch so any letterbox / safety-margin baked into the source
   gets cropped by the section's overflow:hidden, same look as the
   homepage hero. */
.page-hero--full {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
}
.page-hero--full .page-hero__content {
  width: 100%;
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.page-hero--full video.page-hero__media,
.page-hero--full .page-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);           /* crops ~12.5% off each edge, kills letterbox baked into source */
  transform-origin: center 45%;
}

/* Slow Ken Burns drift for a static-image hero (e.g. Brands). The parent
   .page-hero clips the overflow, so the gentle zoom stays edge-to-edge.
   Kept on even under reduced-motion - the drift is slow and subtle, and
   several users run the OS-level reduce-motion flag by default. */
.page-hero__media--kb {
  transform-origin: center 55%;
  animation: jt-hero-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes jt-hero-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}

/* Slide indicator dots (min-height beats the global 44px button tap-target) */
.page-hero__dots { position: absolute; left: 0; right: 0; bottom: clamp(0.9rem, 2vw, 1.4rem);
  z-index: 2; display: flex; gap: 8px; justify-content: center; padding: 0; }
.page-hero__dot { width: 22px; height: 3px; min-height: 3px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
  background: rgba(232,228,218,0.4); transition: background 0.25s ease; }
.page-hero__dot:hover { background: rgba(232,228,218,0.7); }
.page-hero__dot.is-active { background: var(--jt-yellow); }
.page-hero__dot:focus-visible { outline: 2px solid var(--jt-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .page-hero__slide { transition: opacity 0.4s ease; transform: none; }
  .page-hero__slide.is-active { transform: none; animation: none; }
}

/* ---- Tyre stock card thumbnail ----
   Tech Data Book product shots sit on a pure-black canvas; `contain` keeps
   the full tread/sidewall visible with no crop or distortion. */
.jt-card__thumb { display: block; width: calc(100% + 40px); height: auto; margin: -20px -20px 16px;
  aspect-ratio: 4 / 3; object-fit: contain; background: #000; border-bottom: 1px solid #E5E0D5; }

/* ============================================================
   PREMIUM CTA BAND (.jt-cta): the site-wide "Need a tyre?" block.
   Used in the injected pre-footer and the inline homepage copy.
   ============================================================ */
.jt-cta__inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 860px) { .jt-cta__inner { grid-template-columns: 1.4fr auto; gap: clamp(2.5rem, 6vw, 5rem); } }
.jt-cta__eyebrow { display: inline-block; font-family: var(--jt-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--jt-black); opacity: 0.6; }
.jt-cta__title { font-family: var(--jt-display); font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 0.98; font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.7rem 0 1rem; color: var(--jt-black); }
.jt-cta__sub { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--jt-black); max-width: 44ch; }
.jt-cta__sub a { font-weight: 500; color: var(--jt-black); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px; }
.jt-cta__actions { display: flex; flex-direction: column; gap: 0.8rem; }
@media (min-width: 480px) and (max-width: 859px) { .jt-cta__actions { flex-direction: row; } }
.jt-cta__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-width: 230px; padding: 1.05rem 1.5rem; border-radius: 999px; font-family: var(--jt-mono); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--jt-black); transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease; }
.jt-cta__btn--primary { background: var(--jt-black); color: var(--jt-yellow); }
.jt-cta__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -18px rgba(11,11,11,0.55); }
.jt-cta__btn--ghost { background: transparent; color: var(--jt-black); }
.jt-cta__btn--ghost:hover { background: var(--jt-black); color: var(--jt-yellow); transform: translateY(-2px); }
.jt-cta__btn span:last-child { transition: transform 0.2s ease; }
.jt-cta__btn:hover span:last-child { transform: translateX(5px); }

/* ============================================================
   POLISH PASS - moderate refresh (site-wide)
   Typography balance, tactile buttons, refined forms, smoother
   FAQ, cohesive cards, mobile menu motion, focus quality.
   ============================================================ */

/* ---- System-wide typography polish ---- */
html {
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 0;
}

/* Better wrap for headings + body */
h1, h2, h3, h4,
.section-header__title,
.hero__display,
.quote__text,
.feature-panel__label,
.service-panel__title,
.jt-cta__title,
.card__title,
.jt-pillar h3 {
  text-wrap: balance;
}
p, li, .jt-cta__sub, .feature-panel__body p { text-wrap: pretty; }

/* Brand selection colour */
::selection { background: var(--jt-yellow); color: var(--jt-black); }
::-moz-selection { background: var(--jt-yellow); color: var(--jt-black); }

/* Refined scrollbar */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: rgba(107, 104, 98, 0.6) transparent;
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(107, 104, 98, 0.5);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 11, 11, 0.55); background-clip: padding-box; }

/* ---- Buttons: tactile press + refined focus halo ---- */
.btn, .jt-cta__btn {
  position: relative;
  isolation: isolate;
}
.btn:active, .jt-cta__btn:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 80ms !important;
}
.btn:focus-visible, .jt-cta__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--jt-paper), 0 0 0 5px var(--jt-yellow);
}
.ground--black .btn:focus-visible,
.ground--earth .btn:focus-visible {
  box-shadow: 0 0 0 3px var(--jt-black), 0 0 0 5px var(--jt-yellow);
}

/* ---- Inputs: smoother focus, hover state ---- */
.form-input,
.form-select,
.form-textarea {
  background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--jt-charcoal);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--jt-yellow-dark);
  box-shadow: 0 0 0 3px rgba(254, 192, 19, 0.25);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--jt-stone);
  opacity: 0.55;
}
.form-group label { transition: color 180ms ease; }
.form-group:focus-within label { color: var(--jt-black); }

/* ---- FAQ: hover, smoother icon rotation, content slide-in ---- */
.faq-item { transition: background 200ms ease; }
.faq-item:hover { background: rgba(254, 192, 19, 0.04); }
.faq-item[open] { background: rgba(254, 192, 19, 0.06); }
.faq-item__q {
  transition: color 180ms ease, padding-inline-start 220ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-inline: 0.25rem;
}
.faq-item__q:hover { color: var(--jt-earth); }
.faq-item:hover .faq-item__icon { color: var(--jt-yellow); }
.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(254, 192, 19, 0.12);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease, color 200ms ease;
}
.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  background: var(--jt-yellow);
  color: var(--jt-black);
}
.faq-item[open] .faq-item__a {
  animation: jt-faq-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes jt-faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Brand grid cells: lift + accent ---- */
.brand-cell {
  position: relative;
  transition: background var(--t-base), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}
.brand-cell:hover { transform: translateY(-2px); }

/* ---- Tags: subtle lift + accent on hover ---- */
.tag {
  transition: background 200ms ease, border-color 200ms ease,
              transform 200ms ease, color 200ms ease;
}
.tag:hover {
  transform: translateY(-1px);
  border-color: var(--jt-yellow-dark);
}

/* ---- Header: refined hover for logo ---- */
.site-header__logo img {
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header__logo:hover img { transform: scale(1.04); }

/* ---- Mobile menu: slide + cascade reveal ---- */
.mobile-menu.is-open {
  animation: jt-mobile-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes jt-mobile-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu.is-open a {
  animation: jt-mobile-link-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mobile-menu.is-open a:nth-child(1) { animation-delay: 0.04s; }
.mobile-menu.is-open a:nth-child(2) { animation-delay: 0.07s; }
.mobile-menu.is-open a:nth-child(3) { animation-delay: 0.10s; }
.mobile-menu.is-open a:nth-child(4) { animation-delay: 0.13s; }
.mobile-menu.is-open a:nth-child(5) { animation-delay: 0.16s; }
.mobile-menu.is-open a:nth-child(6) { animation-delay: 0.19s; }
.mobile-menu.is-open a:nth-child(7) { animation-delay: 0.22s; }
.mobile-menu.is-open a:nth-child(8) { animation-delay: 0.25s; }
.mobile-menu.is-open a:nth-child(9) { animation-delay: 0.28s; }
@keyframes jt-mobile-link-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mobile-menu a {
  transition: color 180ms ease, padding-inline-start 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms ease;
}
.mobile-menu a:hover {
  color: var(--jt-yellow);
  padding-inline-start: 8px;
  border-bottom-color: var(--jt-yellow);
}

/* Hamburger transforms to a tidy X when open */
.mobile-toggle span {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  transform-origin: center;
}
.mobile-menu.is-open ~ * .mobile-toggle span:nth-child(1),
.site-header:has(.mobile-menu.is-open) .mobile-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu.is-open ~ * .mobile-toggle span:nth-child(2),
.site-header:has(.mobile-menu.is-open) .mobile-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu.is-open ~ * .mobile-toggle span:nth-child(3),
.site-header:has(.mobile-menu.is-open) .mobile-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Footer link hover: subtle indent + colour ---- */
.site-footer__col li a {
  display: inline-block;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__col li a:hover {
  color: var(--jt-yellow);
  transform: translateX(4px);
}
.site-footer__col img[alt="Jewell Tyres"] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__col img[alt="Jewell Tyres"]:hover { transform: scale(1.03); }

/* ---- Progress bar: gentle glow ---- */
#jt-prog {
  background: linear-gradient(90deg, var(--jt-yellow-dark), var(--jt-yellow), #FFD75E) !important;
  box-shadow: 0 0 12px rgba(254, 192, 19, 0.45);
}

/* Marquees keep rolling on hover: the continuous motion is the brand
   signal, not a UI control to be paused. */

/* ---- Story facts chips: hover ---- */
.story-facts li {
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.story-facts li:hover {
  background: rgba(254, 192, 19, 0.08);
  border-color: var(--jt-yellow-dark);
  color: var(--jt-black);
  transform: translateY(-1px);
}

/* ---- Quote mark: subtle float ---- */
.quote__mark {
  display: inline-block;
  animation: jt-quote-float 6s ease-in-out infinite alternate;
}
@keyframes jt-quote-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* ---- Anchor link smoother offset ---- */
:target {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* ---- Body links: refined underline timing ---- */
.section a:not(.btn):not(.jt-cta__btn):not(.story-cta):not(.tag) {
  text-decoration-color: rgba(254, 192, 19, 0.45);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease, text-decoration-thickness 180ms ease;
}
.section a:not(.btn):not(.jt-cta__btn):not(.story-cta):not(.tag):hover {
  color: var(--jt-earth);
  text-decoration-color: var(--jt-yellow-dark);
  text-decoration-thickness: 2px;
}
.ground--black a:not(.btn):not(.jt-cta__btn) {
  text-decoration-color: rgba(254, 192, 19, 0.5);
}
.ground--black a:not(.btn):not(.jt-cta__btn):hover {
  color: var(--jt-yellow);
}

/* ---- Pillars: refined entrance icon ---- */
.jt-pillar__icon {
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.jt-pillar:hover .jt-pillar__icon {
  transform: translateY(-2px) scale(1.05);
}

/* ---- Reduced-motion: tame the new motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open,
  .mobile-menu.is-open a,
  .faq-item[open] .faq-item__a,
  .quote__mark {
    animation: none !important;
  }
  .btn:active, .jt-cta__btn:active { transform: none !important; }
  .site-footer__col li a:hover { transform: none; }
  .story-facts li:hover { transform: none; }
}

/* ==========================================
   TOUCH TARGETS ON PHONES AND TABLETS
   ==========================================
   base.css sets `min-height: 44px` on links and buttons, but min-height has no
   effect on an inline box, so plain inline links never picked it up: measured
   on a 375px viewport they came out 14px to 21px tall. Buttons and nav links
   are fine because they are already block, flex or inline-block.

   The fix is scoped two ways. It only applies to coarse pointers, so the
   desktop layout is untouched. And it only covers links that stand on their
   own (footer lists, the legal bar). Links sitting inside a sentence are
   deliberately left alone: WCAG 2.5.8 exempts targets in a block of text, and
   padding them out would wreck the line spacing of the prose. */
@media (pointer: coarse) {
  .site-footer__col li a,
  .site-footer__legal > div > a.footer-yellow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The footer list gets its rhythm from the link boxes now, so drop the
     extra margin that would otherwise double the gaps. */
  .site-footer__col li { margin-bottom: 0; }

  /* <summary> is display:list-item and so misses the rule in base.css too. */
  summary { min-height: 44px; display: flex; align-items: center; }

  /* The "← Home" crumb on the size, machine and location pages. */
  .page-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The slide indicator is deliberately a 3px bar, so give it an invisible 44px
   hit area rather than making the bar itself bigger. The dots are 8px apart
   and the overlay is bounded by each dot's own width, so neighbouring dots
   cannot steal each other's taps. */
.page-hero__dot { position: relative; }
.page-hero__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* The mono micro-labels land at 9.9px to 10.9px on a phone, which is below
   comfortable reading size. Floor them at ~11px on small screens only; the
   desktop sizing that the design relies on is unchanged. !important is
   deliberate: several of these are set by per-page <style> blocks that load
   after this sheet, and the stock-card spec line is an inline style, so
   nothing weaker actually lands (the earlier .b-card__sub nudge here proved
   it by silently losing the cascade). Measured list, audited at 375px. */
@media (max-width: 640px) {
  .story-facts li,            /* index: story chips, 10.9px */
  .about-story__chips li,     /* about: story chips, 10.6px */
  .wwd__tag,                  /* about: card tags, 10.6px */
  .proc-card__tag,            /* buy: procurement tags, 10.9px */
  .b-card__sub,               /* brands: brand-card subtitles, 9.9px */
  .contact-card__eyebrow,     /* contact: 10.6px */
  .contact-card__label,       /* contact: 10.2px */
  .safety-stats__label,       /* safety: stat labels, 10.6px */
  .nope-card__num,            /* safety: list numerals, 10.6px */
  .legal-doc__eyebrow,        /* legal: doc eyebrows, 10.9px */
  .rpt-disclaimer .mono,      /* inspection tool: disclaimer eyebrow, inline 10.9px */
  #jt-grid .mono {            /* buy: stock-card spec lines, inline 10.9px on classless card divs */
    font-size: 0.7rem !important;
  }
}

/* ==========================================
   RHYTHM BAND
   ==========================================
   A dark full-bleed break for punctuating long text pages.

   The reason it exists: the paper and sand grounds that separate most sections
   sit at a contrast ratio of 1.10, and the sectors band against sand is 1.04.
   That is below the point where the eye registers a boundary, so a page of
   stacked prose reads as one unbroken column however many <section> tags it
   has. Black against paper is 18.6, which is why this reads as a joint.

   Drop one in roughly every 2,000px to 2,500px of continuous text. Keep the
   statement short: it is a breath between sections, not another section. */
.rhythm-band {
  background: var(--jt-black);
  color: var(--jt-bone);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid rgba(245, 242, 235, 0.08);
  border-bottom: 1px solid rgba(245, 242, 235, 0.08);
}
.rhythm-band__inner { max-width: 1000px; margin: 0 auto; padding-inline: var(--s-5); }
.rhythm-band__eyebrow {
  display: block;
  font-family: var(--jt-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jt-yellow);
  margin-bottom: 1.15rem;
}
.rhythm-band__text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--jt-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 3.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--jt-bone);
}
/* Yellow on black measures 11.96, so the accent is safe here in a way it is
   not on the light grounds. */
.rhythm-band__text em { font-style: normal; color: var(--jt-yellow); }
.rhythm-band__note {
  margin: 1.4rem 0 0;
  max-width: 66ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(232, 228, 218, 0.72);
}

/* Optional figure row, for pages that have counts worth pulling out. */
.rhythm-band__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem 2.5rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 242, 235, 0.12);
}
@media (min-width: 640px) { .rhythm-band__stats { grid-template-columns: repeat(3, 1fr); } }
.rhythm-band__num {
  display: block;
  font-family: var(--jt-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--jt-yellow);
  font-variant-numeric: tabular-nums;
}
.rhythm-band__label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--jt-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 228, 218, 0.62);
}

/* ==========================================
   KEY FACTS
   ==========================================
   Reference content, so it is set as reference: a lead statement and then
   label/value rows on hairline rules, the way a spec sheet reads.

   This was a grid of white cards, which is the pattern the site uses for
   things you can click into: brands, services, resources. Facts are
   sentences, not objects, so boxing each one gave them all equal weight and
   read as a component dropped onto the page rather than part of it. The
   lead also sat in a black panel directly under a dark hero on most pages,
   repeating the hero's move a screen later.

   Rules and space instead. The same device .faq-item already uses, so the
   block belongs to the site rather than importing a look. Markup is
   unchanged: still a plain <ul> of self-contained sentences for lifting. */
.keyfacts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--jt-rule-light);
}

/* The defining fact leads, set in the display face at statement size. */
.keyfacts-lead {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--jt-rule-light);
}
.keyfacts-lead p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--jt-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--jt-black);
}

/* Label left, fact right, on a shared baseline. Stacks under 760px. */
.keyfact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: clamp(1rem, 1.6vw, 1.3rem) 0;
  border-bottom: 1px solid var(--jt-rule-light);
}
@media (min-width: 760px) {
  .keyfact {
    grid-template-columns: 13rem 1fr;
    gap: 2.5rem;
    align-items: baseline;
  }
}
.keyfact__label {
  display: block;
  margin: 0;
  font-family: var(--jt-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jt-stone);
}
.keyfact p {
  margin: 0;
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--jt-black);
}

.keyfacts-note {
  margin: clamp(1.6rem, 3vw, 2.25rem) 0 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--jt-stone);
  max-width: 78ch;
}

/* The page FAQs carry their questions as h3, which the GEO rules ask for, so
   the heading stays inside the summary rather than being replaced by it. It
   takes the summary's type instead of the page's h3 scale, which is what put
   these questions at almost the weight of the section title above them. */
.faq-item__q h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}