@charset "UTF-8";
/* abstracts */
/* Canonical color token map. Exported as --color-*. */
/* Dark-theme override map for color tokens. */
/* Legacy alias map.
 * Kept for compatibility with pre-normalization selectors/variables.
 * Prefer canonical --color-* tokens in new code.
 */
/* Canonical spacing token map. Exported as --space-*. */
/* Canonical layout token map. Exported without prefix for authored layout contracts. */
/* Legacy alias map kept for compatibility only. */
/* Canonical typography token map. Exported as unprefixed typography vars. */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-feature-settings: "liga", "kern";
  text-wrap: balance;
  color: var(--color-text-primary);
}

h1,
.h1,
.display-l {
  font-size: var(--step-5);
  font-weight: var(--weight-strong);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-inline-size: 25ch;
}

h2,
.h2,
.display-m {
  font-size: var(--step-4);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-inline-size: 30ch;
}

h3,
.h3,
.display-s,
.headline-l {
  font-size: var(--step-3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  max-inline-size: 35ch;
}

h4,
.h4,
.headline-m {
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  max-inline-size: 18ch;
}

h5,
.h5,
.headline-s,
.title-l {
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  max-inline-size: 24ch;
}

h6,
.h6,
.title-m {
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  max-inline-size: 28ch;
}

.title-s {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.body-l {
  font-size: var(--step-0);
  line-height: var(--lh-body);
  max-inline-size: 68ch;
}

.body-m {
  font-size: var(--text-sm);
  line-height: 1.55;
  max-inline-size: 68ch;
}

.body-s {
  font-size: var(--text-xs);
  line-height: 1.5;
  max-inline-size: 68ch;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.72;
  letter-spacing: var(--ls-body);
  color: var(--color-text-secondary);
  max-inline-size: 52ch;
}

.label-l,
.label-m,
.label-s,
.card-kicker,
.eyebrow {
  font-family: var(--font-label);
  text-wrap: pretty;
  color: var(--color-text-secondary);
}

.label-l {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.label-m {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: calc(var(--ls-label) * 0.9);
}

.label-s, .card-kicker, .eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: calc(var(--ls-label) * 0.8);
}

.eyebrow {
  text-transform: uppercase;
  color: var(--color-accent-40);
}

.card-kicker {
  text-transform: uppercase;
  color: var(--color-accent-50);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  color: var(--color-text-tertiary);
}

.small, .card-meta {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-tertiary);
}

.accent-link {
  color: var(--color-accent);
}

.accent-link:hover {
  color: var(--color-accent-60);
}

hr {
  border: 0;
  height: 1px;
  width: 100%;
  margin: var(--space-xl) 0;
  background-color: var(--color-outline-variant);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
/* Prose defaults only — a class on the list/item opts it out (layout lists,
   nav, card grids), so components don't need to reset these. */
ul:not([class]),
ol:not([class]) {
  list-style-type: disc;
  padding-left: var(--space-xl);
}

ol:not([class]) {
  list-style-type: decimal;
}

li:not([class]) {
  line-height: var(--lh-body);
}

li:not([class]) + li:not([class]) {
  margin-block-start: var(--space-xs);
}

li:not([class])::marker {
  color: var(--color-text-tertiary);
}

/* Nested lists: tighter indent, a little top breathing room */
li > ul:not([class]),
li > ol:not([class]) {
  margin-block-start: var(--space-xs);
  padding-inline-start: var(--space-xl);
}

/* ── Blockquote ─────────────────────────────────────────────────────────── */
blockquote,
.blockquote {
  padding-inline-start: var(--space-l);
  border-inline-start: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--color-text-primary);
  font-style: italic;
}

blockquote cite,
.blockquote cite {
  display: block;
  margin-block-start: var(--space-s);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  color: var(--color-text-tertiary);
}

/* Canonical radius token map. Exported as --radius-*. */
/* Canonical shadow token map. Exported as --shadow-*. */
/* Legacy alias map kept for compatibility only. */
/* Canonical motion token map. Exported as --motion-*. */
/* Legacy alias map kept for compatibility only. */
/* base */
:root {
  color-scheme: light;
  /* Canonical token exports: keep this order stable for predictable output. */
  --color-brand-hue: 150;
  --color-neutral-hue: 95;
  --color-text-hue: 248;
  --color-surface-0: oklch(0.16 0.01 var(--color-neutral-hue));
  --color-surface-10: oklch(0.24 0.01 var(--color-neutral-hue));
  --color-surface-20: oklch(0.33 0.01 var(--color-neutral-hue));
  --color-surface-30: oklch(0.43 0.01 var(--color-neutral-hue));
  --color-surface-40: oklch(0.53 0.01 var(--color-neutral-hue));
  --color-surface-50: oklch(0.63 0.01 var(--color-neutral-hue));
  --color-surface-60: oklch(0.72 0.01 var(--color-neutral-hue));
  --color-surface-70: oklch(0.8 0.01 var(--color-neutral-hue));
  --color-surface-80: oklch(0.88 0.012 var(--color-neutral-hue));
  --color-surface-90: oklch(0.94 0.013 var(--color-neutral-hue));
  --color-surface-95: oklch(0.968 0.014 var(--color-neutral-hue));
  --color-surface-99: oklch(0.988 0.01 var(--color-neutral-hue));
  --color-surface-100: oklch(1 0 var(--color-neutral-hue));
  --color-accent-0: oklch(0.16 0.02 var(--color-brand-hue));
  --color-accent-10: oklch(0.24 0.035 var(--color-brand-hue));
  --color-accent-20: oklch(0.33 0.05 var(--color-brand-hue));
  --color-accent-30: oklch(0.43 0.065 var(--color-brand-hue));
  --color-accent-40: oklch(0.53 0.08 var(--color-brand-hue));
  --color-accent-50: oklch(0.6 0.095 var(--color-brand-hue));
  --color-accent-60: oklch(0.68 0.1 var(--color-brand-hue));
  --color-accent-70: oklch(0.76 0.085 var(--color-brand-hue));
  --color-accent-80: oklch(0.84 0.065 var(--color-brand-hue));
  --color-accent-90: oklch(0.91 0.04 var(--color-brand-hue));
  --color-accent-95: oklch(0.96 0.025 var(--color-brand-hue));
  --color-accent-99: oklch(0.988 0.01 var(--color-brand-hue));
  --color-accent-100: oklch(1 0 var(--color-brand-hue));
  --color-text-0: oklch(0.18 0.01 var(--color-text-hue));
  --color-text-10: oklch(0.23 0.01 var(--color-text-hue));
  --color-text-20: oklch(0.3 0.012 var(--color-text-hue));
  --color-text-30: oklch(0.38 0.012 var(--color-text-hue));
  --color-text-40: oklch(0.46 0.013 var(--color-text-hue));
  --color-text-50: oklch(0.54 0.013 var(--color-text-hue));
  --color-text-60: oklch(0.62 0.013 var(--color-text-hue));
  --color-text-70: oklch(0.7 0.012 var(--color-text-hue));
  --color-text-80: oklch(0.8 0.01 var(--color-text-hue));
  --color-text-90: oklch(0.9 0.008 var(--color-text-hue));
  --color-text-95: oklch(0.95 0.006 var(--color-text-hue));
  --color-text-99: oklch(0.99 0.003 var(--color-text-hue));
  --color-text-100: oklch(1 0 var(--color-text-hue));
  --color-surface: var(--color-surface-99);
  --color-surface-default: var(--color-surface-99);
  --color-surface-dim: var(--color-surface-95);
  --color-surface-container-low: var(--color-surface-100);
  --color-surface-container: var(--color-surface-95);
  --color-surface-container-high: var(--color-surface-90);
  --color-surface-modal: var(--color-surface-100);
  --color-text: var(--color-text-30);
  --color-text-primary: var(--color-text-20);
  --color-text-primary-default: var(--color-text-20);
  --color-text-secondary: var(--color-text-40);
  --color-text-tertiary: var(--color-text-60);
  --color-accent: var(--color-accent-50);
  --color-accent-default: var(--color-accent-50);
  --color-accent-strong: var(--color-accent-60);
  --color-danger: oklch(58% 0.18 28deg);
  --color-danger-text: oklch(42% 0.14 28deg);
  --color-danger-soft: oklch(95% 0.03 28deg);
  --color-success: oklch(62% 0.12 152deg);
  --color-success-text: oklch(42% 0.1 152deg);
  --color-success-soft: oklch(95% 0.03 152deg);
  --color-warning: oklch(75% 0.13 92deg);
  --color-warning-text: oklch(50% 0.1 92deg);
  --color-warning-soft: oklch(97% 0.03 92deg);
  --color-outline: oklch(from var(--color-text-70) l c h/0.38);
  --color-outline-variant: oklch(from var(--color-text-80) l c h/0.22);
  --color-primary: var(--color-accent);
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-lg: var(--space-l);
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-king: 5rem;
  --space: 1rem;
  --frame-max: 1816px;
  --content-max: 72rem;
  --frame-gutter: clamp(1rem, 4vw, 2rem);
  --section-space: clamp(3rem, 6vw, 5rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --padding-xxl: var(--section-space);
  --rhythm-tight: 0.75rem;
  --rhythm-base: 1rem;
  --rhythm-loose: 1.5rem;
  --font-body: Inter Variable, Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: Inter Tight, Inter Variable, Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-label: Inter Variable, Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-icon: Material Icons;
  --step--1: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.82vw, 1.85rem);
  --step-3: clamp(1.7rem, 1.38rem + 1.5vw, 2.65rem);
  --step-4: clamp(2.1rem, 1.58rem + 2.45vw, 3.6rem);
  --step-5: clamp(2.7rem, 1.96rem + 3.4vw, 4.8rem);
  --text-sm: var(--step--1);
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-2xs: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --lh-display: 0.98;
  --lh-headline: 1.08;
  --lh-title: 1.18;
  --lh-body: 1.65;
  --lh-label: 1.15;
  --ls-display: -0.04em;
  --ls-headline: -0.03em;
  --ls-body: -0.005em;
  --ls-label: 0.035em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-strong: 650;
  --weight-bold: 700;
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
  --radius-container-sm: 1rem;
  --radius-container-md: 1.5rem;
  --radius-container-lg: 2rem;
  --radius-media-sm: 0.75rem;
  --radius-media-md: 1rem;
  --radius-media-lg: 1.5rem;
  --radius-control-sm: 0.625rem;
  --radius-control-md: 0.875rem;
  --radius-control-lg: 1rem;
  --radius-pill: 999px;
  --shadow-dna: 0.22 0.012 var(--color-neutral-hue);
  --shadow-elevation-0: none;
  --shadow-elevation-1: 0 1px 2px oklch(from var(--color-surface-0) l c h/0.08);
  --shadow-elevation-2: 0 6px 18px oklch(from var(--color-surface-0) l c h/0.1);
  --shadow-elevation-3: 0 12px 32px oklch(from var(--color-surface-0) l c h/0.12);
  --shadow-elevation-4: 0 20px 48px oklch(from var(--color-surface-0) l c h/0.14);
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.3, 1, 0.3, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-fast: 120ms;
  --motion-standard: 200ms;
  --motion-slow: 420ms;
  --motion-emphasized: 400ms;
  --motion-linger: 600ms;
  --motion-expand: var(--motion-standard);
  --motion-collapse: var(--motion-standard);
  --motion-page-enter: var(--motion-emphasized);
  --motion-modal-enter: var(--motion-emphasized);
  /* Legacy aliases exported after canonical vars for backward compatibility only. */
  --brand-hue: var(--color-brand-hue);
  --neutral-hue: var(--color-neutral-hue);
  --text-hue: var(--color-text-hue);
  --surface-0: var(--color-surface-0);
  --surface-10: var(--color-surface-10);
  --surface-20: var(--color-surface-20);
  --surface-30: var(--color-surface-30);
  --surface-40: var(--color-surface-40);
  --surface-50: var(--color-surface-50);
  --surface-60: var(--color-surface-60);
  --surface-70: var(--color-surface-70);
  --surface-80: var(--color-surface-80);
  --surface-90: var(--color-surface-90);
  --surface-95: var(--color-surface-95);
  --surface-99: var(--color-surface-99);
  --surface-100: var(--color-surface-100);
  --accent-0: var(--color-accent-0);
  --accent-10: var(--color-accent-10);
  --accent-20: var(--color-accent-20);
  --accent-30: var(--color-accent-30);
  --accent-40: var(--color-accent-40);
  --accent-50: var(--color-accent-50);
  --accent-60: var(--color-accent-60);
  --accent-70: var(--color-accent-70);
  --accent-80: var(--color-accent-80);
  --accent-90: var(--color-accent-90);
  --accent-95: var(--color-accent-95);
  --accent-99: var(--color-accent-99);
  --accent-100: var(--color-accent-100);
  --text-color-0: var(--color-text-0);
  --text-color-10: var(--color-text-10);
  --text-color-20: var(--color-text-20);
  --text-color-30: var(--color-text-30);
  --text-color-40: var(--color-text-40);
  --text-color-50: var(--color-text-50);
  --text-color-60: var(--color-text-60);
  --text-color-70: var(--color-text-70);
  --text-color-80: var(--color-text-80);
  --text-color-90: var(--color-text-90);
  --text-color-95: var(--color-text-95);
  --text-color-99: var(--color-text-99);
  --text-color-100: var(--color-text-100);
  --surface: var(--color-surface);
  --surface-default: var(--color-surface-default);
  --surface-dim: var(--color-surface-dim);
  --surface-container-low: var(--color-surface-container-low);
  --surface-container: var(--color-surface-container);
  --surface-container-high: var(--color-surface-container-high);
  --surface-modal: var(--color-surface-modal);
  --text-color: var(--color-text);
  --text-primary: var(--color-text-primary);
  --text-primary-default: var(--color-text-primary-default);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --accent: var(--color-accent);
  --accent-default: var(--color-accent-default);
  --accent-strong: var(--color-accent-strong);
  --danger: var(--color-danger);
  --danger-text: var(--color-danger-text);
  --danger-soft: var(--color-danger-soft);
  --success: var(--color-success);
  --success-text: var(--color-success-text);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-text: var(--color-warning-text);
  --warning-soft: var(--color-warning-soft);
  --outline: var(--color-outline);
  --outline-variant: var(--color-outline-variant);
  --primary: var(--color-primary);
  --text-primary-30: var(--color-text-30);
  --text-primary-40: var(--color-text-40);
  --text-primary-50: var(--color-text-50);
  --text-primary-60: var(--color-text-60);
  --text-primary-70: var(--color-text-70);
  --text-primary-80: var(--color-text-80);
  --text-primary-90: var(--color-text-90);
  --text-muted: var(--color-text-secondary);
  --text-soft: var(--color-text-tertiary);
  --king-space: clamp(3rem, 5vw, 5rem);
  --shadow-dna: var(--shadow-dna);
  --elevation-0: var(--shadow-elevation-0);
  --elevation-1: var(--shadow-elevation-1);
  --elevation-2: var(--shadow-elevation-2);
  --elevation-3: var(--shadow-elevation-3);
  --elevation-4: var(--shadow-elevation-4);
  --surface-flat: var(--shadow-elevation-0);
  --surface-raised: var(--shadow-elevation-1);
  --surface-floating: var(--shadow-elevation-2);
  --surface-hover: var(--shadow-elevation-2);
  --surface-active: var(--shadow-elevation-1);
  --surface-focus: var(--shadow-elevation-3);
  --ease-standard: var(--motion-ease-standard);
  --ease-emphasized: var(--motion-ease-emphasized);
  --ease-decelerate: var(--motion-ease-decelerate);
  --ease-accelerate: var(--motion-ease-accelerate);
  --duration-short: var(--motion-fast);
  --duration-medium: var(--motion-standard);
}

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

html {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background-color: oklch(from var(--surface-95) l c h/0.6);
  overflow-x: clip;
}

p {
  max-inline-size: 65ch;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  vertical-align: middle;
}

svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-inline-size: 100%;
}

