/* ── Physics State ────────────────────────── */

@property --hover      { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --press      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --scroll     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --open-close { syntax: "<number>"; inherits: false; initial-value: 0; }


:root {

/* ═══════════════════════════════════════════════════════════
   PART 1 — INPUTS
   Sites override these. Everything in PART 2 derives from them.
   ═══════════════════════════════════════════════════════════ */

  /* ── Color ── */
  --hue:         250;
  --hue-colored: var(--hue);
  --hue-accent:  var(--hue);
  --hue-ink:     var(--hue);
  --hue-danger:  15;

  /* ── Typography ── */
  --type-base:       1.0625;
  --type-ratio:      1.2;
  --space-ratio:     1.2;
  --opacity-ratio:   1.2;
  --weight-body:     400;
  --weight-contrast: 100;
  --font-body:       system-ui, sans-serif;
  --font-display:    var(--font-body);
  --font-label:      var(--font-body);
  --font-display-policy: optional;
  --tracking-label:  0.04em;
  --tracking-caps:   0.08em;

  /* ── Layout ── */
  --radius:          0;
  --container-max:   75rem;
  --main-gutter:     var(--space-4);
  --body-gutter:     var(--space-5);
  --card-min:        17.5rem;
  --measure:         65ch;

  /* ── Section rhythm ── */
  --site-nav-height:           80px;
  --section-block:             clamp(var(--space-5), 8vh, var(--space-8));
  --first-section-block-start: 0;

  /* ── Depth ── */
  --elevation:       0;

  /* ── Break shapes ── */
  --break-amplitude: 3;

  /* ── Glass material ── hardcoded for now, sites override to tune
     (blur amounts, bevel inset stack, backdrop tint). Derivation
     will come once a pattern emerges across sites. */
  --glass-blur-sm:   blur(8px);
  --glass-blur-md:   blur(12px) saturate(120%);
  --glass-blur-lg:   blur(32px) saturate(180%);
  --glass-bevel:
    inset 0  1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0      8px 32px oklch(0 0 0 / 0.08);
  --glass-backdrop:  oklch(0 0 0 / 0.4);

  /* ── Timing ── platform constants, sites don't override */
  --anim-fast: 75ms;
  --anim-mid:  300ms;
  --anim-slow: 600ms;

  /* ── Easing ── Hooke's law and exponential decay approximations */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);


/* ═══════════════════════════════════════════════════════════
   PART 2 — DERIVED
   Formulas that use the inputs above. Do not edit.
   ═══════════════════════════════════════════════════════════ */

  /* ── Color Contract ────────────────────────────────────
     4 surfaces × 3-role ink triplets.

     Rule 1 — Paint ⇒ Surface.
       Anything that paints a background wears a surface class
       (.surface / .surface-colored / .surface-accent / .surface-danger).
       Anything that doesn't paint inherits from the nearest
       surface ancestor via the --ink-* cascade.

     Rule 2 — Triplets install as a unit.
       (background, --ink-display, --ink-body, --ink-label) are
       one decision, same polarity. Never cross-mix polarities. */

  /* DEFAULT — light surface, dark inks */
  --surface:             oklch(0.98 0.005 var(--hue));
  --ink-default-display: oklch(0.15 0.020 var(--hue-ink));
  --ink-default-body:    oklch(0.40 0.015 var(--hue-ink));
  --ink-default-label:   oklch(0.55 0.010 var(--hue-ink));

  /* COLORED — dark surface, light inks */
  --surface-colored:     oklch(0.18 0.015 var(--hue-colored));
  --ink-colored-display: oklch(0.98 0.005 var(--hue-ink));
  --ink-colored-body:    oklch(0.88 0.010 var(--hue-ink));
  --ink-colored-label:   oklch(0.68 0.010 var(--hue-ink));

  /* ACCENT — mid surface, dark inks (CTA) */
  --surface-accent:      oklch(0.60 0.150 var(--hue-accent));
  --ink-accent-display:  oklch(0.15 0.020 var(--hue-ink));
  --ink-accent-body:     oklch(0.30 0.015 var(--hue-ink));
  --ink-accent-label:    oklch(0.45 0.010 var(--hue-ink));

  /* DANGER — red surface, near-white inks. Hue anchored. */
  --surface-danger:      oklch(0.55 0.22  var(--hue-danger));
  --ink-danger-display:  oklch(0.98 0.005 var(--hue-danger));
  --ink-danger-body:     oklch(0.94 0.010 var(--hue-danger));
  --ink-danger-label:    oklch(0.80 0.010 var(--hue-danger));

  /* Highlights */
  --accent:      var(--surface-accent);
  --accent-tint: oklch(0.50 0.100 var(--hue-accent));
  --danger:      var(--surface-danger);

  /* Active ink installation — surface classes rewrite these in scope */
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);

  /* ── Type Scale ──
     Weber-Fechner: type-base × type-scale × 1rem × pow(type-ratio, n).
     Platform owns --type-scale (responsive). */
  --type-scale: 1;
  --text-sm:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), -1));
  --text-base: calc(var(--type-base) * var(--type-scale) * 1rem);
  --text-lg:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 1));
  --text-xl:   calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 2));
  --text-2xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 3));
  --text-3xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 4));
  --text-4xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 5));
  --text-5xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 6));
  --text-6xl:  calc(var(--type-base) * var(--type-scale) * 1rem * pow(var(--type-ratio), 7));





  /* ── Weight Scale ──
     Linear: body ± contrast × n. Lands on standard CSS weight stops. */
  --weight-light:   calc(var(--weight-body) - var(--weight-contrast));
  --weight-semi:    calc(var(--weight-body) + var(--weight-contrast));
  --weight-label:   calc(var(--weight-body) + var(--weight-contrast) * 2);
  --weight-heavy:   calc(var(--weight-body) + var(--weight-contrast) * 3);
  --weight-display: calc(var(--weight-body) + var(--weight-contrast) * 4);

  /* ── Space Scale ──
     Weber-Fechner: --1 × pow(type-ratio, n×2). Same curve as opacity. */
  --1: 0.5rem;
  --space-1:  var(--1);
  --space-2:  calc(var(--1) * pow(var(--space-ratio), 2));
  --space-3:  calc(var(--1) * pow(var(--space-ratio), 4));
  --space-4:  calc(var(--1) * pow(var(--space-ratio), 6));
  --space-5:  calc(var(--1) * pow(var(--space-ratio), 8));
  --space-6:  calc(var(--1) * pow(var(--space-ratio), 10));
  --space-7:  calc(var(--1) * pow(var(--space-ratio), 12));
  --space-8:  calc(var(--1) * pow(var(--space-ratio), 14));
  --space-9:  calc(var(--1) * pow(var(--space-ratio), 16));
  --space-10: calc(var(--1) * pow(var(--space-ratio), 18));

  /* ── Opacity Scale ──
     Weber-Fechner: --opacity-1 × pow(type-ratio, n×2). */
  --opacity-1: 0.04;
  --opacity-2: calc(var(--opacity-1) * pow(var(--opacity-ratio), 2));
  --opacity-3: calc(var(--opacity-1) * pow(var(--opacity-ratio), 4));
  --opacity-4: calc(var(--opacity-1) * pow(var(--opacity-ratio), 6));
  --opacity-5: calc(var(--opacity-1) * pow(var(--opacity-ratio), 8));
  --opacity-6: calc(var(--opacity-1) * pow(var(--opacity-ratio), 10));
  --opacity-7: calc(var(--opacity-1) * pow(var(--opacity-ratio), 12));

  /* ── Radius Scale ── */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);

  /* ── Shadow ──
     Inverse-square light physics. Components set --elevation per-context. */
  --shadow-y:       calc(var(--elevation) * 4px);
  --shadow-blur:    calc(var(--elevation) * var(--elevation) * 4px);
  --shadow-spread:  calc(var(--elevation) * -1px);
  --shadow-opacity: calc(0.5 / (var(--elevation) + 1));
  --shadow:         0 var(--shadow-y) var(--shadow-blur) var(--shadow-spread) oklch(from var(--ink-display) l c h / var(--shadow-opacity));
  --shadow-strong:  0 8px 32px oklch(from var(--ink-display) l c h / var(--opacity-5));

  /* ── Color Layers — derive from active ink/accent ── */
  --shade:           oklch(from var(--ink-body)        l c h / var(--opacity-1));
  --border:          oklch(from var(--ink-body)        l c h / var(--opacity-4));
  --border-strong:   oklch(from var(--ink-display)     l c h / var(--opacity-5));

  --tint-opacity:    var(--opacity-4);
  --tint:            oklch(from var(--accent-tint)     l c h / var(--tint-opacity));

  --overlay-opacity: var(--opacity-7);
  --overlay:         oklch(from var(--surface-colored) l c h / var(--overlay-opacity));

  /* Scrollbar — derived from --ink-default-display (not active ink,
     because :root has no surface class installing the active values). */
  --scrollbar-thumb:       oklch(from var(--ink-default-display) l c h / var(--opacity-5));
  --scrollbar-thumb-hover: oklch(from var(--ink-default-display) l c h / var(--opacity-6));
  --scrollbar-track:       transparent;
}


/* ── Responsive Scaling ──────────────────────────────────
   Adjusts --1 (space base) and --type-scale (type base) at
   breakpoints. Everything derived from them scales automatically. */

@media (max-width: 1068px) { :root { --1: 0.4375rem; --type-scale: 0.97; } }
@media (max-width: 734px)  { :root { --1: 0.375rem;  --type-scale: 0.95; } }

/* ── Box Model + Element Resets ────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: clamp(16px, 0.6vw + 10px, 24px);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-nav-height) + var(--space-4));
  scroll-padding-bottom: var(--space-5);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink-body);
  line-height: 1.4;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-display); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; margin: 0; text-box-trim: both; text-box-edge: cap alphabetic; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
p { margin-block: 0; text-wrap: pretty; }
p + p { margin-block-start: var(--space-2); }
p, li, blockquote, dd { font-size: var(--text-base); }

/* <data> and <output> — numeric/statistical values, auto-pick up label ink semantically */
data, output { color: var(--ink-label); }

img, video, svg, canvas, iframe { max-inline-size: 100%; height: auto; }
button, [role="button"] { margin: 0; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-family: var(--font-label); cursor: pointer; }
label, caption, figcaption { font-family: var(--font-label); }

article ul, article ol { margin-top: var(--space-3); padding-left: var(--space-5); }
article li + li { margin-top: var(--space-1); }

/* ── Structural Defaults ── every site gets these for free, no per-section setup */
section { position: relative; }
main { display: flex; flex-direction: column; }
blockquote { border-inline-start: 3px solid var(--border); margin: 0; padding: 0 0 0 1em; }
hr { margin: 0; border: 0; border-block-end: 1px solid var(--border); }
iframe { display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); }

::selection { background: oklch(from var(--accent) l c h / 0.25); }
mark { background: oklch(from var(--accent) l c h / 0.15); color: inherit; padding: 0 0.15em; border-radius: 0.2em; }

/* ── Texture ──────────────────────────────────────── */

body::after {
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.03);
  background: var(--grain, var(--grain-fine));
  background-size: var(--grain-size, 200px 200px);
}

/* ── Accessibility ────────────────────────────────── */

:root {
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;
}

:focus-visible {
  outline: var(--focus-ring-size) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.site-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: oklch(0.12 0 0);
  color: oklch(0.95 0 0);
  font-weight: var(--weight-label);
  text-decoration: none;
}
.site-skip-link:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .card, input, textarea, select { border: 1px solid CanvasText !important; }
  svg { fill: CanvasText !important; stroke: CanvasText !important; }
}

@media (inverted-colors: inverted) {
  img, video, .no-inversion { filter: invert(1); }
}

/* ── Interaction ──────────────────────────────────── */

:target { animation: target-flash 1.4s 0.3s ease-out; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ── Forms ────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  font-size: var(--text-base);
  line-height: inherit;
  min-block-size: 44px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.25);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
  border-color: var(--surface-danger);
}

input:invalid:not(:placeholder-shown):focus-visible,
textarea:invalid:not(:placeholder-shown):focus-visible {
  box-shadow: 0 0 0 3px oklch(from var(--surface-danger) l c h / 0.25);
}

::placeholder {
  color: color-mix(in oklch, var(--ink-display, currentColor) 40%, transparent);
  opacity: 1;
}

