/* Design tokens: shared colors, type scales, widths, spacing, gaps, and radii. */
:root {
  /* Body typography is fixed; heading settings are overridden by index.html. */
  --font-family-body: "Google Sans Flex", sans-serif;
  --font-heading-weight: 700;

  --color-primary:  #585BE9;
  --color-on-primary: var(--color-light);
  --color-orange: #FFB200;
  --color-heading: var(--color-dark);
  --bg-header: #ffffff;
  --color-header: #181818;
  --bg-main: #ffffff;
  --color-main: #181818;
  --bg-surface: #E4E9FF;
  --bg-surface-elevate: #585BE9;
  --bg-card: #ffffff;
  --color-accent: #5CD9F2;
  --color-positive: #22C55E;
  --color-border: #C6CDD0;
  --color-muted: color-mix(in srgb, var(--color-main) 65%, transparent);
  --color-border-light: color-mix(in srgb, var(--color-border) 50%, transparent);

  --site-header-height: 0px;

  --width-fluid: clamp(0px, 90vw, 100%);
  --width-1680: clamp(560px, 90vw, 1680px);
  --width-1440: clamp(560px, 90vw, 1440px);
  --width-1280: clamp(560px, 90vw, 1280px);
  --width-980: clamp(560px, 80vw, 980px);
  --width-720: clamp(560px, 50vw, 720px);
  --width-680: clamp(560px, 50vw, 680px);
  --content-width: var(--width-1280);
  --hero-content-max-width: var(--width-720);
  --hero-content-wide-max-width: var(--width-980);
  --hero-content-split-max-width: clamp(320px, 40vw, 560px);
  --text-info-content-max-width: 600px;
  --text-info-media-aspect-ratio: 10 / 13;

  --font-size-lg: 18px;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  --font-size-heading-extra: clamp(40px, 7.03125vw, 72px);
  --font-size-h1: clamp(32px, 5.46875vw, 56px);
  --font-size-h2: clamp(28px, 4.4921875vw, 46px);
  --font-size-h3: clamp(24px, 3.125vw, 32px);
  --font-size-h4: clamp(24px, 2.34375vw, 24px);
  --font-size-h5: clamp(18px, 1.7578125vw, 18px);

  --space-4: clamp(4px, 0.3vw, 4px);
  --space-8: clamp(8px, 0.6vw, 8px);
  --space-12: clamp(12px, 0.9vw, 12px);
  --space-16: clamp(16px, 1.2vw, 16px);
  --space-24: clamp(20px, 1.8vw, 24px);
  --space-32: clamp(32px, 2.4vw, 32px);
  --space-40: clamp(32px, 3vw, 40px);
  --space-48: clamp(32px, 3.6vw, 48px);
  --space-64: clamp(32px, 4.8vw, 64px);

  --gap-4: clamp(4px, 0.3vw, 4px);
  --gap-8: clamp(8px, 0.6vw, 8px);
  --gap-12: clamp(12px, 0.9vw, 12px);
  --gap-16: clamp(16px, 1.2vw, 16px);
  --gap-24: clamp(20px, 1.8vw, 24px);
  --gap-32: clamp(32px, 2.4vw, 32px);
  --gap-40: clamp(32px, 3vw, 40px);
  --gap-48: clamp(32px, 3.6vw, 48px);
  --gap-64: clamp(32px, 4.8vw, 64px);

  --radius-base: 4px;
  --radius-4: var(--radius-base);
  --radius-8: calc(var(--radius-base) * 2);
  --radius-12: calc(var(--radius-base) * 3);
  --radius-16: calc(var(--radius-base) * 4);
  --radius-24: calc(var(--radius-base) * 6);
  --radius-32: calc(var(--radius-base) * 8);
  --radius-40: calc(var(--radius-base) * 10);
  --radius-48: calc(var(--radius-base) * 12);
  --radius-full: 100%;

}

@media (min-width: 1440px) {
  :root[data-content-width="fluid"] {
    --font-size-heading-extra: clamp(72px, 5vw, 192px);
    --font-size-h1: clamp(56px, 3.8889vw, 149px);
    --font-size-h2: clamp(46px, 3.1944vw, 123px);
    --font-size-h3: clamp(32px, 2.2222vw, 85px);
    --font-size-h4: clamp(24px, 1.6667vw, 64px);
    --font-size-h5: clamp(18px, 1.25vw, 48px);
    --hero-content-max-width: clamp(720px, 50vw, 1920px);
    --hero-content-wide-max-width: clamp(980px, 68.0556vw, 2614px);
    --hero-content-split-max-width: clamp(560px, 38.8889vw, 1494px);
    --text-info-content-max-width: clamp(600px, 48.6111vw, 700px);
  }
}

/* Theme defaults also apply to standalone parts without a data-theme attribute. */
:root {
  --color-light: #ffffff;
  --color-dark: #181818;
  color-scheme: light;
}

/* Token utilities */
.font-family, .font-family-body { font-family: var(--font-family-body); }
.font-family-heading { font-family: var(--font-family-heading, "Inter", sans-serif);  font-weight: var(--font-heading-weight); }
.text-lg { font-size: var(--font-size-lg); }
.text-base { font-size: var(--font-size-base); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.heading-extra { font-size: var(--font-size-heading-extra); }
.heading-h1, .h1 { font-size: var(--font-size-h1); }
.heading-h2, .h2 { font-size: var(--font-size-h2); }
.heading-h3, .h3 { font-size: var(--font-size-h3); }
.heading-h4, .h4 { font-size: var(--font-size-h4); }
.heading-h5, .h5 { font-size: var(--font-size-h5); }
.color-primary { color: var(--color-primary); }
.color-orange { color: var(--color-orange); }
.color-light { color: var(--color-light); }
.color-dark { color: var(--color-dark); }
.color-heading { color: var(--color-heading); }
.color-header { color: var(--color-header); }
.color-main { color: var(--color-main); }
.color-accent { color: var(--color-accent); }
.color-positive { color: var(--color-positive); }
.color-muted { color: var(--color-muted); }
.color-border { color: var(--color-border); }
.bg-header { background-color: var(--bg-header); }
.bg-main { background-color: var(--bg-main); }
.bg-surface { background-color: var(--bg-surface); }
.bg-surface-elevate {
  --color-heading: var(--color-light);
  color: var(--color-light);
  background-color: var(--bg-surface-elevate);
}
.bg-card { background-color: var(--bg-card); }
.bg-box { background-color: var(--bg-card); }
.bg-dark {
  --color-heading: var(--color-light);

  color: var(--color-light);
  background-color: var(--color-dark);
}

.width-fluid { width: var(--width-fluid); }
.width-1440 { width: min(100%, var(--width-1440)); }
.width-1280 { width: min(100%, var(--width-1280)); }
.width-980 { width: min(100%, var(--width-980)); }
.width-720 { width: min(100%, var(--width-720)); }
.width-680 { width: min(100%, var(--width-680)); }

.radius-4 { border-radius: var(--radius-4); }
.radius-8 { border-radius: var(--radius-8); }
.radius-12 { border-radius: var(--radius-12); }
.radius-16 { border-radius: var(--radius-16); }
.radius-24 { border-radius: var(--radius-24); }
.radius-32 { border-radius: var(--radius-32); }
.radius-40 { border-radius: var(--radius-40); }
.radius-48 { border-radius: var(--radius-48); }
.radius-full { border-radius: var(--radius-full); }

.space-x-4, .padding-x-4 { padding-inline: var(--space-4); }
.space-x-8, .padding-x-8 { padding-inline: var(--space-8); }
.space-x-12, .padding-x-12 { padding-inline: var(--space-12); }
.space-x-16, .padding-x-16 { padding-inline: var(--space-16); }
.space-x-24, .padding-x-24 { padding-inline: var(--space-24); }
.space-x-32, .padding-x-32 { padding-inline: var(--space-32); }
.space-x-40, .padding-x-40 { padding-inline: var(--space-40); }
.space-x-48, .padding-x-48 { padding-inline: var(--space-48); }
.space-x-64, .padding-x-64 { padding-inline: var(--space-64); }
.space-4, .space-y-4, .padding-y-4 { padding-block: var(--space-4); }
.space-8, .space-y-8, .padding-y-8 { padding-block: var(--space-8); }
.space-12, .space-y-12, .padding-y-12 { padding-block: var(--space-12); }
.space-16, .space-y-16, .padding-y-16 { padding-block: var(--space-16); }
.space-24, .space-y-24, .padding-y-24 { padding-block: var(--space-24); }
.space-32, .space-y-32, .padding-y-32 { padding-block: var(--space-32); }
.space-40, .space-y-40, .padding-y-40 { padding-block: var(--space-40); }
.space-48, .space-y-48, .padding-y-48 { padding-block: var(--space-48); }
.space-64, .space-y-64, .padding-y-64 { padding-block: var(--space-64); }

.margin-x-4 { margin-inline: var(--space-4); }
.margin-x-8 { margin-inline: var(--space-8); }
.margin-x-12 { margin-inline: var(--space-12); }
.margin-x-16 { margin-inline: var(--space-16); }
.margin-x-24 { margin-inline: var(--space-24); }
.margin-x-32 { margin-inline: var(--space-32); }
.margin-x-40 { margin-inline: var(--space-40); }
.margin-x-48 { margin-inline: var(--space-48); }
.margin-x-64 { margin-inline: var(--space-64); }
.margin-y-4 { margin-block: var(--space-4); }
.margin-y-8 { margin-block: var(--space-8); }
.margin-y-12 { margin-block: var(--space-12); }
.margin-y-16 { margin-block: var(--space-16); }
.margin-y-24 { margin-block: var(--space-24); }
.margin-y-32 { margin-block: var(--space-32); }
.margin-y-40 { margin-block: var(--space-40); }
.margin-y-48 { margin-block: var(--space-48); }
.margin-y-64 { margin-block: var(--space-64); }

.gap-4 { gap: var(--gap-4); }
.gap-8 { gap: var(--gap-8); }
.gap-12 { gap: var(--gap-12); }
.gap-16 { gap: var(--gap-16); }
.gap-24 { gap: var(--gap-24); }
.gap-32 { gap: var(--gap-32); }
.gap-40 { gap: var(--gap-40); }
.gap-48 { gap: var(--gap-48); }
.gap-64 { gap: var(--gap-64); }

/* Responsive spacing utilities: tablet overrides from 768px. */
@media (min-width: 768px) {
  .md\:space-4, .md\:space-y-4 { padding-block: var(--space-4); }
  .md\:space-8, .md\:space-y-8 { padding-block: var(--space-8); }
  .md\:space-12, .md\:space-y-12 { padding-block: var(--space-12); }
  .md\:space-16, .md\:space-y-16 { padding-block: var(--space-16); }
  .md\:space-24, .md\:space-y-24 { padding-block: var(--space-24); }
  .md\:space-32, .md\:space-y-32 { padding-block: var(--space-32); }
  .md\:space-40, .md\:space-y-40 { padding-block: var(--space-40); }
  .md\:space-48, .md\:space-y-48 { padding-block: var(--space-48); }
  .md\:space-64, .md\:space-y-64 { padding-block: var(--space-64); }
  .md\:space-x-4 { padding-inline: var(--space-4); }
  .md\:space-x-8 { padding-inline: var(--space-8); }
  .md\:space-x-12 { padding-inline: var(--space-12); }
  .md\:space-x-16 { padding-inline: var(--space-16); }
  .md\:space-x-24 { padding-inline: var(--space-24); }
  .md\:space-x-32 { padding-inline: var(--space-32); }
  .md\:space-x-40 { padding-inline: var(--space-40); }
  .md\:space-x-48 { padding-inline: var(--space-48); }
  .md\:space-x-64 { padding-inline: var(--space-64); }
}

/* Responsive spacing utilities: desktop overrides from 1024px. */
@media (min-width: 1024px) {
  .lg\:space-4, .lg\:space-y-4 { padding-block: var(--space-4); }
  .lg\:space-8, .lg\:space-y-8 { padding-block: var(--space-8); }
  .lg\:space-12, .lg\:space-y-12 { padding-block: var(--space-12); }
  .lg\:space-16, .lg\:space-y-16 { padding-block: var(--space-16); }
  .lg\:space-24, .lg\:space-y-24 { padding-block: var(--space-24); }
  .lg\:space-32, .lg\:space-y-32 { padding-block: var(--space-32); }
  .lg\:space-40, .lg\:space-y-40 { padding-block: var(--space-40); }
  .lg\:space-48, .lg\:space-y-48 { padding-block: var(--space-48); }
  .lg\:space-64, .lg\:space-y-64 { padding-block: var(--space-64); }
  .lg\:space-x-4 { padding-inline: var(--space-4); }
  .lg\:space-x-8 { padding-inline: var(--space-8); }
  .lg\:space-x-12 { padding-inline: var(--space-12); }
  .lg\:space-x-16 { padding-inline: var(--space-16); }
  .lg\:space-x-24 { padding-inline: var(--space-24); }
  .lg\:space-x-32 { padding-inline: var(--space-32); }
  .lg\:space-x-40 { padding-inline: var(--space-40); }
  .lg\:space-x-48 { padding-inline: var(--space-48); }
  .lg\:space-x-64 { padding-inline: var(--space-64); }
}

/* Base document: box sizing, typography, resets, and links. */
* {
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-main);
  background: var(--bg-main);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  font-weight: 400;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol) {
  margin-block: 0;
}

