/* =====================================================================
   OULIV DESIGN SYSTEM
   Cream and white grounds, hairline rules, square geometry and large
   light display type. Premium, minimal, product-led.

   Contents
     01  Design tokens
     02  Reset and base
     03  Typography
     04  Layout primitives
     05  Header and navigation
     06  Buttons and links
     07  Hero
     08  Cards
     09  Product detail: specs, options, gallery
     10  Comparison table
     11  Selector
     12  Forms
     13  Accordion / FAQ
     14  Editorial and rich text
     15  Footer
     16  Utility and state
     17  Accessibility, motion, print

   Performance notes
     * No CSS framework, no runtime CSS-in-JS, no icon font — inline SVG only.
     * Custom properties keep the compiled file small enough to inline the
       critical portion if LCP needs further tuning.
     * Every animated property is transform/opacity so nothing triggers layout.
   ===================================================================== */

/* ---------------------------------------------------------------------
   01  DESIGN TOKENS

   The palette, type and rhythm below are OULIV's brand design language as
   set out in the Figma frame: warm cream and white grounds, near-black ink,
   two brand accents (olive and slate), hairline rules, square geometry and
   large light-weight display type.

   Two rules keep it consistent as the site grows:
     * Components never hard-code a colour or a size. Everything resolves to
       a token here, so a brand change is a change to this block only.
     * Fills and text have separate accent tokens. `--olive` is a fill that
       carries white text; `--olive-ink` is the darker value used when the
       accent is the TEXT on a light ground, so contrast stays above 4.5:1.
   --------------------------------------------------------------------- */
:root {
  /* Ground ---------------------------------------------------------- */
  --paper:        #FFFFFF;   /* default page ground */
  --paper-raised: #FFFFFF;
  --sand:         #F4EEE6;   /* the cream band that alternates with white */
  --sand-deep:    #EBE3D7;   /* image wells and inert placeholders */
  --line:         rgba(30, 30, 30, 0.22);   /* hairline rule */
  --line-soft:    rgba(30, 30, 30, 0.12);
  --line-hair:    rgba(30, 30, 30, 0.30);   /* card outline */

  /* Ink ------------------------------------------------------------- */
  --ink:        #1E1E1E;
  --ink-strong: #000000;
  --ink-soft:   #1E1E1E;
  /* 0.60 composites to 5.5:1 on cream by the WCAG formula, but axe scores the
     same pair at 4.46 — the two disagree at the third decimal of the sRGB
     blend, and an auditor will be running axe. Secondary text sits at 0.68 so
     it passes under either calculation with room to spare, and is still
     unmistakably lighter than the #1E1E1E body copy. */
  --muted:      rgba(0, 0, 0, 0.68);
  --muted-soft: rgba(0, 0, 0, 0.45);   /* NON-TEXT ONLY — 3.4:1, fails AA as text */

  /* Brand accents --------------------------------------------------- */
  --olive:        #6E724F;   /* fill, always with white text (5.02:1) */
  --olive-deep:   #585B3F;   /* pressed / hover fill */
  --olive-ink:    #5E6143;   /* olive AS TEXT on white or cream (5.6:1+) */
  --olive-tint:   #EDEDE4;
  --slate:        #334C5E;   /* second accent: fill with white text (8.99:1) */
  --slate-deep:   #294051;
  --slate-ink:    #334C5E;

  /* Aliases kept so every existing component resolves without change. */
  --accent:        var(--olive);
  --accent-strong: var(--olive-ink);
  --accent-soft:   #9AA07A;
  --accent-tint:   var(--olive-tint);

  /* Signal colours (never the only carrier of meaning) --------------- */
  --positive:      #3B5C3A;
  --positive-tint: #E7EEE5;
  --caution:       #7C5218;
  --caution-tint:  #F6ECDD;
  --critical:      #8C3A2E;
  --critical-tint: #F7E7E3;

  /* Dark surfaces: the compare panel, the CTA band and the footer ----- */
  --dark:         #1E1E1E;
  --dark-raised:  #2B271F;
  --dark-line:    rgba(255, 255, 255, 0.22);
  --dark-ink:     #FFFFFF;
  --dark-muted:   rgba(255, 255, 255, 0.60);

  /* Typography ------------------------------------------------------ */
  /* Stack Sans, self-hosted as two variable woff2 files. SIL OFL 1.1 —
     see /assets/fonts/LICENSE-stack-sans.txt. No third-party font host, so
     no render-blocking external request and nothing to allow in the CSP.  */
  --font-display: "OULIV Display", "Stack Sans Headline", "Helvetica Neue",
                  Arial, ui-sans-serif, system-ui, sans-serif;
  --font-body:    "OULIV Text", "Stack Sans Text", "Helvetica Neue",
                  Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* The design is drawn at 1440px with a 60/36/21/18/16 scale. These clamps
     reproduce those sizes at the top end and stay readable on a phone, so
     the layout never relies on a horizontal squeeze. */
  --step--2: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);  /* 13px  */
  --step--1: clamp(0.875rem, 0.85rem + 0.14vw, 1rem);      /* 16px  */
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.125rem);      /* 18px  */
  --step-1:  clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem); /* 21px  */
  --step-2:  clamp(1.375rem, 1.15rem + 1.0vw, 1.75rem);    /* 28px  */
  --step-3:  clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem);    /* 36px  */
  --step-4:  clamp(2rem, 1.35rem + 2.9vw, 3.75rem);        /* 60px  */
  --step-5:  clamp(2.25rem, 1.45rem + 3.6vw, 3.75rem);     /* 60px  */

  /* Weights. The display face is used light and large — that lightness is
     the single most recognisable thing about the brand, so it is a token
     rather than a number repeated through the file. */
  --w-display: 300;
  --w-body:    300;
  --w-medium:  400;
  --w-strong:  500;

  /* Spacing — the 9 / 12 / 21 / 24 / 27 / 36 / 45 rhythm of the frame. */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1.3125rem; /* 21 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2.25rem;   /* 36 */
  --sp-7:  2.8125rem; /* 45 */
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* Section rhythm.
     The design frame was drawn at 45px because a Figma artboard has no
     scroll — on a real page that reads as crowded, which is the single
     biggest reason a text-led page feels cheap. Premium interiors brands
     sit between 90px and 160px, and the difference is entirely perceived
     quality: the same words, more air, reads as more considered.        */
  --section-y:    clamp(4.5rem, 9vw, 9.5rem);   /* 72 – 152px */
  --section-y-sm: clamp(3rem, 5.5vw, 5.5rem);   /* 48 – 88px  */
  --section-y-lg: clamp(6rem, 12vw, 13rem);     /* 96 – 208px, statement bands */
  --gutter:       clamp(1.25rem, 3vw, 2.5rem);  /* 40px at full size */

  /* Line length. Anything past ~75 characters costs comprehension and
     looks like a wall; these are enforced as tokens so no component can
     quietly opt out. */
  --measure:       62ch;   /* body prose */
  --measure-lede:  46ch;   /* introductory paragraph */
  --measure-tight: 34ch;   /* display headings */

  /* Shape — the frame is square throughout. Radius tokens are kept (rather
     than deleted) so a future rounded variant is a one-line change. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* The notch. Two signature shapes cut a 45-degree corner: the ribbon tag
     (bottom right) and the question box (top right). */
  --notch:     21px;
  --notch-lg:  36px;

  /* Elevation — this design separates surfaces with hairlines and ground
     colour, not shadow. The tokens stay so components need no edits. */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: none;

  /* Motion — subtle, and only where it aids comprehension */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:      180ms;
  --dur-slow: 320ms;

  --header-h: 78px;
  --focus:    2px solid var(--olive-ink);
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}