textarea { resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
  width: 1.25em;
  height: 1.25em;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Error Pages ── */

.error-status {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.error-page main {
  display: grid;
  place-items: center;
  min-height: 80vh;
}

/* ── Prose ── */

.prose { max-inline-size: var(--measure, 65ch); }
.prose > * + * { margin-block-start: var(--space-3); }
.prose p { margin-block-end: var(--space-2); }
.prose h2, .prose h3, .prose h4 { margin-block-start: var(--space-5); margin-block-end: var(--space-2); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); margin-block-end: var(--space-3); }
.prose li + li { margin-block-start: var(--space-1); }
.prose a { text-decoration: underline; text-underline-offset: 0.1em; }

/* ── Platform Keyframes ─────────────────────────────────
   Every @keyframes lives here. Source files reference them
   via animation: name ... and never define their own.
   Site-specific keyframes still live in sites/{slug}/. */


/* ── Component motion ──────────────────────────────── */

/* Dialog pop-in — used by .dialog-panel */
@keyframes pop-in-spring {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Dropdown slide-down — used by .dropdown__menu */
@keyframes slide-down-fade {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Notice fade-in — used by output.notice */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Marquee scroll — used by .marquee__track */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Carousel progress bar — used by .carousel__dot[data-state="playing"]::after */
@keyframes progress-fill {
  to { width: 100%; }
}

/* Carousel ring fill — used by .gallery__play-pause progress angle */
@keyframes fill-ring {
  from { --progress-angle: 0deg; }
  to   { --progress-angle: 360deg; }
}


/* ── Chrome motion ─────────────────────────────────── */

/* Nav scroll-driven glass — used with animation-timeline: scroll() */
@keyframes nav-glass {
  from { --scroll: 0; }
  to   { --scroll: 1; }
}


/* ── Interaction feedback ──────────────────────────── */

/* :target flash — used by base.css :target rule */
@keyframes target-flash {
  from { background-color: var(--tint); }
  to   { background-color: transparent; }
}


/* ── Entrance patterns (scroll-driven) ─────────────────
   Designed for animation-timeline: view(). Sites consume
   these via [data-entrance="..."] rules in site CSS. */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* view-peak — peaks at 1 mid-viewport, fades out as the element exits */
@keyframes view-peak {
  0%   { opacity: 0; transform: translateY(2rem); }
  50%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2rem); }
}

/* ── Layout — structural primitives ─────────────────
   section → .contain.flow → .split-* → children

   Composition:
   - section owns the band: padding, surface class, break shape
   - .contain owns the width box, co-classed with .flow
   - .flow owns vertical rhythm
   - .split-* owns horizontal arrangement
   - No primitive owns both axes */


/* ── Surfaces ────────────────────────────────────────
   Four surface classes. Each installs its ink triplet
   (--ink-display / --ink-body / --ink-label) in scope.
   This is the ONLY place ink triplets are installed.

   Components read var(--ink-*) from the cascade.
   Sections wear a surface class on <section>.
   Flip a component's polarity by wearing a surface class
   on the component element: <div class="card surface-colored">. */

.surface {
  background: var(--surface);
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface);
}

.surface-colored {
  background: var(--surface-colored);
  --ink-display: var(--ink-colored-display);
  --ink-body:    var(--ink-colored-body);
  --ink-label:   var(--ink-colored-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-colored);
}

.surface-accent {
  background: var(--surface-accent);
  --ink-display: var(--ink-accent-display);
  --ink-body:    var(--ink-accent-body);
  --ink-label:   var(--ink-accent-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-accent);
}

.surface-danger {
  background: var(--surface-danger);
  --ink-display: var(--ink-danger-display);
  --ink-body:    var(--ink-danger-body);
  --ink-label:   var(--ink-danger-label);
  color: var(--ink-body);
  --break-bumper-fill: var(--surface-danger);
}

/* Ink-flip — polarity switcher driven by --hover (0–1 written by JS).
   Interpolates from default to colored triplet as --hover rises. */
.ink-flip {
  --ink-display: color-mix(in oklch, var(--ink-default-display), var(--ink-colored-display) calc(var(--hover, 0) * 100%));
  --ink-body:    color-mix(in oklch, var(--ink-default-body),    var(--ink-colored-body)    calc(var(--hover, 0) * 100%));
  --ink-label:   color-mix(in oklch, var(--ink-default-label),   var(--ink-colored-label)   calc(var(--hover, 0) * 100%));
  color: var(--ink-body);
}


/* ── Section ─────────────────────────────────────────
   Every section gets --section-block top and bottom.
   First section overrides its top with --first-section-block-start. */

main > section               { padding-block: var(--section-block); position: relative; }
main > section:first-of-type { padding-block-start: var(--first-section-block-start); }


/* ── Contain ── width box, always co-classed with .flow */

.contain {
  max-inline-size: var(--container-max, 75rem);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 5vw, var(--main-gutter, var(--space-4)));
  min-width: 0;
}


/* ── Flow ── vertical rhythm, goes on .contain */

.flow           { --flow-space: var(--space-2); display: flex; flex-direction: column; gap: var(--flow-space); }
.flow > *       { margin: 0; min-inline-size: 0; }
.flow--tight    { --flow-space: var(--space-1); }
.flow--center   { align-items: center; text-align: center; }
.flow--start    { align-items: flex-start; text-align: left; }


/* ── Split — horizontal layouts ──────────────────────
   .split       2-col, --split takes "1fr 1fr" etc.
   .split-3     3-col, 1 → 2 → 3 at 768/1024
   .split-4     4-col, 1 → 2 → 4 at 768/1024
   .split-cards fluid flex-wrap fed by --card-min
   .split-prose measure-clamped reading column */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: center;
  text-align: center;
  --split-align: center;
}
.split > *       { min-width: 0; }
.split > .flow   { align-items: center; }

@media (min-width: 768px) {
  .split {
    grid-template-columns: var(--split, 1fr 1fr);
    text-align: left;
    --split-align: flex-start;
  }
  .split > .flow { align-items: flex-start; }
}

/* Split reverse — flips visual column order without changing source order */
.split--reverse     { direction: rtl; }
.split--reverse > * { direction: ltr; }


/* ── Split-rail — primary content plus fitted rail ─────
   Use for main-plus-rail sections where one side should size to a
   specific rail width and the other should take the remaining space.

   Set --rail to the fitted track you want:
   auto
   16rem
   minmax(220px, 280px)

   Default order is rail first, content second. Add .split-rail--end
   when the rail should sit on the right. */

.split-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: start;
}
.split-rail > * { min-width: 0; }

@media (min-width: 768px) {
  .split-rail {
    grid-template-columns: var(--rail, minmax(16rem, 22rem)) minmax(0, 1fr);
  }
  .split-rail.split-rail--end {
    grid-template-columns: minmax(0, 1fr) var(--rail, minmax(16rem, 22rem));
  }
}


/* ── Split-centerlock — centered middle track with symmetric side rails ──
   Use when the middle item must stay truly centered while the left and
   right items absorb the remaining space.

   Default track list is 1fr auto 1fr. Collapse to one column at 360px.
   Add section-level media queries when the section needs a different
   collapse point or custom small-screen rebalancing. */

.split-centerlock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
  align-items: center;
}
.split-centerlock > * { min-width: 0; }

@media (max-width: 360px) {
  .split-centerlock { grid-template-columns: 1fr; }
}


/* ── Split-3 — 3-col grid, 1 → 2 → 3 breakpoints ───── */

.split-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-3 > * { min-width: 0; }
@media (min-width: 768px)  { .split-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .split-3 { grid-template-columns: repeat(3, 1fr); } }


/* ── Split-4 — 4-col grid, 1 → 2 → 4 breakpoints ───── */

.split-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-4 > * { min-width: 0; }
@media (min-width: 768px)  { .split-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .split-4 { grid-template-columns: repeat(4, 1fr); } }


/* ── Split-cards ── fluid flex-wrap fed by --card-min */

.split-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--split-gap, var(--main-gutter, var(--space-4)));
}
.split-cards > * {
  flex: 1 1 var(--card-min, 17.5rem);
  min-inline-size: 0;
}


/* ── Split-prose ── measure-clamped reading column with owl-selector rhythm */

.split-prose         { inline-size: min(100%, var(--measure, 65ch)); }
.split-prose > * + * { margin-block-start: var(--space-3); }
.split-prose p       { margin-block-end: var(--space-2); }
.split-prose h2,
.split-prose h3,
.split-prose h4      { margin-block-start: var(--space-5); margin-block-end: var(--space-2); }
.split-prose ul,
.split-prose ol      { padding-inline-start: var(--space-5); margin-block-end: var(--space-3); }
.split-prose li + li { margin-block-start: var(--space-1); }
.split-prose a       { text-decoration: underline; text-underline-offset: 0.1em; }


/* ── Stack — per-child vertical rhythm ─────────────────────────
   Owl selector: every child except the first gets margin-block-start
   equal to --stack-space (default: var(--space-3)). Children opt into
   a different gap via role classes (.eyebrow/.title/.sub/etc) or the
   container wears a modifier (.stack--tight / .stack--loose). */

.stack                { --stack-space: var(--space-3); }
.stack > * + *        { margin-block-start: var(--stack-space); }

.stack--tight         { --stack-space: var(--space-2); }
.stack--loose         { --stack-space: var(--space-5); }

.stack .eyebrow       { --stack-space: 0; }
.stack .title         { --stack-space: var(--space-2); }
.stack .sub           { --stack-space: var(--space-3); }
.stack .lede          { --stack-space: var(--space-4); }
.stack .callout       { --stack-space: var(--space-5); }
.stack .closer        { --stack-space: var(--space-5); }


/* ── Scroll-driven entrance — .reveal-rise fades and rises on viewport entry */

@media (prefers-reduced-motion: no-preference) {
  .reveal-rise {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ── Breaks ─────────────────────────────────────────
   Every shape is y(x) = --break-amplitude × shape-multiplier.
   One site knob drives every break; shapes calibrate their own weight.

   Multipliers: flat=0, slope=1, arc=2, dome=2, bumper=0.8 */


.break--flat { /* flat edge, no shape */ }


/* Slopes — linear ramps. Negative margin bleeds the next section
   into the slope; matching padding preserves content breathing room. */

.break--slope-left,
.break--slope-right {
  --_amp: calc(var(--break-amplitude, 3) * 1vw);
  margin-block-end: calc(-1 * var(--_amp));
  padding-block-end: calc(var(--section-block, var(--space-7)) + var(--_amp));
}

.break--slope-left {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_amp)), 0 100%);
}

.break--slope-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--_amp)));
}


/* ── Arc — half-sine curve sitting below the section ── */

.break--arc {
  position: relative;
}
.break--arc::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  --_amp: calc(var(--break-amplitude, 3) * 2vw);
  block-size: var(--_amp);
  inset-block-end: calc(-1 * var(--_amp));
  background-color: var(--break-arc-fill, currentColor);
  pointer-events: none;
  z-index: 3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 Q50,100 100,0 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 Q50,100 100,0 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}


/* ── Dome — arc flipped, sitting on top of the section ── */

.break--dome {
  --_amp: calc(var(--break-amplitude, 3) * 2vw);
  position: relative;
  z-index: 2;
  margin-block-start: calc(-0.5 * var(--_amp));
  padding-block-start: calc(var(--_amp) + var(--section-block, var(--space-7)));
  border-start-start-radius: 50% var(--_amp);
  border-start-end-radius:   50% var(--_amp);
  overflow: clip;
}


/* Bumper — repeating sine wave. Amplitude = crest height,
   wavelength = horizontal period. Calibrated to ~24px / ~120px at amp=3. */

.break--bumper {
  --_amp:  calc(var(--break-amplitude, 3) * 0.5vw);
  --_wave: calc(var(--break-amplitude, 3) * 2.5vw);
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.break--bumper::before,
.break--bumper::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: var(--_amp);
  background-color: var(--break-bumper-fill, currentColor);
  pointer-events: none;
  z-index: 3;
}
.break--bumper::before {
  inset-block-start: calc(-1 * var(--_amp));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V12Q15 0 30 12T60 12T90 12T120 12V24Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V12Q15 0 30 12T60 12T90 12T120 12V24Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
}
.break--bumper::after {
  inset-block-end: calc(-1 * var(--_amp));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0V12Q15 24 30 12T60 12T90 12T120 12V0Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0V12Q15 24 30 12T60 12T90 12T120 12V0Z'/%3E%3C/svg%3E") repeat-x center / var(--_wave) 100%;
}

/* ── Buttons ─────────────────────────────────────────────
   Variants set background / color / border-color directly.
   Effect modifiers (.btn--3d/--panel/--hover-fill/--spotlight)
   are pure CSS, driven by currentColor. */


/* ── Base ─────────────────────────────────────────────── */

.btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  font-family: var(--btn-font, var(--font-label));
  font-size: var(--btn-size, var(--text-base));
  font-weight: var(--btn-weight, var(--weight-heavy));
  letter-spacing: var(--btn-spacing, var(--tracking-label));

  padding: var(--btn-pad-y, 0.75em) var(--btn-pad-x, 1.25em);
  gap: var(--btn-gap, 0.5em);
  border-radius: var(--btn-radius, var(--radius-md));
  border: 1px solid transparent;

  transition: background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out),
              transform var(--anim-mid) var(--ease-out);
}

.btn:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 50%, transparent);
}


