/* ==========================================================================
   KASAM LAST — Wholesale Spray Pump Manufacturing
   Stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography & utilities
   4.  Buttons
   5.  Header / navigation
   6.  Hero (6-layer parallax)
   7.  About
   8.  Featured showcase
   9.  Product grid
   10. Why choose
   11. Quality & certifications
   12. CTA
   13. Footer
   14. Animation primitives
   15. Responsive
   16. Reduced motion
   17. Product detail pages (products/*.html)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand — exact spec hex */
  --red:        #ED1C24;
  --blue:       #1A459D;
  --gold:       #E8BD1F;

  /* Accessible red for SMALL text and for fills carrying small white text.
     #ED1C24 on white measures 4.38:1, just under the 4.5:1 WCAG AA floor for
     normal-size text. #C8151C reads as the same brand red at 5.87:1.
     Set this to #ED1C24 if exact-hex fidelity matters more than AA. */
  --red-ink:    #C8151C;
  --red-hover:  #D41619;

  /* Accessible gold for SMALL text sitting on the blue.
     #E8BD1F on #1A459D is 4.86:1 — passing, but with no headroom, and it
     drops below 4.5:1 wherever the CTA's radial overlays lighten the blue.
     #F2CE4A holds 5.7:1 on flat blue and 4.9:1 under the overlays.
     Graphics, borders and badges keep the exact --gold. */
  --gold-ink:   #F2CE4A;

  --blue-deep:  #0D2A5C;
  --blue-ink:   #16234A;

  --white:      #FFFFFF;

  /* Cool slate neutral scale (UI/UX Pro Max "Professional navy" B2B palette).
     Replaces the earlier warm grays so the neutrals cohere with the navy-blue
     brand mark. Brand red/blue/gold above stay exact per the brand spec.
     Contrast on white: --ink 16.9:1, --muted 7.5:1 (was 5.7:1 at #666). */
  --ink:        #1E293B;   /* slate-800  — primary body text            */
  --muted:      #475569;   /* slate-600  — secondary / meta text        */
  --gray-100:   #F6F8FB;   /* slate-50   — section backgrounds          */
  --gray-200:   #E2E8F0;   /* slate-200  — borders / hairlines          */
  --footer-txt: #E8EEF0;

  /* Type — Plus Jakarta Sans with a full system fallback so the page still
     renders cleanly offline / before the webfont loads. Weight discipline:
     800 hero, 700 section headers, 600 card titles + buttons, 400 body. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --shell: 1200px;
  --gut: 1.5rem;
  --section-y: 7.5rem;
  --header-h: 68px;

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --dur:          800ms;
  --dur-fast:     300ms;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(26, 69, 157, 0.07);
  --shadow-md: 0 8px 24px rgba(26, 69, 157, 0.10);
  --shadow-lg: 0 12px 32px rgba(26, 69, 157, 0.15);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  /* Deliberately no overflow-x here. Setting it (even to `clip`) forces the
     other axis to compute to `auto` per the overflow pairing rule, which makes
     <html> a scroll container and breaks the hero's sticky pin. Horizontal
     containment lives on <body> instead. */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

/* Visible, high-contrast focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--blue);
  border-radius: 8px;
  transform: translate(-50%, -160%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.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;
}

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

.section {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
  background: var(--white);
}
/* Pull the About block (eyebrow + "Wholesale Supply Since 2020") slightly
   higher than the shared section rhythm so it doesn't float too far down. */
.section--about   { background: var(--white); padding-top: calc(var(--section-y) - 2.25rem); }
.section--featured{ background: var(--gray-100); }
.section--products{ background: var(--white); }
.section--why     { background: var(--gray-100); }
.section--quality { background: var(--white); }

/* Skip rendering work for sections that are far off-screen.
   Deliberately NOT applied to the footer: its text is light-on-dark, and while
   a content-visibility:auto subtree is off-screen its background paint is
   skipped, so contrast tooling evaluates the light text against a white
   fallback and reports a false failure. These two sections are dark-on-light,
   so they stay correct even under that fallback. */
.section--why,
.section--quality {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold) 55%, var(--red));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   3. TYPOGRAPHY & UTILITIES
   ========================================================================== */
.h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.375rem);
  line-height: 1.18;
  font-weight: 700;              /* Bold section headers; 800 reserved for hero */
  letter-spacing: -0.02em;
  color: var(--blue);
}
.h2--center { text-align: center; }

.eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.eyebrow--center { text-align: center; }

.section__sub {
  max-width: 46ch;
  margin: 1rem auto 3.5rem;
  font-size: 1.125rem;
  color: var(--muted);
  text-align: center;
}

.accent-gold { color: var(--gold); }

/* Gold rule that grows under a key phrase */
.accent-underline {
  position: relative;
  white-space: nowrap;
}
.accent-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.12em;
  height: 4px;
  width: 100%;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out) 250ms;
}
.is-in .accent-underline::after,
.accent-underline.is-in::after { transform: scaleX(1); }

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--red-ink);
}
.link-cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.link-cta:hover svg, .link-cta:focus-visible svg { transform: translateX(4px); }