/* Self-hosted variable fonts. Two files, two subsets, no external request.
   `font-display: swap` with a metric-compatible Helvetica/Arial fallback
   keeps the first paint readable and the layout shift small. */
@font-face {
  font-family: "OULIV Text";
  src: url("/assets/fonts/ouliv-text.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "OULIV Text";
  src: url("/assets/fonts/ouliv-text-ext.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1AB0-1ACE, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "OULIV Display";
  src: url("/assets/fonts/ouliv-display.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "OULIV Display";
  src: url("/assets/fonts/ouliv-display-ext.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1AB0-1ACE, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   02  RESET AND BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--w-body);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The width/height attributes reserve the box so nothing shifts on load; the
   base `height: auto` above lets CSS drive the size. Do NOT reinstate an
   `img[width][height]` rule here — its specificity (0-2-1) beats any single
   class, so it quietly overrides component rules that need an explicit
   height, leaving images overflowed or letterboxed with no error. */

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--accent-tint);
  color: var(--ink-strong);
}

/* ---------------------------------------------------------------------
   03  TYPOGRAPHY
   --------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink-strong);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--step-5); line-height: 1.14; }
h2, .h2 { font-size: var(--step-4); line-height: 1.14; }
h3, .h3 { font-size: var(--step-3); }
h4, .h4 { font-size: var(--step-3); }
.h-sm    { font-size: var(--step-2); }

p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font-size: var(--step-1);
  font-weight: var(--w-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-6);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.42;
  color: var(--muted);
  max-width: var(--measure-lede);
}
.lede--sm { font-size: var(--step--1); line-height: 1.35; max-width: var(--measure); }
.lede--lg { font-size: var(--step-2); line-height: 1.32; max-width: 30ch; color: var(--ink); }

.muted   { color: var(--muted); }
.small   { font-size: var(--step--1); }
.tiny    { font-size: var(--step--2); }
.tabular { font-variant-numeric: tabular-nums; }

.section-head { max-width: none; margin-bottom: var(--sp-8); }
.section-head h2 { max-width: var(--measure-tight); }
.section-head p { color: var(--muted); margin-top: var(--sp-5); max-width: var(--measure-lede); }
.section-head .eyebrow { margin-bottom: var(--sp-5); }

.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--sp-5);
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .section-head--split:has(> :nth-child(2)) > :last-child { justify-self: end; text-align: right; }
}

/* ---------------------------------------------------------------------
   04  LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }
.container--wide   { max-width: 1600px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-sm); }
.section--tall  { padding-block: var(--section-y-lg); }
.section--sand  { background: var(--sand); }
.section--tint  { background: var(--sand); }
.section--dark  { background: var(--dark); color: var(--dark-ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--dark-ink); }
.section--dark .muted, .section--dark p { color: var(--dark-muted); }
.section--dark .eyebrow { color: var(--accent-soft); }

.section + .section--sand,
.section--sand + .section { border-top: 1px solid var(--line-soft); }

.grid { display: grid; gap: var(--sp-6); }
.grid--airy { gap: clamp(2.25rem, 5vw, 4.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-deep);
  aspect-ratio: 4 / 3;
}
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--wide     { aspect-ratio: 16 / 9; }
.frame--square   { aspect-ratio: 1 / 1; }
.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder shown wherever real photography is not yet supplied. */
/* An unfilled image slot is visible to real visitors for as long as the
   photography takes to produce, so it is designed rather than left as a grey
   hole. A soft two-tone ground, a corner rule and a quiet centred label read
   as a considered empty frame — the composition around it already looks
   finished, and the day the shoot lands nothing about the layout changes. */
.frame--placeholder {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 12%, #FFFFFF 0%, transparent 60%),
    linear-gradient(160deg, var(--sand) 0%, var(--sand-deep) 100%);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
/* Two hairline corner brackets — an aperture, not a broken image icon. */
.frame--placeholder::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 4%, 22px);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  pointer-events: none;
  /* Fixed arm length, not a percentage: on a 21:9 band a percentage draws a
     long horizontal arm and a stub vertical one, which reads as a broken
     border rather than a bracket. */
  --arm: 34px;
  -webkit-mask: linear-gradient(#000 0 0) top left / var(--arm) 1px no-repeat,
                linear-gradient(#000 0 0) top left / 1px var(--arm) no-repeat,
                linear-gradient(#000 0 0) bottom right / var(--arm) 1px no-repeat,
                linear-gradient(#000 0 0) bottom right / 1px var(--arm) no-repeat;
          mask: linear-gradient(#000 0 0) top left / var(--arm) 1px no-repeat,
                linear-gradient(#000 0 0) top left / 1px var(--arm) no-repeat,
                linear-gradient(#000 0 0) bottom right / var(--arm) 1px no-repeat,
                linear-gradient(#000 0 0) bottom right / 1px var(--arm) no-repeat;
}
.frame--placeholder::after {
  content: attr(data-label);
  font-size: var(--step--2);
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: var(--sp-6);
  max-width: 30ch;
  position: relative;
}
/* On a cream band the placeholder inverts, so it never merges with the ground. */
.section--sand .frame--placeholder,
.statement--cream .frame--placeholder {
  background:
    radial-gradient(120% 90% at 50% 12%, #FFFFFF 0%, transparent 65%),
    linear-gradient(160deg, #FBF8F3 0%, var(--sand) 100%);
}

/* ---------------------------------------------------------------------
   05  HEADER AND NAVIGATION
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 200;
  background: var(--ink-strong);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line-soft); }

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9375rem;            /* 15px, per the frame */
  text-decoration: none;
  color: var(--slate);
  flex-shrink: 0;
}
/* The wordmark is a single inline SVG that inherits `color`, so the same
   file serves the white header and the dark footer. */
.brand__mark {
  display: block;
  width: 116px;
  height: auto;
  flex-shrink: 0;
  color: inherit;
}
@media (min-width: 900px) { .brand__mark { width: 145px; } }
.brand__descriptor {
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
  white-space: nowrap;
}
@media (max-width: 1080px) { .brand__descriptor { display: none; } }

.primary-nav { display: none; }
@media (min-width: 1040px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.4vw, 1.6rem);
  }
}
.primary-nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.006em;
  padding: 0.45rem 0;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover { color: var(--ink-strong); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--ink-strong); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.header-actions .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .header-actions .btn--ghost { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  color: var(--ink);
  font-size: var(--step--1);
  min-height: 42px;
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle__bars {
  display: block;
  width: 17px;
  height: 9px;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1040px) { .mobile-nav { display: none !important; } }

.mobile-nav ul { padding-block: var(--sp-3); }
.mobile-nav a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step-1);
  font-family: var(--font-display);
  letter-spacing: -0.018em;
}
.mobile-nav .cluster { padding-block: var(--sp-5); }

/* ---------------------------------------------------------------------
   06  BUTTONS AND LINKS
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-strong);
  --btn-fg: #FFFFFF;
  --btn-border: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 0.9375rem;   /* 12 / 15 per the frame */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 0;
  font-size: var(--step--1);
  font-weight: var(--w-medium);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Primary = the dark filled button. Olive is reserved for the header
   quote action and the ribbon tags, so the page has one dominant CTA. */
.btn--primary { --btn-bg: var(--dark-raised); --btn-border: var(--dark-raised); --btn-fg: #fff; padding: 0.9375rem; }
.btn--primary:hover { --btn-bg: #000; --btn-border: #000; }

.btn--olive { --btn-bg: var(--olive); --btn-border: var(--olive); --btn-fg: #fff; }
.btn--olive:hover { --btn-bg: var(--olive-deep); --btn-border: var(--olive-deep); }

.btn--ink:hover { --btn-bg: #000; --btn-border: #000; }

/* Header phone: an outlined olive pill sitting next to the filled quote
   action, so the two read as a pair without competing. */
.btn--phone {
  --btn-bg: transparent;
  --btn-fg: var(--olive-ink);
  --btn-border: var(--olive);
  font-variant-numeric: tabular-nums;
}
.btn--phone:hover { --btn-bg: var(--olive-tint); }
@media (max-width: 620px) { .btn--phone span { display: none; } .btn--phone { padding-inline: 0.85rem; } }


.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--dark-raised);
  padding: 0.9375rem;
}
.btn--secondary:hover { --btn-bg: var(--dark-raised); --btn-fg: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line);
}
.btn--ghost:hover { --btn-fg: var(--ink-strong); --btn-border: var(--ink); }

/* Text-only action with a trailing arrow — the third, quietest CTA. */
.btn--text {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--dark-raised);
  padding: 0.9375rem 0;
  min-height: 0;
}
.btn--text:hover { --btn-fg: var(--olive-ink); text-decoration: underline; }
.btn--text-on-dark { --btn-fg: #fff; padding: 0.75rem 0; min-height: 0; --btn-bg: transparent; --btn-border: transparent; }
.btn--text-on-dark:hover { text-decoration: underline; }

/* On the photographic banner */
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink-strong); --btn-border: #fff; }
.btn--white:hover { --btn-bg: var(--sand); --btn-border: var(--sand); }
.btn--white:focus-visible,
.btn--outline-white:focus-visible,
.btn--text-on-dark:focus-visible,
.btn--on-dark:focus-visible,
.btn--on-dark-ghost:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}
.btn--outline-white { --btn-bg: transparent; --btn-fg: #fff; --btn-border: #fff; border-width: 1.5px; }
.btn--outline-white:hover { --btn-bg: rgba(255,255,255,0.14); }

.btn--on-dark {
  --btn-bg: var(--dark-ink);
  --btn-fg: var(--dark);
  --btn-border: var(--dark-ink);
}
.btn--on-dark-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dark-ink);
  --btn-border: var(--dark-line);
}
.btn--on-dark-ghost:hover { --btn-border: var(--dark-muted); }

.btn--lg { min-height: 54px; padding: 0.95rem 1.5rem; font-size: var(--step-0); }
.btn--sm { min-height: 38px; padding: 0.45rem 0.9rem; font-size: var(--step--2); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn__icon { width: 1em; height: 1em; flex-shrink: 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dark-raised);
  font-weight: var(--w-medium);
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.link-arrow:hover { gap: 0.75rem; color: var(--olive-ink); border-bottom-color: currentColor; }
.link-arrow svg { width: 0.9em; height: 0.9em; }

a { color: var(--olive-ink); text-underline-offset: 0.18em; }
a:hover { color: var(--ink-strong); }

/* ---------------------------------------------------------------------
   07  HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lede { margin-bottom: var(--sp-6); }
.hero__actions { gap: var(--sp-3); }
.hero__media .frame { aspect-ratio: 5 / 4; box-shadow: var(--shadow-lg); }

/* Answer-first strip: what / problem / who / next — readable in 3–5 seconds */
.hero__answers {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .hero__answers { grid-template-columns: repeat(3, 1fr); } }
.hero__answer dt {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.hero__answer dd { font-size: var(--step--1); color: var(--ink-soft); }

.page-hero {
  padding-block: clamp(3rem, 7vw, 7rem) clamp(3.5rem, 8vw, 8rem);
  background: var(--sand);
}
.page-hero h1 { max-width: var(--measure-tight); }
.page-hero .lede { margin-top: var(--sp-6); }
.page-hero .breadcrumbs { margin-bottom: var(--sp-7); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--2);
  color: var(--muted);
  margin-bottom: var(--sp-4);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs li::after { content: "/"; margin-left: 0.45rem; color: var(--line); }
.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   08  CARDS
   --------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
/* On a cream band the card inverts to white so the two never merge. */
.section--sand .card,
.section--sand .tile__icon-top { width: 30px; height: 30px; color: var(--ink); margin-bottom: var(--sp-6); }

.tile { background: var(--sand); }
.card:hover { border-color: var(--ink); }
.card__media { background: var(--sand-deep); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); flex: 1; }
.card__body > .link-arrow { margin-top: auto; align-self: flex-start; }
.card h3 { font-size: var(--step-3); }
.card p { color: var(--ink); font-size: var(--step--1); line-height: 1.55; max-width: 46ch; }

/* Whole-card link without nesting interactive elements */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card__link { text-decoration: none; color: inherit; }

.product-card .card__media { aspect-ratio: 4 / 3; }
.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--step--2);
  color: var(--muted);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
}
.product-card__meta strong { color: var(--ink-soft); font-weight: 550; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 550;
  letter-spacing: 0.02em;
  background: var(--sand);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.badge--accent    { background: var(--olive-tint); border-color: color-mix(in srgb, var(--olive) 34%, transparent); color: var(--olive-ink); }
.badge--positive  { background: var(--positive-tint); border-color: color-mix(in srgb, var(--positive) 30%, transparent); color: var(--positive); }
.badge--caution   { background: var(--caution-tint);  border-color: color-mix(in srgb, var(--caution) 30%, transparent);  color: var(--caution); }
.badge--critical  { background: var(--critical-tint); border-color: color-mix(in srgb, var(--critical) 30%, transparent); color: var(--critical); }

/* Feature / proof point tiles */
.tile {
  padding: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--sand);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.tile > p:last-child { margin-top: auto; }
.tile__icon {
  width: 30px;
  height: 30px;
  color: var(--accent-strong);
  margin-bottom: var(--sp-4);
}
.tile h3 { font-size: var(--step-3); margin-bottom: var(--sp-6); }
.tile p { color: var(--ink); font-size: var(--step--1); line-height: 1.55; max-width: 46ch; }

/* Numbered process: Choose → Deliver → Assemble → Use */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: step; position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--ink-strong); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  display: block;
  margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--step-3); margin-bottom: var(--sp-6); }
.step p { color: var(--ink); font-size: var(--step--1); line-height: 1.55; max-width: 40ch; }

/* Statistic row — every figure must carry a source or it is not shown */
.stat-row { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); }
.stat__source { font-size: var(--step--2); color: var(--muted); margin-top: var(--sp-1); }

/* Before / after comparison of open-plan vs private space */
.contrast__face { width: 80px; height: 80px; flex-shrink: 0; }
.contrast__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); width: 100%; }

