/* ==========================================================================
   IntelliBrella — site.css
   Design system for www.intellibrella.com

   THE MATERIAL IDEA
   The product is protection you can see through. So the only "material" on
   this site is glass: every control is a pane of the same optical stuff the
   canopy is made of. White ground, black mark, one spectral accent that
   appears only where wavelength is literally the subject.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground — white and minimal, per brief */
  --paper:        #ffffff;
  --paper-2:      #f7f7f8;
  --paper-3:      #efeff1;
  --paper-sink:   #0a0a0b;   /* the single dark surface: the footer */

  /* Ink */
  --ink:          #0a0a0b;
  --ink-2:        #1d1d1f;
  --ink-3:        #55555a;
  --ink-4:        #6e6e73;
  --ink-5:        #b0b0b6;

  /* Hairlines */
  --hair:         rgba(10, 10, 11, 0.10);
  --hair-soft:    rgba(10, 10, 11, 0.06);
  --hair-strong:  rgba(10, 10, 11, 0.18);

  /* Spectral accent — used ONLY on focus, links, and UV science graphics */
  --uv:           #6b4fe0;
  --uv-light:     #8e74f0;
  --uv-wash:      rgba(107, 79, 224, 0.08);
  --solar:        #f0a02c;

  /* Glass — the signature material.
     On a white ground a translucent WHITE pane is invisible, so the pane is
     tinted very slightly cool (the colour real PVC film actually casts) and
     defined by three things: a crisp rim, a lit top edge, and a cast shadow
     that lifts it off the paper. */
  --glass-fill:      linear-gradient(
                       176deg,
                       rgba(255, 255, 255, 0.96) 0%,
                       rgba(238, 242, 249, 0.80) 46%,
                       rgba(249, 251, 255, 0.92) 100%
                     );
  --glass-rim:       rgba(10, 10, 11, 0.17);
  --glass-rim-lit:   rgba(255, 255, 255, 1);
  --glass-blur:      blur(20px) saturate(180%);
  --glass-cast:
      0 1px 0 0 var(--glass-rim-lit) inset,
      0 -1.5px 2px 0 rgba(10, 10, 11, 0.06) inset,
      0 1px 2px 0 rgba(10, 10, 11, 0.06),
      0 4px 9px -3px rgba(10, 10, 11, 0.16),
      0 16px 32px -14px rgba(10, 10, 11, 0.30);
  --glass-cast-lift:
      0 1px 0 0 var(--glass-rim-lit) inset,
      0 -1.5px 2px 0 rgba(10, 10, 11, 0.07) inset,
      0 2px 4px 0 rgba(10, 10, 11, 0.08),
      0 8px 16px -4px rgba(10, 10, 11, 0.20),
      0 28px 52px -18px rgba(10, 10, 11, 0.38);

  /* Type */
  --font: "Poppins", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:   clamp(20px, 5vw, 64px);
  --measure:  68ch;
  --bay:      clamp(76px, 11vw, 168px);   /* vertical section rhythm */
  --bay-tight:clamp(52px, 7vw, 104px);

  /* Radii — soft, matching the rounded geometric wordmark */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-pill: 999px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.6s;

  --nav-h: 62px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* The HTML `hidden` attribute must beat every component display rule below.
   Without this, .notice-bar{display:flex} and .cart-count{display:inline-flex}
   override the UA stylesheet and render empty panels and a "0" badge. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--uv); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--uv);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visible to screen readers only — used for structural headings that would be
   redundant on screen but keep the heading outline intact. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-size: 0.875rem; font-weight: 500;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.75rem, 1.6rem + 5.4vw, 6.25rem);
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 1.02;
}
.h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); letter-spacing: -0.038em; }
.h2 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem); letter-spacing: -0.034em; line-height: 1.1; }
.h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); letter-spacing: -0.026em; line-height: 1.22; }
.h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em; line-height: 1.35; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.72vw, 1.5rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 20px;
}
.eyebrow--uv { color: var(--uv); }

