/* Generated by tools/fetch-fonts.mjs — do not edit by hand. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   HERA MEDICAL — DESIGN SYSTEM
   Apple-like clinical minimalism · glass interfaces · product-centred layout
   Palette, glass rules and motion budget follow the Hera Master Design Brief.
   ========================================================================== */

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

:root {
  /* Core palette — brief §3 */
  --bg:            #F2F3F6;   /* page canvas */
  --panel:         #F7F8FA;   /* section surface */
  --surface:       #FFFFFF;   /* card surface */
  --ink:           #1D1D1F;   /* primary text */
  --ink-2:         #6E6E73;   /* secondary text */
  --ink-3:         #727276;   /* muted label text — 4.5:1 on --panel */
  --ink-4:         #8E8E93;   /* decorative glyphs and separators only (3:1) */
  --accent:        #087C89;   /* Hera accent */
  --accent-700:    #05606B;
  --accent-600:    #066E7A;
  --accent-400:    #3AA0AC;
  --accent-200:    #A9D6DC;
  --accent-050:    #EAF4F5;
  --deep:          #0B3A46;   /* dark contrast surface, from the logo navy */
  --deep-2:        #0E4B5A;

  /* Hairlines */
  --line:          rgba(29, 29, 31, .08);
  --line-2:        rgba(29, 29, 31, .13);
  --line-light:    rgba(255, 255, 255, .70);

  /* Glass — brief §7. Three tiers, never all at once on one screen. */
  --glass-1-bg:    rgba(255, 255, 255, .72);   /* navbar, sticky controls */
  --glass-2-bg:    rgba(255, 255, 255, .58);   /* panels, cards */
  --glass-3-bg:    rgba(255, 255, 255, .84);   /* floating chips, popovers */
  --glass-blur-1:  saturate(180%) blur(24px);
  --glass-blur-2:  saturate(160%) blur(16px);
  --glass-blur-3:  saturate(190%) blur(30px);
  --glass-btn:     saturate(185%) blur(18px);  /* controls — see 06 BUTTONS */

  /* Layered, colour-tinted shadows — never a flat grey drop */
  --sh-1: 0 1px 2px rgba(11, 58, 70, .05),
          0 2px 6px -1px rgba(11, 58, 70, .04);
  --sh-2: 0 1px 2px rgba(11, 58, 70, .05),
          0 8px 20px -8px rgba(11, 58, 70, .12),
          0 24px 48px -28px rgba(11, 58, 70, .20);
  --sh-3: 0 2px 4px rgba(11, 58, 70, .06),
          0 16px 36px -12px rgba(11, 58, 70, .16),
          0 42px 80px -36px rgba(11, 58, 70, .26);
  --sh-accent: 0 1px 2px rgba(5, 96, 107, .28),
               0 8px 18px -6px rgba(5, 96, 107, .34),
               0 20px 40px -22px rgba(5, 96, 107, .40);

  /* Radii — squared off for a corporate register. The opening composition keeps
     its own softer radius (`--r-hero`, `--r-pill`) so the hero still matches the
     comp; everything below it is deliberately harder-edged. */
  --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-xl: 11px; --r-2xl: 12px;
  --r-btn: 6px;               /* control radius outside the hero */
  --r-hero: 20px;             /* the opening panel, measured off the comp */
  --r-pill: 999px;            /* hero controls and genuinely circular elements */

  /* Spacing tokens — intentional scale, not arbitrary steps */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px; --s-10: 120px;

  /* Layout */
  --gutter:  clamp(14px, 2.2vw, 26px);
  --pad:     clamp(20px, 4vw, 56px);
  --maxw:    1360px;
  --nav-h:   68px;

  /* Motion — brief §9: 95% calm precision, 5% magic */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .48, 1);
  --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; --dur-4: 620ms;

  --focus: 0 0 0 2px var(--panel), 0 0 0 4.5px var(--accent);

  color-scheme: light;
}

/* --------------------------------------------------------------- 02 RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 28px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv05';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
/* Several components set an explicit display, which would otherwise win over
   the hidden attribute. */
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }

::selection { background: var(--accent-200); color: var(--deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 50%; translate: -50% -140%;
  z-index: 200; padding: 12px 20px; border-radius: var(--r-sm);
  background: var(--deep); color: #fff; font-size: .9rem; font-weight: 500;
  transition: translate var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ----------------------------------------------------------- 03 TYPOGRAPHY */

.display, h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.028em; font-weight: 600; }

/* Editorial serif — used where the mockups set a serif headline */
.serif {
  font-family: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.14;
}

.h-hero    { font-size: clamp(2.3rem, 5.3vw, 4.05rem); letter-spacing: -.035em; }
.h-section { font-size: clamp(1.65rem, 3.1vw, 2.5rem); }
.h-sub     { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.02em; }
.h-card    { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

.lede { font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--ink-2); line-height: 1.7; max-width: 46ch; }
.body-sm { font-size: .9375rem; color: var(--ink-2); line-height: 1.65; }
.body-xs { font-size: .875rem; color: var(--ink-2); line-height: 1.6; }

/* Section eyebrow — small, letterspaced, teal */
.eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow-muted { color: var(--ink-3); }

/* Technical data gets its own typographic logic — brief §4 */
.mono {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
}
.num { font-variant-numeric: tabular-nums; }

.accent-text { color: var(--accent); }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* --------------------------------------------------------------- 04 LAYOUT */

.shell { width: 100%; padding-inline: var(--gutter); }

/* Sections are rounded surfaces floating on the canvas — the mockups' layering */
.panel {
  max-width: var(--maxw); margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-1);
  overflow: clip;
}
.panel + .panel { margin-top: var(--gutter); }
.panel-pad { padding: clamp(28px, 4.2vw, 56px) var(--pad); }
.panel-flush { background: transparent; border: 0; box-shadow: none; }
/* The opening composition is not a card. Dropping the surface lets the product
   run to the edge of the viewport instead of stopping at a rounded corner. */
.panel-plain {
  background: transparent; border: 0; box-shadow: none;
  border-radius: 0; overflow: visible;
}

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }

/* --------------------------------------------------------------- 05 GLASS */

.glass {
  background: var(--glass-2-bg);
  backdrop-filter: var(--glass-blur-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-1);
}
.glass-3 {
  background: var(--glass-3-bg);
  backdrop-filter: var(--glass-blur-3);
  -webkit-backdrop-filter: var(--glass-blur-3);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-2);
}