/* Word wrappers created for text animations */
.w { display: inline-block; will-change: auto; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* touch target floor */
  padding: 0.875rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;              /* SemiBold for buttons (UI/UX Pro Max) */
  letter-spacing: 0.01em;
  border-radius: 6px;
  border: 2px solid transparent;
  text-align: center;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn--sm { min-height: 40px; padding: 0.5rem 1.125rem; }
.btn--lg {
  min-height: 48px;
  padding: 0.9375rem 2.25rem;
  font-size: 1rem;
  border-radius: 12px;
}

.btn--primary {
  color: var(--white);
  background: var(--red-ink);
  box-shadow: 0 4px 14px rgba(200, 21, 28, 0.28);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--red-hover);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(200, 21, 28, 0.36);
}

.btn--ghost-light {
  color: var(--white);
  background: transparent;
  border-color: var(--white);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  color: var(--blue);
  background: var(--white);
  transform: scale(1.05);
}

.btn:active { transform: scale(0.99); }

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* No backdrop-filter here on purpose: a 12px blur on a fixed full-width
     strip re-renders every frame while content scrolls beneath it, which is
     a primary scroll-jank source. The near-opaque background reads the
     same without it. */
  background: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid rgba(232, 189, 31, 0.55);
  transform: translateY(-100%);
  transition: background-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.site-header.is-ready { transform: translateY(0); transition: transform 600ms var(--ease-out); }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 0.625rem; }

/* Brand logo lockup. Sized by height so the 261x77 artwork keeps its aspect
   ratio; at 34px tall it renders the 261px source at ~2.2x density, which
   stays crisp on retina displays. */
.brand__logo {
  display: block;
  flex: none;
  height: 34px;
  width: auto;
}

.primary-nav { display: flex; align-items: center; gap: 2rem; }
.primary-nav__list { display: flex; align-items: center; gap: 2rem; }

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: color var(--dur-fast) var(--ease-out);
}
.is-ready .primary-nav__link { animation: navLinkIn 480ms var(--ease-out) forwards; }
.is-ready .primary-nav__list li:nth-child(1) .primary-nav__link { animation-delay: 120ms; }
.is-ready .primary-nav__list li:nth-child(2) .primary-nav__link { animation-delay: 190ms; }
.is-ready .primary-nav__list li:nth-child(3) .primary-nav__link { animation-delay: 260ms; }
.is-ready .primary-nav__list li:nth-child(4) .primary-nav__link { animation-delay: 330ms; }

@keyframes navLinkIn { to { opacity: 1; transform: translateY(0); } }

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 260ms var(--ease-out);
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible { color: var(--red-ink); }
.primary-nav__link:hover::after { transform: scaleX(1); }

.primary-nav__link.is-active { color: var(--red-ink); }
.primary-nav__link.is-active::after { transform: scaleX(1); }

.primary-nav__cta { opacity: 0; }
.is-ready .primary-nav__cta { animation: navLinkIn 480ms var(--ease-out) 400ms forwards; }

/* Hamburger */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--blue);
  border-radius: 8px;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(13, 42, 92, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-scrim[hidden] { display: none; }

/* ==========================================================================
   6. CINEMATIC SCROLL HERO — canvas image sequence
   --------------------------------------------------------------------------
   A tall scroll track holds a sticky 100vh stage. A <canvas> scrubs 50
   product frames tied to scroll progress (drawn in JS), with four text
   stages fading in/out over the arc. The poster <img> is the instant paint
   and the no-JS / reduced-motion fallback.
   ========================================================================== */
.cine {
  position: relative;
  background: #05070d;              /* matches the frame backdrop */
}
/* Only give the track its scroll length when JS can drive the scrub.
   Without JS the hero is a normal one-viewport poster + intro copy. */
.js .cine { height: 460vh; }

.cine__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #05070d;
}

/* Canvas and poster both fill the stage; canvas paints on top once ready. */
.cine__canvas,
.cine__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cine__poster { z-index: 0; }
.cine__canvas { z-index: 1; opacity: 0; transition: opacity 400ms var(--ease-out); }
.cine.is-playing .cine__canvas { opacity: 1; }
.cine.is-playing .cine__poster { opacity: 0; }

/* Readability vignette so white copy holds contrast over bright frames. */
.cine__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,13,0.55) 0%, transparent 24%, transparent 60%, rgba(5,7,13,0.8) 100%),
    radial-gradient(130% 80% at 30% 45%, transparent 42%, rgba(5,7,13,0.55) 100%);
}

/* --- Text stages -------------------------------------------------------- */
.cine__overlays { position: absolute; inset: 0; z-index: 3; }
.cine-stage {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  /* visibility must be transitioned too: it holds `visible` for the whole
     duration, so the opacity fade-out actually renders instead of popping. */
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out),
              visibility 600ms;
  pointer-events: none;
}
.cine-stage .shell { width: 100%; }
.cine-stage.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.cine-eyebrow,
.cine-kicker {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.cine-title {
  max-width: 15ch;
  font-size: clamp(2rem, 1.1rem + 4vw, 3.4rem);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.65);
}

.cine-headline {
  max-width: 18ch;
  font-size: clamp(1.6rem, 1rem + 2.7vw, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.65);
}

.cine-sub,
.cine-copy {
  max-width: 44ch;
  margin-top: 1.1rem;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.cine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* --- Sequence progress rail -------------------------------------------- */
.cine__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.cine__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--gold) 55%, var(--red));
}