/* Trademark mark. The brand rule is that ™ follows every mention of the name;
   at display sizes a full-size ™ is clumsy, so it sets small and raised. */
.tm {
  font-size: 0.58em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.01em;
}
/* Only genuinely large type needs the mark shrunk further */
.display .tm { font-size: 0.3em; }
.h1 .tm     { font-size: 0.34em; }
.h2 .tm     { font-size: 0.38em; }
.h3 .tm     { font-size: 0.46em; }

.muted    { color: var(--ink-3); }
.fine     { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-4); letter-spacing: 0; }
.measure  { max-width: var(--measure); }
.measure-tight { max-width: 54ch; }
.center   { text-align: center; }
.center .measure, .center .measure-tight { margin-inline: auto; }

/* Inline link with the spectral underline */
.link {
  color: var(--ink);
  background-image: linear-gradient(var(--uv), var(--uv));
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.35s var(--ease), color 0.25s var(--ease);
}
.link:hover { color: var(--uv); background-size: 100% 2.5px; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap      { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide{ max-width: 1440px; }
.wrap--slim{ max-width: 800px; }

.bay        { padding-block: var(--bay); }
.bay--tight { padding-block: var(--bay-tight); }
.bay--top0  { padding-top: 0; }
.bay--bot0  { padding-bottom: 0; }

.tint  { background: var(--paper-2); }
.tint-3{ background: var(--paper-3); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

.stack   > * + * { margin-top: 20px; }
.stack-s > * + * { margin-top: 12px; }
.stack-l > * + * { margin-top: 36px; }

/* Section heading block */
.bay-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.bay-head.center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. GLASS — the signature material
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-cast);
  isolation: isolate;
}

/* The specular sweep — light travelling across a curved pane */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.75) 42%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.75) 58%,
    transparent 80%
  );
  background-size: 260% 100%;
  background-position: 190% 0;
  opacity: 0;
  transition: background-position 0.9s var(--ease), opacity 0.35s var(--ease);
  mix-blend-mode: overlay;
}
.glass:hover::after,
.glass:focus-visible::after {
  background-position: -60% 0;
  opacity: 1;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-py: 15px;
  --btn-px: 30px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), opacity 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.994); }

/* PRIMARY: the clear pane. This is the button the brief asked for. */
.btn--glass {
  color: var(--ink);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-cast);
  overflow: hidden;
}
.btn--glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 22%,
    rgba(255, 255, 255, 0.85) 44%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.85) 56%,
    transparent 78%
  );
  background-size: 260% 100%;
  background-position: 190% 0;
  opacity: 0;
  transition: background-position 0.85s var(--ease), opacity 0.3s var(--ease);
}
.btn--glass:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-cast-lift);
  border-color: rgba(10, 10, 11, 0.2);
}
.btn--glass:hover::after { background-position: -60% 0; opacity: 1; }

/* On photography the pane needs to read against unpredictable luminance */
.btn--glass-on-image {
  color: var(--ink);
  background: linear-gradient(177deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.95) inset,
    0 4px 12px -3px rgba(10,10,11,.22),
    0 20px 44px -16px rgba(10,10,11,.4);
}

/* SOLID: maximum contrast, for the single most important action on a page */
.btn--solid {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 2px 6px -2px rgba(10,10,11,.24), 0 12px 26px -14px rgba(10,10,11,.5);
}
.btn--solid:hover {
  background: #26262a;
  border-color: #26262a;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -3px rgba(10,10,11,.28), 0 22px 40px -18px rgba(10,10,11,.55);
}