/* ------------------------------------------------------------- 06 BUTTONS */
/* Material is the supplied glass study (hera-design-guide/button-style.jpg):
   a frosted, back-blurred surface, a bright hairline rim, an iridescent bloom
   spilling over the top edge, and a wide soft drop shadow tinted with the hue
   of the surface it sits on.

   Every layer is a `background-image`, not a pseudo-element. Background layers
   paint under the label but over the tint, which is where a specular belongs;
   the old `::before` sheen sat *behind* an opaque fill and did nothing.

   Legibility sets the tint alphas. Glass takes its value from whatever is
   behind it, so the declared rgba() proves nothing — the numbers below are
   sampled off the composited pixels by `npm run check:contrast`, which walks
   every visible control on seven pages and reports the worst row inside the
   label's cap-height band:
     · primary   #367C86 under #fff → 4.89:1 lowest of 34   (AA needs 4.5) ✓
     · secondary --ink on frost     → 15.7:1                              ✓
   A thinner tint looks glassier and reads worse; .83 is the floor that holds.

   NOTE: headless Chrome reports `prefers-reduced-transparency: reduce` unless
   told otherwise, so a screenshot taken without emulating the default shows
   the opaque fallback at the bottom of this section, not this material. The
   capture scripts set it; see screenshot.mjs. */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 46px; padding: 12px 24px;
  border-radius: var(--r-btn);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.005em;
  isolation: isolate; overflow: hidden;
  backdrop-filter: var(--glass-btn);
  -webkit-backdrop-filter: var(--glass-btn);
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
/* Light sweep on hover — brief §9 "CTA hover: light sweep". Painted *over* the
   glass: a specular passes across a surface, not under it. */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%);
  translate: -130% 0; opacity: 0;
  transition: translate var(--dur-4) var(--ease-out), opacity var(--dur-1) linear;
}
.btn:hover::after { translate: 130% 0; opacity: 1; }
.btn .arrow { transition: translate var(--dur-2) var(--ease-spring); }
.btn:hover .arrow { translate: 3px 0; }
.btn:active { transform: translateY(1px) scale(.985); }

/* The global `:focus-visible` rule sets `box-shadow`, so the variants below
   would overwrite the ring, and its 3px radius would square off a focused
   pill. Restated here at (0,2,0) so no variant can outrank it. */
.btn:focus-visible {
  box-shadow: var(--focus), 0 10px 24px -12px rgba(11, 58, 70, .34);
  border-radius: var(--r-btn);
}

/* Primary — teal glass. What sells thick tinted glass is the EDGE, not the
   face: a bright specular along the top rim, a thinner bounce along the
   bottom where light leaves the pane, a hairline of refraction all the way
   round, and a wide detached shadow. The face stays calm so the label keeps
   its contrast.

   The top bloom is a radial with a deliberately tight falloff: its centre sits
   at -34% of the height and it reaches zero by 55%, i.e. ~y=15px on a 46px
   control — the row where the cap-height of the label starts. Measured at that
   row the bloom contributes under 4% white, so #fff on the tint stays 4.9:1. */
.btn-primary {
  color: #fff;
  background-color: rgba(7, 92, 104, .83);
  background-image:
    radial-gradient(78% 100% at 46% -34%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 55%),
    radial-gradient(46% 90% at 22% -30%, rgba(150, 222, 255, .30), rgba(150, 222, 255, 0) 58%),
    radial-gradient(46% 90% at 78% -30%, rgba(255, 210, 166, .22), rgba(255, 210, 166, 0) 58%),
    linear-gradient(168deg, rgba(38, 152, 168, .30) -14%, rgba(7, 92, 104, 0) 46%, rgba(1, 42, 49, .46) 132%);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .13),
    inset 0 1.5px 0 rgba(255, 255, 255, .60),
    inset 0 -1.5px 0 rgba(255, 255, 255, .18),
    0 1px 2px rgba(5, 96, 107, .16),
    0 12px 26px -12px rgba(5, 96, 107, .48),
    0 26px 50px -24px rgba(11, 58, 70, .42);
}
.btn-primary:hover {
  background-color: rgba(8, 104, 118, .84);
  border-color: rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 1.5px 0 rgba(255, 255, 255, .78),
    inset 0 -1.5px 0 rgba(255, 255, 255, .24),
    0 1px 2px rgba(5, 96, 107, .18),
    0 18px 34px -12px rgba(5, 96, 107, .54),
    0 34px 62px -26px rgba(11, 58, 70, .46);
  transform: translateY(-1.5px);
}
.btn-primary:active { transform: translateY(0) scale(.985); }
/* A full-strength white sweep would wash the tint out — half strength here. */
.btn-primary::after {
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .26) 50%, transparent 68%);
}

/* Secondary — clear frost. Ink on a light surface has contrast to spare, so
   this is where the fill can go genuinely thin and the panel tone behind it
   shows through the blur. Same edge language as the primary, inverted. */
.btn-secondary {
  color: var(--ink);
  background-color: rgba(255, 255, 255, .40);
  background-image:
    radial-gradient(70% 130% at 24% -38%, rgba(170, 212, 255, .42), rgba(170, 212, 255, 0) 60%),
    radial-gradient(62% 120% at 82% 146%, rgba(255, 214, 176, .32), rgba(255, 214, 176, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 54%);
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow:
    inset 0 0 0 1px rgba(11, 58, 70, .05),
    inset 0 1.5px 0 rgba(255, 255, 255, .98),
    inset 0 -1.5px 0 rgba(255, 255, 255, .55),
    0 1px 2px rgba(11, 58, 70, .06),
    0 12px 24px -12px rgba(11, 58, 70, .30),
    0 24px 46px -24px rgba(11, 58, 70, .28);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, .62);
  border-color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(8, 124, 137, .14),
    inset 0 1.5px 0 #fff,
    inset 0 -1.5px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(11, 58, 70, .07),
    0 18px 32px -12px rgba(11, 58, 70, .34),
    0 32px 58px -26px rgba(11, 58, 70, .32);
  transform: translateY(-1.5px);
}

/* Ghost is a text link wearing a button's box — no material at all. */
.btn-ghost {
  color: var(--accent); min-height: 40px; padding: 8px 4px;
  font-weight: 500;
  background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn-ghost::after { display: none; }
.btn-ghost:hover { color: var(--accent-700); }

.btn-sm { min-height: 38px; padding: 9px 18px; font-size: .875rem; }
.btn-lg { min-height: 52px; padding: 15px 30px; font-size: 1rem; }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .55; cursor: not-allowed; transform: none;
  box-shadow: var(--sh-1);
}
.btn:disabled::after { display: none; }

/* Safari < 18 on iOS and any engine without backdrop-filter would render the
   thin fills as washed-out translucency over whatever is behind. Without the
   blur there is nothing to gain from transparency, so close it up. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .btn-primary   { background-color: rgba(5, 76, 87, .97); }
  .btn-secondary { background-color: rgba(255, 255, 255, .96); }
}
/* Someone who has asked the OS for less transparency gets the same treatment. */
@media (prefers-reduced-transparency: reduce) {
  .btn-primary   { background-color: rgba(5, 76, 87, .97); }
  .btn-secondary { background-color: rgba(255, 255, 255, .96); }
}

