/* BerrySure website styles. White is the material: ~80% white / 15% neutral / 5% brand. */

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

/* Mobile browsers flash a translucent blue box over whatever you tap — every
   link, button and card. It lands a beat after the touch and reads as a glitch
   rather than as feedback, and the site has its own hover/active states anyway.
   Only the tap flash goes: :focus-visible rings are untouched, so keyboard users
   keep a visible focus indicator. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; transition: color 0.18s ease-out; }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4 {
  color: var(--text-heading); margin: 0;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}
/* Small eyebrow labels are heading-adjacent — Medium weight of the display face. */
.eyebrow { font-family: var(--font-heading); font-weight: 500; }
p { margin: 0; }

.container { max-width: 1180px; margin: 0 auto; padding-inline: var(--space-6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper-white);
  border-bottom: var(--rule);
  /* Auto-hide on scroll down, slide back on scroll up (site.js toggles .is-hidden) */
  transition: transform 0.35s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: transform;
}
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.header-inner { display: flex; align-items: center; gap: var(--space-6); height: 76px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Sits a little lighter in the 76px bar than the original 42px. The footer mark
   is set separately and stays large — that is where the brand signs off. */
.logo img { height: 36px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
.nav a { color: var(--ink-charcoal); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--violet); }
.nav a[aria-current="page"] { color: var(--violet); font-weight: 600; }
/* The nav CTA button keeps white text (out-specifies the .nav a color above). */
.nav a.btn-primary, .nav a.btn-primary:hover { color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: var(--rule); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; color: var(--ink-charcoal);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 24px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}
.btn-primary { background: var(--brand-accent); color: #fff; }
.btn-primary:hover { background: var(--brand-accent-secondary); color: #fff; }
.btn-primary:active { filter: brightness(0.92); }
.btn-ghost { background: var(--paper-white); border-color: var(--hairline); color: var(--ink-charcoal); }
.btn-ghost:hover { background: var(--brand-accent-tint); border-color: var(--brand-accent); color: var(--brand-accent); }
.btn .arrow { transition: transform 0.18s ease-out; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Badges & chips ---------- */

.badge {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--brand-accent-tint); color: var(--brand-accent);
  font-size: var(--type-caption-size); font-weight: 600;
}
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-width: 96px; max-width: 130px;
  font-size: 13px; font-weight: 600; color: var(--ink-charcoal); line-height: 1.3;
}
.chip svg { width: 26px; height: 26px; color: var(--brand-accent); }

/* ---------- Image placeholder slots ---------- */

.img-slot {
  position: relative;
  background: var(--paper-white);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.img-slot::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--brand-accent-tint), var(--brand-accent-tint)) center / 56% 56% no-repeat;
  border-radius: inherit;
  opacity: 0.55;
  clip-path: ellipse(34% 30% at 50% 50%);
}
.img-slot::after {
  content: attr(data-image);
  position: relative;
  font-size: 12px; color: var(--body-grey);
  background: var(--paper-white);
  border: var(--rule); border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.img-slot.ratio-43 { aspect-ratio: 4 / 3; }
.img-slot.ratio-11 { aspect-ratio: 1 / 1; }
.img-slot.ratio-169 { aspect-ratio: 16 / 9; }

/* ---------- Hero journey (pinned scroll story) ---------- */

.hero-journey { position: relative; background: var(--paper-white); }

#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.journey-viewport { position: relative; z-index: 1; }

.scene {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-8); align-items: center;
  min-height: 86vh; padding-block: var(--space-7);
}
.scene-media .img-slot { width: 100%; max-height: 58vh; }
.scene-copy { max-width: 520px; }

.scene h1, .scene h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800; line-height: 1.07;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.scene .accent { color: var(--brand-accent); }
.scene .scene-sub { color: var(--body-grey); font-size: 17px; max-width: 40ch; }

.scene-final { text-align: left; }
.scene-final .scene-media { display: flex; justify-content: center; }
.scene-final .scene-media img { width: min(380px, 70%); height: auto; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
  color: var(--body-grey); font-size: 13px;
}
.scroll-cue::before { content: ""; width: 44px; height: 1px; background: var(--hairline); }

.journey-dots {
  position: absolute; left: max(18px, calc((100vw - 1180px) / 2 - 40px)); top: 50%;
  transform: translateY(-50%); z-index: 2;
  display: none; flex-direction: column; gap: 10px;
}
.journey-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hairline);
  transition: background-color 0.2s ease-out, height 0.2s ease-out;
}
.journey-dots span.active { background: var(--brand-accent); height: 18px; border-radius: 3px; }

/* Enhanced (JS + motion allowed): scenes overlay inside a pinned viewport */
.hero-journey.is-enhanced .journey-viewport { height: 100vh; overflow: hidden; }
.hero-journey.is-enhanced .scene {
  position: absolute; inset: 0;
  min-height: 0; height: 100%;
  padding-block: 0;
  max-width: 1180px; margin-inline: auto;
  padding-inline: var(--space-6);
}
.hero-journey.is-enhanced .journey-dots { display: flex; }

/* ---------- Trust bar ---------- */

.trust-bar { border-block: var(--rule); background: var(--paper-white); }
.trust-bar .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6); padding-block: var(--space-6);
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item svg { width: 28px; height: 28px; color: var(--violet); flex-shrink: 0; }
.trust-item p { font-size: 14px; font-weight: 600; color: var(--ink-charcoal); line-height: 1.35; }
.trust-item small { display: block; font-weight: 400; color: var(--body-grey); font-size: 13px; }

/* ---------- Sections ---------- */

.section { padding-block: var(--space-9); }
.section-head { max-width: 640px; margin-bottom: var(--space-7); }

/* Full-bleed dark band in the brand's deep purple, with the light tint on the
   icons and white copy. The eyebrow would otherwise stay --brand-accent purple
   and disappear into the background. */
.section-dark { background: var(--violet-light); color: #fff; }
.section-dark .eyebrow { color: var(--violet-tint); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .feature svg { color: var(--violet-tint); }
.section-dark .feature p { color: rgba(255, 255, 255, 0.8); }

/* Centred heading with the detail stacked beneath it. The head's 640px cap is
   lifted so the centring is against the full container, and the table is capped
   and auto-margined so it stays readable rather than stretching the full width. */
.section-centred .section-head { max-width: none; text-align: center; }
.section-centred .spec-table { max-width: 820px; margin-inline: auto; }

/* About lede. One paragraph, one column — no columns and no split, so it reads
   as a single run of prose. Capped at a comfortable measure and centred to sit
   with the centred Quality heading below it. */
.about-lede p {
  max-width: 78ch; margin-inline: auto; text-align: center;
  font-size: 17px; line-height: 1.7; color: var(--ink-charcoal);
}
/* h1 is included so the listing pages (Examination, Blogs) can carry a real
   page heading without changing how it looks — the level is a semantic and SEO
   question, not a visual one. */
.section-head h2,
.section-head h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); margin-bottom: var(--space-3); }
.section-head p { color: var(--body-grey); font-size: 16px; }
.eyebrow {
  display: block; font-size: 13px; font-weight: 600; color: var(--brand-accent);
  margin-bottom: var(--space-3);
}