article {
  display: block;
}

ul,
ol {
  margin: 0;
}

li {
  margin: 0;
  padding: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin: 0 0 var(--space-s);
  padding: 0;
  color: var(--color-text-primary);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-outlined.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-round.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-sharp.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Two Tone";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-two-tone.woff2") format("woff2");
}
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-transform: none;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.material-icons {
  font-family: "Material Icons";
}

.material-icons-outlined {
  font-family: "Material Icons Outlined";
}

.material-icons-round {
  font-family: "Material Icons Round";
}

.material-icons-sharp {
  font-family: "Material Icons Sharp";
}

.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
}

/* layout */
.container,
.frame,
.section-shell {
  width: min(100%, var(--frame-max));
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Cover — Vertically centred full-height layout.
 * .cover__centered is truly centred regardless of header/footer height.
 * Perfect for login pages, 404 screens, empty states, and hero sections.
 *
 * Usage:
 *   <div class="cover">
 *     <header class="cover__header">…</header>
 *     <main class="cover__centered">…</main>
 *     <footer class="cover__footer">…</footer>
 *   </div>
 *
 * Header and footer are optional — the centred element works alone too.
 * ────────────────────────────────────────────────────────────────────────── */
.cover {
  --cover-min-height: 100dvh;
  --cover-padding: var(--space-l);
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-height);
  padding: var(--cover-padding);
  gap: var(--space-l);
}

.cover__centered {
  margin-block: auto;
}

/* ── Modifiers ─────────────────────────────────────────────────────────────── */
/* For section-level use rather than full pages */
.cover--half {
  --cover-min-height: 50dvh;
}

/* No outer padding — useful when the cover fills a pre-padded container */
.cover--flush {
  --cover-padding: 0;
}

.section {
  position: relative;
}

/* Legacy section convenience helpers: keep temporarily for compatibility. */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
}

/* abstracts */
.grid-12,
.page-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* Mobile default: every grid child spans the full width until a breakpoint class
   overrides it. Without this, children sit in 1/12-wide tracks on narrow screens. */
.grid-12 > *,
.page-grid > *,
.content-grid > * {
  grid-column: 1/-1;
}

.col-full {
  grid-column: 1/-1;
}

/*
 * Centered spans inside a 12-col grid (even spans only — odd spans can't
 * be perfectly centered on integer column lines). Pairs `grid-column-start`
 * with `span` so the child sits symmetrically: e.g. an 8-col block leaves
 * 2 empty columns on each side.
 */
/*
 * Right-aligned spans inside a 12-col grid. Places the block flush to the
 * trailing edge: e.g. `.md-col-4-end` starts at column 9 and spans 4.
 * Works for any span 1–11. Use in place of md-col-N — the span is already
 * baked in, so you only need this one class.
 */
@media (min-width: 600px) {
  .grid-12,
  .page-grid,
  .content-grid {
    align-items: stretch;
  }
  .md-col-1 {
    grid-column: span 1;
  }
  .md-col-2 {
    grid-column: span 2;
  }
  .md-col-3 {
    grid-column: span 3;
  }
  .md-col-4 {
    grid-column: span 4;
  }
  .md-col-5 {
    grid-column: span 5;
  }
  .md-col-6 {
    grid-column: span 6;
  }
  .md-col-7 {
    grid-column: span 7;
  }
  .md-col-8 {
    grid-column: span 8;
  }
  .md-col-9 {
    grid-column: span 9;
  }
  .md-col-10 {
    grid-column: span 10;
  }
  .md-col-11 {
    grid-column: span 11;
  }
  .md-col-12 {
    grid-column: span 12;
  }
  .md-col-start-1 {
    grid-column-start: 1;
  }
  .md-col-start-2 {
    grid-column-start: 2;
  }
  .md-col-start-3 {
    grid-column-start: 3;
  }
  .md-col-start-4 {
    grid-column-start: 4;
  }
  .md-col-start-5 {
    grid-column-start: 5;
  }
  .md-col-start-6 {
    grid-column-start: 6;
  }
  .md-col-start-7 {
    grid-column-start: 7;
  }
  .md-col-start-8 {
    grid-column-start: 8;
  }
  .md-col-start-9 {
    grid-column-start: 9;
  }
  .md-col-start-10 {
    grid-column-start: 10;
  }
  .md-col-start-11 {
    grid-column-start: 11;
  }
  .md-col-start-12 {
    grid-column-start: 12;
  }
  .md-col-start-13 {
    grid-column-start: 13;
  }
  .md-col-2-centered {
    grid-column: 6/span 2;
  }
  .md-col-4-centered {
    grid-column: 5/span 4;
  }
  .md-col-6-centered {
    grid-column: 4/span 6;
  }
  .md-col-8-centered {
    grid-column: 3/span 8;
  }
  .md-col-10-centered {
    grid-column: 2/span 10;
  }
  .md-col-1-end {
    grid-column: 12/span 1;
  }
  .md-col-2-end {
    grid-column: 11/span 2;
  }
  .md-col-3-end {
    grid-column: 10/span 3;
  }
  .md-col-4-end {
    grid-column: 9/span 4;
  }
  .md-col-5-end {
    grid-column: 8/span 5;
  }
  .md-col-6-end {
    grid-column: 7/span 6;
  }
  .md-col-7-end {
    grid-column: 6/span 7;
  }
  .md-col-8-end {
    grid-column: 5/span 8;
  }
  .md-col-9-end {
    grid-column: 4/span 9;
  }
  .md-col-10-end {
    grid-column: 3/span 10;
  }
  .md-col-11-end {
    grid-column: 2/span 11;
  }
}
@media (min-width: 840px) {
  .exp-col-1 {
    grid-column: span 1;
  }
  .exp-col-2 {
    grid-column: span 2;
  }
  .exp-col-3 {
    grid-column: span 3;
  }
  .exp-col-4 {
    grid-column: span 4;
  }
  .exp-col-5 {
    grid-column: span 5;
  }
  .exp-col-6 {
    grid-column: span 6;
  }
  .exp-col-7 {
    grid-column: span 7;
  }
  .exp-col-8 {
    grid-column: span 8;
  }
  .exp-col-9 {
    grid-column: span 9;
  }
  .exp-col-10 {
    grid-column: span 10;
  }
  .exp-col-11 {
    grid-column: span 11;
  }
  .exp-col-12 {
    grid-column: span 12;
  }
  .exp-col-start-1 {
    grid-column-start: 1;
  }
  .exp-col-start-2 {
    grid-column-start: 2;
  }
  .exp-col-start-3 {
    grid-column-start: 3;
  }
  .exp-col-start-4 {
    grid-column-start: 4;
  }
  .exp-col-start-5 {
    grid-column-start: 5;
  }
  .exp-col-start-6 {
    grid-column-start: 6;
  }
  .exp-col-start-7 {
    grid-column-start: 7;
  }
  .exp-col-start-8 {
    grid-column-start: 8;
  }
  .exp-col-start-9 {
    grid-column-start: 9;
  }
  .exp-col-start-10 {
    grid-column-start: 10;
  }
  .exp-col-start-11 {
    grid-column-start: 11;
  }
  .exp-col-start-12 {
    grid-column-start: 12;
  }
  .exp-col-start-13 {
    grid-column-start: 13;
  }
  .exp-col-2-centered {
    grid-column: 6/span 2;
  }
  .exp-col-4-centered {
    grid-column: 5/span 4;
  }
  .exp-col-6-centered {
    grid-column: 4/span 6;
  }
  .exp-col-8-centered {
    grid-column: 3/span 8;
  }
  .exp-col-10-centered {
    grid-column: 2/span 10;
  }
  .exp-col-1-end {
    grid-column: 12/span 1;
  }
  .exp-col-2-end {
    grid-column: 11/span 2;
  }
  .exp-col-3-end {
    grid-column: 10/span 3;
  }
  .exp-col-4-end {
    grid-column: 9/span 4;
  }
  .exp-col-5-end {
    grid-column: 8/span 5;
  }
  .exp-col-6-end {
    grid-column: 7/span 6;
  }
  .exp-col-7-end {
    grid-column: 6/span 7;
  }
  .exp-col-8-end {
    grid-column: 5/span 8;
  }
  .exp-col-9-end {
    grid-column: 4/span 9;
  }
  .exp-col-10-end {
    grid-column: 3/span 10;
  }
  .exp-col-11-end {
    grid-column: 2/span 11;
  }
}
@media (min-width: 1200px) {
  .lg-col-1 {
    grid-column: span 1;
  }
  .lg-col-2 {
    grid-column: span 2;
  }
  .lg-col-3 {
    grid-column: span 3;
  }
  .lg-col-4 {
    grid-column: span 4;
  }
  .lg-col-5 {
    grid-column: span 5;
  }
  .lg-col-6 {
    grid-column: span 6;
  }
  .lg-col-7 {
    grid-column: span 7;
  }
  .lg-col-8 {
    grid-column: span 8;
  }
  .lg-col-9 {
    grid-column: span 9;
  }
  .lg-col-10 {
    grid-column: span 10;
  }
  .lg-col-11 {
    grid-column: span 11;
  }
  .lg-col-12 {
    grid-column: span 12;
  }
  .lg-col-start-1 {
    grid-column-start: 1;
  }
  .lg-col-start-2 {
    grid-column-start: 2;
  }
  .lg-col-start-3 {
    grid-column-start: 3;
  }
  .lg-col-start-4 {
    grid-column-start: 4;
  }
  .lg-col-start-5 {
    grid-column-start: 5;
  }
  .lg-col-start-6 {
    grid-column-start: 6;
  }
  .lg-col-start-7 {
    grid-column-start: 7;
  }
  .lg-col-start-8 {
    grid-column-start: 8;
  }
  .lg-col-start-9 {
    grid-column-start: 9;
  }
  .lg-col-start-10 {
    grid-column-start: 10;
  }
  .lg-col-start-11 {
    grid-column-start: 11;
  }
  .lg-col-start-12 {
    grid-column-start: 12;
  }
  .lg-col-start-13 {
    grid-column-start: 13;
  }
  .lg-col-2-centered {
    grid-column: 6/span 2;
  }
  .lg-col-4-centered {
    grid-column: 5/span 4;
  }
  .lg-col-6-centered {
    grid-column: 4/span 6;
  }
  .lg-col-8-centered {
    grid-column: 3/span 8;
  }
  .lg-col-10-centered {
    grid-column: 2/span 10;
  }
  .lg-col-1-end {
    grid-column: 12/span 1;
  }
  .lg-col-2-end {
    grid-column: 11/span 2;
  }
  .lg-col-3-end {
    grid-column: 10/span 3;
  }
  .lg-col-4-end {
    grid-column: 9/span 4;
  }
  .lg-col-5-end {
    grid-column: 8/span 5;
  }
  .lg-col-6-end {
    grid-column: 7/span 6;
  }
  .lg-col-7-end {
    grid-column: 6/span 7;
  }
  .lg-col-8-end {
    grid-column: 5/span 8;
  }
  .lg-col-9-end {
    grid-column: 4/span 9;
  }
  .lg-col-10-end {
    grid-column: 3/span 10;
  }
  .lg-col-11-end {
    grid-column: 2/span 11;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

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

/* ──────────────────────────────────────────────────────────────────────────
 * Sidebar — Intrinsically responsive content + aside layout.
 * The aside retains its natural width; the main content grows to fill the
 * remaining space. Both wrap to a stacked column when the combined width
 * drops below --sidebar-content-min — no media queries needed.
 *
 * Usage:
 *   <div class="with-sidebar">
 *     <aside class="sidebar__aside">…</aside>
 *     <main class="sidebar__main">…</main>
 *   </div>
 *
 * Customise via CSS custom properties on the element:
 *   style="--sidebar-width: 20rem; --sidebar-gap: var(--space-xl);"
 * ────────────────────────────────────────────────────────────────────────── */
.with-sidebar {
  --sidebar-width: 16rem;
  --sidebar-gap: var(--space-l);
  --sidebar-content-min: 55%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap);
}

.sidebar__aside {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

.sidebar__main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min);
}

/* ── Modifiers ─────────────────────────────────────────────────────────────── */
/* Flips aside to the right */
.with-sidebar--reverse {
  flex-direction: row-reverse;
}

.with-sidebar--narrow {
  --sidebar-width: 10rem;
}

.with-sidebar--wide {
  --sidebar-width: 22rem;
}

.stack,
.stack-tight,
.stack-loose {
  display: flex;
  flex-direction: column;
}

.stack {
  gap: var(--space-m);
}

.stack--xs {
  gap: var(--space-xs);
}

.stack--sm {
  gap: var(--space-s);
}

.stack--lg {
  gap: var(--space-l);
}

.stack--xl {
  gap: var(--space-xl);
}

.stack-tight {
  gap: var(--space-s);
}

.stack-loose {
  gap: var(--space-l);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Switcher — Flexbox row that flips to a stacked column when its total
 * width falls below --switcher-threshold. No media queries; purely
 * intrinsic. Pair with .switcher--sm / --lg to set the breakpoint.
 *
 * Usage:
 *   <div class="switcher">
 *     <div>Item one</div>
 *     <div>Item two</div>
 *     <div>Item three</div>
 *   </div>
 *
 * Override threshold inline:
 *   <div class="switcher" style="--switcher-threshold: 56rem;">
 * ────────────────────────────────────────────────────────────────────────── */
.switcher {
  --switcher-threshold: 48rem;
  --switcher-gap: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap);
}