/* Inline text link with a travelling arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent); font-size: .875rem; font-weight: 500;
  padding: 4px 0;
}
.link-arrow svg { transition: translate var(--dur-2) var(--ease-spring); }
.link-arrow:hover svg { translate: 3px 0; }
.link-arrow:hover { color: var(--accent-700); }

/* --------------------------------------------------------------- 07 NAVBAR */

.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding: var(--gutter) var(--gutter) 0;
}
.nav {
  max-width: var(--maxw); margin-inline: auto;
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding: 10px 12px 10px 20px;
  border-radius: var(--r-xl);
  background: var(--glass-1-bg);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-1);
  transition: box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.nav[data-stuck='true'] {
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-2);
}

.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border-radius: var(--r-sm); flex: 0 0 auto; }
.brand img { height: 30px; width: auto; }
.brand .wordmark { height: 21px; }
.brand:hover { opacity: .82; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-link {
  position: relative; display: inline-block;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: .9375rem; color: var(--ink-2);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 2px;
  scale: 0 1; transform-origin: center;
  transition: scale var(--dur-3) var(--ease-out);
}
.nav-link:hover { color: var(--ink); background: rgba(29, 29, 31, .035); }
.nav-link[aria-current='page'] { color: var(--ink); font-weight: 500; }
.nav-link[aria-current='page']::after { scale: 1 1; }

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

/* Language switch — segmented glass control from the UI study */
.lang {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-sm);
  background: rgba(29, 29, 31, .05);
  border: 1px solid var(--line);
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 30px; padding: 0 10px;
  border-radius: calc(var(--r-sm) - 3px);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current='true'] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,58,70,.10), inset 0 1px 0 #fff;
}

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  flex-direction: column; align-items: center; justify-content: center;
  transition: background-color var(--dur-2) var(--ease-out);
}
.nav-toggle:hover { background: rgba(29, 29, 31, .05); }
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: translate var(--dur-2) var(--ease-out), rotate var(--dur-2) var(--ease-out),
              opacity var(--dur-1) linear;
}
.nav-toggle span + span { margin-top: 5px; }
[data-drawer-open='true'] .nav-toggle span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
[data-drawer-open='true'] .nav-toggle span:nth-child(2) { opacity: 0; }
[data-drawer-open='true'] .nav-toggle span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  padding: calc(var(--nav-h) + var(--gutter) * 2 + 10px) var(--gutter) var(--gutter);
  background: rgba(242, 243, 246, .82);
  backdrop-filter: var(--glass-blur-1);
  -webkit-backdrop-filter: var(--glass-blur-1);
  display: flex; flex-direction: column; gap: var(--s-3);
  opacity: 0; visibility: hidden; translate: 0 -10px;
  transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out),
              visibility 0s linear var(--dur-3);
}
[data-drawer-open='true'] .drawer {
  opacity: 1; visibility: visible; translate: 0 0;
  transition-delay: 0s;
}
.drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 14px 20px;
  border-radius: var(--r-lg);
  background: var(--glass-3-bg);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-1);
  font-size: 1.0625rem; font-weight: 500;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out);
}
.drawer-link:hover, .drawer-link:active { transform: translateX(3px); border-color: var(--accent-200); }
.drawer-link[aria-current='page'] { color: var(--accent); border-color: var(--accent-200); }
.drawer-link svg { color: var(--ink-4); }

/* ----------------------------------------------------------------- 08 HERO */
/* Rebuilt to the supplied home-page comp.

   The right-hand half is not a composition assembled in CSS — it is one plate
   lifted straight out of the design (glass dome, pedestal dish, device, acrylic
   sphere; tools/extract-scene.mjs). Its top, right and bottom edges ARE the
   panel's edges, so only its left edge meets the panel surface and that one is
   feathered. The panel's own gradient is sampled from the comp, which is why the
   join cannot be seen.

   The hero is also the one place that keeps a soft radius and pill controls: the
   rest of the site is deliberately squarer. */

.hero-panel {
  position: relative;
  border-radius: var(--r-hero);
  background: linear-gradient(158deg, #F6F7F9 0%, #F1F3F5 46%, #EDF0F2 100%);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  align-items: center;
  padding-left: var(--pad);
  isolation: isolate;
}

.hero-copy {
  position: relative; z-index: 2;
  max-width: 34rem;
  padding-block: clamp(18px, 1.7vw, 24px);
  padding-right: var(--s-4);
}
/* Label chip, not loose type — as in the comp. */
.hero-eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(29, 29, 31, .07);
  box-shadow: 0 1px 2px rgba(11, 58, 70, .04);
}
.hero-title {
  /* Sized to the column, not copied from the comp's point size: the comp is set
     in a narrower grotesque, so matching its 55px would push the Turkish
     headline onto four lines. What has to match is the picture — two lines, each
     running the width of the column — and this is the size that does that. */
  font-size: clamp(2rem, 3.85vw, 3.5rem);
  letter-spacing: -.035em; line-height: 1.06;
  margin-top: clamp(12px, 1.25vw, 17px);
}
.hero-lede {
  margin-top: clamp(11px, 1vw, 14px);
  font-size: clamp(.9375rem, 1.05vw, 1rem);
  line-height: 1.75; color: var(--ink-2);
  max-width: 33ch;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(16px, 1.6vw, 22px);
}
/* Pill controls belong to the hero alone. */
.hero-actions .btn { border-radius: var(--r-pill); padding-inline: 28px; }

/* Signature row under the calls to action. Every line is a statement about how
   Hera works, not a claim about outcomes — the comp's "Proven Outcomes" is
   exactly the sort of assertion that cannot ship unverified. */
.trust {
  display: flex; flex-wrap: wrap; align-items: stretch;
  width: fit-content; max-width: 100%;
  margin-top: clamp(16px, 1.6vw, 22px);
  background: rgba(255, 255, 255, .80);
  border: 1px solid rgba(29, 29, 31, .07);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 58, 70, .04);
}
.trust li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px clamp(11px, 1vw, 14px);
  font-size: .78125rem; color: var(--ink-2); white-space: nowrap;
}
.trust li + li { border-left: 1px solid var(--line); }
.trust svg { color: var(--accent); flex: 0 0 auto; }

/* The studio plate keeps its own aspect and is pinned to the bottom right, where
   the comp puts it. Cropping it to fill a taller panel was tried first and is
   wrong: `cover` eats the left edge, which is exactly where the pedestal's tip
   is. Any extra height instead shows as panel gradient above the plate, and the
   plate's top edge is feathered so that join cannot be read either. */