p {
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-main) 20%, transparent);
    text-underline-offset: calc(var(--space-4) * 1.5);
  touch-action: manipulation;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

button,
summary {
  touch-action: manipulation;
}

.pretitle,
[class*="__pretitle"],
[class*="__eyebrow"] {
  font-weight: 600;
}

/* Layout primitives: responsive containers and vertical content stacks. */
.container {
  width: var(--width-fluid);
  max-width: var(--content-width, var(--width-1280));
  margin-inline: auto;
}

.container--1440 { max-width: var(--width-1440); }
.container--1280 { max-width: var(--width-1280); }
.container--980 { max-width: var(--width-980); }
.container--720 { max-width: var(--width-720); }
.container--680 { max-width: var(--width-680); }
.container--fluid { max-width: var(--width-fluid); }

.content-stack {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-16);
}

.content-stack.space-4 { gap: var(--gap-4); padding-block: 0; }
.content-stack.space-8 { gap: var(--gap-8); padding-block: 0; }
.content-stack.space-12 { gap: var(--gap-12); padding-block: 0; }
.content-stack.space-16 { gap: var(--gap-16); padding-block: 0; }
.content-stack.space-24 { gap: var(--gap-24); padding-block: 0; }
.content-stack.space-32 { gap: var(--gap-32); padding-block: 0; }
.content-stack.space-40 { gap: var(--gap-40); padding-block: 0; }
.content-stack.space-48 { gap: var(--gap-48); padding-block: 0; }
.content-stack.space-64 { gap: var(--gap-64); padding-block: 0; }

.text-content > :where(h2, h3, h4, h5, h6, p, ul, ol) {
  margin-bottom: var(--space-16);
}

.text-content > :last-child {
  margin-bottom: 0;
}
/* Shared landmarks: common Header and Footer spacing and containers. */
.site-header {
  padding: var(--space-16) var(--space-24);
}

.site-header__inner,
.site-footer__inner {
  width: 100%;
}

.site-header__container,
.site-footer__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
}

/* Site Header: background, positioning, branding, and desktop navigation. */
.site-header {
  color: var(--color-header);
  background: var(--bg-header);
}

.header-variations {
  display: flex;
  flex-direction: column;
}

.header-variations .site-header {
  border-bottom: clamp(1px, 0.1vw, 1px) solid color-mix(in srgb, var(--color-border) 65%, transparent);
  background: color-mix(in srgb, var(--bg-header) 88%, transparent);
  backdrop-filter: blur(clamp(16px, 1.5vw, 20px));
  -webkit-backdrop-filter: blur(clamp(16px, 1.5vw, 20px));
}

.site-header.site-header-fixed {
  color: var(--color-light);
  background-color: #0000001c;
  border-bottom: 0;
  box-shadow: 0 2px 6px transparent;
  backdrop-filter: blur(clamp(20px, 1.5vw, 20px));
  -webkit-backdrop-filter: blur(clamp(20px, 1.5vw, 20px));
}

.site-header.site-header-fixed.site-header--no-blur {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.site-header-fixed.site-header--no-blur:not(.site-header-fixed-fill) {
  background-color: transparent;
}

.site-header.site-header-fixed.site-header-scroll-ready {
  transition: color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

.site-header.site-header-fixed a {
  transition: none;
}

.site-header.site-header-fixed .btn {
  transition: none;
}

.site-header.site-header-fixed.site-header-scroll-ready .btn {
  transition: color 240ms ease, background-color 250ms ease, border-color 240ms ease;
}


.site-header.site-header-fixed .site-header__menu-button {
  color: var(--color-light);
}

.site-header.site-header-fixed .language-switcher > summary.btn {
  color: var(--color-light);
}

.site-header-fixed.site-header-fixed-fill {
  color: var(--color-header);
  background-color: var(--bg-header);
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.site-header.site-header-fixed-fill .site-header__menu-button {
  color: var(--color-header);
}

.site-header.site-header-fixed-fill .language-switcher > summary.btn {
  color: var(--color-header);
}

.site-header-sticky,
.site-header-fixed {
  z-index: 100;
  top: 0;
  width: 100%;
}

.site-header-sticky {
  position: sticky;
  border-bottom: 0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.site-header-fixed {
  position: fixed;
  right: 0;
  left: 0;
}

/* The header's mobile menu can sit between the header and main. */
.site-header-fixed ~ main > section:first-child {
  padding-top: calc(var(--space-64) + var(--site-header-height, 0px));
}

.site-header__brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.site-header__brand img,
.site-header__brand.logo-size-sm img {
  width: auto;
  height: clamp(24px, 6vw, 32px);
}

.site-header__brand.logo-size-md img {
  height: clamp(32px, 6vw, 40px);
}

.site-header__brand.logo-size-lg img {
  height: clamp(40px, 6vw, 48px);
}

.site-header__brand.logo-size-xl img {
  height: clamp(40px, 6vw, 72px);
}

.site-header__brand .site-header__logo--light {
  display: none;
}

[data-theme="dark"] .site-header--dual-logo .site-header__logo--default,
.site-header-fixed.site-header--dual-logo:not(.site-header-fixed-fill) .site-header__logo--default {
  display: none;
}

[data-theme="dark"] .site-header--dual-logo .site-header__logo--light,
.site-header-fixed.site-header--dual-logo:not(.site-header-fixed-fill) .site-header__logo--light {
  display: inline-flex;
}




.site-header__nav {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--gap-12);
}

.site-header__nav a,
.mobile-menu__nav a {
  text-decoration: none;
}

.site-header__mobile-controls {
  display: contents;
}

.site-header__actions {
  align-items: center;
  flex-wrap: nowrap;
  margin-left: auto;
}

.header-variations .site-header__nav > a,
.header-variations .site-header__more summary,
.header-variations .site-header__actions .btn {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.variation-1 .site-header__nav {
  margin-left: auto;
}
.variation-1 .site-header__actions {
    margin-right: 0;
    margin-left: 0;
}

.variation-4 .site-header__container {
  justify-content: space-between;
  gap: var(--gap-4);
}

.variation-4 .site-header__brand {
  margin-right: auto;
}

.variation-2 .site-header__container,
.variation-3 .site-header__container,
.variation-5 .site-header__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.variation-5 .site-header__menu-button {
  grid-column: 1;
  grid-row: 1;
}

.variation-5 .site-header__brand {
  grid-column: 2;
  grid-row: 1;
}

.variation-5 .site-header__actions {
  grid-column: 3;
  grid-row: 1;
}

.variation-5 .site-header__menu-button,
.variation-3 .site-header__nav,
.variation-2 .site-header__brand {
  justify-self: start;
}

.variation-5 .site-header__brand,
.variation-3 .site-header__brand,
.variation-2 .site-header__nav {
  justify-self: center;
}

.variation-2 .site-header__actions,
.variation-3 .site-header__actions,
.variation-5 .site-header__actions {
  justify-self: end;
  margin-left: 0;
}

.variation-4 .site-header__actions {
  margin-left: 0;
}

.variation-6 .site-header__container {
  justify-content: space-between;
  gap: var(--gap-40);
}

.variation-6 .site-header__nav {
  margin-right: auto;
}

.site-header__nav > a,
/* Header dropdown: secondary navigation links inside a details menu. */
.site-header__more summary {
  display: flex;
  align-items: center;
  padding: clamp(12px, 0.9vw, 12px) var(--space-12);
  border: clamp(1px, 0.1vw, 1px) solid transparent;
  border-radius: var(--radius-8);
  font-size: var(--font-size-base);
  line-height: 1;
}

.site-header__more {
  position: relative;
}

.site-header__more summary {
  gap: var(--gap-4);
  cursor: pointer;
  list-style: none;
}

.site-header__more summary::-webkit-details-marker {
  display: none;
}

.site-header__more summary i {
  font-size: inherit;
  line-height: inherit;
  transition: transform 180ms ease;
}

.site-header__more[open] summary i {
  transform: rotate(180deg);
}

.site-header__more-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-12));
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: clamp(180px, 18vw, 240px);
  padding: var(--space-8);
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  border-radius: var(--radius-12);
  color: var(--color-main);
  background: var(--bg-card);
  gap: var(--gap-4);
}

.site-header__more[open] .site-header__more-menu {
  animation: submenu-in 160ms ease;
}

.site-header__more.is-closing .site-header__more-menu {
  animation: submenu-out 160ms ease forwards;
}

.site-header__more-menu a {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  text-decoration: none;
}

.site-header :is(
  .site-header__nav a,
  .site-header__more summary,
  .site-header__more-menu a,
  .site-header__actions .btn,
  .site-header__menu-button,
  .language-switcher > summary.btn
) {
  transition: background-color 250ms ease;
}

.site-header.site-header-fixed:not(.site-header-scroll-ready) :is(
  .site-header__nav a,
  .site-header__more summary,
  .site-header__more-menu a,
  .site-header__actions .btn,
  .site-header__menu-button,
  .language-switcher > summary.btn
) {
  transition: none;
}

.site-header__menu-button,
/* Header menu controls: drawer trigger and animated menu icon. */
.mobile-menu__close {
  padding: var(--space-12);
  border: clamp(1px, 0.1vw, 1px) solid color-mix(in srgb, currentColor 5%, transparent);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-family: inherit;
  font-size: var(--font-size-base);
  cursor: pointer;
  display: inline-flex;
}

.site-header__menu-button {
  color: var(--color-header);
  display: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mobile-menu__close {
  color: var(--color-main);
}

.menu-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(4px, 0.3vw, 4px);
  width: clamp(16px, 1.2vw, 16px);
  aspect-ratio: 1;
}

.menu-icon span {
  width: clamp(16px, 1.2vw, 16px);
  height: clamp(2px, 0.15vw, 2px);
  background: currentColor;
}

.menu-icon--close span {
  position: absolute;
}

.menu-icon--close span:first-child {
  transform: rotate(45deg);
}

.menu-icon--close span:last-child {
  transform: rotate(-45deg);
}

/* Mobile drawer: fixed panel with sticky header/footer and scrollable content. */
.mobile-menu {
  width: min(88%, clamp(300px, 30vw, 360px));
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--color-main);
  background: var(--bg-main);
  overflow: hidden;
}