/* ── Sizes ────────────────────────────────────────────── */

.btn--sm {
  --btn-size: var(--text-sm);
  --btn-pad-y: 0.6em;
  --btn-pad-x: 1em;
}

.btn--nav {
  --btn-size: var(--nav-btn-size, var(--text-sm));
  --btn-pad-y: var(--nav-btn-pad-y, 0.68em);
  --btn-pad-x: var(--nav-btn-pad-x, 1.08em);
}

.btn--lg {
  --btn-size: var(--text-xl);
  --btn-pad-y: 0.75em;
  --btn-pad-x: 1.35em;
}

.btn--full-width { display: flex; width: 100%; }

/* Explicit opt-out of site's --radius (for sites that default to pill/rounded) */
.btn--squared { --btn-radius: 0; }


/* ── Variants ───────────────────────────────────────── */
/* --_btn-bg is an internal ref for effect modifiers (3d/panel/hover-fill)
   to derive shadow/fill colors from the variant's background. */

.btn--primary   { background: var(--surface-accent); color: var(--ink-accent-display);  border-color: var(--surface-accent); --_btn-bg: var(--surface-accent); }
.btn--secondary { background: var(--surface);        color: var(--ink-default-display); border-color: var(--surface);        --_btn-bg: var(--surface); }
.btn--ghost     { background: transparent;           color: var(--ink-display);         border-color: var(--border-strong);  --_btn-bg: var(--ink-display); }

.btn--danger        { background: var(--surface-danger); color: var(--ink-danger-display); border-color: var(--surface-danger); --_btn-bg: var(--surface-danger); }
.btn--danger-border { background: transparent;           color: var(--surface-danger);     border-color: var(--surface-danger); --_btn-bg: var(--surface-danger); }
.btn--danger-ghost  { background: transparent;           color: var(--surface-danger);     border-color: transparent;           --_btn-bg: var(--surface-danger); }


/* ── Effect Modifiers ───────────────────────────────── */


/* 3D isometric lift — face lifts on hover, shadow stays anchored */
.btn--3d {
  --_btn-3d-shadow: oklch(from var(--_btn-bg, var(--accent)) calc(l - 0.15) c h);
  position: relative;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--_btn-3d-shadow);
  transition: transform var(--anim-mid) var(--ease-out),
              box-shadow var(--anim-mid) var(--ease-out),
              background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out);
}
@media (hover: hover) {
  .btn--3d:hover {
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 0 var(--_btn-3d-shadow);
  }
}
.btn--3d:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--_btn-3d-shadow);
}


/* Panel plunge — face presses into its own shadow on :active */
.btn--panel {
  --_btn-panel-offset: 6px;
  --_btn-panel-shadow: oklch(from var(--_btn-bg, var(--accent)) calc(l * 0.5) c h);
  box-shadow: var(--_btn-panel-offset) var(--_btn-panel-offset) 0 0 var(--_btn-panel-shadow);
  transition: transform var(--anim-fast) var(--ease-out),
              box-shadow var(--anim-fast) var(--ease-out),
              background-color var(--anim-mid) var(--ease-out),
              color var(--anim-mid) var(--ease-out),
              border-color var(--anim-mid) var(--ease-out);
}
.btn--panel:active {
  transform: translate(var(--_btn-panel-offset), var(--_btn-panel-offset));
  box-shadow: 0 0 0 0 var(--_btn-panel-shadow);
}


/* Hover fill — color layer sweeps in from the left */
.btn--hover-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--hover-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(from var(--_btn-bg, var(--accent)) calc(l + 0.05) c h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-mid) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn--hover-fill:hover::before {
  transform: scaleX(1);
}


/* Cursor spotlight — radial glow tracks --pointer-x/--pointer-y
   (written by pointer-track controller). -1000px start = hidden. */
.btn--spotlight {
  position: relative;
  overflow: hidden;
}
.btn--spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    8em circle at var(--pointer-x, -1000px) var(--pointer-y, -1000px),
    oklch(1 0 0 / 0.15),
    transparent
  );
  opacity: 0;
  transition: opacity var(--anim-mid) var(--ease-out);
  pointer-events: none;
}
.btn--spotlight:hover::after {
  opacity: 1;
}


/* ── Group (Segmented Control) ────────────────────────── */

.button-group {
  display: inline-flex;
  align-items: stretch;
  background: var(--shade);
  border-radius: var(--radius-md);
  gap: 2px;
  padding: 2px;
  width: fit-content;
}
.button-group .btn { border: none; box-shadow: none; }
.button-group .btn:not(.active) { background: transparent; }


/* ── Tag (Badge for NEW / BETA / count) ──────────────── */

.btn__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.4em;
  margin-inline-start: 0.5em;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 0.75em;
  font-weight: var(--weight-semi);
  opacity: 0.7;
}

/* ── Card ───────────────────────────────────────────
   Flex-column container with locked header/footer and
   body that grows — makes .split-cards align content to
   the bottom when cards wrap to equal height. */

.card {
  display: flex;
  flex-direction: column;
  position: relative;

  background: var(--surface);
  color: var(--ink-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  gap: var(--space-2);

  transition: transform var(--anim-fast) var(--ease-out),
              box-shadow var(--anim-fast) var(--ease-out),
              border-color var(--anim-fast) var(--ease-out);
}

.card__header, .card__footer { flex: none; }
.card__body { flex: 1; min-inline-size: 0; min-block-size: 0; }

a.card { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  a.card:hover { transform: translateY(-2px); }
}


/* Glass — transparent fill + backdrop blur */
.card--glass {
  background: transparent;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: oklch(from var(--ink-display) l c h / 0.1);
}

/* ── Carousel (Platform Primitive) ─────────────────────── */

.carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
}

.carousel__panel {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* ── Navigation (Dots) ── */
.carousel__nav-wrap {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
}

.carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--carousel-gap, var(--space-2));
  padding: var(--space-2) var(--space-4);
  background: oklch(from var(--ink-display) l c h / 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(from var(--ink-display) l c h / 0.1);
  border-radius: 999px;
}

.carousel__dot {
  width: var(--carousel-dot-size, 10px);
  height: var(--carousel-dot-size, 10px);
  border-radius: 999px;
  background: var(--carousel-dot-bg, oklch(from var(--ink-display) l c h / 0.2));
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: width var(--anim-slow) var(--ease-out), background var(--anim-mid) var(--ease-out), scale var(--anim-mid) var(--ease-out), opacity var(--anim-mid) var(--ease-out);
}

.carousel__dot[aria-selected="true"] {
  width: var(--carousel-pill-width, 32px);
  background: var(--carousel-dot-active, var(--accent, var(--ink-display)));
}

/* Progress bar — pure CSS animation, no JS */
.carousel__dot[aria-selected="true"][data-state="playing"]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--carousel-progress-fill, oklch(1 0 0 / 0.3));
  border-radius: inherit;
  animation: progress-fill linear forwards;
  animation-duration: var(--autoplay-interval, 6000ms);
}

.carousel:hover .carousel__dot[data-state="playing"]::after {
  animation-play-state: paused;
}

/* Edge dots shrink for depth illusion */
.carousel__dot[data-trunc="2"] { scale: 0.7; opacity: 0.5; }
.carousel__dot[data-trunc="3"] { scale: 0.4; opacity: 0.2; }

/* ── Arrows ── */
.carousel__arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(from var(--ink-display) l c h / 0.05);
  color: var(--ink-display);
  border: none; border-radius: 50%;
  cursor: pointer;
  transition: background var(--anim-mid) var(--ease-out), scale var(--anim-mid) var(--ease-out);
}
.carousel__arrow:hover { background: oklch(from var(--ink-display) l c h / 0.1); scale: 1.05; }

.lxe-hero__media,
.lxe-hero__poster,
.lxe-hero__poster img,
.lxe-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lxe-hero__media {
  z-index: 0;
}

.lxe-hero__poster,
.lxe-hero__poster img,
.lxe-hero__video {
  object-fit: cover;
}

.lxe-hero__poster img {
  display: block;
}

.lxe-hero__video {
  z-index: 0;
  opacity: 0;
  transition: opacity var(--anim-slow) var(--ease-out);
}

.lxe-hero__video.is-playing {
  opacity: 1;
}

/* ── Dialog ─────────────────────────────────────────── */

dialog { border: none; padding: 0; background: transparent; max-width: none; max-height: none; overflow: hidden; }
html:has(dialog[open]) { overflow: hidden; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: var(--glass-backdrop); backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); }

.dialog-panel {
  --dialog-edge-reserve: calc(var(--space-4) + var(--space-3));
  padding: 0;
  border-radius: var(--dialog-radius, var(--radius-xl));
  background: var(--surface);
  color: var(--ink-default-body);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--dialog-shadow, var(--shadow));

  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  animation: pop-in-spring var(--anim-slow) var(--ease-spring);
}

.dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--dialog-edge-reserve);
  z-index: 10;
  width: calc(var(--1) * 6);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink-display);
  cursor: pointer;
  transition: transform var(--anim-mid) var(--ease-spring), background-color var(--anim-mid) var(--ease-out), border-color var(--anim-mid) var(--ease-out);
}
.dialog__close svg { width: 50%; height: 50%; }
@media (hover: hover) {
  .dialog__close:hover { transform: scale(1.1); background-color: var(--shade); border-color: var(--ink-display); }
}
.dialog__close:active { transform: scale(0.9); }
.dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dialog-body { padding: var(--space-6); padding-right: calc(var(--space-6) + var(--dialog-edge-reserve)); flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.dialog-header { padding: 0 0 var(--space-3) 0; margin-bottom: var(--space-3); }
.dialog-title { font-family: var(--font-display, var(--font-body)); font-size: var(--text-2xl); font-weight: var(--weight-label); margin: 0; padding-right: calc(var(--1) * 11); }
.dialog-desc { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--ink-body); }
.dialog-footer { padding: var(--space-3) 0 0 0; margin-top: var(--space-5); }

.dialog-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-display); margin-bottom: var(--space-1); }
.dialog-input, .dialog-textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-display); background: var(--tint); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: calc(var(--1) * 1.75) var(--space-3); transition: background var(--anim-mid), border-color var(--anim-mid), box-shadow var(--anim-mid); }
.dialog-input:focus, .dialog-textarea:focus { outline: none; background: var(--surface); border-color: var(--ink-display); box-shadow: var(--shadow); }
.dialog-textarea { resize: vertical; }
.dialog-submit { width: 100%; justify-content: center; margin-top: var(--space-3); padding: var(--space-3); font-size: var(--text-base); }

/* ── Positions ─────────────────────────────────────── */

dialog.modal[open] {
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  display: grid;
  place-items: center;
}
dialog.modal[open] .dialog-panel {
  width: min(calc(100vw - var(--space-4) * 2), 42rem);
  max-height: 90dvh;
}



/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .dialog-panel { --dialog-edge-reserve: var(--space-4); }
  .dialog-body { padding: var(--space-5); padding-right: calc(var(--space-5) + var(--space-2)); }
  .dialog__close { right: var(--space-4); }
  .dialog-title { font-size: var(--text-xl); padding-right: calc(var(--1) * 8); }
  .dialog-label { font-size: var(--text-sm); }
  .dialog-input, .dialog-textarea { font-size: max(var(--text-sm), 16px); }
}

/* ── Dropdown ──────────────────────────────────────── */

.dropdown { position: relative; }

.dropdown summary {
  display: flex;
  align-items: center;
  gap: calc(var(--1) * 0.5);
  cursor: pointer;
  list-style: none;
  outline: none;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::marker { content: ""; }

.dropdown[open] .dropdown__chevron {
  transform: rotate(180deg);
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  inline-size: var(--dropdown-width, 16rem);

  background: var(--surface-colored);
  color: var(--ink-colored-body);
  border: 1px solid oklch(from var(--ink-colored-display) l c h / 0.1);

  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);

  border-radius: var(--radius-md);
  padding: calc(var(--1) * 0.5) 0;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.12);
  z-index: 1020;

  animation: slide-down-fade var(--anim-mid) var(--ease-out);
  transform-origin: top right;
}

.dropdown__item {
  display: block;
  width: 100%;
  padding: calc(var(--1) * 0.75) calc(var(--1) * 1.5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-colored-body);
  text-decoration: none;
  transition: background-color var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown__item--wraps {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.dropdown__item:hover {
  color: var(--ink-colored-display);
  background: oklch(from var(--ink-colored-display) l c h / 0.05);
}

.dropdown__item.is-active {
  color: var(--accent);
  font-weight: var(--weight-heavy);
}

/* ── Form States ───────────────────────────────── */
form.form--success > *:not(.form-success-message) {
  display: none !important;
}

.form-success-message {
  display: none;
  opacity: 0;
  padding: 3rem 2rem;
  background: var(--surface-raised, rgba(0,0,0,0.03));
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 12px;
  text-align: center;
  transition: opacity 0.4s ease;
}

form.form--success .form-success-message {
  display: block;
  opacity: 1;
  animation: form-success-fade-in 0.5s ease forwards;
}

.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--ink-accent-display);
  margin-bottom: 1rem;
}

