/* Source: /home/aldoka/tarwood/src/static/css/.critical-resolved.css */
/* Source for critical CSS — do not overwrite. Build outputs to critical.css */
/* Manrope weights needed above the fold (nav font-medium 500, hero semibold/bold, body 400). Rest → output.css */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Design System Tokens (CSS Variables) - primary block alt #67613a */
:root {
  /* Accent colors (primary = warm gold, shared hue with dark theme) */
  /* Primary state rules (light): keep hue, keep chroma; adjust L
     - hover: L -10–20%
     - active: L -20–30%
     - focus: L -5–10%
     - selected: L -10–20%
     - disabled: desaturate (C -0.05–0.10), keep hue and L */
  --color-primary: oklch(47% 0.09 122); /* alt #67613a */
  --color-primary-hover: oklch(37% 0.09 122);
  --color-primary-active: oklch(27% 0.09 122);
  --color-primary-focus: oklch(42% 0.09 122);
  --color-primary-disabled: oklch(47% 0.04 122);
  --color-primary-selected: oklch(37% 0.09 122);

  /* TEMP: secondary values mirror primary until palette is finalized */
  --color-secondary: oklch(52% 0.2 99);
  --color-secondary-hover: oklch(44% 0.2 99);
  --color-secondary-active: oklch(40% 0.2 99);
  --color-secondary-focus: oklch(56% 0.18 99);
  --color-secondary-disabled: oklch(52% 0.08 99);
  --color-secondary-selected: oklch(44% 0.2 99);

  /* Status colors */
  --color-success: oklch(55% 0.30 150);
  --color-error: oklch(50% 0.35 25);
  --color-warning: oklch(70% 0.35 75);
  --color-info: oklch(38% 0.15 282);

  /* Backgrounds and surfaces: keep lightness, reduce pink cast (warm neutral, hue≈95) */
  --color-background: oklch(98% 0.01 95);
  --color-surface: oklch(88% 0.015 95);
  --color-surface-container: oklch(94% 0.012 95);
  --color-surface-container-high: oklch(92% 0.012 95);
  --color-surface-container-highest: oklch(90% 0.012 95);
  --color-surface-elevated: oklch(82% 0.018 95);

  --color-container-primary: oklch(91.5% 0.06 99);
  --color-container-secondary: oklch(91.5% 0.06 98);

  /* Text */
  --color-text: oklch(20% 0.05 0);
  --color-text-secondary: oklch(25% 0.05 0);
  --color-text-muted: oklch(40% 0.08 0);
  --color-text-on-primary-container: oklch(15% 0.08 99);
  --color-text-on-secondary-container: oklch(15% 0.12 98);

  /* Links (design system 1.4: accent, distinguishable from body text, 4.5:1+; hover clearly darker for contrast) */
  --color-link: oklch(59% 0.11 99);
  --color-link-hover: oklch(40% 0.11 99);
  --color-link-active: oklch(34% 0.11 99);
  --color-link-visited: oklch(59% 0.04 99);
  --color-link-focus: oklch(51.5% 0.11 99);

  /* Link on surface/footer: lower L for 4.5:1+ on surface (L 85%); hover clearly darker for visible contrast */
  --color-link-on-surface: oklch(38% 0.11 99);
  --color-link-on-surface-hover: oklch(22% 0.11 99);
  --color-link-on-surface-active: oklch(18% 0.11 99);
  --color-link-on-surface-visited: oklch(38% 0.05 99);
  --color-link-on-surface-focus: oklch(34% 0.11 99);

  /* Dividers and outlines (color-system §4.5): same hue as --color-primary (122), low chroma.
     outline = default borders & focus rings (~3:1+ on surface); variant = muted UI chrome. */
  --color-divider: oklch(14% 0 0);
  --color-outline: oklch(51% 0.052 122);
  --color-outline-variant: oklch(80% 0.024 122);
  /* Strong selection outline for small swatches (high contrast on textured wood).
     Neutral outline reuses the standard outline color. */
  --color-swatch-selected-outline: var(--color-outline);

  /* Scrim */
  --color-scrim: oklch(0% 0.01 99 / 0.32);
  --scrim-opacity: 0.32;
  /* Полноэкранные оверлеи (напр. PhotoSwipe): в 2 раза меньше прозрачности, чем --color-scrim */
  --color-scrim-strong: oklch(0% 0.01 99 / 0.64);

  /* Typography */
  --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.875rem;
  --font-size-h4: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.8125rem;
  --font-size-tiny: 0.6875rem;
  --font-size-lead: 1.125rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-body: 1.5;
  --line-height-heading: 1.25;
  --line-height-small: 1.4;

  --letter-spacing-heading: -0.025em;
  --letter-spacing-uppercase: 0.05em;
  --letter-spacing-small: 0.01em;

  --line-length: 65ch;
  --line-length-mobile: 50ch;
  --line-length-desktop: 75ch;

  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  --section-spacing: 4rem;
  --section-inner-spacing: 1.5rem;

  /* Containers and layout */
  --container-max-width: 1280px;
  --container-narrow: 65ch;
  --container-wide: 1400px;
  --container-padding-mobile: 1rem;
  --container-padding-tablet: 1.75rem;
  --container-padding-desktop: 2rem;

  /* Site geometry (used for viewport-filling hero calculations) */
  --site-header-height: 4rem;     /* .site-header__inner height */
  --site-header-border-height: 1px; /* .site-header border-bottom */
  --site-header-total-height: calc(
    var(--site-header-height) + var(--site-header-border-height)
  );

  /* Z-index scale (global stacking order). Keep consistent across overlays/modals/menus. */
  --z-sticky-bottom: 50;
  --z-modal-backdrop: 60;
  --z-modal-content: 70;
  --z-gallery-modal: 80;

  /* Benefits bento: layers illustration max-width (8px grid; aligns with content area) */
  --layers-illustration-max-width-mobile: 280px;
  --layers-illustration-max-width-tablet: 320px;
  --layers-illustration-max-width-desktop: 400px;

  /* Icon sizes (use for inline SVG icons; scales with user font size) */
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
  /* Size variants card: installation type icon height; width from aspect-ratio 80/48 (SVG viewBox). */
  --sv-card-icon-size: 4rem;
  /* Filter button: inner gap between border and icon (icon fills the rest) */
  --filter-btn-inner-gap: 0px;
  /* Scale icon up so it fills the pill; overflow clipped by pill. Keeps full viewBox (no crop). */
  --filter-icon-scale: 1.5;
  /* Touch target: WCAG 2.5.5 minimum 44×44px for pointer inputs. */
  --touch-target-min: 44px;
  /* Pill filter buttons: min touch target, two aspect ratios. */
  --filter-btn-pill-height: var(--touch-target-min);
  --filter-btn-pill-width: 5rem;       /* 80px → aspect ~1.82:1 */
  /* 640px+ (larger touch target) */
  --filter-btn-pill-height-sm: 3rem;   /* 48px */
  --filter-btn-pill-width-sm: 5rem;    /* 80px → aspect ~1.67:1 */

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* Motion */
  --transition-fast: 100ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 400ms;
  --transition-ease: ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
  --shadow-lg: 0 12px 24px oklch(0% 0 0 / 0.15);
  --shadow-modal: 0 20px 40px oklch(0% 0 0 / 0.3);

  /* Light text on dark overlays / on primary-filled controls (light theme) */
  --color-text-on-inverse: oklch(99% 0.01 95);
  --color-on-primary: var(--color-text-on-inverse);
  --color-on-primary-hover: var(--color-text-on-inverse);
  /* Alias: light copy on photo/scrim (e.g. color modal); same ink as on-primary in light theme */
  --color-text-on-surface: var(--color-text-on-inverse);

  /* Aliases for existing utility names */
  --color-charcoal: var(--color-text);
  --color-wood-brown: var(--color-primary);
  --color-wood-brown-dark: var(--color-primary-hover);
  /* Cream: slightly darker than main surface but not too dark, used for hero/alt sections */
  --color-cream: oklch(87% 0.015 95);
  --color-gold: var(--color-secondary);

  /* Footer: secondary surface for clear separation (warm neutral, close to surface) */
  --color-footer: oklch(90% 0.012 95);

  /* Hero: spacing and typography (all based on --spacing-* or design tokens) */
  --hero-overlay-opacity: 0.25;
  --hero-subtitle-spacing-after: var(--spacing-l);
  --hero-title-spacing-before: var(--spacing-l);
  --hero-slogan-block-spacing-after: var(--spacing-l);
  --hero-lead-spacing-before: 0;
  --hero-lead-spacing-after: var(--spacing-xl);
  --hero-cta-group-spacing-before: 0;
  --hero-cta-group-gap: var(--spacing-m);
  /* Touch target ≥ --touch-target-min (spacing-based for consistency). */
  --hero-cta-touch-min-height: var(--touch-target-min);
  /* 42rem = 10×spacing-3xl + spacing-xl */
  --hero-text-container-max-width: calc(10 * var(--spacing-3xl) + var(--spacing-xl));
  --hero-title-size-lg: var(--spacing-2xl);
}
.dark {
  /* Primary: less bright (L 68–72%), hover not near-white so on-primary text has 4.5:1+ contrast */
  /* Primary state rules (dark): keep hue, reduce chroma; adjust L
     - base: L +20–30% vs light, C -0.05–0.10 vs light
     - hover: L +10–20%
     - active: L +20–30%
     - focus: L -10–15%, C -0.03–0.05
     - selected: L +10–20%
     - disabled: desaturate (C -0.05–0.10) */
  --color-primary: oklch(72% 0.02 122);
  --color-primary-hover: oklch(82% 0.02 122);
  --color-primary-active: oklch(92% 0.02 122);
  --color-primary-focus: oklch(62% 0.01 122);
  --color-primary-disabled: oklch(72% 0.005 122);
  --color-primary-selected: oklch(82% 0.02 122);
  /* On-primary: dark text on primary button (4.5:1+ on 70% and 82% background) */
  --color-on-primary: oklch(22% 0.05 99);
  --color-on-primary-hover: oklch(20% 0.05 99);

  /* TEMP: secondary values mirror primary until palette is finalized */
  --color-secondary: oklch(70% 0.08 99);
  --color-secondary-hover: oklch(82% 0.08 99);
  --color-secondary-active: oklch(78% 0.08 99);
  --color-secondary-focus: oklch(62% 0.06 99);
  --color-secondary-disabled: oklch(70% 0.04 99);
  --color-secondary-selected: oklch(82% 0.08 99);

  --color-success: oklch(70% 0.22 150);
  --color-error: oklch(65% 0.28 25);
  --color-warning: oklch(75% 0.28 75);
  --color-info: oklch(63% 0.08 282);

  /* Softer dark: a bit lighter, warm-neutral backgrounds (hue≈95), no pure black */
  --color-background: oklch(18% 0.015 95);
  --color-surface: oklch(28% 0.02 95);
  --color-surface-container: oklch(22% 0.015 95);
  --color-surface-container-high: oklch(26% 0.018 95);
  --color-surface-container-highest: oklch(32% 0.02 95);
  --color-surface-elevated: oklch(38% 0.022 95);

  --color-container-primary: oklch(32% 0.025 99);
  --color-container-secondary: oklch(32% 0.02 98);

  --color-text: oklch(95% 0.02 0);
  --color-text-secondary: oklch(80% 0.02 95);
  --color-text-muted: oklch(60% 0.02 95);
  --color-text-on-primary-container: oklch(90% 0.06 99);
  --color-text-on-secondary-container: oklch(90% 0.05 98);

  /* Links (design system 1.4 dark mode; hover clearly brighter for visible contrast) */
  --color-link: oklch(84% 0.12 99);
  --color-link-hover: oklch(98% 0.12 99);
  --color-link-active: oklch(99% 0.12 99);
  --color-link-visited: oklch(84% 0.05 99);
  --color-link-focus: oklch(78% 0.08 99);

  /* Link on surface/footer: higher L for 4.5:1+ on dark surface; hover clearly brighter */
  --color-link-on-surface: oklch(84% 0.12 99);
  --color-link-on-surface-hover: oklch(99% 0.12 99);
  --color-link-on-surface-active: oklch(99% 0.12 99);
  --color-link-on-surface-visited: oklch(84% 0.05 99);
  --color-link-on-surface-focus: oklch(78% 0.08 99);

  --color-divider: oklch(24% 0 0);
  --color-outline: oklch(60% 0.04 122);
  --color-outline-variant: oklch(34% 0.024 122);
  --color-swatch-selected-outline: var(--color-outline);

  --color-scrim: oklch(5% 0.02 99 / 0.5);
  --scrim-opacity: 0.5;
  --color-scrim-strong: oklch(22% 0.015 95 / 1);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.3);
  --shadow-lg: 0 12px 24px oklch(0% 0 0 / 0.4);
  --shadow-modal: 0 20px 40px oklch(0% 0 0 / 0.4);

  --color-charcoal: var(--color-text);
  --color-wood-brown: var(--color-primary);
  --color-wood-brown-dark: var(--color-primary-hover);
  --color-cream: var(--color-surface);
  --color-gold: var(--color-secondary);

  /* Footer: slightly lighter than primary background for subtle bar (softer dark) */
  --color-footer: oklch(24% 0.015 95);
}
/* Smooth scroll for in-page anchor navigation (website-design.mdc, ux-ui.mdc) */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Light section focus effect when navigating to a section — reduces perceived "jump" (ux-ui.mdc: 200–300ms transitions) */
.section-focus-highlight {
  transition: box-shadow var(--transition-slow) var(--transition-ease);
}
.section-focus-highlight.is-active {
  box-shadow: 0 0 0 1px oklch(50% 0.12 99 / 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .section-focus-highlight.is-active {
    box-shadow: none;
  }
}
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-size: var(--font-size-body);
  }

  body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background-color: var(--color-background);
    text-rendering: optimizeLegibility;
  }

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

  /* Links: accent color so they are clearly distinguishable from body text (UX/UI, design system 1.4) */
  a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base) var(--transition-ease);
  }

  a:hover {
    color: var(--color-link-hover);
  }

  a:active {
    color: var(--color-link-active);
  }

  a:visited {
    color: var(--color-link-visited);
  }

  a:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  /* In-text links: underline for extra affordance (typography best practice) */
  #main-content p a,
  #main-content li a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  #main-content p a:hover,
  #main-content li a:hover {
    text-decoration-thickness: 2px;
  }

  h1 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin: 0 0 var(--spacing-xl);
  }

  h2 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin: 0 0 var(--spacing-l);
  }

  h3 {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin: 0 0 var(--spacing-m);
  }

  h4 {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin: 0 0 var(--spacing-m);
  }

  p {
    margin: 0 0 var(--spacing-l);
    line-height: var(--line-height-body);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin: var(--spacing-l) 0;
  }

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

  *:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}