.mobile-menu--left {
  margin-right: auto;
  margin-left: 0;
}

.mobile-menu[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: mobile-menu-in 220ms ease;
}

.mobile-menu[open].is-closing {
  animation: mobile-menu-out 220ms ease forwards;
}

.mobile-menu--left[open] {
  animation-name: mobile-menu-left-in;
}

.mobile-menu--left[open].is-closing {
  animation-name: mobile-menu-left-out;
}

.mobile-menu::backdrop {
  background: color-mix(in srgb, #000 60%, transparent);
  cursor: pointer;
}

.mobile-menu[open]::backdrop {
  animation: backdrop-in 220ms ease;
}

.mobile-menu[open].is-closing::backdrop {
  animation: backdrop-out 220ms ease forwards;
}

.mobile-menu__header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: var(--space-16) var(--space-24);
  background: var(--bg-main);
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu__container {
  padding: var(--space-24) var(--space-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-8);
}

.mobile-menu__footer {
  position: sticky;
  z-index: 1;
  bottom: 0;
  padding: var(--space-24);
  background: var(--bg-main);
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.mobile-menu__footer:empty {
  display: none;
}

.mobile-menu__nav a {
  padding-block: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.site-header.is-mobile-nav .site-header__nav {
  display: none;
}

.site-header.is-mobile-nav .site-header__mobile-controls {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  order: 2;
  margin-left: auto;
}

.site-header.is-mobile-nav .site-header__actions {
  display: flex;
  margin: 0;
}

.site-header.is-mobile-nav .site-header__actions > :not(.language-switcher) {
  display: none;
}

.site-header.is-mobile-nav .site-header__menu-button,
.site-header--drawer .site-header__menu-button {
  display: inline-flex;
}

.site-header--drawer .site-header__nav {
  display: none;
}

.site-header.is-mobile-nav .site-header__container {
  display: flex;
}

.site-header.is-mobile-nav .site-header__menu-button {
  order: 3;
  margin-left: 0;
}

.variation-5.site-header--drawer:not(.is-mobile-nav) .site-header__menu-button {
  margin-left: 0;
}

.variation-5.is-mobile-nav .site-header__brand {
  order: 1;
}

.variation-5.is-mobile-nav .site-header__menu-button {
  order: 3;
  margin-left: 0;
}

@media (max-width: 992px) {
  .site-header .site-header__nav,
  .site-header .site-header__actions > :not(.language-switcher) {
    display: none;
  }

  .site-header .site-header__mobile-controls {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    order: 2;
    margin-left: auto;
  }

  .site-header .site-header__actions {
    display: flex;
    margin: 0;
  }

  .site-header .site-header__container {
    display: flex;
  }

  .site-header .site-header__menu-button {
    display: inline-flex;
    order: 3;
    margin-left: 0;
  }

  .variation-5 .site-header__brand {
    order: 1;
  }

  .variation-5 .site-header__menu-button,
  .variation-5.site-header--drawer:not(.is-mobile-nav) .site-header__menu-button {
    order: 3;
    margin-left: 0;
  }
}

/* Sections: standard responsive outer padding shared by page sections. */
section {
  padding: var(--space-64) var(--space-24);
}

/* Not Found: centered single-section error state. */
.page-not-found {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-not-found main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.not-found {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.not-found__inner {
  width: 100%;
  min-width: 0;
}

.not-found__content,
.not-found__text,
.not-found__heading {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.not-found__content {
  gap: var(--gap-24);
  text-align: center;
}

.not-found__text {
  gap: var(--gap-16);
  width: 100%;
}

.not-found__heading {
  gap: var(--gap-8);
}

.not-found__code {
  color: var(--color-primary);
  font-family: var(--font-family-heading, "Inter", sans-serif);
  font-size: var(--font-size-h4);
  font-weight: var(--font-heading-weight, 700);
  line-height: 1.25;
}

.not-found__title {
  font-size: clamp(32px, 3.3333vw, 48px);
}

.not-found__text > p {
  max-width: min(100%, 620px);
  font-weight: 500;
  line-height: 24px;
}

/* Hero: shared full-media layout, content positioning, and media overlay. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 60vw, 920px);
  overflow: hidden;
}

.hero.variation-3, .hero.variation-2  {
  min-height: clamp(560px, 60vw, 700px);
}

.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, #000 70%, transparent));
  content: "";
}

.hero__media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media video {
  pointer-events: none;
}

/* Decorative background video: suppress Safari's native playback overlays. */
.hero__media video::-webkit-media-controls,
.hero__media video::-webkit-media-controls-panel,
.hero__media video::-webkit-media-controls-start-playback-button,
.hero__media video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.hero__inner,
.hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__content {
  width: 100%;
  max-width: var(--hero-content-max-width);
}
.hero__content p {
  font-size: 20px;
}

.hero .pretitle {
  font-size: var(--font-size-lg);
}

.hero--align-center .hero__content,
.hero--align-center .hero__content .content-stack {
  align-items: center;
}

.hero--align-center .hero__content {
  margin-inline: auto;
  text-align: center;
}

.hero--align-right .hero__content,
.hero--align-right .hero__content .content-stack {
  align-items: flex-end;
}

.hero--align-right .hero__content {
  margin-left: auto;
  text-align: right;
}

/* Hero variation 2: contained image-left and content-right split layout. */
.hero.variation-2 {
  min-height: 0;
  color: var(--color-main);
}

.hero.variation-2 .hero__container {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6.4vw, 92px);
}

.hero.variation-2 .hero__media,
.hero.variation-3 .hero__media {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  min-width: 0;
}

.hero.variation-2 .hero__media {
  height: auto;
  overflow: hidden;
  aspect-ratio: var(--text-info-media-aspect-ratio, 1 / 1.3);
  border-radius: var(--radius-12);
}

.hero.variation-2 .hero__media::after,
.hero.variation-3 .hero__media::after {
  display: none;
}

.hero.variation-2 .hero__content {
  flex: 1 1 0;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.hero.variation-2 .pretitle,
.hero.variation-3 .pretitle {
  color: var(--color-primary);
}

.hero.variation-2 .btn.btn-secondary {
  --btn-background: var(--bg-main);
}

/* Hero variation 3: edge-to-edge 50/50 content and media split. */
.hero.variation-3 {
  min-height: clamp(560px, 60vw, 700px);
  padding: 0;
  color: var(--color-main);
  background: var(--bg-main);
}

.hero.variation-3 .hero__inner,
.hero.variation-3 .hero__container {
  min-height: inherit;
}

.hero.variation-3 .hero__container {
  display: flex;
  width: 100%;
  max-width: none;
}

.hero.variation-3 .hero__content-wrap {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-64) var(--space-24);
}

.hero.variation-3 .hero__content {
  align-items: center;
  width: 100%;
  max-width: var(--hero-content-split-max-width);
  margin-inline: auto;
  text-align: center;
}

.hero.variation-3 .hero__content .content-stack {
  align-items: center;
}

.hero.variation-3 .hero__media {
  flex-basis: 50%;
}

.hero.variation-3 .hero__media :is(img, video) {
  position: absolute;
  inset: 0;
}

/* Hero variation 4: centered content over media with a dark overlay. */
.hero.variation-4 {
  align-items: center;
}

.hero.variation-4 .hero__content {
  max-width: var(--hero-content-wide-max-width);
}

.hero.variation-4 .pretitle,
.hero.variation-5 .pretitle {
  opacity: 0.7;
}

/* Hero variation 5: bottom copy and actions arranged in a wide row. */
.hero.variation-5 .hero__content {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-32);
  width: 100%;
  max-width: none;
}

.hero.variation-5 .hero__copy {
  flex: 1 1 0;
}

/* Hero responsive layout: stack split variants and variation 5 actions. */
@media (max-width: 767px) {
  .hero.variation-2 .hero__container,
  .hero.variation-3 .hero__container {
    flex-direction: column;
  }

  .hero.variation-2 .hero__media,
  .hero.variation-2 .hero__content,
  .hero.variation-3 .hero__content-wrap,
  .hero.variation-3 .hero__media {
    width: 100%;
  }

  .hero.variation-2 .hero__media {
    flex-basis: auto;
  }

  .hero.variation-3 .hero__media {
    flex: 0 0 clamp(320px, 90vw, 480px);
  }

  .hero.variation-5 .hero__content {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hero variation 2 portrait order: content first, media second. */
@media (orientation: portrait) {
  .hero.variation-2 .hero__content {
    order: 1;
  }

  .hero.variation-2 .hero__media {
    order: 2;
  }
}

:root:has(.site-header-fixed) .hero {
  padding-top: calc(var(--space-64) + var(--site-header-height, 0px));
}

/* Every hero variant shares the height setting and can grow with its content. */
.hero.hero-full,
.hero.hero--full-height {
  min-height: max(0px, calc(var(--site-viewport-height, 100svh) - var(--hero-header-offset, 0px)));
}

/* Static and sticky headers occupy space above the hero; fixed headers overlay it. */
:root:has(.site-header:not(.site-header-fixed)) .hero {
  --hero-header-offset: var(--site-header-height, 0px);
}

.hero.variation-2:is(.hero-full, .hero--full-height) {
  align-items: center;
}

/* Cover overlay; opacity is controlled by the hero settings. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
}

.hero:is(.variation-1, .variation-4, .variation-5) .hero__media::after {
  background: none;
}

/* Location Map: full-width and contained Google Maps layouts. */
.location-map {
  color: var(--color-main);
}

.location-map__container,
.location-map__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.location-map__container { gap: var(--gap-24); }
.location-map__text { gap: var(--gap-8); }

.location-map__address {
  font-style: normal;
  line-height: 1.5;
}

.location-map__map {
  position: relative;
  width: 100%;
  aspect-ratio: 980 / 551;
  overflow: hidden;
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  border-radius: var(--radius-12);
  background: var(--bg-surface);
}

.location-map__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.location-map.variation-2 { padding: 0; }

.location-map.variation-2 .location-map__map {
  height: clamp(400px, 45.14vw, 650px);
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

@media (max-width: 767px) {
  .location-map__map,
  .location-map.variation-2 .location-map__map {
    height: auto;
    aspect-ratio: 1 / 1.2;
  }
}

/* Embed Code: third-party embed placeholder with reusable text alignment. */
.embed-code {
  color: var(--color-main);
}

.embed-code__container,
.embed-code__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.embed-code__container { gap: var(--gap-24); }
.embed-code__text { gap: var(--gap-8); }

.embed-code__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  border-radius: var(--radius-12);
  background: var(--bg-surface);
}

.embed-code.hero--align-center .embed-code__text {
  align-items: center;
  text-align: center;
}

.embed-code.hero--align-right .embed-code__text {
  align-items: flex-end;
  text-align: right;
}

/* Simple Text: centered rich text and responsive two-column layouts. */
.simple-text {
  color: var(--color-main);
}

.simple-text__content,
.simple-text__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
}

.simple-text__content {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.simple-text__content > :where(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding-inline-start: var(--space-24);
}

.simple-text.variation-2 .simple-text__content {
  flex-direction: row;
  gap: var(--gap-64);
}

.simple-text.variation-2 .simple-text__column {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .simple-text.variation-2 .simple-text__content {
    flex-direction: column;
    gap: var(--gap-32);
  }
}

/* FAQ: native details accordions with stacked and split layouts. */
.faq {
  color: var(--color-main);
}

.faq__container,
.faq__intro,
.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__container { gap: var(--gap-32); }

.faq__intro {
  align-items: flex-start;
  gap: var(--gap-16);
}

.faq__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}


.faq__list {
  border-top: 1px solid var(--color-border-light);
}

.faq__item {
  border-bottom: 1px solid var(--color-border-light);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-16);
  padding-block: var(--space-16);
  font-size: var(--font-size-lg);
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__icon {
  flex: 0 0 clamp(26px, 1.2vw, 26px);
  width: clamp(26px, 1.2vw, 26px);
  height: clamp(26px, 1.2vw, 26px);
  font-size: clamp(20px, 1.2vw, 24px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq__icon--close { display: none; }
.faq__item[open] .faq__icon--chevron { display: none; }
.faq__item[open] .faq__icon--close { display: inline-flex; }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 220ms ease;
}

.faq__answer-inner {
  overflow: hidden;
  line-height: 1.5;
}

.faq__answer-inner > :first-child { padding-top: var(--space-8); }
.faq__answer-inner > :last-child { padding-bottom: var(--space-32); }

.faq__answer-inner > * + * {
  margin-top: var(--space-16);
}

section :where(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding-inline-start: var(--space-24);
}

.faq__answer-inner a {
  color: inherit;
}

.faq__item.is-expanded .faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq.variation-2 .faq__container {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap-64);
}

.faq.variation-2 .faq__intro {
  flex: 0 0 clamp(280px, 25vw, 460px);
}

.faq.variation-2 .faq__list {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .faq.variation-2 .faq__container {
    flex-direction: column;
    gap: var(--gap-24);
  }

  .faq.variation-2 .faq__intro,
  .faq.variation-2 .faq__list {
    width: 100%;
  }
}

/* CTA Banner: centered, background-media, split-card, and tall-media variations. */
.cta-banner__container,
.cta-banner__content,
.cta-banner__text {
  display: flex;
}

.cta-banner__container {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-24);
}

.cta-banner__content,
.cta-banner__text {
  flex-direction: column;
}

.cta-banner__content {
  align-items: center;
  gap: var(--gap-24);
  width: 100%;
  text-align: center;
}

.cta-banner__text {
  align-items: inherit;
  gap: var(--gap-8);
  width: 100%;
}

.cta-banner__pretitle {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.cta-banner__copy { max-width: min(100%, clamp(320px, 43.1vw, 620px)); }

.cta-banner__actions {
  justify-content: center;
  gap: var(--gap-8);
}

.cta-banner.variation-1 .btn-secondary {
  background: transparent;
  border-color: color-mix(in srgb, #000000 25%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .cta-banner.variation-1 .btn-secondary:hover {
    background: color-mix(in srgb, var(--bg-main) 0%, transparent);
    border-color: color-mix(in srgb, #000000 50%, transparent);
  }
}



.cta-banner.variation-2,
.cta-banner.variation-4 {
  position: relative;
  display: flex;
  overflow: hidden;
}

.cta-banner.variation-2 { min-height: clamp(360px, 29.2vw, 420px); }

.cta-banner.variation-2 .cta-banner__media,
.cta-banner.variation-4 .cta-banner__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.cta-banner.variation-2 .cta-banner__media::after {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 50%, transparent);
  content: "";
}

.cta-banner.variation-2 .cta-banner__media img,
.cta-banner.variation-3 .cta-banner__media img,
.cta-banner.variation-4 .cta-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner.variation-2 .cta-banner__container {
  flex-direction: row;
  justify-content: space-between;
}

.cta-banner.variation-2 .cta-banner__content {
  flex: 1 1 0;
  align-items: flex-start;
  max-width: var(--width-680);
  text-align: left;
}

.cta-banner.variation-2 .cta-banner__pretitle, .cta-banner.variation-4 .cta-banner__pretitle { color: var(--color-accent); }
.cta-banner.variation-2 .cta-banner__actions { flex: 0 0 auto; }

.cta-banner.variation-3 .cta-banner__container {
  flex-direction: row;
  align-items: stretch;
  gap: var(--gap-12);
}

.cta-banner.variation-3 .cta-banner__media,
.cta-banner.variation-3 .cta-banner__content {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  min-height: clamp(320px, 27.8vw, 400px);
  border-radius: var(--radius-12);
}

.cta-banner.variation-3 .cta-banner__media {
  position: relative;
  align-self: flex-start;
  aspect-ratio: 1.5;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.cta-banner.variation-3 .cta-banner__media img {
  position: absolute;
  inset: 0;
}

.cta-banner.variation-3 .cta-banner__content {
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-24);
  padding: var(--space-32) var(--space-40);
  text-align: left;
  background: var(--bg-card);
}

.cta-banner.variation-3 .cta-banner__actions { justify-content: flex-start; }

.cta-banner.variation-4 {
  align-items: flex-end;
  min-height: clamp(520px, 48.6vw, 700px);
}

.cta-banner.variation-4 .cta-banner__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, #000 70%, transparent) 100%);
  content: "";
}

.cta-banner.variation-4 .cta-banner__container {
  min-height: inherit;
  justify-content: flex-end;
}

.cta-banner.variation-4 .cta-banner__content {
  max-width: min(100%, var(--width-720));
  color: var(--color-light);
}

.cta-banner.variation-4 .cta-banner__copy { max-width: none; }

@media (max-width: 767px) {
  .cta-banner.variation-2 .cta-banner__container,
  .cta-banner.variation-3 .cta-banner__container {
    flex-direction: column;
  }

  .cta-banner.variation-2 .cta-banner__actions { align-self: flex-start; }

  .cta-banner.variation-3 .cta-banner__media,
  .cta-banner.variation-3 .cta-banner__content {
    flex-basis: auto;
    width: 100%;
  }

  .cta-banner.variation-3 .cta-banner__actions {
    align-self: stretch;
    flex-direction: column;
    width: 100%;
  }

  .cta-banner.variation-3 .cta-banner__actions .btn {
    width: 100%;
  }
}

/* Photo Gallery: contained grid, full-width grid, and carousel variations. */
.photo-gallery {
  --gallery-columns: 3;
  color: var(--color-main);
}

.photo-gallery.columns-2 { --gallery-columns: 2; }
.photo-gallery.columns-3 { --gallery-columns: 3; }
.photo-gallery.columns-4 { --gallery-columns: 4; }
.photo-gallery[data-desktop-columns="2"] { --gallery-columns: 2; }
.photo-gallery[data-desktop-columns="3"] { --gallery-columns: 3; }
.photo-gallery[data-desktop-columns="4"] { --gallery-columns: 4; }

.photo-gallery__inner,
.photo-gallery__container {
  display: flex;
  flex-direction: column;
}

.photo-gallery__inner { width: 100%; }

.photo-gallery__container {
  align-items: center;
  gap: var(--gap-40);
}

.photo-gallery__container > h2 {
  width: 100%;
  max-width: min(100%, var(--width-680));
  text-align: center;
}

.photo-gallery__slider { width: 100%; }

.photo-gallery__item {
  display: block;
  overflow: hidden;
  background: var(--bg-surface-elevate);
}

.photo-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.photo-gallery .swiper-pagination {
  position: relative;
  inset: auto;
  margin-top: var(--space-24);
  line-height: 0;
}

.photo-gallery .swiper-pagination-bullet {
  width: clamp(8px, 0.56vw, 8px);
  height: clamp(8px, 0.56vw, 8px);
  margin-inline: var(--space-4);
  background: var(--color-main);
  opacity: 0.25;
}

.photo-gallery .swiper-pagination-bullet-active {
  background: var(--color-primary);
  opacity: 1;
}

.photo-gallery.variation-2 .swiper-pagination {
  display: block;
}

.photo-gallery.variation-2 {
  padding: 0;
}

.photo-gallery.variation-2 .photo-gallery__container {
  width: 100%;
  max-width: none;
  gap: 0;
}

.photo-gallery.variation-2 .photo-gallery__container > h2 {
  max-width: none;
  padding: var(--space-64) var(--space-24);
}

.photo-gallery.variation-3 .photo-gallery__container {
  align-items: flex-start;
}

.photo-gallery.variation-3 .photo-gallery__container > h2 {
  max-width: none;
  text-align: left;
}

@media (min-width: 768px) {
  .photo-gallery.variation-3 .photo-gallery__item {
    aspect-ratio: 1.25;
    border-radius: var(--radius-12);
  }
  .photo-gallery.variation-1 .photo-gallery__items,
  .photo-gallery.variation-2 .photo-gallery__items {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  }

  .photo-gallery.variation-1 .photo-gallery__items { gap: var(--gap-24); }

  .photo-gallery.variation-1 .photo-gallery__item,
  .photo-gallery.variation-2 .photo-gallery__item {
    width: auto;
    aspect-ratio: 1 / 1;
  }

  .photo-gallery.variation-1 .photo-gallery__item {
    border-radius: var(--radius-12);
  }

  .photo-gallery.variation-1 .swiper-pagination,
  .photo-gallery.variation-2 .swiper-pagination {
    display: none;
  }
}

@media (max-width: 767px) {
  .photo-gallery__slider {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .photo-gallery.variation-1 .photo-gallery__slider,
  .photo-gallery.variation-3 .photo-gallery__slider {
    padding-inline: var(--space-24);
  }

  .photo-gallery__item {
    position: relative;
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-12);
  }

  .photo-gallery__item::before {
    display: block;
    padding-top: 100%;
    content: "";
  }

  .photo-gallery__item img {
    position: absolute;
    inset: 0;
  }

  .photo-gallery.variation-2 .photo-gallery__slider {
    padding-inline: 0;
  }

  .photo-gallery.variation-2 .photo-gallery__item {
    border-radius: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .photo-gallery__item:hover img { transform: scale(1.03); }
}

/* Testimonials: desktop card grid and responsive Swiper variations. */
.testimonials {
  --testimonial-columns: 2;
}

.testimonials.columns-2 { --testimonial-columns: 2; }
.testimonials.columns-3 { --testimonial-columns: 3; }
.testimonials.columns-4 { --testimonial-columns: 4; }
.testimonials[data-desktop-columns="2"] { --testimonial-columns: 2; }
.testimonials[data-desktop-columns="3"] { --testimonial-columns: 3; }
.testimonials[data-desktop-columns="4"] { --testimonial-columns: 4; }

.testimonials__inner,
.testimonials__container,
.testimonials__header,
.testimonials__intro,
.testimonials__card,
.testimonials__content,
.testimonials__copy {
  display: flex;
}

.testimonials__container {
  flex-direction: column;
  gap: var(--gap-40);
}

.testimonials__header {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
}

.testimonials__intro,
.testimonials__card,
.testimonials__content,
.testimonials__copy {
  flex-direction: column;
}

.testimonials__intro { gap: var(--gap-4); }

.testimonials__eyebrow {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.testimonials__slider { width: 100%; }

.testimonials__items {
  align-items: stretch;
}

.testimonials__card {
  height: auto;
  padding: clamp(24px, 1.7vw, 24px);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-12);
  background: var(--bg-card);
}

.testimonials.variation-2 .testimonials__card {
  padding: clamp(24px, 2.8vw, 40px);
  box-shadow: none;
}

.testimonials__content { gap: var(--gap-12); }
.testimonials__copy { gap: var(--gap-8); }
.testimonials__copy h3 {
  font-family: inherit;
  font-weight: 700;
}

.testimonials__stars {
  display: flex;
  gap: var(--gap-4);
  color: var(--color-main);
  font-size: clamp(16px, 1.2vw, 16px);
  line-height: 1;
}

.testimonials .swiper-pagination {
  position: relative;
  inset: auto;
  margin-top: 0;
  line-height: 0;
}

.testimonials .swiper-pagination-bullet {
  width: clamp(8px, 0.56vw, 8px);
  height: clamp(8px, 0.56vw, 8px);
  margin-inline: var(--space-4);
  background: var(--color-main);
  opacity: 0.25;
}

.testimonials .swiper-pagination-bullet-active {
  background: var(--color-primary);
  opacity: 1;
}

@media (min-width: 768px) {
  .testimonials.variation-1 .testimonials__card { min-height: clamp(190px, 13.2vw, 190px); }
}

@media (max-width: 767px) {
  .testimonials__slider {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space-24);
  }

  .testimonials__header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Products: image-first, commerce-card, and media-overlay variations. */
.products {
  --product-columns: 3;
}

.products.columns-2 { --product-columns: 2; }
.products.columns-3 { --product-columns: 3; }
.products.columns-4 { --product-columns: 4; }
.products[data-desktop-columns="2"] { --product-columns: 2; }
.products[data-desktop-columns="3"] { --product-columns: 3; }
.products[data-desktop-columns="4"] { --product-columns: 4; }

.products__inner,
.products__container,
.products__header,
.products__heading,
.products__card,
.products__info,
.products__copy,
.products__price {
  display: flex;
}

.products__container,
.products__heading,
.products__card,
.products__info,
.products__copy {
  flex-direction: column;
}

.products__container { gap: var(--gap-40); }

.products__header {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-24);
}

.products__heading {
  flex: 1;
  gap: var(--gap-4);
}

.products__pretitle {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.products__description {
  width: min(100%, var(--width-680));
  margin-block-start: var(--space-8);
}

.products__slider { width: 100%; }
.products__items { align-items: stretch; }

.products__card {
  position: relative;
  height: auto;
  min-width: 0;
  gap: var(--gap-24);
}

.products__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--radius-12);
  background: var(--bg-surface);
}

.products__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.products__add--overlay {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-start: var(--space-16);
}

.products__info,
.products__copy { gap: var(--gap-4); }

.products__copy .text-sm{
  line-height: 1.5;
}

.products__copy h3 {
  font-family: inherit;
  font-weight: 700;
}

.products__link {
  color: inherit;
  text-decoration: none;
}

.products__link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.products__add {
  z-index: 2;
  pointer-events: none;
}

.products__copy > p { color: var(--color-muted); }

.products__price {
  align-items: baseline;
  gap: var(--gap-8);
  color: var(--color-main);
  font-weight: 700;
}

.products__price del {
  color: var(--color-muted);
  font-weight: 500;
  opacity: 0.5;
}

.products.variation-2 .products__header {
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.products.variation-2 .products__heading { align-items: center; }

.products.variation-2 .products__card {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-16);
  background: var(--bg-card);
}

.products.variation-2 .products__media {
  aspect-ratio: 311 / 240;
  border-radius: var(--radius-12) var(--radius-12) 0 0;
}

.products.variation-2 .products__info {
  align-items: flex-start;
  gap: var(--gap-16);
  padding: var(--space-24);
}

.products.variation-3 .products__card {
  position: relative;
  min-height: clamp(260px, 22vw, 360px);
  overflow: hidden;
  border-radius: var(--radius-12);
  color: var(--color-light);
  background: var(--color-dark);
  aspect-ratio: 1.3;
}

.products.variation-3 .products__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}

.products.variation-3 .products__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, #000 85%, transparent));
  content: "";
}

.products.variation-3 .products__info {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  height: 100%;
  padding: var(--space-24);
}

.products.variation-3 .products__copy h3,
.products.variation-3 .products__copy > p,
.products.variation-3 .products__price,
.products.variation-3 .products__price del { color: inherit; }

.products.variation-3 .products__add {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-24);
  inset-inline-end: var(--space-24);
}