.hero-scene { position: relative; align-self: stretch; display: grid; align-items: end; }
.hero-plate-wrap { position: relative; width: 100%; }
.hero-plate {
  display: block; width: 100%; height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%),
    linear-gradient(to bottom, transparent 0, #000 5%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%),
    linear-gradient(to bottom, transparent 0, #000 5%);
  mask-composite: intersect;
}

/* Floating product label, bottom right — positioned off the comp's own
   coordinates (x 661…961, y 322…405 of a panel running x 430…1092, y 78…410).
   No thumbnail: the plate already shows the device, and a second, smaller copy
   of it added nothing. */
.hero-card {
  position: absolute; z-index: 3;
  left: 34.9%; right: 19.8%; top: 73.5%;
  display: grid; gap: 2px;
  padding: 13px 18px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow:
    0 1px 2px rgba(11, 58, 70, .05),
    0 14px 30px -14px rgba(11, 58, 70, .22);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(11, 58, 70, .06), 0 18px 38px -14px rgba(11, 58, 70, .28);
}
.hero-card-name { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.hero-card-sub { font-size: .8125rem; color: var(--ink-2); line-height: 1.45; }
.hero-card .link-arrow { margin-top: 5px; font-size: .8125rem; }
.hero-card:hover .link-arrow svg { translate: 3px 0; }

/* Inner pages carry a product photograph instead of the studio plate. */
.hero-figure {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: clamp(18px, 3vw, 40px);
  margin: 0;
}
.hero-figure img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.hero-figure.is-cutout img {
  filter:
    drop-shadow(0 3px 4px rgba(11, 58, 70, .12))
    drop-shadow(0 24px 30px rgba(11, 58, 70, .17));
}
/* Photography shot on a near-white backdrop multiplies into the panel, with an
   elliptical fade so no trace of its rectangle survives. */
.hero-figure.is-photo.is-blend { mix-blend-mode: multiply; }
.hero-figure.is-photo.is-blend img {
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 58%, transparent 100%);
}
/* A handful of products only exist as photographs on a dark backdrop. Fading
   those to nothing leaves a smudge, so they are presented honestly as pictures. */
.hero-figure.is-photo:not(.is-blend) img {
  border-radius: var(--r-lg);
  box-shadow: 0 2px 4px rgba(11, 58, 70, .07), 0 18px 34px -16px rgba(11, 58, 70, .26);
}

/* ---------------------------------------------------------------- 09 CARDS */

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
a.card, .card-link { color: inherit; }
a.card:hover, .card:has(> a:hover), .card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--accent-200);
}
.card:has(> a:focus-visible) { box-shadow: var(--focus); }
/* Whole-card click target without nesting interactive elements */
.card-cover::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

.card-icon {
  display: block; width: 40px; height: 40px; margin-bottom: var(--s-4);
  color: var(--accent);
}
.card-icon svg { width: 100%; height: 100%; }

.card-foot { margin-top: auto; padding-top: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* Circular affordance in the mockups' card corners */
.pip {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-4);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.card:hover .pip, .tile:hover .pip { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }

/* --------------------------------------------------------- 10 PRODUCT TILE */

.tile {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: clip;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--accent-200); }
.tile:has(a:focus-visible) { box-shadow: var(--focus); }

/* The card is one surface. The product sits on it — no media panel, no divider,
   as in the comps — with a soft floor wash standing in for the studio dish. */
.tile-media {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  /* Fixed, not percentage: padding percentages resolve against the *parent's*
     inline size, which blows up once the card turns into a wide list row. */
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.tile-media::after {
  content: ''; position: absolute; z-index: 0; left: 50%; bottom: 9%;
  width: 68%; aspect-ratio: 4.4 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,58,70,.13), rgba(11,58,70,0) 100%);
}
.tile-media img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: scale var(--dur-4) var(--ease-out);
}
.tile-media img.is-cutout {
  filter:
    drop-shadow(0 2px 3px rgba(11, 58, 70, .10))
    drop-shadow(0 14px 20px rgba(11, 58, 70, .14));
}
.tile-media img.is-blend {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
}
.tile-media img.is-photo:not(.is-blend) {
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(11, 58, 70, .06), 0 10px 22px -12px rgba(11, 58, 70, .24);
}
.tile:hover .tile-media img { scale: 1.045; }

.tile-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-4) var(--s-5) var(--s-5); }
.tile-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 5px 12px; border-radius: var(--r-xs);
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* Designed empty state for products awaiting photography */
.media-empty {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: grid; place-items: center; gap: 10px;
}
.media-empty-mark { width: clamp(46px, 22%, 76px); opacity: .17; }
.media-empty span {
  position: absolute; bottom: 14px; left: 50%; translate: -50% 0;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

/* List view */
.tile-list { flex-direction: row; align-items: stretch; }
.tile-list .tile-media { aspect-ratio: 1; width: clamp(120px, 20%, 190px); flex: 0 0 auto; padding: var(--s-4); }
.tile-list .tile-body { padding: var(--s-5); justify-content: center; }

/* ---------------------------------------------------------- 11 CERT STRIP */

.cert-strip {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-radius: var(--r-xl); overflow: hidden;
}
.cert-strip > * {
  flex: 1 1 190px; display: flex; align-items: center; gap: 14px;
  padding: var(--s-5) clamp(16px, 2vw, 28px);
}
.cert-strip > * + * { border-left: 1px solid var(--line); }
.cert-mark { color: var(--accent); flex: 0 0 auto; display: grid; place-items: center; }
.cert-text { display: grid; gap: 1px; min-width: 0; }
.cert-text strong { font-size: .9375rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }

/* -------------------------------------------------- 12 SEGMENTED / CHIPS */
/* Segmented control taken from the glass UI study: an inset track with a
   raised, highlighted active segment. */

.seg {
  display: inline-flex; padding: 4px; gap: 3px;
  border-radius: var(--r-sm);
  background: rgba(29, 29, 31, .05);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 3px rgba(11, 58, 70, .06);
}
.seg button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 16px; border-radius: calc(var(--r-sm) - 4px);
  font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'], .seg button[aria-selected='true'] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,58,70,.10), 0 2px 8px -3px rgba(11,58,70,.14), inset 0 1px 0 #fff;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--r-btn);
  background: var(--glass-3-bg);
  backdrop-filter: var(--glass-blur-3);
  -webkit-backdrop-filter: var(--glass-blur-3);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--line-light), var(--sh-1);
  font-size: .875rem; color: var(--ink-2);
  transition: transform var(--dur-2) var(--ease-spring), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--accent-200); transform: translateY(-1px); }