/* Each child tries to grow; wraps to full-width when threshold is crossed */
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
}

/* ── Per-row limits — add class to cap items before wrapping ──────────────── */
/* nth-last-child doesn't accept CSS vars so we expose discrete modifiers.    */
/* Max 2 per row */
.switcher--max-2 > :nth-last-child(n+3),
.switcher--max-2 > :nth-last-child(n+3) ~ * {
  flex-basis: 100%;
}

/* Max 3 per row */
.switcher--max-3 > :nth-last-child(n+4),
.switcher--max-3 > :nth-last-child(n+4) ~ * {
  flex-basis: 100%;
}

/* ── Threshold presets ─────────────────────────────────────────────────────── */
.switcher--sm {
  --switcher-threshold: 28rem;
}

.switcher--lg {
  --switcher-threshold: 64rem;
}

/* components */
/* ──────────────────────────────────────────────────────────────────────────
 * Alert — Inline status message banners.
 * Always pair with role="alert" (errors) or role="status" (info/success).
 *
 * Usage:
 *   <div class="alert alert--danger" role="alert">
 *     <span class="alert__icon material-icons">error</span>
 *     <div class="alert__body">
 *       <p class="alert__title">Payment failed</p>
 *       <p class="alert__message">Check your card details and try again.</p>
 *     </div>
 *     <button class="alert__close" aria-label="Dismiss">✕</button>
 *   </div>
 * ────────────────────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-container-low);
  color: var(--color-text-primary);
  font-size: var(--step-0);
  line-height: var(--lh-body);
}

/* ── Semantic variants ─────────────────────────────────────────────────────── */
.alert--success {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.alert--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.alert--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

/* ── Inner elements ────────────────────────────────────────────────────────── */
.alert__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  margin-block-start: 0.1em;
}

.alert__body {
  flex: 1;
  min-inline-size: 0;
}

.alert__title {
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-xxs);
}

.alert__message {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.alert__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: none;
  border-radius: var(--radius-control-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

.alert__close:hover {
  opacity: 1;
}

.alert__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  background-color: var(--color-surface-100);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.button:hover {
  background-color: var(--color-surface-container-low);
}

.button:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.1875rem var(--color-accent-95);
}

.button:active {
  background-color: var(--color-surface-container-high);
  border-color: var(--color-outline);
  transform: translateY(0.0625rem);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Variants ───────────────────────────────────────────────────────────── */
.button.button--primary {
  background-color: var(--color-accent);
  border-color: transparent;
  color: var(--color-surface-100);
}

.button.button--primary:hover {
  background-color: var(--color-accent-strong);
}

.button.button--primary:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 0.1875rem var(--color-accent-95);
}

.button.button--primary:active {
  background-color: var(--color-accent-40);
  border-color: transparent;
}

.button.button--danger {
  background-color: var(--color-danger);
  border-color: transparent;
  color: var(--color-surface-100);
}

.button.button--danger:hover {
  background-color: var(--color-danger-text);
}

.button.button--danger:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 0.1875rem var(--color-danger-soft);
}

.button.button--danger:active {
  background-color: var(--color-danger-text);
  border-color: transparent;
}

.button.button--ghost {
  background-color: transparent;
  border-color: var(--color-outline);
}

.button.button--ghost:hover {
  background-color: var(--color-surface-container-low);
}

.button.button--ghost:active {
  background-color: var(--color-surface-container-high);
  border-color: var(--color-outline);
}

.button.button--link {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding-inline: var(--space-xxs);
}

.button.button--link:hover {
  background-color: transparent;
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.button.button--link:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 0.1875rem var(--color-accent-95);
}

.button.button--link:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent-40);
}

/* ── Size modifiers ─────────────────────────────────────────────────────── */
.button--m {
  padding-inline: var(--space-m);
  border-radius: var(--radius-control-md);
}

.button--l {
  padding-inline: var(--space-l);
  border-radius: var(--radius-control-md);
}

.button--xl {
  padding-inline: var(--space-xl);
  border-radius: var(--radius-control-lg);
}

.button--xxl {
  padding-inline: var(--space-xxl);
  border-radius: var(--radius-control-lg);
}

/* ──────────────────────────────────────────────────────────────────────────
 * FAQ — Collapsible question-and-answer list using native <details>/<summary>.
 * No JavaScript required. Each item opens independently.
 *
 * Usage:
 *   <section class="faq">
 *     <h2 class="faq__title">Frequently Asked Questions</h2>
 *     <div class="faq__list">
 *       <details class="faq__item">
 *         <summary class="faq__question">Question text?</summary>
 *         <div class="faq__answer"><p>Answer text.</p></div>
 *       </details>
 *     </div>
 *   </section>
 * ────────────────────────────────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.faq__title {
  color: var(--color-text-primary);
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq__item {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-100);
  overflow: hidden;
  transition: box-shadow var(--duration-fast, 150ms) ease;
}
.faq__item[open] {
  box-shadow: var(--shadow-elevation-1);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  color: var(--color-text-primary);
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__question::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  transition: transform var(--duration-fast, 150ms) ease;
}
details[open] > .faq__question::after {
  content: "−";
}
.faq__question:hover {
  background: var(--color-surface-200, var(--color-surface-100));
}
.faq__question:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: -2px;
}

.faq__answer {
  padding: 0 var(--space-l) var(--space-m);
  color: var(--color-text-secondary);
  font-size: var(--step-0);
  line-height: var(--lh-body);
}
.faq__answer > * + * {
  margin-block-start: var(--space-xs);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Top Navigation — slim utility bar that sits above the main nav.
 * Typically used for announcements, locale/currency switchers, or
 * secondary quick-links (e.g. login, help, status).
 *
 * Usage:
 *   <div class="nav-top">
 *     <div class="nav-top__inner">
 *       <p class="nav-top__message">Free shipping on orders over $50</p>
 *       <nav class="nav-top__actions" aria-label="Utility navigation">
 *         <a class="nav-top__link" href="/login">Sign in</a>
 *         <a class="nav-top__link" href="/help">Help</a>
 *       </nav>
 *     </div>
 *   </div>
 * ────────────────────────────────────────────────────────────────────────── */
.nav-top {
  background: var(--color-surface-container);
  border-bottom: 1px solid var(--color-outline-variant);
}

.nav-top__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
  max-inline-size: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
  padding-block: var(--space-xs);
  min-height: 2.5rem;
}
@media (min-width: 840px) {
  .nav-top__inner {
    justify-content: space-between;
  }
}

.nav-top__message {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  color: var(--color-text-secondary);
  text-align: center;
  flex: 1;
}

.nav-top__message a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-top__message a:hover {
  color: var(--color-accent-strong);
}

.nav-top__actions {
  display: none;
  align-items: center;
  gap: var(--space-m);
  flex-shrink: 0;
}
@media (min-width: 840px) {
  .nav-top__actions {
    display: flex;
  }
}

.nav-top__link {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

.nav-top__link:hover {
  color: var(--color-text-primary);
}

.nav-top__link:focus-visible {
  outline: none;
  color: var(--color-text-primary);
  border-radius: var(--radius-control-sm);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* ── Variants ──────────────────────────────────────────────────────────────── */
/* Solid accent background — use for important announcements */
.nav-top--accent {
  background: var(--color-accent-50);
  border-bottom-color: var(--color-accent-60);
}
.nav-top--accent .nav-top__message,
.nav-top--accent .nav-top__link {
  color: oklch(100% 0 0deg);
}
.nav-top--accent .nav-top__message a {
  color: oklch(100% 0 0deg);
  font-weight: var(--weight-semibold);
}
.nav-top--accent .nav-top__link:hover,
.nav-top--accent .nav-top__message a:hover {
  opacity: 0.85;
}

/* Dark surface */
.nav-top--dark {
  background: var(--color-surface-0);
  border-bottom-color: var(--color-surface-10);
}
.nav-top--dark .nav-top__message,
.nav-top--dark .nav-top__link {
  color: var(--color-text-80);
}
.nav-top--dark .nav-top__link:hover {
  color: var(--color-text-99);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Main Navigation — primary site header with logo, nav links, optional
 * dropdown menus, action buttons, and a mobile hamburger toggle.
 *
 * Usage:
 *   <header class="nav-main" role="banner">
 *     <div class="nav-main__inner">
 *       <a class="nav-main__brand" href="/">
 *         <img class="nav-main__logo" src="logo.svg" alt="Brand" />
 *       </a>
 *
 *       <button class="nav-main__toggle" aria-expanded="false"
 *               aria-controls="primary-nav" aria-label="Open menu">
 *         <span class="nav-main__toggle-icon"></span>
 *       </button>
 *
 *       <nav id="primary-nav" class="nav-main__nav" aria-label="Primary">
 *         <ul class="nav-main__list">
 *           <li class="nav-main__item">
 *             <a class="nav-main__link" href="/about">About</a>
 *           </li>
 *           <li class="nav-main__item nav-main__item--has-dropdown">
 *             <button class="nav-main__link nav-main__link--dropdown"
 *                     aria-expanded="false">Products</button>
 *             <ul class="nav-main__dropdown">
 *               <li><a class="nav-main__dropdown-link" href="/products/a">Item A</a></li>
 *               <li><a class="nav-main__dropdown-link" href="/products/b">Item B</a></li>
 *             </ul>
 *           </li>
 *         </ul>
 *       </nav>
 *
 *       <div class="nav-main__actions">
 *         <a class="button" href="/login">Sign in</a>
 *         <a class="button button--primary" href="/signup">Get started</a>
 *       </div>
 *     </div>
 *   </header>
 * ────────────────────────────────────────────────────────────────────────── */
/* ── Shell ─────────────────────────────────────────────────────────────────── */
.nav-main {
  --nav-height: 4rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-outline-variant);
  transition: box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.nav-main--scrolled {
  box-shadow: 0 1px 12px oklch(from var(--color-text-0) l c h/0.08);
}

.nav-main__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  max-inline-size: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
  height: var(--nav-height);
}

/* ── Brand / Logo ──────────────────────────────────────────────────────────── */
.nav-main__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-headline);
  line-height: 1;
}

.nav-main__brand:focus-visible {
  outline: none;
  border-radius: var(--radius-control-sm);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.nav-main__logo {
  display: block;
  height: 2rem;
  width: auto;
}

/* ── Nav list ──────────────────────────────────────────────────────────────── */
.nav-main__nav {
  display: none;
  flex: 1;
}
@media (min-width: 840px) {
  .nav-main__nav {
    display: flex;
    align-items: center;
  }
}

.nav-main__list {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-main__item {
  position: relative;
}

.nav-main__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-control-md);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}

.nav-main__link:hover {
  background: var(--color-surface-container);
  color: var(--color-text-primary);
}

.nav-main__link:focus-visible {
  outline: none;
  color: var(--color-text-primary);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.nav-main__link--active,
.nav-main__link[aria-current=page] {
  color: var(--color-text-primary);
  background: var(--color-surface-container);
  font-weight: var(--weight-semibold);
}

/* Caret for dropdown triggers */
.nav-main__link--dropdown::after {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform var(--motion-fast) var(--motion-ease-standard);
  flex-shrink: 0;
}

.nav-main__link--dropdown[aria-expanded=true]::after {
  transform: rotate(180deg);
}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.nav-main__dropdown {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  translate: -50% 0;
  z-index: 200;
  min-width: 12rem;
  list-style: none;
  margin: 0;
  padding: var(--space-xs);
  background: var(--color-surface-modal);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-sm);
  box-shadow: 0 8px 24px oklch(from var(--color-text-0) l c h/0.1);
  /* Hidden by default; toggled via aria-expanded + JS */
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-standard);
}

.nav-main__item--has-dropdown:is(:hover, :focus-within) .nav-main__dropdown,
.nav-main__item--has-dropdown .nav-main__dropdown[data-open] {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.nav-main__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-control-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}

.nav-main__dropdown-link:hover {
  background: var(--color-surface-container);
  color: var(--color-text-primary);
}

.nav-main__dropdown-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* ── Actions slot (CTAs, avatar, etc.) ──────────────────────────────────────── */
.nav-main__actions {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}
@media (min-width: 840px) {
  .nav-main__actions {
    display: flex;
  }
}

/* ── Mobile toggle button ──────────────────────────────────────────────────── */
.nav-main__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard);
}
@media (min-width: 840px) {
  .nav-main__toggle {
    display: none;
  }
}

.nav-main__toggle:hover {
  background: var(--color-surface-container);
}

.nav-main__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* Animated three-bar icon */
.nav-main__toggle-icon,
.nav-main__toggle-icon::before,
.nav-main__toggle-icon::after {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--motion-medium) var(--motion-ease-standard), opacity var(--motion-fast) var(--motion-ease-standard);
}

.nav-main__toggle-icon {
  position: relative;
}

.nav-main__toggle-icon::before,
.nav-main__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-main__toggle-icon::before {
  top: -5px;
}

.nav-main__toggle-icon::after {
  top: 5px;
}

/* ×  shape when open */
.nav-main__toggle[aria-expanded=true] .nav-main__toggle-icon {
  background: transparent;
}

.nav-main__toggle[aria-expanded=true] .nav-main__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-main__toggle[aria-expanded=true] .nav-main__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────── */
.nav-main__drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-modal);
  padding: var(--space-l) var(--frame-gutter);
  padding-top: calc(var(--nav-height) + var(--space-m));
  transform: translateX(-100%);
  transition: transform var(--motion-medium) var(--motion-ease-standard);
  overflow-y: auto;
}
@media (min-width: 840px) {
  .nav-main__drawer {
    display: none;
  }
}

.nav-main__drawer[data-open] {
  transform: translateX(0);
}

.nav-main__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.nav-main__drawer-link {
  display: flex;
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-control-md);
  color: var(--color-text-secondary);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}

.nav-main__drawer-link:hover,
.nav-main__drawer-link[aria-current=page] {
  background: var(--color-surface-container);
  color: var(--color-text-primary);
}

.nav-main__drawer-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.nav-main__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-outline-variant);
}

/* ── Variants ──────────────────────────────────────────────────────────────── */
/* Glass effect — float over hero images */
.nav-main--glass {
  background: oklch(from var(--color-surface-100) l c h/0.76);
  backdrop-filter: blur(20px) saturate(1.18);
  border-bottom-color: oklch(from var(--color-outline-variant) l c h/0.5);
}