/* --- Scroll cue --------------------------------------------------------- */
.cine__cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: -22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(5, 7, 13, 0.35);
  transition: opacity 400ms var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  animation: cueBob 2.4s var(--ease-out) infinite;
}
.cine__cue:hover { background: rgba(5, 7, 13, 0.6); }
/* the cue fades out once the user starts scrolling the sequence */
.cine.is-scrolled .cine__cue { opacity: 0; pointer-events: none; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: center;
}
.about__body { margin-top: 1.75rem; display: grid; gap: 1.125rem; }
.about__body p { max-width: 62ch; color: var(--ink); line-height: 1.8; }
.about__subhead {
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue);
}

.about__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.tile {
  position: relative;            /* anchors the stretched tile link */
  display: grid;
  gap: 0.5rem;
  place-items: center;
  padding: 1.25rem 1rem;
  background: var(--white);
  border: 1px solid rgba(232, 189, 31, 0.75);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile img { width: 100%; max-width: 116px; height: auto; }
.tile figcaption {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-align: center;
}
.tile:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
.tile--lg { grid-column: 1 / -1; }
.tile--lg img { max-width: 148px; }
/* Real product photo (2:3 portrait) in the large tile, sized by height
   rather than the icon rule's max-width so a taller photo doesn't dominate
   the row — the other three tiles stay square SVG icons at 116px wide. */
.tile--lg img.tile__photo { max-width: none; width: auto; height: 168px; }

/* ==========================================================================
   8. FEATURED SHOWCASE
   ========================================================================== */
.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  align-items: start;
}

.featured__main {
  position: relative;            /* anchors the stretched card link */
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 4px solid var(--gold);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.featured__media { display: grid; place-items: center; }
.featured__media img { width: 100%; max-width: 240px; height: auto; }

.featured__badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-ink);
  border-radius: 999px;
}
.featured__name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue);
}
.featured__desc { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }

.spec-list { display: grid; gap: 0.5rem; margin: 1.25rem 0 1.75rem; }
.spec-list li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Primary + secondary action pair on the flagship card.
   flex: 1 1 auto lets the pair share one row where the info column is wide
   enough, and stretch to full width each when the column forces a wrap —
   so they never end up as two mismatched stubs.
   z-index lifts them above the stretched card link, which otherwise covers
   the whole card and would swallow both buttons' clicks. */
.featured__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.featured__actions .btn { flex: 1 1 auto; }

.featured__side { display: grid; gap: 1rem; }
.mini-card {
  position: relative;            /* anchors the stretched card link */
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.mini-card img { width: 64px; height: auto; }
.mini-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--blue); line-height: 1.3; }
.mini-card p { font-size: 0.8125rem; color: var(--muted); }
.mini-card:hover {
  transform: scale(1.03);
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   9. PRODUCT GRID
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  /* --py is driven by the scroll parallax so the hover scale can compose
     with it instead of being overwritten by an inline transform */
  transform: translate3d(0, var(--py, 0px), 0);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.product-card__media {
  display: grid;
  place-items: center;
  min-height: 132px;
  margin-bottom: 1.25rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.product-card__media img { width: 120px; height: 120px; }

/* Real product photography (2:3 portrait) instead of the flat square icon
   used by every other card here. Scoped to a modifier so the other nine
   cards keep their square SVG sizing unaffected. */
.product-card__media img.product-card__photo {
  width: auto;
  height: 152px;
  object-fit: contain;
}

.product-card__name {
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--blue);
}
/* Gold rule grows beneath the product name as the card enters */
.product-card__name::after {
  content: "";
  display: block;
  height: 3px;
  width: 44px;
  margin-top: 0.625rem;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 600ms var(--ease-out) 220ms;
}
.product-card.is-in .product-card__name::after { transform: scaleX(1); }

.product-card__meta {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.product-card__colours {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.125rem;
  min-height: 32px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--red-ink);
}
.product-card__link span { transition: transform var(--dur-fast) var(--ease-out); }
.product-card__link:hover span,
.product-card__link:focus-visible span { transform: translateX(4px); }

.product-card:hover {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
  z-index: 3;
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.product-card:hover .product-card__media { transform: scale(1.05); }
.product-card:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   10. WHY CHOOSE
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.why-card {
  padding: 2rem;
  background: var(--white);
  border: 1px solid rgba(232, 189, 31, 0.75);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.why-card--red  { border-left-color: var(--red); }
.why-card--gold { border-left-color: var(--gold); }
.why-card--blue { border-left-color: var(--blue); }

.why-card:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }

.why-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.25rem;
  color: var(--blue);
  background: var(--gray-100);
  border-radius: 12px;
}
.why-card--red  .why-card__icon { color: var(--white); }
.why-card--gold .why-card__icon { color: var(--blue-deep); }

.why-card__title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--blue);
}
.why-card__body { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }

/* ==========================================================================
   11. QUALITY & CERTIFICATIONS
   ========================================================================== */
