/* ============================================================
   SAN MED — Design System
   Brand: teal · deep navy · white  (restrained, clinical, premium)
   Type: Figtree (display) / Noto Sans (body)
   Built to the 10K Checklist: point-of-view, real type, restrained
   color, breathing hierarchy, intentional imagery, quiet motion,
   designed mobile, invisible technical quality.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #06223a;   /* darkest — hero / footer */
  --navy-800: #0a2e4d;
  --navy-700: #0e3a60;
  --navy-600: #134e74;
  --teal-700: #066b85;
  --teal-600: #0891b2;   /* primary */
  --teal-500: #16a5c4;
  --teal-400: #38bdd8;
  --teal-300: #7dd6e6;
  --teal-100: #d3f1f7;
  --teal-50:  #ecfbfe;

  /* Neutrals */
  --ink:      #0d2233;   /* body text on light */
  --ink-soft: #43586a;   /* secondary text */
  --ink-mute: #6b7f8e;   /* tertiary / captions */
  --line:     #e2ebf0;   /* hairline borders */
  --line-soft:#eef4f7;
  --paper:    #f6fafb;   /* off-white surface */
  --paper-2:  #eef6f9;
  --white:    #ffffff;

  /* Semantic */
  --bg:        var(--white);
  --surface:   var(--white);
  --primary:   var(--teal-600);
  --primary-ink: var(--white);
  --focus:     var(--teal-500);
  --danger:    #d64550;

  /* Type */
  --font-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-body:   1.0625rem;
  --fs-lead:   clamp(1.125rem, 0.9rem + 0.9vw, 1.375rem);
  --fs-h3:     clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-h2:     clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-h1:     clamp(2.6rem, 1.7rem + 4.2vw, 5.1rem);
  --fs-display:clamp(3rem, 1.6rem + 6vw, 6.5rem);

  /* Spacing (4/8 rhythm) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Radii / shadow / motion */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13,34,51,.05), 0 2px 6px rgba(13,34,51,.04);
  --shadow-md: 0 6px 18px rgba(13,34,51,.07), 0 2px 6px rgba(13,34,51,.05);
  --shadow-lg: 0 24px 60px rgba(6,34,58,.16), 0 8px 24px rgba(6,34,58,.10);
  --shadow-teal: 0 14px 34px rgba(8,145,178,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;

  --container: 1200px;
  --container-wide: 1320px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bg-paper { background: var(--paper); }
.bg-navy { background: var(--navy-900); color: #cfe2ee; }
.center { text-align: center; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-600);
  /* flex-wrap is essential: without it a long eyebrow cannot break and
     forces its grid column wider than the viewport on phones */
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.eyebrow--center { justify-content: center; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); font-weight: 700; }
.h-display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.03em; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.18; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--ink-mute); }
.section-head { max-width: 70ch; }
.section-head .lead { margin-top: var(--sp-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: .9rem 1.5rem; border-radius: var(--r-pill);
  min-height: 48px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-teal); }