.form-success-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-display, inherit);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.01em;
}

.form-success-body {
  font-size: 1rem;
  color: var(--ink-body, inherit);
  opacity: 0.8;
  margin: 0;
}

@keyframes form-success-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-error-message {
  display: none;
  color: oklch(62% 0.17 25);
  margin-bottom: 1rem;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.75rem;
  background: oklch(62% 0.17 25 / 0.1);
  border-radius: 6px;
}

form.form--error .form-error-message {
  display: block;
}

/* ── Notice (Form Feedback) ────────────────────────── */
output.notice {
  display: block;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  border-radius: var(--radius-md);
  animation: fade-in var(--anim-mid) var(--ease-out);
}

.notice--success {
  background: oklch(from var(--accent) l c h / 0.08);
  color: var(--ink-display);
  border: 1px solid oklch(from var(--accent) l c h / 0.15);
}

.notice--error {
  background: oklch(from var(--surface-danger) l c h / 0.08);
  color: var(--surface-danger);
  border: 1px solid oklch(from var(--surface-danger) l c h / 0.15);
}

/* ── Tags (Inline Pills & Labels) ────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  
  /* Geometry */
  font-family: var(--tag-font, inherit);
  font-size: var(--tag-size, var(--text-sm));
  font-weight: var(--tag-weight, var(--weight-label, 600));
  letter-spacing: var(--tag-spacing, 0.05em);
  text-transform: var(--tag-case, uppercase);
  line-height: 1;
  padding: var(--tag-pad-y, 0.4em) var(--tag-pad-x, 0.8em);
  border-radius: var(--tag-radius, 999px); /* Default pill shape */
  
  /* Paint */
  background: var(--tag-bg, oklch(from var(--ink-display) l c h / 0.08));
  color: var(--tag-ink, var(--ink-display));
  border: 1px solid var(--tag-border, transparent);
}

/* ── Modifiers ── */
.tag--primary {
  --tag-bg: oklch(from var(--accent) l c h / 0.15);
  --tag-ink: var(--accent);
  --tag-border: oklch(from var(--accent) l c h / 0.2);
}

.tag--danger {
  --tag-bg: oklch(from var(--surface-danger) l c h / 0.15);
  --tag-ink: var(--surface-danger);
}

.tag--ghost {
  --tag-bg: transparent;
  --tag-border: oklch(from var(--ink-display) l c h / 0.2);
}
/* ── Footer ─────────────────────────────────────────── */

.footer {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;

  padding-block: clamp(var(--space-5), 5vw, var(--space-6));
  background: var(--footer-surface-fill, var(--surface));
  color: var(--footer-ink, var(--ink-display));

  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.15), inset 0 1px 0 oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.05);

  --footer-field-fill: oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.03);
  --footer-field-fill-soft: oklch(from var(--footer-ink, var(--ink-display)) l c h / 0.015);
}

/* ── Main grid ── */
.footer__main { max-inline-size: var(--chrome-max, var(--container-max, 1200px)); width: 100%; margin-inline: auto; padding-inline: clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4)))); display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: clamp(var(--space-5), 5vw, var(--space-8)); align-items: start; }

/* ── Brand ── */
.footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__brand-lockup { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
.footer__brand-text { display: flex; flex-direction: column; }
.footer__logo { display: block; width: var(--footer-logo-width, auto); height: var(--footer-logo-height, 48px); object-fit: contain; border-radius: var(--footer-logo-radius, 0); background-color: var(--footer-logo-bg, transparent); border: var(--footer-logo-border, none); padding: var(--footer-logo-padding, 0); box-shadow: var(--footer-logo-shadow, none); filter: var(--footer-logo-filter, none); }
.footer__brand-name { margin: 0; font-family: var(--font-label, var(--font-display, var(--font-body))); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label, -0.01em); line-height: 1.2; }
.footer__brand-sub { font-size: var(--text-sm); color: var(--ink-label); }
.footer__desc { margin: 0; max-inline-size: 36ch; font-size: var(--text-base); line-height: 1.6; color: var(--ink-body); }
.footer__kicker { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-heavy); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-label); }

/* ── Contact ── */
.footer__contact { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__contact-group { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__contact-items { display: flex; flex-direction: column; gap: 0; }
.footer__contact-line { font-size: var(--text-sm); line-height: 1.4; color: var(--ink-body); text-decoration: none; }
.footer__contact-line--quiet { color: var(--ink-body); max-inline-size: 24ch; line-height: 1.5; margin-bottom: var(--space-1); }
.footer__contact-line--strong { display: block; font-family: var(--font-label, var(--font-display, var(--font-body))); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); font-weight: var(--weight-semi); letter-spacing: var(--tracking-label, -0.01em); color: var(--footer-accent, var(--ink-display)); line-height: 1.2; max-inline-size: 24ch; text-wrap: balance; white-space: pre-line; }
.footer__contact a:hover, .footer__link:hover, .footer__review:hover { color: var(--footer-link-hover, var(--ink-display)); transition: color 0.3s ease; }
.footer__legal-link:hover { color: var(--footer-legal-hover, var(--ink-display)); transition: color 0.3s ease; }

/* ── Review ── */
.footer__review { display: inline-flex; align-items: center; gap: var(--space-2); inline-size: fit-content; margin-top: var(--space-1); padding: calc(var(--1) * 0.75) calc(var(--1) * 1.25); border-radius: 6px; background: var(--footer-field-fill-soft); color: var(--ink-body); text-decoration: none; box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.1), inset 0 0 0 1px oklch(from var(--ink-display) l c h / 0.04); }
.footer__review:hover { background: var(--footer-field-fill); transform: translateY(-2px); color: var(--ink-display); box-shadow: inset 0 1px 1px oklch(1 1 1 / 0.15), inset 0 0 0 1px oklch(from var(--ink-display) l c h / 0.06), 0 6px 12px -2px oklch(from var(--ink-display) l c h / 0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.footer__review-stars { font-size: var(--text-sm); letter-spacing: 0.1em; color: var(--footer-stars, var(--ink-display)); }
.footer__review-text { font-size: var(--text-sm); font-weight: var(--weight-semi); }

/* ── Columns ── */
.footer__nav { display: grid; grid-template-columns: repeat(var(--footer-link-cols, 3), minmax(0, 1fr)); column-gap: clamp(var(--space-4), 4vw, var(--space-6)); row-gap: var(--space-6); align-items: start; margin-left: auto; width: 100%; }
.footer__nav-group { display: flex; flex-direction: column; gap: calc(var(--1) * 0.5); min-inline-size: 0; }
.footer__group-header { margin: 0; display: flex; align-items: center; justify-content: space-between; padding-block: 2px; }
.footer__group-header span { font-size: var(--text-sm); font-weight: var(--weight-heavy); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-label); }
.footer__nav-links { display: flex; flex-direction: column; gap: calc(var(--1) * 0.25); }
.footer__link { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: calc(var(--1) * 0.5); font-family: var(--footer-link-font, var(--font-label)); font-size: var(--footer-link-size, var(--text-base)); font-weight: var(--footer-link-weight, normal); letter-spacing: var(--footer-link-spacing, var(--tracking-label)); text-transform: var(--footer-link-case, none); line-height: 1.2; color: var(--ink-body); text-decoration: none; transform-origin: left center; touch-action: manipulation; }
.footer__link:hover { color: var(--footer-link-hover, var(--ink-display)); transform: translateX(3px); transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Legal ── */
.footer__legal { max-inline-size: var(--chrome-max, var(--container-max, 75rem)); width: 100%; margin-inline: auto; padding-inline: clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4)))); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: clamp(var(--space-5), 5vw, var(--space-7)); padding-top: var(--space-4); border-top: 1px solid oklch(from var(--ink-display) l c h / 0.04); }
.footer__legal-group { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.footer__legal-group--left { justify-content: flex-start; }
.footer__legal-group--center { justify-content: center; }
.footer__legal-group--right { justify-content: flex-end; }
.footer__copy, .footer__legal-links { margin: 0; font-size: var(--text-sm); line-height: 1.3; color: var(--ink-label); }
.footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.footer__legal-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; color: inherit; text-decoration: none; transition: color 0.3s ease; font-weight: var(--weight-semi); touch-action: manipulation; }
.footer__legal-link:hover { color: var(--ink-display); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .footer__main { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__nav { margin-left: 0; }
}

@media (max-width: 540px) {
  .footer__nav { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); column-gap: var(--space-3); }
  .footer__legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 0 var(--space-3); }
}