.quality {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.quality__copy .h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem); }
.quality__intro { max-width: 54ch; margin-top: 1rem; color: var(--muted); }

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.5rem;
  margin-top: 2rem;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.check {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 0.1em;
  border: 2px solid var(--red);
  border-radius: 50%;
}
.check::after {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--red-ink);
  border-bottom: 2px solid var(--red-ink);
  transform: rotate(-45deg);
}

.quality__badges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.badge {
  display: block;
  filter: drop-shadow(0 8px 20px rgba(26, 69, 157, 0.18));
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.badge svg { width: 100%; height: auto; }
.badge--shield { width: 100px; }
.badge--hex    { width: 104px; }
.badge--seal   { width: 108px; grid-column: 1 / -1; justify-self: center; }
.badge:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 12px 28px rgba(232, 189, 31, 0.45));
}

/* ==========================================================================
   12. CTA
   ========================================================================== */
.cta {
  position: relative;
  z-index: 2;
  padding-block: 6rem;
  text-align: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(circle at 30% 20%, rgba(232,189,31,0.12), transparent 55%),
              radial-gradient(circle at 78% 80%, rgba(237,28,36,0.18), transparent 55%);
  pointer-events: none;
  transition: transform 900ms var(--ease-out);
}
.cta:hover::before { transform: scale(1.08) rotate(2deg); }

/* Ghost outlined brand text — depth-2 atmosphere behind the CTA content.
   Thin white stroke on the blue gradient; transparent fill so it never
   competes with the real heading. Masked line entrance is driven by GSAP
   (js/main.js) and only when motion is allowed — at rest it is simply
   visible, so no-JS and reduced-motion users see it statically. */
.cta__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.cta__ghost-line {
  display: block;
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
}

.cta__inner { position: relative; z-index: 1; max-width: 640px; }

.cta__badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: rgba(6, 14, 38, 0.55);
  border: 1px solid rgba(242, 206, 74, 0.35);
  border-radius: 999px;
}
.cta__title {
  margin-top: 1rem;
  font-size: clamp(1.625rem, 1.1rem + 2.1vw, 2rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cta__sub {
  max-width: 48ch;
  margin: 1rem auto 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.cta__note { margin-top: 1.75rem; font-size: 0.8125rem; color: rgba(255,255,255,0.8); }
.cta__note a { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta__note a:hover { color: var(--white); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  padding-top: 4rem;
  color: var(--white);
  background: var(--blue);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding-bottom: 3rem;
}
.site-footer__brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--white);
}

/* The logo's lower bar is #1A459D — the same colour as this footer — so it
   would disappear against the background. Seating the logo on a white plate
   keeps all three brand colours legible instead of knocking the logo out to
   a single flat colour. */
.site-footer__logo {
  display: block;
  height: 40px;
  width: auto;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border-radius: 10px;
  box-sizing: content-box;
}
.site-footer__tagline {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--gold-ink);
  font-weight: 600;
}
.site-footer__address {
  display: grid;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--footer-txt);
}
.site-footer__address a { color: var(--footer-txt); }
.site-footer__address a:hover { color: var(--gold-ink); }

.site-footer__heading {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
}
.site-footer__col ul { display: grid; gap: 0.625rem; }
.site-footer__col ul a {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--gold-ink);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.site-footer__col ul a:hover,
.site-footer__col ul a:focus-visible { color: var(--white); transform: translateX(3px); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(232, 238, 240, 0.22);
}
.site-footer__copy { font-size: 0.75rem; color: var(--footer-txt); }


.to-top {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--blue);
  background: var(--gold);
  border-radius: 10px;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.to-top:hover { background: var(--white); transform: translateY(-3px); }

/* ==========================================================================
   14. ANIMATION PRIMITIVES
   --------------------------------------------------------------------------
   Pre-animation state applies only when JS is active, so a no-JS visitor
   sees fully rendered content.
   ========================================================================== */

/* Floating loop for product artwork */
.float-loop { animation: floatLoop 8s ease-in-out infinite; }
.float-loop--b { animation-duration: 7s;   animation-delay: -1.5s; }
.float-loop--c { animation-duration: 8.5s; animation-delay: -3s; }
.float-loop--d { animation-duration: 7.5s; animation-delay: -4.5s; }
@keyframes floatLoop {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}

.js [data-reveal] { transition-property: opacity, transform, clip-path; }

/* fade + slide */
.js [data-reveal="fade-slide"] { opacity: 0; transform: translateY(40px); }

/* offset diagonal */
.js [data-reveal="offset-diagonal"] {
  opacity: 0;
  transform: translate(-26px, 26px) rotate(-1.5deg);
}

/* elastic bounce */
.js [data-reveal="elastic"] { opacity: 0; transform: scale(0.8); }

/* scale + fade */
.js [data-reveal="scale-fade"] { opacity: 0; transform: scale(0.9); }

/* --- clip-path reveals ---------------------------------------------------
   These run as keyframes rather than transitions, and deliberately carry NO
   clip-path before they start. An element clipped to zero area has an empty
   intersection rectangle, so IntersectionObserver would never report it as
   visible and the reveal could never be triggered. Holding the clip inside
   the keyframe avoids that deadlock.
   ------------------------------------------------------------------------ */
.js [data-reveal="clip-birth"],
.js [data-reveal="iris"],
.js [data-reveal="cascade"] { opacity: 0; }