.contrast {
  display: grid;
  gap: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-raised);
}
@media (min-width: 800px) { .contrast { grid-template-columns: 1fr 1fr; gap: 0; } }
.contrast__panel {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  background: var(--dark-raised);
  color: var(--dark-ink);
  border: 1px solid rgba(255,255,255,0.25);
}
.contrast__panel + .contrast__panel { border-top: 1px solid var(--line); }
@media (min-width: 800px) {
  .contrast__panel + .contrast__panel { border-top: 0; border-left: 1px solid var(--line); }
}
.contrast__panel--after {
  background: var(--paper-raised);
  color: var(--ink-strong);
  border-color: var(--line-hair);
}
.contrast__panel h3 { font-size: var(--step-3); color: inherit; }
.contrast__panel--after h3 { color: var(--ink-strong); }
.contrast__label--h3 { font-size: var(--step-3); text-transform: none; letter-spacing: 0; }

.contrast__label {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.contrast__panel ul { display: flex; flex-direction: column; gap: 0.5625rem; width: 100%; }
.contrast__panel li { color: rgba(255,255,255,0.72); border-bottom: 1px solid rgba(255,255,255,0.32); }
.contrast__panel--after li { color: rgba(0,0,0,0.72); border-bottom: 1px solid rgba(0,0,0,0.22); }
.contrast__panel li:last-child { border-bottom: 0; }

.contrast ul li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.contrast ul li:last-child { border-bottom: 0; }
.contrast ul li svg { width: 1.05em; height: 1.05em; flex-shrink: 0; margin-top: 0.28em; }

/* ---------------------------------------------------------------------
   09  PRODUCT DETAIL
   --------------------------------------------------------------------- */
.product-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) {
  .product-layout { grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr); align-items: start; }
}