.chip[aria-pressed='true'] {
  background-color: rgba(255, 255, 255, .30);
  background-image: linear-gradient(168deg,
    rgba(58, 160, 172, .26) -20%, rgba(8, 124, 137, .21) 54%, rgba(11, 58, 70, .17) 130%);
  border-color: rgba(255, 255, 255, .72); color: var(--accent-700); font-weight: 600;
  box-shadow:
    0 1px 2px rgba(11, 58, 70, .10),
    0 10px 22px -10px rgba(5, 96, 107, .30),
    inset 0 0 0 1px rgba(8, 124, 137, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

/* Static tag pill (non-interactive) */
.tag {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--r-xs);
  background: var(--accent-050); color: var(--accent-700);
  border: 1px solid rgba(8, 124, 137, .14);
  font-size: .75rem; font-weight: 500; letter-spacing: .01em;
}
.tag-muted { background: rgba(29,29,31,.045); color: var(--ink-2); border-color: var(--line); }

/* --------------------------------------------------------------- 13 FORMS */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.field label .opt { color: var(--ink-3); font-weight: 400; }

.control {
  position: relative; display: flex; align-items: center;
}
.control > svg {
  position: absolute; left: 15px; z-index: 2;   /* the field's backdrop-filter
     creates a stacking context that would otherwise paint over the icon */
  color: var(--ink-4); pointer-events: none;
  transition: color var(--dur-2) var(--ease-out);
}
.control:focus-within > svg { color: var(--accent); }

.input, .select, .textarea {
  width: 100%; min-height: 50px;
  padding: 13px 16px 13px 44px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: var(--glass-blur-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 2px rgba(11, 58, 70, .04);
  font-size: .9375rem; color: var(--ink);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.textarea { min-height: 148px; padding-top: 15px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(29,29,31,.2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(8, 124, 137, .14), inset 0 1px 2px rgba(11,58,70,.03);
}
.select { appearance: none; cursor: pointer; padding-right: 42px; }
.control .caret { left: auto; right: 16px; }

.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea { border-color: #B3261E; background: #FFF7F6; }
.field[data-invalid='true'] .input:focus,
.field[data-invalid='true'] .select:focus,
.field[data-invalid='true'] .textarea:focus { box-shadow: 0 0 0 3.5px rgba(179, 38, 30, .14); }

.field-error {
  display: none; align-items: center; gap: 6px;
  font-size: .8125rem; color: #B3261E;
}
.field[data-invalid='true'] .field-error { display: flex; }

.checkline { display: flex; align-items: flex-start; gap: 11px; font-size: .8125rem; color: var(--ink-2); line-height: 1.55; }
.checkline input[type='checkbox'] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.checkline a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Filter checkbox rows */
.check {
  display: flex; align-items: center; gap: 11px;
  min-height: 40px; padding: 6px 10px; margin-inline: -10px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: .875rem; color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.check:hover { background: rgba(29, 29, 31, .04); color: var(--ink); }
.check input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.check .count { margin-left: auto; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.check:has(input:checked) { color: var(--ink); font-weight: 500; }

/* Form status banners */
.notice { display: flex; gap: 13px; padding: 16px 18px; border-radius: var(--r-md); font-size: .875rem; line-height: 1.6; }
.notice svg { flex: 0 0 auto; margin-top: 1px; }
.notice-ok   { background: var(--accent-050); color: var(--accent-700); border: 1px solid rgba(8,124,137,.16); }
.notice-err  { background: #FFF4F3; color: #8C1D18; border: 1px solid rgba(179,38,30,.16); }
.notice-info { background: rgba(29,29,31,.035); color: var(--ink-2); border: 1px solid var(--line); }

/* Button loading state — reserves width so the layout cannot jump */
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .75;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* --------------------------------------------------------------- 14 TABLES */

.spec-table th, .spec-table td { padding: 13px 18px; text-align: left; font-size: .875rem; vertical-align: top; }
.spec-table tbody tr { border-top: 1px solid var(--line); }
.spec-table tbody tr:first-child { border-top: 0; }
.spec-table th { font-weight: 500; color: var(--ink-2); width: 42%; }
.spec-table td { color: var(--ink); }
.spec-table tbody tr:nth-child(even) { background: rgba(29, 29, 31, .018); }

.table-scroll { overflow-x: auto; border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
.data-table { min-width: 520px; }
.data-table thead th {
  padding: 12px 18px; text-align: left; font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.data-table td { padding: 13px 18px; font-size: .875rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ 15 ACCORDION */

.acc { display: flex; flex-direction: column; gap: 8px; }
.acc-item { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.acc-btn {
  width: 100%; display: flex; align-items: center; gap: 13px;
  min-height: 54px; padding: 14px 18px; text-align: left;
  font-size: .9375rem; font-weight: 500;
  transition: background-color var(--dur-2) var(--ease-out);
}
.acc-btn:hover { background: rgba(29, 29, 31, .028); }
.acc-btn .plus { margin-left: auto; color: var(--ink-4); transition: rotate var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out); }
.acc-btn[aria-expanded='true'] .plus { rotate: 45deg; color: var(--accent); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.acc-btn[aria-expanded='true'] + .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 18px 18px 52px; font-size: .875rem; color: var(--ink-2); }

/* --------------------------------------------------------------- 16 BANDS */

/* Dark contrast moment — used sparingly (brief §3: limited dark surfaces) */
.band-dark {
  position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(122deg, var(--deep) 0%, var(--deep-2) 52%, #12626F 100%);
  color: #fff;
}
.band-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(52% 76% at 88% 22%, rgba(255,255,255,.16), rgba(255,255,255,0) 68%),
    radial-gradient(40% 60% at 8% 96%, rgba(58,160,172,.28), rgba(58,160,172,0) 70%);
}
.band-dark .body-sm, .band-dark .lede { color: rgba(255, 255, 255, .74); }
.band-dark .eyebrow { color: var(--accent-200); }
/* On the dark band the same material is lit from the other side: the primary
   becomes bright frost (deep ink on it → 9.1:1), the secondary a thin veil of
   white (#fff on it → 8.1:1). */
.band-dark .btn-secondary {
  color: #fff;
  background-color: rgba(255, 255, 255, .14);
  background-image: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%);
  border-color: rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 10px 24px -14px rgba(0, 0, 0, .55);
}
.band-dark .btn-secondary:hover {
  background-color: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 16px 30px -14px rgba(0, 0, 0, .6);
}
.band-dark .btn-primary {
  color: var(--deep);
  background-color: rgba(255, 255, 255, .86);
  background-image:
    radial-gradient(60% 130% at 28% -42%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%);
  border-color: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(0, 0, 0, .18),
    0 14px 30px -12px rgba(0, 0, 0, .5);
}
.band-dark .btn-primary:hover {
  background-color: rgba(255, 255, 255, .96);
  border-color: #fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(0, 0, 0, .2),
    0 20px 38px -12px rgba(0, 0, 0, .55);
}

/* Final CTA — light band with an acrylic sphere, as in the mockups */
.cta-band {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-6);
  padding: clamp(30px, 3.6vw, 52px) var(--pad);
}
/* The closing band is plain. A decorative sphere here would be the loudest thing
   on the page and would say nothing. */
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); position: relative; z-index: 1; }

/* ------------------------------------------------------------- 17 FOOTER */

.footer { padding: clamp(36px, 4vw, 60px) var(--pad) var(--s-6); }
.footer-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(0, .8fr)) minmax(220px, 1.15fr);
}
.footer h3 { font-size: .875rem; font-weight: 600; margin-bottom: var(--s-4); }
/* Kayıtlı adres ve tek telefon hattı. <address> tarayıcıda italik gelir. */
.footer-address {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: var(--s-4); font-style: normal;
  font-size: .8125rem; line-height: 1.65; color: var(--ink-2);
}
.footer-address a { color: var(--ink-2); transition: color var(--dur-2) var(--ease-out); }
.footer-address a:hover, .footer-address a:focus-visible { color: var(--accent); }
.footer-links { display: flex; flex-direction: column; gap: 2px; }
.footer-links a {
  display: inline-block; padding: 5px 0; font-size: .875rem; color: var(--ink-2);
  transition: color var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.footer-links a:hover { color: var(--accent); translate: 2px 0; }

.subscribe { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 6px; border-radius: var(--r-md); }
.subscribe input {
  flex: 1; min-width: 0; min-height: 38px; padding: 0 14px;
  background: none; border: 0; font-size: .875rem;
}
.subscribe input::placeholder { color: var(--ink-3); }
.subscribe input:focus { outline: none; }
.subscribe:focus-within { box-shadow: 0 0 0 3.5px rgba(8,124,137,.14), inset 0 1px 0 var(--line-light), var(--sh-1); }
.subscribe button {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-700);
  background-color: rgba(255, 255, 255, .34);
  background-image: linear-gradient(168deg,
    rgba(58, 160, 172, .24) -20%, rgba(8, 124, 137, .19) 54%, rgba(11, 58, 70, .16) 130%);
  backdrop-filter: saturate(190%) blur(18px);
  -webkit-backdrop-filter: saturate(190%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .70);
  box-shadow: 0 1px 2px rgba(11,58,70,.10), 0 8px 18px -8px rgba(5,96,107,.28),
              inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform var(--dur-2) var(--ease-spring);
}
.subscribe button:hover { transform: scale(1.06); }

.social { display: flex; gap: 10px; margin-top: var(--s-5); }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-spring);
}
.social a:hover { color: var(--accent); border-color: var(--accent-200); transform: translateY(-2px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { transition: color var(--dur-2) var(--ease-out); }
.footer-bottom a:hover { color: var(--accent); }

/* Raylie credit — a signature, not a link. Nothing here is interactive, so
   there is no hover, no focus ring and no touch-target floor to hold. */
.credit { display: flex; flex-direction: column; gap: 9px; margin-top: var(--s-5); }
/* `align-self` is load-bearing: .credit is a column flex container, so the
   default `stretch` pulls the mark to the full column width and `width: auto`
   cannot argue with it — the wordmark comes out horizontally squashed. It used
   to be shielded by the `inline-flex` anchor that wrapped it. */
.credit img { display: block; align-self: flex-start; height: 22px; width: auto; opacity: .55; }
.credit span { font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* -------------------------------------------------------- 18 PAGE PIECES */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-3); }
.crumbs a { color: var(--accent); transition: color var(--dur-2) var(--ease-out); }
.crumbs a:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; color: var(--line-2); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: var(--gutter); align-items: stretch; }
/* `.panel` centres itself with auto inline margins, which would stop a grid
   item from stretching — inside a split the track already sets the width. */
.split > * { margin-inline: 0; max-width: none; }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sticky-rail { position: sticky; top: calc(var(--nav-h) + var(--gutter) * 2); }

.filter-group + .filter-group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.filter-group h3 { font-size: .8125rem; font-weight: 600; margin-bottom: var(--s-3); }

.cat-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 14px; margin-inline: -6px;
  border-radius: var(--r-sm); font-size: .875rem; color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.cat-link:hover { background: rgba(29,29,31,.04); color: var(--ink); }
.cat-link[aria-current='true'] { background: var(--accent-050); color: var(--accent-700); font-weight: 500; }
.cat-link .count { margin-left: auto; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-link svg { margin-left: auto; color: var(--ink-4); }
.cat-link[aria-current='true'] svg { color: var(--accent); }

/* ------------------------------------------------------------- 19 MOTION */

/* Section reveal — 300-600ms, light translate + opacity (brief §9) */
[data-reveal] {
  opacity: 0; translate: 0 18px;
  transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

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

/* --------------------------------------------------------- 20 RESPONSIVE */

@media (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 62px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav { padding-right: 8px; }
  /* .nav-links carried the auto margin that pushed the tail right */
  .nav-tail { margin-left: auto; }
  .nav-tail .btn { display: none; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .sticky-rail { position: static; }

  /* Stacked hero: copy first, then the scene running the full panel width. The
     comp is a desktop drawing, so the plate is re-framed rather than squashed —
     `cover` on a taller box crops in toward the device. */
  .hero { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hero-copy { order: 1; max-width: none; padding: clamp(28px, 5vw, 44px) var(--pad) 0; }
  .hero-scene { order: 2; }
  /* Stacked, the plate's 2:1 desktop framing leaves the device tiny, so the
     wrapper takes a taller ratio and the plate is cropped into it instead. */
  .hero-plate-wrap { aspect-ratio: 16 / 10; overflow: clip; }
  .hero-plate {
    position: absolute; inset: 0; height: 100%;
    /* `cover` crops the plate's width; 22% keeps the catheter tip inside the
       frame instead of running it off the left edge. */
    object-fit: cover; object-position: 22% 42%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-card { left: auto; right: var(--pad); top: auto; bottom: 7%; width: min(340px, 72%); }

  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Narrower still: the plate is cropped tighter and the label spans the panel,
     so it never sits over the part of the device it names. */
  .hero-plate-wrap { aspect-ratio: 5 / 4; }
  /* At 5:4 the whole device cannot fit, so the crop centres on the balloon. */
  .hero-plate { object-position: 42% 40%; }
  .hero-card {
    left: var(--pad); right: var(--pad); width: auto; bottom: 5%;
    background: rgba(255, 255, 255, .95);
  }

  :root { --gutter: 12px; }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .split-even { grid-template-columns: minmax(0, 1fr); }
  .cert-strip > * { flex-basis: 50%; }
  .cert-strip > *:nth-child(odd) { border-left: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: auto; }
  .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { padding-bottom: 2px; }
  .spec-table td { padding-top: 0; padding-bottom: 14px; }
}

@media (max-width: 520px) {
  .grid-5, .grid-4, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { flex: 1 1 100%; }
  .cta-actions .btn { flex: 1 1 100%; }
  .tile-list { flex-direction: column; }
  .tile-list .tile-media { width: 100%; aspect-ratio: 4 / 3; }
  .brand .wordmark { display: none; }
}

/* Touch devices: hover-revealed affordances must have a resting state */
@media (hover: none) {
  .pip { background: var(--accent-050); color: var(--accent); border-color: var(--accent-200); }
  .btn::after { display: none; }
}

@media print {
  .nav-wrap, .drawer, .cta-band, .footer, .skip-link { display: none !important; }
  .panel { box-shadow: none; border-color: #ddd; }
  body { background: #fff; }
}

/* Divided pillar row — the horizontal information band from the mockups */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillars > li { padding: var(--s-6) clamp(18px, 2.4vw, 34px); }
.pillars > li + li { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars > li:nth-child(odd) { border-left: 0; }
  .pillars > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars > li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* List view for the catalogue grid */
[data-view-mode='list'] { grid-template-columns: minmax(0, 1fr) !important; }
[data-view-mode='list'] .tile { flex-direction: row; align-items: stretch; }
[data-view-mode='list'] .tile-media { aspect-ratio: 1; width: clamp(120px, 20%, 190px); flex: 0 0 auto; padding: var(--s-4); }
[data-view-mode='list'] .tile-body { padding: var(--s-5); justify-content: center; }
@media (max-width: 520px) {
  [data-view-mode='list'] .tile { flex-direction: column; }
  [data-view-mode='list'] .tile-media { width: 100%; aspect-ratio: 4 / 3; }
}

/* Attribute chip cluster over the product hero */
.spec-chip {
  position: absolute; right: clamp(12px, 3vw, 40px); bottom: clamp(16px, 4vw, 40px);
  z-index: 3; max-width: min(360px, 82%);
  display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg);
}
.spec-chip-row { display: flex; align-items: flex-start; gap: 12px; }
.spec-chip-icon {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--accent-050); color: var(--accent); border: 1px solid rgba(8,124,137,.14);
}

/* Product gallery thumbnails */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-4); }
/* Gallery frames sit on the panel itself; only the shot inside them is visible. */
.gallery li {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center; padding: var(--s-5);
}
.gallery li::after {
  content: ''; position: absolute; z-index: 0; left: 50%; bottom: 8%;
  width: 66%; aspect-ratio: 4.4 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,58,70,.12), rgba(11,58,70,0) 100%);
}
.gallery img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}
.gallery img.is-photo:not(.is-blend) { border-radius: var(--r-md); }
.gallery img.is-blend {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
}

@media (max-width: 1024px) {
  .spec-chip { position: static; max-width: none; margin: var(--s-4) var(--pad) 0; }
}

/* Inline product thumbnail inside area / family cards */
.area-thumb {
  position: relative;
  margin-top: auto; aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  margin-inline: calc(var(--s-5) * -1); margin-bottom: 0; padding: var(--s-4) var(--s-5);
}
.area-thumb::after {
  content: ''; position: absolute; z-index: 0; left: 50%; bottom: 10%;
  width: 60%; aspect-ratio: 4.6 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,58,70,.11), rgba(11,58,70,0) 100%);
}
.area-thumb img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}
.area-thumb img.is-photo:not(.is-blend) { border-radius: var(--r-sm); }
.area-thumb img.is-blend {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 48%, #000 56%, transparent 100%);
}

}