.js [data-reveal="clip-birth"].is-in {
  opacity: 1;
  animation: clipBirth var(--dur) var(--ease-out) var(--delay, 0ms) both;
}
@keyframes clipBirth {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

.js [data-reveal="iris"].is-in {
  opacity: 1;
  animation: irisExpand 1000ms var(--ease-out) var(--delay, 0ms) both;
}
@keyframes irisExpand {
  from { opacity: 0; clip-path: circle(0% at 50% 50%); }
  to   { opacity: 1; clip-path: circle(150% at 50% 50%); }
}

/* Cascade reveals the card with a clip wipe + fade only — deliberately no
   transform. The product cards carry a scroll-parallax transform
   (translate3d(0, var(--py), 0)); animating transform here too would fight it,
   and the switch back to the parallax value at settle could nudge the card a
   few pixels. Keeping the reveal to clip-path + opacity leaves transform
   entirely to the parallax/hover. */
.js [data-reveal="cascade"].is-in {
  opacity: 1;
  animation: cascadeIn var(--dur) var(--ease-out) var(--delay, 0ms) both;
}
@keyframes cascadeIn {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* cascade from right edge.
   Keyframed rather than transitioned so no translateX exists at rest. These
   cards sit flush against the shell's right gutter, and a resting 56px offset
   pushed the document wider than the viewport. */
.js [data-reveal="cascade-right"] { opacity: 0; }
.js [data-reveal="cascade-right"].is-in {
  opacity: 1;
  animation: cascadeRight 900ms var(--ease-elastic) var(--delay, 0ms) both;
}
@keyframes cascadeRight {
  from { opacity: 0; transform: translateX(56px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Top-down clip birth: the section drops in from its top edge like a
   curtain. Used for the stats band (first section after the hero) and the
   CTA finale. Keyframed like the other clip reveals — no resting clip-path,
   so IntersectionObserver can still see the element. */
.js [data-reveal="top-drop"] { opacity: 0; }
.js [data-reveal="top-drop"].is-in {
  opacity: 1;
  animation: topDrop 1100ms var(--ease-out) var(--delay, 0ms) both;
}
@keyframes topDrop {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* slide in from left (list items) */
.js [data-reveal="slide-left"] { opacity: 0; transform: translateX(-24px); }

/* --- Settled state, transition-driven types ----------------------------
   Scoped to the transition types on purpose. A blanket `transform: none`
   here would out-specify .product-card and permanently cancel both the
   scroll parallax and the hover scale. */
.js [data-reveal="fade-slide"].is-in,
.js [data-reveal="offset-diagonal"].is-in,
.js [data-reveal="elastic"].is-in,
.js [data-reveal="scale-fade"].is-in,
.js [data-reveal="slide-left"].is-in {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal="elastic"].is-in {
  transition-timing-function: var(--ease-elastic);
  transition-duration: 900ms;
}

/* will-change is applied only while a reveal is running, then stripped by JS */
.is-animating { will-change: opacity, transform, clip-path; }

/* Once a reveal has finished, retire the keyframe and drop clip-path. Holding
   clip-path at inset(0) would clip the element's own box-shadow, and holding
   the animation would keep overriding the card's parallax/hover transform. */
.is-settled {
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

/* --- Text animations --------------------------------------------------- */
/* split converge: words fly in from the outside and settle toward centre.
   The pre-animation translateX (up to ±150px) sits outside the heading box;
   clip here so those offscreen words can’t expand document scrollWidth and
   create horizontal page scroll on narrow viewports. */
.js [data-anim="split-converge"] {
  overflow: hidden;
}
.js [data-anim="split-converge"] .w {
  opacity: 0;
  transform: translateX(var(--from, 0)) translateY(6px);
}
.js [data-anim="split-converge"].is-in .w {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out) var(--wd, 0ms),
              transform 900ms var(--ease-out) var(--wd, 0ms);
}

/* Word-by-word lighting: each word starts gently dimmed and flashes gold as
   it enters. The dim state is 0.7 opacity, not near-zero: below-the-fold words
   have not been revealed yet, and an accessibility scanner evaluates them in
   that resting state. 0.7 keeps the body ink at 5.3:1 and the blue headings
   well past 3:1. The gold flash (#8f6f08 = 4.74:1 on white) only plays once
   opacity has already reached 1, so the lit frames also clear AA. */
.js [data-anim="word-light"] .w {
  opacity: 0.7;
  transform: translateY(8px);
}
.js [data-anim="word-light"].is-in .w {
  opacity: 1;
  transform: none;
  animation: wordLight 660ms var(--ease-out) var(--wd, 0ms) both;
}
@keyframes wordLight {
  0%   { opacity: 0.7; transform: translateY(8px); color: inherit; }
  22%  { opacity: 1;   transform: translateY(4px); color: inherit; }
  40%  { opacity: 1;   transform: translateY(0);   color: #8f6f08; }
  65%  { opacity: 1;   transform: translateY(0);   color: #8f6f08; }
  100% { opacity: 1;   transform: translateY(0);   color: inherit; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* --- Tablet: <= 1023px -------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --section-y: 5.5rem; }

  .about,
  .quality { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  .featured { grid-template-columns: minmax(0, 1fr); }
  .featured__main { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .featured__media img { max-width: 200px; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card:last-child { grid-column: 1 / -1; }

  .quality__badges { grid-template-columns: repeat(3, auto); }
  .badge--seal { grid-column: auto; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__col:first-child { grid-column: 1 / -1; }
}

/* --- Collapse navigation: <= 900px -------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gut) 1.5rem;
    background: var(--white);
    border-bottom: 1px solid rgba(232, 189, 31, 0.55);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    /* Delay only the visibility flip so the closing fade-out stays visible.
       On open (.is-open) this is overridden to 0s, so the drawer becomes
       visible — and therefore focusable — immediately, letting focus move
       into it without waiting out the transition. */
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
  }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav__link {
    display: block;
    padding: 0.9375rem 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--gray-200);
    opacity: 1;              /* no entrance stagger inside the drawer */
    transform: none;
    animation: none !important;
  }
  .primary-nav__link::after { display: none; }
  .primary-nav__link.is-active { color: var(--red-ink); }

  .primary-nav__cta {
    margin-top: 1.25rem;
    width: 100%;
    opacity: 1;
    animation: none !important;
  }
}

/* --- Mobile: <= 767px --------------------------------------------------- */
@media (max-width: 767px) {
  :root { --section-y: 4.5rem; --gut: 1.25rem; --dur: 600ms; }

  /* Slightly smaller logo so it sits comfortably beside the hamburger */
  .brand__logo { height: 28px; }
  .site-footer__logo { height: 34px; }

  /* Shorter scrub track on phones so the sequence isn't an endless scroll. */
  .js .cine { height: 360vh; }
  .cine-actions { flex-direction: column; align-items: stretch; }
  .cine-actions .btn { width: 100%; }

  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }

  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
  .why-grid     { grid-template-columns: minmax(0, 1fr); }
  .why-card:last-child { grid-column: auto; }
  .check-list   { grid-template-columns: minmax(0, 1fr); }

  .about__visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .featured__main { padding: 1.5rem; }
  .mini-card { grid-template-columns: 52px minmax(0, 1fr); padding: 0.875rem 1rem; }
  .mini-card img { width: 52px; }

  .quality__badges { gap: 1rem; }
  .badge--shield { width: 74px; }
  .badge--hex    { width: 78px; }
  .badge--seal   { width: 80px; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer__col:first-child { grid-column: auto; }
  .site-footer__bar { justify-content: center; text-align: center; }

  /* Simplify hover-driven scaling on touch: taps shouldn't leave cards zoomed */
  .product-card:hover { transform: translate3d(0, var(--py, 0px), 0); }
  .product-card:hover .product-card__media { transform: none; }
  .tile:hover, .mini-card:hover, .why-card:hover { transform: none; }
}

/* --- Touch devices: soften motion -------------------------------------- */
@media (pointer: coarse) {
  .float-loop { animation-duration: 10s; }
  .cine__cue { animation: none; }
}

/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements settle immediately in their final state */
  .js [data-reveal],
  .js [data-anim="split-converge"] .w,
  .js [data-anim="word-light"] .w {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .site-header { transform: none !important; }
  .primary-nav__link, .primary-nav__cta { opacity: 1 !important; }
  .accent-underline::after,
  .product-card__name::after { transform: scaleX(1) !important; }
  .scroll-progress { display: none; }

  /* Cinematic hero collapses to a single static viewport: poster frame +
     intro copy only, no scrub track, no scroll-synced stage swapping. */
  .js .cine { height: 100vh; }
  .cine__stage { position: relative; }
  .cine__canvas, .cine__progress, .cine__cue { display: none; }
  .cine__poster { opacity: 1 !important; }
  .cine-stage { transition: none; }
  .cine-stage[data-stage="0"] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .cine-stage:not([data-stage="0"]) { display: none; }
}

/* ==========================================================================
   17. PRODUCT DETAIL PAGES
   --------------------------------------------------------------------------
   Used by products/*.html. Reuses the tokens, header, buttons and footer
   from the sections above; everything here is scoped to .pd-* so it can't
   leak into the home page.
   ========================================================================== */

/* The home page opens with a full-bleed hero that sits under the fixed
   header. Sub-pages start with content, so they need the header's height
   reserved at the top of <main>. */
.page-sub main { padding-top: var(--header-h); }

/* --- Whole-card / whole-row click target ------------------------------- */
/* One real link stretched over its card: keeps a single tab stop and one
   accessible name, while the entire card surface stays clickable. */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* --- Breadcrumb --------------------------------------------------------- */
.pd-breadcrumb {
  padding-block: 1.75rem 0;
  background: var(--white);
}
.pd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pd-breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.pd-breadcrumb li + li::before {
  content: "/";
  color: var(--gray-200);
  font-weight: 700;
}
.pd-breadcrumb a {
  font-weight: 600;
  color: var(--blue);
  text-decoration-color: transparent;
}
.pd-breadcrumb a:hover,
.pd-breadcrumb a:focus-visible { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.pd-breadcrumb [aria-current="page"] { font-weight: 600; color: var(--muted); }

/* --- Hero: media + info ------------------------------------------------- */
/* Carries the shared .section chrome (stacking + white ground) but no block
   padding of its own — .pd-hero owns the vertical rhythm here. */
.section--pd { padding-block: 0; }

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 3.5rem;
  align-items: center;
  /* Only a small bottom pad: the following section already contributes
     var(--section-y) at its top, and stacking both left a ~240px void.
     This keeps the buttons off the section's background boundary. */
  padding-block: 2.5rem 2rem;
}

.pd-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3rem 2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-top: 4px solid var(--gold);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.pd-hero__media img { width: 100%; max-width: 280px; height: auto; }

.pd-hero__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-ink);
  border-radius: 999px;
}

.pd-title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--blue);
  text-wrap: balance;
}
.pd-lede {
  max-width: 52ch;
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Quick-glance chips: neck size, output, material */
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.pd-chip {
  display: inline-flex;
  align-items: center;
  /* A flex container trims the whitespace between its items, so the space
     authored after "Neck:" disappears. gap restores it explicitly. */
  gap: 0.3em;
  /* nowrap keeps a chip's label and value on one line — a wrapped chip
     reads as two unrelated fragments */
  white-space: nowrap;
  padding: 0.4375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
}
.pd-chip strong { font-weight: 800; }

/* Size + quantity selector feeding the WhatsApp quote link */
.pd-size {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.pd-size__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pd-size__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pd-size__select,
.pd-size__qty {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pd-size__select {
  min-width: 11rem;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.875rem;
  cursor: pointer;
}
.pd-size__qty {
  width: 7.5rem;
}
.pd-size__select:hover,
.pd-size__qty:hover {
  border-color: var(--gray-200);
}
.pd-size__select:focus-visible,
.pd-size__qty:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 69, 157, 0.15);
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.btn--outline-blue {
  color: var(--blue);
  background: transparent;
  border-color: var(--blue);
}
.btn--outline-blue:hover,
.btn--outline-blue:focus-visible {
  color: var(--white);
  background: var(--blue);
  transform: scale(1.05);
}

/* --- Specification table ----------------------------------------------- */
.spec-table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.spec-table caption {
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}
.spec-table th,
.spec-table td {
  padding: 0.875rem 1.25rem;
  vertical-align: top;
  border-top: 1px solid var(--gray-200);
}
.spec-table tbody tr:first-child th,
.spec-table tbody tr:first-child td { border-top: 0; }
.spec-table th {
  width: 36%;
  min-width: 170px;
  font-weight: 700;
  color: var(--blue);
  background: var(--gray-100);
}
.spec-table td { color: var(--ink); }

/* --- Feature / application cards --------------------------------------- */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.pd-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pd-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--blue);
}
.pd-card__body { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }

/* --- Product photo gallery ----------------------------------------------
   Real product photography grid (front/angled/side/back/top + detail shots),
   distinct from .pd-grid's application cards: these are image-first tiles
   with a thin caption strip, not text cards. */
.pd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Source photos mix tall product shots (~0.54 aspect) with squarer detail
     shots (~0.6–0.97); align-items: start stops the grid's default stretch
     from padding shorter tiles out with empty space to match their row's
     tallest neighbour. */
  align-items: start;
  gap: 1rem;
  margin-top: 2.5rem;
}
.pd-gallery__item {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pd-gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pd-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}
.pd-gallery__caption {
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blue);
  text-align: center;
  border-top: 1px solid var(--gray-200);
}

@media (max-width: 480px) {
  .pd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Customisation list ------------------------------------------------- */
.pd-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 2rem;
  margin-top: 2rem;
}
.pd-options li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink);
}
.pd-options li strong { color: var(--blue); }

.pd-note {
  margin-top: 2rem;
  padding: 1.125rem 1.375rem;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--gray-100);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
}