.products .swiper-pagination {
  position: relative;
  inset: auto;
  margin-block-start: var(--space-24);
  line-height: 0;
}

.products .swiper-pagination-bullet {
  width: clamp(8px, 0.56vw, 8px);
  height: clamp(8px, 0.56vw, 8px);
  margin-inline: var(--space-4);
  background: var(--color-main);
  opacity: 0.25;
}

.products .swiper-pagination-bullet-active {
  background: var(--color-primary);
  opacity: 1;
}

@media (max-width: 767px) {
  .products__header {
    flex-direction: column;
   }

  .products__slider {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space-24);
  }
}

@media (hover: hover) and (pointer: fine) {
  .products__card:hover .products__media img { transform: scale(1.03); }
}

/* Discounts: shared Product carousel with landscape coupon cards. */
.discounts .products__heading {
  width: 100%;
  align-items: center;
  text-align: center;
}

.discounts .products__card { gap: var(--gap-12); }

.discounts .products__media { aspect-ratio: 31 / 20; }

.discounts .products__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--color-dark) 80%, transparent));
  content: "";
}

.discounts__offer {
  position: absolute;
  z-index: 1;
  inset-inline: var(--space-16);
  inset-block-end: var(--space-16);
  color: var(--color-light);
}

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

.discounts__code {
  padding: var(--space-8) var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-main));
  color: var(--color-main);
  font-weight: 600;
  overflow-wrap: anywhere;
  user-select: all;
  min-height: 42px;
      display: flex;
    align-items: center;
}