.product-gallery { display: grid; gap: var(--sp-3); }
.product-gallery__main { aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: var(--sand); }
.product-gallery__thumbs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.product-gallery__thumbs button {
  flex: 0 0 84px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--sand);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.product-gallery__thumbs button[aria-current="true"] { border-color: var(--accent-strong); border-width: 2px; }

.product-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: var(--sp-6);
}
@media (max-width: 999px) { .product-aside { position: static; } }
.product-aside .btn { width: 100%; }
.product-aside .btn + .btn { margin-top: var(--sp-3); }

.key-facts { display: grid; gap: 0; margin: var(--sp-5) 0; }
.key-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.key-facts div:last-child { border-bottom: 0; }
.key-facts dt { color: var(--muted); }
.key-facts dd { color: var(--ink-strong); font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }

/* Specification tables — technical transparency is a competitive advantage,
   so these are visible HTML, never PDF-only. */
.spec-group + .spec-group { margin-top: var(--sp-6); }
.spec-group h3 {
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-strong);
  margin-bottom: var(--sp-2);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
  vertical-align: top;
}
.spec-table th { font-weight: 450; color: var(--muted); width: 46%; }
.spec-table td { color: var(--ink-strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec-table .spec-evidence {
  display: block;
  font-size: var(--step--2);
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Shown in place of a specification that has no verified value yet. */
.spec-pending {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
}

.notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--sand);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.notice svg { width: 1.15em; height: 1.15em; flex-shrink: 0; margin-top: 0.22em; color: var(--accent-strong); }
.notice--caution { background: var(--caution-tint); border-color: color-mix(in srgb, var(--caution) 26%, transparent); }
.notice--positive { background: var(--positive-tint); border-color: color-mix(in srgb, var(--positive) 26%, transparent); }
.notice--critical { background: var(--critical-tint); border-color: color-mix(in srgb, var(--critical) 30%, transparent); }

.option-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.option-swatch { text-align: center; width: 84px; }
.option-swatch__chip {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--sand-deep);
  margin-bottom: 0.4rem;
}
.option-swatch span { font-size: var(--step--2); color: var(--muted); }

.download-list { display: grid; gap: var(--sp-2); }
.download-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.download-item:hover { border-color: var(--accent-soft); background: var(--sand); }
.download-item__icon { width: 22px; height: 22px; color: var(--accent-strong); flex-shrink: 0; }
.download-item__body { flex: 1; min-width: 0; }
.download-item__body strong { display: block; font-weight: 550; font-size: var(--step--1); }
.download-item__body span { font-size: var(--step--2); color: var(--muted); }

/* ---------------------------------------------------------------------
   10  COMPARISON TABLE
   --------------------------------------------------------------------- */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  -webkit-overflow-scrolling: touch;
}
.compare-table { min-width: 720px; font-size: var(--step--1); }
.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 550;
  letter-spacing: -0.015em;
  z-index: 2;
}
.compare-table tbody th {
  font-weight: 450;
  color: var(--muted);
  background: var(--paper-raised);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  border-right: 1px solid var(--line-soft);
}
.compare-table td { font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.compare-table tr:hover td { background: color-mix(in srgb, var(--sand) 50%, transparent); }
.compare-table .row-group th {
  background: var(--sand);
  color: var(--ink-strong);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compare-hint {
  font-size: var(--step--2);
  color: var(--muted);
  margin-top: var(--sp-3);
}
@media (min-width: 900px) { .compare-hint { display: none; } }

/* ---------------------------------------------------------------------
   11  SELECTOR — "Find Your OULIV Space"
   --------------------------------------------------------------------- */
.selector { display: grid; gap: var(--sp-6); }
.selector fieldset { border: 0; padding: 0; margin: 0; }
.selector legend {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin-bottom: var(--sp-4);
  padding: 0;
}
.choice-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 56px;
}
.choice:hover { border-color: var(--accent-soft); }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice__indicator {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--muted-soft);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.2em;
  display: grid;
  place-items: center;
  transition: border-color var(--dur) var(--ease);
}
.choice__indicator::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-strong);
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
}
.choice input:checked ~ .choice__indicator { border-color: var(--accent-strong); }
.choice input:checked ~ .choice__indicator::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-tint); }
.choice input:focus-visible ~ .choice__indicator { outline: var(--focus); outline-offset: 3px; }
.choice__text strong { display: block; font-weight: 550; font-size: var(--step--1); }
.choice__text span { font-size: var(--step--2); color: var(--muted); }