/* Transparent until scrolled */
.nav-main--transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.nav-main--transparent.nav-main--scrolled {
  background: var(--color-surface-container-low);
  border-bottom-color: var(--color-outline-variant);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Footer Navigation — multi-column link grid with a bottom bar for
 * branding, social links, and legal/copyright text.
 *
 * Usage:
 *   <footer class="footer-nav" role="contentinfo">
 *     <div class="footer-nav__inner">
 *
 *       \3c !-- Brand column -->
 *       <div class="footer-nav__brand-col">
 *         <a class="footer-nav__brand" href="/">Brand</a>
 *         <p class="footer-nav__tagline">Short description goes here.</p>
 *         <div class="footer-nav__social">
 *           <a class="footer-nav__social-link" href="#" aria-label="Twitter">…</a>
 *         </div>
 *       </div>
 *
 *       \3c !-- Link columns -->
 *       <nav class="footer-nav__col" aria-label="Product">
 *         <p class="footer-nav__heading">Product</p>
 *         <ul class="footer-nav__list">
 *           <li><a class="footer-nav__link" href="#">Features</a></li>
 *           <li><a class="footer-nav__link" href="#">Pricing</a></li>
 *         </ul>
 *       </nav>
 *
 *     </div>
 *
 *     <div class="footer-nav__bottom">
 *       <p class="footer-nav__copy">© 2026 Brand. All rights reserved.</p>
 *       <nav class="footer-nav__legal" aria-label="Legal">
 *         <a class="footer-nav__legal-link" href="#">Privacy</a>
 *         <a class="footer-nav__legal-link" href="#">Terms</a>
 *       </nav>
 *     </div>
 *   </footer>
 * ────────────────────────────────────────────────────────────────────────── */
/* ── Shell ─────────────────────────────────────────────────────────────────── */
.footer-nav {
  background: var(--color-surface-container);
  border-top: 1px solid var(--color-outline-variant);
}

.footer-nav__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-inline-size: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
  padding-block-start: var(--space-xxl);
  padding-block-end: var(--space-xl);
}
@media (min-width: 600px) {
  .footer-nav__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 840px) {
  .footer-nav__inner {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-xxl);
  }
}

/* ── Brand column ──────────────────────────────────────────────────────────── */
.footer-nav__brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
@media (min-width: 600px) {
  .footer-nav__brand-col {
    grid-column: 1/-1;
  }
}
@media (min-width: 840px) {
  .footer-nav__brand-col {
    grid-column: auto;
  }
}

.footer-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-headline);
  line-height: 1;
  width: fit-content;
}

.footer-nav__brand:focus-visible {
  outline: none;
  border-radius: var(--radius-control-sm);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.footer-nav__brand-logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.footer-nav__tagline {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-inline-size: 28ch;
}

/* ── Social links ──────────────────────────────────────────────────────────── */
.footer-nav__social {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.footer-nav__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-control-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-modal);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}

.footer-nav__social-link:hover {
  background: var(--color-surface-container-high);
  border-color: var(--color-outline);
  color: var(--color-text-primary);
}

.footer-nav__social-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* ── Link columns ──────────────────────────────────────────────────────────── */
.footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.footer-nav__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-standard);
  width: fit-content;
}

.footer-nav__link:hover {
  color: var(--color-text-primary);
}

.footer-nav__link:focus-visible {
  outline: none;
  border-radius: var(--radius-control-sm);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* Badge — e.g. "New", "Beta" — appended inside an anchor */
.footer-nav__link-badge {
  display: inline-block;
  padding: 0.1em 0.4em;
  margin-inline-start: var(--space-xxs);
  border-radius: var(--radius-pill);
  background: var(--color-accent-95);
  color: var(--color-accent-40);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: middle;
}

/* ── Bottom bar ────────────────────────────────────────────────────────────── */
.footer-nav__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  max-inline-size: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-outline-variant);
}
@media (min-width: 840px) {
  .footer-nav__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-nav__copy {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--lh-label);
}

.footer-nav__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.footer-nav__legal-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-standard);
  white-space: nowrap;
}

.footer-nav__legal-link:hover {
  color: var(--color-text-secondary);
}

.footer-nav__legal-link:focus-visible {
  outline: none;
  border-radius: var(--radius-control-sm);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

/* ── Variants ──────────────────────────────────────────────────────────────── */
/* Dark footer */
.footer-nav--dark {
  background: var(--color-surface-0);
  border-top-color: var(--color-surface-10);
}
.footer-nav--dark .footer-nav__bottom {
  border-top-color: var(--color-surface-10);
}
.footer-nav--dark .footer-nav__brand,
.footer-nav--dark .footer-nav__heading {
  color: var(--color-text-99);
}
.footer-nav--dark .footer-nav__tagline,
.footer-nav--dark .footer-nav__link,
.footer-nav--dark .footer-nav__legal-link,
.footer-nav--dark .footer-nav__copy {
  color: var(--color-text-70);
}
.footer-nav--dark .footer-nav__link:hover,
.footer-nav--dark .footer-nav__legal-link:hover {
  color: var(--color-text-95);
}
.footer-nav--dark .footer-nav__social-link {
  background: var(--color-surface-10);
  border-color: var(--color-surface-20);
  color: var(--color-text-70);
}
.footer-nav--dark .footer-nav__social-link:hover {
  background: var(--color-surface-20);
  border-color: var(--color-surface-30);
  color: var(--color-text-99);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-label);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--color-outline);
}

.breadcrumbs__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

.breadcrumbs__link:hover {
  color: var(--color-text-primary);
}

.breadcrumbs__link:focus-visible {
  outline: none;
  color: var(--color-text-primary);
  box-shadow: 0 0 0 3px var(--color-accent-95);
  border-radius: var(--radius-control-sm);
}

.breadcrumbs__item[aria-current=page] {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-100);
  box-shadow: var(--shadow-elevation-1);
}

.card__title {
  color: var(--color-text-primary);
  font-size: var(--step-1);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
}

.card__text {
  color: var(--color-text-secondary);
}

/* Use .card--interactive when the card itself is a clickable element (anchor or button). */
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-standard);
}

.card--interactive:hover {
  border-color: var(--color-outline);
  box-shadow: var(--shadow-elevation-2);
}

.card--interactive:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.card--interactive:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-elevation-1);
}

.carousel {
  display: grid;
  gap: var(--space-m);
  --carousel-gap: var(--space-m);
  --carousel-slide-size: 100%;
  --carousel-slide-padding: var(--space-l);
}

.carousel__viewport {
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-100);
  box-shadow: var(--shadow-elevation-1);
}

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform var(--motion-moderate) var(--motion-ease-standard);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 var(--carousel-slide-size);
  min-width: 0;
  padding: var(--carousel-slide-padding);
}

.carousel__slide > :first-child {
  margin-top: 0;
}

.carousel__slide > :last-child {
  margin-bottom: 0;
}

.carousel__meta {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}

.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.carousel__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.carousel__button,
.carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-100);
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.carousel__button {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-control-md);
  font-size: var(--text-sm);
  line-height: var(--lh-label);
}

.carousel__button--icon {
  min-width: 2.75rem;
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: var(--step-1);
  line-height: 1;
}

.carousel__dot-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.carousel__dot {
  width: 2.5rem;
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: 1;
}

.carousel__button:hover,
.carousel__dot:hover {
  background: var(--color-surface-container-low);
}

.carousel__button:focus-visible,
.carousel__dot:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.carousel__dot[aria-current=true] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-surface-100);
}

.carousel__button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  cursor: pointer;
}

.checkbox__control {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--color-outline);
  border-radius: var(--radius-control-sm);
  background-color: var(--color-surface-100);
  background-image: linear-gradient(-45deg, transparent 52%, var(--color-surface-100) 52%, var(--color-surface-100) 68%, transparent 68%), linear-gradient(45deg, transparent 58%, var(--color-surface-100) 58%, var(--color-surface-100) 74%, transparent 74%);
  background-position: 0.22rem 0.42rem, 0.42rem 0.16rem;
  background-repeat: no-repeat;
  background-size: 0 0, 0 0;
  box-sizing: border-box;
  appearance: none;
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard), background-size var(--motion-fast) var(--motion-ease-standard);
}

.checkbox__control:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-size: 0.38rem 0.55rem, 0.72rem 0.55rem;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.checkbox__control:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.checkbox__control:checked:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-95), inset 0 0 0 1px var(--color-accent);
}

.checkbox__control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox__control:disabled + * {
  opacity: 0.6;
}

.checkbox__control:disabled,
.checkbox__control:disabled + * {
  cursor: not-allowed;
}

.divider {
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
}

.field-label {
  display: block;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
}

.field-hint {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}

.field-error,
.field-success,
.field-warning {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}

.field-error {
  color: var(--color-danger-text);
}

.field-success {
  color: var(--color-success-text);
}

.field-warning {
  color: var(--color-warning-text);
}

.input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  background: var(--color-surface-100);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
  background: var(--color-surface-100);
}

.input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input[aria-invalid=true] {
  border-color: var(--color-danger);
}

.input[aria-invalid=true]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.list {
  display: grid;
  gap: 0;
}

.list__item {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-outline-variant);
}

.list__item:first-child {
  padding-top: 0;
}

.list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.list__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--step-0);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
}

.list__text {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Modal — Overlay dialog pattern.
 * JS lifecycle: add .modal--open to .modal-backdrop and .modal to trigger
 * enter animation; remove to exit. Always trap focus inside the panel.
 *
 * Usage:
 *   <div class="modal-backdrop" aria-hidden="true"></div>
 *   <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
 *     <div class="modal__panel">
 *       <header class="modal__header">
 *         <h2 class="modal__title" id="modal-title">Title</h2>
 *         <button class="modal__close" aria-label="Close dialog">✕</button>
 *       </header>
 *       <div class="modal__body">…</div>
 *       <footer class="modal__footer">
 *         <button class="button">Cancel</button>
 *         <button class="button button--primary">Confirm</button>
 *       </footer>
 *     </div>
 *   </div>
 * ────────────────────────────────────────────────────────────────────────── */
/* ── Backdrop ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(from var(--color-surface-0) l c h/0.52);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-standard) var(--motion-ease-standard);
}

.modal-backdrop.modal--open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-l);
  pointer-events: none;
}

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.modal__panel {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 36rem;
  max-block-size: calc(100dvh - 2 * var(--space-l));
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-lg);
  background: var(--color-surface-modal);
  box-shadow: var(--shadow-elevation-4);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(1rem) scale(0.97);
  transition: opacity var(--motion-modal-enter) var(--motion-ease-decelerate), transform var(--motion-modal-enter) var(--motion-ease-decelerate);
}

.modal--open .modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Panel size modifiers ──────────────────────────────────────────────────── */
.modal__panel--sm {
  max-inline-size: 24rem;
}

.modal__panel--lg {
  max-inline-size: 52rem;
}

.modal__panel--xl {
  max-inline-size: 72rem;
}

.modal__panel--full {
  max-inline-size: calc(100vw - 2 * var(--space-l));
  max-block-size: calc(100dvh - 2 * var(--space-l));
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-l);
  border-block-end: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
  color: var(--color-text-primary);
}

.modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: none;
  border-radius: var(--radius-control-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}

.modal__close:hover {
  background: var(--color-surface-container);
  color: var(--color-text-primary);
}

.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-l);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  border-block-start: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .modal__panel,
  .modal-backdrop {
    transition: none;
  }
}
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  background: var(--color-surface-100);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.pagination__link:hover {
  background: var(--color-surface-container-low);
}

.pagination__link:active {
  background: var(--color-surface-container-high);
  border-color: var(--color-outline);
}

.pagination__link:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.pagination__link[aria-current=page] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface-100);
  cursor: default;
  pointer-events: none;
}

.pagination__link[aria-disabled=true] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.post-card {
  display: grid;
  gap: var(--space-m);
}

.post-card__link {
  display: grid;
  gap: var(--space-m);
  color: inherit;
  text-decoration: none;
}

.post-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: var(--radius-container-md);
  background: var(--post-card-media, linear-gradient(135deg, var(--color-accent-90), var(--color-accent-60) 55%, var(--color-surface-20)));
  box-shadow: var(--shadow-elevation-1);
}

.post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, oklch(from var(--color-surface-0) l c h/0.2) 100%);
  pointer-events: none;
}

.post-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: grid;
  gap: var(--space-s);
}

.post-card__eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: calc(var(--ls-label) * 0.9);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.post-card__title {
  font-size: clamp(1.35rem, 1.16rem + 0.92vw, 1.95rem);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-headline);
  max-inline-size: 16ch;
  color: var(--color-text-primary);
}

.post-card__excerpt {
  color: var(--color-text-secondary);
  font-size: var(--step-0);
  line-height: 1.6;
  max-inline-size: 42ch;
}

.post-card__link:hover .post-card__title,
.post-card__link:focus-visible .post-card__title {
  color: var(--color-accent-40);
}

.post-card__link:focus-visible {
  outline: none;
}

.post-card__link:focus-visible .post-card__media {
  box-shadow: var(--shadow-elevation-1), 0 0 0 3px var(--color-accent-95);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  cursor: pointer;
}

.radio__control {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--color-outline);
  border-radius: 50%;
  background: var(--color-surface-100);
  box-sizing: border-box;
  appearance: none;
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.radio__control:checked {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 0.275rem var(--color-accent);
}

.radio__control:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.radio__control:checked:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-95), inset 0 0 0 0.275rem var(--color-accent);
}

.radio__control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.radio__control:disabled + * {
  opacity: 0.6;
}

.radio__control:disabled,
.radio__control:disabled + * {
  cursor: not-allowed;
}

.select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  background-color: var(--color-surface-100);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) calc(50% - 0.125rem), calc(100% - 0.8rem) calc(50% - 0.125rem);
  background-repeat: no-repeat;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
  background-color: var(--color-surface-100);
}

.select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.select[aria-invalid=true] {
  border-color: var(--color-danger);
}

.select[aria-invalid=true]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  cursor: pointer;
}

.switch__control {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--color-outline);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-container);
  box-sizing: border-box;
  appearance: none;
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.switch__control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--color-surface-100);
  box-shadow: var(--shadow-elevation-1);
  transform: translateY(-50%);
  transition: transform var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.switch__control:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent-90);
}

.switch__control:checked::before {
  background: var(--color-accent);
  transform: translate(1rem, -50%);
}

.switch__control:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
}

.switch__control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.switch__control:disabled + * {
  opacity: 0.6;
}

.switch__control:disabled,
.switch__control:disabled + * {
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Skeleton — Shimmer loading placeholders.
 * Usage: <div class="skeleton skeleton--text"></div>
 *        <div class="skeleton-group">
 *          <div class="skeleton skeleton--text"></div>
 *          <div class="skeleton skeleton--text"></div>
 *        </div>
 * ────────────────────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.skeleton {
  display: block;
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--color-surface-container) 25%, var(--color-surface-container-high) 50%, var(--color-surface-container) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--motion-linger) var(--motion-ease-standard) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--color-surface-container);
  }
}
/* ── Preset shapes ─────────────────────────────────────────────────────────── */
.skeleton--text {
  height: 1em;
  width: 100%;
}