/* Product line cards */
.line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.line-card {
  border: var(--rule); border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card);
  transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}
.line-card:hover { border-color: var(--brand-accent); }
.line-card .img-slot { aspect-ratio: 4 / 3; }
.line-card h3 { font-size: 22px; font-weight: 700; color: var(--brand-accent); line-height: 1.2; }
.line-card .descriptor { color: var(--body-grey); font-size: 15px; margin-top: -10px; }
.line-card .card-link { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--brand-accent); }
.line-card .card-link:hover { color: var(--brand-accent-secondary); }

/* Feature blocks */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.feature { display: flex; flex-direction: column; gap: 10px; }
.feature svg { width: 26px; height: 26px; color: var(--brand-accent); }
.feature h3 { font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.feature p { color: var(--body-grey); font-size: var(--type-descriptor-size); }

/* Eight-up badge grid. The icons are the supplied artwork — a white disc with
   the mark already inside it — so they are dropped in as images at their own
   colours rather than recoloured like the stroke sprites above. Centred, and
   the row gap is opened past the column gap so the two rows breathe evenly. */
/* More air under the heading than a section-head usually gets — the badges are
   a wide, airy grid and the standard 48px left it crowding the title. Scoped to
   the head that actually precedes this grid, so no other section shifts. */
.section-head:has(+ .feature-grid-badges) { margin-bottom: var(--space-8); }
.feature-grid-badges { row-gap: var(--space-8); }
.feature-grid-badges .feature { align-items: center; text-align: center; gap: 12px; }
.feature-grid-badges .feature h3 { font-size: 17px; }
.feature-icon { width: 56px; height: 56px; display: block; }

/* On a real pointer the caption becomes a tooltip that trails the cursor while
   it is over the badge or its title (js/site.js). It is clipped out of view
   rather than display:none'd, so it is still announced with its heading. Touch
   and keyboard-only devices get no hover, so there the caption stays inline. */
@media (hover: hover) and (pointer: fine) {
  .feature-grid-badges .feature p {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .feature-grid-badges .feature-icon,
  .feature-grid-badges .feature h3 { cursor: default; }
}
.feature-tip {
  position: fixed; top: 0; left: 0; z-index: 90;
  /* Never under its own cursor: the tooltip must not swallow the mouseleave
     that dismisses it. */
  pointer-events: none;
  max-width: 232px;
  padding: 8px 12px; border-radius: 10px;
  /* The purple of the badge artwork itself (#5d4788 in the source SVG), so the
     tooltip reads as part of the icon it came from. White on it is 7.7:1. It is
     close in value to the dark band behind it, so a hairline and a deeper
     shadow do the work of separating the two. */
  background: #5D4788; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px; line-height: 1.45; text-align: left;
  box-shadow: 0 10px 28px rgba(20, 16, 34, 0.38);
  opacity: 0; visibility: hidden;
  transition: opacity 0.14s ease-out, visibility 0.14s;
}
.feature-tip.is-on { opacity: 1; visibility: visible; }

/* Emotive tagline — at most one per page. Only the product pages carry one now. */
.tagline {
  font-size: clamp(20px, 2.6vw, 28px);
  font-style: italic; color: var(--brand-accent);
  max-width: 30ch; margin-inline: auto; line-height: 1.4;
}

/* Quality strip */
.quality-strip { border-block: var(--rule); }
.quality-strip .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-7); gap: var(--space-6);
}
.stat { border-left: var(--rule); padding-left: var(--space-5); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat strong { display: block; font-size: 34px; font-weight: 700; color: var(--ink-charcoal); line-height: 1.1; }
.stat span { color: var(--body-grey); font-size: 14px; }

/* CTA band */
.cta-band { background: var(--brand-accent-tint); border-radius: var(--radius-lg); padding: var(--space-8); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { font-size: 28px; line-height: 1.2; }
.cta-band p { color: var(--body-grey); margin-top: 8px; }

/* Inverted variant — solid brand purple with white copy. OPT-IN per band, not the
   default: only the About page uses it. The primary button has to flip with it,
   since it is normally purple on white and would vanish on this background. */
.cta-band.is-invert { background: var(--brand-accent); }
.cta-band.is-invert h2 { color: #fff; }
.cta-band.is-invert p { color: rgba(255, 255, 255, 0.82); }
.cta-band.is-invert .btn-primary { background: #fff; color: var(--brand-accent); }
.cta-band.is-invert .btn-primary:hover { background: var(--brand-accent-tint); color: var(--brand-accent); }
.cta-band.is-invert .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Product pages ---------- */

.breadcrumb { font-size: 13px; color: var(--body-grey); padding-block: var(--space-5) 0; }
.breadcrumb a { color: var(--body-grey); }
.breadcrumb a:hover { color: var(--brand-accent); }

.product-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-8); align-items: center;
  padding-block: var(--space-7) var(--space-8);
}
.product-hero h1 {
  font-size: clamp(38px, 4.6vw, var(--type-hero-size));
  font-weight: var(--type-hero-weight); line-height: var(--type-hero-leading);
  color: var(--brand-accent);
}
/* Only the material word ("Nitrile" / "Latex") is lightened and slanted — the rest
   of the name stays upright at the hero's Bold 700. 400 is the real vendored Book
   cut; the slant is browser-synthesised, since no ITC italic face exists. It must
   be plain `italic`, because `oblique <angle>` computes fine but does not slant a
   static font at all (measured 0px lean against italic's 13px on an 80px 'N'). */
.product-hero h1 .material { font-weight: 400; font-style: italic; }
.product-hero .descriptor { color: var(--body-grey); font-size: 17px; margin-top: var(--space-3); }
.product-hero .badge-row { margin-block: var(--space-5); }
.product-hero .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.product-hero .img-slot { aspect-ratio: 1 / 1; max-height: 520px; width: 100%; }

/* Tabs */
.tabs { border-bottom: var(--rule); display: flex; gap: var(--space-5); }
.tab-btn {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--body-grey);
  padding: 12px 2px; cursor: pointer;
  transition: color 0.18s ease-out, border-color 0.18s ease-out;
}
.tab-btn:hover { color: var(--brand-accent); }
.tab-btn[aria-selected="true"] { color: var(--brand-accent); border-bottom-color: var(--brand-accent); }
.tab-panel { padding-block: var(--space-7); }
.tab-panel[hidden] { display: none; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.spec-table th, .spec-table td { text-align: left; padding: 14px 16px; border-bottom: var(--rule); font-size: 15px; }
.spec-table th { color: var(--body-grey); font-weight: 500; width: 38%; }
.spec-table td { color: var(--ink-charcoal); }

/* Comparison table (Latex = magenta, Nitrile = violet) */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 16px 18px; border-bottom: var(--rule); text-align: left; font-size: 15px; }
.compare-table thead th { font-weight: 700; font-size: 16px; }
.compare-table thead .col-latex { background: var(--magenta); color: #fff; }
.compare-table thead .col-nitrile { background: var(--violet); color: #fff; }
.compare-table thead th:first-child { background: var(--paper-white); }
.compare-table tbody th { color: var(--body-grey); font-weight: 500; width: 22%; }
.compare-table td.col-latex { color: var(--magenta); }
.compare-table td.col-nitrile { color: var(--violet); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: #FAFBFB; }

/* Choose cards */
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.choose-card { border: var(--rule); border-radius: var(--radius-lg); padding: var(--space-6); }
.choose-card h3 { font-size: 20px; margin-bottom: var(--space-3); }
.choose-card ul { margin: 0 0 var(--space-5); padding-left: 18px; color: var(--body-grey); }
.choose-card li { margin-bottom: 6px; }
.choose-card.card-latex h3 { color: var(--magenta); }
.choose-card.card-nitrile h3 { color: var(--violet); }

/* ---------- Forms ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: start; }
.form-card { border: var(--rule); border-radius: var(--radius-lg); padding: var(--space-6); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink-charcoal); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink-charcoal);
  padding: 11px 14px; border: var(--rule); border-radius: var(--radius-md);
  background: var(--paper-white);
  transition: border-color 0.18s ease-out;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand-accent);
}
.form-note { font-size: 13px; color: var(--body-grey); margin-top: var(--space-3); }
.form-success {
  display: none; margin-top: var(--space-4);
  padding: 14px 16px; border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md); background: var(--brand-accent-tint);
  color: var(--brand-accent); font-weight: 600; font-size: 14px;
}
.form-success.show { display: block; }

.contact-details { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.contact-details .item strong { display: block; font-size: 14px; color: var(--ink-charcoal); margin-bottom: 2px; }
.contact-details .item span { color: var(--body-grey); font-size: 14px; }
/* Email and phone are actionable, but they sit in a list of plain facts — so they
   inherit the surrounding grey rather than taking the site's link colour, and only
   declare themselves on hover/focus. */
.contact-details .item a { color: inherit; text-decoration: none; }
.contact-details .item a:hover { color: var(--brand-accent); text-decoration: underline; }
.contact-details .item a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* ---------- Products landing ---------- */

.product-row {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7); align-items: center;
  padding-block: var(--space-7);
  border-top: var(--rule);
}
.product-row:last-of-type { border-bottom: var(--rule); }
.product-row .img-slot { aspect-ratio: 4 / 3; }
.product-row h3 { font-size: 26px; color: var(--brand-accent); margin-bottom: 6px; }
.product-row .descriptor { color: var(--body-grey); margin-bottom: var(--space-4); }
.product-row .badge-row { margin-bottom: var(--space-6); }

/* Cross-sell */
.cross-sell { border-top: var(--rule); }

/* ---------- Footer ---------- */

/* Light tint of the brand purple. It sits on .site-footer rather than on the
   .container inside it, so the colour runs edge to edge; the dark .footer-bottom
   strip then paints over its own band at the very bottom. The tint itself
   separates the footer from the page, so the hairline rule is dropped. */
/* ---------- Brand sign-off above the footer ----------
   The hands illustration is cropped at the wrists, so sitting it flush to this
   section's bottom edge makes it look like it continues behind the footer.
   overflow:hidden both crops it and hides it while it is translated down
   waiting to animate in (see motion.js). */
.footer-reveal {
  position: relative; overflow: hidden;
  /* Breathing room between the preceding CTA and the sign-off. This stacks on
     that section's own bottom padding, so the visible gap is roughly double. */
  padding-top: var(--space-9);
  text-align: center;
}
/* Its own clipping box, so the line can rise out of nothing. */
.footer-reveal-mask { display: block; overflow: hidden; padding-bottom: 0.12em; }
.footer-reveal-line {
  display: inline-block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--brand-accent);
}
.footer-reveal-line strong { font-weight: 700; }
.footer-reveal-art {
  display: block;
  width: min(702px, 88%); height: auto;
  margin: var(--space-7) auto 0;
}
@media (max-width: 720px) {
  .footer-reveal { padding-top: var(--space-8); }
  .footer-reveal-art { width: 100%; margin-top: var(--space-6); }
}

.site-footer { background: var(--violet-light); margin-top: var(--space-9); }
/* Flush against the sign-off, or the gap breaks the illusion that the hands
   continue behind the footer. Matched through <main>, since the sign-off is the
   last thing inside it and the footer is its sibling — not the sign-off's. */
main:has(.footer-reveal) + .site-footer { margin-top: 0; }
/* --body-grey reads 3.35:1 on this tint — under the 4.5:1 needed at 13-14px.
   Darkened just enough to clear it while still sitting back from the charcoal
   headings. The .theme-product rules further down override this on themed
   pages, where the footer is dark and the text is white. */
/* The footer body carries the same dark as the strip below it, so the two read as
   one block — which means everything inside it has to invert: the logo, the
   headings and the links all sit on dark now. */
.site-footer .footer-brand img { filter: brightness(0) invert(1); }
.site-footer .footer-brand p { color: rgba(255, 255, 255, 0.72); }
.site-footer .footer-col h4 { color: #fff; }
.site-footer .footer-col a { color: rgba(255, 255, 255, 0.72); }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-col p { color: rgba(255, 255, 255, 0.72); }
.footer-inner {
  /* Brand block, then Products, Company and the social column. */
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: var(--space-7); padding-block: var(--space-8);
}
/* Larger than the 42px header mark — the footer is where the brand signs off, so
   it carries the logo at a size that reads rather than matching the nav. */
/* Logo and line share a left edge — both flush to the start of the column. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { color: var(--body-grey); font-size: 14px; max-width: 28ch; text-align: left; }
.footer-col h4 { font-size: 13px; font-weight: 700; color: var(--ink-charcoal); margin-bottom: var(--space-3); }
.footer-col a { display: block; color: var(--body-grey); font-size: 14px; padding-block: 4px; }
.footer-col a:hover { color: var(--violet); }
.footer-col p { color: var(--body-grey); font-size: 13px; line-height: 1.7; }

/* Social row. The marks are the real brand glyphs from Simple Icons (CC0), which
   are solid single paths — hence fill rather than the stroke used by the site's
   own outline icons. Recognisability matters more than house style here. */
/* The optical offset belongs on the ROW, not each icon: the glyph sits ~9px
   inside its 40px tap box, so shifting the row once lines the first glyph up
   with the heading while the icons keep their real spacing between them. */
.social-row {
  display: flex; gap: 4px;
  margin-left: -9px; margin-bottom: var(--space-4);
}
/* No border: the hairline all but vanished against the footer tint, and a bare
   brand mark reads cleaner. The 40px box is kept purely as the tap target.
   The colour is scoped past `.site-footer .footer-col a`, which would otherwise
   drag these down to the grey used for text links. */
/* Scoped through .footer-col so `.footer-col a { display: block }` cannot flatten
   this — without it the glyph is not centred in its tap box. */
.footer-col .social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: color 0.18s ease-out, background-color 0.18s ease-out;
}
.site-footer .footer-col a.social-link { color: rgba(255, 255, 255, 0.88); }
.social-link svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.site-footer .footer-col a.social-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.social-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* WhatsApp's official "Chat on WhatsApp" button, white theme, medium (189x40).
   Their brand guidelines say to use it AS IS — so it is dropped in as an image
   with no recolouring, no restyling and no size change beyond the intrinsic one.
   Scoped through .footer-col so `.footer-col a { display: block }` does not
   stretch it. */
.footer-col .wa-button {
  display: inline-block;
  transition: opacity 0.18s ease-out;
}
.wa-button img { display: block; width: 189px; height: auto; }
.wa-button:hover { opacity: 0.88; }
.wa-button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.theme-product .wa-button:focus-visible { outline-color: #fff; }

/* On the colour-themed product pages the footer sits on a dark gradient. */
.theme-product .footer-col a.social-link { color: rgba(255, 255, 255, 0.88); }
.theme-product .footer-col a.social-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* Full-bleed closing strip in the brand's deep purple. The colour is on the outer
   element so it runs edge to edge; the inner one keeps the container width so the
   text still lines up with everything above it. */
.footer-bottom {
  background: var(--violet-light);
  color: rgba(255, 255, 255, 0.82);
}
/* Hairline in white above the copyright line. It sits on the INNER element so it
   runs to the container width and lines up with the columns above, rather than
   cutting edge to edge across the full-bleed strip. */
.footer-bottom-inner {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-block: var(--space-4);
  /* One line now — centred across the strip rather than pushed to one edge. */
  display: flex; justify-content: center; text-align: center; gap: var(--space-4);
  font-size: 13px;
}

/* ---------- Split-text masking ---------- */

.split-mask { overflow: hidden; }

/* ---------- Motion opt-out ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .line-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); }
  .quality-strip .container { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .product-hero, .contact-grid, .choose-grid, .product-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .scene { grid-template-columns: 1fr; gap: var(--space-5); align-content: center; }
  .scene-media .img-slot { max-height: 38vh; aspect-ratio: 16 / 10; }
  .scene h1, .scene h2 { font-size: clamp(26px, 6.4vw, 38px); }
}

@media (max-width: 720px) {
  .nav {
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--paper-white); border-bottom: var(--rule);
    flex-direction: column; align-items: flex-start;
    padding: var(--space-5) var(--space-6); gap: var(--space-4);
  }
  .nav.open { display: flex; }
  .nav-toggle { display: inline-flex; }

  /* Scrim behind the open menu: the brand's dark purple at the top, fading out
     down the viewport, so the page reads as pushed back without being blacked
     out. It lives on the header because that is the only ancestor both the nav
     and the page sit inside — z-index:-1 puts it under the header's own bar and
     under the menu panel, but still inside the header's z-60 stacking context,
     so it covers everything on the page below.
     Kept inside this media query: the toggle only exists here, and a stale
     .open class after a resize to desktop must not leave the scrim behind.
     Absolute, not fixed: the header's own `will-change: transform` makes it the
     containing block for fixed children, which would collapse the scrim to the
     height of the 76px bar. Hung off the bottom of the bar and given a viewport
     height instead — the header is sticky, so that is the visible page. */
  .site-header::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: -1;
    background: linear-gradient(to bottom,
      rgba(69, 54, 108, 0.94) 0%,
      rgba(69, 54, 108, 0.78) 38%,
      rgba(69, 54, 108, 0.36) 72%,
      rgba(69, 54, 108, 0) 100%);
    /* Taps fall through to the page, as they did before the scrim existed. */
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease-out, visibility 0.28s;
  }
  .site-header:has(.nav.open)::after { opacity: 1; visibility: visible; }
  .header-inner { gap: var(--space-4); }
  .section { padding-block: var(--space-8); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  /* Stacked, the two lines centre rather than sitting flush left — align-items
     as well as text-align, since the flex children stretch full width. */
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
  .journey-dots { display: none !important; }
}

/* ---------- Video scroll story (homepage hero) ---------- */

/* White, not dark: the section now ENDS white, so if the pin spacer ever shows for
   a frame at the seam it matches the page. The film's own dark start is covered by
   .story-video's background, so nothing flashes white at the top either. */
.video-story { position: relative; background: var(--paper-white); }

.story-stage { position: relative; height: 100vh; overflow: hidden; }

.story-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: #2A1C45; /* deep BerrySure purple — no black/white flash */
}

/* Readability scrim — left column only, never over the center action */
.story-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(42, 28, 69, 0.62) 0%,
    rgba(42, 28, 69, 0.34) 34%,
    rgba(42, 28, 69, 0) 62%);
}