/* --- Related products --------------------------------------------------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pd-hero__media { padding: 2.25rem 1.5rem; }
  .pd-hero__media img { max-width: 220px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pd-hero { padding-block: 1.5rem 1.5rem; }
  .pd-options { grid-template-columns: minmax(0, 1fr); }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-actions .btn { width: 100%; }
  .spec-table th { width: auto; }
}

/* ==========================================================================
   18. PRODUCTS CATALOGUE PAGE (products/index.html)
   --------------------------------------------------------------------------
   Reuses .product-grid / .product-card from section 9 so the cards behave and
   respond exactly as they do on the home page. Only the page head, group
   headings and the card badge are new.
   ========================================================================== */

.cat-head { padding-block: 2.5rem 0; }

.cat-lede {
  max-width: 64ch;
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Sub-line under each group heading */
.cat-group-sub {
  max-width: 62ch;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The grids sit below a heading + sub-line rather than the home page's
   centred intro block, so they need their own top offset. */
.cat-grid { margin-top: 2.5rem; }

/* Small status pill on a catalogue card. Taken out of flow and pinned to the
   card corner: in-flow it pushed the product name down, so a badged card's
   title no longer lined up with its unbadged neighbours in the same row.
   Deliberately no z-index — it stays visible under the transparent stretched
   link overlay, so the badge area remains clickable like the rest of the card. */
.cat-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.1875rem 0.625rem;
  font-size: 0.6875rem;         /* 11px — match pd-hero__tag / featured__badge */
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-ink);
  border-radius: 999px;
}
.cat-badge--blue { background: var(--blue); }