/* Layout primitives: container, section padding, content grids. */
@layer components {
  .container-page {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    overflow-x: clip;
    box-sizing: border-box;
  }

  @media (min-width: 768px) {
    .container-page {
      padding: 0 var(--container-padding-tablet);
    }
  }

  @media (min-width: 1024px) {
    .container-page {
      padding: 0 var(--container-padding-desktop);
    }
  }

  .section-padding {
    padding-block: var(--section-spacing);
  }

  @media (min-width: 768px) {
    .section-padding {
      padding-block: calc(var(--section-spacing) + var(--spacing-m));
    }
  }

  @media (min-width: 1024px) {
    .section-padding {
      padding-block: calc(var(--section-spacing) + var(--spacing-xl));
    }
  }

  .section-content {
    margin-top: var(--section-inner-spacing);
  }

  /* Grid base: use with .content-grid-{n} or .grid-responsive-* for columns (DRY). */
  .content-grid {
    display: grid;
    gap: var(--spacing-xl);
  }

  @media (min-width: 768px) {
    .content-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

  @media (min-width: 1024px) {
    .content-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

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

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

  .hover-lift {
    transition: transform var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease);
  }

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}
/* Site header, nav links, language switcher, layout. */
@layer components {
  /* Navigation, language, CTA, footer (merged from second components block) */
  .nav-link {
    @apply text-sm font-medium text-text-secondary hover:text-wood-brown
           transition-colors focus-ring-rounded;
  }

  .lang-button {
    @apply rounded-full border border-black/10 px-3 py-2 text-xs font-semibold
           text-text-secondary hover:text-wood-brown focus-ring;
  }

  /* Layout: header is static, no reserved space needed */
  .site-layout__main {
    overflow: visible;
  }

  .site-layout {
    overflow: visible;
  }

  /* Site header – static (bottom bar is fixed on mobile; one fixed bar is enough) */
  .site-header {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: var(--shadow-sm);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
  }

  @media (min-width: 768px) {
    .site-header__inner {
      padding: 0 var(--container-padding-tablet);
    }
  }

  /* Tablet (no hamburger): allow full-bleed header content */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .site-header__inner {
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }
  }

  @media (min-width: 1024px) {
    .site-header__inner {
      padding: 0 var(--container-padding-desktop);
    }
  }

  .site-header__logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding-block: 0.25rem;
    gap: 0.5rem;
    font-weight: var(--font-weight-semibold);
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    color: var(--color-charcoal);
    text-decoration: none;
    transition: color var(--transition-base) var(--transition-ease);
  }

  .site-header__logo-img {
    display: block;
    max-width: 100%;
    width: auto;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .site-header__logo:hover {
    color: var(--color-link-hover);
  }

  .site-header__logo:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  .site-header__nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
  }

  @media (min-width: 768px) {
    .site-header__nav {
      display: flex;
    }
  }

  /* Header nav links: same token system as footer (link default/hover/active/focus) for consistent look; contrast on header bg (primary background) */
  .site-header__link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--transition-base) var(--transition-ease),
      background-color var(--transition-base) var(--transition-ease);
  }

  .site-header__link:hover {
    color: var(--color-link-hover);
    background-color: var(--color-surface-container);
  }

  .dark .site-header__link:hover,
  .dark .site-header__link.is-active {
    background-color: var(--color-surface);
  }

  .site-header__link:active {
    color: var(--color-link-active);
  }

  .site-header__link.is-active {
    color: var(--color-link-active);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-surface-container);
  }

  .site-header__link:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  /* Vertical divider in nav before Care (desktop); uses design token */
  .site-header__nav-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0;
    background-color: var(--color-divider);
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Phone: primary visible, secondary via dropdown (desktop only) */
  .site-header__phone-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .site-header__phone {
    white-space: nowrap;
  }

  /* Secondary phone: show inline only on very wide screens */
  .site-header__phone--secondary {
    display: none;
  }

  /* Tablet: keep header (no hamburger), but reduce noise — hide phone text and keep only icon button */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .site-header__phone {
      display: none !important;
    }

    .site-header__phone-trigger {
      display: inline-flex !important;
    }
  }

  /* Phone trigger reuses the same visual system as theme icon button (.site-header__theme-btn). */
  .site-header__phone-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* Solo trigger exists only to support tablet "icon-only" mode when there's a single phone. Hidden by default. */
  .site-header__phone-trigger--solo {
    display: none;
  }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    .site-header__phone-trigger--solo {
      display: inline-flex !important;
    }
  }

  .site-header__phone-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 12rem;
    padding: 0.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
  }

  .site-header__phone-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-link);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast) var(--transition-ease),
      color var(--transition-base) var(--transition-ease);
    white-space: nowrap;
  }

  .site-header__phone-option:hover {
    background-color: var(--color-surface-container);
    color: var(--color-link-hover);
  }

  .site-header__phone-option:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  @media (min-width: 1280px) {
    .site-header__phone--secondary {
      display: inline-block;
    }

    /* When both phones are visible, hide the dropdown trigger */
    .site-header__phone-trigger,
    .site-header__phone-dropdown {
      display: none !important;
    }
  }

  .site-header__link--actions {
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
  }

  .site-header__link--actions.is-active {
    color: var(--color-link-active);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-surface-container);
  }

  .dark .site-header__link--actions.is-active {
    background-color: var(--color-surface);
  }

  /* Theme: single trigger + dropdown (compact UX) */
  .site-header__theme-wrap {
    position: relative;
  }

  .site-header__theme-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__theme-trigger .site-header__theme-icon {
    display: block;
  }

  .site-header__theme-trigger .site-header__theme-icon[hidden] {
    display: none;
  }

  .site-header__theme-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 10rem;
    padding: 0.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
  }

  .site-header__theme-dropdown--drawer {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 10rem;
    margin-top: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-divider);
    z-index: 10;
  }

  .site-header__theme-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-link);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast) var(--transition-ease);
  }

  .site-header__theme-option:hover {
    background-color: var(--color-surface-container);
    color: var(--color-link-hover);
  }

  .site-header__theme-option.is-active {
    color: var(--color-link-active);
    background-color: var(--color-surface-container);
  }

  .site-header__theme-option:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  /* Language: single trigger + dropdown (same UX as theme) */
  .site-header__lang-wrap {
    position: relative;
  }

  .site-header__lang-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: 9999px;
    cursor: pointer;
    transition: color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease),
      background-color var(--transition-base) var(--transition-ease);
  }

  .site-header__lang-trigger:hover {
    color: var(--color-link-hover);
    border-color: var(--color-link-hover);
  }

  .site-header__lang-trigger:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  .site-header__lang-current {
    display: block;
  }

  .site-header__lang-current[hidden] {
    display: none;
  }

  .site-header__lang-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 8rem;
    padding: 0.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
  }

  .site-header__lang-dropdown--drawer {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 8rem;
    margin-top: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-divider);
    z-index: 10;
  }

  .site-header__lang-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-link);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast) var(--transition-ease),
      color var(--transition-base) var(--transition-ease);
  }

  .site-header__lang-option:hover {
    background-color: var(--color-surface-container);
    color: var(--color-link-hover);
  }

  .site-header__lang-option.is-active {
    color: var(--color-link-active);
    background-color: var(--color-surface-container);
  }

  .site-header__lang-option:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  /* Mobile: hamburger visible, nav + actions hidden */
  .site-header__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease);
  }

  .site-header__hamburger:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }

  .site-header__hamburger:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .site-header__hamburger-bar {
    position: absolute;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .site-header__hamburger-bar:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 5px)); }
  .site-header__hamburger-bar:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .site-header__hamburger-bar:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 5px)); }

  /* Mobile drawer: visibility controlled by Alpine x-show; no base display:none so when Alpine shows it the element becomes visible */
  .site-header__drawer {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--color-scrim);
  }

  .site-header__drawer-inner {
    width: min(20rem, 85vw);
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    background: var(--color-background);
    border-left: 1px solid var(--color-divider);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }

  .site-header__drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 1rem;
  }

  /* Drawer nav links: same as header (link tokens) for consistent look and contrast */
  .site-header__drawer-link {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base) var(--transition-ease),
      color var(--transition-base) var(--transition-ease);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
  }

  .site-header__drawer-link:hover {
    background-color: var(--color-surface-container);
    color: var(--color-link-hover);
  }

  .dark .site-header__drawer-link:hover,
  .dark .site-header__drawer-link.is-active {
    background-color: var(--color-surface);
  }

  .site-header__drawer-link:active {
    color: var(--color-link-active);
  }

  .site-header__drawer-link:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  .site-header__drawer-link.is-active {
    color: var(--color-link-active);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-surface-container);
  }

  /* Horizontal divider above Care link in mobile drawer */
  .site-header__drawer-nav-divider {
    display: block;
    width: 100%;
    height: 0;
    margin: 0.5rem 0;
    border-top: 1px solid var(--color-divider);
  }

  .site-header__drawer-actions {
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .site-header__drawer-actions .site-header__theme-wrap,
  .site-header__drawer-actions .site-header__lang-wrap {
    width: -moz-fit-content;
    width: fit-content;
  }

  .site-header__drawer-theme-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: var(--touch-target-min);
    width: auto;
    text-align: left;
  }

  .site-header__drawer-theme-trigger:hover {
    border-color: var(--color-link-hover);
    color: var(--color-link-hover);
  }

  .site-header__drawer-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: var(--touch-target-min);
    width: auto;
    text-align: left;
  }

  .site-header__drawer-lang-trigger:hover {
    border-color: var(--color-link-hover);
    color: var(--color-link-hover);
  }

  .site-header__drawer-lang-trigger [data-lang-label] {
    display: block;
  }

  .site-header__drawer-lang-trigger [data-lang-label][hidden] {
    display: none;
  }

  body.drawer-open {
    overflow: hidden;
  }

  @media (max-width: 767px) {
    .site-header__nav,
    .site-header__actions {
      display: none !important;
    }

    .site-header__hamburger {
      display: flex;
      position: relative;
    }
  }

  @media (min-width: 768px) {
    .site-header__drawer {
      display: none !important;
    }
  }

  /* Tablet: reduce header noise (hide nav divider) */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .site-header__nav-divider {
      display: none;
    }
  }

  .site-header__lang,
  .site-header__theme-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    background: transparent;
    border: 1px solid var(--color-outline);
    border-radius: 9999px;
    cursor: pointer;
    transition: color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease),
      background-color var(--transition-base) var(--transition-ease);
  }

  .site-header__theme-btn {
    padding: var(--spacing-s);
    line-height: 1;
    border-radius: var(--radius-md);
  }

  .site-header__theme-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
  }

  .site-header__phone-trigger svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
  }

  /* Tablet: icons should read as primary controls (bigger glyph + larger tap area). */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .site-header__theme-btn.site-header__theme-trigger,
    .site-header__theme-btn.site-header__phone-trigger {
      width: var(--touch-target-min);
      height: var(--touch-target-min);
      min-width: var(--touch-target-min);
      min-height: var(--touch-target-min);
      padding: 0;
    }

    /* Use higher specificity because some bundles may restyle inline SVGs later. */
    .site-header__theme-trigger [data-theme-icon] svg,
    .site-header__drawer-theme-trigger [data-theme-icon] svg,
    .site-header__phone-trigger svg {
      width: 1.75rem !important;
      height: 1.75rem !important;
    }
  }

  .site-header__theme-btn:hover {
    color: var(--color-link-hover);
    border-color: var(--color-link-hover);
  }

  .site-header__theme-btn:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  .site-header__theme-btn.is-active {
    color: var(--color-link-active);
    border-color: var(--color-link-active);
    background-color: var(--color-surface-container);
  }

  .site-header__lang:hover {
    color: var(--color-link-hover);
    border-color: var(--color-link-hover);
  }

  .site-header__lang:focus-visible,
  .site-header__theme-btn:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  .site-header__lang.is-active {
    color: var(--color-link-active);
    border-color: var(--color-link-active);
    background-color: var(--color-surface-container);
  }

  .filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min);
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-m);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-pill);
    border-width: 1px;
    border-style: solid;
    transition:
      background-color var(--transition-base) var(--transition-ease),
      color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease);
  }

  .filter-button:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .filter-button-active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
  }

  .filter-button-inactive {
    background-color: var(--color-surface-container);
    color: var(--color-text);
    border-color: var(--color-outline-variant);
  }

  .filter-button-inactive:hover {
    border-color: var(--color-primary);
    background-color: var(--color-cream);
    color: var(--color-text);
  }

  .cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    min-height: var(--touch-target-min);
    padding: var(--spacing-m) var(--spacing-l);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background-color var(--transition-base) var(--transition-ease),
      color var(--transition-base) var(--transition-ease);
  }
  .cta-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary-hover, var(--color-on-primary));
  }
  .cta-primary:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .filter-group {
    @apply space-y-3;
  }

  .section-heading {
    @apply text-center text-3xl font-bold text-charcoal md:text-4xl;
  }

  .section-subtitle {
    margin-top: var(--spacing-m);
    text-align: center;
    font-size: 1.125rem;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    max-width: var(--line-length);
    margin-inline: auto;
  }

  /* Care page: bento grid of tip cards (image + title + text). Varied layout: wide, tall, default. */
  .care-bento {
    display: grid;
    gap: var(--spacing-m);
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(12rem, auto);
    margin-top: var(--section-inner-spacing, 2rem);
  }

  @media (min-width: 640px) {
    .care-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .care-bento__item--wide {
      grid-column: span 2;
    }
  }

  @media (min-width: 1024px) {
    .care-bento {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .care-bento__item--wide {
      grid-column: span 2;
      grid-row: span 1;
    }
  }

  .care-bento__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-sm);
    min-height: 0;
    min-width: 0;
    transition: box-shadow var(--transition-base) var(--transition-ease);
  }

  .care-bento__item:hover {
    box-shadow: var(--shadow-md);
  }

  .care-bento__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
  }

  .care-bento__media {
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-outline-variant);
  }

  /* Single card with square image (e.g. regular cleaning) */
  .care-bento__media--square {
    aspect-ratio: 1;
  }

  /* Shorter image height (e.g. Не мыть водой) */
  .care-bento__media--compact {
    aspect-ratio: 3 / 2;
  }

  /* Wide cards: shorter image height */
  .care-bento__item--wide .care-bento__media {
    aspect-ratio: 21 / 9;
  }

  .care-bento__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  .care-bento__body {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-m) var(--spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
  }

  .care-bento__title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text, #1a1a1a);
    margin: 0;
  }

  .care-bento__item--wide .care-bento__title {
    font-size: 1.25rem;
  }

  .care-bento__text {
    font-size: 0.9375rem;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .care-bento__item--wide .care-bento__text {
    font-size: 1rem;
  }

}
/* Hero section: viewport height, overlay, CTA. */
@layer components {
  /* Hero section: viewport height with mobile-safe units (dvh for iOS address bar) */
  #hero {
    position: relative;
    /* Header stays in normal document flow, so hero must take the *remaining* viewport height. */
    height: calc(100vh - var(--site-header-total-height));
    height: calc(100dvh - var(--site-header-total-height));
    min-height: min(
      var(--hero-min-height-landscape, 320px),
      calc(100dvh - var(--site-header-total-height))
    ); /* Small phones in landscape */
    overflow: hidden;
    isolation: isolate;

    /* Brandmark: default (hidden). Media queries below override size and
       also make the logo visible when there is enough vertical room. */
    /* Base floor to prevent hero becoming too small on short landscape screens. */
    --hero-min-height-landscape: 320px;

    --hero-brandmark-inset: clamp(1.5rem, 2vw, 2.5rem);
    /* Safe-area values (iOS notches / browser UI). Kept as variables to avoid duplication. */
    --hero-safe-area-top: env(safe-area-inset-top, 0);
    --hero-safe-area-bottom: env(safe-area-inset-bottom, 0);

    /* Layering inside hero (readability aliases for z-index values). */
    --hero-z-media: 0;
    --hero-z-overlay: -1;
    --hero-z-content: 10;
    --hero-z-brandmark: 12;

    /* Brandmark visual tuning. */
    --hero-brandmark-opacity: 0.92;
    --hero-brandmark-drop-shadow: drop-shadow(0 10px 24px oklch(0% 0 0 / 0.25));

    /* Secondary CTA tuning (used in border/hover/focus). */
    --hero-cta-secondary-border: oklch(1 0 0 / 0.6);
    --hero-cta-secondary-border-hover: oklch(1 0 0 / 0.9);
    --hero-cta-secondary-bg-hover: oklch(1 0 0 / 0.15);
    --hero-cta-secondary-focus-outline: oklch(1 0 0 / 0.8);

    /* Layers diagram (hover highlight tuning). */
    --layers-diagram-opacity-active: 1;

    /* Width safety cap (to avoid crowding on narrow screens). */
    --hero-brandmark-width-cap: 37vw;
    /* Slightly larger cap for the compact (cropped) logo variant. */
    --hero-brandmark-width-cap-compact: 45vw;
  }

  @supports not (height: 100dvh) {
    #hero {
      min-height: 0;
    }
  }

  /* Hero: wrapper clips overlay to section (no bleed) */
  #hero .hero-media-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: var(--hero-z-media);
  }

  /* Hero media: коробка = размер секции (100vw × 100vh), картинка целиком внутри (contain).
     Вся высота изображения помещается в экран; по ширине возможны поля (слева по макету). */
  #hero .hero-media-wrapper img,
  #hero .hero-media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: left center;
       object-position: left center;
  }

  #hero .hero-media-wrapper .hero-overlay {
    position: absolute;
    inset: 0;
    background-color: oklch(0% 0 0 / var(--hero-overlay-opacity));
    z-index: var(--hero-z-overlay);
  }

  .hero-content {
    position: relative;
    z-index: var(--hero-z-content);
    /* Grid partitioning: text is priority, logo takes leftover space above it. */
    display: grid;
    grid-template-columns: 1fr;
    /* Symmetric vertical split:
       - row 2 is text and stays centered,
       - rows 1 and 3 share leftover height 50/50. */
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: 100%;
    padding-top: var(--hero-safe-area-top);
    padding-bottom: var(--hero-safe-area-bottom);
  }

  /* Brandmark: sits in the first grid row (top-right), without affecting text layout. */
  #hero .hero-brandmark {
    display: none;
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    align-self: stretch;

    /* Keep safe spacing inside its own cell (so it never overlaps the text row). */
    padding: var(--hero-brandmark-inset);
    box-sizing: border-box;

    height: 100%;
    max-inline-size: var(--hero-brandmark-width-cap);

    /* tarwood-logo-100x127.svg has a stable viewBox 100×127 */
    aspect-ratio: 100 / 127;

    position: relative;
    z-index: var(--hero-z-brandmark);
    opacity: var(--hero-brandmark-opacity);
    filter: var(--hero-brandmark-drop-shadow);
    pointer-events: none;
    color: var(--color-on-primary);
    overflow: hidden;
    display: block;
  }

  #hero .hero-brandmark svg {
    display: block;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

  /* Brandmark: swap to compact cropped SVG on narrow screens (no empty top space). */
  #hero .hero-brandmark .tarwood-logo--compact {
    display: none;
  }

  @media (max-width: 480px) {
    #hero .hero-brandmark {
      /* Compact logo viewBox is 100×67 */
      aspect-ratio: 100 / 67;
    }

    #hero .hero-brandmark .tarwood-logo--full {
      display: none;
    }

    #hero .hero-brandmark .tarwood-logo--compact {
      display: block;
    }
  }

  /* Very small mobile height:
     - collapse row 1 (logo track) so row 2 starts at the top,
     - keep CTA at the bottom of the remaining space. */
  @media (max-height: 430px) {
    .hero-content {
      grid-template-rows: 0 auto minmax(0, 1fr);
      align-items: start;
      /* When the first row is collapsed, give the text block a small breathing room. */
      padding-top: calc(var(--hero-safe-area-top) + var(--spacing-l));
    }

    #hero .hero-brandmark {
      display: none;
    }
  }

  @media (min-width: 700px) {
    #hero {
      --hero-brandmark-width-cap: 33vw;
    }
  }

  /* Put text block into the middle row (auto) regardless of DOM order. */
  #hero .hero-content .container-page {
    grid-row: 2;
    align-self: stretch;
    display: flex;
  }

  /* Ensure the text block is vertically centered inside the middle grid row.
     Utility classes like `justify-end` can end up affecting the wrong axis depending
     on flex-direction; we normalize it here for the hero only. */
  /* Normalize vertical centering inside hero content. */
  #hero .hero-content .container-page .flex {
    height: 100%;
    flex: 1 1 auto;
    display: flex !important;
    /* Force column axis so centering works reliably. */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  .hero-text-container {
    max-width: min(var(--hero-text-container-max-width), 100%);
    width: 100%;
    margin-left: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }

  /* Tablet/small: keep slogan and translation on screen — limit text block width to remaining space */
  @media (min-width: 768px) {
    .hero-text-container {
      margin-left: 45%;
      max-width: min(var(--hero-text-container-max-width), 55%);
    }
  }

  /* Tablet header is "icon-heavy" (no phone text): give hero text more room */
  @media (min-width: 768px) and (max-width: 1023px) {
    .hero-text-container {
      margin-left: 15%;
      max-width: min(var(--hero-text-container-max-width), 85%);
    }
  }

  @media (min-width: 1024px) {
    .hero-text-container {
      margin-left: 40%;
      max-width: min(var(--hero-text-container-max-width), 60%);
    }
  }

  .hero-subtitle {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-uppercase);
    color: oklch(1 0 0 / 0.8);
    margin-top: 0;
    margin-bottom: var(--hero-subtitle-spacing-after);
  }

  .hero-text-container .hero-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    /* Light theme: white on scrim+media. Dark theme: see .dark #hero below — do not use
       --color-on-primary there (it is dark text for solid primary buttons). */
    color: var(--color-on-primary);
    text-align: left;
    margin-top: var(--hero-title-spacing-before);
    margin-bottom: var(--hero-title-spacing-before);
  }

  /* Hero copy sits on photo/video + overlay, not on --color-primary buttons. */
  .dark #hero .hero-brandmark,
  .dark #hero .hero-text-container .hero-title,
  .dark #hero .hero-cta-secondary {
    color: var(--color-text);
  }

  @media (min-width: 640px) {
    .hero-text-container .hero-title {
      font-size: var(--font-size-h2);
    }
  }

  @media (min-width: 768px) {
    .hero-text-container .hero-title {
      font-size: var(--font-size-h1);
      text-align: right;
    }
  }

  @media (min-width: 1024px) {
    .hero-text-container .hero-title {
      font-size: var(--hero-title-size-lg);
    }
  }

  .hero-lead {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: oklch(1 0 0 / 0.85);
    max-width: var(--line-length-mobile);
    margin-top: var(--hero-lead-spacing-before);
    margin-bottom: var(--hero-lead-spacing-after);
  }

  @media (min-width: 768px) {
    .hero-lead {
      font-size: var(--font-size-lead);
      max-width: var(--line-length);
    }
  }

  /* Place CTA buttons at the bottom of the hero (3rd grid row). */
  .hero-cta-bottom {
    grid-row: 3;
    grid-column: 1;
    width: 100%;
    align-self: end;
    padding-bottom: var(--spacing-l);
    /* Align with the same right inset used by the brandmark. */
    padding-right: var(--hero-brandmark-inset);
  }

  /* Reuse hero-text-container width/margins, but align buttons to the right edge. */
  .hero-cta-text {
    display: flex;
    justify-content: flex-end;
  }

  .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--hero-cta-group-gap);
    margin-top: var(--hero-cta-group-spacing-before);
  }

  @media (min-width: 640px) {
    .hero-cta-group {
      flex-direction: row;
      align-items: center;
    }
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    padding: calc(var(--spacing-s) + var(--spacing-xs)) var(--spacing-xl);
    min-height: var(--hero-cta-touch-min-height);
    border-radius: var(--radius-lg);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease),
      transform var(--transition-base) var(--transition-ease);
    -webkit-tap-highlight-color: transparent;
  }

  .hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    padding: calc(var(--spacing-s) + var(--spacing-xs)) var(--spacing-xl);
    min-height: var(--hero-cta-touch-min-height);
    border-radius: var(--radius-lg);
    border: 2px solid var(--hero-cta-secondary-border);
    background-color: transparent;
    color: var(--color-on-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: background-color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease);
    -webkit-tap-highlight-color: transparent;
  }

  .hero-cta-secondary:hover {
    background-color: var(--hero-cta-secondary-bg-hover);
    border-color: var(--hero-cta-secondary-border-hover);
  }

  .hero-cta-secondary:focus-visible {
    outline: 2px solid var(--hero-cta-secondary-focus-outline);
    outline-offset: var(--spacing-xs);
  }

  .hero-cta-secondary__arrow {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex-shrink: 0;
    transition: transform var(--transition-fast) var(--transition-ease);
  }

  .hero-cta-secondary:hover .hero-cta-secondary__arrow {
    transform: translateX(var(--spacing-xs));
  }

  /* Reusable icon size classes (use on inline SVGs) */
  .icon {
    display: block;
    flex-shrink: 0;
  }
  .icon--sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  .icon--md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }
  .icon--lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }
  .icon--xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
  }

  /* Empty state and placeholder icons (avoid huge 64px icons) */
  .empty-state__icon {
    margin: 0 auto var(--spacing-m);
    color: var(--color-text-muted);
  }
  .image-placeholder .icon,
  .image-placeholder svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    max-width: var(--icon-size-lg);
    max-height: var(--icon-size-lg);
    color: var(--color-text-muted);
  }

  /* Benefit card: icon and title in one row, centered horizontally and vertically */
  .benefit-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-m);
    width: 100%;
    max-width: 100%;
  }
  .benefit-card-header .benefit-icon-box {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .benefit-card-header h3 {
    margin: 0;
    line-height: 1.25;
  }
  /* Standard vertical spacing between card title and body text */
  .benefit-card-header + p,
  .partners-kit-media + h3 {
    margin-top: var(--spacing-s);
  }
  /* Layer number 1,2,3: shown only on small screens when diagram also shows numbers (links diagram to cards) */
  .benefit-card__layer-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    background: var(--color-surface-container-high);
    border-radius: var(--radius-pill);
  }
  @media (min-width: 640px) {
    .benefit-card__layer-num {
      display: none;
    }
  }

  /* Benefit icons: cap size so SVGs never render huge */
  .benefit-icon-box {
    @apply mx-auto mb-4 flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl;
  }
  .benefit-icon-box svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    max-width: var(--icon-size-lg);
    max-height: var(--icon-size-lg);
    flex-shrink: 0;
    display: block;
  }

  /* Layers diagram (three-layer cross-section): split layout — labels left, image right */
  .layers-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-m);
  }
  /* Variant 8 (LAYERS_IMAGE_DESIGNER_SPEC): one SVG with groups by language — switch via data-lang */
  .layers-diagram__layer--ru {
    display: block;
  }
  .layers-diagram__layer--en {
    display: none;
  }
  .layers-diagram[data-lang="ru"] .layers-diagram__layer--ru {
    display: block;
  }
  .layers-diagram[data-lang="ru"] .layers-diagram__layer--en {
    display: none;
  }
  .layers-diagram[data-lang="en"] .layers-diagram__layer--en {
    display: block;
  }
  .layers-diagram[data-lang="en"] .layers-diagram__layer--ru {
    display: none;
  }
  .layers-diagram--by-lang {
    width: 100%;
    max-width: 100%;
  }
  .layers-diagram--by-lang .layers-diagram__illustration {
    width: 100%;
    max-width: 100%;
  }
  .layers-diagram__illustration--with-mobile-links {
    position: relative;
  }
  .layers-diagram__illustration--with-mobile-links .layers-diagram__svg {
    position: relative;
    z-index: 0;
  }
  /* Mobile: overlay with number links above SVG; buttons have solid bg so connector lines don't show through */
  .layers-diagram__mobile-links {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  /* Hide connector line to the left of buttons (line starts at ~2% in SVG) */
  .layers-diagram__mobile-links::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5%;
    background: var(--color-surface-container);
    z-index: 0;
    pointer-events: none;
  }
  /* Mobile number links: secondary style, solid bg so line is hidden under button */
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num {
    pointer-events: auto;
    position: absolute;
    z-index: 2;
    left: 2%;
    transform: translateY(-50%);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-primary);
    background-color: var(--color-surface-container);
    color: var(--color-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
  }
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }
  /* Vertical position = line Y in viewBox (row Y + 8) / 240 so line hits button center */
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num--1 { top: 24.17%; }
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num--2 { top: 52.92%; }
  .layers-diagram--by-lang .layers-diagram__mobile-links .layers-diagram__label-num--3 { top: 86.67%; }
  @media (max-width: 639px) {
    .layers-diagram__mobile-links {
      display: block;
    }
    .layers-diagram--by-lang .layers-diagram__svg .layers-diagram__label-text {
      display: none;
    }
  }
  @media (min-width: 640px) {
    .layers-diagram__mobile-links {
      display: none;
    }
  }
  .layers-diagram--by-lang .layers-diagram__svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
  }
  .layers-diagram--by-lang .layers-diagram__svg .layers-diagram__label-text {
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    fill: currentColor;
  }
  /* Layer contours + linked hover: contour, label, connector highlight together (SVG) */
  .layers-diagram__contour {
    cursor: pointer;
    pointer-events: all;
    stroke-opacity: 0.35;
    transition: stroke-opacity var(--transition-base) var(--transition-ease),
      stroke var(--transition-base) var(--transition-ease);
  }
  .layers-diagram__row {
    cursor: pointer;
    pointer-events: all;
    transition: opacity var(--transition-base) var(--transition-ease);
  }
  .layers-diagram__row .layers-diagram__label-text {
    transition: fill var(--transition-base) var(--transition-ease);
  }
  .layers-diagram__row line,
  .layers-diagram__row use {
    transition: opacity var(--transition-base) var(--transition-ease);
  }
  /* Hover contour or row → highlight that contour + that row (label + line) */
  .layers-diagram__svg .layers-diagram__contour--1:hover,
  .layers-diagram__svg:has(.layers-diagram__row--1:hover) .layers-diagram__contour--1 {
    stroke-opacity: var(--layers-diagram-opacity-active);
    stroke: var(--color-primary);
  }
  .layers-diagram__svg .layers-diagram__contour--2:hover,
  .layers-diagram__svg:has(.layers-diagram__row--2:hover) .layers-diagram__contour--2 {
    stroke-opacity: var(--layers-diagram-opacity-active);
    stroke: var(--color-primary);
  }
  .layers-diagram__svg .layers-diagram__contour--3:hover,
  .layers-diagram__svg:has(.layers-diagram__row--3:hover) .layers-diagram__contour--3 {
    stroke-opacity: var(--layers-diagram-opacity-active);
    stroke: var(--color-primary);
  }
  /* Hover row or contour → subtle emphasis only: contour stroke, label tint, connector opacity (no movement) */
  .layers-diagram__svg .layers-diagram__row--1:hover .layers-diagram__label-text,
  .layers-diagram__svg:has(.layers-diagram__contour--1:hover) .layers-diagram__row--1 .layers-diagram__label-text {
    fill: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }
  .layers-diagram__svg .layers-diagram__row--1:hover line,
  .layers-diagram__svg .layers-diagram__row--1:hover use,
  .layers-diagram__svg:has(.layers-diagram__contour--1:hover) .layers-diagram__row--1 line,
  .layers-diagram__svg:has(.layers-diagram__contour--1:hover) .layers-diagram__row--1 use {
    opacity: var(--layers-diagram-opacity-active);
  }
  .layers-diagram__svg .layers-diagram__row--2:hover .layers-diagram__label-text,
  .layers-diagram__svg:has(.layers-diagram__contour--2:hover) .layers-diagram__row--2 .layers-diagram__label-text {
    fill: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }
  .layers-diagram__svg .layers-diagram__row--2:hover line,
  .layers-diagram__svg .layers-diagram__row--2:hover use,
  .layers-diagram__svg:has(.layers-diagram__contour--2:hover) .layers-diagram__row--2 line,
  .layers-diagram__svg:has(.layers-diagram__contour--2:hover) .layers-diagram__row--2 use {
    opacity: var(--layers-diagram-opacity-active);
  }
  .layers-diagram__svg .layers-diagram__row--3:hover .layers-diagram__label-text,
  .layers-diagram__svg:has(.layers-diagram__contour--3:hover) .layers-diagram__row--3 .layers-diagram__label-text {
    fill: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }
  .layers-diagram__svg .layers-diagram__row--3:hover line,
  .layers-diagram__svg .layers-diagram__row--3:hover use,
  .layers-diagram__svg:has(.layers-diagram__contour--3:hover) .layers-diagram__row--3 line,
  .layers-diagram__svg:has(.layers-diagram__contour--3:hover) .layers-diagram__row--3 use {
    opacity: var(--layers-diagram-opacity-active);
  }
  .layers-diagram--split {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--spacing-m);
  }
  .layers-diagram--split .layers-diagram__illustration {
    align-self: center;
  }
  .layers-diagram__labels-column {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 38%;
  }
  .layers-diagram__label-row {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    min-width: 0;
  }
  /* Line inside label block, after text — fills to container edge (LAYERS_IMAGE_DESIGNER_SPEC §3).
     To angle the line: add transform, e.g. transform: rotate(-2deg); transform-origin: left center;
     Or use an inline SVG <line> with different x2,y2 per row. See docs/LAYERS_IMAGE_DESIGNER_SPEC.md §3. */
  /* DRY: .layers-diagram__line-inner already defines the common line styling. */
  .layers-diagram--split .layers-diagram__label-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    background: var(--color-surface-container-high);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color var(--transition-base) var(--transition-ease), box-shadow var(--transition-base) var(--transition-ease);
  }
  .layers-diagram--split .layers-diagram__label-num:hover {
    background: var(--color-surface-container-highest);
    box-shadow: var(--shadow-sm);
  }
  .layers-diagram--split .layers-diagram__label-num:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .layers-diagram--split .layers-diagram__label-text {
    display: none;
  }
  @media (min-width: 640px) {
    .layers-diagram--split .layers-diagram__label-num {
      display: none;
    }
    .layers-diagram--split .layers-diagram__label-text {
      display: inline;
    }
  }
  .layers-diagram__illustration {
    flex-shrink: 0;
    max-width: min(200px, 100%);
  }
  .layers-diagram__img {
    width: 100%;
    height: auto;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: var(--radius-lg);
  }
  .layers-diagram__labels {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }
  .layers-diagram__labels li + li {
    margin-top: var(--spacing-xs);
  }

  /* Image as base + SVG leader lines + overlay labels (positions in % so they scale with image). Labels on the left (standard for technical diagrams). */
  .layers-diagram__image-wrap {
    position: relative;
    display: block;
    line-height: 0;
  }
  .layers-diagram__image-wrap .layers-diagram__img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Label: flex so line sits after text → line start follows text end (any language), line never crosses text */
  .layers-diagram__label {
    position: absolute;
    left: 2%;
    max-width: 20%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
  }
  .layers-diagram__label--1 { top: 18%; }
  .layers-diagram__label--2 { top: 48%; }
  .layers-diagram__label--3 { top: 82%; }
  /* Line from end of text to diagram; flex-grow fills gap so start is always after text */
  .layers-diagram__line-inner {
    flex: 1;
    min-width: 4px;
    border-bottom: 1px solid currentColor;
    opacity: 0.7;
    pointer-events: none;
    position: relative;
  }
  .layers-diagram__line-inner::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: var(--layers-point-diameter, 4px);
    height: var(--layers-point-diameter, 4px);
    border-radius: var(--radius-pill);
    background-color: currentColor;
  }
  /* Numbers as links to benefit cards (mobile): same look as .benefit-card__layer-num (round button) */
  .layers-diagram__label-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    background: var(--color-surface-container-high);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color var(--transition-base) var(--transition-ease), box-shadow var(--transition-base) var(--transition-ease);
  }
  .layers-diagram__label-num:hover {
    background: var(--color-surface-container-highest);
    box-shadow: var(--shadow-sm);
  }
  .layers-diagram__label-num:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .layers-diagram__label-text {
    display: none;
  }
  @media (min-width: 640px) {
    .layers-diagram__label-num {
      display: none;
    }
    .layers-diagram__label-text {
      display: inline;
    }
  }

  .benefit-layers-visual {
    margin-bottom: var(--spacing-m);
    display: flex;
    justify-content: center;
    width: 100%;
  }
  /* Split layout: diagram row takes full width so labels stay left, image right; no extra inner spacing (card already has padding) */
  .benefit-layers-visual .layers-diagram--split {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  /* Small devices: diagram fits card width (all cards same width) */
  .benefit-layers-visual .layers-diagram__illustration {
    max-width: 100%;
  }
  @media (min-width: 768px) {
    .benefit-layers-visual .layers-diagram__illustration {
      max-width: 280px;
    }
    /* First card (left column): diagram fits narrow column */
    .benefits-grid .benefit-card:first-child .layers-diagram__illustration {
      max-width: 220px;
    }
  }
  @media (min-width: 1024px) {
    .benefits-grid .benefit-card:first-child .layers-diagram__illustration {
      max-width: 240px;
    }
  }

  .hero-cta:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-lg);
  }

  .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--color-surface-container);
    color: var(--color-text-muted);
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    background-color: var(--color-scrim);
    backdrop-filter: blur(8px);
  }

  .modal-content {
    position: relative;
    z-index: var(--z-modal-content);
    width: 100%;
    max-width: 64rem;
    max-height: 90vh;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-close-btn {
    padding: var(--spacing-s);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: color var(--transition-base) var(--transition-ease),
      background-color var(--transition-base) var(--transition-ease);
  }

  .modal-close-btn:hover {
    color: var(--color-text);
    background-color: var(--color-surface-container);
  }

  .gallery-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-gallery-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-m);
    background-color: oklch(0% 0 0 / 0.95);
  }

  .gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--spacing-s);
    border-radius: var(--radius-pill);
    background-color: oklch(100% 0 0 / 0.1);
    color: var(--color-text-on-inverse);
    transition: background-color var(--transition-base) var(--transition-ease);
  }

  .gallery-nav-btn:hover {
    background-color: oklch(100% 0 0 / 0.2);
  }

  .gallery-thumbnail-btn {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0.6;
    transition: opacity var(--transition-base) var(--transition-ease);
  }

  .gallery-thumbnail-btn:hover {
    opacity: 1;
  }

  .gallery-close-btn {
    position: absolute;
    top: -3rem;
    right: 0;
    padding: var(--spacing-s);
    color: oklch(100% 0 0 / 0.9);
    transition: color var(--transition-base) var(--transition-ease);
  }

  .gallery-close-btn:hover {
    color: var(--color-text-on-inverse);
  }

}
/* Story transition block and transition duration utilities. */
@layer components {
  .story-transition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-m);
    margin-top: var(--section-inner-spacing);
    padding-top: var(--spacing-l);
    text-align: center;
  }

  .story-transition__text {
    font-size: 1.125rem;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    max-width: var(--line-length-mobile);
  }

  .story-transition__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: calc(var(--spacing-s) + var(--spacing-xs)) var(--spacing-l);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    transition: background-color var(--transition-base) var(--transition-ease),
      color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease);
  }

  .story-transition__btn:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }

  /* Primary variant: filled by default (View projects, View installation options, Choose grade, Go to palette, Find showroom) */
  .story-transition__btn.btn-primary {
    border-color: transparent;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .story-transition__btn.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary-hover, var(--color-on-primary));
  }

  .story-transition__btn:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .story-transition__arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast) var(--transition-ease);
  }

  .story-transition__btn:hover .story-transition__arrow {
    transform: translateX(var(--spacing-xs));
  }

  /* .footer-link styled above with --color-link tokens (design system 1.4) */

  /* Transition utilities live in input.css @layer utilities (single source of truth). */
}
/* Prevent layout shift / flash of oversized images and SVGs before CSS loads.
   These rules work together with inline styles on wrappers (e.g., aspect-ratio).
   See: https://web.dev/articles/optimize-cumulative-layout-shift */