/* QUIET: text + rim only */
.btn--ghost {
  color: var(--ink);
  border-color: var(--hair-strong);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn--on-dark {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}
.btn--on-dark:hover { background: rgba(255,255,255,.88); transform: translateY(-2px); }

.btn--sm  { --btn-py: 11px; --btn-px: 20px; font-size: 0.875rem; }
.btn--lg  { --btn-py: 18px; --btn-px: 38px; font-size: 1rem; }
.btn--full{ width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.btn-row--center { justify-content: center; }

/* Arrow that eases out on hover */
.btn .arw { transition: transform 0.4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.hdr.is-stuck::before { opacity: 1; }
.hdr.is-stuck { border-bottom-color: var(--hair-soft); }

.hdr__in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.hdr__logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.hdr__logo img { height: 26px; width: auto; }
.hdr__logo b {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.hdr__logo sup { font-size: 0.5em; font-weight: 500; top: -0.7em; }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a {
  position: relative;
  padding: 9px 15px;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(10,10,11,.05); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 550; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 15px; right: 15px; bottom: 2px;
  height: 1.5px; border-radius: 2px; background: var(--uv);
}

.hdr__end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; min-width: 38px; padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { background: rgba(10,10,11,.05); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

.cart-btn { border-color: var(--hair); }
.cart-btn:hover { border-color: var(--hair-strong); }
.cart-count {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: 0.6875rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform .4s var(--ease);
}
.cart-count.is-bump { animation: bump .45s var(--ease); }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* Mobile menu */
.burger { display: none; }
.mnav {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 99;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  padding: 22px var(--gutter) 48px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mnav.is-open { opacity: 1; visibility: visible; transform: none; }
.mnav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px;
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-soft);
}
.mnav a span { color: var(--ink-5); font-size: 1rem; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}

/* The light field: a soft spectral bloom, as if sun is passing through a pane */
.hero__bloom {
  position: absolute;
  top: -32%; left: 50%;
  width: min(1500px, 145vw); aspect-ratio: 1.55;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(42% 46% at 50% 42%, rgba(107,79,224,.11), transparent 68%),
    radial-gradient(36% 40% at 66% 56%, rgba(240,160,44,.10), transparent 66%),
    radial-gradient(46% 42% at 34% 58%, rgba(96,168,232,.10), transparent 68%);
  filter: blur(28px);
}

.hero__in { position: relative; z-index: 1; }

.hero__head { max-width: 940px; margin-inline: auto; text-align: center; }
.hero__head .lead { max-width: 60ch; margin-inline: auto; }

.hero__shot {
  position: relative;
  margin-top: clamp(36px, 5vw, 68px);
  will-change: transform;
}
.hero__shot img {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  border-radius: var(--r-xl);
}

/* Trust strip under the hero */
.strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 56px);
}
.strip li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; color: var(--ink-3); letter-spacing: -0.004em;
}
.strip svg { width: 15px; height: 15px; color: var(--ink-4); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   8. Grids & cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--hair);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--hair-strong);
  box-shadow: 0 18px 40px -22px rgba(10,10,11,.28);
}
.card__n {
  display: block;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em;
  color: var(--ink-5); margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.card h3 { margin-bottom: 10px; }
.card p  { color: var(--ink-3); font-size: 0.9375rem; }

.card__ico {
  width: 42px; height: 42px; margin-bottom: 20px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--uv-wash);
  color: var(--uv);
}
.card__ico svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   9. Editorial (alternating image + text)
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.duo--flip .duo__media { order: 2; }

.duo__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}
.duo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo__media--tall img { aspect-ratio: 4 / 5; }
.duo__media--free img { aspect-ratio: auto; }

.ticks { list-style: none; margin: 28px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.ticks li:last-child { border-bottom: 1px solid var(--hair-soft); }
.ticks li::before {
  content: "";
  position: absolute; left: 4px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--uv);
}

/* Full-bleed image band.
   The scrim is diagonal, not bottom-only: it has to protect a text column on
   the left without veiling the subject or the spectral arc on the right. */