@media (max-width: 360px) {
  .footer__nav { grid-template-columns: 1fr; }
  .footer__legal { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
  .footer__legal-group--left, .footer__legal-group--center, .footer__legal-group--right { justify-content: center; }
}

/* ── Hamburger ── */
.nav__hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.nav__hamburger-svg { width: 20px; height: 20px; overflow: visible; }
.nav__hamburger-line { 
  fill: none; 
  stroke: var(--hamburger-color, var(--ink)); 
  stroke-width: 2px; 
  stroke-linecap: round; 
  transition: stroke 0.24s, opacity 0.24s; 
}
.nav__hamburger-line.line--bot { stroke: var(--hamburger-color-bottom, var(--hamburger-color, var(--ink))); }

.nav__hamburger[aria-expanded="true"] .line--top { stroke: var(--hamburger-color-active, var(--hamburger-color, var(--ink))); }
.nav__hamburger[aria-expanded="true"] .line--bot { stroke: var(--hamburger-color-active, var(--hamburger-color, var(--ink))); }

@media (max-width: 899px) {
  .nav__hamburger { display: flex; }
}
/* ── Language Dropdown ── */
.nav__actions .nav__lang-dropdown { --dropdown-width: 4rem; font-size: var(--text-sm); }
.nav__actions .nav__lang-trigger  { color: var(--ink-colored-display); font-size: 1em; font-weight: var(--weight-semi); letter-spacing: 0.04em; }
.nav__lang-icon     { width: 14px; height: 14px; flex-shrink: 0; }
.nav__actions .nav__lang-chevron  { font-size: 1em; opacity: 0.7; transition: transform 0.2s ease; }

/* Menu panel — dark polarity island regardless of nav polarity. */
.nav__lang-menu {
  background: var(--surface-colored);
  color: var(--ink-colored-body);
  border-color: color-mix(in oklch, var(--ink-colored-display) 10%, transparent);
}

.nav__lang-menu .dropdown__item {
  color: var(--ink-colored-body);
}

.nav__lang-menu .dropdown__item:hover {
  color: var(--ink-colored-display);
  background: oklch(from var(--ink-colored-display) l c h / 0.05);
}

.nav__lang-menu .dropdown__item.is-active {
  color: var(--ink-colored-display);
  font-weight: var(--weight-heavy);
}

/* ── Mobile panel (Dropdown Callout) ──
   `.nav-toggle` controller toggles `.nav--open` on the nav element;
   CSS transitions `--open-close` (0 → 1) via @property registration
   over 0.4s at the spring ease curve. Every reader (glass blur,
   opacity, transform) recomputes as the variable interpolates. */
.nav__mobile {
  --surface: var(--lxe-light-steel);
  --open-close: 0;
  --glass-progress: var(--open-close);
  --_glass-fill: pow(var(--glass-progress), var(--glass-fill-curve));
  --_glass-blur: pow(var(--glass-progress), var(--glass-blur-curve));
  --_glass-rim: pow(var(--glass-progress), var(--glass-rim-curve));
  --_glass-shadow: pow(var(--glass-progress), var(--glass-shadow-curve));
  --_mobile-glass-alpha-max: 99%;
  --_mobile-glass-border-alpha-max: 0.16;
  --_mobile-glass-shadow-alpha-max: 0.14;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: var(--body-gutter, var(--space-5));
  right: var(--body-gutter, var(--space-5));
  width: auto;
  max-width: 420px;
  margin-inline: auto;

  /* Glass Callout — uses --surface (installed above) which holds the
     same chrome color the nav uses, so the menu matches it. */
  background: color-mix(in oklch, var(--surface, #fff) calc(var(--_mobile-glass-alpha-max) * var(--_glass-fill)), transparent);
  color: var(--ink-display, #000);
  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  border: 1px solid color-mix(in oklch, var(--ink-display, #000) calc(var(--_mobile-glass-border-alpha-max) * var(--_glass-rim) * 100%), transparent);
  box-shadow: 0 calc(var(--glass-shadow-y-max) * 2 * var(--_glass-shadow)) calc(var(--glass-shadow-blur-max) * 2.2 * var(--_glass-shadow)) oklch(0 0 0 / calc(var(--_mobile-glass-shadow-alpha-max) * var(--_glass-shadow)));
  border-radius: var(--radius-xl);

  box-sizing: border-box;
  padding: var(--space-4) var(--space-4) var(--space-3);
  max-block-size: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1020;

  transform-origin: top center;
  opacity: clamp(0, var(--open-close), 1);
  visibility: hidden;
  transform: translateY(calc((1 - var(--open-close)) * -10px)) scale(calc(0.985 + (var(--open-close) * 0.015)));
  pointer-events: none;
  transition: --open-close 0.4s var(--ease-spring),
              visibility 0s linear 0.4s;
}

/* Open state — `.nav-toggle` controller adds `.nav--open` on click. */
.nav--open .nav__mobile {
  --open-close: 1;
  visibility: visible;
  pointer-events: auto;
  transition: --open-close 0.4s var(--ease-spring),
              visibility 0s linear 0s;
}

.nav__mobile ul { list-style: none; padding: 0; margin: 0; }
.nav__mobile > ul { padding-top: 0; }
.nav__mobile li { text-align: center; }

.nav__mobile li > a,
.nav__mobile summary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  font-family: var(--nav-mobile-font, var(--font-label));
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--nav-mobile-spacing, -0.01em);
  text-transform: var(--nav-mobile-case, none);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav__mobile li > a:hover,
.nav__mobile summary:hover { 
  opacity: 0.7;
}

.nav__mobile details > summary { position: relative; }
.nav__mobile summary::-webkit-details-marker { display: none; }
.nav__mobile summary::marker { content: ""; }
.nav__mobile summary::after {
  content: "+";
  color: inherit;
  opacity: 0.5;
  font-size: var(--text-2xl);
  font-weight: 300;
  position: static;
  margin-left: var(--space-2);
  line-height: 0.8;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__mobile details[open] > summary::after { transform: rotate(45deg); opacity: 1; }
.nav__mobile details > ul { padding: 0 0 var(--space-3) var(--space-4); display: none; }
.nav__mobile details[open] > ul { display: block; }
.nav__mobile details > ul a {
  font-family: var(--nav-mobile-sub-font, var(--font-body));
  font-size: var(--text-base);
  color: var(--ink-body);
  padding: var(--space-2) 0;
  text-align: left;
  transition: color 0.2s ease;
}
.nav__mobile details > ul a:hover { 
  color: var(--ink-display, #000); 
}

.nav__mobile-locales { display: flex; flex-direction: column; align-items: center; gap: calc(var(--1) * 0.5); margin-top: var(--space-4); padding: var(--space-4) 0 var(--space-2); border-top: 1px solid color-mix(in oklch, var(--ink-display, #000) 10%, transparent); }
.nav__mobile-locales-label { font-size: var(--text-sm); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-body); }
.nav__mobile-locales-list { display: flex; gap: var(--space-3); }
.nav__mobile-locale-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; color: var(--ink-body); text-decoration: none; font-size: var(--text-sm); text-transform: uppercase; font-weight: var(--weight-label); letter-spacing: 0.06em; transition: color 0.2s ease; touch-action: manipulation; }
.nav__mobile-locale-link + .nav__mobile-locale-link { border-left: 1px solid color-mix(in oklch, var(--ink-display, #000) 20%, transparent); padding-left: var(--space-3);  }
.nav__mobile-locale-link.is-active, .nav__mobile-locale-link:hover { color: var(--ink-display, #000); }

.nav__mobile-phone { display: block; width: 100%; font-family: var(--font-label); font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: 1.2; color: inherit; text-decoration: none; text-align: center; margin-top: var(--space-3); padding: var(--space-4) 0 var(--space-1); border-top: 1px solid color-mix(in oklch, var(--ink-display, #000) 10%, transparent); transition: opacity 0.2s ease; }
.nav__mobile-phone:hover { opacity: 0.7; }

.nav__mobile-cta { display: flex; width: 100%; justify-content: center; padding: var(--space-4) 0 0; }
.nav__mobile-cta .btn { 
  width: 100%; 
  justify-content: center; 
  --btn-size: var(--text-base); 
  --btn-pad-y: 0.85em; 
}

/* ── Nav ────────────────────────────────────────────
   Scroll-driven glass: transparent at top, fades to full
   glass backdrop at ~84px scroll. Tuned by the glass profile. */


/* ── Nav backdrop strip ─────────────────────────────
   Short surface-colored section placed at the top of pages
   whose first content section is not dark. Gives the glass
   nav contrast at scroll=0 without coloring the page. Rendered
   via app/views/sites/liftxergo/application/_nav_backdrop.html.erb.
   See bugs_encountered: nav-backdrop-when-first-section-not-colored.md */

main > section.nav-backdrop {
  padding: 0;
  min-block-size: var(--site-nav-height);
}



:root {
  --glass-alpha-max: 90%;
  --glass-blur-max: 0px;
  --glass-saturate-max: 1;
  --glass-border-alpha-max: 0.1;
  --glass-shadow-y-max: 4px;
  --glass-shadow-blur-max: 12px;
  --glass-shadow-alpha-max: 0.05;
  --glass-fill-curve: 1.35;
  --glass-blur-curve: 1.1;
  --glass-rim-curve: 0.72;
  --glass-shadow-curve: 1.9;
}

.nav {
  --nav-brand-gap: var(--space-2);
  --nav-brand-mark-size: 40px;
  --nav-brand-name-size: var(--text-sm);
  --nav-brand-sub-size: var(--text-sm);
  --nav-links-gap: var(--space-3);
  --nav-actions-gap: var(--space-3);
  --nav-link-size: var(--text-base);
  --nav-link-weight: var(--weight-semi);
  --nav-link-spacing: var(--tracking-label);
  --nav-link-hover: var(--ink-display);
  --nav-btn-size: var(--text-sm);
  --nav-btn-pad-y: 0.68em;
  --nav-btn-pad-x: 1.08em;
  --glass-progress: var(--scroll);
  --_glass-fill: pow(var(--glass-progress), var(--glass-fill-curve));
  --_glass-blur: pow(var(--glass-progress), var(--glass-blur-curve));
  --_glass-rim: pow(var(--glass-progress), var(--glass-rim-curve));
  --_glass-shadow: pow(var(--glass-progress), var(--glass-shadow-curve));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  isolation: isolate;
  color: var(--ink-display);
}

.nav {
  animation: nav-glass linear both;
  animation-timeline: scroll();
  animation-range: 0px 64px;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: color-mix(in oklch, var(--canvas, var(--surface)) calc(var(--glass-alpha-max) * var(--_glass-fill)), transparent);
  backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-max) * var(--_glass-blur))) saturate(calc(1 + (var(--glass-saturate-max) - 1) * var(--_glass-fill)));
  border-bottom: 1px solid color-mix(in oklch, var(--ink-display) calc(var(--glass-border-alpha-max) * var(--_glass-rim) * 100%), transparent);
  box-shadow: 0 calc(var(--glass-shadow-y-max) * var(--_glass-shadow)) calc(var(--glass-shadow-blur-max) * var(--_glass-shadow)) oklch(0 0 0 / calc(var(--glass-shadow-alpha-max) * var(--_glass-shadow)));
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* Utility bar — thin row above main nav for the language switcher.
   Lives outside .nav__main so the brand row stays clean and Google's
   injected translate banner has somewhere to land without overlapping
   nav links/CTA. */
.nav__utility {
  box-sizing: border-box;
}

.nav__utility-inner {
  box-sizing: border-box;
  max-inline-size: var(--chrome-max, var(--container-max));
  width: 100%;
  margin-inline: auto;
  block-size: 28px;
  padding: 0 clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4))));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  overflow: visible;
}

/* Language switcher — collapsed: one EN button. Expanded: inline strip.
   Click EN to expand; click any language to navigate. Driven by the
   shared toggle-class controller.

   Wrapper is position:relative so the expanded strip can overlay the
   trigger without changing the utility bar's own height (no layout
   shift, no pushing the nav down). */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: var(--weight-semi);
  line-height: 1;
}

.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  gap: calc(var(--1) * 0.2);
  background: none;
  border: none;
  padding: 0 calc(var(--1) * 0.5);
  margin: 0;
  color: oklch(from var(--ink-display) l c h / 0.7);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}
.lang-switch__trigger:hover { color: var(--ink-display); }

.lang-switch__chevron { font-size: 0.85em; opacity: 0.7; }

/* Globe icon paired with the native locale name in the trigger. */
.lang-switch__globe {
  flex-shrink: 0;
  opacity: 0.8;
}

.lang-switch__current {
  font-weight: var(--weight-base);
}

/* Strip overlays the trigger so opening adds zero height. Anchored to
   the right edge so it grows leftward into the empty utility bar. */
.lang-switch__strip {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  gap: calc(var(--1) * 0.5);
  white-space: nowrap;
}

.lang-switch--static .lang-switch__strip {
  display: inline-flex;
  position: static;
  transform: none;
  align-items: center;
}

.lang-switch--static .lang-switch__trigger {
  display: none;
}

.lang-switch.is-open .lang-switch__trigger { visibility: hidden; }
.lang-switch.is-open .lang-switch__strip   { display: inline-flex; align-items: center; }

.lang-switch__link {
  color: oklch(from var(--ink-display) l c h / 0.6);
  text-decoration: none;
  padding-inline: calc(var(--1) * 0.4);
  transition: color var(--anim-fast) var(--ease-out);
}
.lang-switch__link + .lang-switch__link {
  border-inline-start: 1px solid oklch(from var(--ink-display) l c h / 0.2);
}
.lang-switch__link:hover     { color: var(--ink-display); }
.lang-switch__link.is-active { color: var(--ink-display); }

.lang-switch__close {
  background: none;
  border: none;
  padding: 0 calc(var(--1) * 0.4);
  margin-inline-start: calc(var(--1) * 0.5);
  color: oklch(from var(--ink-display) l c h / 0.7);
  cursor: pointer;
  font-size: 1.75em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.lang-switch__close:hover { color: var(--ink-display); }

.nav__main {
  box-sizing: border-box;
  max-inline-size: var(--chrome-max, var(--container-max));
  width: 100%;
  margin-inline: auto;
  /* The utility row already supplies the top clearance. */
  padding-block-start: 0;
  padding-block-end:   var(--space-2);
  padding-inline:      clamp(var(--space-3), 5vw, var(--body-gutter, var(--main-gutter, var(--space-4))));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
}

.nav__brand { 
  display: flex; 
  align-items: center; 
  gap: var(--nav-brand-gap); 
  text-decoration: none; 
  color: inherit; 
  flex-shrink: 0; 
}

.nav__brand-img { 
  display: block; 
  height: var(--nav-brand-mark-size); 
  width: auto; 
  flex-shrink: 0; 
}

.nav__brand-text { display: flex; flex-direction: column; flex-shrink: 0; }
.nav__brand-name {
  font-weight: var(--weight-heavy);
  font-size: var(--nav-brand-name-size);
  line-height: 1.2;
}
.nav__brand-sub { 
  font-size: var(--nav-brand-sub-size); 
  line-height: 1.2;
  opacity: 0.7; 
}

.nav__right-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: var(--space-4);
}

.nav__links { 
  display: flex; 
  align-items: center; 
  gap: var(--nav-links-gap);
}

.nav__link { 
  --_link-color: var(--nav-link, var(--ink-body));
  --_link-font: var(--nav-link-font, var(--font-label, inherit));
  --_link-size: var(--nav-link-size);
  --_link-weight: var(--nav-link-weight);
  --_link-spacing: var(--nav-link-spacing);

  color: var(--_link-color); 
  font-family: var(--_link-font); 
  font-size: var(--_link-size); 
  font-weight: var(--_link-weight); 
  letter-spacing: var(--_link-spacing);
  line-height: 1.2;
  
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  padding-inline: 0; padding-block: var(--space-2);
  text-decoration: underline transparent;
  text-decoration-thickness: var(--nav-link-border-width, 2px);
  text-underline-offset: 0.25em;
  transition: color var(--anim-fast) var(--ease-out), text-decoration-color var(--anim-fast) var(--ease-out);
}

@media (hover: hover) {
  .nav__link:hover { color: var(--nav-link-hover); text-decoration-color: var(--nav-link-hover-border, transparent); }
}
.nav__caret { opacity: 0.5; margin-left: 4px; vertical-align: middle; }

.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: var(--nav-actions-gap);
}

@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__actions .btn,
  .nav__actions .nav__lang-dropdown { display: none; }
}

@media (min-width: 900px) {
  .nav__mobile { display: none !important; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .nav__main {
    gap: var(--space-2);
  }
  .nav__links {
    gap: var(--space-2);
  }
  .nav__link {
    --_link-size: var(--nav-link-size-tablet, var(--nav-link-size));
    padding-inline: calc(var(--1) * 0.5);
  }
  .nav__actions {
    gap: var(--space-2);
  }
  .nav__actions .btn {
    --btn-size: var(--text-sm);
    --btn-pad-x: 1em;
    --btn-pad-y: 0.6em;
  }
}

/* ── Blog index ──────────────────────────────────────
   Cards stretch to equal height in each row via flex;
   the "Read Article" link is pinned to the card bottom
   via margin-auto. Title clamps to 3 lines and expands
   on hover. */

.blog-header .blog-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-label);
}

.blog-header .blog-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-display);
  margin: 0;
  max-inline-size: 22ch;
}

.blog-header .blog-desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--ink-body);
  margin: 0;
  max-inline-size: 56ch;
}

.blog-grid {
  margin-block-start: var(--space-5);
}

/* The <a> is the whole card hitbox; the .card inside must fill it. */
.blog-card__link {
  display: flex;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
}

.blog-card__link > .blog-card {
  flex: 1;
  min-block-size: 100%;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.blog-card__meta {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-label);
  margin: 0;
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  line-height: 1.25;
  color: var(--ink-display);
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: -webkit-line-clamp var(--anim-fast) var(--ease-out),
              color var(--anim-fast) var(--ease-out);
}

/* Hover expands the title — no truncation, full text visible */
.blog-card__link:hover .blog-card__title,
.blog-card__link:focus-visible .blog-card__title {
  -webkit-line-clamp: unset;
  color: var(--ink-accent, var(--accent));
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-body);
  line-height: 1.5;
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Pin "Read Article →" to the bottom of the card */
.blog-card__more {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--ink-accent, var(--accent));
  transition: transform var(--anim-fast) var(--ease-out);
}