.story-copy {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Positioned + full height so the chapters center within the centered column
   (not the full viewport) — giving the reference's left indent on wide screens. */
.story-copy .container { position: relative; height: 100%; }

.story-chapter {
  position: absolute; top: 50%;
  left: var(--space-6); right: auto;
  transform: translateY(-50%);
  max-width: 560px;
}
/* GSAP drives the line-masked reveal (scroll-story.js). Kept hidden until it takes
   over so there is no flash of un-animated copy. */
.story-chapter-inner { opacity: 0; }
/* Motion layer — MotionPath drives its curved (waypoint) entrance transform. */
.story-motion { will-change: transform; }
/* Masked headline lines need a hair of room so descenders (y, g, p) aren't clipped. */
.story-headline .story-line { padding-bottom: 0.08em; }

.story-eyebrow {
  display: flex; align-items: center;
  font-family: var(--font-avantgarde);
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-4);
}
/* Thin accent tick that scales in before the eyebrow — a precise, instrument-like cue. */
.story-tick {
  order: -1;                 /* always render first in the flex eyebrow */
  display: inline-block; flex: none;
  width: 26px; height: 2px; margin-right: 12px;
  background: rgba(255, 255, 255, 0.6);
  transform-origin: left center;
}
.story-headline {
  color: #fff;
  font-family: var(--font-avantgarde);
  font-size: clamp(34px, 4.8vw, 60px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
/* Spec beats — the certification / quality numbers read as a big hero figure. */
.story-headline.story-spec {
  font-size: clamp(44px, 6.5vw, 88px);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Emotive line — the brand's signature italic (Inter, not ITC, which has no italic). */
.story-headline.story-emotive {
  font-family: var(--font-sans);
  font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.95);
}
/* The intro line (chapter 1) is uppercase. */
.story-headline[data-typed] { text-transform: uppercase; letter-spacing: 0; }
/* Blinking typewriter caret at the end of the intro headline. */
.story-headline.story-caret::after {
  content: ''; display: inline-block;
  width: 4px; height: 0.82em; margin-left: 8px;
  background: currentColor; vertical-align: -0.02em;
  animation: story-caret-blink 1.05s steps(1) infinite;
}
@keyframes story-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.story-body {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-avantgarde);
  font-weight: 400;
  font-size: 17px; line-height: 1.55; max-width: 42ch;
}

.story-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.story-ctas a { pointer-events: auto; }
.story-btn-solid { background: #fff; color: var(--violet); border-color: #fff; }
.story-btn-solid:hover { background: var(--violet-tint); color: var(--violet); }
.story-btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.story-btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
.story-ctas a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Progress: thin vertical track on the right edge + chapter counter */
.story-progress {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 38vh; border-radius: 1px;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.story-progress-fill {
  display: block; width: 100%; height: 100%;
  background: #fff; transform-origin: top center; transform: scaleY(0);
}
.story-counter {
  position: absolute; left: var(--space-6); bottom: 26px;
  font-size: 12px; color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}
.story-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.4s ease-out;
}
.story-cue::before { content: ""; width: 44px; height: 1px; background: rgba(255, 255, 255, 0.4); }

/* Static mode — no-JS, reduced motion, or scrub unavailable:
   poster + final chapter + CTAs, fully readable, no animation */
.video-story:not(.is-scrub):not(.is-auto) .story-stage { height: auto; min-height: 82vh; display: flex; align-items: center; }
.video-story:not(.is-scrub):not(.is-auto) .story-video { position: absolute; }
.video-story:not(.is-scrub):not(.is-auto) .story-copy { position: relative; inset: auto; padding-block: var(--space-9); }
.video-story:not(.is-scrub):not(.is-auto) .story-chapter { display: none; }
.video-story:not(.is-scrub):not(.is-auto) .story-chapter.story-final {
  display: block; position: relative; top: auto; transform: none;
}
.video-story:not(.is-scrub):not(.is-auto) .story-chapter.story-final .story-chapter-inner {
  opacity: 1; transform: none; filter: none;
}
.video-story:not(.is-scrub):not(.is-auto) .story-progress,
.video-story:not(.is-scrub):not(.is-auto) .story-counter,
.video-story:not(.is-scrub):not(.is-auto) .story-cue { display: none; }
/* No scrub means no wash animation — hold it white so the closing frame's dark
   copy reads against it instead of against the film. */
.video-story:not(.is-scrub):not(.is-auto) .story-wash { opacity: 1; }

@media (max-width: 960px) {
  /* Copy sits mid-screen; the scrim becomes a soft centre band behind it */
  .story-chapter { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 92%; }
  .story-overlay {
    background: linear-gradient(180deg,
      rgba(42, 28, 69, 0.08) 0%,
      rgba(42, 28, 69, 0.48) 34%,
      rgba(42, 28, 69, 0.48) 66%,
      rgba(42, 28, 69, 0.08) 100%);
  }
  .story-headline { font-size: clamp(26px, 7vw, 38px); }
  .story-body { font-size: 15px; }
  .story-progress { display: none; }
  .story-ctas a { padding: 14px 22px; } /* comfortably tappable */

  /* The film is 16:9. Cover-cropping it into a portrait stage rendered it 1441px
     wide behind a 375px window — only 26% of every frame survived. A 1:1 window
     roughly doubles that to ~56%. Here the film runs itself rather than being
     scrubbed, so the stage is only as tall as the picture and sits directly
     under the header; the captions ride over it. */
  .story-stage { background: #2A1C45; }
  .video-story.is-auto .story-stage { height: auto; }
  .video-story.is-auto .story-video {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%; height: auto; aspect-ratio: 1;
    transform: none;
    display: block;
  }
  /* No wash on this path, so the closing line reads on the film's dark resolve. */
  .video-story.is-auto .story-final .story-headline { color: #fff; }
  .video-story.is-auto .story-final-rule { background: rgba(255, 255, 255, 0.75); }
  .video-story.is-auto .story-cue { display: none; }
}

/* ---------- Blog ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.blog-card {
  display: flex; flex-direction: column;
  border: var(--rule); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-card); color: var(--text-body);
  padding-bottom: var(--space-5);
  transition: border-color 0.18s ease-out;
}
.blog-card:hover { border-color: var(--violet); color: var(--text-body); }
.blog-card .img-slot { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.blog-card > :not(.img-slot):not(.blog-cover) { padding-inline: var(--space-5); }
.blog-card .blog-tag {
  align-self: flex-start; margin-top: var(--space-4);
  font-size: 12px; font-weight: 600; color: var(--violet);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.blog-card h3 { font-size: 19px; line-height: 1.25; margin-top: var(--space-2); color: var(--ink-charcoal); }
.blog-card p { color: var(--body-grey); font-size: 14px; margin-top: var(--space-2); }
.blog-card .blog-more { margin-top: var(--space-4); font-size: 14px; font-weight: 600; color: var(--violet); }

/* Blog article */
.article { max-width: 820px; padding-block: var(--space-5) var(--space-8); }
.article-head { margin-block: var(--space-5) var(--space-7); }
.article-head h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-block: var(--space-3); }
.article-meta { color: var(--body-grey); font-size: 14px; }
.article-body { font-size: 17px; line-height: 1.7; color: var(--ink-charcoal); }
.article-body p { margin-bottom: var(--space-5); }
.article-body h2 { font-size: 26px; margin-block: var(--space-7) var(--space-4); }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- Liquid-glass comparison (examination page) ---------- */

.glass-compare {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #673F8C 0%, #45366C 100%);
}
.glass-compare .section-head h2 { color: #fff; }
.glass-compare .section-head p { color: rgba(255, 255, 255, 0.78); }
.glass-compare .eyebrow { color: #CDB9E6; }

/* Soft light blobs behind the glass — gives the blur something liquid to refract */
.glass-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.glass-blob-1 { width: 440px; height: 440px; background: #8A5CB8; top: -140px; right: -90px; opacity: 0.6; }
.glass-blob-2 { width: 380px; height: 380px; background: #CDB9E6; bottom: -160px; left: -110px; opacity: 0.35; }
.glass-blob-3 { width: 280px; height: 280px; background: #FFFFFF; top: 42%; left: 56%; opacity: 0.16; }
@media (prefers-reduced-motion: no-preference) {
  .glass-blob-1 { animation: glass-drift 24s ease-in-out infinite alternate; }
  .glass-blob-2 { animation: glass-drift 30s ease-in-out -8s infinite alternate; }
  .glass-blob-3 { animation: glass-drift 19s ease-in-out -4s infinite alternate; }
}
@keyframes glass-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(44px, -32px); }
}

/* The glass panel itself */
.glass-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(23, 14, 40, 0.35);
  padding: var(--space-5);
}

/* Comparison tables are wider than a phone, so they scroll sideways. The default
   OS scrollbar renders as a bright grey slab straight across the design, so both
   variants get a transparent track and a thin thumb tinted to their own surface —
   quiet, but still there as an affordance that the table scrolls. */
.glass-scroll, .table-scroll { overflow-x: auto; scrollbar-width: thin; }
.glass-scroll::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 6px; }
.glass-scroll::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track { background: transparent; }
.glass-scroll::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { border-radius: 3px; }

/* On the glass panel — faint white, so it reads as part of the panel. */
.glass-scroll { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.glass-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
.glass-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); }

/* On a white article page that same white would vanish — tinted with the ink. */
.table-scroll { scrollbar-color: rgba(46, 56, 56, 0.24) transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(46, 56, 56, 0.24); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(46, 56, 56, 0.38); }

.glass-table { width: 100%; border-collapse: collapse; color: #fff; min-width: 560px; }
.glass-table th, .glass-table td {
  padding: 14px 18px; text-align: left; font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.glass-table thead th {
  font-family: var(--font-heading); font-size: 17px; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}
.glass-table tbody th { color: rgba(255, 255, 255, 0.62); font-weight: 500; width: 26%; }
.glass-table td { color: rgba(255, 255, 255, 0.94); width: 37%; }
.glass-table tbody tr:last-child th, .glass-table tbody tr:last-child td { border-bottom: 0; }
.glass-table tbody tr { transition: background-color 0.18s ease-out; }
.glass-table tbody tr:hover { background: rgba(255, 255, 255, 0.07); }

.glass-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 9px;
}
.dot-latex { background: #F272A8; box-shadow: 0 0 12px rgba(242, 114, 168, 0.8); }
.dot-nitrile { background: #C9B2EA; box-shadow: 0 0 12px rgba(201, 178, 234, 0.8); }

.glass-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.glass-btn {
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.glass-btn:hover { background: rgba(255, 255, 255, 0.24); color: #fff; border-color: rgba(255, 255, 255, 0.5); }

@media (max-width: 720px) {
  .glass-panel { padding: var(--space-4); }
  .glass-table th, .glass-table td { padding: 12px 12px; font-size: 14px; }
}

/* ============================================================
   Product page themes — each product page is fully colour-themed.
   A page sets: class="theme-product theme-<line>" on <body>.
     --pt-top    gradient start (upper)
     --pt-deep   gradient end (lower) + page base
     --pt-ink    dark colour used for text on white buttons
     --pt-accent highlight colour (white, or the line's bright tone)
   ============================================================ */

body.theme-nitrile  { --pt-top: #673F8C; --pt-deep: #45366C; --pt-ink: #45366C; --pt-accent: #FFFFFF; }
body.theme-latex    { --pt-top: #CE2351; --pt-deep: #8F273A; --pt-ink: #8F273A; --pt-accent: #FFFFFF; }
/* Surgical: #79C9D9 is too light to carry white text, so it becomes the
   highlight accent while the deep teal carries the page. */
body.theme-surgical { --pt-top: #2D575E; --pt-deep: #1D3B41; --pt-ink: #2D575E; --pt-accent: #79C9D9; }

body.theme-product {
  background: linear-gradient(160deg, var(--pt-top) 0%, var(--pt-deep) 100%);
  background-attachment: fixed;
  color: rgba(255, 255, 255, 0.90);
  /* accents flip to light so var()-driven bits (icons, underlines, links) read on colour */
  --brand-accent: #ffffff;
  --brand-accent-secondary: rgba(255, 255, 255, 0.85);
  --brand-accent-tint: rgba(255, 255, 255, 0.14);
  --link: #ffffff;
  --link-hover: rgba(255, 255, 255, 0.8);
}
.theme-product h1, .theme-product h2, .theme-product h3, .theme-product h4 { color: #fff; }

/* Header stays WHITE on every page — only the logo colour changes per product
   line (each page points at its own logo-*.svg). */
.theme-product .site-header {
  background: var(--paper-white);
  border-bottom: var(--rule);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.theme-product .logo img { filter: none; }
.theme-product .nav a { color: var(--ink-charcoal); }
.theme-product .nav a:hover, .theme-product .nav a[aria-current="page"] { color: var(--pt-ink); }
.theme-product .nav-toggle { color: var(--ink-charcoal); border-color: var(--hairline); }

/* Breadcrumb */
.theme-product .breadcrumb, .theme-product .breadcrumb a { color: rgba(255, 255, 255, 0.68); }
.theme-product .breadcrumb a:hover { color: #fff; }

/* Product hero */
.theme-product .product-hero h1 { color: #fff; }
.theme-product .descriptor { color: rgba(255, 255, 255, 0.78); }
.theme-product .badge { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* Buttons on colour */
.theme-product .btn-primary { background: #fff; color: var(--pt-ink); }
.theme-product .btn-primary:hover { background: rgba(255, 255, 255, 0.86); color: var(--pt-ink); }
.theme-product .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.theme-product .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* Image placeholders → translucent on colour */
.theme-product .img-slot { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.24); }
.theme-product .img-slot::after { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.72); }

/* Tabs — active underline uses the line's highlight colour */
.theme-product .tabs { border-bottom-color: rgba(255, 255, 255, 0.22); }
.theme-product .tab-btn { color: rgba(255, 255, 255, 0.6); }
.theme-product .tab-btn:hover { color: #fff; }
.theme-product .tab-btn[aria-selected="true"] { color: #fff; border-bottom-color: var(--pt-accent); }

/* Feature blocks */
.theme-product .feature h3 { color: #fff; }
.theme-product .feature p { color: rgba(255, 255, 255, 0.7); }
.theme-product .feature svg { color: var(--pt-accent); }

/* Emotive tagline */
.theme-product .tagline { color: rgba(255, 255, 255, 0.95); }

/* Spec table */
.theme-product .spec-table th { color: rgba(255, 255, 255, 0.62); }
.theme-product .spec-table td { color: #fff; }
.theme-product .spec-table th, .theme-product .spec-table td { border-bottom-color: rgba(255, 255, 255, 0.16); }

/* Cross-sell cards → glass */
.theme-product .cross-sell { border-top-color: rgba(255, 255, 255, 0.18); }
.theme-product .line-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); }
.theme-product .line-card:hover { border-color: rgba(255, 255, 255, 0.5); }
.theme-product .line-card h3 { color: #fff; }
.theme-product .line-card .descriptor { color: rgba(255, 255, 255, 0.72); }
.theme-product .line-card .card-link { color: var(--pt-accent); }

/* Footer */
/* Themed pages take their own deep tone, so their footer merges with their own
   bottom strip the same way the default one does — rather than dropping a purple
   block under a teal or red page. */
.theme-product .site-footer { background: var(--pt-deep); border-top: 0; }
.theme-product .footer-brand img { filter: brightness(0) invert(1); }
.theme-product .footer-brand p, .theme-product .footer-col p { color: rgba(255, 255, 255, 0.7); }
.theme-product .footer-col h4 { color: #fff; }
.theme-product .footer-col a { color: rgba(255, 255, 255, 0.72); }
.theme-product .footer-col a:hover { color: #fff; }
/* The colour-themed product pages take their own deep tone here, so the strip
   closes the page in the page's colour rather than dropping a purple band under
   a teal or red footer. */
.theme-product .footer-bottom { background: var(--pt-deep); color: rgba(255, 255, 255, 0.78); }

/* ---------- Product cards (full-image, copy at the bottom, static) ---------- */

.pcard {
  --pc-color: var(--violet);
  --pc-tint: var(--violet-tint);
  position: relative;
  display: flex; flex-direction: column;
  height: 480px; padding: 12px;
  border-radius: 24px; overflow: hidden;
  background: var(--pc-color);
}
.pcard-surgical { --pc-color: #2D575E; --pc-tint: var(--teal-tint); }
.pcard-latex    { --pc-color: #CE2351; --pc-tint: var(--magenta-tint); }
.pcard-nitrile  { --pc-color: #673F8C; --pc-tint: var(--violet-tint); }

/* Image placeholder fills the space ABOVE the product name */
.pcard-media {
  position: relative; flex: 1 1 auto; min-height: 0;
  border-radius: 16px; overflow: hidden;
  margin-bottom: 16px;
}
.pcard-media .img-slot {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  background: var(--pc-tint);
}
.pcard-media .img-slot::before { display: none; }
/* Real photography in the card's media well — fills it however the card is sized,
   which differs a lot between the desktop pin and the mobile outlet. */
.pcard-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--pc-tint);
}

/* Copy sits at the bottom of the card, below the image */
.pcard-text { padding: 0 8px 8px; }
.pcard-title {
  font-size: 24px; line-height: 1.12;
  color: #fff;
  margin-bottom: 8px;
}
.pcard-title em { font-family: var(--font-sans); font-style: italic; font-weight: 500; }
.pcard-desc {
  font-size: 14px; line-height: 1.5; max-width: 32ch;
  color: rgba(255, 255, 255, 0.82);
}

/* Compact CTA pill */
.pcard-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* Spacing for the trailing icon — this is not a .btn, so it does not inherit
     the button styles that normally handle it. No hover nudge here: the product
     cards are deliberately static. */
  gap: 6px;
  margin-top: 14px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: #fff; color: var(--pc-color);
  font-weight: 600; font-size: 13.5px;
  box-shadow: 0 2px 10px rgba(20, 16, 34, 0.10);
}
/* Material Symbols arrow_circle_right, inlined as a path so no webfont is loaded.
   It is filled, not stroked, and picks up the pill's own colour. */
.pcard-btn-icon {
  width: 17px; height: 17px; flex: none;
  fill: currentColor; stroke: none;
}

@media (max-width: 960px) {
  .pcard { height: 420px; }
}

/* ---------- Product imagery ----------
   The photography carries its own baked-in captions ("RELIABLE BARRIER" etc), so
   these are presented bare — no figcaption, or the text would read twice. All the
   source renders are square, so the 1:1 ratio here is the images' own. */

.product-shot {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  /* 24px, matching .pcard and .glass-panel. The 16px --radius-lg used elsewhere
     is meant for small surfaces and barely registers on a 500px+ image. */
  border-radius: 24px;
}
/* Gallery on the left, copy on the right. Done with `order` rather than by
   reordering the markup so the <h1> stays first in the document — the visual
   swap applies only where the hero is actually two columns; stacked, the copy
   still leads. */
@media (min-width: 961px) {
  .product-hero .product-media { order: -1; }
}

/* Stacked, the hero reads product name -> gallery -> everything else, the usual
   product-page order. `display: contents` dissolves the copy wrapper so its
   children become grid items in their own right and can be ordered around the
   gallery — it is a plain div carrying no semantics, so nothing is lost by
   removing its box, and the markup stays shared with the desktop layout.
   The children's own margins are dropped in favour of one uniform grid gap,
   otherwise margin and gap would stack. */
@media (max-width: 960px) {
  .product-hero { gap: var(--space-5); }
  .product-hero > div:not(.product-media) { display: contents; }
  .product-hero h1 { order: 1; }
  .product-hero .product-media { order: 2; }
  .product-hero .descriptor { order: 3; margin-top: 0; }
  .product-hero .badge-row { order: 4; margin-block: 0; }
  .product-hero .cta-row { order: 5; }
}

/* Preview + thumbnail strip. Every shot for the line lives in this one viewer
   rather than a separate gallery further down the page. */
.product-media {
  display: grid; gap: var(--space-4);
  width: 100%; max-width: 520px; margin-inline: auto;
}
/* One continuous strip rather than a wrapping grid — it scrolls sideways, with
   arrows for mouse users and a swipe for touch. The scrollbar is hidden because
   the arrows carry the affordance; keyboard users get the strip scrolled for them
   (see keepInView in site.js), so nothing is unreachable. */
/* min-width:0 is load-bearing: as a grid item this defaults to min-width:auto,
   which refuses to shrink below the strip's full content width — the thumbs then
   overflow the column instead of scrolling inside it. */
.product-thumbs-wrap { position: relative; min-width: 0; }
.product-thumbs {
  display: flex; flex-wrap: nowrap; gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* No scroll-snap: it overrides the exact offset keepInView scrolls to when you
     arrow-key onto an off-screen thumb, snapping back to the nearest thumb edge
     and leaving the selected one clipped. A thumbnail rail gains nothing from it. */
  scrollbar-width: none;
}
.product-thumbs::-webkit-scrollbar { display: none; }

.thumb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(20, 16, 34, 0.62);
  color: #fff; cursor: pointer;
  transition: opacity 0.18s ease-out;
}
.thumb-prev { left: -6px; }
.thumb-next { right: -6px; }
.thumb-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thumb-nav:hover { background: rgba(20, 16, 34, 0.82); }
.thumb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Faded out rather than removed, so the strip never reflows as you scroll it. */
.thumb-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  /* Touch swipes the strip directly; the arrows would only eat into it. */
  .thumb-nav { display: none; }
}
.product-thumb {
  flex: 0 0 auto;
  width: 60px; height: 60px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: none; overflow: hidden; cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.18s ease-out, border-color 0.18s ease-out;
}
.product-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-thumb:hover { opacity: 1; }
.product-thumb[aria-current="true"] { opacity: 1; border-color: var(--brand-accent); }
.product-thumb:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
/* On the colour-themed product pages the hairline would disappear into the wash. */
.theme-product .product-thumb { border-color: rgba(255, 255, 255, 0.3); }
.theme-product .product-thumb[aria-current="true"] { border-color: #fff; }
.theme-product .product-thumb:focus-visible { outline-color: #fff; }

.product-shot.is-swapping { animation: shot-in 0.28s ease-out; }
@keyframes shot-in { from { opacity: 0.35; } to { opacity: 1; } }

@media (max-width: 560px) {
  .product-thumb { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-shot.is-swapping { animation: none; }
}

/* ---------- Blog imagery ---------- */

/* Card cover — fills the top of the blog card */
.blog-cover {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Article cover — sits under the article header */
.article-cover {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-7);
}

/* ---------- Final hero frame: the film washes to white ----------
   The film resolves to a flat dark colour, then .story-wash takes the stage from
   dark to white — not as a flat crossfade but as a bloom seeded on the white type
   of the last film chapter, which spreads outward until it fills the frame.
   scroll-story.js drives it by writing a radial-gradient mask on this element.
   The closing line and the three product lines then play out on that white, and
   the page continues white from there — so the trust bar needs no special case.

   Stacking inside the pinned stage:
     video 0 · scrim 1 · film chapters 2 · wash 3 · closing frame 4 · cue 5
   The wash sits ABOVE the film chapters so the last film line dissolves into the
   white along with the picture, and BELOW the closing frame so that reads on top. */

.story-stage { isolation: isolate; }
.story-video { z-index: 0; }
.story-overlay { z-index: 1; }
.story-chapter { z-index: 2; }
.story-wash {
  position: absolute; inset: 0; z-index: 3;
  background: var(--paper-white);
  opacity: 0;
  pointer-events: none;
}
/* The last film line scatters ON TOP of the spreading white rather than dissolving
   into it like the earlier chapters, so it sits above the wash. Its characters
   recolour to ink in scroll-story.js as the white overtakes them. */
.story-chapter.story-scatter { z-index: 4; }
.story-char { will-change: transform, opacity; }
.story-cue { z-index: 5; }

.story-chapter.story-final {
  z-index: 4;
  left: 0; right: 0;
  /* Stays vertically centred at every width — the narrow-screen .story-chapter
     rule drops the other chapters to the lower third, but this frame is a
     composed centred layout. */
  top: 50%; bottom: auto; transform: translateY(-50%);
  max-width: none;
  text-align: center;
  padding-inline: var(--space-6);
}
.story-final .story-chapter-inner {
  display: flex; flex-direction: column; align-items: center;
}
.story-final .story-headline {
  color: var(--ink-charcoal);
  font-size: clamp(38px, 6vw, 76px);
  margin-bottom: 0;
}
/* Thin rule that draws out under the closing line */
.story-final-rule {
  display: block;
  height: 2px;
  width: min(220px, 40vw);
  margin: var(--space-5) auto 0;
  background: var(--violet);
  transform: scaleX(0);
}

/* The three product lines, revealed on the white as you keep scrolling. */
.story-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-7);
}
.story-cards .pcard { height: clamp(260px, 42vh, 420px); pointer-events: auto; }
/* Centred in both homes — inside the pin the surrounding .story-final centres
   text for them, but in .cards-outlet there is no such ancestor, so it is set
   here explicitly rather than inherited. */
.story-cards .pcard-text { text-align: center; }
.story-cards .pcard-title { font-size: clamp(17px, 1.5vw, 22px); }
/* The measure cap stays for readability; auto margins centre the block itself. */
.story-cards .pcard-desc { font-size: 13px; margin-inline: auto; }

@media (max-width: 960px) {
  .story-cards { gap: var(--space-3); margin-top: var(--space-6); }
  .story-cards .pcard { height: clamp(200px, 32vh, 300px); padding: 8px; border-radius: 16px; }
  .story-cards .pcard-desc { display: none; }
  .story-cards .pcard-btn { margin-top: 8px; padding: 7px 13px; font-size: 12px; }
}
@media (max-width: 720px) {
  /* The chapter is positioned against the container's PADDING box, so the
     container's gutter does not apply to it — this padding is the only thing
     keeping the closing frame off the screen edges. */
  .story-chapter.story-final { padding-inline: 20px; }
  .story-final .story-headline { font-size: clamp(26px, 8vw, 34px); }
  /* One column, cards keeping their own 1:1 proportions (image above copy).
     They live in .cards-outlet at this width, so they take the full container
     rather than being squeezed to fit alongside the closing line. */
  .story-cards {
    grid-template-columns: 1fr; justify-items: center;
    gap: var(--space-4); margin-top: 0;
  }
  .story-cards .pcard {
    width: 100%; height: auto; aspect-ratio: 1;
    flex-direction: column;
    padding: 12px; border-radius: 18px;
  }
  .story-cards .pcard-media {
    flex: 1 1 auto; width: auto; height: auto;
    margin-bottom: 10px; border-radius: 12px;
  }
  .story-cards .pcard-text { flex: 0 0 auto; padding: 0 6px 4px; }
  /* Full-width cards have room for the copy the squeezed ones could not fit. */
  .story-cards .pcard-title { font-size: 19px; line-height: 1.15; margin-bottom: 6px; }
  .story-cards .pcard-desc { display: block; font-size: 13px; max-width: none; }
  .story-cards .pcard-btn { margin-top: 12px; padding: 8px 16px; font-size: 13px; }
}

/* The section the cards move into below 720px. */
.cards-outlet { padding-block: var(--space-8); }
.cards-outlet[hidden] { display: none; }
.story-cards.is-outlet { margin-top: 0; }

/* Play / pause for the self-running film. Only exists in autoplay mode, where it
   is the one control people have over the picture — so it stays a full 44px tap
   target and never hides behind a hover state. */
.story-playpause {
  display: none;
  position: absolute; z-index: 6;
  right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(20, 16, 34, 0.55);
  color: #fff;
  cursor: pointer;
}
.video-story.is-auto .story-playpause { display: flex; }
.story-playpause svg { width: 18px; height: 18px; }
.story-playpause .pp-pause {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}
.story-playpause .pp-play { fill: currentColor; stroke: none; display: none; }
.story-playpause.is-paused .pp-pause { display: none; }
.story-playpause.is-paused .pp-play { display: block; }
.story-playpause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Reduced motion: the story renders statically, so the closing frame must be
   readable with no animation at all — white stage, rule drawn, cards in place. */
@media (prefers-reduced-motion: reduce) {
  .story-final-rule { transform: none; }
  .story-wash { opacity: 1; }
}