.band { position: relative; overflow: hidden; }
.band img { width: 100%; height: clamp(380px, 66vh, 700px); object-fit: cover; }
.band__cap {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: clamp(28px, 5vw, 64px) var(--gutter);
  color: #fff;
  background:
    linear-gradient(103deg, rgba(8,8,10,.80) 0%, rgba(8,8,10,.55) 26%, rgba(8,8,10,.12) 48%, transparent 62%),
    linear-gradient(to top, rgba(8,8,10,.55) 0%, transparent 46%);
}
.band__cap .h2, .band__cap h2 { color: #fff; max-width: 17ch; }
.band__cap p {
  color: rgba(255,255,255,.9);
  max-width: 40ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.band__col { max-width: 620px; }

/* Below desktop the text column can no longer sit clear of the subject, so it
   stops being an overlay entirely and drops onto solid ground beneath the
   image. Overlaying it at these widths ran the headline across the model's
   face and put white type over the bright canopy. */
@media (max-width: 1024px) {
  .band img { height: clamp(300px, 46vh, 440px); }
  .band__cap {
    position: static;
    display: block;
    background: var(--paper-2);
    color: var(--ink-2);
    padding: clamp(30px, 5vw, 52px) var(--gutter);
  }
  .band__cap .h2, .band__cap h2 { color: var(--ink); max-width: 22ch; }
  .band__cap p { color: var(--ink-3); text-shadow: none; max-width: 62ch; }
}

/* --------------------------------------------------------------------------
   10. Science / spectrum graphics
   -------------------------------------------------------------------------- */
.spectrum-key { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.spectrum-key span { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-3); }
.swatch { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }

.stat {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  background: var(--paper);
}
.stat__k {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 0.875rem; color: var(--ink-3); line-height: 1.55; }

/* Citation blocks */
.cite {
  padding: 22px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}
.cite:last-child { border-bottom: 1px solid var(--hair-soft); }
.cite b { color: var(--ink); font-weight: 550; }
.cite span { color: var(--ink-3); display: block; margin-top: 3px; }
.cite a { color: var(--uv); word-break: break-word; }
.cite a:hover { text-decoration: underline; }

/* The honest-claim callout — restraint presented as a feature.
   Deliberately NOT a coloured side-tab: it reads as a recessed plate in the
   paper, distinguished by ground and inset shadow rather than an accent bar. */
.caveat {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.9) inset, 0 2px 10px -6px rgba(10,10,11,.12) inset;
}
.tint .caveat { background: var(--paper); }
.caveat h3 { margin-bottom: 12px; }
.caveat p { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   11. Product / store
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.pdp__media { position: sticky; top: calc(var(--nav-h) + 28px); }

.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--hair-soft);
}
.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.thumbs { display: flex; gap: 12px; margin-top: 14px; }
.thumbs button {
  flex: 1;
  padding: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid var(--hair);
  background: var(--paper-2);
  cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.thumbs button img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button[aria-selected="true"] { border-color: var(--ink); }

.price {
  display: flex; align-items: baseline; gap: 12px;
  margin: 6px 0 4px;
}
.price b {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: 500; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price small { font-size: 0.8125rem; color: var(--ink-4); }

.opt { margin-top: 30px; }
.opt__lab {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 12px;
}
.opt__lab em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-4); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  min-width: 52px;
  padding: 11px 17px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hair);
  background: var(--paper);
  font-size: 0.875rem; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