.btn--primary:hover { background: var(--teal-700); transform: translateY(-2px); box-shadow: 0 20px 40px rgba(8,145,178,.34); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--teal-400); color: var(--teal-700); transform: translateY(-2px); background: var(--teal-50); }
.btn--on-dark { background: #fff; color: var(--navy-900); }
.btn--on-dark:hover { background: var(--teal-300); transform: translateY(-2px); }
.btn--outline-light { border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { background: rgba(255,255,255,.92); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
/* 3-column grid: brand left, nav centred in the header, actions right.
   Flex + space-between pushed the nav next to the logo; grid centres it. */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); width: 100%; }
.header-inner > .brand { justify-self: start; }
.header-inner > .nav { justify-self: center; }
.header-inner > .header-actions { justify-self: end; }
/* Let the header run wider than the body grid so the actions sit closer to the edge */
.site-header .container { max-width: var(--container-wide); padding-inline: clamp(1rem, 2.5vw, 1.75rem); }
.header-actions { margin-left: auto; }
.nav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 2rem); }
.nav a {
  font-family: var(--font-display); font-weight: 500; font-size: .98rem; color: var(--ink-soft);
  padding: .5rem .25rem; position: relative; transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--teal-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
/* The in-nav quote button is for the mobile drawer only; header-actions holds the desktop one */
.nav > .btn--quote, .nav > .btn--login { display: none; }
.nav-toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.nav-toggle svg { width: 26px; height: 26px; color: var(--navy-900); }

/* ---------- Brand / Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; }
/* Brand lockup: static wordmark + independently animated DNA helix.
   The helix is a separate layer positioned at its exact original spot
   (x 265-470 of the 730px artwork), so the mark stays pixel-true. */
.brand__lockup {
  position: relative; display: block;
  height: 46px; aspect-ratio: 730 / 152;   /* preserves the artwork's proportions */
}
.brand__word,
.brand__helix { position: absolute; top: 0; height: 100%; width: auto; display: block; }
.brand__word { left: 0; width: 100%; }
/* Helix sits in the exact band it occupied in the original artwork.
   NOTE: this is a raster image, so it is deliberately NOT given a full
   rotateY — a flat image rotated past ~45deg foreshortens and collapses
   to a line edge-on. The limited turn below reads as motion while the
   artwork stays undistorted. True 360deg rotation needs a frame
   sequence exported from the original 3D source. */
.brand__helix {
  left: 36.3%; width: 28.08%; height: 100%;
  transform-origin: 50% 50%;
  animation: helix-turn 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes helix-turn {
  0%, 100% { transform: perspective(240px) rotateY(-26deg); }
  50%      { transform: perspective(240px) rotateY(26deg); }
}
.brand:hover .brand__helix,
.footer-logo-chip:hover .brand__helix { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .brand__helix { animation: none; } }

/* Footer: logo sits on a white chip so it reads on navy */
.footer-logo-chip { display: inline-block; background: #fff; border-radius: var(--r-sm); padding: .5rem .85rem; }
.footer-logo-chip .brand__lockup { height: 36px; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; color: var(--navy-900); line-height: 1; }
.brand__name b { color: var(--teal-600); font-weight: 800; }
.brand__sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: rgba(255,255,255,.6); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #eaf4fa; overflow: hidden;
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(56,189,216,.30), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(8,145,178,.28), transparent 55%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 48%, #082a44 100%);
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ---------- DNA hero variant ---------- */
.hero--dna .hero__inner {
  grid-template-columns: 1fr;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem);
  min-height: clamp(520px, 74vh, 760px);
  align-content: center;
}
/* min-width:0 stops a long word from blowing the grid column out past the viewport */
.hero--dna .hero__copy { max-width: 46rem; min-width: 0; }
/* The 3D helix sits behind the copy, faded on the left for legibility */
.hero__dna {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.75) 52%, #000 72%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.75) 52%, #000 72%);
}
/* Buttons sit lower, per the brief */
/* The copy column fills the banner and the CTA is pushed to its foot with
   margin-top:auto, so the buttons sit at the bottom edge at any height
   instead of being positioned by a guessed margin. Three competing
   margin-top rules used to fight over this. */
/* align-items must be stretch too - the base .hero__inner sets it to
   center, which sizes the copy column to its content and leaves the CTA
   floating mid-banner instead of at the foot. */
.hero--dna .hero__inner { align-content: stretch; align-items: stretch; }
.hero--dna .hero__copy { display: flex; flex-direction: column; }
.hero .eyebrow { color: var(--teal-300); }
.hero h1 { color: #fff; margin-top: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--teal-300); }
.hero__lead { color: #dbeaf5; font-size: var(--fs-lead); margin-top: var(--sp-5); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
/* must follow .hero__cta - same specificity, so source order decides
   whether margin-top:auto or the base margin wins */
.hero__cta--low { margin-top: auto; padding-top: clamp(2rem, 5vw, 3.5rem); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-7); color: #9fc0d4; font-size: .92rem; }
.hero__trust li { display: flex; align-items: center; gap: .5rem; }
.hero__trust svg { width: 18px; height: 18px; color: var(--teal-300); flex: none; }

/* Hero visual — layered glass card */
.hero__visual { position: relative; min-height: 395px; }
.hero-card {
  position: absolute; border-radius: var(--r-lg); padding: 1.4rem 1.4rem 2.1rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px rgba(0,0,0,.30);
}
.hero-card__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(56,189,216,.16); display: grid; place-items: center; color: var(--teal-300); margin-bottom: .8rem; }
.hero-card__icon svg { width: 26px; height: 26px; }
.hero-card h3 { color: #fff; font-size: 1.05rem; }
.hero-card p { color: #a8c6d8; font-size: .9rem; margin-top: .2rem; }
.hero-card--a { top: 0; left: 0; width: 57%; z-index: 1; }
.hero-card--b { top: 100px; right: 0; width: 57%; z-index: 2; background: rgba(8,145,178,.22); }
.hero-card--c { top: 232px; left: 4%; width: 57%; z-index: 3; }
.hero-stat { display: flex; align-items: baseline; gap: .5rem; }
.hero-stat b { font-family: var(--font-display); font-size: 2rem; color: #fff; letter-spacing: -.02em; }

/* ---------- Hero card icon motion ---------- */
/* 1. Diagnostics: ECG trace sweeps, tile thumps like a heartbeat */
.ico-beat { animation: heart-thump 2.4s ease-in-out infinite; }
@keyframes heart-thump {
  0%, 26%, 100% { transform: scale(1); }
  32%           { transform: scale(1.13); }
  38%           { transform: scale(1); }
  44%           { transform: scale(1.07); }
  50%           { transform: scale(1); }
}
.ico-ecg path { stroke-dasharray: 38; stroke-dashoffset: 38; animation: ecg-sweep 2.4s ease-in-out infinite; }
@keyframes ecg-sweep {
  0%   { stroke-dashoffset: 38; }
  45%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -38; }
}
/* 2. Syringes: gentle plunger push along the barrel axis */
.ico-syringe { animation: syringe-push 3.4s ease-in-out infinite; }
@keyframes syringe-push {
  0%, 100% { transform: translate(0, 0); }
  45%      { transform: translate(1.6px, -1.6px); }
  70%      { transform: translate(0, 0); }
}
/* 3. IV Drip: droplet falls from the chamber, fluid line pulses */
.ico-drip .drop { animation: drop-fall 2.6s cubic-bezier(.55,0,.85,.5) infinite; transform-origin: 12px 18px; }
@keyframes drop-fall {
  0%, 12%  { opacity: 0; transform: translateY(-2.5px) scale(.7); }
  25%      { opacity: 1; transform: translateY(-1px) scale(1); }
  70%      { opacity: 1; transform: translateY(4.5px) scale(.95); }
  85%, 100%{ opacity: 0; transform: translateY(6px) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .ico-beat, .ico-ecg path, .ico-syringe, .ico-drip .drop { animation: none; }
  .ico-ecg path { stroke-dashoffset: 0; }
  .ico-drip .drop { opacity: 1; }
}

/* ---------- Marquee / logo strip ---------- */
.trustbar { border-block: 1px solid var(--teal-100); background: linear-gradient(180deg, var(--teal-50), #fff); }
.trustbar__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-2); flex-wrap: wrap; padding-block: var(--sp-4); }
.trustbar ul { justify-content: center; }
.trustbar p { font-size: .8rem; color: var(--ink-mute); font-weight: 500; }
.trustbar ul { display: flex; flex-wrap: wrap; gap: clamp(.75rem, 3vw, 2rem); align-items: center; }
.trustbar li { display: flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); font-size: .88rem; }
.trustbar svg { width: 18px; height: 18px; color: var(--teal-600); }

/* ---------- Delivery scene (truck arrives, courier unloads) ---------- */
.delivery {
  background: linear-gradient(180deg, #fff 0%, var(--paper) 55%, #fff 100%);
  overflow: hidden;
}
.delivery__stage {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  overflow: hidden;
}
/* Band height tracks the scene: ~1.75cm at desktop, well inside the 5cm cap. */
.delivery__svg { display: block; width: 100%; height: min(5.9vw, 1.75cm); }

/* The scene renders at a third of its drawn size — the scale lives on the
   group's transform attribute in the markup (unambiguous across engines,
   unlike a CSS transform-origin on an SVG group), so the road line behind it
   stays full-bleed. */

/* Everything below only animates once the scene scrolls into view (.is-live). */
/* opacity must live on the animated children — a hidden parent group would
   mask them no matter what their own keyframes do */
.dl-line { opacity: 0; transform-origin: 0 0; }           /* trails stretch out of the truck's rear */
.dl-puff { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dl-box, .dl-man, .dl-stack-shadow { opacity: 0; }
.dl-truck { transform: translateX(-1750px); }   /* far enough left to clear the frame once scaled */

.delivery.is-live .dl-truck   { animation: dl-drive 1.15s cubic-bezier(.16,.72,.28,1) forwards; }
.delivery.is-live .dl-wheel   { animation: dl-spin .32s linear 4; }
.delivery.is-live .dl-line    { animation: dl-streak .95s ease-out forwards; }
.delivery.is-live .dl-line:nth-child(2) { animation-duration: 1.05s; }
.delivery.is-live .dl-line:nth-child(3) { animation-duration: .88s; }
.delivery.is-live .dl-puff    { animation: dl-puff .85s ease-out .92s forwards; }
.delivery.is-live .dl-puff:nth-child(2) { animation-delay: 1.02s; }
.delivery.is-live .dl-puff:nth-child(3) { animation-delay: 1.12s; }
.delivery.is-live .dl-man     { animation: dl-arrive .45s ease-out 1.15s forwards; }
.delivery.is-live .dl-arm     { animation: dl-toss .3s ease-in-out 1.3s 5; }
.delivery.is-live .dl-stack-shadow { animation: dl-fade .5s ease-out 1.5s forwards; }
.delivery.is-live .dl-box     { animation: dl-drop .62s cubic-bezier(.3,.05,.4,1) forwards; animation-delay: calc(1.35s + var(--d)); }

@keyframes dl-drive { from { transform: translateX(-1750px); } to { transform: translateX(395px); } }
@keyframes dl-spin  { to { transform: rotate(360deg); } }
@keyframes dl-fade  { to { opacity: .14; } }
@keyframes dl-streak {
  0%   { opacity: 0;   transform: translateX(70px) scaleX(.4); }
  18%  { opacity: .55; }
  70%  { opacity: .45; }
  100% { opacity: 0;   transform: translateX(-30px) scaleX(1); }
}
@keyframes dl-puff {
  0%   { opacity: .55; transform: translate(0, 0) scale(.35); }
  100% { opacity: 0;   transform: translate(-95px, -10px) scale(1.7); }
}
@keyframes dl-arrive {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dl-toss {
  0%, 100% { transform: rotate(-32deg); }
  50%      { transform: rotate(26deg); }
}
@keyframes dl-drop {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.7); }
  14%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(calc(var(--dx) * .34), calc(var(--dy) * 1.35)) scale(1); }
  82%  { transform: translate(0, -14px); }
  92%  { transform: translate(0, 3px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* Show the finished scene, no movement */
  .dl-truck { transform: translateX(395px); }
  .dl-box, .dl-man { opacity: 1; }
  .dl-stack-shadow { opacity: .14; }
  .delivery .dl-truck, .delivery .dl-wheel, .delivery .dl-line, .delivery .dl-puff,
  .delivery .dl-man, .delivery .dl-arm, .delivery .dl-box, .delivery .dl-stack-shadow { animation: none !important; }
}

/* ---------- Category grid ---------- */
/* Categories section: gentle teal light so the navy cards float */
#categories {
  background:
    radial-gradient(720px 320px at 92% 4%, rgba(8,145,178,.07), transparent 65%),
    radial-gradient(600px 300px at 4% 96%, rgba(56,189,216,.06), transparent 60%),
    var(--white);
}
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); }
/* Category cards: deep navy like the hero, glowing white line-art */
.cat-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-lg); color: #cfe2ee;
  background:
    radial-gradient(130% 90% at 85% -10%, rgba(56,189,216,.22), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid rgba(255,255,255,.09); overflow: hidden; isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(8,145,178,.35), transparent 65%);
  transition: opacity var(--dur) var(--ease);
}
.cat-card:hover {
  transform: translateY(-6px); border-color: rgba(56,189,216,.5);
  box-shadow: 0 24px 50px rgba(6,34,58,.4), 0 0 0 1px rgba(56,189,216,.15);
}
.cat-card:hover::before { opacity: 1; }
.cat-card__icon {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-600), var(--teal-500)); color: #fff; box-shadow: var(--shadow-teal);
}
.cat-card__icon svg { width: 32px; height: 32px; }
/* Blueprint line-art tile: dark glass panel, white strokes, teal glow */
.cat-card__art {
  position: relative; height: 118px; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
  color: #eef8fc;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(56,189,216,.14), transparent 65%),
    rgba(255,255,255,.04);
}
.cat-card__art svg {
  width: 76px; height: 76px; position: relative;
  filter: drop-shadow(0 0 7px rgba(56,189,216,.4));
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.cat-card__art svg .a { stroke: var(--teal-300); transition: stroke var(--dur) var(--ease); }
.cat-card:hover .cat-card__art svg {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(56,189,216,.65));
}
.cat-card:hover .cat-card__art svg .a { stroke: #a9e9f4; }
.cat-card h3 { font-size: 1.02rem; line-height: 1.25; color: #fff; }
.cat-card p {
  color: #9fc0d4; font-size: .85rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card__count { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--teal-300); display: inline-flex; align-items: center; gap: .4rem; }
.cat-card__count svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.cat-card:hover .cat-card__count svg { transform: translateX(4px); }
/* ---------- Feature / value props (vibrant cards) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.value {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(170deg, #fff 55%, var(--teal-50));
  border: 1px solid var(--teal-100); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.value::before {  /* gradient keyline across the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-300));
}
.value::after {  /* soft teal bloom in the corner */
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(56,189,216,.16), transparent 70%);
  pointer-events: none;
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.value__icon {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-600), var(--teal-400)); color: #fff;
  box-shadow: var(--shadow-teal);
}
.value__icon svg { width: 28px; height: 28px; }
.value h3 { font-size: 1.12rem; }
.value p { color: var(--ink-soft); font-size: .97rem; }