.discounts__actions > :is(.discounts__code, .discounts__copy) {
  justify-content: center;
  text-align: center;
}

@media (max-width: 768px) {
  .discounts__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .discounts__actions > :is(.discounts__code, .discounts__copy) {
    width: 100%;
  }
}

.discounts__status { text-align: center; }

.discounts .swiper-pagination-lock { display: none; }

/* App Banner: portrait and landscape custom device frames. */
.app-banner {
  padding-block-end: 0;
  overflow: hidden;
  /* border-bottom: 1px solid var(--color-border-light); */
}

body.invert-c .app-banner.bg-surface-elevate,
body.invert-c .app-banner .btn-secondary  {
  --color-heading: var(--color-on-primary);
  color: var(--color-on-primary) ;
}

.app-banner__inner,
.app-banner__container,
.app-banner__content,
.app-banner__text,
.app-banner__actions {
  display: flex;
}

.app-banner__inner { width: 100%; }

.app-banner__container {
  align-items: flex-end;
  gap: var(--gap-64);
  justify-content: center;
}

.app-banner__content,
.app-banner__text {
  flex-direction: column;
}

.app-banner__content {
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--gap-24);
  max-width: min(100%, clamp(320px, 38.9vw, 500px));
  padding: var(--space-64) 0;
  padding-block-end: clamp(64px, 8.9vw, 128px);
}

.app-banner__text {
  gap: var(--gap-8);
  width: 100%;
}

.app-banner__text > p:last-child {
  max-width: min(100%, clamp(320px, 43.1vw, 620px));
}

.app-banner__pretitle {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.app-banner__actions {
  flex-wrap: wrap;
  gap: var(--gap-8);
}

.app-banner__device {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--bg-surface);
}

.app-banner__device--mobile {
  width: clamp(240px, 16.2vw, 300px);
  aspect-ratio: 233 / 410;
  margin-inline: var(--space-64);
  border-inline: clamp(6px, 0.42vw, 6px) solid var(--color-dark);
  border-top: clamp(6px, 0.42vw, 6px) solid var(--color-dark);
  border-radius: 32px 32px 0 0;
}

.app-banner__device--mobile::before {
  position: absolute;
  z-index: 1;
  top: var(--space-8);
  left: 50%;
  width: clamp(40px, 3.2vw, 46px);
  height: clamp(8px, 0.7vw, 10px);
  border-radius: 24px;
  background: var(--color-dark);
  content: "";
  transform: translateX(-50%);
}

.app-banner__device--mobile .app-banner__media {
  position: absolute;
  inset: clamp(26px, 1.9vw, 28px) 0 0;
}

.app-banner__media {
  margin: 0;
  overflow: hidden;
}

.app-banner__media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-banner__device--mobile .app-banner__media :is(img, video) {
  object-position: top center;
}

.app-banner.variation-2 .app-banner__container,
.app-banner.variation-2 .app-banner__content,
.app-banner.variation-2 .app-banner__text {
  align-items: center;
}

.app-banner.variation-2 .app-banner__container {
  flex-direction: column;
  gap: 0;
}

.app-banner.variation-2 .app-banner__content {
  max-width: none;
  padding: 0 var(--space-64) var(--space-64);
  text-align: center;
}