.recommendation {
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  padding: var(--sp-6);
}
.recommendation__rank {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-2);
}
.recommendation__why { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   12  FORMS
   --------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 680px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.field { display: grid; gap: 0.4rem; }
.field--span { grid-column: 1 / -1; }

.field label {
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-soft);
}
.field .hint { font-size: var(--step--2); color: var(--muted); }
.field .required { color: var(--critical); margin-left: 0.15rem; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236C665C' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--critical); }

.field-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--step--2);
  color: var(--critical);
  font-weight: 500;
}
.field-error svg { width: 1em; height: 1em; flex-shrink: 0; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox input {
  width: 20px;
  height: 20px;
  margin: 0.15em 0 0;
  accent-color: var(--accent-strong);
  flex-shrink: 0;
}

.file-drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  padding: var(--sp-6);
  text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.file-drop[data-dragover="true"] { border-color: var(--accent-strong); background: var(--accent-tint); }
.file-drop svg { width: 26px; height: 26px; color: var(--muted-soft); margin: 0 auto var(--sp-3); }
.file-drop strong { display: block; font-size: var(--step--1); font-weight: 550; }
.file-drop span { font-size: var(--step--2); color: var(--muted); }
.file-drop input[type="file"] { margin-top: var(--sp-3); font-size: var(--step--2); width: 100%; }

.file-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step--2);
  background: var(--paper-raised);
}

/* Honeypot — visually and programmatically hidden from real users */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-summary {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--critical);
  background: var(--critical-tint);
  color: var(--critical);
  font-size: var(--step--1);
}
.form-summary h2 { font-size: var(--step-0); color: inherit; margin-bottom: var(--sp-2); }
.form-summary li { list-style: disc; margin-left: 1.15rem; }

.form-success {
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--positive);
  background: var(--positive-tint);
  color: var(--positive);
}