.skeleton--text-sm {
  height: 0.75em;
  width: 80%;
}

.skeleton--heading {
  height: 1.5em;
  width: 55%;
}

.skeleton--avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton--avatar-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton--button {
  height: 2.75rem;
  width: 8rem;
  border-radius: var(--radius-control-md);
}

.skeleton--card {
  height: 12rem;
  border-radius: var(--radius-container-md);
}

.skeleton--image {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-container-md);
}

/* ── Multi-line group ─────────────────────────────────────────────────────── */
.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Last line in a text group is shorter — mimics natural paragraph endings */
.skeleton-group .skeleton--text:last-child {
  width: 55%;
}

.tabs {
  display: grid;
  gap: var(--space-m);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-outline-variant);
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: var(--radius-control-md) var(--radius-control-md) 0 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.tabs__tab:hover {
  background: var(--color-surface-container-low);
  color: var(--color-text-primary);
}

.tabs__tab:active {
  background: var(--color-surface-container-low);
  color: var(--color-text-primary);
}

.tabs__tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent-90);
  color: var(--color-text-primary);
}

.tabs__tab[aria-selected=true] {
  background: var(--color-surface-100);
  color: var(--color-text-primary);
}

.tabs__tab[aria-selected=true]::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: -1px;
  left: 0.5rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.tabs__panel {
  padding: var(--space-l);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-100);
  box-shadow: var(--shadow-elevation-1);
}

.tabs__panel > :first-child {
  margin-top: 0;
}

.tabs__panel > :last-child {
  margin-bottom: 0;
}

.tabs__panel[hidden] {
  display: none;
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-100);
}

.table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  color: var(--color-text-primary);
}

.table caption {
  padding: var(--space-m);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-align: left;
  caption-side: top;
}

.table th,
.table td {
  padding: 0.875rem var(--space-m);
  border-bottom: 1px solid var(--color-outline-variant);
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  background: var(--color-surface-container-low);
}

.table td {
  color: var(--color-text-secondary);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-md);
  background: var(--color-surface-100);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  resize: vertical;
  transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard);
}

.textarea::placeholder {
  color: var(--color-text-tertiary);
}

.textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-95);
  background: var(--color-surface-100);
}

.textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.textarea[aria-invalid=true] {
  border-color: var(--color-danger);
}

.textarea[aria-invalid=true]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control-sm);
  background: var(--color-surface-container-low);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Toast — Ephemeral notification messages stacked in a fixed region.
 * JS lifecycle: append .toast to .toast-region, add .toast--visible to
 * trigger enter, swap to .toast--exiting before removal for exit motion.
 *
 * Usage:
 *   <div class="toast-region" aria-live="polite" aria-atomic="false"></div>
 *
 *   <div class="toast toast--success toast--visible" role="status">
 *     <span class="toast__icon material-icons">check_circle</span>
 *     <div class="toast__body">
 *       <p class="toast__title">Saved</p>
 *       <p class="toast__message">Your changes have been saved.</p>
 *     </div>
 *     <button class="toast__close" aria-label="Dismiss">✕</button>
 *   </div>
 * ────────────────────────────────────────────────────────────────────────── */
/* ── Region ────────────────────────────────────────────────────────────────── */
.toast-region {
  position: fixed;
  inset-block-end: var(--space-l);
  inset-inline-end: var(--space-l);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-s);
  pointer-events: none;
}

/* ── Toast base ────────────────────────────────────────────────────────────── */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  min-inline-size: 18rem;
  max-inline-size: min(28rem, 100vw - 2 * var(--space-l));
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: var(--color-surface-modal);
  box-shadow: var(--shadow-elevation-3);
  color: var(--color-text-primary);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  pointer-events: auto;
  /* Enter state — starts invisible and slightly shifted */
  opacity: 0;
  transform: translateY(0.5rem) scale(0.97);
  transition: opacity var(--motion-standard) var(--motion-ease-decelerate), transform var(--motion-standard) var(--motion-ease-decelerate);
}

.toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Exit is faster and accelerates out */
.toast--exiting {
  opacity: 0;
  transform: translateY(0.25rem) scale(0.98);
  transition: opacity var(--motion-fast) var(--motion-ease-accelerate), transform var(--motion-fast) var(--motion-ease-accelerate);
}

/* ── Semantic variants ─────────────────────────────────────────────────────── */
.toast--success {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.toast--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.toast--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

/* ── Inner elements ────────────────────────────────────────────────────────── */
.toast__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  margin-block-start: 0.1em;
}

.toast__body {
  flex: 1;
  min-inline-size: 0;
}

.toast__title {
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-xxs);
}

.toast__message {
  font-size: var(--text-sm);
  opacity: 0.85;
}

.toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: none;
  border-radius: var(--radius-control-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

.toast__close:hover {
  opacity: 1;
}

.toast__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}
/* pages */
/* abstracts */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: oklch(from var(--color-surface-100) l c h/0.82);
  border-bottom: 1px solid oklch(from var(--color-outline-variant) l c h/0.8);
  backdrop-filter: blur(16px);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.5rem;
  padding-block: var(--space-xs);
  overflow-x: clip;
}

.navbar-brand {
  display: block;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.navbar-brand img,
.navbar-brand .img-fluid {
  width: clamp(9rem, 18vw, 12rem);
  height: auto;
}

.site-nav {
  position: relative;
}

.nav-toggle,
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-pill);
  background: oklch(from var(--color-surface-100) l c h/0.92);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-elevation-1);
}

.nav-toggle {
  margin-left: auto;
  padding-inline: 0.75rem;
}

.nav-toggle__label {
  display: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  display: block;
  background: oklch(from var(--color-surface-0) l c h/0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(23rem, 100vw - 1rem);
  max-width: calc(100vw - 1rem);
  height: 100dvh;
  padding: var(--space-m);
  background: oklch(from var(--color-surface-100) l c h/0.98);
  border-left: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-elevation-3);
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(100% + 2rem));
  transition: transform var(--motion-standard) var(--motion-ease-standard);
}

.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-outline-variant);
}

.nav-drawer__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-l);
  width: 100%;
  min-width: 0;
  padding-top: var(--space-l);
  overflow-y: auto;
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
}

.nav-links a {
  display: flex;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  transition: color var(--motion-fast) var(--motion-ease-standard);
  white-space: normal;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-control-md);
  background: var(--color-surface-container-low);
  border: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current=page] {
  color: var(--color-text-primary);
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
}

.nav-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 0;
  width: 100%;
}

.feed-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

.nav-right a {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-control-md);
  background: var(--color-surface-container-low);
  border: 1px solid transparent;
  white-space: normal;
}

.feed-link:hover {
  color: var(--color-text-primary);
}

.nav-right a:hover {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
}

.nav-right .button,
.nav-right .btn {
  justify-content: center;
  width: 100%;
}

body.nav-open {
  overflow: hidden;
}

.site-nav.is-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

.site-nav.is-open .nav-drawer {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (min-width: 840px) {
  .nav-container {
    gap: var(--space-l);
  }
  .nav-toggle,
  .nav-close {
    display: none;
  }
  .nav-toggle {
    margin-left: 0;
    padding-inline: 0.9rem;
  }
  .nav-toggle__label {
    display: inline;
  }
  .nav-overlay {
    display: none;
  }
  .nav-drawer {
    position: static;
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    background: transparent;
    border-left: 0;
    box-shadow: none;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-drawer__header {
    display: none;
  }
  .nav-drawer__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    padding-top: 0;
    overflow-y: visible;
  }
  .nav-links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
    width: auto;
  }
  .nav-links a {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    white-space: nowrap;
  }
  .nav-links a:hover,
  .nav-links a[aria-current=page] {
    background: transparent;
    border-color: transparent;
  }
  .nav-right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    width: auto;
  }
  .nav-right a {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    white-space: nowrap;
  }
  .nav-right a:hover {
    background: transparent;
    border-color: transparent;
  }
  .nav-right .btn {
    width: auto;
  }
}
/* ──────────────────────────────────────────────────────────────────────────
 * Article — Prose and blog-post layout.
 * Comfortable reading measure, typographic rhythm, pull-quote, and a
 * full-bleed breakout for wide media inside a constrained column.
 *
 * Usage:
 *   <article class="article">
 *     <header class="article__header">
 *       <p class="article__kicker">Category</p>
 *       <h1 class="article__title">…</h1>
 *       <p class="article__lead">…</p>
 *       <div class="article__meta">…</div>
 *     </header>
 *     <div class="article__body">
 *       <p>…</p>
 *       <blockquote class="article__pullquote">…</blockquote>
 *       <figure class="article__bleed"><img …></figure>
 *     </div>
 *     <footer class="article__footer">…</footer>
 *   </article>
 * ────────────────────────────────────────────────────────────────────────── */
.article {
  max-inline-size: 72ch;
  margin-inline: auto;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.article__header {
  display: grid;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}

.article__kicker {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.article__title {
  font-size: var(--step-4);
  font-weight: var(--weight-strong);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-primary);
}

.article__lead {
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--color-text-secondary);
  max-inline-size: 58ch;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.article__body {
  display: grid;
  gap: var(--space-l);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* Pull quote: indent with accent border */
.article__pullquote {
  padding-inline-start: var(--space-l);
  border-inline-start: 0.25rem solid var(--color-accent);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-block: var(--space-s);
}

/* Full-bleed breakout: escapes the max-inline-size column */
.article__bleed {
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block-start: var(--space-xxl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--color-outline-variant);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Empty State — Zero-data / no-results / error view pattern.
 * Centred by default; use .empty-state--compact for inline sections.
 *
 * Usage:
 *   <div class="empty-state">
 *     <div class="empty-state__icon">
 *       <span class="material-icons">inbox</span>
 *     </div>
 *     <h2 class="empty-state__title">No results</h2>
 *     <p class="empty-state__body">Try adjusting your search or filters.</p>
 *     <div class="empty-state__actions">
 *       <button class="button">Clear filters</button>
 *     </div>
 *   </div>
 * ────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-m);
  padding: var(--space-xxl) var(--space-l);
  min-block-size: 20rem;
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: var(--color-surface-container);
  color: var(--color-text-tertiary);
  font-size: 1.75rem;
  flex-shrink: 0;
}

.empty-state__title {
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-title);
  color: var(--color-text-primary);
}

.empty-state__body {
  max-inline-size: 36ch;
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  font-size: var(--step-0);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-block-start: var(--space-xs);
}

/* ── Compact — for inline empty sections ──────────────────────────────────── */
.empty-state--compact {
  min-block-size: 10rem;
  padding: var(--space-xl) var(--space-l);
  gap: var(--space-s);
}

.empty-state--compact .empty-state__icon {
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.25rem;
}

/* abstracts */
.hero {
  padding: var(--space-l);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-lg);
  background: linear-gradient(180deg, oklch(from var(--color-surface-100) l c h/1) 0%, oklch(from var(--color-surface-container-low) l c h/0.92) 100%);
  box-shadow: var(--shadow-elevation-1);
}

.hero__content {
  display: grid;
  gap: var(--space-m);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.hero__media {
  display: grid;
  gap: var(--space-s);
  min-height: 14rem;
  padding: var(--space-m);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-container-md);
  background: oklch(from var(--color-surface-100) l c h/0.82);
}

.hero__media .card {
  height: 100%;
}

@media (min-width: 840px) {
  .hero {
    padding: var(--space-xl);
  }
}
/* abstracts */
.related-posts {
  display: grid;
  gap: var(--space-l);
}

.related-posts__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.related-posts__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.related-posts__title {
  font-size: clamp(1.9rem, 1.55rem + 1.7vw, 3rem);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  max-inline-size: none;
}

.related-posts__link {
  color: var(--color-text-secondary);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  text-decoration: none;
}

.related-posts__link:hover,
.related-posts__link:focus-visible {
  color: var(--color-text-primary);
}

.related-posts__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.related-posts__carousel {
  --carousel-gap: var(--space-m);
  --carousel-slide-size: min(100%, clamp(16rem, 28vw, 27rem));
  --carousel-slide-padding: 0;
}