.acc { border-top: 1px solid var(--hair); margin-top: 40px; }
.acc__i { border-bottom: 1px solid var(--hair); }
.acc__b {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0;
  background: none; border: 0;
  text-align: left;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink);
  cursor: pointer;
}
.acc__b .pm { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
.acc__b .pm::before, .acc__b .pm::after {
  content: ""; position: absolute; background: var(--ink-3);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.acc__b .pm::before { inset: 6px 0 auto 0; height: 1.5px; }
.acc__b .pm::after  { inset: 0 6px 0 auto; width: 1.5px; }
.acc__b[aria-expanded="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
.acc__p {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.acc__i.is-open .acc__p { grid-template-rows: 1fr; }
.acc__p > div { overflow: hidden; }
.acc__p .in { padding: 0 0 24px; color: var(--ink-3); font-size: 0.9375rem; }
.acc__p .in ul { margin: 10px 0 0; padding-left: 20px; }
.acc__p .in li { margin-bottom: 6px; }

/* Product card (store grid) */
/* Flex column so the price row sits on a shared baseline across a grid row,
   however many lines the description above it happens to run to. */
.pcard { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.pcard__body { display: flex; flex-direction: column; flex: 1; }
.pcard__meta { margin-top: auto; }
.pcard__img { position: relative; overflow: hidden; background: var(--paper-3); }
.pcard__img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .8s var(--ease);
}
.pcard:hover .pcard__img img { transform: scale(1.035); }
.pcard__body { padding: 26px clamp(20px, 2.4vw, 30px) 30px; }
.pcard__body h3 { margin-bottom: 6px; }
.pcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; }
.pcard__meta b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11b. Pre-order
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--uv-wash);
  border: 1px solid rgba(107, 79, 224, .22);
  color: var(--uv);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.pcard__img { position: relative; }
.pcard__img .badge {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-color: rgba(10,10,11,.12);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.gal { columns: 3; column-gap: clamp(14px, 1.6vw, 22px); }
.gal figure { break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 22px); }
.gal img {
  width: 100%;
  border-radius: var(--r-md);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
/* Zoom rather than lift: the image sits inside a clipped button, so a
   translate would open a gap at the bottom edge. */
.gal figure:hover img { transform: scale(1.035); }
.gal figcaption { font-size: 0.75rem; color: var(--ink-4); padding: 9px 3px 0; }

.gal button.gal__open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--r-md); overflow: hidden;
  position: relative;
}
.gal button.gal__open::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(10,10,11,.16);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.gal button.gal__open:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Pre-launch hold notice
   Shown once per browsing session while pre-orders are closed.
   -------------------------------------------------------------------------- */
.hold {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 10, 11, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), visibility .4s;
}
.hold.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.hold__panel {
  position: relative;
  width: min(540px, 100%);
  padding: clamp(32px, 4.5vw, 52px);
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow:
    0 1px 0 0 var(--glass-rim-lit) inset,
    0 30px 70px -24px rgba(10, 10, 11, .55);
  text-align: center;
  transform: translateY(14px) scale(.985);
  transition: transform .5s var(--ease);
}
.hold.is-open .hold__panel { transform: none; }

.hold__panel img { height: 44px; width: auto; margin: 0 auto 24px; }
.hold__panel h2 { margin-bottom: 14px; }
.hold__panel p { color: var(--ink-3); font-size: 0.9375rem; }
.hold__panel .btn-row { margin-top: 28px; justify-content: center; }

.hold__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.hold__close:hover { background: rgba(10, 10, 11, .06); color: var(--ink); }
.hold__close svg { width: 16px; height: 16px; }

.hold__stamp {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--uv-wash);
  border: 1px solid rgba(107, 79, 224, .22);
  color: var(--uv);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

@media (max-width: 520px) {
  .hold__panel .btn-row .btn { width: 100%; }
}

/* ---- Lightbox ---- */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.2vw, 40px);
  background: rgba(6, 6, 8, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Fluid: the image takes the full width of whatever screen is viewing it,
   clamped only by height so a portrait shot cannot run off the bottom. */
.lb__stage {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%;
}
/* The box must hug the picture. With width:100% + object-fit:contain the
   element stays full-width while the image letterboxes inside it, so the
   radius and shadow end up drawn around empty space. */
.lb__stage img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  transform: scale(.97);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.lb.is-open .lb__stage img { transform: none; opacity: 1; }
.lb__stage figcaption {
  color: rgba(255,255,255,.82);
  font-size: 0.875rem; text-align: center; max-width: 60ch;
}

.lb__btn {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.42); }
.lb__btn:active { transform: scale(.94); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lb__prev  { left:  clamp(12px, 2.5vw, 30px); top: 50%; margin-top: -25px; }
.lb__next  { right: clamp(12px, 2.5vw, 30px); top: 50%; margin-top: -25px; }

.lb__count {
  position: absolute; bottom: clamp(14px, 3vw, 28px); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.6); font-size: 0.75rem; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .lb { padding: 10px; }
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__btn { width: 44px; height: 44px; }
  .lb__stage img { max-height: 70vh; }
  .lb__stage figcaption { font-size: 0.8125rem; padding: 0 44px; }
}