/* ---------- Split / audience ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-7); }
.audience {
  padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.audience:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.audience--clinic { background: linear-gradient(165deg, var(--navy-900), var(--navy-700)); color: #d6e7f1; border-color: transparent; }
.audience--clinic h3 { color: #fff; }
.audience__tag { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .75rem; border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-700); }
.audience--clinic .audience__tag { background: rgba(56,189,216,.18); color: var(--teal-300); }
.audience h3 { margin: var(--sp-4) 0 var(--sp-3); font-size: 1.5rem; }
.audience ul.checks { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.audience ul.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .98rem; }
.audience ul.checks svg { width: 20px; height: 20px; color: var(--teal-600); flex: none; margin-top: 3px; }
.audience--clinic ul.checks svg { color: var(--teal-300); }

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
.stat { text-align: center; padding: var(--sp-5); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,1.5rem+2vw,3.4rem); color: var(--teal-300); letter-spacing: -.03em; }
.stat span { color: #9fc0d4; font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(2.5rem,5vw,4.5rem); text-align: center;
  background: radial-gradient(800px 400px at 50% -20%, rgba(56,189,216,.3), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #dbeaf3; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { margin: var(--sp-4) auto 0; max-width: 54ch; color: #b9d2e2; }
.cta-band .hero__cta { justify-content: center; }

/* ============================================================
   PRODUCTS / CATALOG
   ============================================================ */
/* ---------- Page headers (Products / About / Contact) ----------
   Compact navy banner matching the home hero, with a teal glow. */