.related-posts__carousel .carousel__viewport {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.related-posts__carousel .carousel__button {
  background: var(--color-surface-container-low);
}

@media (min-width: 600px) {
  .related-posts__carousel {
    --carousel-gap: var(--space-l);
  }
}
/* themes */
/* ──────────────────────────────────────────────────────────────────────────
 * Dark theme — Activated via data-theme="dark" on <html> or any ancestor.
 * Overrides only the semantic color aliases; the full palette in abstracts/
 * _colors.scss remains available for components that need raw scale values.
 * ────────────────────────────────────────────────────────────────────────── */
[data-theme=dark] {
  color-scheme: dark;
  --color-surface: oklch(0.22 0.01 var(--color-neutral-hue));
  --color-surface-default: oklch(0.22 0.01 var(--color-neutral-hue));
  --color-surface-dim: oklch(0.18 0.01 var(--color-neutral-hue));
  --color-surface-container-low: oklch(0.26 0.01 var(--color-neutral-hue));
  --color-surface-container: oklch(0.3 0.01 var(--color-neutral-hue));
  --color-surface-container-high: oklch(0.34 0.01 var(--color-neutral-hue));
  --color-surface-modal: oklch(0.26 0.01 var(--color-neutral-hue));
  --color-text: var(--color-text-90);
  --color-text-primary: var(--color-text-99);
  --color-text-primary-default: var(--color-text-99);
  --color-text-secondary: var(--color-text-80);
  --color-text-tertiary: var(--color-text-70);
  --color-accent-default: var(--color-accent-70);
  --color-danger-soft: oklch(28% 0.04 28deg);
  --color-danger-text: oklch(83% 0.08 28deg);
  --color-success-soft: oklch(30% 0.03 152deg);
  --color-success-text: oklch(84% 0.05 152deg);
  --color-warning-soft: oklch(34% 0.03 92deg);
  --color-warning-text: oklch(86% 0.04 92deg);
  --color-outline: oklch(from var(--color-text-70) l c h/0.55);
  --color-outline-variant: oklch(from var(--color-text-80) l c h/0.28);
}

/* ──────────────────────────────────────────────────────────────────────────
 * High-contrast theme — Responds to the OS prefers-contrast: more media
 * feature. Tightens borders, strengthens text, and sharpens outline tokens
 * without altering any component structure.
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --color-outline: var(--color-text-20);
    --color-outline-variant: var(--color-text-30);
    --color-text: var(--color-text-10);
    --color-text-primary: var(--color-text-0);
    --color-text-secondary: var(--color-text-20);
    --color-text-tertiary: var(--color-text-30);
  }
}
/* Combined dark + high-contrast */
@media (prefers-contrast: more) {
  [data-theme=dark] {
    --color-outline: var(--color-text-70);
    --color-outline-variant: var(--color-text-60);
    --color-text-primary: var(--color-text-100);
    --color-text-secondary: var(--color-text-90);
    --color-text-tertiary: var(--color-text-80);
  }
}
/* vendors */
/* utilities */
/* abstracts */
/* ── Spacing utilities ───────────────────────────────────────────────────── */
/* All use --space (1rem) as the shared value. Pair with --king-space for     */
/* large-section use: .padding-t-king, .padding-b-king, etc.                 */
/* Padding — all sides */
.padding {
  padding: var(--space);
}

.padding-t {
  padding-top: var(--space);
}

.padding-r {
  padding-right: var(--space);
}

.padding-b {
  padding-bottom: var(--space);
}

.padding-l {
  padding-left: var(--space);
}

.padding-x {
  padding-inline: var(--space);
}

.padding-y {
  padding-block: var(--space);
}

/* Padding — king-space (fluid: clamp 3rem → 5rem) */
.padding-king {
  padding: var(--king-space);
}

.padding-t-king {
  padding-top: var(--king-space);
}

.padding-r-king {
  padding-right: var(--king-space);
}

.padding-b-king {
  padding-bottom: var(--king-space);
}

.padding-l-king {
  padding-left: var(--king-space);
}

.padding-x-king {
  padding-inline: var(--king-space);
}

.padding-y-king {
  padding-block: var(--king-space);
}

/* Margin — all sides */
.margin {
  margin: var(--space);
}

.margin-t {
  margin-top: var(--space);
}

.margin-r {
  margin-right: var(--space);
}

.margin-b {
  margin-bottom: var(--space);
}

.margin-l {
  margin-left: var(--space);
}

.margin-x {
  margin-inline: var(--space);
}

.margin-y {
  margin-block: var(--space);
}

/* Margin — king-space (fluid: clamp 3rem → 5rem) */
.margin-king {
  margin: var(--king-space);
}

.margin-t-king {
  margin-top: var(--king-space);
}

.margin-r-king {
  margin-right: var(--king-space);
}

.margin-b-king {
  margin-bottom: var(--king-space);
}

.margin-l-king {
  margin-left: var(--king-space);
}

.margin-x-king {
  margin-inline: var(--king-space);
}

.margin-y-king {
  margin-block: var(--king-space);
}

/* ── Border radius ───────────────────────────────────────────────────────── */
/* Scale utilities — map directly to the $radius-tokens base scale.           */
/* Semantic groups (container, media, control) belong in component internals. */
.border-rs {
  border-radius: var(--radius-s);
} /* 0.5 rem   */
.border-rm {
  border-radius: var(--radius-m);
} /* 0.875 rem */
.border-rl {
  border-radius: var(--radius-l);
} /* 1.5 rem   */
.border-rxl {
  border-radius: var(--radius-xl);
} /* 2 rem     */
.border-rfull {
  border-radius: var(--radius-full);
} /* 9999px — fully circular */
.border-rpill {
  border-radius: var(--radius-pill);
} /* 999px  — pill / capsule */
.aspect-standard {
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Spacing scale — direction × size ────────────────────────────────────── */
/* Pattern: .{padding|margin}-{direction}-{size}                              */
/* Directions: t b l r x y  ·  Sizes: xxs xs s m l xl xxl                   */
/* For fluid large-section gaps use the king family above (.padding-y-king).  */
/* padding */
.padding-t-xxs {
  padding-top: var(--space-xxs);
}

.padding-b-xxs {
  padding-bottom: var(--space-xxs);
}

.padding-l-xxs {
  padding-left: var(--space-xxs);
}

.padding-r-xxs {
  padding-right: var(--space-xxs);
}

.padding-x-xxs {
  padding-inline: var(--space-xxs);
}

.padding-y-xxs {
  padding-block: var(--space-xxs);
}

/* margin */
.margin-t-xxs {
  margin-top: var(--space-xxs);
}

.margin-b-xxs {
  margin-bottom: var(--space-xxs);
}

.margin-l-xxs {
  margin-left: var(--space-xxs);
}

.margin-r-xxs {
  margin-right: var(--space-xxs);
}

.margin-x-xxs {
  margin-inline: var(--space-xxs);
}

.margin-y-xxs {
  margin-block: var(--space-xxs);
}

/* padding */
.padding-t-xs {
  padding-top: var(--space-xs);
}

.padding-b-xs {
  padding-bottom: var(--space-xs);
}

.padding-l-xs {
  padding-left: var(--space-xs);
}

.padding-r-xs {
  padding-right: var(--space-xs);
}

.padding-x-xs {
  padding-inline: var(--space-xs);
}

.padding-y-xs {
  padding-block: var(--space-xs);
}

/* margin */
.margin-t-xs {
  margin-top: var(--space-xs);
}

.margin-b-xs {
  margin-bottom: var(--space-xs);
}

.margin-l-xs {
  margin-left: var(--space-xs);
}

.margin-r-xs {
  margin-right: var(--space-xs);
}

.margin-x-xs {
  margin-inline: var(--space-xs);
}

.margin-y-xs {
  margin-block: var(--space-xs);
}

/* padding */
.padding-t-s {
  padding-top: var(--space-s);
}

.padding-b-s {
  padding-bottom: var(--space-s);
}

.padding-l-s {
  padding-left: var(--space-s);
}

.padding-r-s {
  padding-right: var(--space-s);
}

.padding-x-s {
  padding-inline: var(--space-s);
}

.padding-y-s {
  padding-block: var(--space-s);
}

/* margin */
.margin-t-s {
  margin-top: var(--space-s);
}

.margin-b-s {
  margin-bottom: var(--space-s);
}

.margin-l-s {
  margin-left: var(--space-s);
}

.margin-r-s {
  margin-right: var(--space-s);
}

.margin-x-s {
  margin-inline: var(--space-s);
}

.margin-y-s {
  margin-block: var(--space-s);
}

/* padding */
.padding-t-m {
  padding-top: var(--space-m);
}

.padding-b-m {
  padding-bottom: var(--space-m);
}

.padding-l-m {
  padding-left: var(--space-m);
}

.padding-r-m {
  padding-right: var(--space-m);
}

.padding-x-m {
  padding-inline: var(--space-m);
}

.padding-y-m {
  padding-block: var(--space-m);
}

/* margin */
.margin-t-m {
  margin-top: var(--space-m);
}

.margin-b-m {
  margin-bottom: var(--space-m);
}

.margin-l-m {
  margin-left: var(--space-m);
}

.margin-r-m {
  margin-right: var(--space-m);
}

.margin-x-m {
  margin-inline: var(--space-m);
}

.margin-y-m {
  margin-block: var(--space-m);
}

/* padding */
.padding-t-l {
  padding-top: var(--space-l);
}

.padding-b-l {
  padding-bottom: var(--space-l);
}

.padding-l-l {
  padding-left: var(--space-l);
}

.padding-r-l {
  padding-right: var(--space-l);
}

.padding-x-l {
  padding-inline: var(--space-l);
}

.padding-y-l {
  padding-block: var(--space-l);
}

/* margin */
.margin-t-l {
  margin-top: var(--space-l);
}

.margin-b-l {
  margin-bottom: var(--space-l);
}

.margin-l-l {
  margin-left: var(--space-l);
}

.margin-r-l {
  margin-right: var(--space-l);
}

.margin-x-l {
  margin-inline: var(--space-l);
}

.margin-y-l {
  margin-block: var(--space-l);
}

/* padding */
.padding-t-xl {
  padding-top: var(--space-xl);
}

.padding-b-xl {
  padding-bottom: var(--space-xl);
}

.padding-l-xl {
  padding-left: var(--space-xl);
}

.padding-r-xl {
  padding-right: var(--space-xl);
}

.padding-x-xl {
  padding-inline: var(--space-xl);
}

.padding-y-xl {
  padding-block: var(--space-xl);
}

/* margin */
.margin-t-xl {
  margin-top: var(--space-xl);
}

.margin-b-xl {
  margin-bottom: var(--space-xl);
}

.margin-l-xl {
  margin-left: var(--space-xl);
}

.margin-r-xl {
  margin-right: var(--space-xl);
}

.margin-x-xl {
  margin-inline: var(--space-xl);
}

.margin-y-xl {
  margin-block: var(--space-xl);
}

/* padding */
.padding-t-xxl {
  padding-top: var(--space-xxl);
}

.padding-b-xxl {
  padding-bottom: var(--space-xxl);
}

.padding-l-xxl {
  padding-left: var(--space-xxl);
}

.padding-r-xxl {
  padding-right: var(--space-xxl);
}

.padding-x-xxl {
  padding-inline: var(--space-xxl);
}

.padding-y-xxl {
  padding-block: var(--space-xxl);
}

/* margin */
.margin-t-xxl {
  margin-top: var(--space-xxl);
}

.margin-b-xxl {
  margin-bottom: var(--space-xxl);
}

.margin-l-xxl {
  margin-left: var(--space-xxl);
}

.margin-r-xxl {
  margin-right: var(--space-xxl);
}

.margin-x-xxl {
  margin-inline: var(--space-xxl);
}

.margin-y-xxl {
  margin-block: var(--space-xxl);
}

.margin-inline-auto {
  margin-inline: auto;
}

/* Edge-to-edge reset: zeroes margin + padding on large screens (1200px+) so   */
/* full-bleed backgrounds can reach the viewport edge. The breakpoint is baked  */
/* in — drop the class on the element, no per-use media queries needed.         */
@media (min-width: 1200px) {
  .margin-padding-0 {
    margin: 0;
    padding: 0;
  }
}

.border-t {
  border-top: 1px solid var(--outline-variant);
}

.border-b {
  border-bottom: 1px solid var(--outline-variant);
}

.surface {
  background: var(--surface);
  border-radius: var(--radius-media-md);
}

.items-top,
.items-start {
  align-items: flex-start;
}

.items-middle,
.items-center {
  align-items: center;
}

.items-bottom,
.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.self-top,
.self-start {
  align-self: flex-start;
}

.self-middle,
.self-center {
  align-self: center;
}

.self-bottom,
.self-end {
  align-self: flex-end;
}

.place-center {
  place-items: center;
}

.item-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

/* ── Accessibility — screen-reader & visibility utilities ─────────────────── */
/* Visually hidden but announced by screen readers */
.sr-only,
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Undo .sr-only on focus — useful for skip links */
.sr-only:focus,
.visually-hidden:focus {
  position: static;
  inline-size: auto;
  block-size: auto;
  padding: revert;
  margin: revert;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.hidden {
  display: none !important;
}

/* ── Typography scale utilities ───────────────────────────────────────────── */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--step-0);
}

.text-lg {
  font-size: var(--step-1);
}

.text-xl {
  font-size: var(--step-2);
}

.text-2xl {
  font-size: var(--step-3);
}

.font-normal {
  font-weight: var(--weight-regular);
}

.font-medium {
  font-weight: var(--weight-medium);
}

.font-semibold {
  font-weight: var(--weight-semibold);
}

.font-bold {
  font-weight: var(--weight-strong);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* Single-line truncation with ellipsis */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line clamp (override --clamp-lines on the element) */
.line-clamp {
  --clamp-lines: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines);
  overflow: hidden;
}

/* ── Semantic colour utilities ────────────────────────────────────────────── */
.text-accent {
  color: var(--color-accent);
}

.text-danger {
  color: var(--color-danger-text);
}

.text-success {
  color: var(--color-success-text);
}

.text-warning {
  color: var(--color-warning-text);
}

.text-muted {
  color: var(--color-text-tertiary);
}

.bg-surface {
  background: var(--color-surface);
}

.bg-surface-container {
  background: var(--color-surface-container);
}

.bg-danger-soft {
  background: var(--color-danger-soft);
}

.bg-success-soft {
  background: var(--color-success-soft);
}

.bg-warning-soft {
  background: var(--color-warning-soft);
}

/* ── Flex display shorthand ───────────────────────────────────────────────── */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* Gap shortcuts aligned to the spacing scale */
.gap-xxs {
  gap: var(--space-xxs);
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-s {
  gap: var(--space-s);
}

.gap-m {
  gap: var(--space-m);
}

.gap-l {
  gap: var(--space-l);
}

.gap-xl {
  gap: var(--space-xl);
}
:root {
  --color-surface: oklch(97% 0.004 263.39);
  --color-surface-0: oklch(22% 0.09 263.39);
  --color-surface-90: oklch(92% 0.006 263.39);
  --color-surface-95: oklch(96% 0.003 263.39);
  --color-surface-100: oklch(99% 0.002 263.39);
  --color-surface-container: oklch(93% 0.006 263.39);
  --color-surface-container-low: oklch(95% 0.003 263.39);
  --color-text: oklch(5% 0.09 263.39);
  --color-text-primary: var(--color-text);
  --color-text-secondary: oklch(37% 0.09 263.39);
  --color-text-tertiary: oklch(52% 0.09 263.39);
  --color-text-inverse: oklch(95% 0.09 263.39);
  --color-accent: oklch(84% 0.1243 76.58);
  --color-accent-40: oklch(70% 0.13 76.58);
  --color-accent-90: oklch(90% 0.07 76.58);
  --color-accent-95: oklch(95% 0.04 76.58);
  --color-accent-99: oklch(99% 0.02 76.58);
  --color-accent-strong: oklch(62% 0.15 76.58);
  --color-accent-contrast: oklch(14% 0.02 76.58);
  --surface-0: var(--color-surface-0);
  --surface-90: var(--color-surface-90);
  --surface-95: var(--color-surface-95);
  --surface-100: var(--color-surface-100);
  --surface-container: var(--color-surface-container);
  --surface-container-low: var(--color-surface-container-low);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-inverse: var(--color-text-inverse);
  --accent: var(--color-accent);
  --accent-40: var(--color-accent-40);
  --accent-90: var(--color-accent-90);
  --accent-95: var(--color-accent-95);
  --accent-strong: var(--color-accent-strong);
  --accent-contrast: var(--color-accent-contrast);
  --color-outline: oklch(80% 0.018 263.39);
  --color-outline-variant: oklch(88% 0.012 263.39);
  --outline: var(--color-outline);
  --outline-variant: var(--color-outline-variant);
  --color-danger: oklch(50% 0.21 25);
  --color-danger-soft: oklch(95% 0.04 25 / 0.85);
  --color-danger-text: oklch(42% 0.18 25);
  --shadow-color: oklch(22% 0.06 263 / 0.12);
  --shadow-elevation-1:
    0 0.4rem 1rem oklch(from var(--shadow-color) l c h / 0.08),
    0 0.1rem 0.24rem oklch(from var(--shadow-color) l c h / 0.08);
  --shadow-elevation-2:
    0 0.9rem 2rem oklch(from var(--shadow-color) l c h / 0.11),
    0 0.24rem 0.5rem oklch(from var(--shadow-color) l c h / 0.08);
  --shadow-elevation-3:
    0 1.4rem 3rem oklch(from var(--shadow-color) l c h / 0.14),
    0 0.35rem 0.8rem oklch(from var(--shadow-color) l c h / 0.1);
  --elevation-1: var(--shadow-elevation-1);
  --elevation-2: var(--shadow-elevation-2);
  --elevation-3: var(--shadow-elevation-3);
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-label: "Inter", system-ui, -apple-system, sans-serif;
  --step-0: clamp(1rem, 0.75rem + 1vw, 1.125rem);
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 0.75rem;
  --space: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --padding-l: clamp(2.5rem, 4vw, 4rem);
  --padding-xl: clamp(3.75rem, 6vw, 6rem);
  --padding-xxl: clamp(5rem, 8vw, 8rem);
  --grid-gap: var(--space-l);
  --radius: 0.75rem;
  --radius-pill: 0.25rem;
  --radius-control-md: 0.6rem;
  --radius-lg: 1.25rem;
  --radiusedia-lg: 1.25rem;
  --motion-fast: 160ms;
  --motion-standard: 260ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
/* pt-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/PTSans-Regular.ttf") format("truetype");
}
/* pt-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/PTSans-Italic.ttf") format("truetype");
}
/* pt-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/PTSans-Bold.ttf") format("truetype");
}
/* pt-sans-700-italic - latin */
@font-face {
  font-display: swap;
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/PTSans-BoldItalic.ttf") format("truetype");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

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

a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}
a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

p,
li,
blockquote {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  max-inline-size: 18ch;
  margin: 0;
}

h1, h2, h3,
.h1, .h2, .h3 {
  font-family: var(--font-heading);
}

h4, h5, h6,
.h4, .h5, .h6 {
  color: var(--color-text-tertiary);
}

h1, .h1, .display-l {
  font-size: clamp(4rem, 10vw, 9.125rem);
}

h2, .h2 {
  font-size: clamp(2.8rem, 8vw, 5.625rem);
}

h3, .h3 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}

h1 a, h2 a, h3 a {
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.lead,
.leading {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  line-height: var(--lh-display);
  max-inline-size: 100%;
  margin: 0;
}

.card-kicker,
.label-s {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-95);
  color: var(--color-accent-40);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
}

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

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  background: var(--color-surface-0);
  color: var(--color-surface-100);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-control-md);
  z-index: 9999;
  transition: top var(--motion-fast) var(--motion-ease-standard);
}
.skip-link:focus {
  top: 0.5rem;
}