/* --------------------------------------------------------------------------
   13. FAQ page
   -------------------------------------------------------------------------- */
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.faq-nav a {
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  font-size: 0.8125rem; color: var(--ink-3);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.faq-nav a:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

.faq-group { margin-bottom: clamp(48px, 6vw, 80px); scroll-margin-top: calc(var(--nav-h) + 28px); }
.faq-group > h2 { margin-bottom: 8px; }
.faq-group > .fine { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   14. Prose (legal, support, science body)
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  margin: 2.4em 0 0.6em;
  letter-spacing: -0.03em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em;
  margin: 1.9em 0 0.5em; color: var(--ink);
}
.prose p, .prose li { color: var(--ink-3); }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ink-5); }
.prose strong { color: var(--ink); font-weight: 550; }
.prose hr { border: 0; height: 1px; background: var(--hair); margin: 3em 0; }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding: 18px 0; margin-bottom: 40px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-size: 0.8125rem; color: var(--ink-4);
}

/* Table of contents rail */
.toc { position: sticky; top: calc(var(--nav-h) + 32px); font-size: 0.8125rem; }
.toc b {
  display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px;
}
.toc a {
  display: block; padding: 6px 0 6px 14px;
  color: var(--ink-3);
  border-left: 1.5px solid var(--hair);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }

.doc-layout { display: grid; grid-template-columns: 200px 1fr; gap: clamp(32px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   15. Cart & checkout
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 4vw, 60px); align-items: start; }

.line {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.line__img { border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); }
.line__img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.line__name { font-weight: 550; color: var(--ink); font-size: 0.9375rem; }
.line__var  { font-size: 0.8125rem; color: var(--ink-4); margin-top: 3px; }
.line__price { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--hair); border-radius: var(--r-pill); margin-top: 12px; }
.qty button {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 1rem; line-height: 1;
  border-radius: var(--r-pill);
  transition: color .2s, background-color .2s;
}
.qty button:hover { color: var(--ink); background: rgba(10,10,11,.05); }
.qty span { min-width: 28px; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.link-quiet { font-size: 0.8125rem; color: var(--ink-4); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background:none;border:0;padding:0; }
.link-quiet:hover { color: var(--ink); }

.summary {
  position: sticky; top: calc(var(--nav-h) + 28px);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--hair);
}
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 0.9375rem; color: var(--ink-3); }
.summary__row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.summary__total { border-top: 1px solid var(--hair); margin-top: 12px; padding-top: 18px; font-size: 1.0625rem; }
.summary__total b { font-size: 1.25rem; letter-spacing: -0.03em; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--hair);
  background: var(--paper);
  font-size: 0.9375rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--uv);
  box-shadow: 0 0 0 3.5px var(--uv-wash);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.empty { text-align: center; padding: clamp(56px, 9vw, 110px) 0; }
.empty svg { width: 46px; height: 46px; color: var(--ink-5); margin: 0 auto 22px; }