.app-banner.variation-2 .app-banner__device--landscape {
  width: 100%;
  aspect-ratio: 49 / 23;
  border-inline: clamp(6px, 0.56vw, 8px) solid var(--color-dark);
  border-top: clamp(6px, 0.56vw, 8px) solid var(--color-dark);
  border-radius: 24px 24px 0 0;
}

.app-banner.variation-2 .app-banner__media {
  width: 100%;
  height: 100%;
}

@media (min-width: 1440px) {
  :root[data-content-width="fluid"] .app-banner .app-banner__content {
    width: 30vw;
    max-width: 30vw;
  }
}

@media (max-width: 767px) {
  .app-banner__container {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-40);
  }

  .app-banner__content,
  .app-banner.variation-2 .app-banner__content {
    max-width: var(--width-680);
    padding: 0 0 var(--space-48);
  }

  .app-banner.variation-1 .app-banner__content,
  .app-banner.variation-1 .app-banner__text {
    align-items: center;
    text-align: center;
  }

  .app-banner.variation-1 .app-banner__actions {
    justify-content: center;
  }

  .app-banner__device--mobile { margin-inline: 0; }

  .app-banner.variation-2 .app-banner__device--landscape {
    aspect-ratio: 16 / 10;
  }
}

/* Pricelist: repeatable menus, categories, and menu-item rows. */
.pricelists,
.pricelist__inner,
.pricelist__container,
.pricelist__columns,
.pricelist__column,
.pricelist__category,
.pricelist__items,
.pricelist__item,
.pricelist__item-info {
  display: flex;
}

.pricelists,
.pricelist__container,
.pricelist__column,
.pricelist__category,
.pricelist__items {
  flex-direction: column;
}

.pricelist-sticky-navigation {
  position: sticky;
  z-index: 90;
  top: 0;
  width: 100%;
  padding: var(--space-12) var(--space-24);
  overflow-x: auto;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  background: color-mix(in srgb, var(--bg-main) 92%, transparent);
  backdrop-filter: blur(clamp(16px, 1.5vw, 20px));
  -webkit-backdrop-filter: blur(clamp(16px, 1.5vw, 20px));
}

.site-header-sticky + main .pricelist-sticky-navigation,
.site-header-fixed + main .pricelist-sticky-navigation {
  top: var(--site-header-height, 0px);
}

.pricelist-sticky-navigation ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-4);
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pricelist-sticky-navigation ul .btn-link {
  margin: 0 var(--space-12);
}

.pricelist {
  scroll-margin-top: calc(var(--site-header-height, 0px) + clamp(46px, 4vw, 50px));
  color: var(--color-main);
}

.pricelist__inner { width: 100%; }

.pricelist__container {
  align-items: center;
  gap: var(--gap-40);
}

.pricelist__container > h2 {
  width: 100%;
  text-align: center;
}

.pricelist__columns {
  align-items: flex-start;
  gap: var(--gap-64);
  width: 100%;
}

.pricelist__column {
  flex: 1 1 0;
  gap: var(--gap-32);
  min-width: 0;
}

.pricelist__category {
  gap: var(--gap-24);
  width: 100%;
  padding-block-end: var(--space-32);
  border-bottom: 1px dashed var(--color-border-light);
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

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

.pricelist__items { gap: var(--gap-16); }

.pricelist__item {
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
}

.pricelist__item-info {
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--gap-4) var(--gap-8);
  min-width: 0;
  line-height: 1.5;
}

.pricelist__meta {
  color: color-mix(in srgb, var(--color-main) 55%, transparent);
}

.pricelist__price {
  flex: 0 0 auto;
  line-height: 1.5;
}

.pricelist.variation-1 .pricelist__columns {
  padding: var(--space-32);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-12);
}

.pricelist.variation-2 .pricelist__columns {
  flex-direction: row;
}

.pricelist.variation-2 .pricelist__column,
.pricelist.variation-3 .pricelist__column {
  padding-block: var(--space-32);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.pricelist.variation-2 .pricelist__category,
.pricelist.variation-3 .pricelist__category {
  border-bottom-style: solid;
}

.pricelist.variation-3 .pricelist__columns {
  max-width: min(100%, var(--width-680));
}

.pricelist.variation-3 .pricelist__category h3,
.pricelist.variation-3 .pricelist__item-info {
  align-items: center;
  text-align: center;
}

.pricelist.variation-3 .pricelist__item,
.pricelist.variation-3 .pricelist__item-info {
  flex-direction: column;
}

.pricelist.variation-3 .pricelist__item {
  align-items: center;
  gap: var(--gap-8);
}

.pricelist.variation-3 .pricelist__item-info { gap: var(--gap-4); }
.pricelist.variation-3 .pricelist__items { gap: var(--gap-16); }

@media (max-width: 767px) {
  .pricelist.variation-2 .pricelist__columns {
    flex-direction: column;
    gap: 0 var(--gap-40);
  }

  .pricelist.variation-2 .pricelist__column { width: 100%; }

  .pricelist.variation-1 .pricelist__columns {
    padding: var(--space-24);
  }

  .pricelist.variation-2 .pricelist__column:last-child,
  .pricelist.variation-3 .pricelist__column:last-child {
    padding-block-start: 0;
    border-block-start: 0;
  }
  .pricelist__column {
    gap: 0;
  }
  .pricelist__category {
    padding: var(--space-32) 0;
  }
  .pricelist.variation-2 .pricelist__column, .pricelist.variation-3 .pricelist__column {
    padding-bottom: var(--space-32);
  }
}

/* Opening Hours: schedule card, full-media, split-media, and glass variations. */
.opening-hours {
  position: relative;
  color: var(--color-main);
}

.opening-hours__inner,
.opening-hours__container,
.opening-hours__intro,
.opening-hours__heading,
.opening-hours__actions,
.opening-hours__schedule,
.opening-hours__row {
  display: flex;
}

.opening-hours__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.opening-hours__container {
  align-items: center;
  gap: var(--gap-24);
}

.opening-hours__intro,
.opening-hours__heading,
.opening-hours__schedule {
  flex-direction: column;
}

.opening-hours__intro {
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--gap-24);
  min-width: 0;
}

.opening-hours__heading { gap: var(--gap-8); }

.opening-hours__pretitle,
.opening-hours__row strong {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.opening-hours__row strong {
  font-weight: 700;
}

.opening-hours__phone {
  color: inherit;
  text-decoration: none;
}

.opening-hours__actions {
  align-items: center;
  gap: var(--gap-12) var(--gap-24);
  flex-wrap: wrap;
}

.opening-hours__schedule {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  padding: var(--space-64) var(--space-48);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  background: var(--bg-card);
}

.opening-hours__row {
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
  padding-block: var(--space-24);
  font-size: var(--font-size-lg);
  line-height: 1.45;
}

.opening-hours__row + .opening-hours__row {
  border-top: 1px dashed var(--color-border);
}

.opening-hours__row span { text-align: right; }

.opening-hours.variation-2,
.opening-hours.variation-4 {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 48.6vw, 700px);
  overflow: hidden;
  color: var(--color-light);
}

.opening-hours.variation-2 .opening-hours__media,
.opening-hours.variation-4 .opening-hours__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.opening-hours.variation-2 .opening-hours__media::after,
.opening-hours.variation-4 .opening-hours__media::after {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 50%, transparent);
  content: "";
}

.opening-hours__media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opening-hours.variation-2 .opening-hours__pretitle,
.opening-hours.variation-4 .opening-hours__pretitle {
  color: var(--color-accent);
}

.opening-hours.variation-2 .opening-hours__schedule {
  color: var(--color-main);
}

.opening-hours.variation-3 {
  display: flex;
  min-height: clamp(560px, 48.6vw, 700px);
  padding: 0;
}

.opening-hours.variation-3 > .opening-hours__media,
.opening-hours.variation-3 > .opening-hours__inner {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}

.opening-hours.variation-3 > .opening-hours__media {
  margin: 0;
}

.opening-hours.variation-3 .opening-hours__container {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--gap-24);
  width: 100%;
  max-width: none;
  padding: calc(var(--space-64) * 1.5);
}

.opening-hours.variation-3 .opening-hours__schedule {
  padding: 0;
  border: 0;
  border-radius: 0;
  flex: none;
  background: transparent;
}

.opening-hours.variation-3 .opening-hours__intro {
  flex: none;
}

.opening-hours.variation-4 .opening-hours__container {
  flex-direction: column;
  gap: var(--gap-40);
}

.opening-hours.variation-4 .opening-hours__intro {
  align-items: center;
  text-align: center;
}

.opening-hours.variation-4 .opening-hours__heading { align-items: center; }

.opening-hours.variation-4 .opening-hours__schedule {
  width: min(100%, clamp(400px, 38.9vw, 560px));
  color: var(--color-light);
  border-color: color-mix(in srgb, var(--color-light) 25%, transparent);
  background: color-mix(in srgb, #000 20%, transparent);
  backdrop-filter: blur(10px);
}

.opening-hours.variation-4 .opening-hours__row strong { color: inherit; }
.opening-hours.variation-4 .opening-hours__row + .opening-hours__row { border-color: color-mix(in srgb, var(--color-light) 40%, transparent); }

@media (max-width: 767px) {
  .opening-hours__container,
  .opening-hours.variation-3 {
    flex-direction: column;
  }

  .opening-hours__intro,
  .opening-hours__schedule,
  .opening-hours.variation-3 > .opening-hours__media,
  .opening-hours.variation-3 > .opening-hours__inner {
    flex-basis: auto;
    width: 100%;
  }

  .opening-hours__schedule {
    padding: var(--space-32);
  }

  .opening-hours.variation-3 > .opening-hours__media {
    aspect-ratio: 1 / 1;
  }

  .opening-hours.variation-3 .opening-hours__container {
    gap: var(--gap-40);
    padding: var(--space-48) var(--space-24);
  }

  .opening-hours__row {
    align-items: flex-start;
    font-size: var(--font-size-base);
  }

  .opening-hours__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Text & image: repeatable alternating media and copy rows. */
.text-info {
  color: var(--color-main);
}

.text-info__inner,
.text-info__container,
.text-info__items,
.text-info__content,
.text-info__heading {
  display: flex;
  flex-direction: column;
}

.text-info__container {
  gap: var(--gap-64);
}

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

.text-info__items {
  gap: var(--gap-64);
}

.text-info__item {
  display: flex;
  align-items: center;
  width: 100%;
}

.text-info__content {
  flex: 1 1 0;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-16);
  min-width: 0;
  padding-block: var(--space-64);
}

.text-info__content-inner {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-16);
  width: min(100%, var(--text-info-content-max-width));
}
.text-info__content-inner p {
  line-height: 28px;
}

.text-info__item:nth-child(odd) .text-info__content-inner {
  margin-right: auto;
}

.text-info__item:nth-child(even) .text-info__content-inner {
  margin-left: auto;
}

.text-info__heading {
  align-items: flex-start;
  gap: var(--gap-8);
}

.text-info__pretitle {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.text-info__copy {
  line-height: 28px;
}

.text-info__media {
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--text-info-media-aspect-ratio, 10 / 13);
}