.blog-card__link:hover .blog-card__more {
  transform: translateX(2px);
}

/* ── Blog post ───────────────────────────────────────
   Same surface-colored treatment so the nav is legible. */

.blog-article .blog-back {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
  color: var(--ink-label);
  text-decoration: none;
  margin-block-start: var(--space-3);
  margin-block-end: var(--space-3);
}

.blog-article .blog-back:hover {
  color: var(--ink-display);
}

.blog-article .blog-meta {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-label);
  margin: 0;
}

.blog-article .blog-post-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-display);
  margin: 0;
}

.blog-article .blog-tldr {
  padding: var(--space-3);
  background: oklch(from var(--ink-accent, var(--accent)) l c h / 0.08);
  border-left: 3px solid var(--ink-accent, var(--accent));
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-body);
}

.blog-article .blog-tldr__label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-accent, var(--accent));
  margin-block-end: var(--space-1);
}

.blog-article .blog-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--ink-display);
  margin-block-start: var(--space-4);
  margin-block-end: var(--space-2);
}

.blog-article .blog-prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--ink-display);
  margin-block-start: var(--space-3);
  margin-block-end: var(--space-2);
}

.blog-article .blog-prose p {
  margin-block-end: var(--space-3);
}

.blog-article .blog-subscribe {
  padding: var(--space-4);
  background: oklch(from var(--surface) l c h / 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-block-start: var(--space-5);
}

.blog-article .blog-subscribe__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--ink-display);
  margin: 0;
}

.blog-article .blog-subscribe__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-body);
  margin-block-start: var(--space-1);
  margin-block-end: var(--space-3);
}

.blog-article .blog-subscribe__row {
  display: flex;
  gap: var(--space-2);
}

.blog-article .blog-subscribe__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-body);
  background: var(--surface);
}

/* @locked: off */

/* ─────────────────────────────────────────────
   LiftXErgo — Site Contract
   Four sections: Typography · Color · Site · Motion
   ───────────────────────────────────────────── */


/* ── Typography ─────────────────────────────── */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/liftxergo/fonts/barlow-condensed-400-c74944c1.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/liftxergo/fonts/barlow-condensed-600-1a79f86d.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/liftxergo/fonts/barlow-condensed-700-74ef7090.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/liftxergo/fonts/barlow-condensed-800-33344abb.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/liftxergo/fonts/inter-400-1f021a24.woff2") format('woff2'); size-adjust: 110%; }

:root {
  --font-display:    'Barlow Condensed', sans-serif;
  --font-body:       'Inter',             sans-serif;
  --font-label:      var(--font-display);
  --font-reading:    'Source Serif 4', Georgia, serif;
  --weight-body:     400;
  --weight-contrast: 100;
}


/* ── Color ────────────────────────────────────
   3 hues drive everything. Surfaces at each hue,
   all text at --hue-ink (steel blueprint tone). */

:root {
  /* The dials */
  --hue:         91;    /* paper (warm)  → --surface */
  --hue-colored: 262;   /* dark (steel)  → --surface-colored */
  --hue-accent:  41;    /* CTA (orange)  → --surface-accent */
  --hue-ink:     262;   /* text tone     → all 9 inks */
  --hue-danger:  15;    /* platform anchor */

  /* 3 surfaces — hue varies per surface, L/C fixed */
  --surface:         oklch(0.96 0.004 var(--hue));
  --surface-colored: oklch(0.12 0.010 var(--hue-colored));
  --surface-accent:  oklch(0.54 0.164 var(--hue-accent));

  /* 9 inks — all at --hue-ink, L/C fixed per role per surface polarity */
  --ink-default-display: oklch(0.18 0.015 var(--hue-ink));
  --ink-default-body:    oklch(0.40 0.018 var(--hue-ink));
  --ink-default-label:   oklch(0.55 0.015 var(--hue-ink));

  --ink-colored-display: oklch(0.98 0.004 var(--hue-ink));
  --ink-colored-body:    oklch(0.82 0.010 var(--hue-ink));
  --ink-colored-label:   oklch(0.68 0.010 var(--hue-ink));

  --ink-accent-display:  oklch(0.98 0.004 var(--hue-ink));
  --ink-accent-body:     oklch(0.94 0.006 var(--hue-ink));
  --ink-accent-label:    oklch(0.80 0.010 var(--hue-ink));

  /* Highlights */
  --accent:      var(--surface-accent);
  --accent-tint: oklch(0.50 0.084 var(--hue-colored));
}


/* ── Site Parameters ────────────────────────── */

:root {
  --radius:          2px;
  --section-block:   var(--space-5);
  --main-gutter:     var(--space-6);
  --body-gutter:     var(--main-gutter);
  --container-max:   calc(65rem * 1.25);
  --measure:         38rem;
  /* Total nav height = main row + utility row (lang switcher above) */
  --site-nav-height: 100px;

  /* Hero has top-aligned badge + headline stack. Tight clearance
     to the nav, no extra breathing. */
  --first-section-block-start: var(--site-nav-height);
}



html {
  background-color: var(--surface);
}

body[data-site-template="liftxergo"] {
  /* ── Cascade entry — installs the default ink triplet on body.
        Surface classes rewrite these inside their scope. ── */
  --ink-display: var(--ink-default-display);
  --ink-body:    var(--ink-default-body);
  --ink-label:   var(--ink-default-label);

  --grain-opacity: 0.012;
  --grain: var(--grain-film);
  --grain-size: 300px 300px;

  /* ── Site palette — named site colors beyond the contract ── */
  --lxe-card-bg:      oklch(0.98 0 0 / 0.85);                                 /* frosted glass */
  --danger:           oklch(0.55 0.22 var(--hue-danger));                     /* error / destructive */
  --lxe-light-steel:  oklch(from var(--surface-colored) calc(l + 0.11) c h);  /* 0.23 — mid card */
  --lxe-dark-steel:   oklch(from var(--surface-colored) calc(l + 0.06) c h);  /* 0.18 — dark card */
  --lxe-mid-gray:     oklch(0.49 0.018 var(--hue-ink));                       /* muted text */
  --lxe-border-light: oklch(0.92 0.006 var(--hue-ink));                       /* light-surface border */

  /* ── Nav / Footer local tokens ── */
  --nav-ink:         var(--ink-colored-display);
  --nav-ink-mid:     var(--ink-colored-body);
  --nav-ink-dim:     var(--ink-colored-label);
  --footer-logo-width:   clamp(140px, 16vw, 200px);
  --footer-logo-height:  auto;
  --footer-surface-fill: var(--surface-colored);
  --footer-ink:          var(--ink-colored-display);
  --footer-ink-dim:      var(--ink-colored-label);
  --credits-accent:      var(--accent);

  /* ── Glass profile ── */
  --glass: 1;
  --glass-peak: 0.85;

  /* ── Button overrides (shared) ── */
  --btn-size:    var(--text-lg);
  --btn-font:    var(--font-label);
  --btn-weight:  var(--weight-heavy);
  --btn-spacing: 0;
  --btn-radius:  var(--radius);
  --btn-pad-y:   0.62em;
  --btn-pad-x:   1.15em;
  --lxe-orange:  var(--accent);
}

/* LiftX ghost — not true ghost; glass treatment over dark hero.
   Installs the colored triplet as a unit with a semi-transparent
   dark wash background. Used on hero and CTA sections. */
body[data-site-template="liftxergo"] .btn--ghost {
  background: oklch(from var(--surface-colored) l c h / 0.26);
  --ink-display: var(--ink-colored-display);
  --ink-body:    var(--ink-colored-body);
  --ink-label:   var(--ink-colored-label);
  color: var(--ink-body);
  border-color: oklch(from var(--ink-colored-display) l c h / 0.28);
}



/* ── Chrome: Footer (dark steel surface) ── */
body[data-site-template="liftxergo"] .footer {
  --ink-display: var(--ink-colored-display);
  --ink-body:    var(--ink-colored-body);
  --ink-label:   var(--ink-colored-label);
  --ink:     var(--ink-colored-display);
  --ink-mid: var(--ink-colored-body);
  --ink-dim: var(--ink-colored-label);
  color: var(--ink-colored-body);
}
body[data-site-template="liftxergo"] .footer__desc,
body[data-site-template="liftxergo"] .footer__copy,
body[data-site-template="liftxergo"] .footer__legal-links,
body[data-site-template="liftxergo"] .footer__legal-link,
body[data-site-template="liftxergo"] .footer__brand-sub,
body[data-site-template="liftxergo"] .footer__contact-line {
  font-family: var(--font-label);
}

/* ── Chrome: Nav ── */
body[data-site-template="liftxergo"] .nav {
  --canvas: var(--lxe-light-steel);
  --ink-display: var(--ink-colored-display);
  --ink-body:    var(--ink-colored-body);
  --ink-label:   var(--ink-colored-label);
  --ink:     var(--ink-colored-display);
  --ink-mid: var(--ink-colored-body);
  --ink-dim: var(--ink-colored-label);
  color: var(--ink-colored-body);
  --nav-brand-gap: var(--space-1);
  --nav-brand-mark-size: 34px;
  --nav-links-gap: var(--space-2);
  --nav-actions-gap: var(--space-2);
  --nav-link-size: var(--text-base);
  --nav-link-weight: var(--weight-body);
  --nav-link-spacing: 0.01em;
  --nav-btn-size: var(--text-base);
  --nav-btn-pad-y: 0.62em;
  --nav-btn-pad-x: 1em;
  --nav-link-hover:    var(--accent);
  --nav-mobile-accent: var(--accent);
}
body[data-site-template="liftxergo"] .nav__mega-title {
  color: oklch(from var(--accent) l c h / 0.88);
}
body[data-site-template="liftxergo"] .nav__cta--primary { background: oklch(from var(--accent) calc(l + var(--hover, 0) * 0.06) c h); color: oklch(0.98 0.004 var(--hue-ink)); border-radius: var(--radius-md); overflow: visible; --lift-x: calc(var(--hover, 0) * -3px + var(--press, 0) * 3px); --lift-y: calc(var(--hover, 0) * -3px + var(--press, 0) * 3px); --shadow-x: calc(1.5px + var(--hover, 0) * 3px - var(--press, 0) * 4.5px); --shadow-y: calc(1.5px + var(--hover, 0) * 3px - var(--press, 0) * 4.5px); transform: translate(var(--lift-x), var(--lift-y)); box-shadow: max(0px, var(--shadow-x)) max(0px, var(--shadow-y)) 0px oklch(from var(--accent) calc(l * 0.35) c h); }

/* ── Chrome: Dialog ── */
body[data-site-template="liftxergo"] .dialog::backdrop {
  background: oklch(from var(--lxe-dark-steel) l c h / 0.85);
}
body[data-site-template="liftxergo"] .dialog-panel {
  background: var(--surface);
}
body[data-site-template="liftxergo"] .dialog-input:focus,
body[data-site-template="liftxergo"] .dialog-textarea:focus {
  background: var(--lxe-card-bg);
  border-color: var(--accent);
}

/* ── Shared: Labels ── */
.lxe-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  margin-bottom: var(--space-1); /* 8px gap — grouped with heading */
}

/* ── Shared: Section headings ── */
.lxe-section-heading {
  font-size: var(--text-3xl);
  margin-block: 0 var(--space-3);
}
.lxe-section-subtext {
  font-size: var(--text-base);
  max-width: 60ch;
}

/* ── Shared: Buttons ── */