/* Keep every catalogue card the same height regardless of how long the
   product name runs, so the "View details" row lines up across a row. */
.cat-grid .product-card__name { min-height: 2.4em; }

@media (max-width: 767px) {
  .cat-head { padding-block: 1.5rem 0; }
  .cat-grid { margin-top: 1.75rem; }
  .cat-grid .product-card__name { min-height: 0; }
}

/* "View all products" button closing the home page's product grid */
.products__all { margin-top: 3rem; text-align: center; }

@media (max-width: 767px) {
  .products__all { margin-top: 2rem; }
  .products__all .btn { width: 100%; }
}

/* Registered legal name above the footer address — slightly stronger than the
   address lines beneath it without competing with the brand wordmark. */
.site-footer__legal {
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
}

/* Sub-label separating the address blocks in the footer (Corporate Office vs
   Works). Same weight as the legal name so the two read as one contact group. */
.site-footer__addr-label {
  margin-top: 0.625rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
}

/* WhatsApp line in the footer contact block. inline-flex to sit the glyph on
   the text baseline; the gold hover matches the other footer links. */
.site-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.site-footer__wa svg { flex: none; }

/* ==========================================================================
   17. IMAGE LIGHTBOX (click-to-zoom on product pages)
   --------------------------------------------------------------------------
   Progressive enhancement: JS adds .is-zoomable + tabindex to gallery/hero
   images. Overlay is injected by js/main.js — these styles only define it.
   ========================================================================== */