.form-aside {
  padding: var(--sp-6);
  background: var(--sand);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  height: fit-content;
}
.form-aside h2 { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.form-aside ul li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.form-aside ul li svg { width: 1.05em; height: 1.05em; color: var(--accent-strong); flex-shrink: 0; margin-top: 0.28em; }

/* ---------------------------------------------------------------------
   13  ACCORDION / FAQ
   --------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-display);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
.faq summary:hover { color: var(--ink-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__answer { padding-bottom: var(--sp-6); color: var(--ink); max-width: var(--measure); line-height: 1.6; }
.faq__answer > * + * { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   14  EDITORIAL AND RICH TEXT
   --------------------------------------------------------------------- */
.prose { max-width: var(--measure); color: var(--ink); font-size: var(--step-0); line-height: 1.62; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-2);
  color: var(--ink-strong);
}
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); color: var(--ink-strong); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul li { list-style: disc; margin-bottom: 0.45rem; }
.prose ol li { list-style: decimal; margin-bottom: 0.45rem; }
.prose a { color: var(--olive-ink); text-decoration: underline; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-5);
  font-size: var(--step-1);
  color: var(--ink-strong);
  font-style: normal;
}
.prose table { margin-block: var(--sp-5); font-size: var(--step--1); }
.prose th, .prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
.prose th { background: var(--sand); font-weight: var(--w-strong); }
.prose figure { margin-block: var(--sp-6); }
.prose figcaption { font-size: var(--step--2); color: var(--muted); margin-top: var(--sp-2); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--sand);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-xs);
}

/* Answer-first block for question-style content */
.answer-first {
  padding: var(--sp-5);
  border-left: 3px solid var(--accent);
  background: var(--sand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.answer-first strong { display: block; margin-bottom: var(--sp-2); color: var(--ink-strong); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--step--2);
  color: var(--muted);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line-soft);
}
.article-meta strong { color: var(--ink-soft); font-weight: 550; }

.quote-block {
  max-width: 40ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.quote-block cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0;
}

/* Filters and listing controls */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.filter-bar .select { min-height: 42px; width: auto; min-width: 170px; font-size: var(--step--1); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
  font-size: var(--step--2);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 36px;
}
.chip:hover { border-color: var(--accent-soft); }
.chip[aria-current="true"] { background: var(--dark-raised); border-color: var(--dark-raised); color: #fff; }

.pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.pagination [aria-current="page"] { background: var(--dark-raised); color: #fff; border-color: var(--dark-raised); }

.empty-state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.empty-state h2 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.empty-state p { color: var(--muted); max-width: 52ch; margin: 0 auto var(--sp-5); }

/* CTA band */
.cta-band {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
}
.cta-band h2 { color: var(--dark-ink); max-width: 24ch; }
.cta-band p { color: var(--dark-muted); max-width: var(--measure); margin-top: var(--sp-6); }
.cta-band .cluster { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------
   15  FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: var(--dark-muted);
  padding-block: var(--sp-8) var(--sp-6);
  margin-top: var(--section-y);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-muted);
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.site-footer a { color: var(--dark-ink); text-decoration: none; font-size: var(--step-0); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer li { padding: 0.3rem 0; }
.site-footer .brand__mark { color: var(--dark-ink); }
.site-footer__about { max-width: 40ch; font-size: var(--step--1); margin-top: var(--sp-4); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: var(--step--2);
}
.site-footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Cookie consent */
.consent-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 150;
  max-width: 640px;
  margin-inline: auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  display: none;
}
.consent-bar[data-visible="true"] { display: block; }
.consent-bar p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------------
   16  UTILITY AND STATE
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.no-wrap { white-space: nowrap; }
.full-bleed-top { margin-top: calc(var(--section-y) * -1); }

/* Reveal-on-scroll: opacity/transform only, and disabled under reduced motion */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   18  BRAND SIGNATURE COMPONENTS

   Two shapes carry the identity: a ribbon tag with the bottom-right corner
   cut away, and a panel with the top-right corner cut away. Both are drawn
   with clip-path rather than images so they inherit brand colour, stay
   crisp at any zoom and cost nothing to download.

   clip-path removes the element's own border, so the outlined variant is
   built as a coloured parent clipped to the same shape with a 1px pad —
   the parent edge reads as the border.
   --------------------------------------------------------------------- */

/* --- Ribbon tag ---------------------------------------------------- */
.tag {
  --tag-bg: var(--olive);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 2.0625rem 0.5625rem 0.75rem;  /* 9 / 33 / 9 / 12 */
  background: var(--tag-bg);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-display);
  line-height: 1.3;
  text-decoration: none;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - var(--notch)) 100%, 0 100%);
  transition: background-color var(--dur) var(--ease);
}
.tag--olive { --tag-bg: var(--olive); }
.tag--slate { --tag-bg: var(--slate); }
.tag--dark  { --tag-bg: var(--dark-raised); }
.tag--sm    { font-size: var(--step-0); padding: 0.4375rem 1.75rem 0.4375rem 0.6875rem; --notch: 16px; }

a.tag:hover, button.tag:hover { --tag-bg: var(--olive-deep); color: #fff; }
a.tag--slate:hover, button.tag--slate:hover { --tag-bg: var(--slate-deep); }
a.tag--dark:hover,  button.tag--dark:hover  { --tag-bg: #000; }

/* clip-path clips the outline AND any outset box-shadow, so an ordinary focus
   ring on a ribbon tag is invisible. The ring is therefore drawn INSIDE the
   shape with inset shadows: a white line then a dark one, which reads clearly
   on all three tag colours and keeps the 3:1 non-text contrast requirement. */
a.tag:focus-visible, button.tag:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--ink-strong);
}