/* Public-procurement checklist on the dark band */
.gov-list { display: grid; gap: var(--s-5); }
.gov-list > li { display: flex; gap: 16px; align-items: flex-start; }
.gov-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-xs);
  display: grid; place-items: center; font-size: .8125rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--accent-200);
}

/* Verified statistics block */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
}
.stat-grid > li { padding: clamp(24px, 3vw, 40px); display: grid; gap: 6px; align-content: center; }
.stat-grid > li:nth-child(even) { border-left: 1px solid var(--line); }
.stat-grid > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.stat-icon { color: var(--accent); }
.stat-value { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-grid > li:nth-child(even) { border-left: 0; }
  .stat-grid > li + li { border-top: 1px solid var(--line); }
}

/* Contact form layout */
.contact-form { margin-top: var(--s-6); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .field-wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Contact channel card */
.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-4);
}
.channel-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-050); color: var(--accent); border: 1px solid rgba(8,124,137,.14);
}
.channel-contact { display: grid; gap: 3px; justify-items: end; text-align: right; }
.channel-contact a { color: var(--accent); transition: color var(--dur-2) var(--ease-out); }
.channel-contact a:hover { color: var(--accent-700); }
.channel-contact dt { color: var(--ink-3); }
.channel-contact > div { display: grid; }
@media (max-width: 620px) {
  .channel { grid-template-columns: auto minmax(0, 1fr); }
  .channel-contact { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* Long-form legal copy */
.prose { max-width: 74ch; }
.prose p { font-size: .9375rem; line-height: 1.75; color: var(--ink-2); margin-top: 14px; }
.prose h2 { font-size: 1.15rem; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0 !important; }
.prose-list { display: grid; gap: 10px; margin-top: 16px; }
.prose-list > li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); line-height: 1.6; }
.prose-list svg { flex: 0 0 auto; margin-top: 4px; color: var(--accent); }