.text-info__media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-aspect-square { aspect-ratio: 1 / 1; }
.media-aspect-portrait { aspect-ratio: 10 / 13; }
.media-aspect-landscape { aspect-ratio: 18 / 13; }

.text-info__item:nth-child(odd) .text-info__content {
  order: 1;
  padding-right: var(--space-64);
}

.text-info__item:nth-child(odd) .text-info__media {
  order: 2;
}

.text-info__item:nth-child(even) .text-info__media {
  order: 1;
}

.text-info__item:nth-child(even) .text-info__content {
  order: 2;
  padding-left: var(--space-64);
}

/* Text & image variation 1: contained portrait media. */
.text-info.variation-1 .text-info__media {
  width: 41%;
  border-radius: var(--radius-12);
}

/* Text & image variation 2: contained square rows without vertical gutters. */
.text-info.variation-2 .text-info__container {
  gap: var(--gap-32);
}

.text-info.variation-2 .text-info__items {
  gap: 0;
}

.text-info.variation-2 .text-info__media {
  width: 50%;
}

/* Text & image variation 3: fluid edge-to-edge split rows. */
.text-info.variation-3 {
  padding: 0;
}

.text-info.variation-3 .text-info__container {
  width: 100%;
  max-width: none;
  gap: 0;
}

.text-info.variation-3 .text-info__title {
  padding: var(--space-64) var(--space-24);
}

.text-info.variation-3 .text-info__items {
  gap: 0;
}

.text-info.variation-3 .text-info__media {
  width: 50%;
}

.text-info.variation-3 .text-info__content {
  align-items: center;
  padding: var(--space-64);
}

.text-info.variation-3 .text-info__content-inner {
  width: min(100%, 700px);
  max-width: 700px;
  margin-inline: auto;
}

:root[data-content-width="fluid"] .text-info__content-inner {
  max-width: 700px;
  margin-inline: auto;
}

@media (min-width: 1440px) {
  .text-info.variation-3 .text-info__title {
    font-size: clamp(46px, 3.1944vw, 123px);
  }

  .text-info.variation-3 .text-info__heading :is(h2, h3, h4, h5) {
    font-size: clamp(32px, 2.2222vw, 85px);
  }

}

@media (max-width: 767px) {
  .text-info__item {
    align-items: stretch;
    flex-direction: column;
  }

  .text-info .text-info__item .text-info__media {
    order: 1;
    width: 100%;
  }

  .text-info .text-info__item .text-info__content {
    order: 2;
    width: 100%;
    padding: var(--space-32) 0 0;
  }

  .text-info__item:nth-child(even) .text-info__content-inner {
    margin-inline-start: 0;
  }

  .text-info.variation-2 .text-info__items,
  .text-info.variation-3 .text-info__items {
    gap: var(--gap-40);
  }

  .text-info.variation-3 .text-info__container {
    padding-bottom: var(--space-64);
  }

  .text-info.variation-3 .text-info__content {
    align-items: flex-start;
    padding-inline: var(--space-24);
  }

  .text-info.variation-3 .text-info__content-inner,
  :root[data-content-width="fluid"] .text-info__content-inner {
    margin-inline: auto;
  }
}

/* Design Separator: decorative full-width pattern between page sections. */
.design-separator {
  min-height: clamp(120px, 11.1111vw, 200px);
  padding: 0;
  background-color: var(--bg-main);
  background-image: var(--design-separator-image, none);
  background-position: center;
  background-size: contain;
  margin-top: -1px;
}

.design-separator.design-separator-cover {
  margin-top: -0px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Headings: shared admin-controlled font, weight, and responsive scales. */
:where(h1, h2, h3, h4, h5, .heading-extra, .heading-h1, .heading-h2, .heading-h3, .heading-h4, .heading-h5, .h1, .h2, .h3, .h4, .h5) {
  font-family: var(--font-family-heading, "Inter", sans-serif);
  line-height: 1.15;
  color: var(--color-heading);
}

.hero :where(h1, h2, h3, h4, h5, .heading-extra, .heading-h1, .heading-h2, .heading-h3, .heading-h4, .heading-h5, .h1, .h2, .h3, .h4, .h5) {
  color: inherit;
}

:where(h1, h2, h3, h4, h5, .heading-h1, .heading-h2, .heading-h3, .heading-h4, .heading-h5, .h1, .h2, .h3, .h4, .h5) {
  font-weight: var(--font-heading-weight, 700);
}

h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }


/* Buttons: groups, sizes, color variants, icons, links, and states. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.btn-group.btn-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.btn-group:not(.btn-links) > :is(a:not(.btn), .btn-link) {
  margin-inline: var(--space-16);
}


.btn {
  --btn-background: var(--bg-surface);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  padding: clamp(12px, 0.9vw, 12px) clamp(16px, 1.2vw, 16px);
  border: clamp(1px, 0.1vw, 1px) solid transparent;
  border-radius: var(--radius-8);
  color: var(--color-main);
  background: var(--btn-background);
  font: inherit;
  font-family: var(--font-family-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn-sm {
  padding: clamp(8px, 0.6vw, 8px) clamp(12px, 0.9vw, 12px);
  font-size: var(--font-size-sm);
}

.btn-md {
  padding: clamp(12px, 0.9vw, 12px) clamp(16px, 1.2vw, 16px);
}

.btn-lg {
  padding: clamp(12px, 0.9vw, 12px) clamp(16px, 1.2vw, 16px);
}

.btn.btn-primary {
  --btn-background: var(--color-primary);

  color: var(--color-on-primary);
  background: var(--btn-background);
  border-color: var(--color-primary);
}

.btn.btn-secondary {
  --btn-background: var(--bg-surface);

  color: var(--color-main);
  background: var(--btn-background);
  border-color: var(--btn-background);
}

.btn.btn-accent {
  --btn-background: var(--bg-accent);

  color: var(--color-on-primary);
  background: var(--btn-background);
  border-color: var(--btn-background);
}



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

.bg-primary :where(h1, h2, h3, h4, h5, .heading-extra, .heading-h1, .heading-h2, .heading-h3, .heading-h4, .heading-h5, .h1, .h2, .h3, .h4, .h5) {
  color: var(--color-on-primary);
}

.bg-surface .btn.btn-secondary {
  --btn-background: color-mix(in srgb, var(--bg-surface) 0%, var(--bg-main));
}

.bg-surface-elevate :where(.pretitle, [class$="__pretitle"], [class$="__eyebrow"]) {
  color: inherit;
}

.bg-surface-elevate .btn.btn-primary {
  --btn-background: color-mix(in srgb, var(--color-dark) 50%, transparent);

  color: var(--color-light);
  background: var(--btn-background);
  border-color: var(--btn-background);
}

.bg-surface-elevate .btn.btn-secondary {
  --btn-background: transparent;

  color: var(--color-light);
  background: var(--btn-background);
  border-color: color-mix(in srgb, var(--bg-main) 25%, transparent);
}

.btn-blur,
.btn-blur-dark,
.btn-blur-light {
  --btn-background: color-mix(in srgb, var(--color-dark) 40%, transparent);
  background: var(--btn-background);
  border-color: color-mix(in srgb, var(--color-light) 10%, transparent);
  backdrop-filter: blur(clamp(20px, 1.5vw, 20px));
  -webkit-backdrop-filter: blur(clamp(20px, 1.5vw, 20px));
}

.btn-blur,
.btn-blur-dark {
  color: var(--color-light);
}

.btn-blur-light {
  --btn-background: color-mix(in srgb, var(--color-light) 55%, transparent);

  color: var(--color-dark);
  background: var(--btn-background);
  border-color: color-mix(in srgb, var(--color-light) 70%, transparent);
}

.btn i {
  font-size: inherit;
  line-height: inherit;
}

.btn-content {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
}

.btn-icon-left .btn-content {
  flex-direction: row;
}

.btn-icon-right .btn-content {
  flex-direction: row-reverse;
}

.btn.btn-link {
  --btn-background: transparent;

  padding: 0;
  border-color: transparent;
  border-style: none;
  color: var(--color-main);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
  text-underline-offset: calc(var(--space-4) * 1.5);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.btn-link.btn-primary {
  color: var(--color-primary);
}

.btn-link.btn-secondary {
  color: var(--color-main);
}

.btn-link.btn-blur,
.btn-link.btn-blur-dark {
  color: var(--color-light);
}

.btn-link.btn-blur-light {
  color: var(--color-dark);
}
.btn.btn-link i {
  display: none;
}
.btn:focus-visible,
.btn:active {
  background: color-mix(in srgb, var(--btn-background) 85%, transparent);
  border-color: color-mix(in srgb, var(--btn-background) 85%, transparent);
}

.btn-link:focus-visible,
.btn-link:active {
  text-decoration-color: currentColor;
}

a:focus-visible,
a:active {
  text-decoration-color: color-mix(in oklab, var(--color-main) 100%, transparent);
}

/* Language switcher: details-based desktop and mobile selection menus. */
.language-switcher {
  position: relative;
}

.language-switcher summary {
  list-style: none;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.site-header .language-switcher > summary.btn {
  --btn-background: color-mix(in srgb, currentColor 10%, transparent);

  color: var(--color-header);
  background: var(--btn-background);
  border-color: color-mix(in srgb, currentColor 5%, transparent);
}

.mobile-menu .language-switcher > summary.btn {
  --btn-background: color-mix(in srgb, currentColor 10%, transparent);

  color: var(--color-main);
  background: var(--btn-background);
  border-color: color-mix(in srgb, currentColor 5%, transparent);
  transition: background-color 250ms ease;
}

.mobile-menu__phone.btn {
  --btn-background: color-mix(in srgb, var(--color-main) 10%, transparent);
  text-align: center;
  color: var(--color-main);
  background: var(--btn-background);
  border-color: transparent;
}

.language-switcher__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-8));
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: clamp(180px, 18vw, 220px);
  padding: var(--space-8);
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  /* Zero stays square; nonzero settings add spacing, with a 12px minimum. */
  border-radius: min(calc(var(--radius-base) * 3), max(16px, calc(var(--radius-base) + var(--space-16))));
  color: var(--color-main);
  background: var(--bg-card);
  gap: 4px;
}

.language-switcher[open] .language-switcher__menu {
  animation: submenu-in 160ms ease;
}

.language-switcher__menu :is(button, a) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-8);
  color: var(--color-main);
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.language-switcher__menu :is(button, a)[aria-current="true"] {
  background: color-mix(in srgb, var(--color-main) 10%, transparent);
}

.language-switcher__menu :is(button, a) i {
  flex: 0 0 auto;
  width: clamp(6px, 0.45vw, 6px);
  height: clamp(6px, 0.45vw, 6px);
  border-radius: var(--radius-full);
  color: transparent;
  background: var(--color-positive);
  font-size: 0;
  opacity: 0;
}

.language-switcher__menu :is(button, a)[aria-current="true"] i {
  opacity: 1;
}

.language-switcher--mobile,
.language-switcher--mobile summary {
  width: 100%;
}