.catalog-hero, .about-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(1.9rem, 3.4vw, 3rem);
  color: #cfe2ee;
  background:
    radial-gradient(720px 300px at 80% -25%, rgba(56,189,216,.30), transparent 60%),
    radial-gradient(560px 280px at -5% 125%, rgba(8,145,178,.26), transparent 55%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 55%, #082a44 100%);
  border-bottom: 1px solid rgba(56,189,216,.28);
  box-shadow: 0 20px 48px -20px rgba(8,145,178,.6), inset 0 -1px 0 rgba(56,189,216,.35);
}
/* fine grid texture, same as the home hero */
.catalog-hero > .container, .about-hero > .container { position: relative; z-index: 1; }
.catalog-hero .eyebrow, .about-hero .eyebrow { color: var(--teal-300); }
.catalog-hero h1, .about-hero h1 {
  color: #fff; margin-top: .45rem;
  font-size: clamp(1.65rem, 1.1rem + 1.85vw, 2.6rem); line-height: 1.14;
  text-shadow: 0 0 28px rgba(56,189,216,.4);
}
.catalog-hero .lead, .about-hero .lead {
  color: #b9d2e2; margin-top: .65rem; max-width: 64ch;
  font-size: clamp(.94rem, .89rem + .22vw, 1.04rem); line-height: 1.55;
}
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-7); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 1rem); }
.filters h2 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-display); margin-bottom: var(--sp-3); }
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left; padding: .7rem .9rem; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-btn:hover { background: var(--teal-50); color: var(--teal-700); }
.filter-btn[aria-pressed="true"] { background: var(--navy-900); color: #fff; }
.filter-btn[aria-pressed="true"] .filter-count { background: rgba(255,255,255,.18); color: #fff; }
.filter-count { font-size: .78rem; background: var(--line-soft); color: var(--ink-mute); padding: .1rem .5rem; border-radius: var(--r-pill); font-weight: 600; }


.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-mute); }
.search-box input {
  width: 100%; padding: .8rem 1rem .8rem 2.8rem; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font: inherit; font-size: 1rem; background: var(--white); color: var(--ink); min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-box input:focus { outline: none; border-color: var(--teal-400); box-shadow: 0 0 0 4px var(--teal-50); }
.result-count { color: var(--ink-mute); font-size: .9rem; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: var(--sp-4); }
.product-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover {
  transform: translateY(-5px); border-color: var(--line);
  box-shadow: var(--shadow-lg);
}
.product-card:hover .product-thumb__icon { transform: scale(1.06) rotate(-2deg); }
.product-thumb {
  /* Square, not 4:3 - most product photos are portrait or square, and a wide
     frame left tall items (IV bags) rendering small with dead space at the
     sides. Also matches the 1:1 category tiles. */
  aspect-ratio: 1 / 1; position: relative; display: grid; place-items: center; overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
/* Photos: whole product, perfectly centred, never cropped (zoom stays inside the padding) */
/* Absolutely positioned so the image is pinned to the box on every browser.
   With height:100% alone, a tall image (the IV bags are 1:2.1) resolved its
   height from its own ratio instead of the parent's aspect-ratio box and
   overflowed - overflow:hidden then cut it in half. */
.product-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 12px;
  transition: transform var(--dur) var(--ease);
}
.product-card:hover .product-thumb img { transform: scale(1.035); }
/* (5a) Glowing outline that draws around the product box, left → right, on hover.
   Confined to the thumb (the product), not the whole card. clip-path reveals it. */
.product-thumb::before {
  content: ""; position: absolute; inset: 8px; z-index: 2; border-radius: 8px; pointer-events: none;
  border: 1.5px solid var(--teal-400);
  box-shadow: 0 0 9px rgba(56,189,216,.4), inset 0 0 9px rgba(56,189,216,.18);
  opacity: 0; clip-path: inset(0 100% 0 0);
}
.product-card:hover .product-thumb::before { animation: scan-outline .7s ease forwards; }
@keyframes scan-outline {
  0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
  78%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-thumb::before { animation: none; }
}
.product-thumb__icon { color: var(--teal-600); transition: transform var(--dur) var(--ease); }
.product-thumb__icon svg { width: 64px; height: 64px; }
/* z-index keeps the category name above the image (the hover zoom creates a
   stacking context, which would otherwise paint over the tag) */
.product-cat-tag { position: absolute; z-index: 3; top: 12px; left: 12px; font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.95); color: var(--teal-700); padding: .3rem .6rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); backdrop-filter: blur(2px); }
.product-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-body h3 { font-size: .97rem; line-height: 1.3; min-height: 2.6em; }   /* 2-line slot: stops ragged gaps between cards */
.product-sku { font-family: var(--font-display); font-size: .78rem; color: var(--ink-mute); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.product-desc { font-size: .85rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-foot { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.product-price { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 1rem; }
.product-price small { font-weight: 500; color: var(--ink-mute); font-size: .75rem; }
.product-view { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--teal-700); display: inline-flex; align-items: center; gap: .3rem; }
.product-view svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.product-card:hover .product-view svg { transform: translateX(3px); }

.empty-state { grid-column: 1/-1; text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--ink-mute); }
.empty-state svg { width: 56px; height: 56px; color: var(--line); margin: 0 auto var(--sp-4); }

/* ---------- Product modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,34,58,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: var(--sp-4);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-scrim.is-open { opacity: 1; visibility: visible; }
.modal {
  width: min(820px, 100%); max-height: 90dvh; overflow: auto; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); transition: transform var(--dur) var(--ease);
  display: grid; grid-template-columns: 1fr 1fr;
}
.modal-scrim.is-open .modal { transform: none; }
.modal__media { background: #fff; display: grid; place-items: center; padding: var(--sp-6); position: relative; }
.modal__media .product-thumb__icon svg { width: 110px; height: 110px; }
.modal__media img {
  border-radius: var(--r-md); width: 100%; max-height: 380px;
  object-fit: contain; padding: 12px;
}
.modal__body { padding: clamp(1.5rem,3vw,2.4rem); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 3; }
.modal__close svg { width: 22px; height: 22px; }
.modal__body .product-cat-tag { position: static; display: inline-block; margin-bottom: var(--sp-3); box-shadow: none; background: var(--teal-50); }
.modal__body h2 { font-size: 1.6rem; }
.modal__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-4) 0; padding: var(--sp-4) 0; border-block: 1px solid var(--line); }
.modal__meta div { font-size: .85rem; }
.modal__meta dt { color: var(--ink-mute); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.modal__meta dd { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.modal__specs { margin: var(--sp-5) 0; }
.modal__specs h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-3); }
.modal__specs ul { display: grid; gap: .5rem; }
.modal__specs li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); }
.modal__specs svg { width: 18px; height: 18px; color: var(--teal-600); flex: none; margin-top: 3px; }
.modal__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }

/* ---------- Forms (contact / quote) ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; margin-bottom: .45rem; }
.field label .req { color: var(--danger); }
.field .hint { display: block; font-size: .82rem; color: var(--ink-mute); margin-top: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-400); box-shadow: 0 0 0 4px var(--teal-50); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-note { font-size: .85rem; color: var(--ink-mute); margin-top: var(--sp-4); display: flex; gap: .5rem; align-items: flex-start; }
.form-note svg { width: 18px; height: 18px; color: var(--teal-600); flex: none; margin-top: 2px; }
/* Shown only when a submission actually fails, with direct routes out */
.form-error {
  margin-top: var(--sp-3);
  padding: .85rem 1rem;
  border: 1px solid #f3c3c3;
  border-left: 3px solid #c0392b;
  border-radius: var(--r-sm, 8px);
  background: #fdf3f3;
  color: #8e2b21;
  font-size: .88rem;
  line-height: 1.5;
}
.form-error a { color: #8e2b21; font-weight: 600; text-decoration: underline; }

.form-success { display: none; text-align: center; padding: var(--sp-6); }
.form-success.is-visible { display: block; }
.form-success svg { width: 60px; height: 60px; color: var(--teal-600); margin: 0 auto var(--sp-4); }

/* ---------- Contact info cards ---------- */
.info-cards { display: grid; gap: var(--sp-4); }
.info-card { display: flex; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.info-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; flex: none; }
.info-card__icon svg { width: 24px; height: 24px; }
.info-card h3 { font-size: 1.02rem; }
.info-card p, .info-card a { color: var(--ink-soft); font-size: .95rem; }
.info-card a:hover { color: var(--teal-700); }

/* ---------- About ---------- */
/* .about-hero is styled with .catalog-hero in the page-headers block above */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--sp-4); color: var(--ink-soft); }
.prose p.lead { color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.prose h2 {
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); color: var(--ink);
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
/* Teal brand cards, matching the home-page accent */
.pillar {
  position: relative; overflow: hidden;
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--teal-600) 0%, var(--teal-500) 55%, var(--teal-700) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-teal);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar::after {  /* soft light bloom in the corner */
  content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
  pointer-events: none;
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(8,145,178,.38); }
.pillar b {
  font-family: var(--font-display); display: block; font-size: 2.2rem;
  color: #fff; opacity: .55; letter-spacing: -.03em; position: relative;
}
.pillar h3 { font-size: 1.1rem; margin: var(--sp-2) 0; color: #fff; position: relative; }
.pillar p { color: rgba(255,255,255,.88); font-size: .95rem; position: relative; }

/* ---------- Shipping page: at-a-glance facts ---------- */
/* Compact horizontal strip — icon beside the text, not above it, so the
   row stays shallow instead of stacking into a tall band of white space. */
.ship-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.ship-fact {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;   /* icon | text, so title and copy stack */
  column-gap: .85rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(6,34,58,.04);
}
.ship-fact__icon {
  grid-row: span 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal-600);
}
.ship-fact__icon svg { width: 19px; height: 19px; }
.ship-fact h3 { grid-column: 2; font-size: .94rem; margin-bottom: .2rem; color: var(--navy-900); }
.ship-fact p  { grid-column: 2; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Shipping page: FAQ accordion ----------
   Native <details>/<summary>: keyboard operable and findable by the
   browser's own in-page search with no JavaScript involved. */
/* full container width, flush with the section heading above it */
.faq { display: grid; gap: .7rem; margin-top: var(--sp-6); }

.faq__item { border-radius: var(--r-md); overflow: hidden; }

.faq__q {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.35rem;
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: background .18s ease;
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari's default triangle */
.faq__q:hover { background: var(--navy-800); }
.faq__q:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.faq__caret { flex: none; display: grid; place-items: center; color: var(--teal-400); }
.faq__caret svg { width: 15px; height: 15px; transition: transform .22s ease; }
.faq__item[open] .faq__caret svg { transform: rotate(90deg); }

.faq__a {
  padding: 1.15rem 1.35rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.faq__a p { color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }
.faq__a p + p { margin-top: .75rem; }
.faq__a strong { color: var(--ink); font-weight: 600; }
.faq__a a { color: var(--teal-700); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .faq__caret svg, .faq__q { transition: none; }
}

@media (max-width: 860px) {
  .ship-facts { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 600px) {
  .faq__q { padding: .9rem 1rem; font-size: .94rem; gap: .6rem; }
  .faq__a { padding: 1rem 1rem 1.1rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #9fc0d4; padding-block: clamp(3rem,5vw,4.5rem) var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer-brand p { margin-top: var(--sp-4); max-width: 34ch; color: #84a7bd; font-size: .95rem; }
.footer-col h4 { font-family: var(--font-display); color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-col ul { display: grid; gap: var(--sp-3); }
.footer-col a { color: #9fc0d4; font-size: .95rem; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--teal-300); }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--teal-400); flex: none; margin-top: 3px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: #6f93a9; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   RESPONSIVE — designed for mobile, not shrunk
   ============================================================ */
@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { min-height: 395px; margin-top: var(--sp-4); }
  .cat-grid, .value-grid, .pillars { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filter-list { flex-direction: row; flex-wrap: wrap; }
  .filter-btn { width: auto; }
}

/* ---------- Header collapse ----------
   With five nav links the desktop header needs ~880px to seat brand + nav +
   Login + quote button. Below that it overflows, so the drawer takes over
   here rather than at the phone breakpoint. */
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav, .header-actions .btn--quote { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Drawer itself is defined in the MOBILE REFINEMENT PASS at the end of this
     file - the old full-width dropdown rules that lived here were overriding
     it via higher specificity, so they are gone. */

  .brand__lockup { height: 42px; }
}

@media (max-width: 760px) {
  .brand__lockup { height: 38px; }   /* phone: smaller mark, same proportions */
  .stats { grid-template-columns: repeat(2,1fr); }
  .split, .field-row { grid-template-columns: 1fr; }
  .modal { grid-template-columns: 1fr; }
  .modal__media { padding: var(--sp-6); }
  .modal__media .product-thumb__icon svg { width: 76px; height: 76px; }
  .hero__visual { display: none; }  /* phone: lead with the message, not decoration */
  /* phone: keep the helix, but quieter so the copy stays crisp */
  .hero__dna {
    opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%);
  }
  .hero__trust { gap: var(--sp-3) var(--sp-5); }
}

@media (max-width: 520px) {
  .value-grid, .pillars { grid-template-columns: 1fr; }
  /* phones: tidy 2-up category tiles, blurbs hidden for a quick scan */
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .cat-card p { display: none; }
  .cat-card__art { height: 92px; }
  .cat-card__art svg { width: 58px; height: 58px; }
  .trustbar__inner { justify-content: flex-start; }
}



/* ============================================================
   QUOTATION BASKET  (select products while browsing)
   ============================================================ */
.product-card { position: relative; }
.product-card__open {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
/* Add-to-quote button pinned to the card foot */
/* Compact navy pill, right-aligned so it sits directly under "View" */
.product-add {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  margin: 0 var(--sp-5) var(--sp-5) auto;
  min-height: 32px; padding: .32rem .8rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  color: #fff; background: var(--navy-900); border: 1.5px solid var(--navy-900);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-add svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.product-add:hover {
  background: var(--navy-700); border-color: var(--navy-700);
  transform: translateY(-1px); box-shadow: 0 6px 14px rgba(6,34,58,.25);
}
.product-add.is-added {
  background: var(--teal-600); border-color: var(--teal-600);
  box-shadow: 0 6px 14px rgba(8,145,178,.28);
}
.product-add.is-added svg { transform: rotate(45deg); }   /* + becomes a subtle × cue */

/* ---- Floating basket bar ---- */
.quote-bar {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 160%);
  z-index: 95; width: min(680px, calc(100% - 2rem));
  background: rgba(6,34,58,.96); color: #cfe2ee;
  border: 1px solid rgba(56,189,216,.35); border-radius: var(--r-lg);
  box-shadow: 0 22px 50px rgba(6,34,58,.45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  opacity: 0; pointer-events: none;
}
.quote-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.quote-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: .8rem 1rem .8rem 1.1rem; }
.quote-bar__toggle {
  display: flex; align-items: center; gap: .6rem; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.quote-bar__toggle svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.quote-bar.is-open .quote-bar__toggle svg { transform: rotate(180deg); }
.quote-bar__count {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 .45rem;
  border-radius: var(--r-pill); background: var(--teal-500); color: #06223a;
  font-size: .85rem; font-weight: 700;
}
.quote-bar__actions { display: flex; align-items: center; gap: .5rem; }
.quote-bar__actions .btn { min-height: 40px; padding: .5rem 1rem; font-size: .9rem; }
.quote-bar__clear { color: #9fc0d4; border-color: rgba(255,255,255,.2); }
.quote-bar__clear:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.quote-bar__list { max-height: 46vh; overflow: auto; border-top: 1px solid rgba(255,255,255,.12); padding: .5rem .6rem .8rem; }
.quote-line { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; border-radius: var(--r-sm); }
.quote-line:hover { background: rgba(255,255,255,.05); }
.quote-line__name { flex: 1; font-size: .9rem; color: #eaf4fa; line-height: 1.3; }
.quote-line__name small { display: block; color: #85a8bd; font-size: .74rem; font-variant-numeric: tabular-nums; }
.quote-line__qty, .quote-summary__list input {
  width: 62px; padding: .35rem .5rem; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; font: inherit; font-size: .85rem; text-align: center;
}
.quote-line__rm, .quote-summary__list button {
  width: 30px; height: 30px; border-radius: 50%; color: #9fc0d4; font-size: 1.2rem; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quote-line__rm:hover, .quote-summary__list button:hover { background: rgba(214,69,80,.2); color: #ffb4ba; }
.quote-line__empty { color: #9fc0d4; font-size: .9rem; padding: .6rem; }
/* keep the sticky mobile CTA clear of the basket bar */
@media (max-width: 760px) {
  /* the sticky mobile CTA is ~107px tall; clear it plus a gap */
  .quote-bar { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .quote-bar__inner { flex-wrap: wrap; }
  .quote-bar__actions { width: 100%; }
  .quote-bar__actions .btn { flex: 1; }
}

/* ---- Selected-products panel on the quotation form ---- */
.quote-summary { margin-bottom: var(--sp-5); padding: var(--sp-4); border: 1.5px dashed var(--teal-100); border-radius: var(--r-md); background: var(--teal-50); }
.quote-summary h3 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); margin-bottom: var(--sp-3); }
.quote-summary__list { display: grid; gap: .4rem; }
.quote-summary__list li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.quote-summary__list li span { flex: 1; color: var(--ink); }
.quote-summary__list li small { display: block; color: var(--ink-mute); font-size: .74rem; }
.quote-summary__list input { border-color: var(--line); background: #fff; color: var(--ink); }
.quote-summary__list button { color: var(--ink-mute); }

/* ---- Header: compact Login + Quote pair ---- */
.header-actions .btn { min-height: 40px; padding: .5rem 1.05rem; font-size: .92rem; }
.btn--login { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--login:hover { border-color: var(--teal-400); color: var(--teal-700); background: var(--teal-50); }
.btn--login svg { width: 16px; height: 16px; }

/* ============================================================
   HEADER: push Login + Request a quote toward the page edge.
   The nav keeps its position because it is anchored to the brand
   with margin-right:auto — widening the header only moves the
   right-hand actions outward.
   ============================================================ */
/* Only the right-hand actions are pulled outward, past the container
   edge, so they sit nearer the page edge on wide screens. */
/* Container is 1320px wide with 28px padding, so its content edge sits at
   (100vw + 1320)/2 - 28. Shifting the actions right by (50vw - 672) leaves a
   40px gap from the page edge; the max() caps the shift so it can never
   overflow on very wide screens. Brand and nav are untouched. */
@media (min-width: 1400px) {
  .header-actions { margin-right: max(calc(672px - 50vw), -200px); }
}

/* ============================================================
   PRODUCT CARD: compact navy "Add to quote" sitting under View
   ============================================================ */
.product-add {
  width: auto;
  margin: -.35rem var(--sp-5) var(--sp-5) auto;   /* auto-left = right aligned */
  min-height: 32px; padding: .3rem .8rem;
  font-size: .78rem; letter-spacing: .01em;
  color: #fff; background: var(--navy-900); border: 1.5px solid var(--navy-900);
  box-shadow: 0 3px 10px rgba(6,34,58,.18);
}
.product-add svg { width: 13px; height: 13px; }
.product-add:hover { background: var(--navy-700); border-color: var(--navy-700); }
.product-add.is-added {
  background: var(--teal-600); border-color: var(--teal-600); color: #fff;
}

/* ============================================================
   MOBILE COMPATIBILITY
   Fixes found by auditing 320 / 375 / 414 / 768 px:
   • footer grid overflowed (long email/WhatsApp text could not
     shrink because grid items default to min-width:auto)
   • several touch targets were under the 44px guideline
   ============================================================ */
@media (max-width: 900px) {
  /* Long unbroken contact strings must be allowed to wrap */
  .footer-col, .footer-brand { min-width: 0; }
  .footer-contact li, .footer-col a { overflow-wrap: anywhere; }
}

@media (max-width: 1024px) {
  /* Stack the footer on phones instead of two cramped columns */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  /* --- Touch targets: 44px minimum --- */
  .brand { padding-block: .4rem; }                 /* bigger hit area, same logo size */
  .footer-col ul { gap: var(--sp-1); }
  .footer-col a, .footer-contact a { display: inline-block; padding-block: .55rem; }
  /* the compact navy button stays small on desktop, comfortable on touch */
  .product-add { min-height: 44px; padding: .55rem 1rem; font-size: .84rem; }
  .quote-bar__toggle { min-height: 44px; }
  .quote-bar__actions .btn { min-height: 44px; }
  .quote-line__qty, .quote-summary__list input { min-height: 40px; }
  .quote-line__rm, .quote-summary__list button { width: 40px; height: 40px; }
  /* Login button keeps its label but stays compact next to the burger */
  .header-actions .btn--login { min-height: 44px; padding: .5rem .85rem; }
}

@media (max-width: 380px) {
  /* Very small phones: icon-only login so the header never crowds */
  .header-actions .btn--login [data-account-label] { display: none; }
  .header-actions .btn--login { padding: .5rem .7rem; }
}

/* Final touch-target trims found in the audit */
@media (max-width: 1024px) {
  .footer-col a, .footer-contact a { padding-block: .7rem; }   /* was 43px, now ≥48 */
  /* contact + login info cards: make the email / WhatsApp links properly tappable */
  .info-card p a { display: inline-block; padding-block: .6rem; }
  .form-note a, .prose a { display: inline-block; padding-block: .35rem; }
}

/* Last of the audit: nav links, header buttons and the inline
   "Browse the catalogue" link were a few px under 44. */
@media (max-width: 1024px) {
  .nav a { padding-block: .75rem; }                       /* 42px -> 48px */
  .header-actions .btn { min-height: 44px; }              /* 40px -> 44px */
  .muted a, .quote-line__empty a { display: inline-block; padding-block: .6rem; }
}

/* ============================================================
   PRODUCT CARD ACTIONS — compact "Add to quote" beside "View"
   ============================================================ */
.product-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: auto var(--sp-4) var(--sp-4);   /* auto top keeps the row pinned to the card foot */
  padding-top: var(--sp-3);
}
.product-actions .product-add {
  margin: 0;                               /* row handles spacing now */
  min-height: 34px; padding: .3rem .75rem;
  font-size: .76rem;
}
.product-actions .product-add svg { width: 12px; height: 12px; }
/* View becomes a real button sitting beside it */
.product-actions .product-view {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--teal-700); background: none; border: 0; padding: .3rem .2rem;
}
.product-actions .product-view svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.product-card:hover .product-actions .product-view svg { transform: translateX(3px); }
.product-actions .product-view:hover { color: var(--teal-600); }

/* Result count is kept for screen readers but no longer shown */
.result-count {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1024px) {
  .product-actions .product-add { min-height: 44px; font-size: .82rem; padding: .5rem 1rem; }
  .product-actions .product-view { min-height: 44px; }
}

/* ============================================================
   ADD-TO-QUOTE: shows only "+" until hovered, then reveals
   the label. Collapsed by width so the row stays tidy.
   ============================================================ */
.product-actions .product-add {
  gap: 0;                                   /* label supplies its own spacing */
  padding: .3rem .55rem;                    /* keeps the + optically centred */
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.product-actions .product-add svg { flex: none; }
.product-actions .product-add [data-add-label] {
  display: inline-block; overflow: hidden;
  max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .28s var(--ease), opacity .2s var(--ease), margin-left .28s var(--ease);
}
/* reveal on hover, on keyboard focus, and once the item is in the basket */
.product-actions .product-add:hover [data-add-label],
.product-actions .product-add:focus-visible [data-add-label],
.product-actions .product-add.is-added [data-add-label] {
  max-width: 8rem; opacity: 1; margin-left: .4rem;
}

/* Touch devices have no hover. Showing the full label there made the button
   overflow its card and truncate to "+ Add t", so on touch it stays a bare
   "+" and only opens up once the item is added. The accessible name comes
   from aria-label, not the visible text. */
@media (hover: none) {
  .product-actions .product-add [data-add-label] {
    max-width: 0; opacity: 0; margin-left: 0;
  }
  .product-actions .product-add.is-added [data-add-label] {
    max-width: 8rem; opacity: 1; margin-left: .4rem;
  }
}

/* ============================================================
   MOBILE REFINEMENT PASS
   Appended last so these win the cascade over the earlier
   breakpoint blocks. Covers: slide-out nav, helix prominence,
   trust bar, catalogue filters, and the whole type scale.
   ============================================================ */

/* ---------- 1. Nav: slide-out drawer from the right ---------- */
@media (max-width: 900px) {
  /* backdrop-filter on the header would make it the containing block for the
     fixed drawer, clipping the panel to the header's 66px. Solid white on
     phones instead - also cheaper to composite. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--header-h); right: 0; bottom: auto;
    width: min(78vw, 300px);
    max-height: calc(100vh - var(--header-h));
    border-bottom-left-radius: var(--r-md);
    z-index: 95;
    background: #fff;
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 46px rgba(6,34,58,.16);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .42s cubic-bezier(.33,.75,.32,1), visibility .42s;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    /* re-declared so the panel is never mid-fade when opening */
    background: #fff;
  }
  /* slightly smaller than before, per the brief */
  .nav a,
  .nav.is-open a {
    font-size: .98rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a::after, .nav.is-open a::after { display: none; }
  .nav .btn--quote,
  .nav.is-open .btn--quote {
    display: inline-flex; justify-content: center;
    margin-top: var(--sp-4); border-bottom: 0; font-size: .95rem;
  }

  /* dimmer behind the drawer; sits under the header so the burger still closes it */
  .nav-scrim {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(6,34,58,.42);
    opacity: 0; visibility: hidden; z-index: 90;
    transition: opacity .38s ease, visibility .38s;
  }
  .nav-scrim.is-on { opacity: 1; visibility: visible; }
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav, .nav-scrim { transition: none; }
}

/* ---------- 2. Hero: helix as present as it is on desktop ---------- */
@media (max-width: 900px) {
  .hero__dna {
    opacity: .92;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.9) 34%, #000 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.9) 34%, #000 100%);
  }
  /* a touch of scrim behind the copy so white text stays crisp over it */
  .hero--dna .hero__copy { position: relative; z-index: 2; }
  .hero--dna .hero__inner { min-height: clamp(430px, 66vh, 580px); padding-block: clamp(2.5rem, 8vw, 4rem); }
}

/* ---------- 3. Trust bar: four pointers, two tidy rows ---------- */
@media (max-width: 760px) {
  .trustbar__inner { padding-block: var(--sp-4); gap: var(--sp-3); }
  .trustbar p { font-size: .72rem; }
  .trustbar ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem .8rem;
    width: 100%;
  }
  .trustbar li {
    font-size: .73rem; line-height: 1.35;
    align-items: flex-start; gap: .38rem; text-align: left; min-width: 0;
  }
  .trustbar svg { width: 15px; height: 15px; margin-top: 1px; }
}

/* ---------- 4. Catalogue filters: aligned two-up grid ---------- */
@media (max-width: 900px) {
  .filters h2 { font-size: .72rem; letter-spacing: .14em; margin-bottom: var(--sp-3); }
  .filter-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
  }
  .filter-btn {
    width: 100%;
    justify-content: space-between;
    padding: .58rem .7rem;
    font-size: .82rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-height: 42px;
  }
  .filter-btn[aria-pressed="true"] { border-color: var(--navy-900); }
  .filter-count { font-size: .7rem; padding: .05rem .4rem; flex: none; }
}
@media (max-width: 380px) {
  .filter-list { grid-template-columns: 1fr; }
}

/* ---------- 5. Type scale + rhythm sized for a phone ---------- */
@media (max-width: 760px) {
  :root {
    --fs-eyebrow: .72rem;
    --fs-body:    1rem;
    --fs-lead:    1.02rem;
    --fs-h3:      1.1rem;
    --fs-h2:      1.7rem;
    --fs-h1:      2.25rem;
  }
  .section { padding-block: clamp(2.5rem, 8vw, 3.75rem); }
  .btn--lg { padding: .85rem 1.4rem; font-size: .95rem; }
  .lead { line-height: 1.55; }
}
@media (max-width: 560px) {
  :root {
    --fs-body: .95rem;
    --fs-lead: .97rem;
    --fs-h3:   1.05rem;
    --fs-h2:   1.5rem;
    --fs-h1:   1.95rem;
  }
  .section { padding-block: 2.5rem; }
  .section-head .lead { margin-top: var(--sp-3); }
  .cta-band { padding: var(--sp-6) var(--sp-5); }
  .catalog-hero, .about-hero { padding-block: var(--sp-7) var(--sp-6); }
}

/* ============================================================
   PRODUCTS PAGE: category-first browsing
   Two states on one page - a grid of category covers, then the
   products inside one. Separate from the home page's .cat-card
   (navy + line art) on purpose: these are photo-led.
   ============================================================ */

/* Browse state drops the sidebar and runs full width */
.catalog-layout.is-browsing { grid-template-columns: 1fr; }
.catalog-layout.is-browsing .filters { display: none; }

.cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.cat-tile[hidden], .cat-tile-grid[hidden] { display: none; }

.cat-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; text-align: left;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-100);
}
.cat-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Same photo treatment as the product cards: whole product, never cropped */
/* Square box: the cover photos are all roughly 1:1, so a 4:3 frame made them
   fill top-to-bottom and read as cropped. Square + generous padding centres
   them with even margins on every side. */
.cat-tile__media {
  position: relative;
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--line-soft);
}
.cat-tile__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 20px;
  transition: transform var(--dur) var(--ease);
}
.cat-tile:hover .cat-tile__media img { transform: scale(1.04); }

.cat-tile__body { display: flex; flex-direction: column; gap: .35rem; padding: var(--sp-4); flex: 1; text-align: center; }
.cat-tile__body h3 { font-size: 1.05rem; color: var(--navy-900); }
.cat-tile__blurb { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.cat-tile__foot {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
.cat-tile__count { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--teal-700); }
.cat-tile__foot svg { width: 17px; height: 17px; color: var(--teal-600); transition: transform var(--dur) var(--ease); }
.cat-tile:hover .cat-tile__foot svg { transform: translateX(4px); }

/* Short heading above the search bar - the row read as empty without it */
.catalog-intro { margin-bottom: var(--sp-4); }
.catalog-intro h2 { font-size: var(--fs-h3); color: var(--navy-900); }
.catalog-intro p { font-size: .92rem; color: var(--ink-mute); margin-top: .3rem; }

/* Heading + return link once you are inside a category */
.cat-headline { margin-bottom: var(--sp-5); }
.cat-headline[hidden] { display: none; }
.cat-headline h2 { font-size: var(--fs-h3); color: var(--navy-900); margin-top: .4rem; }
.cat-back {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--teal-700);
}
.cat-back svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.cat-back:hover { color: var(--navy-900); }
.cat-back:hover svg { transform: translateX(-3px); }

.empty-state .btn { margin-top: var(--sp-4); }

@media (max-width: 1100px) { .cat-tile-grid { gap: var(--sp-4); } }
@media (max-width: 900px)  { .cat-tile-grid { grid-template-columns: repeat(2, 1fr); } }
/* Phone: one per row, laid out as a compact horizontal row rather than a tall
   card - ten stacked full-size tiles would be a very long scroll. */
@media (max-width: 560px) {
  .cat-tile-grid { grid-template-columns: 1fr; gap: .55rem; }
  .cat-tile { flex-direction: row; align-items: stretch; }
  .cat-tile:hover { transform: none; }
  .cat-tile__media {
    width: 92px; flex: none; aspect-ratio: 1 / 1;
    border-bottom: 0; border-right: 1px solid var(--line-soft);
  }
  .cat-tile__media img { padding: 9px; }
  .cat-tile__body {
    padding: .6rem .8rem; gap: .15rem; text-align: left;
    justify-content: center;
  }
  .cat-tile__body h3 { font-size: .9rem; line-height: 1.25; }
  .cat-tile__blurb { display: none; }          /* name + the cue is enough to choose */
  .cat-tile__foot {
    margin-top: .2rem; padding-top: 0; border-top: 0;
    justify-content: flex-start;
  }
  .cat-tile__count { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-tile, .cat-tile__media img, .cat-tile__foot svg, .cat-back svg { transition: none; }
  .cat-tile:hover { transform: none; }
  .cat-tile:hover .cat-tile__media img { transform: none; }
}

/* ============================================================
   MOBILE PASS 2 - tighter type, compact cards, shorter footer
   ============================================================ */

/* ---------- Hero ---------- */
/* "Medical Technology" always lands on its own single line */
.hero h1 em { display: block; }

@media (max-width: 760px) {
  /* eyebrow on one line rather than wrapping to two */
  .hero .eyebrow { font-size: .68rem; letter-spacing: .05em; }
  /* buttons sit lower, per the brief */
  .hero__lead { margin-top: var(--sp-4); }
}
@media (max-width: 400px) {
  /* still one line at 320px, but not so small it stops being readable */
  .hero .eyebrow { font-size: .62rem; letter-spacing: .035em; }
}

/* ---------- Type: one more step down for phones ---------- */
@media (max-width: 760px) {
  :root {
    --fs-eyebrow: .66rem;
    --fs-body:    .9rem;
    --fs-lead:    .9rem;
    --fs-h3:      .96rem;
    --fs-h2:      1.3rem;
    --fs-h1:      1.7rem;
  }
}
@media (max-width: 560px) {
  :root {
    --fs-eyebrow: .6rem;
    --fs-body:    .86rem;
    --fs-lead:    .86rem;
    --fs-h3:      .92rem;
    --fs-h2:      1.16rem;
    --fs-h1:      1.5rem;
  }
  .btn { font-size: .88rem; }
  .btn--lg { padding: .78rem 1.25rem; font-size: .9rem; }
}

/* ---------- Product cards: two-up and compact ---------- */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .product-body { padding: .6rem; gap: .15rem; }
  .product-body h3 { font-size: .82rem; line-height: 1.25; }
  .product-desc {
    font-size: .74rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-thumb img { padding: 10px; }
  .product-cat-tag { font-size: .58rem; padding: .12rem .4rem; }
  .product-actions { padding: .45rem .6rem .6rem; }
  .product-view { font-size: .78rem; }
  .product-add { min-height: 34px; min-width: 34px; }
  .product-add svg { width: 15px; height: 15px; }
}

/* ---------- Footer: two columns, tighter, much shorter ---------- */
@media (max-width: 600px) {
  .site-footer { padding-block: var(--sp-6) var(--sp-5); }

  /* the single-column stack made this ~1150px tall on a phone */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5) var(--sp-4);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .brand__lockup { height: 30px; }
  .footer-brand p { margin-top: var(--sp-3); font-size: .82rem; line-height: 1.5; max-width: none; }

  /* "Get in touch" keeps the full width - the email is long */
  .footer-col:last-child { grid-column: 1 / -1; }

  .footer-col h4 { font-size: .7rem; margin-bottom: var(--sp-2); }
  .footer-col ul { gap: 0; }
  .footer-col a, .footer-contact a {
    display: block; padding-block: .42rem; font-size: .84rem;
  }
  .footer-contact li { font-size: .82rem; gap: .45rem; padding-block: .1rem; }
  .footer-contact svg { width: 15px; height: 15px; margin-top: 2px; }

  .footer-bottom {
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    font-size: .74rem; gap: .2rem;
  }
}


/* Older browsers (Safari < 15, older Android Chrome) ignore aspect-ratio, which
   would leave these boxes with no height at all. padding-top gives them the
   same square shape the modern property does. */
@supports not (aspect-ratio: 1 / 1) {
  .product-thumb, .cat-tile__media { height: 0; padding-top: 100%; }
}


/* ---------- Product size/pack chips ----------
   Deliberately small: one short row between the card body and the actions,
   so a variant product costs almost no extra height in the grid. */
.product-variants {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding: 0 var(--sp-4) .1rem;
}
.variant-chip {
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; line-height: 1;
  padding: .32rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff; color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.variant-chip:hover { border-color: var(--teal-300); color: var(--teal-700); }
.variant-chip.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.variant-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) {
  .product-variants { padding: 0 .6rem .1rem; gap: .25rem; }
  .variant-chip { font-size: .66rem; padding: .28rem .45rem; }
}

/* Touch devices: keep the chip visually small but give it a finger-sized hit
   area. 22px is fine to click with a mouse and far too small to tap. */
@media (hover: none) {
  .variant-chip { position: relative; }
  .variant-chip::after {
    content: ""; position: absolute; inset: -11px -2px;   /* ~44px tall target */
  }
}

@media (prefers-reduced-motion: reduce) { .variant-chip { transition: none; } }


/* ---------- Mobile hero: let the helix breathe ----------
   The headline was set from the global --fs-h1 and filled most of the
   banner, covering the animation. Sized down here specifically, so other
   page headings keep their own scale. */
@media (max-width: 760px) {
  .hero h1 { font-size: 1.55rem; line-height: 1.12; }
  .hero__lead { font-size: .87rem; line-height: 1.5; max-width: 34ch; }
  .hero .eyebrow { font-size: .6rem; }
  .hero--dna .hero__inner { min-height: clamp(420px, 62vh, 540px); padding-block: clamp(2rem, 7vw, 3rem) var(--sp-5); }
  .hero__cta--low { padding-top: var(--sp-5); }
  .hero__cta .btn--lg { padding: .7rem 1.1rem; font-size: .85rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.38rem; }
  .hero__lead { font-size: .83rem; }
  .hero__cta .btn--lg { padding: .62rem .9rem; font-size: .8rem; }
}


/* ============================================================
   MOBILE SIZING PASS - phones only, desktop untouched
   ============================================================ */

/* 1. "Quality assured at every step" cards were 350x321 each at 390px -
      three of them filled most of a screen. */
@media (max-width: 600px) {
  .value-grid { gap: .7rem; }
  .value { padding: var(--sp-4); gap: .45rem; border-radius: var(--r-md); }
  .value__icon { width: 38px; height: 38px; border-radius: 10px; }
  .value__icon svg { width: 19px; height: 19px; }
  .value h3 { font-size: .98rem; line-height: 1.25; }
  .value p { font-size: .84rem; line-height: 1.5; }
}

/* 2. Login: icon only on phones. Height stays 44px for the touch target;
      only the width comes down. This was applying below 380px only. */
@media (max-width: 700px) {
  .header-actions .btn--login [data-account-label] { display: none; }
  .header-actions .btn--login { padding: .5rem .62rem; min-width: 40px; }
  .header-actions .btn--login svg { width: 17px; height: 17px; }
}

/* 3. About page pillar cards - same treatment as the value cards. */
@media (max-width: 600px) {
  .pillars { gap: .7rem; }
  .pillar { padding: var(--sp-4); border-radius: var(--r-md); }
  .pillar h3 { font-size: 1rem; line-height: 1.25; }
  .pillar p { font-size: .85rem; line-height: 1.5; }
  .pillar__icon, .pillar figure { width: 40px; height: 40px; }
  .pillar__icon svg, .pillar figure svg { width: 20px; height: 20px; }
}


/* ============================================================
   MOBILE PASS 3
   ============================================================ */

/* 1. Burger flush right.
      .header-inner is a 3-column grid (1fr auto 1fr). On mobile .nav is
      display:none, so it leaves the grid and auto-placement drops the
      actions into column 2 - leaving column 3 empty and the burger ~59px
      short of the edge. Two columns on mobile fixes it. */
@media (max-width: 900px) {
  /* .nav is display:none here, so it leaves the grid and auto-placement
     used to drop the actions into the middle column - leaving the burger
     59px short of the edge. Two columns puts it flush right.
     minmax(0,...) plus a fluid lockup lets the wordmark give up width on a
     320px screen instead of pushing the burger past the viewport. */
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { min-width: 0; }
  .header-actions { gap: .5rem; }
}

/* 2. Login keeps its word, just smaller. */
@media (max-width: 700px) {
  .header-actions .btn--login [data-account-label] { display: inline; font-size: .78rem; }
  .header-actions .btn--login {
    padding: .45rem .7rem; min-width: 0; gap: .32rem;
    font-size: .78rem; min-height: 40px;
  }
  .header-actions .btn--login svg { width: 15px; height: 15px; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* 3. Hero lead brighter still on mobile, where the helix sits behind it. */
@media (max-width: 760px) {
  .hero__lead { color: #e9f4fb; }
}

/* 4. The add button is a true circle when idle, and opens into a pill
      wide enough to show "Added" once the item is in the basket. */
@media (max-width: 900px) {
  .product-actions .product-add {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px;
    padding: 0; border-radius: 50%;
    justify-content: center; gap: 0;
  }
  .product-actions .product-add.is-added {
    width: auto; border-radius: var(--r-pill);
    padding: 0 .6rem 0 .5rem;
  }
  .product-actions .product-add [data-add-label] { font-size: .74rem; }
  .product-actions .product-add.is-added [data-add-label] { max-width: 6rem; margin-left: .3rem; }

  /* A two-up card leaves the row only ~136px. Without this the flex row
     shrinks the pill and clips "Added" to "Add". The pill keeps its
     intrinsic width; the decorative arrow beside "View" gives up the space
     it needs - the word itself is what carries the meaning. */
  .product-actions .product-add { flex: 0 0 auto; }
  .product-actions .product-view svg { display: none; }
}

/* 6. Readability pass - the previous round trimmed body copy a little far.
      Nudged back up and aligned so cards and body text share one size. */
@media (max-width: 560px) {
  :root { --fs-body: .9rem; --fs-lead: .9rem; }
  .value p, .pillar p, .cat-tile__blurb, .product-desc { font-size: .84rem; line-height: 1.5; }
  .value h3, .pillar h3 { font-size: 1rem; }
}

/* ------------------------------------------------------------
   6b. One type scale for phones.
   Earlier rounds trimmed each area on its own, which left the hero
   lead SMALLER than body copy (13.3px vs 14.4px), the eyebrow at
   9.6px, and three different section-heading sizes on neighbouring
   pages (18.6 / 16.8 / 14.7px). These pull them back onto one scale
   without undoing the size reduction the mobile layout needs.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .hero__lead { font-size: .94rem; line-height: 1.55; max-width: 36ch; }
}
@media (max-width: 560px) {
  :root { --fs-eyebrow: .66rem; }          /* .6rem read as 9.6px - too small */
  .hero__lead { font-size: .92rem; }
  .hero .eyebrow { font-size: .64rem; }    /* still fits on one line at 360px */
  /* a section heading is a section heading, whichever page it is on */
  .catalog-intro h2, .prose h2 { font-size: var(--fs-h2); }
  .filters h2 { font-size: .78rem; }       /* sidebar label, was .72rem */
}
@media (max-width: 400px) {
  .hero__lead { font-size: .9rem; }
}

/* The lockup is sized by height and takes its width from the artwork's
   730:152 ratio, so at 38px it is 183px wide - which together with the
   login pill and the burger is 5px more than a 320px screen has. One
   step down on the narrowest phones, rather than a fluid width: a
   percentage here resolves against a shrink-to-fit flex parent and
   collapses the logo to nothing. */
@media (max-width: 380px) {
  .brand__lockup { height: 32px; }
}

/* A two-up card gives the actions row (card width - 34px). The "Added"
   pill plus "View" need 119px, so below a 357px viewport the row cannot
   hold both and "View" was being clipped mid-word. One column there -
   which is also the point at which a 135px card is too small to read. */
@media (max-width: 357px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* "Thermometers" is a single 106px word in a 100px card at 320px, and
   the card lets it overflow rather than breaking mid-word. One step
   down on the narrowest phones keeps the whole word inside the card. */
@media (max-width: 360px) {
  .cat-card h3 { font-size: .94rem; }
}