input,
select,
textarea {
  font: inherit;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
}

.section {
  position: relative;
  padding: var(--padding-xl);
}

.site-main .content {
  display: block;
  height: 100vh;
}

.fullheight {
  height: 100vh;
}

.article-post .fullheight {
  height: unset;
}

.property-search-form,
.ere-property-search-form,
.ere__apa-search {
  width: 100%;
  margin: 0 auto;
}

.property-search-form .ere-form-actions {
  display: flex;
  justify-content: flex-start !important;
}

.btn,
.button,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.75rem 1.2rem;
  border: 0;
  background-color: var(--accent);
  color: var(--surface-container-low);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-medium);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-standard);
}
.btn:hover,
.button:hover,
button.btn:hover {
  background: var(--accent-strong);
  color: var(--surface-container-low);
  text-decoration: none;
}
.btn--ghost,
.button--ghost,
button.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--outline-variant);
}
.btn--ghost:hover,
.button--ghost:hover,
button.btn--ghost:hover {
  background: var(--surface-container);
  color: var(--text-primary);
}

input,
select,
textarea {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1rem;
  min-height: 2.75rem;
  width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea {
  border-radius: var(--radius);
  min-height: 8rem;
}

.search-form {
  display: flex;
  gap: var(--space-s);
  align-items: stretch;
}
.search-form .search-field {
  flex: 1;
}

/* ── Shared field styles ──────────────────────────────────── */
.re-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.re-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
}
@media (max-width: 600px) {
  .re-form__row--split {
    grid-template-columns: 1fr;
  }
}

.re-form__col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.re-form__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.re-form__label span {
  color: var(--accent);
}

.re-form__input {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--surface-100);
  border: 1px solid var(--outline);
  border-radius: var(--radius-control-md);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  min-height: 2.75rem;
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.re-form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--color-accent) l c h/0.15);
}
.re-form__input::placeholder {
  color: var(--text-tertiary);
}

.re-form__textarea {
  border-radius: var(--radius);
  min-height: 8rem;
  resize: vertical;
}

.re-form__submit {
  min-width: 10rem;
  cursor: pointer;
  font-weight: 700;
  border: none;
}

.re-form__submit-sending {
  display: none;
}

/* Honeypot — hidden from humans */
.re-form__honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

/* AJAX / redirect feedback banners */
.form-feedback {
  padding: var(--space-m) var(--space);
  border-radius: var(--radius-control-md);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: var(--space);
}
.form-feedback--success {
  background: oklch(from var(--color-accent-90) l c h/0.3);
  color: var(--accent-strong);
  border: 1px solid var(--accent-90);
}
.form-feedback--error {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-soft);
}

/* ── Contact page layout ──────────────────────────────────── */
.contact-page__hero {
  padding: var(--padding-xl) 0;
}

.contact-page__intro {
  max-inline-size: 52ch;
  margin: 0;
}

.contact-page__body {
  padding: 0 var(--space-l);
}
@media (max-width: 900px) {
  .contact-page__body {
    padding: 0 var(--space);
  }
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--padding-l);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-page__grid {
    grid-template-columns: 1fr;
  }
}

.contact-page__section-title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0 0 var(--space-l);
}

/* Contact info blocks */
.contact-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.contact-block__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-95);
  border-radius: 50%;
  color: var(--accent-strong);
  font-size: 1.1rem;
}

.contact-block__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.contact-block__content strong {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.contact-block__content a,
.contact-block__content address {
  color: var(--text-primary);
  text-decoration: none;
}
.contact-block__content a:hover {
  color: var(--accent);
}

/* WhatsApp CTA */
.contact-page__whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: var(--space-l);
  transition: background var(--motion-fast) var(--ease-standard);
}
.contact-page__whatsapp-btn:hover {
  background: #1ebe5d;
  color: #fff;
}

/* Social icons row */
.contact-page__social {
  display: flex;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}
.contact-page__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.contact-page__social a:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* Google Maps embed */
.contact-page__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-l);
  border: 1px solid var(--outline-variant);
}
.contact-page__map iframe {
  display: block;
}

/* Form panel */
.contact-page__form-wrap {
  background: var(--surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--elevation-1);
}
.contact-page__form-wrap #re-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

/* ── Booking widget (property sidebar) ────────────────────── */
.re-booking-widget {
  background: var(--surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  box-shadow: var(--elevation-1);
}

.re-booking-widget__title {
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--outline-variant);
}

.re-booking-widget__feedback:empty {
  display: none;
}

.re-form--booking {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.header {
  position: sticky;
  top: 0;
  z-index: 1002;
}

.top-bar {
  background: var(--color-surface-100);
  border-bottom: 1px solid var(--color-outline-variant);
}
.top-bar__inner {
  min-height: 5rem;
  padding-block: var(--space-s);
  gap: var(--space-xl);
}
.top-bar__right {
  gap: var(--space-l);
  flex-wrap: nowrap;
}
.top-bar__contact {
  gap: var(--space-l);
}
.top-bar__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}
.top-bar__contact-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
}
.top-bar__actions {
  display: flex;
  align-items: center;
  justify-content: end;
}

.top-bar-links {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-bar-links li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-accent-strong);
  font-family: var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}
.top-bar-links li a:hover {
  color: var(--color-accent-contrast);
}
.top-bar-links li:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 1;
  transition: background var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard);
}
.top-bar-links li:last-child a:hover {
  background: var(--color-accent-strong);
  color: var(--color-accent-contrast);
  opacity: 1;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.navbar-brand:hover {
  text-decoration: none;
}
.navbar-brand__logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.nav-strip {
  background: var(--color-surface-0);
}
.nav-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space);
  min-height: 3.25rem;
  padding-block: 0.4rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space);
  list-style: none;
  margin: 0;
  flex-wrap: wrap;
}
.nav-links li {
  display: inline-flex;
  padding: 0 var(--space-l);
}
.nav-links a {
  color: var(--color-text-inverse);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--motion-fast) var(--motion-ease-standard);
}
.nav-links a:hover, .nav-links a[aria-current=page] {
  opacity: 1;
}

.nav-toggle,
.nav-close {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

.nav-toggle {
  border: 1px solid oklch(from var(--color-surface-0) calc(l + 0.28) c h);
  background: transparent;
  color: var(--color-text-inverse);
}
.nav-toggle:hover {
  background: oklch(from var(--color-surface-0) calc(l + 0.1) c h);
}

.nav-close {
  border: 1px solid var(--color-outline-variant);
  background: transparent;
  color: var(--color-text-primary);
}
.nav-close:hover {
  background: var(--color-surface-container-low);
}

.nav-toggle__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.nav-overlay {
  display: none;
}

.nav-drawer {
  display: flex;
  flex: 1;
  min-width: 0;
}
.nav-drawer__header {
  display: none;
}
.nav-drawer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  width: 100%;
}

.nav-links a:hover, .nav-links a[aria-current=page] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  border-bottom: 2px;
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 840px) {
  .top-bar .grid-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }
  .top-bar .md-col-3 {
    width: auto;
    flex-shrink: 0;
  }
  .top-bar .md-col-9 {
    width: auto;
    flex-shrink: 0;
  }
  .top-bar__contact {
    display: none;
  }
  .top-bar__actions {
    display: flex;
    justify-content: flex-end;
  }
  .top-bar__inner {
    min-height: 4rem;
  }
  .top-bar__right {
    display: none;
  }
  .nav-strip__inner {
    justify-content: flex-end;
    min-height: 2.75rem;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-toggle__label {
    display: none;
  }
  .nav-overlay {
    position: fixed;
    inset: 0;
    display: block;
    background: oklch(from var(--color-surface-0) l c h/0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-standard);
    z-index: 1000;
  }
  .nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    flex-direction: column;
    width: min(23rem, 100vw - 1rem);
    height: 100dvh;
    padding: var(--space-m);
    background: var(--color-surface-100);
    border-left: 1px solid var(--color-outline-variant);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 2rem));
    transition: transform var(--motion-standard) var(--ease-standard);
  }
  .nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--color-outline-variant);
  }
  .nav-drawer__content {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: var(--space-l);
    overflow-y: auto;
  }
  .nav-drawer .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    width: 100%;
    margin-left: 0;
  }
  .nav-drawer .nav-links a {
    opacity: 1;
    color: var(--color-text-primary);
    min-height: 3rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-semibold);
  }
  .nav-drawer .nav-links a:hover {
    text-decoration: underline;
    color: var(--color-accent);
    opacity: 1;
  }
  .nav-drawer .topnav-links li:last-child a {
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }
  .nav-drawer .topnav-links li:last-child a:hover {
    background: var(--color-accent-strong);
    color: var(--color-accent-contrast);
  }
  .nav-close {
    display: inline-flex;
  }
  .site-nav.is-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav.is-open .nav-drawer {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
}
.iwre-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-xxl) 0;
  background: var(--surface-container-low);
  overflow: hidden;
  min-height: 100dvh;
}
.iwre-hero--image {
  background-size: cover;
  background-position: center;
}
.iwre-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.iwre-hero--image .iwre-hero__content,
.iwre-hero--image h1,
.iwre-hero--image .lead {
  color: var(--surface-95);
}
.iwre-hero__content {
  display: grid;
  gap: var(--space-l);
  max-width: 48rem;
}
@media (max-width: 599px) {
  .iwre-hero {
    min-height: auto;
    padding: calc(var(--space-king) + 1rem) 0 var(--space-xxl);
    align-items: flex-start;
  }
  .iwre-hero .grid-12 {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }
  .iwre-hero .md-col-8-centered,
  .iwre-hero .md-col-6 {
    width: 100%;
  }
}