.kv { display: grid; gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kv > div { display: grid; grid-template-columns: minmax(120px, 26%) minmax(0, 1fr); gap: var(--s-4); padding: 14px 18px; background: var(--surface); }
.kv dt { font-size: .8125rem; color: var(--ink-2); }
.kv dd { font-size: .9375rem; }
@media (max-width: 520px) { .kv > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ------------------------------------------------- 21 KEYED-OUT PRODUCTS */
/* Photography whose studio backdrop has been keyed out is presented as an
   object standing in the scene: it gets its own contact shadow instead of a
   plinth, and the tile behind it stays a clean neutral. */

img.is-cutout {
  filter:
    drop-shadow(0 2px 3px rgba(11, 58, 70, .10))
    drop-shadow(0 14px 22px rgba(11, 58, 70, .13));
}

.gallery img.is-cutout { filter: drop-shadow(0 6px 10px rgba(11, 58, 70, .12)); }

/* Catalogue: a narrow filter rail beside a wide product grid */
.split-rail { grid-template-columns: minmax(230px, 21%) minmax(0, 1fr); }
@media (max-width: 1024px) { .split-rail { grid-template-columns: minmax(0, 1fr); } }

.load-more {
  display: grid; justify-items: center; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* Numbered process list */
.steps { display: grid; gap: 14px; margin-top: var(--s-4); }
.steps > li { display: flex; gap: 13px; align-items: flex-start; }
.steps-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-xs);
  display: grid; place-items: center; font-size: .75rem; font-weight: 600;
  background: var(--accent-050); color: var(--accent-700);
  border: 1px solid rgba(8, 124, 137, .14);
}

/* ------------------------------------------------- 22 TOUCH TARGET SIZING */
/* On touch devices every interactive element clears 44px. Card links are
   exempt because `.card-cover` stretches the hit area over the whole card. */

@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .lang { padding: 4px; }
  .lang a { min-height: 44px; min-width: 46px; }
  .link-arrow:not(.card-cover) { min-height: 44px; }
  .footer-links a { padding-block: 11px; min-width: 44px; }
  .footer-bottom nav a { display: inline-block; padding-block: 12px; min-width: 44px; }
  .subscribe { padding: 6px 6px 6px 8px; }
  .subscribe input { min-height: 44px; }
  .subscribe button { width: 44px; height: 44px; }
  .crumbs a { display: inline-block; padding-block: 12px; }
  .btn-sm { min-height: 44px; }
  .seg button { min-height: 44px; }
  .cat-link { min-height: 46px; }
  .check { min-height: 46px; }
  .social a { width: 46px; height: 46px; }
}