body[data-site-template="liftxergo"] .btn--sm {
  --btn-size: var(--text-base);
  --btn-pad-y: 0.8em;
  --btn-pad-x: 1.5em;
}

/* ── Shared: Breadcrumb ── */
.lxe-breadcrumb {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-body);
  color: var(--accent);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: opacity var(--anim-mid);
}
.lxe-breadcrumb:hover { opacity: 0.7; }

/* ── Shared: Logo ── */
.lxe-logo-shell {
  display: block;
}

.lxe-logo {
  /* Fixed pixel height — the logo never scales with breakpoint type.
     width: auto + viewBox aspect ratio = correct intrinsic width. */
  display: block;
  height: 36px;
  width: auto;
  overflow: visible;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ink-display);
}
.lxe-logo-picture {
  display: none;
}
.lxe-logo__text {
  /* Inside the SVG viewBox; font-size is in user units, not CSS rems.
     Keep fixed so glyph widths don't shift across breakpoints. Sizes
     match the original --text-2xl (33) / --text-3xl (42) tuning that
     the x=0 / x=72 / x=85 positions were laid out for. */
  font-family: var(--font-display);
  font-size: 33px;
  letter-spacing: 0.06em;
  font-weight: var(--weight-heavy);
}
.lxe-logo__x {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--accent);
  font-weight: var(--weight-label);
}

/* ── Home: Hero ── */
.lxe-hero {
  background: linear-gradient(165deg, var(--lxe-light-steel) 0%, var(--surface-colored) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lxe-hero__video.is-playing {
  opacity: 1;
}
.lxe-hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      oklch(0.13 0.04 var(--hue-colored) / 0.90) 0%,
      oklch(0.14 0.04 var(--hue-colored) / 0.72) 52%,
      oklch(0.15 0.04 var(--hue-colored) / 0.42) 100%),
    linear-gradient(180deg,
      oklch(0.11 0.03 var(--hue-colored) / 0.22) 0%,
      oklch(0.11 0.03 var(--hue-colored) / 0.48) 100%);
  z-index: 0;
}
.lxe-hero__grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(oklch(from var(--accent) l c h / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--accent) l c h / 0.5) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.lxe-hero__radial {
  position: absolute;
  right: -200px;
  top: -100px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle at center, oklch(from var(--accent) l c h / 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.lxe-hero__inner {
  --split: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
  position: relative;
  z-index: 1;
  padding-block-end: var(--space-5);
  text-align: start;
}
.lxe-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-family: var(--font-label);
}
.lxe-hero__badge::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
}
.lxe-hero__badge-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
  letter-spacing: 0.04em;
  color: var(--accent);
}
.lxe-hero__headline {
  font-size: var(--text-5xl);
  margin: 0 0 var(--space-1);
  font-weight: var(--weight-heavy);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.lxe-hero__subtext {
  max-inline-size: 56ch;
  font-size: clamp(var(--text-base), 1.35vw, var(--text-lg));
  line-height: 1.5;
  letter-spacing: 0;
  margin-block: var(--space-4);
  text-wrap: pretty;
}
.lxe-hero__buttons { display: flex; gap: var(--space-2); }

/* ── Home: Cost Card ── */
.lxe-cost-card {
  background: var(--shade);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.lxe-cost-card__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-tint));
}
.lxe-cost-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  margin-bottom: 0;
}
.lxe-cost-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lxe-cost-card__divider {
  height: 1px;
  background: var(--border);
}
.lxe-stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  animation: lxe-stat-row-in 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) calc(var(--i, 0) * 0.25s + 0.15s) backwards;
}
.lxe-stat-row > .lxe-stat-row__label { margin-block-start: var(--space-2); }
@keyframes lxe-stat-row-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lxe-stat-row__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--ink-body);
  line-height: 1;
}
.lxe-stat-row__label {
  font-size: var(--text-sm);
  margin-top: 0;
}
.lxe-stat-row__source {
  font-size: var(--text-sm);
  margin-top: 0;
  font-style: italic;
}
.lxe-cost-card__callout {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: oklch(from var(--accent-tint) l c h / 0.08);
  border: 1px solid oklch(from var(--accent-tint) l c h / 0.2);
  border-radius: var(--radius);
}
.lxe-cost-card__callout-text {
  font-size: var(--text-base);
  color: var(--accent-tint);
  font-weight: var(--weight-label);
}

/* ── Home: Problems ── */
.lxe-problems__grid {
  gap: var(--space-4);
  margin-top: var(--space-6);
  align-items: stretch;
}
.lxe-problems__grid > .lxe-problem-card {
  block-size: 100%;
}
.lxe-problem-card {
  --hover: 0;
  background: color-mix(in oklch, var(--lxe-card-bg), var(--lxe-dark-steel) calc(var(--hover) * 100%));
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0 8px 32px oklch(0 0 0 / 0.08);
  border: 1px solid color-mix(in oklch, var(--lxe-border-light), oklch(from var(--accent) l c h / 0.2) calc(var(--hover) * 100%));
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lxe-problem-card > * {
  position: relative;
  z-index: 1;
}
.lxe-problem-card__problem-area {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.lxe-problem-card__problem-area > * { margin: 0; }
.lxe-problem-card__solution-area {
  padding: var(--space-3) var(--space-4) var(--space-4) var(--space-4);
  background: color-mix(in oklch, var(--surface), oklch(from var(--lxe-dark-steel) l c h / 0.4) calc(var(--hover) * 100%));
  border-top: 1px solid color-mix(in oklch, var(--lxe-border-light), oklch(from var(--ink-display) l c h / 0.08) calc(var(--hover) * 100%));
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.lxe-problem-card__solution-area > * { margin: 0; }
.lxe-problem-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-1);
}
.lxe-problem-card__problem-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--ink-label);
  margin-bottom: var(--space-1);
}
.lxe-problem-card__problem-title {
  font-size: var(--text-xl);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.lxe-problem-card__icon {
  color: color-mix(in oklch, var(--lxe-mid-gray), var(--accent) calc(var(--hover) * 100%));
  transform: scale(calc(1 + var(--hover) * 0.1));
  flex-shrink: 0;
  will-change: transform;
}
.lxe-problem-card__stat {
  background: oklch(from var(--accent) l c h / calc(0.06 + var(--hover) * 0.09));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  display: inline-block;
  margin-bottom: var(--space-1);
}
.lxe-problem-card__stat-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.lxe-problem-card__solution-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent-tint);
  margin-bottom: var(--space-1);
}
.lxe-problem-card__solution-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-label);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.lxe-problem-card__desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-block-size: var(--space-6);
}
.lxe-problem-card__tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.lxe-problem-card__tag {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  background: var(--shade);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
}
a.lxe-problem-card { text-decoration: none; }
.lxe-problem-card__readmore {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  transform: translateX(calc(var(--hover) * 4px));
  will-change: transform;
}

/* ── Home: Industries ── */
.lxe-industries {
  background: linear-gradient(180deg, var(--lxe-dark-steel) 0%, var(--surface-colored) 100%);
  position: relative;
}
.lxe-industries__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .lxe-industries__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .lxe-industries__panels {
    flex: 1 1 0%;
    min-inline-size: 0;
  }
}
.lxe-industries__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: color-mix(in oklch, var(--surface-colored), black 20%);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 2px 8px oklch(0 0 0 / 0.4);
}
@media (min-width: 768px) {
  .lxe-industries__tabs {
    flex: 0 0 240px;
  }
}
.lxe-industry-tab {
  background: transparent;
  border: 2px solid transparent;
  padding: var(--space-3) var(--space-3);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color var(--anim-mid) var(--ease-out), border-color var(--anim-mid) var(--ease-out);
}
.lxe-industry-tab:hover {
  background: oklch(from var(--accent) l c h / 0.1);
}
.lxe-industry-tab.active {
  background: var(--accent);
  border-color: oklch(from var(--accent) l c h / 0.5);
  box-shadow: 0 4px 12px oklch(from var(--accent) l c h / 0.3);
}
.lxe-industry-tab__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  transition: color 150ms ease;
}
.lxe-industry-tab.active .lxe-industry-tab__name {
  font-weight: var(--weight-heavy);
  color: var(--ink-accent-display);
}
.lxe-industries__panels {
  position: relative;
  min-height: 30rem;
}
.lxe-industry-panel {
  display: none;
  background: var(--lxe-light-steel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 6vw, var(--space-8));
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.3);
  animation: fade-in-up 0.4s var(--ease-out) forwards;
}
.lxe-industry-panel.active { display: block; }
.lxe-industry-panel__bg-stat {
  position: absolute;
  top: -5%;
  right: 0;
  font-family: var(--font-display);
  font-size: var(--text-9xl);
  font-weight: var(--weight-display);
  color: var(--shade);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.lxe-industry-panel__content { position: relative; z-index: 1; padding-right: var(--space-5); }
.lxe-industry-panel__name {
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  margin-bottom: var(--space-4);
}
.lxe-industry-panel__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .lxe-industry-panel__columns {
    flex-direction: row;
    gap: var(--space-6);
  }
  .lxe-industry-panel__col {
    flex: 1 1 50%;
    min-inline-size: 0;
  }
}
.lxe-industry-panel__col {
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
}
.lxe-industry-panel__col:last-child {
  border-left-color: var(--accent);
}
.lxe-industry-panel__col-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  color: var(--ink-display);
  margin-bottom: var(--space-1);
}
.lxe-industry-panel__col-text {
  font-size: var(--text-base);
}
.lxe-industry-panel__stat-badge {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: oklch(from var(--accent) l c h / 0.1);
  border: 1px solid oklch(from var(--accent) l c h / 0.3);
  border-radius: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  backdrop-filter: blur(8px);
}
.lxe-industry-panel__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  color: var(--ink-display);
}
.lxe-industry-panel__stat-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
}
@media (max-width: 1024px) {
  .lxe-industries__grid { grid-template-columns: 1fr; }
}

/* ── Home: Products ── */
.lxe-products__grid {
  gap: var(--space-4);
}
.lxe-product-card {
  --hover: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklch, var(--lxe-card-bg), var(--lxe-dark-steel) calc(var(--hover) * 100%));
  border: 1px solid color-mix(in oklch, var(--lxe-border-light), oklch(from var(--accent) l c h / 0.2) calc(var(--hover) * 100%));
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  position: relative;
  overflow: hidden;
  transform: translateY(calc(var(--hover) * -2px));
  box-shadow: 0 calc(var(--hover) * 10px) calc(var(--hover) * 20px) oklch(0.18 0.015 var(--hue-colored) / calc(var(--hover) * 0.3));
}
.lxe-product-card > * {
  position: relative;
  z-index: 1;
}
.lxe-product-card__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: oklch(from var(--ink-display) l c h / 0.08);
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  pointer-events: none;
}
.lxe-product-card__category {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}
.lxe-product-card__specs {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.lxe-product-card__divider {
  height: 1px;
  background: color-mix(in oklch, var(--lxe-border-light), oklch(from var(--ink-display) l c h / 0.1) calc(var(--hover) * 100%));
  margin-bottom: var(--space-3);
}
.lxe-product-card__models {
  font-size: var(--text-sm);
  flex: 1;
}
a.lxe-product-card { text-decoration: none; }
.lxe-product-card__readmore {
  display: inline-block;
  margin-top: var(--space-3);
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  transform: translateX(calc(var(--hover) * 4px));
  will-change: transform;
}

/* ── Home: ROI Calculator ── */
.lxe-roi {
  background: linear-gradient(180deg, var(--lxe-dark-steel) 0%, var(--surface-colored) 100%);
}
.lxe-roi .lxe-section-subtext {
  color: var(--ink-label);
  margin-bottom: var(--space-6);
}
.lxe-roi__grid {
  gap: var(--space-6);
  align-items: start;
}
.lxe-roi__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lxe-roi__input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.lxe-roi__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  color: var(--ink-body);
}
.lxe-roi__input {
  width: 100%;
  max-width: 18rem;
  box-sizing: border-box;
  font-size: var(--text-lg);
  font-weight: var(--weight-label);
  color: var(--ink-display);
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--anim-mid);
  -moz-appearance: textfield;
}
.lxe-roi__input::placeholder { color: var(--ink-label); }
.lxe-roi__input:-webkit-autofill,
.lxe-roi__input:-webkit-autofill:hover, 
.lxe-roi__input:-webkit-autofill:focus, 
.lxe-roi__input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
.lxe-roi__input::-webkit-inner-spin-button,
.lxe-roi__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lxe-roi__input:focus {
  outline: none;
  border-color: var(--accent);
}
.lxe-roi__hint {
  font-size: var(--text-sm);
  color: var(--ink-label);
  font-style: italic;
  margin-top: var(--space-1);
  display: block;
}
.lxe-roi__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lxe-roi__result-card {
  background: var(--shade);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.lxe-roi__result-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-tint));
}
.lxe-roi__result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}
.lxe-roi__result-label {
  font-size: var(--text-sm);
}
.lxe-roi__result-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}
.lxe-roi__result-value--accent { color: var(--accent); }
.lxe-roi__result-value--red { color: var(--danger); }
.lxe-roi__result-row--total {
  padding: 0;
}
.lxe-roi__result-divider {
  height: 1px;
  background: var(--border);
}
.lxe-roi__result-callout {
  --hover: 0;
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: oklch(from var(--accent) l c h / 0.08);
  border: 2px solid color-mix(in oklch, oklch(from var(--accent) l c h / 0.3) calc((1 - var(--hover)) * 100%), var(--accent) calc(var(--hover) * 100%));
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 calc(var(--hover) * 6px) calc(var(--hover) * 20px) oklch(from var(--accent) l c h / calc(var(--hover) * 0.1));
}
.lxe-roi__result-callout-text {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-body);
}
.lxe-roi__cta {
  width: 100%;
  justify-content: center;
  align-self: flex-start; /* Prevents flex-stretch jitter on translateY */
  margin-top: auto;
}