.notice-bar {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--uv-wash);
  border: 1px solid rgba(107,79,224,.22);
  font-size: 0.8125rem; line-height: 1.55; color: var(--ink-2);
  margin-bottom: 26px;
}
.notice-bar svg { width: 17px; height: 17px; color: var(--uv); flex: 0 0 auto; margin-top: 1px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.ftr { background: var(--paper-sink); color: rgba(255,255,255,.62); padding: clamp(60px, 8vw, 104px) 0 40px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
/* The full lockup rasterised at footer size rendered its strapline at ~4px —
   unreadable. The mark is set as icon + live wordmark instead, so it stays
   crisp at any size and the ™ is legible. */
.ftr__mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ftr__mark img { height: 36px; width: 36px; }
.ftr__mark span { font-size: 1.4375rem; font-weight: 600; letter-spacing: -0.032em; color: #fff; }
.ftr__by {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 18px;
}
/* The one published contact route. Without this the address exists only inside
   the legal pages, where nobody with an ordinary question will find it. */
.ftr__contact { margin-top: 16px; }
.ftr__contact a {
  font-size: 0.875rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.ftr__contact a:hover { border-bottom-color: #fff; }
.ftr__brand p { font-size: 0.875rem; max-width: 34ch; color: rgba(255,255,255,.68); }
.ftr h2 { color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 11px; }
.ftr a { font-size: 0.875rem; color: rgba(255,255,255,.62); transition: color .25s var(--ease); }
.ftr a:hover { color: #fff; }
/* Geophysis owns the technology, and the credit line already says so — so the
   credit line itself becomes the route there. A separate "visit our parent
   company" link would only repeat a name the footer has already said.
   Placed after `.ftr a` deliberately: equal specificity, so it must come later
   to keep the eyebrow at 10px instead of inheriting the 14px nav-link size.
   The arrow is the affordance — nothing else tells a 10px label it is clickable. */
.ftr__by a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: inherit; letter-spacing: inherit; color: inherit;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ftr__by a:hover, .ftr__by a:focus-visible { color: #fff; border-bottom-color: #fff; }
.ftr__by a svg { flex: 0 0 auto; margin-top: -1px; transition: transform .25s var(--ease); }
.ftr__by a:hover svg, .ftr__by a:focus-visible svg { transform: translate(1.5px, -1.5px); }
/* 404 carries the slim base-only footer, so its single Geophysis mention lives
   in the legal line instead. Same underline language, inherited 12px size. */
.ftr__base a {
  font-size: inherit; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ftr__base a:hover, .ftr__base a:focus-visible { color: #fff; border-bottom-color: #fff; }
.ftr__base {
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center;
  margin-top: clamp(46px, 6vw, 72px); padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 0.75rem; color: rgba(255,255,255,.58);
}
.ftr__legal-note {
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 0.75rem; line-height: 1.6; color: rgba(255,255,255,.6);
  max-width: 92ch;
}

/* --------------------------------------------------------------------------
   17. Scroll-reveal motion
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: translateY(26px) scale(.985); }
[data-reveal="scale"].is-in { transform: none; }

/* Images fade up from a soft blur — the "coming into focus through glass" note */
[data-reveal="lens"] { opacity: 0; transform: translateY(26px); filter: blur(9px); }
[data-reveal="lens"].is-in { opacity: 1; transform: none; filter: blur(0); }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ftr__brand { grid-column: 1 / -1; }
  .doc-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* iPad / tablet */
@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .hdr__in { justify-content: space-between; }
  .hdr__end .icon-btn span.lbl { display: none; }

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

  .pdp { grid-template-columns: 1fr; gap: 40px; }
  .pdp__media { position: static; }

  .gal { columns: 2; }
}

@media (max-width: 720px) {
  :root { --nav-h: 56px; }

  .duo { grid-template-columns: 1fr; gap: 28px; }
  .duo--flip .duo__media { order: 0; }
  .duo__media img, .duo__media--tall img { aspect-ratio: 4/3; }

  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }

  .hero__shot img { border-radius: var(--r-lg); }

  .strip { gap: 14px 26px; }
  .strip li { font-size: 0.75rem; }

  .line { grid-template-columns: 72px 1fr; }
  .line__price { grid-column: 2; text-align: right; }

  .ftr__top { grid-template-columns: 1fr; }
  .ftr__base { justify-content: flex-start; }

  .btn { --btn-px: 26px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  .gal { columns: 1; }
  .thumbs { gap: 8px; }
}

/* --------------------------------------------------------------------------
   19. Preferences & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__shot { transform: none !important; }
}

/* Fallback where backdrop-filter is unsupported: make the panes opaque
   enough to stay legible rather than washing out. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--glass, .glass { background: rgba(255, 255, 255, 0.94); }
  .hdr::before { background: rgba(255, 255, 255, 0.97); }
  .mnav { background: rgba(255, 255, 255, 0.99); }
}

@media print {
  .hdr, .mnav, .ftr, .btn-row, .hero__bloom { display: none !important; }
  body { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}