.iwre-search-card {
  margin-top: var(--space-xl);
  /* ── Fallback form (rendered when the plugin shortcode is unavailable) ── */
}
.iwre-search-card .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.iwre-search-card .form-row + .form-row {
  margin-top: var(--space-s);
}
.iwre-search-card .form-row select {
  flex: 1 1 12rem;
}
.iwre-search-card .search-submit {
  margin-top: var(--space-m);
}
.iwre-search-card {
  /* ── Plugin search form ([iwl_re_search_form] / [re_search_form]) ──────
     Collapses the stacked .search-field rows the plugin renders into a
     single horizontal "pill" search bar with divider lines between
     segments and a prominent accent CTA, e.g.:
       [ Keyword | Status ⌄ | Type ⌄ | City ⌄ | Min–Max | Beds ⌄ | Baths ⌄ ] [Search]
  ── */
}
.iwre-search-card .iwl-re-search-form,
.iwre-search-card .ere-search-form,
.iwre-search-card .property-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: var(--space-xs);
  background: var(--surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  box-shadow: var(--elevation-2);
}
.iwre-search-card .iwl-re-search-form .search-field,
.iwre-search-card .ere-search-form .search-field,
.iwre-search-card .property-search-form .search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0 var(--space-m);
}
.iwre-search-card .iwl-re-search-form .search-field:not(:last-child)::after,
.iwre-search-card .ere-search-form .search-field:not(:last-child)::after,
.iwre-search-card .property-search-form .search-field:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  background: var(--outline-variant);
}
.iwre-search-card .iwl-re-search-form .search-field input,
.iwre-search-card .iwl-re-search-form .search-field select,
.iwre-search-card .ere-search-form .search-field input,
.iwre-search-card .ere-search-form .search-field select,
.iwre-search-card .property-search-form .search-field input,
.iwre-search-card .property-search-form .search-field select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.65rem 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.iwre-search-card .iwl-re-search-form .search-field input:focus,
.iwre-search-card .iwl-re-search-form .search-field select:focus,
.iwre-search-card .ere-search-form .search-field input:focus,
.iwre-search-card .ere-search-form .search-field select:focus,
.iwre-search-card .property-search-form .search-field input:focus,
.iwre-search-card .property-search-form .search-field select:focus {
  outline: none;
}
.iwre-search-card .iwl-re-search-form .search-field input::placeholder,
.iwre-search-card .iwl-re-search-form .search-field select::placeholder,
.iwre-search-card .ere-search-form .search-field input::placeholder,
.iwre-search-card .ere-search-form .search-field select::placeholder,
.iwre-search-card .property-search-form .search-field input::placeholder,
.iwre-search-card .property-search-form .search-field select::placeholder {
  color: var(--text-tertiary);
}
.iwre-search-card .iwl-re-search-form .search-field--price,
.iwre-search-card .ere-search-form .search-field--price,
.iwre-search-card .property-search-form .search-field--price {
  flex: 1 1 13rem;
  gap: var(--space-s);
}
.iwre-search-card .iwl-re-search-form .search-field--price input,
.iwre-search-card .ere-search-form .search-field--price input,
.iwre-search-card .property-search-form .search-field--price input {
  flex: 1;
  min-width: 0;
}
.iwre-search-card .iwl-re-search-form .search-field--submit,
.iwre-search-card .ere-search-form .search-field--submit,
.iwre-search-card .property-search-form .search-field--submit {
  flex: 0 0 auto;
  padding: 0;
}
.iwre-search-card .iwl-re-search-form .search-field--submit::after,
.iwre-search-card .ere-search-form .search-field--submit::after,
.iwre-search-card .property-search-form .search-field--submit::after {
  display: none;
}
.iwre-search-card .iwl-re-search-form .search-field--submit .btn,
.iwre-search-card .ere-search-form .search-field--submit .btn,
.iwre-search-card .property-search-form .search-field--submit .btn {
  border-radius: 999px;
  min-width: 8rem;
}
@media (max-width: 860px) {
  .iwre-search-card .iwl-re-search-form,
  .iwre-search-card .ere-search-form,
  .iwre-search-card .property-search-form {
    border-radius: var(--radius-lg);
    padding: var(--space-s);
  }
  .iwre-search-card .iwl-re-search-form .search-field,
  .iwre-search-card .ere-search-form .search-field,
  .iwre-search-card .property-search-form .search-field {
    flex: 1 1 100%;
    padding: var(--space-xs) var(--space-s);
  }
  .iwre-search-card .iwl-re-search-form .search-field:not(:last-child)::after,
  .iwre-search-card .ere-search-form .search-field:not(:last-child)::after,
  .iwre-search-card .property-search-form .search-field:not(:last-child)::after {
    top: auto;
    right: var(--space-s);
    bottom: 0;
    left: var(--space-s);
    width: auto;
    height: 1px;
    transform: none;
  }
  .iwre-search-card .iwl-re-search-form .search-field--submit,
  .iwre-search-card .ere-search-form .search-field--submit,
  .iwre-search-card .property-search-form .search-field--submit {
    padding-top: var(--space-xs);
  }
  .iwre-search-card .iwl-re-search-form .search-field--submit .btn,
  .iwre-search-card .ere-search-form .search-field--submit .btn,
  .iwre-search-card .property-search-form .search-field--submit .btn {
    width: 100%;
  }
}

.iwre-hero-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  background: var(--color-surface-0);
  border-radius: var(--radius, 12px);
  padding: var(--space-m) var(--space-l) var(--space-l);
  width: 100%;
  max-width: 26rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.iwre-hero-search__fields {
  display: flex;
  gap: 0;
}
.iwre-hero-search__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-xs) var(--space-m);
  position: relative;
}
.iwre-hero-search__field:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  height: 70%;
  width: 1px;
  background: oklch(38% 0.06 263deg);
}
.iwre-hero-search__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: oklch(62% 0.04 263deg);
  white-space: nowrap;
  cursor: default;
}
.iwre-hero-search__select {
  appearance: auto;
  background: transparent;
  border: 0;
  color: var(--color-surface-100);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  min-height: unset;
  width: 100%;
  cursor: pointer;
}
.iwre-hero-search__select option {
  background: var(--color-surface-0);
  color: var(--color-surface-100);
}
.iwre-hero-search__select:focus {
  outline: none;
}
.iwre-hero-search__btn {
  width: 100%;
  border-radius: var(--radius-pill, 999px);
  font-size: 1rem;
  padding: 0.85rem;
}
@media (max-width: 599px) {
  .iwre-hero-search {
    max-width: 100%;
    padding: var(--space-m);
  }
  .iwre-hero-search .iwre-hero-search__fields {
    flex-wrap: wrap;
  }
  .iwre-hero-search .iwre-hero-search__field {
    flex: 1 1 45%;
  }
  .iwre-hero-search .iwre-hero-search__field:not(:last-child)::after {
    display: none;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: 0;
  border: unset;
  border-radius: var(--radius);
  background: var(--color-surface-100);
  box-shadow: unset;
}

h1,
.h1,
.display-l {
  max-inline-size: 100%;
  margin-bottom: var(--space-xl);
  line-height: 1.25;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-feature-settings: "liga", "kern";
  text-wrap: balance;
  color: oklch(from var(--color-text) l c h/0.8);
}

h1,
.h1,
.display-l {
  font-size: var(--step-5);
  font-weight: var(--weight-strong);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-inline-size: 25ch;
}

h2,
.h2,
.display-m {
  font-size: var(--step-4);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-inline-size: 11ch;
}

h3,
.h3,
.display-s,
.headline-l {
  font-size: var(--step-3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  max-inline-size: 14ch;
}

h4,
.h4,
.headline-m {
  font-size: var(--step-2);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  max-inline-size: 18ch;
}

h5,
.h5,
.headline-s,
.title-l {
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  max-inline-size: 24ch;
}

h6,
.h6,
.title-m {
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  max-inline-size: 28ch;
}

.title-s {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.body-l {
  font-size: var(--step-0);
  line-height: var(--lh-body);
}

.body-m {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.body-s {
  font-size: var(--text-xs);
  line-height: 1.5;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.72;
  letter-spacing: var(--ls-body);
  color: var(--color-text-secondary);
  max-inline-size: 52ch;
}

.label-l,
.label-m,
.label-s,
.card-kicker,
.eyebrow {
  font-family: var(--font-label);
  text-wrap: pretty;
  color: var(--color-text-secondary);
}

.label-l {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.label-m {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-label);
  letter-spacing: calc(var(--ls-label) * 0.9);
}

.label-s, .card-kicker, .eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: calc(var(--ls-label) * 0.8);
}

.eyebrow {
  text-transform: uppercase;
  color: var(--color-accent-40);
}

.card-kicker {
  text-transform: uppercase;
  color: var(--color-accent-50);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  color: var(--color-text-tertiary);
}

.small, .card-meta {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-tertiary);
}

.accent-link {
  color: var(--color-accent);
}

.accent-link:hover {
  color: var(--color-accent-60);
}

hr {
  border: 0;
  height: 1px;
  width: 100%;
  margin: var(--space-xl) 0;
  background-color: var(--color-outline-variant);
}

.listings-layout {
  margin-top: var(--space-xl);
}

@media (min-width: 860px) {
  .listings-sidebar {
    position: sticky;
    top: var(--space-xl);
    align-self: start;
  }
}

.listings-sidebar__inner {
  background: var(--surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--elevation-1);
}

.listings-sidebar__title {
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--outline-variant);
}

.listings-sidebar__inner .iwl-re-search-form,
.listings-sidebar__inner .ere-search-form,
.listings-sidebar__inner .property-search-form,
.listings-sidebar__inner .form-row,
.sidebar__inner .iwl-re-search-form,
.sidebar__inner .ere-search-form,
.sidebar__inner .property-search-form,
.sidebar__inner .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--space-m);
}
.listings-sidebar__inner .form-row + .form-row,
.sidebar__inner .form-row + .form-row {
  margin-top: 0;
}
.listings-sidebar__inner .search-field,
.sidebar__inner .search-field {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.listings-sidebar__inner .search-field--price,
.sidebar__inner .search-field--price {
  flex-direction: row;
  gap: var(--space-s);
}
.listings-sidebar__inner .search-field--price input,
.sidebar__inner .search-field--price input {
  flex: 1;
  min-width: 0;
}
.listings-sidebar__inner input,
.listings-sidebar__inner select,
.listings-sidebar__inner textarea,
.sidebar__inner input,
.sidebar__inner select,
.sidebar__inner textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-control-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-height: unset;
}
.listings-sidebar__inner input:focus,
.listings-sidebar__inner select:focus,
.listings-sidebar__inner textarea:focus,
.sidebar__inner input:focus,
.sidebar__inner select:focus,
.sidebar__inner textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--color-accent) l c h/0.15);
}
.listings-sidebar__inner input::placeholder,
.listings-sidebar__inner select::placeholder,
.listings-sidebar__inner textarea::placeholder,
.sidebar__inner input::placeholder,
.sidebar__inner select::placeholder,
.sidebar__inner textarea::placeholder {
  color: var(--text-tertiary);
}
.listings-sidebar__inner .search-field--submit .btn,
.listings-sidebar__inner .search-submit,
.sidebar__inner .search-field--submit .btn,
.sidebar__inner .search-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-xs);
}

.listings-sidebar__title--sort {
  margin-top: var(--space-xl);
}

.property-sort-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.property-sort-form__select {
  width: 100%;
}
.property-sort-form noscript .btn {
  width: 100%;
  justify-content: center;
}

.iwl-re-archive-property .ere-property.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-l);
  list-style: none;
  padding: 0;
  margin: 0;
}

.property-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--color-surface-100);
  box-shadow: var(--shadow-elevation-1);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.property-card:hover {
  box-shadow: var(--shadow-elevation-2, 0 4px 20px rgba(0, 0, 0, 0.12));
  transform: translateY(-2px);
}

.property-card__thumb {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--color-surface-container);
}
.property-card__thumb a {
  display: block;
  height: 100%;
}
.property-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.property-card__thumb:hover img {
  transform: scale(1.04);
}

.property-card__no-image {
  width: 100%;
  height: 100%;
  background: var(--color-surface-container);
}

.property-card__badges {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.property-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.property-badge--status {
  background: var(--color-accent);
  color: var(--accent-contrast);
}
.property-badge--featured {
  background: var(--color-surface-0);
  color: var(--color-text-inverse);
}

.property-item-content {
  padding: var(--space-l);
}

.property-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 6px);
  padding: var(--space-m, 16px);
  flex: 1;
}

.property-type-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.property-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.property-card__title a {
  color: var(--text-primary);
  text-decoration: none;
}
.property-card__title a:hover {
  color: var(--accent-40);
}

.property-card__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-strong, var(--accent-40));
}

.property-card__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.property-card__location .material-icons-outlined {
  font-size: 1rem;
  color: var(--text-tertiary);
}

.property-card__meta {
  display: flex;
  gap: var(--space-s, 8px);
  list-style: none;
  padding: 0;
  margin-top: auto;
  padding-top: var(--space-s, 8px);
  border-top: 1px solid var(--outline-variant);
}

.property-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.property-meta-item .material-icons-outlined {
  font-size: 1rem;
}
.property-meta-item__label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.sp-header {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.sp-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.property-badge--type {
  background: var(--color-surface-container);
  color: var(--text-secondary);
}

.single-property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  list-style: none;
  padding: 0;
  margin: 0;
}
.single-property-meta .property-meta-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm, 6px);
  min-width: 80px;
  font-size: 0.9rem;
}
.single-property-meta .property-meta-item .material-icons-outlined {
  font-size: 1.2rem;
  color: var(--accent-40);
}

.sp-map__canvas {
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
}

.sp-video__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.sp-video__embed iframe,
.sp-video__embed object,
.sp-video__embed embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.single-property-header {
  padding-block: var(--space-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--outline-variant);
}
.single-property-header .section-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.single-property-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.single-property-price-location {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.single-property-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-strong, var(--accent-40));
}

.single-property-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.single-property-address .material-icons-outlined {
  font-size: 1.1rem;
}

.single-property-meta-action .single-property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  list-style: none;
  padding: 0;
  margin: 0;
}
.single-property-meta-action .property-meta-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface-100);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm, 6px);
  min-width: 80px;
  font-size: 0.9rem;
}
.single-property-meta-action .property-meta-item .material-icons-outlined {
  font-size: 1.2rem;
  color: var(--accent-40);
}

.single-property-element {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--outline-variant);
}
.single-property-element .section-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.section-heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  padding-bottom: var(--space-s);
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.gallery-single img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  max-height: 540px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs, 6px);
}
.gallery-grid__item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-sm, 4px);
}
.gallery-grid__item--main {
  grid-column: 1/3;
  grid-row: 1/3;
}
.gallery-grid__item img, .gallery-grid__item a {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-grid__item img {
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-grid__item:hover img {
  transform: scale(1.06);
}

.property-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-s);
  margin: 0;
}
.property-address-grid .property-address-item {
  padding: var(--space-s);
  background: var(--color-surface-container-low, var(--color-surface));
  border-radius: var(--radius-sm, 4px);
}
.property-address-grid .property-address-item dt {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.property-address-grid .property-address-item dd {
  font-size: 0.9rem;
  margin: 0;
  color: var(--text-primary);
}

.property-features-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.property-feature-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--color-surface-container);
  border-radius: var(--radius-sm, 20px);
  font-size: 0.85rem;
}
.property-feature-tag .material-icons-outlined {
  font-size: 1rem;
  color: var(--accent-40);
}

.property-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--outline-variant);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  margin: 0;
}
.property-features-grid .property-feature-item {
  background: var(--color-surface-100);
  padding: var(--space-s);
}
.property-features-grid .property-feature-item dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.property-features-grid .property-feature-item dd {
  margin: 0;
  font-size: 0.9rem;
}

.property-floors {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.property-floor {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  overflow: hidden;
}
.property-floor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-m);
  background: var(--color-surface-container);
}
.property-floor__name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.property-floor__price {
  font-weight: 700;
  color: var(--accent-strong, var(--accent-40));
}
.property-floor__image img {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: contain;
  background: var(--color-surface-container);
}
.property-floor__description {
  padding: var(--space-m);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.property-attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.property-attachment-item a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface-container);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s;
}
.property-attachment-item a:hover {
  background: var(--color-surface-90);
}
.property-attachment-item a .material-icons-outlined {
  font-size: 1.1rem;
  color: var(--accent-40);
}

.ere-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding-block: var(--space-l);
}
.ere-pagination a, .ere-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 var(--space-s);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--color-surface-100);
  border: 1px solid var(--outline-variant);
  transition: background 0.15s, color 0.15s;
}
.ere-pagination a:hover, .ere-pagination a.current, .ere-pagination span:hover, .ere-pagination span.current {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

.iwl-re-no-results {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-secondary);
}