/* --- Notched panel (top-right corner cut) --------------------------- */
.notch-panel {
  --notch-bg: var(--sand);
  --notch-edge: var(--ink-strong);
  clip-path: polygon(0 0, calc(100% - var(--notch-lg)) 0, 100% var(--notch-lg), 100% 100%, 0 100%);
  background: var(--notch-edge);
  padding: 1px;
  display: flex;
}
.notch-panel__inner {
  clip-path: polygon(0 0, calc(100% - var(--notch-lg)) 0, 100% var(--notch-lg), 100% 100%, 0 100%);
  background: var(--notch-bg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.notch-panel__inner > .icon-30,
.notch-panel__inner > svg { color: var(--ink); }
.notch-panel h3, .notch-panel h4 { font-size: var(--step-3); }
.notch-panel p { color: var(--muted); font-size: var(--step--1); }
.section--sand .notch-panel { --notch-bg: var(--sand); }
.section:not(.section--sand) .notch-panel { --notch-bg: var(--paper-raised); }

/* --- Photographic banner ------------------------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dark);
  color: #fff;
}
/* Three layers, explicitly ordered: photograph, scrim, text. The scrim is its
   own layer rather than baked into the image so the same photograph can be
   swapped from the CMS without re-exporting a darkened version — and so the
   contrast of the headline over it is predictable rather than dependent on
   what happens to be in that corner of the picture. */
.banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 45%, rgba(0,0,0,0.34) 100%);
}
.banner__inner { z-index: 2; }
.banner__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-7);
  min-height: clamp(380px, 58vh, 720px);
  padding-block: var(--sp-7);
}
.banner h1 { color: #fff; max-width: 17ch; }
.banner__sub { color: #fff; font-size: var(--step-1); max-width: 46ch; line-height: 1.3; }
.banner .cluster { gap: var(--sp-4); }
@media (min-width: 780px) { .banner .cluster { gap: var(--sp-7); } }

/* --- Three-column "what / solves / who" strip ----------------------- */
.whats { display: grid; gap: var(--sp-6); }
@media (min-width: 780px) { .whats { grid-template-columns: repeat(3, 1fr); } }
.what-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.what-col .frame { width: 100%; aspect-ratio: 16 / 9; }
.what-col p { font-size: var(--step--1); color: rgba(0, 0, 0, 0.75); }
.what-col__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- Model card ----------------------------------------------------- */
.model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: var(--sand);
  border: 1px solid var(--line-soft);
}
.section--sand .model-card { background: var(--paper-raised); }
.model-card__name {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-medium);
  text-align: center;
  width: 100%;
  color: var(--ink-strong);
}
.model-card__desc {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-display);
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  width: 100%;
}
.model-card__media {
  width: 100%;
  height: clamp(210px, 22vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.model-card__media img { width: 100%; height: 100%; object-fit: contain; }
.model-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  margin-top: auto;
}
.model-card__capacity {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.model-card__capacity svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Icon sizes ------------------------------------------------------ */
.icon-18 { width: 18px; height: 18px; flex-shrink: 0; }
.icon-24 { width: 24px; height: 24px; flex-shrink: 0; }
.icon-30 { width: 30px; height: 30px; flex-shrink: 0; }

/* --- Inline note strip (the evidence-policy callout) ------------------ */
.note-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--sand);
}
.section--sand .note-strip { background: var(--paper-raised); }
.note-strip svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--dark-raised); }
.note-strip p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* --- Outlined panel (case study, see-and-specify, final CTA) --------- */
.panel-outline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  width: 100%;
}
.panel-outline--cream { background: var(--sand); }
.panel-outline h2 { font-size: var(--step-4); }
.panel-outline h3 { font-size: var(--step-3); }
.panel-outline p { color: var(--ink); max-width: var(--measure); line-height: 1.55; }

/* ---------------------------------------------------------------------
   19  EDITORIAL COMPONENTS

   A specification-led product has a lot to say, and saying it as page
   after page of paragraphs is what makes a site feel cheap regardless of
   how good the typography is. These components give a text page the same
   pacing a magazine has: a statement you cannot miss, an argument you can
   scan, a quote that slows you down, and an image that arrives at full
   width rather than trapped in a card.

   They are also the slots photography drops into. Every one of them works
   with a placeholder today and looks finished the day the shoot lands —
   the composition does not change, only the content of the frame.
   --------------------------------------------------------------------- */

/* --- Full-bleed helper ----------------------------------------------
   Breaks a child out of the centred container to the full viewport
   width. `100vw` includes the scrollbar, so the calc is against the
   documentElement width instead — otherwise every full-bleed element
   introduces a horizontal scrollbar of exactly the scrollbar's width. */
.bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* `100vw` includes the classic scrollbar, so on a desktop browser that shows
   one, every full-bleed element is a few pixels wider than the viewport and
   the page gains a horizontal scrollbar of its own. `overflow-x: clip` on the
   body removes that without creating a scroll container — which matters,
   because `overflow: hidden` here would silently break the `position: sticky`
   text column in .split-media. */
body { overflow-x: clip; }

/* --- Statement band --------------------------------------------------
   One sentence, very large, with nothing else on the screen. Used where
   the brand is making its strongest claim — the point of the page. */
.statement {
  padding-block: var(--section-y-lg);
  background: var(--dark);
  color: var(--dark-ink);
}
.statement--cream { background: var(--sand); color: var(--ink-strong); }
.statement--paper { background: var(--paper); color: var(--ink-strong); }

.statement__eyebrow {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-muted);
  margin-bottom: var(--sp-7);
}
.statement--cream .statement__eyebrow,
.statement--paper .statement__eyebrow { color: var(--muted); }

.statement p, .statement blockquote {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
/* Written as `.statement p.statement__note`, not `.statement__note`: the
   display rule above is `.statement p` (0-1-1) and would otherwise win, which
   would render the supporting sentence at headline size. */
.statement p.statement__note {
  margin-top: var(--sp-7);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--step-0);
  line-height: 1.62;
  letter-spacing: 0;
  max-width: var(--measure);
  color: var(--dark-muted);
}
.statement--cream p.statement__note,
.statement--paper p.statement__note { color: var(--muted); }

/* --- Numbered argument ----------------------------------------------
   Replaces a grid of identical prose boxes. The oversized numeral gives
   the eye somewhere to land and turns eight equal blocks into a sequence
   with a beginning and an end. */
.arguments { counter-reset: argument; border-top: 1px solid var(--line-soft); }