/* Family card thumbnail keeps its slot even when a category has no photography yet */
.area-thumb-mark { width: 44% !important; height: auto !important; padding: 0 !important; opacity: .15; }

/* Hero scene illustration. The render's studio backdrop was divided out to pure
   white, so `multiply` drops it onto our own washes with the balloon and tubing
   staying translucent — a hard alpha cut would have flattened both. */
.hero-figure.is-art {
  width: min(96%, 640px);
  filter: none;
  /* The blend has to happen against the scene washes, so it sits on the figure
     itself — on the <img> it would be trapped inside the figure's own stacking
     context (z-index: 2) and blend against nothing. */
  mix-blend-mode: multiply;
  z-index: auto;
}
.hero-figure.is-art img {
  max-height: min(46vh, 340px);
  border-radius: 0;
  /* Insurance against any remaining edge value below pure white. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
              linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

/* ------------------------------------------------ 23 EDITORIAL SECTIONS */
/* Not every section is a card grid. These three treatments — a figures band, a
   full-bleed product, and a read-down list — give the page a rhythm instead of
   a stack of identical surfaces. */

.split-wide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 96px); }

@media (max-width: 900px) {
  .split-wide { grid-template-columns: minmax(0, 1fr); }
}

/* Supply-chain steps as a numbered rail: every step readable at once, which an
   accordion and a ring diagram both prevented. */
.steps-rail { display: flex; flex-direction: column; }
.steps-rail > li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-5) 0;
}
.steps-rail > li + li { border-top: 1px solid var(--line); }
.steps-rail-num { font-size: .8125rem; color: var(--accent); padding-top: 3px; }
.steps-rail-title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.012em; }

/* ------------------------------------------------- 24 HOME PAGE SECTIONS */
/* The blocks the home-page comp asks for and no other page uses. */

/* Two panels side by side get the same gutter as two stacked ones. */
.split { max-width: var(--maxw); margin-inline: auto; }
.panel + .split, .split + .panel, .split + .split { margin-top: var(--gutter); }

/* Featured product card: the name leads and the product sits behind it, filling
   the card. (`.tile` is the catalogue's card, where the photograph leads.) */
.showcase {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(200px, 16vw, 240px);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  overflow: clip;
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.showcase:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--accent-200); }
.showcase:has(a:focus-visible) { box-shadow: var(--focus); }

/* These sit above the product behind them on `z-index` alone. They must NOT be
   positioned: `.card-cover::after` is the whole-card click target and resolves
   against its nearest positioned ancestor, so a `position: relative` here shrank
   it to the title block and left the footer link and the plus dead.
   `z-index` applies to flex items without positioning, which is what makes this
   work — `.showcase` is the flex container. */
/* The head outranks the foot so that its `::after` — a stacking context of its
   own — paints over the footer too. Equal z-indexes put the later sibling on top
   and the footer swallowed every click on the link and the plus. */
.showcase-head { z-index: 3; max-width: 76%; }
.showcase-foot {
  z-index: 2; margin-top: auto; padding-top: var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.showcase-media {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: clamp(46px, 22%, 72px) var(--s-3) clamp(32px, 15%, 50px);
}
.showcase-media img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: scale var(--dur-4) var(--ease-out);
}
.showcase-media img.is-cutout {
  filter: drop-shadow(0 2px 3px rgba(11, 58, 70, .10)) drop-shadow(0 14px 20px rgba(11, 58, 70, .14));
}
.showcase-media img.is-blend {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 58%, transparent 100%);
}
.showcase-media img.is-photo:not(.is-blend) {
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(11, 58, 70, .06), 0 10px 22px -12px rgba(11, 58, 70, .24);
}
.showcase:hover .showcase-media img { scale: 1.04; }
.showcase .media-empty { position: static; }

/* About panel: the mark sits behind the text as a watermark, as in the comp. */
.about-panel { position: relative; overflow: clip; }
.about-panel > :not(.about-mark) { position: relative; z-index: 1; }
.about-mark {
  position: absolute; z-index: 0; right: 3%; bottom: 5%;
  width: min(36%, 220px); height: auto;
  opacity: .13; pointer-events: none;
}

/* The closing band's acrylic sphere. Kept at the comp's own low contrast — it is
   a highlight in the corner, not an object demanding to be looked at. */
.cta-band::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: 3%; bottom: -12%;
  width: clamp(90px, 11%, 160px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side circle at 36% 28%,
    rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .62) 46%,
    rgba(11, 58, 70, .012) 82%, rgba(11, 58, 70, .028) 100%);
  opacity: .8;
}

@media (max-width: 900px) {
  .about-mark { width: min(34%, 190px); }
}
@media (max-width: 520px) {
  .showcase-head { max-width: 100%; }
  .showcase-media { padding-top: clamp(74px, 34%, 110px); }
}

/* The about panel's headline is set smaller than a full section head — in the
   comp it is a paragraph opener beside the resources grid, not a page title. */
.about-panel h2 { font-size: clamp(1.45rem, 2.15vw, 2rem); }