.language-switcher--mobile .language-switcher__menu {
  top: auto;
  right: 0;
  bottom: calc(100% + var(--space-8));
  left: 0;
}

/* Accessibility: shared visible keyboard focus treatment on every device. */
:where(a, button, summary):focus-visible {
  outline: clamp(2px, 0.2vw, 3px) solid var(--color-primary);
  outline-offset: var(--space-4);
}

/* Site Footer: three reusable layouts from the restaurant footer system. */
.site-footer {
  padding: var(--space-64) var(--space-24);
  border: 0;
  color: var(--color-main);
  background: var(--bg-surface);
}

.site-footer__container {
  align-items: stretch;
  flex-direction: column;
  gap: var(--gap-32);
}

.site-footer__company {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--gap-40);
}

.footer-variations {
  display: flex;
  flex-direction: column;
}

.site-footer.variation-1 .site-footer__company {
  gap: var(--gap-24);
}

.site-footer__top,
.site-footer__legal-row,
.site-footer__credit,
.site-footer__legal-links,
.site-footer__socials {
  display: flex;
  align-items: center;
}

.site-footer__legal-links {
  flex-wrap: wrap;
}

.site-footer__top,
.site-footer__legal-row {
  justify-content: space-between;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer__logo img,
.site-footer__logo.logo-size-sm img {
  display: inline-flex;
  width: auto;
  height: clamp(24px, 6vw, 32px);
}

.site-footer__logo.logo-size-md img {
  height: clamp(32px, 6vw, 40px);
}

.site-footer__logo.logo-size-lg img {
  height: clamp(40px, 6vw, 48px);
}

.site-footer__logo.logo-size-xl img {
  height: clamp(40px, 6vw, 72px);
}

.site-footer__maker img {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer__logo .site-footer__logo-image--light,
.site-footer__maker .site-footer__maker-image--light {
  display: none;
}

[data-theme="dark"] .site-footer__logo .site-footer__logo-image--default,
[data-theme="dark"] .site-footer__maker .site-footer__maker-image--default {
  display: none;
}

[data-theme="dark"] .site-footer__logo .site-footer__logo-image--light {
  display: inline-flex;
}

[data-theme="dark"] .site-footer__maker .site-footer__maker-image--light {
  display: block;
}

.site-footer__socials {
  gap: var(--gap-4);
}

.site-footer__social {
  width: clamp(36px, 2.7vw, 36px);
  height: clamp(36px, 2.7vw, 36px);
  padding: var(--space-8) var(--space-12);
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0px var(--color-border);
  transition: .25s ease;
}

.site-footer__social .btn-content {
  justify-content: center;
}

.site-footer__social i {
  font-size: clamp(16px, 1.2vw, 16px);
  line-height: 1;
}

.site-footer__social img {
  display: block;
  width: clamp(16px, 1.2vw, 16px);
  height: clamp(16px, 1.2vw, 16px);
}

.site-footer__columns {
  display: flex;
  align-items: stretch;
  gap: var(--gap-12);
}

.site-footer__column {
  display: flex;
  align-items: flex-start;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--gap-16);
  min-width: 0;
}

.site-footer__column-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-16);
}

.site-footer.variation-2 .site-footer__column {
  gap: var(--gap-24);
}

.site-footer.variation-2 .site-footer__columns {
  gap: var(--gap-40) var(--gap-64);
}

.site-footer.variation-1 .site-footer__column {
  padding: var(--space-32);
  border: clamp(1px, 0.1vw, 1px) solid var(--color-border);
  border-radius: var(--radius-12);
}

.site-footer.variation-1 .site-footer__column.bg-primary {
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.site-footer:is(.variation-2, .variation-3) .site-footer__column {
  border: 0;
  color: var(--color-main);
  background: transparent;
  padding: 0;
}

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

.site-footer__column-title {
  font-family: var(--font-family-heading, "Inter", sans-serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: var(--font-heading-weight);
  line-height: 1.25;
}

.site-footer__reservation-info-wrapper,
.site-footer__reservation-info {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-16);
}

.site-footer__reservation-info-wrapper {
  gap: var(--gap-24);
}

.site-footer__address,
.site-footer__links,
.site-footer__phones {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-8);
  font-style: normal;
  line-height: 1.5;
}

.site-footer__links {
  padding: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__phones a {
  text-decoration: none;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  padding-top: var(--space-32);
  border-top: clamp(1px, 0.1vw, 1px) solid var(--color-border-light);
  color: var(--color-muted);
}

.site-footer.variation-1 .site-footer__legal {
  padding-top: 0;
  border-top: 0;
}

.site-footer__credit,
.site-footer__legal-links {
  gap: var(--gap-8);
}

.site-footer__legal-links {
  gap: var(--gap-16);
}

.site-footer__legal a {
  text-decoration: none;
}

.site-footer__maker {
  display: inline-block;
  width: clamp(39px, 2.9vw, 39px);
  height: clamp(14px, 1.1vw, 14px);
}

.site-footer.variation-3 .site-footer__company,
.site-footer.variation-3 .site-footer__column,
.site-footer.variation-3 .site-footer__column-content,
.site-footer.variation-3 .site-footer__reservation-info-wrapper,
.site-footer.variation-3 .site-footer__reservation-info,
.site-footer.variation-3 .site-footer__links,
.site-footer.variation-3 .site-footer__phones {
  align-items: center;
}

.site-footer.variation-3 .site-footer__top {
  justify-content: center;
}

.site-footer.variation-3 .site-footer__columns {
  align-items: center;
  flex-direction: column;
  gap: var(--gap-40);
  text-align: center;
}

.site-footer.variation-3 .site-footer__column {
  gap: var(--gap-16);
}

.site-footer.variation-3 .site-footer__address {
  align-items: center;
  text-align: center;
}

.site-footer.variation-3 .site-footer__links,
.site-footer.variation-3 .site-footer__phones {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-16) var(--gap-32);
}

@media (max-width: 767px) {
  .site-footer__columns,
  .site-footer__top,
  .site-footer__legal-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-12);
  }

  .site-footer__top {
    gap: var(--space-24);
  }

  .site-footer__columns,
  .site-footer__column {
    width: 100%;
  }

  .site-footer__legal-row {
    gap: var(--gap-16);
  }

  .site-footer__legal-row:last-child {
    flex-direction: column-reverse;
  }

  .site-footer.variation-3 .site-footer__columns {
    align-items: center;
  }

  .site-footer.variation-3 .site-footer__legal-row {
    align-items: center;
    text-align: center;
  }
}

/* Motion: drawer, backdrop, dropdown, and submenu transitions. */
@keyframes mobile-menu-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes mobile-menu-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes mobile-menu-left-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes mobile-menu-left-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes backdrop-in {
  from {
    background: transparent;
  }

  to {
    background: color-mix(in srgb, #000 60%, transparent);
  }
}

@keyframes backdrop-out {
  from {
    background: color-mix(in srgb, #000 60%, transparent);
  }

  to {
    background: transparent;
  }
}

@keyframes submenu-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-8) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes submenu-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(calc(var(--space-8) * -1));
  }
}

@media (max-width: 560px) {
  .mobile-menu {
    width: 100%;
  }
  .site-footer.variation-1 .site-footer__column {
    padding: calc(var(--space-24) + calc(var(--radius-base) / 3));
  }
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-color: color-mix(in oklab, var(--color-main) 100%, transparent);
  }

  .site-header__nav > a:hover,
  .site-header__more summary:hover,
  .site-header__more-menu a:hover {
    background: color-mix(in srgb, var(--color-main) 10%, transparent);
  }

  .btn:hover {
    background: color-mix(in srgb, var(--btn-background) 85%, transparent);
    border-color: color-mix(in srgb, var(--btn-background) 85%, transparent);
  }

  .btn-blur:hover,
  .btn-blur-dark:hover,
  .btn-blur-light:hover {
    background: color-mix(in srgb, var(--color-dark) 10%, transparent);
    border-color: transparent;
  }

  .btn-link:hover {
    background: transparent;
    text-decoration-color: currentColor;
  }

  .language-switcher__menu :is(button, a):hover {
    background: color-mix(in srgb, var(--color-main) 10%, transparent);
  }

  .site-footer__social:hover {
    border-color: var(--color-main);
    box-shadow: 0 0 0 2px var(--color-border);
  }
  .bg-surface-elevate .btn.btn-primary:hover {
    background: color-mix(in srgb, #000 65%, transparent);
    border-color: color-mix(in srgb, #000 65%, transparent);
  }

  .bg-surface-elevate .btn.btn-secondary:hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--bg-main) 50%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }

  .site-header :is(
    .site-header__nav a,
    .site-header__more summary,
    .site-header__more-menu a,
    .site-header__actions .btn,
    .site-header__menu-button,
    .language-switcher > summary.btn
  ) {
    transition: none;
  }

  .mobile-menu[open] {
    animation: none;
  }

  .site-header__more summary i {
    transition: none;
  }

  .site-header-fixed {
    transition: none;
  }

  .btn {
    transition: none;
  }

  .faq__answer {
    transition: none;
  }

  .site-header__more[open] .site-header__more-menu,
  .site-header__more.is-closing .site-header__more-menu,
  .mobile-menu[open]::backdrop,
  .mobile-menu[open].is-closing::backdrop {
    animation: none;
  }
}


body.invert-c {
  --color-on-primary: var(--color-dark);
}

body.invert-c .btn:is(.btn-primary, .btn-secondary, .btn-accent) {
  color: var(--color-on-primary) !important;
}

/* Shared slider controls: arrows at the edges, pagination centered. */
.slider-controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--gap-16);
  width: 100%;
  margin-top: var(--space-24);
}

.testimonials .slider-controls { margin-top: 0; }

.slider-controls:not(:has(> .slider-controls__arrow)) {
  grid-template-columns: minmax(0, 1fr);
}

.slider-controls:not(:has(> .slider-controls__arrow)) > .swiper-pagination {
  grid-column: 1;
}

.slider-controls > .swiper-pagination {
  grid-column: 2;
  grid-row: 1;
  position: static;
  inset: auto;
  width: auto;
  margin: 0;
  transform: none;
}

.slider-controls__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-8);
  background: var(--bg-surface);
  color: var(--color-main);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all .25s ease;
}

.slider-controls__prev { grid-column: 1; }
.slider-controls__next { grid-column: 3; }
.slider-controls__arrow:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.slider-controls__arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.slider-controls__arrow:disabled { opacity: 0.35; cursor: default; }
.slider-controls__arrow.swiper-button-lock,
.slider-controls:has(> .swiper-pagination-lock) { display: none; }

@media (min-width: 768px) {
  .photo-gallery.variation-1 .slider-controls,
  .photo-gallery.variation-2 .slider-controls { display: none; }
}

@media (max-width: 767px) {
  .slider-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .slider-controls > .swiper-pagination {
    grid-column: 1;
  }

  .slider-controls__arrow {
    display: none;
  }

  .photo-gallery.variation-2 .slider-controls {
    padding-inline: var(--space-24);
    margin-bottom: var(--space-24);
  }
}