.argument {
  counter-increment: argument;
  display: grid;
  gap: var(--sp-5);
  padding-block: clamp(2.25rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
@media (min-width: 900px) {
  .argument { grid-template-columns: 5.5rem minmax(0, 17ch) minmax(0, var(--measure)); gap: clamp(1.75rem, 4vw, 4rem); }
}
.argument::before {
  content: counter(argument, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.9;
  color: var(--line);
  font-variant-numeric: tabular-nums;
}
.argument h2, .argument h3 {
  font-size: var(--step-3);
  line-height: 1.2;
  margin: 0;
}
.argument p { color: var(--muted); line-height: 1.62; margin: 0; max-width: var(--measure); }
.argument__icon { color: var(--olive-ink); margin-bottom: var(--sp-3); }

.argument__lead {
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink);
  max-width: 24ch;
}
/* The claims list is a sequence of positions, not a countdown — so it takes
   the same rhythm without the numerals. */
.arguments--plain { counter-reset: none; }
.argument--claim::before { content: none; }
@media (min-width: 900px) {
  .argument--claim { grid-template-columns: minmax(0, 22ch) minmax(0, var(--measure)); }
}
.argument--claim h3 { font-size: var(--step-2); }


/* --- Pull quote ------------------------------------------------------ */
.pull-quote {
  margin-block: var(--section-y-sm);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--olive);
  max-width: 34ch;
}
.pull-quote p {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-3);
  line-height: 1.28;
  color: var(--ink-strong);
  margin: 0;
}
.pull-quote cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--muted);
}

/* --- Split media -----------------------------------------------------
   A tall image beside a column of text. The text sticks while the image
   scrolls past it on wide screens, which is what makes the pairing read
   as one considered composition rather than two stacked blocks. */
.split-media {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .split-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split-media--text-right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split-media--text-right .split-media__text { order: 2; }
  .split-media__text { position: sticky; top: calc(var(--header-h) + var(--sp-7)); }
}
.split-media__text > * + * { margin-top: var(--sp-5); }
.split-media__text h2 { max-width: var(--measure-tight); }
.split-media__text p { color: var(--muted); line-height: 1.62; max-width: var(--measure); }
.split-media__media .frame { aspect-ratio: 4 / 5; }
.split-media__media figcaption {
  margin-top: var(--sp-4);
  font-size: var(--step--2);
  color: var(--muted);
}

/* --- Figure band -----------------------------------------------------
   A single image at full viewport width. The most effective thing a
   product site can do between two blocks of text. */
.figure-band { margin: 0; }
.figure-band .frame,
.figure-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) {
  .figure-band .frame, .figure-band img { aspect-ratio: 4 / 3; }
}
.figure-band figcaption {
  max-width: var(--max-w, 1440px);
  margin: var(--sp-4) auto 0;
  padding-inline: var(--gutter);
  font-size: var(--step--2);
  color: var(--muted);
}

/* --- Range band ------------------------------------------------------
   The three models at a size no card can give them, edge to edge on the
   cream ground. Renders on transparent backgrounds need a ground that is
   not white, or they float. */
.range-band {
  background: var(--sand);
  padding-block: clamp(3rem, 7vw, 6rem);
}
.range-band__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.range-band__item { margin: 0; text-align: center; }
.range-band__item img {
  width: 100%;
  height: clamp(200px, 26vw, 380px);
  object-fit: contain;
}
.range-band__item figcaption {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: var(--muted);
}

/* --- Media strip -----------------------------------------------------
   Two or three images edge to edge, no card, no border. */
.media-strip { display: grid; gap: 2px; }
@media (min-width: 760px) { .media-strip--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .media-strip--3 { grid-template-columns: repeat(3, 1fr); } }
.media-strip .frame { aspect-ratio: 1 / 1; }

/* --- Display figure --------------------------------------------------
   A single verified number, given the room it deserves. Only ever
   rendered when the value has evidence behind it. */
.figures { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 760px) { .figures--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .figures--2 { grid-template-columns: repeat(2, 1fr); } }
.figure-stat__value {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.figure-stat__value small { font-size: 0.4em; letter-spacing: 0; margin-left: 0.15em; color: var(--muted); }
.figure-stat__label { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink); max-width: 26ch; }
.figure-stat__source { margin-top: var(--sp-2); font-size: var(--step--2); color: var(--muted); }

/* --- Video band ------------------------------------------------------
   Poster first: nothing streams until the visitor asks for it, so a film
   on the page costs no bandwidth and no LCP to a visitor who never plays
   it. Captions are required, not optional — see the note in the view. */
.video-band { position: relative; margin: 0; }
.video-band__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark);
}
.video-band__frame img,
.video-band__frame video,
.video-band__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.video-band__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--step--1);
  transition: background-color var(--dur) var(--ease);
}
.video-band__play:hover { background: rgba(0, 0, 0, 0.42); }
.video-band__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.video-band__play span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.video-band__play svg { width: 18px; height: 18px; }
.video-band figcaption {
  margin-top: var(--sp-4);
  font-size: var(--step--2);
  color: var(--muted);
}
.video-band__transcript {
  max-width: var(--max-w, 1440px);
  margin: var(--sp-5) auto 0;
  padding-inline: var(--gutter);
}
.video-band__transcript summary {
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--olive-ink);
}
.video-band__transcript .prose { margin-top: var(--sp-4); }

/* --- Section intro ---------------------------------------------------
   Eyebrow, one heading, one short paragraph — and then space. Used at
   the top of a band instead of a heading jammed against its content. */
.intro { max-width: none; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.intro h2 { max-width: var(--measure-tight); }
.intro p { margin-top: var(--sp-5); color: var(--muted); max-width: var(--measure-lede); line-height: 1.55; }
@media (min-width: 1000px) {
  .intro--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
  .intro--split p { margin-top: 0; }
}

/* ---------------------------------------------------------------------
   17  ACCESSIBILITY, MOTION, PRINT
   --------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Every interactive target meets the 44px minimum on touch. */
@media (pointer: coarse) {
  a.chip, .btn, .nav-toggle, .pagination a, .product-gallery__thumbs button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Viewers who ask their OS for more contrast get darker secondary text and a
   heavier hairline — the layout is unchanged, only the values. */
@media (prefers-contrast: more) {
  :root {
    --muted:      rgba(0, 0, 0, 0.78);
    --muted-soft: rgba(0, 0, 0, 0.62);
    --line:       rgba(30, 30, 30, 0.45);
    --line-soft:  rgba(30, 30, 30, 0.30);
    --dark-muted: rgba(255, 255, 255, 0.82);
  }
}

@media print {
  .site-header, .site-footer, .consent-bar, .nav-toggle, .btn, .cta-band { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .compare-scroll { overflow: visible; border: 0; }
  .compare-table { min-width: 0; }
}