@layer components {

  /* ── Universal: SVGs without explicit width/height attributes ─────────── */
  /* Fallback: if an SVG has no wrapper with aspect-ratio, constrain it
     to the content width and prevent it from overflowing its container. */
  svg:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
  }

  /* ── Size variants section: icon containers ──────────────────────────── */
  /* These prevent the "flash" of large icons before the main CSS bundle loads.
     Inline styles on .sv-card__icon (64px) work immediately; these CSS rules
     ensure the installation card icons (128px) also reserve space early. */

  .sv-card__icon {
    display: inline-block;
    /* Inline styles on the span provide width/height immediately */
  }

  .sv-card__icon svg {
    display: block;
    /* Reserve space — overrides natural SVG viewBox size before CSS loads */
    min-width: var(--sv-card-icon-size, 4rem);
    min-height: var(--sv-card-icon-size, 4rem);
  }

  .sv-card--installation .sv-card__icon svg {
    min-width: calc(2 * var(--sv-card-icon-size, 4rem));
    min-height: calc(2 * var(--sv-card-icon-size, 4rem));
  }

  /* ── Size variants: profile SVG wrappers ─────────────────────────────── */
  .sv-profile-svg-wrapper {
    width: 100%;
    /* Inline style provides aspect-ratio; this is a CSS backup */
    max-height: 14.4rem; /* ~230px, prevents extreme height on mobile */
  }

  @media (min-width: 768px) {
    .sv-profile-svg-wrapper {
      max-height: none;
    }
  }

  /* ── Grades section: three bento cards in a row, not stacked ──────────── */
  /* Without this, .gr-grid has no display:grid before CSS loads → cards stack vertically */
  .gr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m, 1rem);
  }

  @media (min-width: 768px) {
    .gr-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .gr-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Grade card media: reserve 3:4 space so images don't flash unstyled */
  .gr-card__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--color-surface-container-high, #f0f0f0);
  }

  .gr-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* ── Catalog: color swatches bento grid ───────────────────────────────── */
  /* Without this, swatches stack vertically before CSS loads */
  .catalog-bento-card__content--swatches-bento {
    display: grid;
    gap: var(--spacing-m, 1rem) var(--spacing-l, 1.5rem);
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vw, 170px), 1fr));
  }

  .catalog-bento-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 4rem;
    min-height: 4.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-outline-variant, #ddd);
    background-color: var(--color-surface-container, #f5f5f5);
    position: relative;
    overflow: hidden;
  }

  .catalog-bento-swatch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
  }

  .catalog-bento-swatch__image-wrap {
    position: absolute;
    inset: 0;
  }

  .catalog-bento-swatch__image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .catalog-bento-swatch__label {
    display: block;
    text-align: center;
    font-size: var(--font-size-small, 0.875rem);
    color: var(--color-text-secondary, #666);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ── Footer: icon sizing ─────────────────────────────────────────────── */
  /* Without this, SVGs inside .footer__icon render at viewBox size (24×24)
     and span is inline → width/height ignored → icons flash large */
  .footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
  }

  .footer__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted, #666);
  }

  /* Footer grid: side-by-side blocks on mobile (2-col), not all stacked */
  .footer__grid {
    display: grid;
    gap: var(--spacing-l, 1.5rem);
  }

  @media (max-width: 767px) {
    .footer__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ── Distributor bento: icon sizing ───────────────────────────────────── */
  /* Same issue as footer icons: SVGs inside spans render at viewBox size
     (24×24) before CSS loads. Reserve space immediately. */
  .distributor-bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125em;
    height: 1.125em;
  }

  .distributor-bento__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}