/* ── Home: Process ── */
.lxe-process__grid {
  gap: var(--space-4);
}
.lxe-step-card {
  --hover: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid oklch(from var(--lxe-border-light) l c h / 0.5);
  border-radius: var(--radius);
  border-top: 3px solid transparent;
  position: relative;
  box-shadow: 0 calc(var(--hover) * 6px) calc(var(--hover) * 20px) var(--border);
  transition: border-top-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lxe-step-card:first-child { border-top-color: var(--accent); }
.lxe-step-card__bg-num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--border);
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  pointer-events: none;
}
.lxe-step-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.lxe-step-card__desc {
  font-size: var(--text-sm);
  margin-top: auto;
}

/* ── Home: Why Us ── */
.lxe-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
.lxe-why__subtext {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}
.lxe-features {
  gap: var(--space-3);
}
.lxe-feature-card {
  padding: var(--space-3);
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid oklch(from var(--lxe-border-light) l c h / 0.5);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0 8px 32px oklch(0 0 0 / 0.08);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.lxe-feature-card__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--ink-display);
  margin-bottom: var(--space-1);
}
.lxe-feature-card__sub {
  font-size: var(--text-sm);
}
.lxe-comparison {
  background: var(--lxe-dark-steel);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.lxe-comparison__glow {
  position: absolute;
  top: 0; right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, oklch(from var(--accent) l c h / 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.lxe-comparison__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
.lxe-comparison table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.section__copy, .section__media { min-width: 0; }
.lxe-comparison th {
  text-align: left;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.lxe-comparison th:nth-child(2),
.lxe-comparison th:nth-child(3) { text-align: center; }
.lxe-comparison__th-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
}
.lxe-comparison__th-text--accent { color: var(--accent); }
.lxe-comparison td {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.lxe-comparison td:nth-child(2),
.lxe-comparison td:nth-child(3) { text-align: center; }
.lxe-comparison__cap {
  font-size: var(--text-sm);
  color: var(--ink-label);
}
.lxe-comparison td,
.lxe-comparison th {
  opacity: var(--stagger, 0);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lxe-comparison th,
.lxe-comparison td:first-child {
  transform: translateX(calc((1 - var(--stagger, 0)) * 6px));
}
.lxe-comparison td:nth-child(2),
.lxe-comparison td:nth-child(3) {
  transform: scale(calc(1 + (1 - var(--stagger, 0)) * 0.4));
  transform-origin: center;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce effect for stamps */
}
.lxe-comparison th:nth-child(2),
.lxe-comparison td:nth-child(2) {
  border-right: 1px solid var(--border);
  width: 25%;
  padding-inline: var(--space-3);
}
.lxe-comparison th:nth-child(3),
.lxe-comparison td:nth-child(3) {
  padding-inline: var(--space-3) var(--space-4);
  width: 25%;
}
.lxe-comparison__check { font-size: var(--text-base); color: var(--accent); }
.lxe-comparison__check--teal { color: var(--accent-tint); }
.lxe-comparison__dash { font-size: var(--text-base); color: var(--ink-label); }

/* ── Home: CTA ── */
.lxe-cta {
  background: linear-gradient(135deg, var(--accent) 0%, oklch(from var(--accent) calc(l + 0.11) c h) 100%);
  position: relative;
  overflow: hidden;
}
.lxe-cta__grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(var(--ink-label) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-label) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.lxe-cta__inner {
  max-inline-size: var(--measure, 38rem);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  --flow-space: var(--space-4);
}
.lxe-cta__headline {
  font-size: var(--text-3xl);
  margin: 0;
}
.lxe-cta__body {
  font-size: var(--text-lg);
  margin: 0;
  max-inline-size: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.lxe-cta__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* ── Product pages: Subpage Hero ── */
.lxe-hero--subpage {
  min-height: auto;
}
.lxe-subpage-hero__img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid oklch(from var(--accent) l c h / 0.15);
  background: var(--lxe-light-steel);
  aspect-ratio: 16 / 10;
}
.lxe-subpage-hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lxe-subpage-hero__img-wrap img[src=""],
.lxe-subpage-hero__img-wrap img:not([src]) {
  display: none;
}
.lxe-subpage-hero__img-wrap:has(img[src=""]),
.lxe-subpage-hero__img-wrap:has(img:not([src])) {
  background: linear-gradient(135deg, var(--lxe-light-steel) 0%, var(--lxe-dark-steel) 100%);
}

/* ── Product pages: Overview ── */
.lxe-product-overview__grid {
  gap: var(--space-5);
  align-items: start;
}
.lxe-product-overview__body {
  font-size: var(--text-base);
  margin-top: var(--space-3);
}
.lxe-product-overview__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.lxe-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0 8px 32px oklch(0 0 0 / 0.08);
  border-radius: var(--radius);
  padding: var(--space-4);
  border: 1px solid var(--lxe-border-light);
  text-align: center;
}
.lxe-highlight__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  margin-bottom: var(--space-1);
}
.lxe-highlight__label {
  font-size: var(--text-sm);
}

/* ── Product pages: Specs ── */
.lxe-product-specs__grid {
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.lxe-model-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--lxe-light-steel);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5);
  border: 1px solid var(--border);
}
.lxe-model-card__name {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-1);
}
.lxe-model-card__desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  flex: 1;
}
.lxe-model-card__specs {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}
.lxe-model-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.lxe-model-card__spec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.lxe-model-card__spec-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--ink-label);
}
.lxe-model-card__spec-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
}

/* ── Product pages: Applications ── */
.lxe-product-apps__grid {
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.lxe-app-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0 8px 32px oklch(0 0 0 / 0.08);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--lxe-border-light);
}
.lxe-app-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  margin-bottom: var(--space-1);
}
.lxe-app-card__desc {
  font-size: var(--text-sm);
}

/* ── Product pages: Related Solutions ── */
.lxe-product-related .lxe-label { color: var(--accent); }
.lxe-product-related__grid {
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.lxe-related-card {
  --hover: 0;
  display: flex;
  flex-direction: column;
  background: var(--lxe-light-steel);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5);
  border: 1px solid color-mix(in oklch, var(--border) calc((1 - var(--hover)) * 100%), oklch(from var(--accent) l c h / 0.3) calc(var(--hover) * 100%));
  text-decoration: none;
  transform: translateY(calc(var(--hover) * -2px));
}
.lxe-related-card__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  margin-bottom: var(--space-1);
}
.lxe-related-card__desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.lxe-related-card__arrow {
  display: inline-block;
  font-size: var(--text-lg);
  color: var(--accent);
  margin-top: auto;
  align-self: flex-start;
}

/* ── Solution pages: Problem ── */
.lxe-solution-problem__grid {
  gap: var(--space-5);
  align-items: start;
  /* Keep prose left-aligned across breakpoints. Overrides .split's
     mobile default of text-align: center so the narrow paragraph
     doesn't visually offset from the heading above it. */
  text-align: left;
}
.lxe-solution-stat {
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    inset 0 -1px 0 oklch(0 0 0 / 0.05),
    0 8px 32px oklch(0 0 0 / 0.08);
  border-radius: var(--radius);
  padding: var(--space-4);
  border: 1px solid var(--lxe-border-light);
  text-align: center;
}
.lxe-solution-stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  color: var(--accent);
  margin-bottom: var(--space-1);
}
.lxe-solution-stat__label {
  font-size: var(--text-sm);
}
.lxe-solution-problem__body {
  max-inline-size: var(--measure, 38rem);
}
.lxe-solution-problem__body p {
  font-size: var(--text-base);
}

/* ── Solution pages: Approach ── */
.lxe-solution-approach__grid {
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.lxe-approach-step {
  background: var(--lxe-light-steel);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  position: relative;
}
.lxe-approach-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.lxe-approach-step__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  margin-bottom: var(--space-1);
}
.lxe-approach-step__desc {
  font-size: var(--text-sm);
}

/* ── Solution pages: Equipment ── */
.lxe-solution-equipment__grid {
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.lxe-equip-card {
  --hover: 0;
  background: var(--lxe-card-bg);
  backdrop-filter: blur(12px) saturate(120%);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  border: 1px solid color-mix(in oklch, var(--lxe-border-light) calc((1 - var(--hover)) * 100%), oklch(from var(--accent) l c h / 0.3) calc(var(--hover) * 100%));
  box-shadow: 0 calc(var(--hover) * 8px) calc(var(--hover) * 30px) var(--border);
}
.lxe-equip-card__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--border);
  margin-bottom: var(--space-2);
}
.lxe-equip-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  margin-bottom: var(--space-1);
}
.lxe-equip-card__specs {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.lxe-equip-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  text-decoration: none;
}
.lxe-equip-card__link:hover { text-decoration: underline; }

/* ── Solution pages: ROI Callout ── */
.lxe-solution-roi__card {
  background: var(--lxe-light-steel);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5);
  border: 1px solid oklch(from var(--accent) l c h / 0.15);
  position: relative;
  overflow: hidden;
}
.lxe-solution-roi__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-tint));
}
.lxe-solution-roi__text {
  font-size: var(--text-lg);
  font-weight: var(--weight-body);
  margin-bottom: var(--space-3);
}
.lxe-solution-roi__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--accent);
  text-decoration: none;
}
.lxe-solution-roi__link:hover { text-decoration: underline; }

/* ── Blog ── */
@font-face { font-family: 'Source Serif 4'; font-weight: 400 700; font-display: swap; src: url("/assets/liftxergo/fonts/source-serif-4-latin-a86e57ca.woff2") format('woff2'); }

/* ── Legal ── */
.site-legal { max-width: var(--container-measure); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }
.site-legal-container { position: relative; }
.site-legal h1 { margin-block-end: 0.25em; }
.site-legal__updated { font-size: var(--text-sm); margin-block-end: var(--space-5); }
.site-legal h2 { margin-block-start: var(--space-5); }
.site-legal h3 { font-size: var(--text-lg); }
.site-legal ul { padding-inline-start: var(--space-4); list-style: disc; }
.site-legal li { margin-block: 0.35em; }
body[data-site-template="liftxergo"] .site-legal a {
  color: var(--accent);
}

/* ── Responsive: site-wide ── */
@media (max-width: 768px) {
  :root {
    --site-nav-height: 68px;
    --main-gutter: var(--space-4);
    --body-gutter: var(--space-4);
  }
}

/* ── Responsive: Home page ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .lxe-hero__inner.split {
    grid-template-columns: minmax(0, 1fr);
    text-align: start;
  }
  .lxe-cost-card__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-3);
  }
  .lxe-cost-card__divider {
    inline-size: 1px;
    block-size: auto;
  }
}

@media (max-width: 768px) {
  .lxe-hero__video-overlay {
    background:
      linear-gradient(180deg,
        oklch(0.13 0.04 var(--hue-colored) / 0.82) 0%,
        oklch(0.14 0.04 var(--hue-colored) / 0.66) 52%,
        oklch(0.12 0.03 var(--hue-colored) / 0.80) 100%);
  }
  .lxe-hero__buttons { flex-direction: column; }
  .lxe-cta__buttons { flex-direction: column; align-items: stretch; }
  .lxe-cta__buttons .lxe-btn {
    width: min(100%, 24rem);
    margin-inline: auto;
  }
  .lxe-industry-panel__columns { grid-template-columns: 1fr; }
  .lxe-roi__result-callout-text { font-size: var(--text-2xl); }
}

/* ── Responsive: Product pages ── */
@media (max-width: 768px) {
  .lxe-product-overview,
  .lxe-product-specs,
  .lxe-product-apps { --section-block: var(--space-5); }
}

/* ── Responsive: Solution pages ── */
@media (max-width: 768px) {
  .lxe-solution-problem,
  .lxe-solution-approach { --section-block: var(--space-5); }
  .lxe-solution-stat__number { font-size: var(--text-4xl); }
}