.pd-gallery__item img.is-zoomable,
.pd-hero__media img.is-zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgb(8 15 35 / 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__figure {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  max-width: min(1100px, 94vw);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.45);
}
.lightbox__caption {
  max-width: 60ch;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.9;
}
.lightbox__count {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgb(255 255 255 / 0.22); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 640px) {
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
}

/* ==========================================================================
   18. 21ST.DEV-INSPIRED COMPONENTS
   --------------------------------------------------------------------------
   Design patterns ported from 21st.dev community components into the Kasam
   Plast design system (blue #1A459D / gold #E8BD1F / Plus Jakarta Sans):
   - Stats band with animated counters        (21st "Bold Stats")
   - Trusted-by marquee strip                 (21st "Logo Marquee")
   - Testimonial marquee                      (21st "Testimonials Marquee")
   - Spotlight hover on product cards         (21st "Spotlight Card")
   - Bento grid for "Why Choose"              (21st "Bento Grid")
   - Button shine sweep                       (21st button patterns)
   ========================================================================== */

/* --- 18.1 Stats band ---------------------------------------------------- */
.stats {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, #2E5FC7 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 12% 0%, rgb(232 189 31 / 0.14), transparent 60%),
    radial-gradient(700px 320px at 88% 100%, rgb(255 255 255 / 0.08), transparent 60%);
  pointer-events: none;
}
.stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.stat {
  text-align: center;
  padding: 0.5rem 0.25rem;
}
.stat__value {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 30%, #C9D8F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat__value sup { font-size: 0.55em; font-weight: 700; }
.stat__label {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}
@media (max-width: 767px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
}

/* --- 18.2 Trusted-by marquee -------------------------------------------- */
.trusted {
  background: var(--white);
  border-block: 1px solid var(--gray-200);
}
.trusted__label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
/* When JS drives the marquee (scroll-velocity reactive loop), the CSS
   animation is switched off so the two don't fight over transform. */
.marquee__track.is-js-marquee { animation: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.marquee__item:hover { opacity: 1; color: var(--blue); }
.marquee__item svg { flex: none; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 18.4 Spotlight hover on product cards ------------------------------ */
.product-card { overflow: hidden; }
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgb(26 69 157 / 0.10),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.product-card:hover::before { opacity: 1; }
/* Raise card content above the spotlight, but leave .cat-badge alone —
   it must stay position:absolute (pinned to the card corner). The blanket
   `> *` rule was flipping it back to relative and dropping it into flow. */
.product-card > *:not(.cat-badge) { position: relative; z-index: 1; }

/* --- 18.5 Bento grid for "Why Choose" ----------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.why-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  background: var(--white);
  border: 1px solid rgba(232, 189, 31, 0.75);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgb(26 69 157 / 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.why-card:hover::after { opacity: 1; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-card--red   { border-left-color: var(--red-ink); }
.why-card--gold  { border-left-color: var(--gold); }
.why-card--blue  { border-left-color: var(--blue); }
.why-card__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 1.25rem;
  color: var(--white);
  background: var(--blue);
}
.why-card--red .why-card__icon  { background: var(--red-ink); }
.why-card--gold .why-card__icon { background: var(--gold); color: var(--blue-deep); }
.why-card--blue .why-card__icon { background: var(--blue); }
.why-card__title { font-size: 1.125rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
.why-card__body { font-size: 0.9375rem; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* Five why-cards now fill the 3-column grid as two complete rows: the wide
   food-grade card spans two columns so row two closes without an empty cell.
   Scoped to >=901px so the narrower stacked layouts are unaffected. */
@media (min-width: 901px) {
  .why-card:nth-child(4) { grid-column: span 2; }
  .why-card:last-child { grid-column: auto; }
}

/* --- 18.6 Button shine sweep -------------------------------------------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }