/* =========================================================
   PREMIUM MULTI-TENANT HOMEPAGE
   Enterprise Design System
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   Tenant JavaScript can override these variables.
   ========================================================= */

:root {
  color-scheme: light;

  /* Primary brand palette */
  --primary-50: #effcf9;
  --primary-100: #d7f7f0;
  --primary-200: #afeedf;
  --primary-300: #79dfcb;
  --primary-400: #3cc6b0;
  --primary-500: #16a694;
  --primary-600: #0b8579;
  --primary-700: #096b63;
  --primary-800: #0b554f;
  --primary-900: #0c4743;
  --primary-950: #032b29;

  /* Secondary palette */
  --secondary-50: #f3f7fb;
  --secondary-100: #e4edf5;
  --secondary-200: #ccdae8;
  --secondary-300: #a8bfd5;
  --secondary-400: #7e9fbe;
  --secondary-500: #5d82a7;
  --secondary-600: #49698d;
  --secondary-700: #3c5573;
  --secondary-800: #34485f;
  --secondary-900: #2f3e50;
  --secondary-950: #172332;

  /* Neutral palette */
  --neutral-0: #ffffff;
  --neutral-25: #fcfdff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* Semantic colors */
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --danger-50: #fef2f2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --info-50: #eff6ff;
  --info-500: #3b82f6;
  --info-600: #2563eb;

  /* Tenant-controlled aliases */
  --color-primary: var(--primary-600);
  --color-primary-hover: var(--primary-700);
  --color-primary-soft: var(--primary-50);
  --color-primary-border: var(--primary-200);
  --color-secondary: var(--secondary-950);
  --color-accent: #d6a84b;

  /* Surfaces */
  --surface-page: var(--neutral-0);
  --surface-soft: var(--neutral-50);
  --surface-muted: var(--neutral-100);
  --surface-card: rgb(255 255 255 / 92%);
  --surface-elevated: rgb(255 255 255 / 97%);
  --surface-inverse: var(--secondary-950);
  --surface-overlay: rgb(15 23 42 / 68%);

  /* Text */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-soft-inverse: rgb(255 255 255 / 76%);

  /* Borders */
  --border-subtle: rgb(148 163 184 / 18%);
  --border-default: rgb(148 163 184 / 28%);
  --border-strong: rgb(100 116 139 / 42%);
  --border-glass: rgb(255 255 255 / 34%);

  /* Gradients */
  --gradient-primary:
    linear-gradient(
      135deg,
      var(--primary-500) 0%,
      var(--primary-700) 58%,
      var(--primary-900) 100%
    );

  --gradient-secondary:
    linear-gradient(
      135deg,
      var(--secondary-800) 0%,
      var(--secondary-950) 100%
    );

  --gradient-hero:
    linear-gradient(
      90deg,
      rgb(3 20 35 / 94%) 0%,
      rgb(3 25 40 / 84%) 38%,
      rgb(3 35 48 / 58%) 68%,
      rgb(3 35 48 / 20%) 100%
    );

  --gradient-premium:
    linear-gradient(
      135deg,
      var(--primary-400),
      var(--primary-700) 48%,
      var(--secondary-900)
    );

  --gradient-gold:
    linear-gradient(
      135deg,
      #f4df9a,
      #d6a84b 52%,
      #9d701e
    );

  --gradient-soft:
    radial-gradient(
      circle at top left,
      rgb(22 166 148 / 11%),
      transparent 42%
    );

  /* Glass */
  --glass-background: rgb(255 255 255 / 76%);
  --glass-background-dark: rgb(15 23 42 / 64%);
  --glass-border: rgb(255 255 255 / 38%);
  --glass-blur: 22px;

  /* Typography */
  --font-sans:
    Inter,
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-display:
    Manrope,
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Radius */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:
    0 1px 2px rgb(15 23 42 / 5%);

  --shadow-sm:
    0 4px 12px rgb(15 23 42 / 7%),
    0 1px 3px rgb(15 23 42 / 5%);

  --shadow-md:
    0 12px 30px rgb(15 23 42 / 10%),
    0 3px 8px rgb(15 23 42 / 6%);

  --shadow-lg:
    0 24px 60px rgb(15 23 42 / 14%),
    0 8px 20px rgb(15 23 42 / 8%);

  --shadow-xl:
    0 38px 90px rgb(15 23 42 / 20%),
    0 12px 30px rgb(15 23 42 / 10%);

  --shadow-primary:
    0 18px 42px rgb(11 133 121 / 28%);

  --shadow-glow:
    0 0 0 1px rgb(255 255 255 / 16%),
    0 24px 80px rgb(22 166 148 / 20%);

  /* Layout */
  --container-width: 1240px;
  --container-padding: 24px;
  --topbar-height: 44px;
  --navbar-height: 78px;
  --header-total-height:
    calc(var(--topbar-height) + var(--navbar-height));

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-slow: 520ms;

  /* Z-index */
  --z-base: 1;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 2000;
  --z-toast: 3000;
}

/* =========================================================
   2. OPTIONAL DARK MODE
   Add data-color-mode="dark" to <html>.
   ========================================================= */

html[data-color-mode="dark"] {
  color-scheme: dark;

  --surface-page: #07111d;
  --surface-soft: #0b1724;
  --surface-muted: #102031;
  --surface-card: rgb(15 29 44 / 88%);
  --surface-elevated: rgb(18 35 52 / 96%);
  --surface-inverse: #02070d;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --border-subtle: rgb(148 163 184 / 14%);
  --border-default: rgb(148 163 184 / 22%);
  --border-strong: rgb(148 163 184 / 35%);

  --glass-background: rgb(8 20 32 / 74%);
}

/* =========================================================
   3. RESET
   ========================================================= */

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-total-height) + 18px);
  background: var(--surface-page);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    var(--gradient-soft),
    var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.navigation-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body::before {
  position: fixed;
  inset:
    var(--header-total-height)
    0
    0;
  z-index: calc(var(--z-header) - 1);
  visibility: hidden;
  background: rgb(2 12 27 / 48%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 220ms var(--ease-standard),
    opacity 220ms var(--ease-standard);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

body.navigation-open::before {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  object-fit: cover;
}

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

button,
select {
  cursor: pointer;
}

button {
  margin: 0;
  border: 0;
}

input,
select,
textarea {
  width: 100%;
}

textarea {
  resize: vertical;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 760;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size:
    clamp(
      2.8rem,
      6.4vw,
      5.8rem
    );
  letter-spacing: -0.058em;
}

h2 {
  font-size:
    clamp(
      2rem,
      4vw,
      3.65rem
    );
  letter-spacing: -0.045em;
}

h3 {
  font-size:
    clamp(
      1.05rem,
      1.8vw,
      1.32rem
    );
  letter-spacing: -0.018em;
}

p {
  color: var(--text-secondary);
}

::selection {
  background: var(--primary-200);
  color: var(--secondary-950);
}

/* =========================================================
   5. GLOBAL LAYOUT — COMPACT PREMIUM
   ========================================================= */

.site-shell {
  min-height: 100vh;
}

.container {
  width:
    min(
      calc(
        100% -
        (var(--container-padding) * 2)
      ),
      var(--container-width)
    );
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block:
    clamp(
      54px,
      6vw,
      78px
    );
}

.section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.section-heading {
  max-width: 760px;
  margin-bottom:
    clamp(
      24px,
      3vw,
      36px
    );
}

.section-heading--compact {
  margin-bottom: 18px;
}

.section-heading--row {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap:
    clamp(
      18px,
      3vw,
      32px
    );
}

.section-heading h2 {
  margin-top: 8px;
}

.section-heading > p:last-child {
  max-width: 680px;
  margin-top: 10px;
  font-size:
    clamp(
      0.96rem,
      1.3vw,
      1.08rem
    );
  line-height: 1.6;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top:
    clamp(
      22px,
      3vw,
      32px
    );
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 26px;
  height: 1px;
  flex: 0 0 26px;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 760;
  transition:
    gap var(--duration-fast)
      var(--ease-standard),
    color var(--duration-fast)
      var(--ease-standard);
}

.text-link::after {
  content: "→";
  transition:
    transform var(--duration-fast)
      var(--ease-standard);
}

.text-link:hover {
  gap: 11px;
  color: var(--color-primary-hover);
}

.text-link:hover::after {
  transform: translateX(2px);
}

.empty-state {
  grid-column: 1 / -1;
  padding:
    clamp(
      24px,
      4vw,
      36px
    );
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  text-align: center;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
/* =========================================================
   6. ACCESSIBILITY
   ========================================================= */

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 99999;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  transform: translateY(-180%);
  transition:
    transform var(--duration-fast) var(--ease-premium);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--color-primary) 55%,
      white
    );
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }
}

/* =========================================================
   7. BUTTONS
   ========================================================= */

.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  overflow: hidden;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgb(255 255 255 / 22%) 48%,
      transparent 76%
    );
  content: "";
  transform: translateX(-120%);
  transition:
    transform 700ms var(--ease-premium);
}

.button:hover::before {
  transform: translateX(120%);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button--primary {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 78%,
      white
    );
  background: var(--gradient-primary);
  color: var(--text-inverse);
  box-shadow:
    0 10px 24px rgb(11 133 121 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 22%);
}

.button--primary:hover {
  box-shadow:
    0 16px 38px rgb(11 133 121 / 34%),
    inset 0 1px 0 rgb(255 255 255 / 28%);
}

.button--outline {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 65%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--surface-page) 86%,
      transparent
    );
  color: var(--color-primary);
  backdrop-filter: blur(10px);
}

.button--outline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}

.button--light {
  border-color: rgb(255 255 255 / 54%);
  background: rgb(255 255 255 / 92%);
  color: var(--secondary-950);
  box-shadow:
    0 14px 34px rgb(2 6 23 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
  backdrop-filter: blur(12px);
}

.button--light:hover {
  background: var(--neutral-0);
  box-shadow:
    0 18px 44px rgb(2 6 23 / 23%);
}

.button--large {
  min-height: 54px;
  padding-inline: 25px;
  font-size: 0.95rem;
}

.button--small {
  min-height: 38px;
  padding: 8px 15px;
  font-size: var(--font-size-xs);
}

.button--full {
  width: 100%;
}

/* =========================================================
   8. PAGE LOADER
   ========================================================= */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  background:
    radial-gradient(
      circle at center,
      var(--color-primary-soft),
      transparent 42%
    ),
    var(--surface-page);
  color: var(--text-muted);
}

.page-loader__spinner {
  position: relative;
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-right-color: var(--primary-300);
  border-radius: 50%;
  animation:
    spin 800ms linear infinite;
}

.page-loader__spinner::after {
  position: absolute;
  inset: 7px;
  border: 2px solid transparent;
  border-bottom-color: var(--color-primary);
  border-radius: 50%;
  content: "";
  animation:
    spin-reverse 1100ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

/* =========================================================
   9. TENANT ERROR
   ========================================================= */

.tenant-error {
  min-height: 100vh;
  padding: var(--space-6);
  background:
    radial-gradient(
      circle at 20% 20%,
      rgb(22 166 148 / 12%),
      transparent 36%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgb(59 130 246 / 10%),
      transparent 32%
    ),
    var(--surface-soft);
  place-items: center;
}

.tenant-error:not([hidden]) {
  display: grid;
}

.tenant-error__card {
  width: min(100%, 560px);
  padding: clamp(32px, 6vw, 54px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-xl);
  text-align: center;
  backdrop-filter: blur(var(--glass-blur));
}

.tenant-error__card img {
  margin: 0 auto var(--space-5);
}

.tenant-error__card p {
  margin-top: var(--space-3);
}

/* =========================================================
   10. HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--glass-background);
  box-shadow:
    0 6px 30px rgb(15 23 42 / 5%);
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(145%);
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(145%);
}

.topbar {
  min-height: var(--topbar-height);
  background:
    linear-gradient(
      90deg,
      var(--secondary-950),
      color-mix(
        in srgb,
        var(--secondary-950) 74%,
        var(--color-primary)
      )
    );
  color: var(--text-inverse);
}

.topbar__inner {
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--font-size-xs);
}

.topbar__message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
}

.topbar__indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55e6a5;
  box-shadow:
    0 0 0 4px rgb(85 230 165 / 13%),
    0 0 18px rgb(85 230 165 / 48%);
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgb(255 255 255 / 78%);
  transition:
    color var(--duration-fast) var(--ease-standard);
}

.topbar__link:hover {
  color: var(--text-inverse);
}
/* =========================================================
   TOPBAR ACTIONS AND FACILITY SWITCHER
   ========================================================= */

.topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.facility-switcher {
  position: relative;
  z-index: var(--z-dropdown);
  width: 210px;
  min-width: 0;
  flex: 0 0 210px;
}

.facility-switcher__button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
  background: rgb(255 255 255 / 10%);
  color: var(--text-inverse);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%);
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard);
}

.facility-switcher__button:hover,
.facility-switcher__button:focus-visible {
  border-color: rgb(255 255 255 / 45%);
  background: rgb(255 255 255 / 16%);
}

.facility-switcher__button > i:first-child {
  flex: 0 0 auto;
  font-size: 1rem;
}

.facility-switcher__button > i:last-child {
  flex: 0 0 auto;
  margin-left: auto;
  transition:
    transform var(--duration-fast)
      var(--ease-standard);
}

.facility-switcher__button[aria-expanded="true"]
  > i:last-child {
  transform: rotate(180deg);
}

#facility-switcher-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facility-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-dropdown);
  display: grid;
  width: min(320px, calc(100vw - 32px));
  max-height: min(290px, 55vh);
  gap: 2px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.facility-switcher__menu[hidden] {
  display: none !important;
}

.facility-switcher__option {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard);
}

.facility-switcher__option:hover,
.facility-switcher__option:focus-visible {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
}

.facility-switcher__option.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 86%,
      white
    );
}

.facility-switcher__option > i:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1rem;
  place-items: center;
}

.facility-switcher__option > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.facility-switcher__option strong,
.facility-switcher__option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facility-switcher__option strong {
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 800;
}

.facility-switcher__option small {
  color: var(--text-muted);
  font-size: 0.66rem;
}

.facility-switcher__option
  > .ri-check-line {
  color: var(--color-primary);
  opacity: 0;
}

.facility-switcher__option.is-active
  > .ri-check-line {
  opacity: 1;
}

/* Tablet header */

@media (max-width: 1100px) {
  .facility-switcher {
    width: 170px;
    flex-basis: 170px;
  }

  .topbar__actions {
    gap: 10px;
  }

  .topbar__contact {
    gap: 12px;
  }

  .topbar__link {
    font-size: 0.7rem;
  }
}

/* Mobile topbar */

@media (max-width: 767px) {
  :root {
    --topbar-height: auto;
  }

  .topbar__inner {
    display: grid;
    min-height: 0;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(120px, 42%);
    gap: 10px;
    padding-block: 8px;
  }

  .topbar__message {
    min-width: 0;
    overflow: hidden;
  }

  #topbar-message-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__actions {
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .facility-switcher {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .facility-switcher__button {
    min-height: 36px;
  }

  .facility-switcher__menu {
    position: fixed;
    top: 58px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height:
      calc(100dvh - 78px);
  }

  .topbar__contact {
    display: none;
  }
}
/* =========================================================
   11. NAVIGATION — FINAL PREMIUM VERSION
   ========================================================= */

.navbar__inner {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--navbar-height);
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, var(--space-6));
}

/* Brand */

.brand {
  display: inline-flex;
  min-width: 0;
  max-width: 280px;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.brand__logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--border-subtle) 78%,
      transparent
    );
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 96%),
      var(--surface-soft)
    );
  object-fit: contain;
  box-shadow:
    0 9px 22px rgb(15 23 42 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 88%);
  filter:
    drop-shadow(
      0 5px 9px rgb(15 23 42 / 8%)
    );
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-normal)
      var(--ease-premium);
}

.brand:hover .brand__logo {
  border-color: var(--color-primary-border);
  box-shadow:
    0 12px 26px rgb(15 23 42 / 12%),
    0 0 0 4px
      color-mix(
        in srgb,
        var(--color-primary-soft) 62%,
        transparent
      );
  transform:
    translateY(-1px)
    scale(1.02);
}

.brand__content {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.brand__name {
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size:
    clamp(
      1rem,
      1.15vw,
      1.08rem
    );
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.71rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand:focus-visible {
  border-radius: 14px;
  outline: 3px solid
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      transparent
    );
  outline-offset: 4px;
}

/* Desktop menu */

.navbar__menu {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.5vw, var(--space-6));
}

.navbar__links {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.navbar__links li {
  min-width: 0;
}

.navbar__link {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(8px, 0.75vw, 11px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-standard);
}

.navbar__link::after {
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition:
    opacity var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-normal)
      var(--ease-premium);
}

.navbar__link:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary-border) 52%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 62%,
      transparent
    );
  color: var(--color-primary);
  transform: translateY(-1px);
}

.navbar__link.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary-border) 68%,
      transparent
    );
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--color-primary-soft) 94%,
        white
      ),
      color-mix(
        in srgb,
        var(--color-primary-soft) 68%,
        transparent
      )
    );
  color: var(--color-primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

.navbar__link:hover::after,
.navbar__link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.navbar__link:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      transparent
    );
  outline-offset: 2px;
}

/* Header actions */

.navbar__actions {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.navbar__actions .button {
  min-height: 44px;
  padding-inline: clamp(14px, 1.15vw, 20px);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Language selector */

.language-switcher {
  display: flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 80%),
      color-mix(
        in srgb,
        var(--surface-soft) 88%,
        transparent
      )
    );
  box-shadow:
    0 6px 16px rgb(15 23 42 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

.language-switcher__button {
  min-width: 38px;
  min-height: 32px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 850;
  line-height: 1;
  transition:
    color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-standard);
}

.language-switcher__button:hover:not(
  .is-active
) {
  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 64%,
      transparent
    );
  color: var(--color-primary);
}

.language-switcher__button.is-active {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  box-shadow:
    0 7px 16px
      color-mix(
        in srgb,
        var(--color-primary) 28%,
        transparent
      ),
    inset 0 1px 0 rgb(255 255 255 / 22%);
}

.language-switcher__button:active {
  transform: scale(0.96);
}

.language-switcher__button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      transparent
    );
  outline-offset: 2px;
}

/* Mobile hamburger */

.navbar__toggle {
  position: relative;
  z-index: calc(var(--z-dropdown) + 2);
  display: none;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-default);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 96%),
      var(--surface-soft)
    );
  box-shadow:
    0 8px 22px rgb(15 23 42 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.navbar__toggle:hover {
  border-color: var(--color-primary-border);
  box-shadow:
    0 10px 25px rgb(15 23 42 / 14%),
    0 0 0 4px
      color-mix(
        in srgb,
        var(--color-primary-soft) 72%,
        transparent
      );
  transform: translateY(-1px);
}

.navbar__toggle:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--color-primary) 35%,
      transparent
    );
  outline-offset: 3px;
}

.navbar__toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  background:
    linear-gradient(
      145deg,
      var(--color-primary),
      var(--color-primary-hover)
    );
  box-shadow:
    0 12px 28px
      color-mix(
        in srgb,
        var(--color-primary) 28%,
        transparent
      );
}

.navbar__toggle span {
  position: absolute;
  left: 11px;
  display: block;
  width: 22px;
  height: 2px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  transform-origin: center;
  transition:
    top 220ms var(--ease-premium),
    transform 220ms var(--ease-premium),
    opacity 140ms var(--ease-standard),
    background-color 140ms var(--ease-standard);
}

.navbar__toggle span:nth-child(1) {
  top: 14px;
}

.navbar__toggle span:nth-child(2) {
  top: 21px;
}

.navbar__toggle span:nth-child(3) {
  top: 28px;
}

.navbar__toggle[aria-expanded="true"] span {
  background: var(--text-inverse);
}

.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* =========================================================
   12. HERO
   ========================================================= */

.hero {
  position: relative;
  min-height:
    calc(
      100svh - var(--header-total-height)
    );
  overflow: hidden;
  isolation: isolate;
  background: var(--secondary-950);
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: 1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(4px);
}

.hero::before {
  top: -190px;
  left: -170px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 34%),
      transparent 68%
    );
}

.hero::after {
  right: -190px;
  bottom: -230px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 22%),
      transparent 68%
    );
}

/* =========================================================
   HERO SLIDER
   ========================================================= */

#hero-slider {
  position: relative;
  min-height:
    calc(
      100svh - var(--header-total-height)
    );
  overflow: hidden;
}

#hero-slider-track {
  position: relative;
  min-height:
    calc(
      100svh - var(--header-total-height)
    );
}

/* Every slide occupies the same hero area */

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height:
    calc(
      100svh - var(--header-total-height)
    );
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition:
    visibility 900ms var(--ease-standard),
    opacity 900ms var(--ease-standard),
    transform 1100ms var(--ease-premium);
}

/* Only the selected slide is visible */

.hero-slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Prevent animation during initial rendering */

.hero-slide.is-immediate {
  transition: none !important;
}

/* Slide media and overlay */

.hero-slide__media,
.hero-slide__overlay {
  position: absolute;
  inset: 0;
}

.hero-slide__media {
  z-index: 0;
  overflow: hidden;
  background: var(--secondary-950);
}

.hero-slide__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide__image,
.hero-slide__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slide__image {
  transform: scale(1.015);
  animation:
    hero-zoom 18s ease-in-out infinite alternate;
}

.hero-slide__video {
  border: 0;
}

.hero-slide__overlay {
  z-index: 1;
  background:
    var(--gradient-hero),
    linear-gradient(
      180deg,
      transparent 55%,
      rgb(2 6 23 / 48%) 100%
    );
  opacity:
    var(
      --hero-overlay-opacity,
      0.55
    );
  pointer-events: none;
}

/* Keep slide content above image and overlay */

.hero-slide .hero__grid {
  position: relative;
  z-index: 2;
}

/* Prevent inactive slide links from receiving keyboard focus */

.hero-slide:not(.is-active) a,
.hero-slide:not(.is-active) button,
.hero-slide:not(.is-active) input,
.hero-slide:not(.is-active) select,
.hero-slide:not(.is-active) textarea {
  pointer-events: none;
}

/* Tablet */

@media (max-width: 900px) {
  #hero-slider,
  #hero-slider-track,
  .hero-slide {
    min-height:
      clamp(
        620px,
        82svh,
        780px
      );
  }
}

/* Mobile */

@media (max-width: 600px) {
  #hero-slider,
  #hero-slider-track,
  .hero-slide {
    min-height:
      clamp(
        580px,
        84svh,
        720px
      );
  }

  .hero-slide__image,
  .hero-slide__video {
    object-position: center;
  }
}

/* Reduced motion keeps slide switching functional */

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__image {
    animation: none !important;
    transition: none !important;
  }
}

html[data-reduce-motion="true"]
.hero-slide,
html[data-reduce-motion="true"]
.hero-slide__image {
  animation: none !important;
  transition: none !important;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height:
    calc(
      100svh - var(--header-total-height)
    );
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.7fr);
  align-items: center;
  gap: clamp(36px, 6vw, 78px);
  padding-block: clamp(64px, 8vw, 100px);
}

.hero__content {
  max-width: 760px;
}

.hero__content .eyebrow {
  color: #96f1e4;
}

.hero__content h1 {
  max-width: 760px;
  margin-top: var(--space-3);
  color: var(--text-inverse);
  text-shadow:
    0 10px 40px rgb(2 6 23 / 36%);
}

.hero__description {
  max-width: 640px;
  margin-top: var(--space-5);
  color: rgb(255 255 255 / 78%);
  font-size:
    clamp(
      1rem,
      1.65vw,
      1.25rem
    );
  line-height: 1.66;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 82%);
  font-size: var(--font-size-sm);
  backdrop-filter: blur(12px);
}

.hero__trust-icon {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #7cf1cf,
      #20b999
    );
  color: var(--secondary-950);
  font-size: 0.75rem;
  font-weight: 900;
  place-items: center;
}

@keyframes hero-zoom {
  from {
    transform: scale(1.015);
  }

  to {
    transform: scale(1.07);
  }
}

/* =========================================================
   13. APPOINTMENT CARD
   ========================================================= */

.appointment-card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 96%),
      rgb(255 255 255 / 85%)
    );
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgb(255 255 255 / 86%);
  backdrop-filter:
    blur(26px)
    saturate(145%);
}

.appointment-card::before {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 18%),
      transparent 68%
    );
  content: "";
  pointer-events: none;
}

.appointment-card .section-heading {
  position: relative;
  z-index: 1;
}

.appointment-card h2 {
  font-size:
    clamp(
      1.55rem,
      2.4vw,
      2.15rem
    );
}

/* =========================================================
   14. FORMS
   ========================================================= */

.form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
}

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

.form__group {
  display: grid;
  gap: 6px;
}

.form__group label,
.form__consent label {
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 760;
}

.form__group input,
.form__group select,
.form__group textarea {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 92%,
      transparent
    );
  color: var(--text-primary);
  outline: none;
  box-shadow:
    inset 0 1px 2px rgb(15 23 42 / 3%);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.form__group textarea {
  min-height: 126px;
}

.form__group input:hover,
.form__group select:hover,
.form__group textarea:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 42%,
      var(--border-default)
    );
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  border-color: var(--color-primary);
  background: var(--surface-elevated);
  box-shadow:
    0 0 0 4px rgb(22 166 148 / 12%),
    inset 0 1px 2px rgb(15 23 42 / 3%);
}

.form__group input[aria-invalid="true"],
.form__group select[aria-invalid="true"],
.form__group textarea[aria-invalid="true"] {
  border-color: var(--danger-500);
  box-shadow:
    0 0 0 4px rgb(239 68 68 / 10%);
}

.form__error {
  min-height: 15px;
  color: var(--danger-600);
  font-size: 0.72rem;
}

.form__security-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.form__message {
  min-height: 20px;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

.form__message.is-success {
  color: var(--success-600);
}

.form__message.is-error {
  color: var(--danger-600);
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.form__consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

/* =========================================================
   15. QUICK FEATURES
   ========================================================= */

.quick-features {
  position: relative;
  z-index: 10;
  margin-top: -44px;
}

.quick-features__grid {
  display: grid;
  overflow: hidden;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  background: var(--glass-background);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(140%);
}

.feature-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(20px, 2.2vw, 28px);
  transition:
    background-color var(--duration-normal) var(--ease-standard);
}

.feature-card::after {
  position: absolute;
  inset: auto 18px 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-premium);
}

.feature-card:hover {
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 34%),
      var(--color-primary-soft)
    );
}

.feature-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.feature-card + .feature-card {
  border-left: 1px solid var(--border-subtle);
}

.feature-card__icon {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      var(--primary-50),
      var(--primary-100)
    );
  color: var(--color-primary);
  font-size: 1.08rem;
  font-weight: 900;
  box-shadow:
    0 8px 20px rgb(22 166 148 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
  place-items: center;
}

.feature-card__content p {
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.52;
}

/* =========================================================
   16. SHARED CARDS
   ========================================================= */

.service-grid,
.provider-grid,
.location-grid,
.testimonial-grid,
.news-grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

.service-card,
.provider-card,
.location-card,
.testimonial-card,
.news-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgb(255 255 255 / 62%);
  backdrop-filter: blur(12px);
  transition:
    transform var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium),
    border-color var(--duration-normal) var(--ease-standard);
}

.service-card::before,
.provider-card::before,
.location-card::before,
.news-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 16%);
}

.service-card:hover,
.provider-card:hover,
.location-card:hover,
.testimonial-card:hover,
.news-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 36%,
      var(--border-default)
    );
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgb(22 166 148 / 6%);
  transform: translateY(-7px);
}

/* =========================================================
   17. SERVICES
   ========================================================= */

.services-section {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgb(22 166 148 / 9%),
      transparent 30%
    ),
    var(--surface-soft);
}

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

.service-card__image-link {
  position: relative;
  display: block;
  height: 210px;
  overflow: hidden;
}

.service-card__image-link::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgb(2 6 23 / 34%) 100%
    );
  content: "";
}

.service-card__image {
  width: 100%;
  height: 100%;
  transition:
    transform 700ms var(--ease-premium),
    filter 500ms var(--ease-standard);
}

.service-card:hover .service-card__image {
  filter: saturate(1.08);
  transform: scale(1.065);
}

.service-card__content {
  position: relative;
  padding: var(--space-6);
}

.service-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-top: -48px;
  margin-bottom: var(--space-4);
  border: 4px solid var(--surface-card);
  border-radius: 14px;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-weight: 900;
  box-shadow: var(--shadow-md);
  place-items: center;
}

.service-card__description {
  margin-block:
    var(--space-2)
    var(--space-4);
  font-size: 0.9rem;
}

/* =========================================================
   18. ABOUT
   ========================================================= */

.about-section {
  overflow: hidden;
}

.about-section::before {
  background:
    radial-gradient(
      circle at 8% 65%,
      rgb(22 166 148 / 8%),
      transparent 28%
    );
}

.about-section__grid,
.patient-section__grid,
.contact-section__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(42px, 7vw, 86px);
}

.about-section__media,
.patient-section__media {
  position: relative;
}

.about-section__media::before {
  position: absolute;
  top: -26px;
  left: -28px;
  z-index: -1;
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      var(--primary-200),
      transparent
    );
  content: "";
  transform: rotate(12deg);
}

.about-section__media > img,
.patient-section__media > img {
  width: 100%;
  min-height: 520px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.experience-badge {
  position: absolute;
  right: -24px;
  bottom: 28px;
  display: grid;
  max-width: 180px;
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--radius-xl);
  background: var(--gradient-primary);
  color: var(--text-inverse);
  box-shadow:
    var(--shadow-primary),
    inset 0 1px 0 rgb(255 255 255 / 22%);
  backdrop-filter: blur(12px);
}

.experience-badge strong {
  color: inherit;
  font-size: 2.2rem;
  line-height: 1;
}

.experience-badge span {
  margin-top: var(--space-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.about-section__description {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin-block:
    var(--space-6)
    var(--space-7);
}

.check-list li {
  position: relative;
  padding-left: 32px;
  color: var(--text-secondary);
}

.check-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-primary-border);
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  content: "✓";
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 60%);
  place-items: center;
}

/* =========================================================
   19. PROVIDERS
   ========================================================= */

.providers-section {
  background:
    linear-gradient(
      180deg,
      var(--surface-soft),
      var(--surface-page)
    );
}

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

.provider-card__media {
  position: relative;
  height: 320px;
  overflow: hidden;
}

.provider-card__media::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgb(2 6 23 / 46%)
    );
  content: "";
}

.provider-card__image {
  width: 100%;
  height: 100%;
  transition:
    transform 700ms var(--ease-premium);
}

.provider-card:hover .provider-card__image {
  transform: scale(1.055);
}

.provider-card__availability {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  padding: 7px 11px;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 91%);
  color: var(--success-600);
  font-size: 0.72rem;
  font-weight: 850;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.provider-card__content {
  padding: var(--space-6);
}

.provider-card__specialty {
  color: var(--color-primary);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.provider-card__name {
  margin-top: 5px;
}

.provider-card__credentials {
  margin-top: 6px;
  font-size: 0.86rem;
}

.provider-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* =========================================================
   20. STATISTICS
   ========================================================= */

.statistics-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 72px);
  background: var(--gradient-secondary);
}

.statistics-section::before,
.statistics-section::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  filter: blur(10px);
}

.statistics-section::before {
  top: -180px;
  left: -120px;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 30%),
      transparent 68%
    );
}

.statistics-section::after {
  right: -140px;
  bottom: -200px;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 22%),
      transparent 68%
    );
}

.statistics-section__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.stat-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 5%);
  text-align: center;
  backdrop-filter: blur(10px);
}

.stat-card__value {
  color: var(--text-inverse);
  font-size:
    clamp(
      2.2rem,
      4vw,
      3.5rem
    );
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-card__label {
  color: rgb(255 255 255 / 66%);
  font-size: 0.86rem;
  font-weight: 650;
}

/* =========================================================
   21. PATIENT PORTAL
   ========================================================= */

.patient-section {
  background:
    radial-gradient(
      circle at 90% 15%,
      rgb(59 130 246 / 8%),
      transparent 32%
    ),
    var(--surface-soft);
}

.portal-feature-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block:
    var(--space-7)
    var(--space-8);
}

.portal-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0 rgb(255 255 255 / 58%);
  transition:
    transform var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.portal-feature:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.portal-feature__icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      var(--primary-50),
      var(--primary-100)
    );
  color: var(--color-primary);
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 78%);
  place-items: center;
}

.portal-feature p {
  margin-top: 4px;
  font-size: 0.82rem;
}

.patient-section__media::before {
  position: absolute;
  inset: -18px 18px 18px -18px;
  z-index: -1;
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(
      135deg,
      var(--primary-100),
      transparent 68%
    );
  content: "";
}

.patient-section__floating-card {
  position: absolute;
  right: -20px;
  bottom: 28px;
  display: flex;
  max-width: 270px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 90%);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.patient-section__floating-card > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-weight: 900;
  box-shadow: var(--shadow-primary);
  place-items: center;
}

.patient-section__floating-card div {
  display: grid;
  gap: 2px;
}

.patient-section__floating-card span:last-child {
  color: var(--text-muted);
  font-size: 0.74rem;
}

/* =========================================================
   22. LOCATIONS — COMPACT PREMIUM
   ========================================================= */

.location-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap:
    clamp(
      14px,
      2vw,
      22px
    );
}

.location-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--surface-card);
  box-shadow:
    0 10px 28px rgb(15 23 42 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 68%);
  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-normal)
      var(--ease-premium);
}

.location-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary-border) 72%,
      transparent
    );
  box-shadow:
    0 16px 36px rgb(15 23 42 / 12%),
    0 0 0 4px
      color-mix(
        in srgb,
        var(--color-primary-soft) 45%,
        transparent
      );
  transform: translateY(-4px);
}

.location-card__map {
  position: relative;
  height:
    clamp(
      135px,
      11vw,
      160px
    );
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--surface-muted),
      color-mix(
        in srgb,
        var(--surface-soft) 86%,
        var(--color-primary-soft)
      )
    );
}

.location-card__map::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgb(2 6 23 / 18%)
    );
  content: "";
  pointer-events: none;
}

.location-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 700ms
      var(--ease-premium);
}

.location-card:hover
.location-card__image {
  transform: scale(1.045);
}

.location-card__content {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  padding:
    clamp(
      16px,
      1.7vw,
      20px
    );
}

.location-card__name {
  overflow: hidden;
  color: var(--text-primary);
  font-size:
    clamp(
      1rem,
      1.3vw,
      1.15rem
    );
  font-weight: 820;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-card__address {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
}

.location-card__details {
  display: grid;
  gap: 7px;
  margin-block: 12px;
}

.location-card__details > div {
  display: grid;
  min-width: 0;
  grid-template-columns:
    58px
    minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.location-card__details dt {
  color: var(--text-primary);
  font-weight: 760;
}

.location-card__details dd {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.location-card__phone-link {
  color: inherit;
  transition:
    color var(--duration-fast)
      var(--ease-standard);
}

.location-card__phone-link:hover {
  color: var(--color-primary);
}

.location-card__directions-link {
  margin-top: auto;
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .location-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

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

  .location-card__map {
    height: 150px;
  }

  .location-card__content {
    min-height: 0;
  }
}
/* =========================================================
   23. TESTIMONIALS
   ========================================================= */

.testimonials-section {
  background:
    linear-gradient(
      180deg,
      var(--surface-soft),
      var(--surface-page)
    );
}

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

.testimonial-card {
  padding: var(--space-7);
}

.testimonial-card::before {
  position: absolute;
  top: 14px;
  right: 22px;
  color: var(--primary-100);
  content: "“";
  font-family: Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
}

.testimonial-card__rating {
  position: relative;
  z-index: 1;
  color: var(--color-accent);
  letter-spacing: 0.1em;
}

.testimonial-card blockquote {
  position: relative;
  z-index: 1;
  margin-block:
    var(--space-5)
    var(--space-6);
}

.testimonial-card blockquote p {
  color: var(--text-primary);
  font-size: 0.96rem;
  line-height: 1.7;
}

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card__avatar {
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-primary-border);
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 68%);
  place-items: center;
}

.testimonial-card figcaption div:last-child {
  display: grid;
  gap: 1px;
}

.testimonial-card figcaption span {
  color: var(--text-muted);
  font-size: 0.76rem;
}

/* =========================================================
   24. NEWS
   ========================================================= */

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

.news-card__image-link {
  display: block;
  height: 215px;
  overflow: hidden;
}

.news-card__image {
  width: 100%;
  height: 100%;
  transition:
    transform 700ms var(--ease-premium);
}

.news-card:hover .news-card__image {
  transform: scale(1.06);
}

.news-card__content {
  padding: var(--space-6);
}

.news-card__date {
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-card__title {
  margin-top: var(--space-2);
}

.news-card__summary {
  margin-block:
    var(--space-3)
    var(--space-4);
  font-size: 0.87rem;
}

/* =========================================================
   25. CONTACT
   ========================================================= */

.contact-section {
  overflow: hidden;
}

.contact-section::before {
  background:
    radial-gradient(
      circle at 95% 5%,
      rgb(22 166 148 / 9%),
      transparent 34%
    );
}

.contact-section__grid {
  align-items: flex-start;
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-list__icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-primary-border);
  border-radius: 13px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 74%);
  place-items: center;
}

.contact-list__item > div {
  display: grid;
  gap: 2px;
}

.contact-list__item strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.contact-list__item a,
.contact-list__item span:last-child {
  color: var(--text-secondary);
}

.contact-form {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(18px);
}

.contact-form::before {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 15%),
      transparent 68%
    );
  content: "";
  pointer-events: none;
}

/* =========================================================
   26. EMERGENCY BANNER
   ========================================================= */

.emergency-banner {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    linear-gradient(
      135deg,
      #b42318,
      #d92d20 52%,
      #912018
    );
}

.emergency-banner::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% 50%,
      rgb(255 255 255 / 12%),
      transparent 32%
    );
  content: "";
}

.emergency-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.emergency-banner h2,
.emergency-banner p {
  color: var(--text-inverse);
}

.emergency-banner h2 {
  font-size:
    clamp(
      1.35rem,
      2.4vw,
      2rem
    );
}

.emergency-banner p {
  margin-top: var(--space-2);
  opacity: 0.8;
}

/* =========================================================
   27. FOOTER
   ========================================================= */

.site-footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #07111d,
      #0b1b2b 55%,
      #06131f
    );
  color: rgb(255 255 255 / 78%);
}

.site-footer::before {
  position: absolute;
  top: -240px;
  left: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 16%),
      transparent 68%
    );
  content: "";
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    1.45fr
    repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  padding-block:
    clamp(36px, 5vw, 52px);
}

.brand--footer .brand__name {
  color: var(--text-inverse);
}

.brand--footer .brand__subtitle {
  color: rgb(255 255 255 / 48%);
}

.site-footer__brand > p {
  max-width: 340px;
  margin-top: var(--space-4);
  color: rgb(255 255 255 / 56%);
  font-size: 0.86rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.social-links a {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  background: rgb(255 255 255 / 5%);
  color: rgb(255 255 255 / 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%);
  place-items: center;
  transition:
    transform var(--duration-fast) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.social-links a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  transform: translateY(-3px);
}

.site-footer__column h2 {
  color: var(--text-inverse);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.site-footer__column ul,
.footer-contact {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__column a,
.footer-contact,
.footer-contact a {
  color: rgb(255 255 255 / 56%);
  font-size: 0.82rem;
  transition:
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.site-footer__column a:hover,
.footer-contact a:hover {
  color: var(--text-inverse);
}

.site-footer__column a:hover {
  transform: translateX(2px);
}

.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: inherit;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.site-footer__bottom-inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-footer__bottom p,
.site-footer__bottom a {
  color: rgb(255 255 255 / 43%);
  font-size: 0.75rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* =========================================================
   28. BACK TO TOP
   ========================================================= */

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 700;
  display: grid;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-primary);
  place-items: center;
  transition:
    transform var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
}

.back-to-top:hover {
  box-shadow:
    0 18px 40px rgb(11 133 121 / 40%);
  transform: translateY(-4px);
}

.noscript-message {
  padding: var(--space-4);
  background: var(--warning-600);
  color: var(--text-inverse);
  font-weight: 700;
  text-align: center;
}

/* =========================================================
   29. REVEAL ANIMATIONS
   Add .reveal and .is-visible with JavaScript.
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-premium),
    transform 700ms var(--ease-premium);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 80ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.reveal-delay-3 {
  transition-delay: 240ms;
}

.reveal-delay-4 {
  transition-delay: 320ms;
}

/* =========================================================
   30. LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --container-padding: 20px;
  }

  .navbar {
    position: relative;
  }

  .navbar__inner {
    position: relative;
  }

  .navbar__toggle {
    display: block;
  }

  .navbar__menu {
    position: fixed;
    top:
      calc(
        var(--header-total-height) + 10px
      );
    right: var(--container-padding);
    left: var(--container-padding);
    z-index: var(--z-dropdown);
    display: grid;
    max-height:
      calc(
        100dvh -
        var(--header-total-height) -
        24px
      );
    gap: var(--space-5);
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    border: 1px solid
      color-mix(
        in srgb,
        var(--border-default) 80%,
        transparent
      );
    border-radius: 24px;
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 98%),
        color-mix(
          in srgb,
          var(--surface-elevated) 94%,
          var(--color-primary-soft)
        )
      );
    box-shadow:
      0 30px 70px rgb(15 23 42 / 22%),
      0 8px 24px rgb(15 23 42 / 10%),
      inset 0 1px 0 rgb(255 255 255 / 92%);
    opacity: 0;
    pointer-events: none;
    transform:
      translateY(-14px)
      scale(0.975);
    transform-origin: top center;
    transition:
      visibility 220ms var(--ease-standard),
      opacity 180ms var(--ease-standard),
      transform 240ms var(--ease-premium);
    overscroll-behavior: contain;
    backdrop-filter:
      blur(28px)
      saturate(150%);
    -webkit-backdrop-filter:
      blur(28px)
      saturate(150%);
  }

  .navbar__menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform:
      translateY(0)
      scale(1);
  }

  .navbar__links {
    display: grid;
    width: 100%;
    align-items: stretch;
    gap: 5px;
  }

  .navbar__links li {
    width: 100%;
  }

  .navbar__link {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 0.94rem;
    font-weight: 750;
  }

  .navbar__link:hover,
  .navbar__link.is-active {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary-border) 75%,
        transparent
      );
    background:
      linear-gradient(
        90deg,
        var(--color-primary-soft),
        transparent
      );
  }

  .navbar__link::after {
    display: none;
  }

  .navbar__actions {
    display: grid;
    width: 100%;
    grid-template-columns:
      minmax(150px, auto)
      minmax(180px, 1fr)
      minmax(190px, 1fr);
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
  }

  .navbar__actions .button {
    width: 100%;
    min-height: 46px;
  }

  .language-switcher {
    width: max-content;
  }

  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 0.72fr);
    gap: var(--space-10);
  }

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

  .feature-card:nth-child(3) {
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }

  .feature-card:nth-child(4) {
    border-top: 1px solid var(--border-subtle);
  }

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

/* =========================================================
   31. TABLET
   ========================================================= */

@media (max-width: 900px) {
  .section-heading--row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block:
      clamp(64px, 10vw, 94px);
  }

  .hero__content {
    max-width: 700px;
  }

  .appointment-card {
    width: min(100%, 620px);
  }

  .service-grid,
  .provider-grid,
  .location-grid,
  .testimonial-grid,
  .news-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .about-section__grid,
  .patient-section__grid,
  .contact-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .about-section__media,
  .patient-section__media {
    width: min(100%, 680px);
  }

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

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

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   32. MOBILE
   ========================================================= */

@media (max-width: 680px) {
  :root {
    --container-padding: 14px;
    --navbar-height: 66px;
    --topbar-height: 30px;
  }

  .section {
    padding-block: 46px;
  }

  h1 {
    font-size:
      clamp(
        2.45rem,
        12vw,
        4rem
      );
  }

  h2 {
    font-size:
      clamp(
        1.8rem,
        9vw,
        2.7rem
      );
  }

  /* Topbar */

  .topbar__inner {
    min-height: var(--topbar-height);
  }

  .topbar__contact {
    display: none;
  }

  .topbar__message {
    width: 100%;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mobile header */

  .navbar__inner {
    gap: 10px;
  }

  .brand {
    flex: 1 1 auto;
    max-width: calc(100% - 56px);
  }

  .brand__logo {
    width: 40px;
    height: 40px;
  }

  .brand__content {
    max-width: calc(100vw - 116px);
  }

  .brand__name,
  .brand__subtitle {
    max-width: 100%;
  }

  /* Premium mobile navigation */

  .navbar__menu {
    top:
      calc(
        var(--header-total-height) + 7px
      );
    right: 10px;
    left: auto;
    width:
      min(
        390px,
        calc(100vw - 20px)
      );
    max-height:
      calc(
        100dvh -
        var(--header-total-height) -
        18px
      );
    gap: 14px;
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
  }

  .navbar__links {
    display: grid;
    width: 100%;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }

  .navbar__links li {
    width: 100%;
    min-width: 0;
  }

  .navbar__link {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    justify-content: flex-start;
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar__link:hover,
  .navbar__link.is-active {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary-border) 78%,
        transparent
      );
    background:
      linear-gradient(
        90deg,
        var(--color-primary-soft),
        color-mix(
          in srgb,
          var(--color-primary-soft) 25%,
          transparent
        )
      );
  }

  .navbar__actions {
    display: grid;
    width: 100%;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid var(--border-subtle);
  }

  .language-switcher {
    display: flex;
    width: 100%;
    grid-column: 1 / -1;
  }

  .language-switcher__button {
    flex: 1;
  }

  .navbar__actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hero */

  .hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgb(3 20 35 / 82%),
        rgb(3 20 35 / 78%)
      );
  }

  .hero__grid {
    padding-block:
      var(--space-16)
      var(--space-14);
  }

  .hero__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }

  .hero__actions .button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 17px;
    font-size: 0.94rem;
    font-weight: 850;
    letter-spacing: -0.01em;
  }

  .hero__actions .button--primary {
    box-shadow:
      0 14px 30px
        color-mix(
          in srgb,
          var(--color-primary) 28%,
          transparent
        ),
      inset 0 1px 0 rgb(255 255 255 / 22%);
  }

  .hero__actions .button--outline {
    border-color: rgb(255 255 255 / 72%);
    background: rgb(255 255 255 / 94%);
    color: var(--text-primary);
    box-shadow:
      0 10px 24px rgb(2 12 27 / 18%),
      inset 0 1px 0 #fff;
  }

  .hero__actions .button:active {
    box-shadow: none;
    transform: translateY(1px) scale(0.99);
  }

  .emergency-banner__inner {
    align-items: stretch;
    flex-direction: column;
  }

  .emergency-banner .button {
    width: 100%;
  }
  /* Appointment form */

  .appointment-card {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  /* Quick features */

  .quick-features {
    margin-top: 0;
    padding-top: var(--space-4);
    background: var(--surface-page);
  }

  .quick-features__grid {
    grid-template-columns: 1fr;
    border-radius: var(--radius-xl);
  }

  .feature-card + .feature-card {
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }

  /* Content grids */

  .service-grid,
  .provider-grid,
  .location-grid,
  .testimonial-grid,
  .news-grid,
  .portal-feature-grid {
    grid-template-columns: 1fr;
  }

  .about-section__media > img,
  .patient-section__media > img {
    min-height: 380px;
  }

  .experience-badge,
  .patient-section__floating-card {
    right: 12px;
    bottom: 12px;
  }

  .provider-card__media {
    height: 290px;
  }

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

  /* Footer */

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-14);
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__bottom-inner {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-5);
  }
}

/* =========================================================
   33. EXTRA-SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .navbar__inner {
    gap: 8px;
  }

  .navbar__toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
  }

  .brand {
    max-width: calc(100% - 52px);
  }

  .brand__logo {
    width: 38px;
    height: 38px;
  }

  .brand__content {
    max-width: calc(100vw - 106px);
  }

  .brand__name {
    font-size: 0.9rem;
  }

  .brand__subtitle {
    font-size: 0.64rem;
  }

  /* Extra-small compact menu */

  .navbar__menu {
    right: 8px;
    left: auto;
    width: calc(100vw - 16px);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .navbar__links {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .navbar__link {
    min-height: 41px;
    padding: 8px 10px;
    font-size: 0.84rem;
  }

  .navbar__actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-top: 11px;
  }

  .language-switcher {
    width: 100%;
    grid-column: 1 / -1;
  }

  .language-switcher__button {
    flex: 1;
  }

  .navbar__actions .button {
    min-height: 42px;
    padding-inline: 7px;
    font-size: 0.76rem;
  }

  /* Other small-screen content */

  .statistics-section__grid {
    grid-template-columns: 1fr;
  }

  .provider-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .provider-card__actions .button {
    width: 100%;
  }

  .contact-form {
    padding: var(--space-5);
  }
}

/* =========================================================
   34. REDUCED MOTION
   ========================================================= */

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

  .hero__media img {
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   35. HIGH CONTRAST
   ========================================================= */

@media (prefers-contrast: more) {
  :root {
    --border-subtle: rgb(71 85 105 / 55%);
    --border-default: rgb(71 85 105 / 72%);
    --text-secondary: var(--neutral-700);
  }

  .button--outline {
    border-width: 2px;
  }

  .navbar__link {
    font-weight: 800;
  }
}

/* =========================================================
   36. PRINT
   ========================================================= */

@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .topbar,
  .navbar__toggle,
  .navbar__actions,
  .hero__actions,
  .appointment-card,
  .contact-form,
  .emergency-banner,
  .back-to-top,
  .social-links,
  .page-loader {
    display: none !important;
  }

  .site-header {
    position: static;
    border-bottom: 1px solid #000;
    background: #fff;
  }

  .section {
    padding-block: 28px;
  }

  .hero {
    min-height: auto;
    background: #fff;
  }

  .hero__media,
  .hero__overlay,
  .hero::before,
  .hero::after {
    display: none;
  }

  .hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: 32px;
  }

  .hero__content h1,
  .hero__content p,
  .hero__content .eyebrow {
    color: #000;
  }

  .service-grid,
  .provider-grid,
  .location-grid,
  .testimonial-grid,
  .news-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   16. FINAL SHARED CARD SYSTEM
   Premium enterprise compatibility layer
========================================================================== */

/* --------------------------------------------------------------------------
   Shared grid behavior
-------------------------------------------------------------------------- */

.services__grid,
.providers__grid,
.locations__grid,
.insurance__grid,
.news__grid,
.gallery__grid,
.provider-search__results-grid {
  display: grid;
  min-width: 0;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap:
    clamp(
      18px,
      2.2vw,
      30px
    );
}

/* --------------------------------------------------------------------------
   Shared premium card surface
-------------------------------------------------------------------------- */

.service-card,
.provider-card,
.location-card,
.insurance-card,
.news-card,
.gallery-card,
.testimonial-card,
.accreditation-card,
.partner-card,
.specialty-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;

  border:
    1px solid
    var(--border-default);

  border-radius:
    clamp(
      20px,
      2vw,
      var(--radius-xl)
    );

  background:
    linear-gradient(
      155deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 98%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 94%,
        var(--color-primary-soft)
      )
    );

  box-shadow:
    0 1px 2px
      rgb(15 23 42 / 4%),
    0 10px 32px
      rgb(15 23 42 / 8%),
    inset 0 1px 0
      rgb(255 255 255 / 72%);

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium),
    border-color
      var(--duration-normal)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium),
    background-color
      var(--duration-normal)
      var(--ease-standard);
}

/* Fine glass highlight */

.service-card::after,
.provider-card::after,
.location-card::after,
.insurance-card::after,
.news-card::after,
.gallery-card::after,
.testimonial-card::after,
.accreditation-card::after,
.specialty-card::after {
  position: absolute;
  inset: 0;
  z-index: 5;

  border-radius: inherit;

  pointer-events: none;
  content: "";

  box-shadow:
    inset 0 0 0 1px
      rgb(255 255 255 / 14%);

  opacity: 0.8;
}

/* Premium top glow */

.service-card::before,
.provider-card::before,
.location-card::before,
.insurance-card::before,
.news-card::before,
.gallery-card::before,
.testimonial-card::before,
.accreditation-card::before,
.specialty-card::before {
  position: absolute;
  top: -110px;
  right: -90px;
  z-index: 0;

  width: 230px;
  height: 230px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
      ),
      transparent 68%
    );

  pointer-events: none;
  content: "";

  opacity: 0;

  transform:
    scale(0.72);

  transition:
    opacity
      var(--duration-normal)
      var(--ease-standard),
    transform
      var(--duration-slow)
      var(--ease-premium);
}

/* Card hover */

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .provider-card:hover,
  .location-card:hover,
  .insurance-card:hover,
  .news-card:hover,
  .gallery-card:hover,
  .testimonial-card:hover,
  .accreditation-card:hover,
  .specialty-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 42%,
        var(--border-default)
      );

    box-shadow:
      0 4px 10px
        rgb(15 23 42 / 5%),
      0 28px 72px
        rgb(15 23 42 / 15%),
      0 0 0 1px
        color-mix(
          in srgb,
          var(--color-primary) 6%,
          transparent
        ),
      inset 0 1px 0
        rgb(255 255 255 / 80%);

    transform:
      translateY(-8px);
  }

  .service-card:hover::before,
  .provider-card:hover::before,
  .location-card:hover::before,
  .insurance-card:hover::before,
  .news-card:hover::before,
  .gallery-card:hover::before,
  .testimonial-card:hover::before,
  .accreditation-card:hover::before,
  .specialty-card:hover::before {
    opacity: 1;

    transform:
      scale(1);
  }
}

/* Keep interactive content above decorations */

.service-card > *,
.provider-card > *,
.location-card > *,
.insurance-card > *,
.news-card > *,
.gallery-card > *,
.testimonial-card > *,
.accreditation-card > *,
.specialty-card > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Shared card typography
-------------------------------------------------------------------------- */

.service-card h3,
.provider-card h3,
.location-card h3,
.insurance-card h3,
.news-card h3,
.gallery-card h3,
.testimonial-card h3,
.accreditation-card h3,
.specialty-card h3 {
  color:
    var(--text-primary);

  font-family:
    var(--font-display);

  font-weight: 820;

  line-height: 1.25;

  letter-spacing:
    -0.025em;
}

.service-card p,
.provider-card p,
.location-card p,
.insurance-card p,
.news-card p,
.gallery-card p,
.testimonial-card p,
.accreditation-card p,
.specialty-card p {
  color:
    var(--text-secondary);

  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Shared image behavior
-------------------------------------------------------------------------- */

.service-card img,
.provider-card img,
.location-card img,
.news-card img,
.gallery-card img,
.accreditation-card img,
.specialty-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
      800ms
      var(--ease-premium),
    filter
      500ms
      var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover img,
  .provider-card:hover img,
  .location-card:hover img,
  .news-card:hover img,
  .gallery-card:hover img,
  .accreditation-card:hover img,
  .specialty-card:hover img {
    filter:
      saturate(1.06)
      contrast(1.025);

    transform:
      scale(1.065);
  }
}

/* --------------------------------------------------------------------------
   Shared empty states
-------------------------------------------------------------------------- */

.section-empty-state {
  display: grid;
  width: min(100%, 680px);

  justify-items: center;

  gap:
    var(--space-3);

  margin-inline: auto;

  padding:
    clamp(
      30px,
      5vw,
      54px
    );

  border:
    1px dashed
    color-mix(
      in srgb,
      var(--color-primary) 34%,
      var(--border-default)
    );

  border-radius:
    var(--radius-xl);

  background:
    radial-gradient(
      circle at top,
      color-mix(
        in srgb,
        var(--color-primary-soft) 72%,
        transparent
      ),
      transparent 72%
    ),
    color-mix(
      in srgb,
      var(--surface-elevated) 94%,
      transparent
    );

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 72%);

  text-align: center;
}

.section-empty-state__icon {
  display: grid;

  width: 64px;
  height: 64px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      var(--primary-50),
      var(--primary-100)
    );

  color:
    var(--color-primary);

  font-size:
    1.6rem;

  box-shadow:
    0 12px 32px
      rgb(22 166 148 / 12%),
    inset 0 1px 0
      rgb(255 255 255 / 86%);

  place-items: center;
}

.section-empty-state h3 {
  margin-top:
    var(--space-1);

  font-size:
    clamp(
      1.15rem,
      2vw,
      1.45rem
    );
}

.section-empty-state p {
  max-width: 500px;

  font-size:
    0.94rem;
}

.section-empty-state--dark {
  border-color:
    rgb(255 255 255 / 20%);

  background:
    rgb(255 255 255 / 6%);

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 10%);

  backdrop-filter:
    blur(14px);
}

.section-empty-state--dark h3 {
  color:
    var(--text-inverse);
}

.section-empty-state--dark p {
  color:
    rgb(255 255 255 / 68%);
}

/* ==========================================================================
   17. SERVICES — FINAL WORLD-CLASS VERSION
========================================================================== */

.services {
  overflow: clip;

  background:
    radial-gradient(
      circle at 92% 4%,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 31%
    ),
    radial-gradient(
      circle at 5% 88%,
      rgb(59 130 246 / 7%),
      transparent 28%
    ),
    var(--surface-page);
}

.services::before {
  position: absolute;
  top: 7%;
  right: -12%;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 68%
    );

  pointer-events: none;
  content: "";

  filter:
    blur(8px);
}

/* --------------------------------------------------------------------------
   Services header
-------------------------------------------------------------------------- */

.services .section-heading--split {
  position: relative;
  z-index: 2;

  margin-bottom:
    clamp(
      28px,
      4vw,
      46px
    );
}

.services .section-heading--split
.button {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Service grid
-------------------------------------------------------------------------- */

.services__grid {
  position: relative;
  z-index: 1;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Service card
-------------------------------------------------------------------------- */

.service-card {
  display: flex;
  min-height: 100%;

  flex-direction: column;
}

/* Service media */

.service-card__media {
  position: relative;

  display: block;

  height:
    clamp(
      190px,
      20vw,
      238px
    );

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      var(--surface-muted),
      var(--color-primary-soft)
    );
}

.service-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 4%) 0%,
      rgb(2 6 23 / 5%) 45%,
      rgb(2 12 27 / 54%) 100%
    );

  pointer-events: none;
  content: "";
}

.service-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;

  background:
    linear-gradient(
      120deg,
      transparent 18%,
      rgb(255 255 255 / 18%) 48%,
      transparent 76%
    );

  pointer-events: none;
  content: "";

  transform:
    translateX(-130%);

  transition:
    transform
      900ms
      var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover
  .service-card__media::after {
    transform:
      translateX(130%);
  }
}

.service-card__media
[data-service-image] {
  display: block;

  width: 100%;
  height: 100%;
}

/* Compatibility with JS overlay element */

.service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgb(2 12 27 / 52%) 100%
    );

  pointer-events: none;
}

/* Service icon */

.service-card__icon {
  position: absolute;
  right:
    clamp(
      16px,
      2vw,
      22px
    );
  bottom:
    clamp(
      15px,
      2vw,
      21px
    );
  z-index: 4;

  display: grid;

  width: 54px;
  height: 54px;

  border:
    1px solid
    rgb(255 255 255 / 48%);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 96%),
      rgb(255 255 255 / 82%)
    );

  color:
    var(--color-primary);

  font-size:
    1.35rem;

  box-shadow:
    0 14px 35px
      rgb(2 12 27 / 24%),
    inset 0 1px 0
      rgb(255 255 255 / 96%);

  backdrop-filter:
    blur(14px)
    saturate(145%);

  place-items: center;

  transition:
    color
      var(--duration-normal)
      var(--ease-standard),
    background
      var(--duration-normal)
      var(--ease-standard),
    transform
      var(--duration-normal)
      var(--ease-premium),
    box-shadow
      var(--duration-normal)
      var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover
  .service-card__icon {
    background:
      var(--gradient-primary);

    color:
      var(--text-inverse);

    box-shadow:
      0 18px 42px
        rgb(11 133 121 / 36%),
      inset 0 1px 0
        rgb(255 255 255 / 24%);

    transform:
      translateY(-4px)
      rotate(-3deg)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   Service card content
-------------------------------------------------------------------------- */

.service-card__content {
  display: flex;
  min-height: 0;

  flex: 1 1 auto;
  flex-direction: column;

  padding:
    clamp(
      20px,
      2.5vw,
      28px
    );
}

/* Service code badge */

.service-card__code {
  align-self: flex-start;

  margin-bottom:
    var(--space-3);

  padding:
    6px 10px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );

  border-radius:
    var(--radius-pill);

  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 78%,
      transparent
    );

  color:
    var(--color-primary);

  font-size:
    0.68rem;

  font-weight: 850;

  line-height: 1;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}

/* Service title */

.service-card__content h3 {
  font-size:
    clamp(
      1.12rem,
      1.7vw,
      1.38rem
    );
}

.service-card__content h3 a {
  color:
    var(--text-primary);

  transition:
    color
      var(--duration-fast)
      var(--ease-standard);
}

.service-card__content h3 a:hover {
  color:
    var(--color-primary);
}

/* Service description */

.service-card__content
[data-service-description] {
  display:
    -webkit-box;

  margin-top:
    var(--space-3);

  overflow: hidden;

  color:
    var(--text-secondary);

  font-size:
    0.91rem;

  line-height:
    1.65;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;
}

/* --------------------------------------------------------------------------
   Service footer
-------------------------------------------------------------------------- */

.service-card__footer {
  display: flex;

  min-height: 38px;

  align-items: center;
  justify-content:
    space-between;

  gap:
    var(--space-3);

  margin-top:
    auto;

  padding-top:
    var(--space-5);

  border-top:
    1px solid
    var(--border-subtle);
}

.service-card__footer
.text-link {
  flex: 0 1 auto;

  font-size:
    0.84rem;

  font-weight:
    800;
}

/* Prevent duplicate arrow because HTML already includes an icon */

.service-card__footer
.text-link::after {
  display: none;
}

.service-card__footer
.text-link i {
  transition:
    transform
      var(--duration-fast)
      var(--ease-premium);
}

.service-card__footer
.text-link:hover i {
  transform:
    translateX(4px);
}

/* Availability badge */

.service-card__availability {
  display: inline-flex;

  min-width: 0;

  align-items: center;

  gap:
    6px;

  padding:
    6px 9px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--success-500) 24%,
      transparent
    );

  border-radius:
    var(--radius-pill);

  background:
    color-mix(
      in srgb,
      var(--success-50) 88%,
      transparent
    );

  color:
    var(--success-600);

  font-size:
    0.68rem;

  font-weight:
    800;

  line-height:
    1.2;

  white-space:
    nowrap;
}

.service-card__availability i {
  flex:
    0 0 auto;

  font-size:
    0.84rem;
}

/* --------------------------------------------------------------------------
   Featured service compatibility
-------------------------------------------------------------------------- */

.service-card.is-featured,
.service-card[data-featured="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 48%,
      var(--border-default)
    );

  box-shadow:
    0 20px 54px
      rgb(11 133 121 / 14%),
    inset 0 1px 0
      rgb(255 255 255 / 80%);
}

.service-card.is-featured::before,
.service-card[data-featured="true"]::before {
  opacity: 1;
}

.service-card.is-featured
.service-card__code,
.service-card[data-featured="true"]
.service-card__code {
  background:
    var(--gradient-primary);

  color:
    var(--text-inverse);

  box-shadow:
    0 8px 22px
      rgb(11 133 121 / 22%);
}

/* --------------------------------------------------------------------------
   Service loading skeletons
-------------------------------------------------------------------------- */

.service-card.is-loading {
  pointer-events: none;
}

.service-card.is-loading
.service-card__media,
.service-card.is-loading
.service-card__content > * {
  position: relative;

  overflow: hidden;

  background:
    var(--surface-muted);

  color:
    transparent;
}

.service-card.is-loading
.service-card__media::after,
.service-card.is-loading
.service-card__content > *::after {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 62%) 46%,
      transparent 74%
    );

  content: "";

  animation:
    service-skeleton-shimmer
    1.45s linear infinite;

  transform:
    translateX(-120%);
}

@keyframes service-skeleton-shimmer {
  to {
    transform:
      translateX(120%);
  }
}

/* ==========================================================================
   18. SERVICE RESPONSIVE REFINEMENTS
========================================================================== */

@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-card__media {
    height:
      clamp(
        200px,
        28vw,
        250px
      );
  }
}

@media (max-width: 767px) {
  .services .section-heading--split {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .services .section-heading--split
  .button {
    width: 100%;
  }

  .services__grid {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }

  .service-card__media {
    height:
      clamp(
        190px,
        58vw,
        245px
      );
  }

  .service-card__content {
    padding:
      20px;
  }
}

@media (max-width: 480px) {
  .service-card {
    border-radius:
      var(--radius-lg);
  }

  .service-card__media {
    height:
      190px;
  }

  .service-card__icon {
    right:
      14px;
    bottom:
      14px;

    width:
      48px;
    height:
      48px;

    border-radius:
      15px;

    font-size:
      1.18rem;
  }

  .service-card__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .service-card__availability {
    align-self:
      flex-start;
  }
}

/* ==========================================================================
   19. SERVICE DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.service-card,
html[data-color-mode="dark"]
.provider-card,
html[data-color-mode="dark"]
.location-card,
html[data-color-mode="dark"]
.insurance-card,
html[data-color-mode="dark"]
.news-card,
html[data-color-mode="dark"]
.gallery-card,
html[data-color-mode="dark"]
.testimonial-card,
html[data-color-mode="dark"]
.accreditation-card,
html[data-color-mode="dark"]
.specialty-card {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );

  box-shadow:
    0 14px 42px
      rgb(0 0 0 / 28%),
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.service-card__icon {
  border-color:
    rgb(255 255 255 / 15%);

  background:
    rgb(10 25 39 / 88%);

  color:
    var(--primary-300);

  box-shadow:
    0 14px 34px
      rgb(0 0 0 / 32%),
    inset 0 1px 0
      rgb(255 255 255 / 8%);
}

html[data-color-mode="dark"]
.service-card__availability {
  border-color:
    rgb(16 185 129 / 26%);

  background:
    rgb(5 150 105 / 12%);

  color:
    #6ee7b7;
}

html[data-color-mode="dark"]
.section-empty-state {
  background:
    radial-gradient(
      circle at top,
      rgb(22 166 148 / 10%),
      transparent 72%
    ),
    rgb(15 29 44 / 74%);

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

/* ==========================================================================
   20. SERVICE ACCESSIBILITY AND REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-card__media::after,
  .service-card__icon,
  .service-card img,
  .service-card__footer i {
    transition: none !important;
  }

  .service-card:hover {
    transform: none;
  }

  .service-card:hover img {
    transform: none;
  }

  .service-card.is-loading
  .service-card__media::after,
  .service-card.is-loading
  .service-card__content > *::after {
    animation: none;
  }
}

html[data-reduce-motion="true"]
.service-card,
html[data-reduce-motion="true"]
.service-card::before,
html[data-reduce-motion="true"]
.service-card__media::after,
html[data-reduce-motion="true"]
.service-card__icon,
html[data-reduce-motion="true"]
.service-card img {
  transform: none !important;
}

/* ==========================================================================
   21. DEPARTMENTS — FINAL PREMIUM VERSION
========================================================================== */

.departments {
  overflow: clip;

  background:
    radial-gradient(
      circle at 4% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 96% 86%,
      rgb(59 130 246 / 7%),
      transparent 30%
    ),
    var(--surface-soft);
}

.departments::after {
  position: absolute;
  top: 7%;
  right: -170px;

  width: 440px;
  height: 440px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 68%
    );

  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Desktop department layout
-------------------------------------------------------------------------- */

.departments__layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(250px, 0.34fr)
    minmax(0, 1fr);

  gap:
    clamp(
      22px,
      3vw,
      38px
    );

  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Department navigation
-------------------------------------------------------------------------- */

.departments__navigation {
  display: grid;

  align-content: start;

  gap:
    9px;

  padding:
    10px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-xl);

  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 90%,
      transparent
    );

  box-shadow:
    var(--shadow-md),
    inset 0 1px 0
      rgb(255 255 255 / 74%);

  backdrop-filter:
    blur(18px)
    saturate(135%);
}

/* Individual department tab */

.department-tab {
  position: relative;

  display: flex;

  width: 100%;
  min-height: 64px;

  align-items: center;

  gap:
    13px;

  padding:
    11px 14px;

  overflow: hidden;

  border:
    1px solid
    transparent;

  border-radius:
    16px;

  background:
    transparent;

  color:
    var(--text-secondary);

  font-size:
    0.88rem;

  font-weight:
    760;

  line-height:
    1.35;

  text-align:
    left;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    background
      var(--duration-fast)
      var(--ease-standard),
    border-color
      var(--duration-fast)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-fast)
      var(--ease-premium);
}

.department-tab::after {
  position: absolute;
  top: 50%;
  right: 13px;

  width: 7px;
  height: 7px;

  border-top:
    2px solid currentColor;

  border-right:
    2px solid currentColor;

  content: "";

  opacity:
    0;

  transform:
    translate(-5px, -50%)
    rotate(45deg);

  transition:
    opacity
      var(--duration-fast)
      var(--ease-standard),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.department-tab__icon {
  display: grid;

  width: 42px;
  height: 42px;

  flex:
    0 0 42px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 17%,
      transparent
    );

  border-radius:
    13px;

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  font-size:
    1.08rem;

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 74%);

  place-items: center;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    background
      var(--duration-fast)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .department-tab:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 20%,
        var(--border-subtle)
      );

    background:
      color-mix(
        in srgb,
        var(--color-primary-soft) 64%,
        transparent
      );

    color:
      var(--color-primary);

    transform:
      translateX(3px);
  }

  .department-tab:hover
  .department-tab__icon {
    transform:
      scale(1.04);
  }
}

/* Selected department tab */

.department-tab[aria-selected="true"],
.department-tab.is-active {
  padding-right:
    34px;

  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      var(--border-default)
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-primary-soft) 94%,
        white
      ),
      color-mix(
        in srgb,
        var(--color-primary-soft) 64%,
        transparent
      )
    );

  color:
    var(--color-primary);

  box-shadow:
    0 10px 26px
      color-mix(
        in srgb,
        var(--color-primary) 12%,
        transparent
      ),
    inset 0 1px 0
      rgb(255 255 255 / 82%);

  transform:
    translateX(3px);
}

.department-tab[aria-selected="true"]::after,
.department-tab.is-active::after {
  opacity:
    1;

  transform:
    translate(0, -50%)
    rotate(45deg);
}

.department-tab[aria-selected="true"]
.department-tab__icon,
.department-tab.is-active
.department-tab__icon {
  border-color:
    transparent;

  background:
    var(--gradient-primary);

  color:
    var(--text-inverse);

  box-shadow:
    0 10px 25px
      rgb(11 133 121 / 25%),
    inset 0 1px 0
      rgb(255 255 255 / 24%);

  transform:
    scale(1.04);
}

/* --------------------------------------------------------------------------
   Department content container
-------------------------------------------------------------------------- */

.departments__content {
  min-width:
    0;

  min-height:
    500px;
}

/* --------------------------------------------------------------------------
   Department panel
-------------------------------------------------------------------------- */

.department-panel {
  position: relative;

  display: grid;

  min-height:
    500px;

  overflow: hidden;

  grid-template-columns:
    minmax(0, 0.96fr)
    minmax(320px, 0.84fr);

  border:
    1px solid
    var(--border-default);

  border-radius:
    clamp(
      22px,
      2.3vw,
      var(--radius-2xl)
    );

  background:
    var(--surface-elevated);

  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0
      rgb(255 255 255 / 74%);

  animation:
    department-panel-enter
    420ms
    var(--ease-premium)
    both;
}

.department-panel[hidden] {
  display:
    none !important;
}

@keyframes department-panel-enter {
  from {
    opacity:
      0;

    transform:
      translateY(10px)
      scale(0.99);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* Panel content */

.department-panel__content {
  position: relative;
  z-index: 2;

  display: flex;

  min-width:
    0;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    clamp(
      28px,
      4.2vw,
      58px
    );
}

.department-panel__content::before {
  position: absolute;
  top: -130px;
  left: -150px;
  z-index: -1;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );

  content: "";
}

.department-panel__icon {
  display: grid;

  width: 62px;
  height: 62px;

  margin-bottom:
    var(--space-5);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      var(--primary-50),
      var(--primary-100)
    );

  color:
    var(--color-primary);

  font-size:
    1.55rem;

  box-shadow:
    0 15px 34px
      rgb(22 166 148 / 13%),
    inset 0 1px 0
      rgb(255 255 255 / 86%);

  place-items:
    center;
}

.department-panel
.eyebrow {
  margin-bottom:
    var(--space-2);
}

.department-panel
[data-department-title] {
  max-width:
    580px;

  font-size:
    clamp(
      1.65rem,
      3.2vw,
      2.7rem
    );

  letter-spacing:
    -0.045em;
}

.department-panel
[data-department-description] {
  max-width:
    600px;

  margin-top:
    var(--space-4);

  font-size:
    clamp(
      0.96rem,
      1.4vw,
      1.06rem
    );

  line-height:
    1.75;
}

/* Department services list */

.department-panel__services {
  display: flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-block:
    var(--space-5)
    var(--space-6);
}

.department-panel__services li {
  display: inline-flex;

  min-height:
    34px;

  align-items:
    center;

  padding:
    7px 11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 17%,
      var(--border-subtle)
    );

  border-radius:
    var(--radius-pill);

  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 64%,
      transparent
    );

  color:
    var(--text-secondary);

  font-size:
    0.75rem;

  font-weight:
    720;

  line-height:
    1.2;
}

.department-panel
.button {
  margin-top:
    auto;
}

/* Department media */

.department-panel__media {
  position: relative;

  min-width:
    0;

  overflow:
    hidden;
}

.department-panel__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      90deg,
      var(--surface-elevated) 0%,
      color-mix(
        in srgb,
        var(--surface-elevated) 74%,
        transparent
      ) 14%,
      transparent 44%
    );

  pointer-events:
    none;

  content: "";
}

.department-panel__media::after {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgb(2 12 27 / 20%) 100%
    );

  pointer-events:
    none;

  content: "";
}

.department-panel__media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
      1.2s
      var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .department-panel:hover
  .department-panel__media img {
    transform:
      scale(1.045);
  }
}

/* --------------------------------------------------------------------------
   Mobile department cards
-------------------------------------------------------------------------- */

.departments__mobile-grid {
  display:
    none;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    var(--homepage-card-gap);
}

.department-card {
  position:
    relative;

  display:
    flex;

  min-width:
    0;

  min-height:
    100%;

  flex-direction:
    column;

  align-items:
    flex-start;

  padding:
    clamp(
      20px,
      4vw,
      28px
    );

  overflow:
    hidden;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      155deg,
      var(--surface-elevated),
      color-mix(
        in srgb,
        var(--surface-card) 92%,
        var(--color-primary-soft)
      )
    );

  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0
      rgb(255 255 255 / 72%);

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium),
    border-color
      var(--duration-normal)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium);
}

.department-card::before {
  position:
    absolute;

  top:
    -90px;

  right:
    -80px;

  width:
    210px;

  height:
    210px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 13%,
        transparent
      ),
      transparent 68%
    );

  content: "";
}

.department-card > * {
  position:
    relative;

  z-index:
    1;
}

.department-card__icon {
  display:
    grid;

  width:
    52px;

  height:
    52px;

  margin-bottom:
    var(--space-4);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );

  border-radius:
    17px;

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary);

  font-size:
    1.3rem;

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 76%);

  place-items:
    center;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    background
      var(--duration-fast)
      var(--ease-standard),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.department-card h3 {
  font-size:
    clamp(
      1.08rem,
      2vw,
      1.3rem
    );
}

.department-card p {
  display:
    -webkit-box;

  margin-top:
    var(--space-3);

  overflow:
    hidden;

  font-size:
    0.88rem;

  line-height:
    1.62;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    4;
}

.department-card
.text-link {
  margin-top:
    auto;

  padding-top:
    var(--space-5);

  font-size:
    0.82rem;
}

.department-card
.text-link::after {
  display:
    none;
}

.department-card
.text-link i {
  transition:
    transform
      var(--duration-fast)
      var(--ease-premium);
}

.department-card
.text-link:hover i {
  transform:
    translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .department-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 38%,
        var(--border-default)
      );

    box-shadow:
      var(--shadow-lg);

    transform:
      translateY(-6px);
  }

  .department-card:hover
  .department-card__icon {
    background:
      var(--gradient-primary);

    color:
      var(--text-inverse);

    transform:
      translateY(-3px)
      rotate(-3deg);
  }
}

/* ==========================================================================
   22. SPECIALTIES — FINAL PREMIUM VERSION
========================================================================== */

.specialties {
  overflow:
    clip;

  background:
    var(--surface-page);
}

.specialties::before {
  background:
    radial-gradient(
      circle at 88% 20%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 30%
    );
}

/* --------------------------------------------------------------------------
   Specialty carousel controls
-------------------------------------------------------------------------- */

.specialties__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.carousel-control {
  display:
    grid;

  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    15px;

  background:
    var(--surface-elevated);

  color:
    var(--text-primary);

  font-size:
    1.15rem;

  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0
      rgb(255 255 255 / 72%);

  place-items:
    center;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    background
      var(--duration-fast)
      var(--ease-standard),
    border-color
      var(--duration-fast)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-fast)
      var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .carousel-control:hover:not(:disabled) {
    border-color:
      var(--color-primary);

    background:
      var(--gradient-primary);

    color:
      var(--text-inverse);

    box-shadow:
      0 13px 30px
        rgb(11 133 121 / 26%);

    transform:
      translateY(-2px);
  }
}

.carousel-control:active:not(:disabled) {
  transform:
    translateY(0)
    scale(0.97);
}

.carousel-control:disabled {
  opacity:
    0.38;

  box-shadow:
    none;
}

/* --------------------------------------------------------------------------
   Specialty viewport and track
-------------------------------------------------------------------------- */

.specialties__viewport {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  padding-block:
    6px 20px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 24px,
      black calc(100% - 24px),
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 24px,
      black calc(100% - 24px),
      transparent
    );
}

.specialties__track {
  display:
    flex;

  gap:
    var(--homepage-card-gap);

  will-change:
    transform;

  transition:
    transform
      520ms
      var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Specialty card
-------------------------------------------------------------------------- */

.specialty-card {
  min-width:
    min(
      320px,
      calc(
        (100vw - 80px) / 3
      )
    );

  flex:
    0 0
    min(
      320px,
      calc(
        (100vw - 80px) / 3
      )
    );

  overflow:
    visible;
}

.specialty-card__link {
  position:
    relative;

  display:
    grid;

  min-height:
    142px;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  align-items:
    center;

  gap:
    var(--space-4);

  padding:
    clamp(
      19px,
      2.3vw,
      25px
    );

  overflow:
    hidden;

  border-radius:
    inherit;

  color:
    inherit;
}

.specialty-card__link::before {
  position:
    absolute;

  inset:
    auto 0 0;

  height:
    3px;

  background:
    var(--gradient-primary);

  content: "";

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.specialty-card__icon {
  display:
    grid;

  width:
    56px;

  height:
    56px;

  flex:
    0 0 56px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      var(--primary-50),
      var(--primary-100)
    );

  color:
    var(--color-primary);

  font-size:
    1.35rem;

  box-shadow:
    0 10px 26px
      rgb(22 166 148 / 11%),
    inset 0 1px 0
      rgb(255 255 255 / 84%);

  place-items:
    center;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    background
      var(--duration-fast)
      var(--ease-standard),
    box-shadow
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.specialty-card__content {
  display:
    grid;

  min-width:
    0;

  gap:
    6px;
}

.specialty-card__content strong {
  overflow:
    hidden;

  color:
    var(--text-primary);

  font-family:
    var(--font-display);

  font-size:
    clamp(
      0.98rem,
      1.5vw,
      1.15rem
    );

  font-weight:
    820;

  line-height:
    1.3;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;
}

.specialty-card__content small {
  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    var(--text-muted);

  font-size:
    0.79rem;

  line-height:
    1.5;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.specialty-card__link >
i:last-child {
  color:
    var(--text-muted);

  font-size:
    1.12rem;

  transition:
    color
      var(--duration-fast)
      var(--ease-standard),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .specialty-card:hover
  .specialty-card__link::before {
    transform:
      scaleX(1);
  }

  .specialty-card:hover
  .specialty-card__icon {
    border-color:
      transparent;

    background:
      var(--gradient-primary);

    color:
      var(--text-inverse);

    box-shadow:
      0 15px 35px
        rgb(11 133 121 / 28%);

    transform:
      translateY(-3px)
      rotate(-4deg)
      scale(1.04);
  }

  .specialty-card:hover
  .specialty-card__link >
  i:last-child {
    color:
      var(--color-primary);

    transform:
      translate(3px, -3px);
  }
}

/* ==========================================================================
   23. DEPARTMENTS AND SPECIALTIES — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .departments__layout {
    grid-template-columns:
      minmax(220px, 0.36fr)
      minmax(0, 1fr);
  }

  .department-panel {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 0.72fr);
  }

  .department-panel__content {
    padding:
      34px;
  }

  .specialty-card {
    min-width:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );

    flex-basis:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );
  }
}

@media (max-width: 900px) {
  .departments__layout {
    display:
      none;
  }

  .departments__mobile-grid {
    display:
      grid;
  }

  .departments .section-actions {
    margin-top:
      30px;
  }

  .specialties__viewport {
    mask-image:
      none;

    -webkit-mask-image:
      none;
  }
}

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

  .specialties .section-heading--split {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .specialties__controls {
    align-self:
      stretch;

    justify-content:
      flex-end;
  }

  .specialty-card {
    min-width:
      min(
        86vw,
        330px
      );

    flex-basis:
      min(
        86vw,
        330px
      );
  }
}

@media (max-width: 480px) {
  .department-card {
    border-radius:
      var(--radius-lg);
  }

  .department-card__icon {
    width:
      48px;

    height:
      48px;

    border-radius:
      15px;
  }

  .specialty-card {
    min-width:
      calc(100vw - 62px);

    flex-basis:
      calc(100vw - 62px);
  }

  .specialty-card__link {
    min-height:
      132px;

    padding:
      18px;

    gap:
      13px;
  }

  .specialty-card__icon {
    width:
      50px;

    height:
      50px;

    flex-basis:
      50px;

    border-radius:
      16px;
  }
}

/* ==========================================================================
   24. DEPARTMENTS AND SPECIALTIES — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.departments__navigation {
  background:
    rgb(15 29 44 / 82%);

  box-shadow:
    0 18px 48px
      rgb(0 0 0 / 28%),
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.department-tab[aria-selected="true"],
html[data-color-mode="dark"]
.department-tab.is-active {
  background:
    linear-gradient(
      135deg,
      rgb(22 166 148 / 18%),
      rgb(22 166 148 / 8%)
    );

  box-shadow:
    0 10px 28px
      rgb(0 0 0 / 23%),
    inset 0 1px 0
      rgb(255 255 255 / 8%);
}

html[data-color-mode="dark"]
.department-panel {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 98%),
      rgb(10 25 39 / 96%)
    );

  box-shadow:
    0 24px 64px
      rgb(0 0 0 / 34%),
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.department-panel__media::before {
  background:
    linear-gradient(
      90deg,
      rgb(18 35 52) 0%,
      rgb(18 35 52 / 74%) 15%,
      transparent 45%
    );
}

html[data-color-mode="dark"]
.department-card {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );

  box-shadow:
    0 14px 40px
      rgb(0 0 0 / 28%),
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.specialty-card__icon,
html[data-color-mode="dark"]
.department-card__icon,
html[data-color-mode="dark"]
.department-panel__icon {
  border-color:
    rgb(255 255 255 / 12%);

  background:
    rgb(22 166 148 / 12%);

  color:
    var(--primary-300);

  box-shadow:
    inset 0 1px 0
      rgb(255 255 255 / 7%);
}

/* ==========================================================================
   25. DEPARTMENTS AND SPECIALTIES — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .department-tab,
  .department-tab::after,
  .department-tab__icon,
  .department-panel,
  .department-panel__media img,
  .department-card,
  .department-card__icon,
  .specialties__track,
  .specialty-card,
  .specialty-card__link::before,
  .specialty-card__icon,
  .specialty-card__link > i:last-child {
    animation:
      none !important;

    transition:
      none !important;
  }

  .department-tab:hover,
  .department-card:hover,
  .specialty-card:hover {
    transform:
      none;
  }

  .department-panel:hover
  .department-panel__media img {
    transform:
      none;
  }
}

html[data-reduce-motion="true"]
.department-tab,
html[data-reduce-motion="true"]
.department-panel,
html[data-reduce-motion="true"]
.department-card,
html[data-reduce-motion="true"]
.specialty-card,
html[data-reduce-motion="true"]
.specialties__track {
  animation:
    none !important;

  transition:
    none !important;

  transform:
    none !important;
}

/* ==========================================================================
   26. WHY US — FINAL PREMIUM VERSION
========================================================================== */

.why-us {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--text-inverse);
  background:
    radial-gradient(
      circle at 8% 16%,
      rgb(22 166 148 / 26%),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(59 130 246 / 18%),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--secondary-900),
      var(--secondary-950) 66%
    );
}

.why-us::before,
.why-us::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(10px);
}

.why-us::before {
  top: -240px;
  left: -180px;
  width: 560px;
  height: 560px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 30%),
      transparent 68%
    );
}

.why-us::after {
  right: -210px;
  bottom: -260px;
  width: 600px;
  height: 600px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 20%),
      transparent 70%
    );
}

/* --------------------------------------------------------------------------
   Main layout
-------------------------------------------------------------------------- */

.why-us__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 0.82fr);
  align-items: center;
  gap:
    clamp(
      42px,
      7vw,
      92px
    );
}

.why-us__content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.why-us .eyebrow,
.eyebrow--light {
  color: #96f1e4;
}

.why-us__content h2 {
  max-width: 720px;
  margin-top: var(--space-3);
  color: var(--text-inverse);
  text-shadow:
    0 12px 36px
    rgb(2 6 23 / 30%);
}

.why-us__description {
  max-width: 660px;
  margin-top: var(--space-5);
  color: rgb(255 255 255 / 72%);
  font-size:
    clamp(
      0.98rem,
      1.4vw,
      1.08rem
    );
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Why-us items
-------------------------------------------------------------------------- */

.why-us__items {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap:
    clamp(
      14px,
      2vw,
      20px
    );
  margin-top:
    clamp(
      26px,
      4vw,
      38px
    );
}

.why-us-item {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
  padding:
    clamp(
      17px,
      2vw,
      22px
    );
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 12%);
  border-radius:
    var(--radius-lg);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 8%),
      rgb(255 255 255 / 4%)
    );
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 8%);
  backdrop-filter:
    blur(14px)
    saturate(130%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.why-us-item::after {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 16%),
      transparent 70%
    );
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.why-us-item__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border:
    1px solid
    rgb(150 241 228 / 22%);
  border-radius: 15px;
  background:
    rgb(150 241 228 / 10%);
  color: #96f1e4;
  font-size: 1.12rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 10%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.why-us-item > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.why-us-item h3 {
  color: var(--text-inverse);
  font-size:
    clamp(
      0.96rem,
      1.3vw,
      1.08rem
    );
  line-height: 1.35;
}

.why-us-item p {
  margin-top: 6px;
  color: rgb(255 255 255 / 62%);
  font-size: 0.82rem;
  line-height: 1.58;
}

@media (hover: hover) and (pointer: fine) {
  .why-us-item:hover {
    border-color:
      rgb(150 241 228 / 26%);
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 11%),
        rgb(22 166 148 / 8%)
      );
    box-shadow:
      0 18px 42px
      rgb(0 0 0 / 20%),
      inset 0 1px 0
      rgb(255 255 255 / 10%);
    transform:
      translateY(-5px);
  }

  .why-us-item:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .why-us-item:hover
  .why-us-item__icon {
    background:
      linear-gradient(
        145deg,
        #96f1e4,
        #3cc6b0
      );
    color: var(--secondary-950);
    transform:
      translateY(-2px)
      rotate(-3deg)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   Why-us actions
-------------------------------------------------------------------------- */

.why-us__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top:
    clamp(
      28px,
      4vw,
      42px
    );
}

.button--transparent {
  min-height: 48px;
  padding-inline: 20px;
  border:
    1px solid
    rgb(255 255 255 / 20%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 6%);
  color: var(--text-inverse);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 8%);
  backdrop-filter:
    blur(12px);
}

.button--transparent:hover {
  border-color:
    rgb(255 255 255 / 38%);
  background:
    rgb(255 255 255 / 11%);
  box-shadow:
    0 14px 34px
    rgb(0 0 0 / 20%),
    inset 0 1px 0
    rgb(255 255 255 / 12%);
}

/* --------------------------------------------------------------------------
   Why-us media
-------------------------------------------------------------------------- */

.why-us__media {
  position: relative;
  min-width: 0;
  padding:
    clamp(
      14px,
      2vw,
      24px
    )
    clamp(
      14px,
      2vw,
      24px
    )
    clamp(
      34px,
      4vw,
      52px
    );
}

.why-us__image-wrap {
  position: relative;
  min-height:
    clamp(
      430px,
      48vw,
      610px
    );
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 16%);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    rgb(255 255 255 / 6%);
  box-shadow:
    0 34px 90px
    rgb(0 0 0 / 34%),
    inset 0 1px 0
    rgb(255 255 255 / 12%);
  transform:
    rotate(1.2deg);
  transition:
    transform
    var(--duration-slow)
    var(--ease-premium),
    box-shadow
    var(--duration-slow)
    var(--ease-premium);
}

.why-us__image-wrap::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 10%);
  pointer-events: none;
  content: "";
}

.why-us__image-wrap img {
  width: 100%;
  height: 100%;
  min-height:
    clamp(
      430px,
      48vw,
      610px
    );
  object-fit: cover;
  transition:
    transform
    1.1s
    var(--ease-premium),
    filter
    600ms
    var(--ease-standard);
}

.why-us__media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 4%) 0%,
      rgb(2 12 27 / 10%) 48%,
      rgb(2 12 27 / 48%) 100%
    );
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .why-us__media:hover
  .why-us__image-wrap {
    box-shadow:
      0 42px 110px
      rgb(0 0 0 / 42%),
      inset 0 1px 0
      rgb(255 255 255 / 14%);
    transform:
      rotate(0)
      translateY(-4px);
  }

  .why-us__media:hover
  .why-us__image-wrap img {
    filter:
      saturate(1.05)
      contrast(1.02);
    transform: scale(1.045);
  }
}

/* Video button */

.why-us__video-button {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  display: grid;
  width: 88px;
  height: 88px;
  padding: 0;
  border:
    1px solid
    rgb(255 255 255 / 52%);
  border-radius: 50%;
  background:
    rgb(255 255 255 / 88%);
  color: var(--color-primary);
  box-shadow:
    0 22px 58px
    rgb(2 6 23 / 32%),
    0 0 0 12px
    rgb(255 255 255 / 10%);
  backdrop-filter:
    blur(16px)
    saturate(150%);
  place-items: center;
  transform:
    translate(-50%, -50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.why-us__video-button::before,
.why-us__video-button::after {
  position: absolute;
  inset: -1px;
  border:
    1px solid
    rgb(255 255 255 / 36%);
  border-radius: 50%;
  content: "";
  animation:
    why-us-video-pulse
    2.4s
    ease-out
    infinite;
}

.why-us__video-button::after {
  animation-delay: 1.2s;
}

.why-us__video-button span {
  display: grid;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 1.45rem;
  box-shadow:
    0 12px 30px
    rgb(11 133 121 / 32%);
  place-items: center;
}

.why-us__video-button i {
  margin-left: 3px;
}

.why-us__video-button:hover {
  background: #fff;
  box-shadow:
    0 26px 68px
    rgb(2 6 23 / 40%),
    0 0 0 16px
    rgb(255 255 255 / 12%);
  transform:
    translate(-50%, -50%)
    scale(1.06);
}

@keyframes why-us-video-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

/* Trust card */

.why-us__trust-card {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  min-width:
    min(
      260px,
      82%
    );
  align-items: center;
  gap: var(--space-4);
  padding:
    16px 20px;
  border:
    1px solid
    rgb(255 255 255 / 52%);
  border-radius:
    20px;
  background:
    rgb(255 255 255 / 91%);
  color: var(--secondary-950);
  box-shadow:
    0 24px 64px
    rgb(0 0 0 / 30%),
    inset 0 1px 0
    rgb(255 255 255 / 94%);
  backdrop-filter:
    blur(18px)
    saturate(155%);
  transform:
    rotate(-2deg);
  transition:
    transform
    var(--duration-normal)
    var(--ease-premium),
    box-shadow
    var(--duration-normal)
    var(--ease-premium);
}

.why-us__trust-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 16px;
  background:
    var(--gradient-gold);
  color: #3c2a08;
  font-size: 1.3rem;
  box-shadow:
    0 12px 28px
    rgb(157 112 30 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 45%);
  place-items: center;
}

.why-us__trust-card > div {
  display: grid;
  gap: 3px;
}

.why-us__trust-card strong {
  color: var(--secondary-950);
  font-family: var(--font-display);
  font-size:
    clamp(
      1.2rem,
      2vw,
      1.55rem
    );
  font-weight: 900;
  line-height: 1;
}

.why-us__trust-card span {
  color: var(--neutral-600);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .why-us__trust-card:hover {
    box-shadow:
      0 30px 74px
      rgb(0 0 0 / 38%),
      inset 0 1px 0
      rgb(255 255 255 / 96%);
    transform:
      rotate(0)
      translateY(-4px);
  }
}

/* ==========================================================================
   27. ABOUT — FINAL PREMIUM VERSION
========================================================================== */

.about {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 2% 90%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 29%
    ),
    radial-gradient(
      circle at 95% 12%,
      rgb(59 130 246 / 6%),
      transparent 28%
    ),
    var(--surface-page);
}

.about::before {
  position: absolute;
  top: 10%;
  left: -180px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   About layout
-------------------------------------------------------------------------- */

.about__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(360px, 0.86fr)
    minmax(0, 1fr);
  align-items: center;
  gap:
    clamp(
      48px,
      7vw,
      96px
    );
}

/* --------------------------------------------------------------------------
   About media composition
-------------------------------------------------------------------------- */

.about__media {
  position: relative;
  min-height:
    clamp(
      520px,
      56vw,
      690px
    );
  padding:
    12px 34px 44px 8px;
}

.about__image-primary {
  position: absolute;
  inset: 0 58px 46px 0;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    var(--surface-muted);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  transform: rotate(-1.6deg);
  transition:
    transform
    var(--duration-slow)
    var(--ease-premium),
    box-shadow
    var(--duration-slow)
    var(--ease-premium);
}

.about__image-primary::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      transparent 54%,
      rgb(2 12 27 / 24%) 100%
    );
  pointer-events: none;
  content: "";
}

.about__image-primary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    1.1s
    var(--ease-premium),
    filter
    600ms
    var(--ease-standard);
}

.about__image-secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width:
    clamp(
      180px,
      27vw,
      280px
    );
  aspect-ratio: 0.92;
  overflow: hidden;
  border:
    8px solid
    var(--surface-page);
  border-radius:
    clamp(
      20px,
      2.5vw,
      30px
    );
  background:
    var(--surface-muted);
  box-shadow:
    0 26px 70px
    rgb(15 23 42 / 22%),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  transform: rotate(3deg);
  transition:
    transform
    var(--duration-slow)
    var(--ease-premium),
    box-shadow
    var(--duration-slow)
    var(--ease-premium);
}

.about__image-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    900ms
    var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .about__media:hover
  .about__image-primary {
    box-shadow:
      0 42px 100px
      rgb(15 23 42 / 20%),
      inset 0 1px 0
      rgb(255 255 255 / 78%);
    transform:
      rotate(-0.5deg)
      translateY(-4px);
  }

  .about__media:hover
  .about__image-primary img {
    filter:
      saturate(1.05)
      contrast(1.02);
    transform: scale(1.045);
  }

  .about__media:hover
  .about__image-secondary {
    box-shadow:
      0 34px 84px
      rgb(15 23 42 / 26%);
    transform:
      rotate(1deg)
      translateY(-6px);
  }

  .about__media:hover
  .about__image-secondary img {
    transform: scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   Experience badge
-------------------------------------------------------------------------- */

.about__experience {
  position: absolute;
  top:
    clamp(
      28px,
      5vw,
      62px
    );
  left:
    clamp(
      -10px,
      -1vw,
      8px
    );
  z-index: 5;
  display: grid;
  min-width:
    clamp(
      138px,
      19vw,
      190px
    );
  gap: 5px;
  padding:
    18px 20px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 34%,
      var(--border-default)
    );
  border-radius:
    20px;
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 94%,
      transparent
    );
  box-shadow:
    0 20px 54px
    rgb(15 23 42 / 18%),
    inset 0 1px 0
    rgb(255 255 255 / 90%);
  backdrop-filter:
    blur(18px)
    saturate(145%);
  transform: rotate(-3deg);
}

.about__experience strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size:
    clamp(
      1.8rem,
      4vw,
      2.8rem
    );
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.about__experience span {
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Quality badge
-------------------------------------------------------------------------- */

.about__quality-badge {
  position: absolute;
  right:
    clamp(
      20px,
      4vw,
      54px
    );
  top:
    clamp(
      26px,
      5vw,
      60px
    );
  z-index: 5;
  display: flex;
  max-width: 270px;
  align-items: center;
  gap: var(--space-3);
  padding:
    14px 16px;
  border:
    1px solid
    rgb(255 255 255 / 46%);
  border-radius:
    18px;
  background:
    rgb(255 255 255 / 91%);
  color: var(--secondary-950);
  box-shadow:
    0 20px 52px
    rgb(15 23 42 / 20%),
    inset 0 1px 0
    rgb(255 255 255 / 94%);
  backdrop-filter:
    blur(16px)
    saturate(150%);
}

.about__quality-badge > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background:
    var(--gradient-gold);
  color: #3c2a08;
  font-size: 1.2rem;
  box-shadow:
    0 10px 24px
    rgb(157 112 30 / 22%);
  place-items: center;
}

.about__quality-badge > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.about__quality-badge strong {
  color: var(--secondary-950);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.25;
}

.about__quality-badge small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--neutral-600);
  font-size: 0.69rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* --------------------------------------------------------------------------
   About content
-------------------------------------------------------------------------- */

.about__content {
  min-width: 0;
}

.about__content h2 {
  max-width: 700px;
  margin-top: var(--space-3);
}

.about__description {
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
  margin-top: var(--space-5);
}

.about__description p {
  font-size:
    clamp(
      0.96rem,
      1.35vw,
      1.06rem
    );
  line-height: 1.75;
}

.about__description p:first-child {
  color: var(--text-primary);
  font-size:
    clamp(
      1rem,
      1.5vw,
      1.12rem
    );
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   About highlights
-------------------------------------------------------------------------- */

.about__highlights {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap:
    12px 18px;
  margin-top:
    clamp(
      24px,
      4vw,
      34px
    );
}

.about__highlights li {
  position: relative;
  min-width: 0;
  padding:
    13px 14px 13px 44px;
  border:
    1px solid
    var(--border-subtle);
  border-radius:
    14px;
  background:
    color-mix(
      in srgb,
      var(--surface-soft) 74%,
      transparent
    );
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.45;
}

.about__highlights li::before {
  position: absolute;
  top: 50%;
  left: 13px;
  display: grid;
  width: 22px;
  height: 22px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );
  border-radius: 50%;
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  content: "✓";
  font-size: 0.68rem;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 70%);
  place-items: center;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   About values
-------------------------------------------------------------------------- */

.about__values {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top:
    clamp(
      24px,
      4vw,
      34px
    );
}

.about__values > * {
  position: relative;
  min-width: 0;
  padding:
    16px;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    16px;
  background:
    var(--surface-elevated);
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 70%);
}

.about__values > *::before {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background:
    var(--gradient-primary);
  content: "";
  opacity: 0.75;
}

.about__values strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.3;
}

.about__values p,
.about__values small,
.about__values span {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   About actions
-------------------------------------------------------------------------- */

.about__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:
    clamp(
      16px,
      3vw,
      28px
    );
  margin-top:
    clamp(
      28px,
      4vw,
      42px
    );
}

.about__contact-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding:
    8px 10px;
  border-radius: 16px;
  transition:
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.about__contact-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );
  border-radius: 15px;
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.2rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.about__contact-link > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.about__contact-link small {
  color: var(--text-muted);
  font-size: 0.69rem;
  font-weight: 650;
}

.about__contact-link strong {
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 820;
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .about__contact-link:hover {
    background:
      color-mix(
        in srgb,
        var(--color-primary-soft) 60%,
        transparent
      );
    transform:
      translateY(-2px);
  }

  .about__contact-link:hover
  .about__contact-icon {
    background:
      var(--gradient-primary);
    color: var(--text-inverse);
    transform:
      rotate(-3deg)
      scale(1.04);
  }
}

/* ==========================================================================
   28. WHY US + ABOUT — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .why-us__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.76fr);
    gap: 44px;
  }

  .why-us__items {
    grid-template-columns: 1fr;
  }

  .about__layout {
    grid-template-columns:
      minmax(320px, 0.78fr)
      minmax(0, 1fr);
    gap: 52px;
  }

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

@media (max-width: 900px) {
  .why-us__layout,
  .about__layout {
    grid-template-columns: 1fr;
  }

  .why-us__content {
    max-width: 760px;
  }

  .why-us__media {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .why-us__image-wrap,
  .why-us__image-wrap img {
    min-height:
      clamp(
        420px,
        72vw,
        590px
      );
  }

  .about__media {
    width: min(100%, 680px);
    min-height:
      clamp(
        500px,
        78vw,
        670px
      );
    margin-inline: auto;
  }
}

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

  .why-us__actions,
  .about__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .why-us__actions .button,
  .about__actions .button {
    width: 100%;
  }

  .about__contact-link {
    width: 100%;
    justify-content: flex-start;
    padding: 12px;
    border:
      1px solid
      var(--border-default);
    background:
      var(--surface-soft);
  }

  .about__highlights,
  .about__values {
    grid-template-columns: 1fr;
  }

  .about__media {
    min-height:
      clamp(
        430px,
        110vw,
        580px
      );
    padding-right: 18px;
  }

  .about__image-primary {
    right: 28px;
    bottom: 54px;
  }

  .about__image-secondary {
    width:
      min(
        46vw,
        220px
      );
    border-width: 6px;
  }

  .about__experience {
    top: 20px;
    left: 0;
  }

  .about__quality-badge {
    top: auto;
    right: 10px;
    bottom: 12px;
    max-width:
      min(
        270px,
        78%
      );
  }
}

@media (max-width: 560px) {
  .why-us__media {
    padding:
      8px 4px 46px;
  }

  .why-us__image-wrap,
  .why-us__image-wrap img {
    min-height: 400px;
  }

  .why-us__trust-card {
    right: 2px;
    min-width:
      min(
        240px,
        88%
      );
    padding: 14px 16px;
  }

  .why-us__video-button {
    width: 74px;
    height: 74px;
  }

  .why-us__video-button span {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .about__media {
    min-height: 440px;
    padding: 0 8px 44px 0;
  }

  .about__image-primary {
    right: 18px;
    bottom: 46px;
  }

  .about__image-secondary {
    width: 42%;
  }

  .about__experience {
    min-width: 122px;
    padding: 14px 16px;
  }

  .about__experience strong {
    font-size: 1.7rem;
  }

  .about__quality-badge {
    right: 4px;
    max-width: 250px;
    padding: 12px 13px;
  }
}

/* ==========================================================================
   29. WHY US + ABOUT — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.about__image-primary,
html[data-color-mode="dark"]
.about__image-secondary {
  border-color:
    rgb(255 255 255 / 10%);
  box-shadow:
    0 30px 80px
    rgb(0 0 0 / 38%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.about__image-secondary {
  border-color:
    var(--surface-page);
}

html[data-color-mode="dark"]
.about__experience {
  background:
    rgb(15 29 44 / 90%);
  box-shadow:
    0 22px 56px
    rgb(0 0 0 / 36%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.about__quality-badge {
  border-color:
    rgb(255 255 255 / 12%);
  background:
    rgb(15 29 44 / 92%);
  box-shadow:
    0 22px 58px
    rgb(0 0 0 / 38%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.about__quality-badge strong {
  color: var(--text-primary);
}

html[data-color-mode="dark"]
.about__quality-badge small {
  color: var(--text-muted);
}

html[data-color-mode="dark"]
.about__highlights li,
html[data-color-mode="dark"]
.about__values > *,
html[data-color-mode="dark"]
.about__contact-link {
  background:
    rgb(15 29 44 / 72%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

/* ==========================================================================
   30. WHY US + ABOUT — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .why-us-item,
  .why-us-item::after,
  .why-us-item__icon,
  .why-us__image-wrap,
  .why-us__image-wrap img,
  .why-us__video-button,
  .why-us__video-button::before,
  .why-us__video-button::after,
  .why-us__trust-card,
  .about__image-primary,
  .about__image-primary img,
  .about__image-secondary,
  .about__image-secondary img,
  .about__contact-link,
  .about__contact-icon {
    animation: none !important;
    transition: none !important;
  }

  .why-us-item:hover,
  .why-us__media:hover
  .why-us__image-wrap,
  .why-us__media:hover
  .why-us__image-wrap img,
  .why-us__trust-card:hover,
  .about__media:hover
  .about__image-primary,
  .about__media:hover
  .about__image-primary img,
  .about__media:hover
  .about__image-secondary,
  .about__media:hover
  .about__image-secondary img,
  .about__contact-link:hover {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.why-us-item,
html[data-reduce-motion="true"]
.why-us__image-wrap,
html[data-reduce-motion="true"]
.why-us__video-button,
html[data-reduce-motion="true"]
.why-us__trust-card,
html[data-reduce-motion="true"]
.about__image-primary,
html[data-reduce-motion="true"]
.about__image-secondary,
html[data-reduce-motion="true"]
.about__contact-link {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   31. PROVIDER SEARCH — FINAL PREMIUM VERSION
========================================================================== */

.provider-search {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 6% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgb(59 130 246 / 8%),
      transparent 30%
    ),
    var(--surface-soft);
}

.provider-search::before {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.provider-search__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 0.84fr)
    minmax(420px, 1fr);
  align-items: center;
  gap:
    clamp(
      42px,
      7vw,
      94px
    );
}

/* --------------------------------------------------------------------------
   Provider-search introduction
-------------------------------------------------------------------------- */

.provider-search__introduction {
  min-width: 0;
}

.provider-search__introduction h2 {
  max-width: 700px;
  margin-top: var(--space-3);
}

.provider-search__introduction > p:last-of-type {
  max-width: 650px;
  margin-top: var(--space-5);
  font-size:
    clamp(
      0.96rem,
      1.4vw,
      1.08rem
    );
  line-height: 1.72;
}

.provider-search__benefits {
  display: grid;
  gap: 12px;
  margin-top:
    clamp(
      26px,
      4vw,
      38px
    );
}

.provider-search__benefit {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 16px;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius: 17px;
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 88%,
      transparent
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  backdrop-filter: blur(12px);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.provider-search__benefit::after {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 13%,
        transparent
      ),
      transparent 68%
    );
  content: "";
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.provider-search__benefit > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );
  border-radius: 14px;
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.08rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.provider-search__benefit > div {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 4px;
}

.provider-search__benefit strong {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.3;
}

.provider-search__benefit small {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.48;
}

@media (hover: hover) and (pointer: fine) {
  .provider-search__benefit:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 34%,
        var(--border-default)
      );
    box-shadow:
      0 18px 44px
      rgb(15 23 42 / 10%),
      inset 0 1px 0
      rgb(255 255 255 / 78%);
    transform: translateY(-4px);
  }

  .provider-search__benefit:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  .provider-search__benefit:hover > span {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    transform:
      translateY(-2px)
      rotate(-3deg);
  }
}

/* --------------------------------------------------------------------------
   Provider-search form
-------------------------------------------------------------------------- */

.provider-search__form {
  position: relative;
  overflow: hidden;
  padding:
    clamp(
      24px,
      3.5vw,
      38px
    );
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      22px,
      2.6vw,
      var(--radius-2xl)
    );
  background:
    linear-gradient(
      155deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 97%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 94%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(24px)
    saturate(145%);
}

.provider-search__form::before {
  position: absolute;
  top: -150px;
  right: -130px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 16%,
        transparent
      ),
      transparent 68%
    );
  pointer-events: none;
  content: "";
}

.provider-search__form > * {
  position: relative;
  z-index: 1;
}

.provider-search__form-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom:
    clamp(
      22px,
      3vw,
      30px
    );
}

.provider-search__form-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 18px;
  background:
    var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 1.28rem;
  box-shadow:
    0 14px 34px
    rgb(11 133 121 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 24%);
  place-items: center;
}

.provider-search__form-header > div {
  min-width: 0;
}

.provider-search__form-header h3 {
  font-size:
    clamp(
      1.14rem,
      1.8vw,
      1.42rem
    );
}

.provider-search__form-header p {
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.55;
}

.provider-search__fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Icon form controls */

.form__control-with-icon {
  position: relative;
}

.form__control-with-icon > i {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 2;
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.form__control-with-icon input,
.form__control-with-icon select {
  padding-left: 42px;
}

.form__control-with-icon:focus-within > i {
  color: var(--color-primary);
}

.provider-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.button--ghost {
  border:
    1px solid
    var(--border-default);
  background:
    transparent;
  color: var(--text-secondary);
  box-shadow: none;
}

.button--ghost:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 35%,
      var(--border-default)
    );
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
}

.provider-search__message {
  min-height: 22px;
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 680;
}

.provider-search__message[data-state="success"],
.provider-search__message.is-success {
  color: var(--success-600);
}

.provider-search__message[data-state="error"],
.provider-search__message.is-error {
  color: var(--danger-600);
}

.provider-search__message[data-state="loading"],
.provider-search__message.is-loading {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Provider-search results
-------------------------------------------------------------------------- */

.provider-search__results {
  margin-top:
    clamp(
      38px,
      6vw,
      68px
    );
  padding-top:
    clamp(
      30px,
      4vw,
      46px
    );
  border-top:
    1px solid
    var(--border-default);
}

.provider-search__results-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom:
    clamp(
      22px,
      3vw,
      34px
    );
}

.provider-search__results-header h3 {
  margin-top: 7px;
  font-size:
    clamp(
      1.35rem,
      2.4vw,
      2rem
    );
}

.provider-search__results-count {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 14px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      var(--border-default)
    );
  border-radius: var(--radius-pill);
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 820;
  white-space: nowrap;
}

.provider-search__results-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: var(--homepage-card-gap);
}

/* ==========================================================================
   32. PROVIDERS — FINAL PREMIUM VERSION
========================================================================== */

.providers {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 94% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 88%,
      rgb(59 130 246 / 6%),
      transparent 27%
    ),
    var(--surface-soft);
}

/* --------------------------------------------------------------------------
   Header actions and filters
-------------------------------------------------------------------------- */

.providers__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.providers__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.providers__filter {
  width: auto;
  min-width: 170px;
  min-height: 44px;
  padding:
    9px 36px 9px 13px;
  border:
    1px solid
    var(--border-default);
  border-radius: var(--radius-pill);
  background:
    var(--surface-elevated);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 70%);
  outline: none;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-fast)
    var(--ease-standard),
    color
    var(--duration-fast)
    var(--ease-standard);
}

.providers__filter:hover,
.providers__filter:focus {
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 10%,
      transparent
    );
}

/* --------------------------------------------------------------------------
   Provider grid
-------------------------------------------------------------------------- */

.providers__grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Provider card
-------------------------------------------------------------------------- */

.provider-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

/* Provider media */

.provider-card__media {
  position: relative;
  display: block;
  height:
    clamp(
      275px,
      30vw,
      360px
    );
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--surface-muted),
      var(--color-primary-soft)
    );
}

.provider-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      transparent 44%,
      rgb(2 12 27 / 8%) 64%,
      rgb(2 12 27 / 58%) 100%
    );
  pointer-events: none;
  content: "";
}

.provider-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 16%) 48%,
      transparent 75%
    );
  pointer-events: none;
  content: "";
  transform: translateX(-130%);
  transition:
    transform
    950ms
    var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .provider-card:hover
  .provider-card__media::after {
    transform: translateX(130%);
  }
}

.provider-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Availability badge */

.provider-card__availability {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width:
    calc(100% - 32px);
  padding: 8px 11px;
  border:
    1px solid
    rgb(255 255 255 / 48%);
  border-radius: var(--radius-pill);
  background:
    rgb(255 255 255 / 91%);
  color: var(--success-600);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.2;
  box-shadow:
    0 12px 30px
    rgb(2 12 27 / 22%),
    inset 0 1px 0
    rgb(255 255 255 / 94%);
  backdrop-filter:
    blur(14px)
    saturate(150%);
}

.provider-card__availability i {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Provider card content
-------------------------------------------------------------------------- */

.provider-card__content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding:
    clamp(
      20px,
      2.5vw,
      28px
    );
}

.provider-card__content h3 {
  font-size:
    clamp(
      1.12rem,
      1.7vw,
      1.38rem
    );
}

.provider-card__content h3 a {
  color: var(--text-primary);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.provider-card__content h3 a:hover {
  color: var(--color-primary);
}

.provider-card__specialty {
  margin-top: 7px;
  color: var(--color-primary);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
}

.provider-card__credentials {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.45;
}

.provider-card__department,
.provider-card__location {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.77rem;
  line-height: 1.45;
}

.provider-card__department i,
.provider-card__location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.provider-card__department span,
.provider-card__location span {
  min-width: 0;
}

/* Provider languages */

.provider-card__languages {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--space-3);
}

.provider-card__languages span,
.provider-card__languages small {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border:
    1px solid
    var(--border-subtle);
  border-radius: var(--radius-pill);
  background:
    var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.67rem;
  font-weight: 730;
  line-height: 1;
}

/* Provider actions */

.provider-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top:
    1px solid
    var(--border-subtle);
}

.provider-card__actions
.text-link {
  font-size: 0.82rem;
}

.provider-card__actions
.text-link::after {
  display: none;
}

.provider-card__actions
.text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.provider-card__actions
.text-link:hover i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Provider pagination
-------------------------------------------------------------------------- */

.providers__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top:
    clamp(
      28px,
      4vw,
      42px
    );
}

.providers__pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.providers__pagination-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    var(--border-strong);
  transition:
    width
    var(--duration-normal)
    var(--ease-premium),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.providers__pagination-dots button:hover {
  background:
    var(--color-primary);
  transform: scale(1.12);
}

.providers__pagination-dots button.is-active,
.providers__pagination-dots button[aria-selected="true"] {
  width: 26px;
  border-radius: var(--radius-pill);
  background:
    var(--gradient-primary);
  box-shadow:
    0 6px 16px
    rgb(11 133 121 / 24%);
}

/* ==========================================================================
   33. PROVIDER SEARCH + PROVIDERS — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .provider-search__shell {
    grid-template-columns:
      minmax(0, 0.72fr)
      minmax(390px, 1fr);
    gap: 46px;
  }

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

  .provider-card__media {
    height:
      clamp(
        290px,
        40vw,
        380px
      );
  }
}

@media (max-width: 900px) {
  .provider-search__shell {
    grid-template-columns: 1fr;
  }

  .provider-search__introduction {
    max-width: 760px;
  }

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

  .provider-search__benefit {
    flex-direction: column;
  }

  .providers .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .providers__header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .provider-search__benefits,
  .provider-search__fields,
  .provider-search__results-grid,
  .providers__grid {
    grid-template-columns: 1fr;
  }

  .provider-search__benefit {
    flex-direction: row;
  }

  .provider-search__actions {
    flex-direction: column;
  }

  .provider-search__actions .button {
    width: 100%;
  }

  .provider-search__results-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .providers__header-actions,
  .providers__filters {
    align-items: stretch;
    flex-direction: column;
  }

  .providers__header-actions,
  .providers__filters,
  .providers__filter,
  .providers__header-actions .button {
    width: 100%;
  }

  .provider-card__media {
    height:
      clamp(
        300px,
        110vw,
        430px
      );
  }
}

@media (max-width: 480px) {
  .provider-search__form {
    padding: 20px;
    border-radius: var(--radius-lg);
  }

  .provider-search__form-header {
    align-items: center;
  }

  .provider-search__form-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 15px;
  }

  .provider-card {
    border-radius: var(--radius-lg);
  }

  .provider-card__media {
    height: 320px;
  }

  .provider-card__content {
    padding: 20px;
  }

  .provider-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .provider-card__actions
  .button {
    width: 100%;
  }
}

/* ==========================================================================
   34. PROVIDER SEARCH + PROVIDERS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.provider-search__form {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 97%),
      rgb(10 25 39 / 95%)
    );
  box-shadow:
    0 28px 80px
    rgb(0 0 0 / 35%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.provider-search__benefit {
  background:
    rgb(15 29 44 / 74%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.provider-card__availability {
  border-color:
    rgb(255 255 255 / 12%);
  background:
    rgb(12 29 42 / 90%);
  color: #6ee7b7;
  box-shadow:
    0 14px 34px
    rgb(0 0 0 / 38%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.providers__filter {
  background:
    rgb(15 29 44 / 88%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.provider-card__languages span,
html[data-color-mode="dark"]
.provider-card__languages small {
  background:
    rgb(255 255 255 / 5%);
}

/* ==========================================================================
   35. PROVIDER SEARCH + PROVIDERS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .provider-search__benefit,
  .provider-search__benefit::after,
  .provider-search__benefit > span,
  .provider-card,
  .provider-card img,
  .provider-card__media::after,
  .provider-card__actions i,
  .providers__pagination-dots button {
    animation: none !important;
    transition: none !important;
  }

  .provider-search__benefit:hover,
  .provider-card:hover,
  .provider-card:hover img {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.provider-search__benefit,
html[data-reduce-motion="true"]
.provider-card,
html[data-reduce-motion="true"]
.provider-card img,
html[data-reduce-motion="true"]
.provider-card__media::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   36. STATISTICS — FINAL PREMIUM VERSION
========================================================================== */

.statistics {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--text-inverse);
  background:
    radial-gradient(
      circle at 8% 16%,
      rgb(22 166 148 / 25%),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(59 130 246 / 18%),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--secondary-900),
      var(--secondary-950) 70%
    );
}

.statistics::before,
.statistics::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.statistics::before {
  top: -240px;
  left: -180px;
  width: 560px;
  height: 560px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 26%),
      transparent 70%
    );
  filter: blur(8px);
}

.statistics::after {
  right: -220px;
  bottom: -280px;
  width: 620px;
  height: 620px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 18%),
      transparent 70%
    );
  filter: blur(10px);
}

.statistics .section-heading h2 {
  color: var(--text-inverse);
}

.statistics .section-heading > p:last-child {
  color: rgb(255 255 255 / 68%);
}

/* --------------------------------------------------------------------------
   Statistics grid
-------------------------------------------------------------------------- */

.statistics__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap:
    clamp(
      16px,
      2.2vw,
      26px
    );
  margin-top:
    clamp(
      34px,
      5vw,
      52px
    );
}

/* --------------------------------------------------------------------------
   Statistic card
-------------------------------------------------------------------------- */

.statistic-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 210px;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding:
    clamp(
      24px,
      3vw,
      34px
    );
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 13%);
  border-radius:
    clamp(
      20px,
      2vw,
      28px
    );
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 8%),
      rgb(255 255 255 / 4%)
    );
  box-shadow:
    0 18px 48px
    rgb(0 0 0 / 18%),
    inset 0 1px 0
    rgb(255 255 255 / 9%);
  text-align: center;
  backdrop-filter:
    blur(16px)
    saturate(135%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.statistic-card::before {
  position: absolute;
  top: -95px;
  right: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(150 241 228 / 16%),
      transparent 68%
    );
  content: "";
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.statistic-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #96f1e4,
      transparent
    );
  content: "";
  opacity: 0.76;
}

.statistic-card > * {
  position: relative;
  z-index: 1;
}

.statistic-card__icon {
  display: grid;
  width: 58px;
  height: 58px;
  border:
    1px solid
    rgb(150 241 228 / 22%);
  border-radius: 18px;
  background:
    rgb(150 241 228 / 10%);
  color: #96f1e4;
  font-size: 1.36rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 9%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.statistic-card strong {
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size:
    clamp(
      2rem,
      4vw,
      3.4rem
    );
  font-weight: 920;
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow:
    0 12px 34px
    rgb(0 0 0 / 22%);
}

.statistic-card > span:last-child {
  max-width: 190px;
  color: rgb(255 255 255 / 67%);
  font-size: 0.79rem;
  font-weight: 720;
  line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
  .statistic-card:hover {
    border-color:
      rgb(150 241 228 / 28%);
    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 11%),
        rgb(22 166 148 / 8%)
      );
    box-shadow:
      0 26px 66px
      rgb(0 0 0 / 25%),
      inset 0 1px 0
      rgb(255 255 255 / 12%);
    transform: translateY(-7px);
  }

  .statistic-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .statistic-card:hover
  .statistic-card__icon {
    background:
      linear-gradient(
        145deg,
        #96f1e4,
        #3cc6b0
      );
    color: var(--secondary-950);
    box-shadow:
      0 14px 34px
      rgb(22 166 148 / 22%);
    transform:
      translateY(-3px)
      rotate(-4deg)
      scale(1.05);
  }
}

/* --------------------------------------------------------------------------
   Statistics counter loading state
-------------------------------------------------------------------------- */

.statistic-card.is-counting strong {
  opacity: 0.75;
}

.statistic-card.is-loading {
  pointer-events: none;
}

.statistic-card.is-loading strong,
.statistic-card.is-loading > span:last-child {
  position: relative;
  overflow: hidden;
  color: transparent;
  border-radius: 8px;
  background:
    rgb(255 255 255 / 10%);
}

.statistic-card.is-loading strong {
  width: 110px;
  height: 42px;
}

.statistic-card.is-loading > span:last-child {
  width: 145px;
  height: 18px;
}

.statistic-card.is-loading strong::after,
.statistic-card.is-loading > span:last-child::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 18%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    statistics-shimmer
    1.45s linear infinite;
  transform: translateX(-120%);
}

@keyframes statistics-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ==========================================================================
   37. ACCREDITATIONS — FINAL PREMIUM VERSION
========================================================================== */

.accreditations {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 92% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 6% 88%,
      rgb(157 112 30 / 7%),
      transparent 26%
    ),
    var(--surface-page);
}

.accreditations::before {
  position: absolute;
  top: 15%;
  left: -170px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Accreditation controls
-------------------------------------------------------------------------- */

.accreditations__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Accreditation viewport
-------------------------------------------------------------------------- */

.accreditations__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block:
    8px 22px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 24px,
      black calc(100% - 24px),
      transparent
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 24px,
      black calc(100% - 24px),
      transparent
    );
}

.accreditations__track {
  display: flex;
  gap: var(--homepage-card-gap);
  will-change: transform;
  transition:
    transform
    540ms
    var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Accreditation card
-------------------------------------------------------------------------- */

.accreditation-card {
  min-width:
    min(
      380px,
      calc(
        (100vw - 92px) / 3
      )
    );
  flex:
    0 0
    min(
      380px,
      calc(
        (100vw - 92px) / 3
      )
    );
  display: grid;
  grid-template-columns:
    94px minmax(0, 1fr) auto;
  align-items: center;
  gap:
    clamp(
      16px,
      2vw,
      22px
    );
  min-height: 180px;
  padding:
    clamp(
      20px,
      2.6vw,
      28px
    );
  overflow: hidden;
}

/* Accreditation logo */

.accreditation-card__logo {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      #fff,
      var(--neutral-50)
    );
  box-shadow:
    0 12px 30px
    rgb(15 23 42 / 10%),
    inset 0 1px 0
    rgb(255 255 255 / 92%);
  place-items: center;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.accreditation-card__logo::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 24%);
  pointer-events: none;
  content: "";
}

.accreditation-card__logo img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter:
    saturate(0.96)
    contrast(1.02);
}

/* Accreditation content */

.accreditation-card > div:nth-child(2) {
  min-width: 0;
}

.accreditation-card h3 {
  font-size:
    clamp(
      1rem,
      1.55vw,
      1.22rem
    );
  line-height: 1.32;
}

.accreditation-card p {
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.accreditation-card
[data-accreditation-year] {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-top: 10px;
  padding: 5px 9px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--warning-500) 24%,
      transparent
    );
  border-radius: var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--warning-50) 88%,
      transparent
    );
  color: var(--warning-700);
  font-size: 0.67rem;
  font-weight: 820;
  line-height: 1;
}

/* External accreditation link */

.accreditation-card__link {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border:
    1px solid
    var(--border-default);
  border-radius: 13px;
  background:
    var(--surface-soft);
  color: var(--text-muted);
  font-size: 1rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 68%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .accreditation-card:hover
  .accreditation-card__logo {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 36%,
        var(--border-default)
      );
    box-shadow:
      0 18px 42px
      rgb(15 23 42 / 14%),
      inset 0 1px 0
      rgb(255 255 255 / 94%);
    transform:
      translateY(-3px)
      rotate(-2deg);
  }

  .accreditation-card__link:hover {
    border-color: var(--color-primary);
    background: var(--gradient-primary);
    color: var(--text-inverse);
    box-shadow:
      0 12px 28px
      rgb(11 133 121 / 24%);
    transform:
      translate(2px, -2px);
  }
}

/* --------------------------------------------------------------------------
   Accreditation loading state
-------------------------------------------------------------------------- */

.accreditation-card.is-loading {
  pointer-events: none;
}

.accreditation-card.is-loading
.accreditation-card__logo,
.accreditation-card.is-loading h3,
.accreditation-card.is-loading p {
  position: relative;
  overflow: hidden;
  background:
    var(--surface-muted);
  color: transparent;
}

.accreditation-card.is-loading h3 {
  width: 78%;
  height: 20px;
  border-radius: 7px;
}

.accreditation-card.is-loading p {
  width: 92%;
  height: 42px;
  border-radius: 7px;
}

.accreditation-card.is-loading
.accreditation-card__logo::before,
.accreditation-card.is-loading h3::after,
.accreditation-card.is-loading p::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 68%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    accreditation-shimmer
    1.45s linear infinite;
  transform: translateX(-120%);
}

@keyframes accreditation-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ==========================================================================
   38. STATISTICS + ACCREDITATIONS — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .statistics__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .accreditation-card {
    min-width:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );
    flex-basis:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );
  }
}

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

  .statistic-card {
    min-height: 180px;
  }

  .accreditations .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .accreditations__controls {
    align-self: stretch;
    justify-content: flex-end;
  }

  .accreditations__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .accreditation-card {
    min-width:
      min(
        88vw,
        380px
      );
    flex-basis:
      min(
        88vw,
        380px
      );
  }
}

@media (max-width: 520px) {
  .statistic-card {
    min-height: 168px;
    border-radius: var(--radius-lg);
  }

  .statistic-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .accreditation-card {
    min-width:
      calc(100vw - 62px);
    flex-basis:
      calc(100vw - 62px);
    grid-template-columns:
      76px minmax(0, 1fr);
    min-height: 160px;
    padding: 18px;
  }

  .accreditation-card__logo {
    width: 76px;
    height: 76px;
    border-radius: 17px;
  }

  .accreditation-card__link {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   39. STATISTICS + ACCREDITATIONS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.accreditation-card__logo {
  border-color:
    rgb(255 255 255 / 10%);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 96%),
      rgb(226 232 240 / 92%)
    );
  box-shadow:
    0 14px 34px
    rgb(0 0 0 / 30%),
    inset 0 1px 0
    rgb(255 255 255 / 88%);
}

html[data-color-mode="dark"]
.accreditation-card__link {
  background:
    rgb(255 255 255 / 5%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.accreditation-card
[data-accreditation-year] {
  border-color:
    rgb(245 158 11 / 24%);
  background:
    rgb(245 158 11 / 10%);
  color: #fcd34d;
}

/* ==========================================================================
   40. STATISTICS + ACCREDITATIONS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .statistic-card,
  .statistic-card::before,
  .statistic-card__icon,
  .accreditations__track,
  .accreditation-card,
  .accreditation-card__logo,
  .accreditation-card__link {
    animation: none !important;
    transition: none !important;
  }

  .statistic-card:hover,
  .accreditation-card:hover,
  .accreditation-card:hover
  .accreditation-card__logo,
  .accreditation-card__link:hover {
    transform: none !important;
  }

  .statistic-card.is-loading strong::after,
  .statistic-card.is-loading > span:last-child::after,
  .accreditation-card.is-loading
  .accreditation-card__logo::before,
  .accreditation-card.is-loading h3::after,
  .accreditation-card.is-loading p::after {
    animation: none !important;
  }
}

html[data-reduce-motion="true"]
.statistic-card,
html[data-reduce-motion="true"]
.accreditations__track,
html[data-reduce-motion="true"]
.accreditation-card,
html[data-reduce-motion="true"]
.accreditation-card__logo {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   41. INSURANCE — FINAL PREMIUM VERSION
========================================================================== */

.insurance {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 92% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 29%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgb(59 130 246 / 7%),
      transparent 28%
    ),
    var(--surface-soft);
}

.insurance::before {
  position: absolute;
  top: -180px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Insurance heading
-------------------------------------------------------------------------- */

.insurance .section-heading {
  position: relative;
  z-index: 1;
}

.insurance .section-heading > p:last-child {
  max-width: 760px;
}

/* --------------------------------------------------------------------------
   Insurance search
-------------------------------------------------------------------------- */

.insurance__search-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin:
    clamp(
      28px,
      4vw,
      42px
    )
    auto
    clamp(
      26px,
      4vw,
      40px
    );
}

.insurance__search {
  position: relative;
  width:
    min(
      100%,
      560px
    );
}

.insurance__search > i {
  position: absolute;
  top: 50%;
  left: 18px;
  z-index: 2;
  color: var(--text-muted);
  font-size: 1.05rem;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.insurance__search input {
  width: 100%;
  min-height: 54px;
  padding:
    13px
    52px
    13px
    48px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 94%,
      transparent
    );
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 620;
  box-shadow:
    0 12px 34px
    rgb(15 23 42 / 8%),
    inset 0 1px 0
    rgb(255 255 255 / 76%);
  outline: none;
  backdrop-filter:
    blur(14px)
    saturate(130%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium);
}

.insurance__search input::placeholder {
  color: var(--text-muted);
  opacity: 0.86;
}

.insurance__search input:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 32%,
      var(--border-default)
    );
}

.insurance__search input:focus {
  border-color: var(--color-primary);
  background: var(--surface-elevated);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 12%,
      transparent
    ),
    0 18px 46px
    rgb(15 23 42 / 11%),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
}

.insurance__search:focus-within > i {
  color: var(--color-primary);
}

/* Search clear button */

.insurance__search-clear {
  position: absolute;
  top: 50%;
  right: 9px;
  z-index: 3;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    var(--surface-muted);
  color: var(--text-muted);
  font-size: 1rem;
  place-items: center;
  transform: translateY(-50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.insurance__search-clear:hover {
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow:
    0 8px 20px
    color-mix(
      in srgb,
      var(--color-primary) 14%,
      transparent
    );
  transform:
    translateY(-50%)
    scale(1.05);
}

/* --------------------------------------------------------------------------
   Insurance grid
-------------------------------------------------------------------------- */

.insurance__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap:
    clamp(
      16px,
      2vw,
      24px
    );
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Insurance card
-------------------------------------------------------------------------- */

.insurance-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding:
    clamp(
      20px,
      2.5vw,
      28px
    );
  text-align: center;
}

.insurance-card::before {
  top: -100px;
  right: -90px;
}

/* Insurance logo */

.insurance-card__logo {
  position: relative;
  display: grid;
  width: 100%;
  height: 92px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border:
    1px solid
    var(--border-subtle);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #fff,
      var(--neutral-50)
    );
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 92%);
  place-items: center;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.insurance-card__logo::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 22%);
  pointer-events: none;
  content: "";
}

.insurance-card__logo img {
  width: 76%;
  height: 66%;
  object-fit: contain;
  filter:
    saturate(0.95)
    contrast(1.015);
}

/* Insurance content */

.insurance-card h3 {
  font-size:
    clamp(
      0.98rem,
      1.45vw,
      1.14rem
    );
  line-height: 1.35;
}

.insurance-card
[data-insurance-description] {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Insurance status */

.insurance-card__status {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding:
    6px 10px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--success-500) 24%,
      transparent
    );
  border-radius: var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--success-50) 88%,
      transparent
    );
  color: var(--success-600);
  font-size: 0.67rem;
  font-weight: 820;
  line-height: 1.1;
}

.insurance-card__status::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      currentColor 13%,
      transparent
    );
  content: "";
}

/* Optional status variants */

.insurance-card__status[data-status="pending"],
.insurance-card__status.is-pending {
  border-color:
    color-mix(
      in srgb,
      var(--warning-500) 25%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--warning-50) 88%,
      transparent
    );
  color: var(--warning-700);
}

.insurance-card__status[data-status="inactive"],
.insurance-card__status.is-inactive {
  border-color:
    color-mix(
      in srgb,
      var(--neutral-400) 32%,
      transparent
    );
  background:
    var(--surface-muted);
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .insurance-card:hover
  .insurance-card__logo {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 32%,
        var(--border-default)
      );
    box-shadow:
      0 15px 36px
      rgb(15 23 42 / 12%),
      inset 0 1px 0
      rgb(255 255 255 / 94%);
    transform:
      translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   Insurance footer
-------------------------------------------------------------------------- */

.insurance__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(
      20px,
      4vw,
      42px
    );
  margin-top:
    clamp(
      30px,
      5vw,
      48px
    );
  padding:
    clamp(
      20px,
      3vw,
      28px
    );
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-xl);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 90%,
      transparent
    );
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  backdrop-filter:
    blur(14px);
}

.insurance__footer p {
  max-width: 800px;
  color: var(--text-muted);
  font-size: 0.79rem;
  line-height: 1.58;
}

.insurance__footer .button {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Insurance loading skeleton
-------------------------------------------------------------------------- */

.insurance-card.is-loading {
  pointer-events: none;
}

.insurance-card.is-loading
.insurance-card__logo,
.insurance-card.is-loading h3,
.insurance-card.is-loading p {
  position: relative;
  overflow: hidden;
  background:
    var(--surface-muted);
  color: transparent;
}

.insurance-card.is-loading h3 {
  width: 76%;
  height: 19px;
  margin-inline: auto;
  border-radius: 7px;
}

.insurance-card.is-loading p {
  width: 90%;
  height: 40px;
  border-radius: 7px;
}

.insurance-card.is-loading
.insurance-card__logo::before,
.insurance-card.is-loading h3::after,
.insurance-card.is-loading p::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 68%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    insurance-shimmer
    1.45s linear infinite;
  transform: translateX(-120%);
}

@keyframes insurance-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ==========================================================================
   42. PARTNERS — FINAL PREMIUM VERSION
========================================================================== */

.partners {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 10% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 7%,
        transparent
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 88%,
      rgb(59 130 246 / 5%),
      transparent 28%
    ),
    var(--surface-page);
}

.partners .section-heading {
  margin-bottom:
    clamp(
      28px,
      4vw,
      42px
    );
}

/* --------------------------------------------------------------------------
   Partner marquee
-------------------------------------------------------------------------- */

.partners__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block:
    12px 24px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 7%,
      black 93%,
      transparent
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 7%,
      black 93%,
      transparent
    );
}

.partners__marquee::before,
.partners__marquee::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width:
    clamp(
      34px,
      7vw,
      96px
    );
  pointer-events: none;
  content: "";
}

.partners__marquee::before {
  left: 0;
  background:
    linear-gradient(
      90deg,
      var(--surface-page),
      transparent
    );
}

.partners__marquee::after {
  right: 0;
  background:
    linear-gradient(
      -90deg,
      var(--surface-page),
      transparent
    );
}

.partners__track {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap:
    clamp(
      16px,
      2vw,
      24px
    );
  will-change: transform;
}

/* Apply automatic movement only if JS adds this state */

.partners__marquee.is-animated
.partners__track,
.partners__track.is-animated {
  animation:
    partners-marquee-scroll
    var(
      --partners-marquee-duration,
      36s
    )
    linear
    infinite;
}

.partners__marquee:hover
.partners__track,
.partners__marquee:focus-within
.partners__track {
  animation-play-state: paused;
}

@keyframes partners-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform:
      translateX(
        calc(
          -50% -
          (var(--homepage-card-gap) / 2)
        )
      );
  }
}

/* --------------------------------------------------------------------------
   Partner card
-------------------------------------------------------------------------- */

.partner-card {
  position: relative;
  display: grid;
  width:
    clamp(
      180px,
      18vw,
      250px
    );
  min-height: 132px;
  flex:
    0 0
    clamp(
      180px,
      18vw,
      250px
    );
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding:
    20px 22px;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-xl);
  background:
    linear-gradient(
      150deg,
      var(--surface-elevated),
      color-mix(
        in srgb,
        var(--surface-card) 94%,
        var(--color-primary-soft)
      )
    );
  color: var(--text-primary);
  box-shadow:
    0 8px 28px
    rgb(15 23 42 / 7%),
    inset 0 1px 0
    rgb(255 255 255 / 76%);
  text-align: center;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.partner-card::before {
  position: absolute;
  top: -85px;
  right: -75px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 12%,
        transparent
      ),
      transparent 68%
    );
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.partner-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background:
    var(--gradient-primary);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.partner-card img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 62px;
  object-fit: contain;
  filter:
    grayscale(1)
    saturate(0)
    opacity(0.72);
  transition:
    filter
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.partner-card
[data-partner-name] {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .partner-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 36%,
        var(--border-default)
      );
    box-shadow:
      0 22px 56px
      rgb(15 23 42 / 13%),
      inset 0 1px 0
      rgb(255 255 255 / 82%);
    transform: translateY(-6px);
  }

  .partner-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .partner-card:hover::after {
    transform: scaleX(1);
  }

  .partner-card:hover img {
    filter:
      grayscale(0)
      saturate(1)
      opacity(1);
    transform: scale(1.045);
  }
}

/* Non-clickable partner compatibility */

.partner-card:not([href]),
.partner-card[href=""],
.partner-card[href="#"] {
  cursor: default;
}

/* ==========================================================================
   43. INSURANCE + PARTNERS — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .insurance__grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

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

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

@media (max-width: 767px) {
  .insurance__search {
    width: 100%;
  }

  .insurance__grid {
    grid-template-columns: 1fr;
  }

  .insurance-card {
    display: grid;
    min-height: 0;
    grid-template-columns:
      110px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap:
      6px 18px;
    text-align: left;
  }

  .insurance-card__logo {
    grid-row:
      1 / span 3;
    width: 110px;
    height: 88px;
    margin: 0;
  }

  .insurance-card__status {
    margin-top: 4px;
  }

  .insurance__footer .button {
    width: 100%;
  }

  .partners__marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .partners__marquee::before,
  .partners__marquee::after {
    display: none;
  }

  .partner-card {
    width:
      min(
        66vw,
        230px
      );
    flex-basis:
      min(
        66vw,
        230px
      );
  }
}

@media (max-width: 480px) {
  .insurance__search input {
    min-height: 50px;
    padding-left: 44px;
  }

  .insurance-card {
    grid-template-columns:
      86px minmax(0, 1fr);
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  .insurance-card__logo {
    width: 86px;
    height: 76px;
    border-radius: 14px;
  }

  .insurance__footer {
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  .partner-card {
    width:
      calc(100vw - 100px);
    min-height: 120px;
    flex-basis:
      calc(100vw - 100px);
    border-radius: var(--radius-lg);
  }
}

/* ==========================================================================
   44. INSURANCE + PARTNERS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.insurance__search input {
  background:
    rgb(15 29 44 / 88%);
  box-shadow:
    0 14px 38px
    rgb(0 0 0 / 25%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.insurance-card__logo,
html[data-color-mode="dark"]
.partner-card img {
  filter: none;
}

html[data-color-mode="dark"]
.insurance-card__logo {
  border-color:
    rgb(255 255 255 / 10%);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 97%),
      rgb(226 232 240 / 92%)
    );
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 88%);
}

html[data-color-mode="dark"]
.insurance-card__status {
  border-color:
    rgb(16 185 129 / 26%);
  background:
    rgb(5 150 105 / 11%);
  color: #6ee7b7;
}

html[data-color-mode="dark"]
.insurance-card__status[data-status="pending"],
html[data-color-mode="dark"]
.insurance-card__status.is-pending {
  border-color:
    rgb(245 158 11 / 24%);
  background:
    rgb(245 158 11 / 10%);
  color: #fcd34d;
}

html[data-color-mode="dark"]
.insurance__footer {
  background:
    rgb(15 29 44 / 78%);
  box-shadow:
    0 18px 48px
    rgb(0 0 0 / 28%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.partner-card {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 12px 36px
    rgb(0 0 0 / 27%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.partner-card img {
  filter:
    grayscale(1)
    saturate(0)
    brightness(1.15)
    opacity(0.72);
}

@media (hover: hover) and (pointer: fine) {
  html[data-color-mode="dark"]
  .partner-card:hover img {
    filter:
      grayscale(0)
      saturate(1)
      brightness(1.05)
      opacity(1);
  }
}

/* ==========================================================================
   45. INSURANCE + PARTNERS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .insurance__search input,
  .insurance__search-clear,
  .insurance-card,
  .insurance-card__logo,
  .partners__track,
  .partner-card,
  .partner-card::before,
  .partner-card::after,
  .partner-card img {
    animation: none !important;
    transition: none !important;
  }

  .insurance-card:hover,
  .insurance-card:hover
  .insurance-card__logo,
  .partner-card:hover,
  .partner-card:hover img {
    transform: none !important;
  }

  .insurance-card.is-loading
  .insurance-card__logo::before,
  .insurance-card.is-loading h3::after,
  .insurance-card.is-loading p::after {
    animation: none !important;
  }
}

html[data-reduce-motion="true"]
.insurance-card,
html[data-reduce-motion="true"]
.insurance-card__logo,
html[data-reduce-motion="true"]
.partners__track,
html[data-reduce-motion="true"]
.partner-card,
html[data-reduce-motion="true"]
.partner-card img {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
/* ==========================================================================
   46. SECURE PORTAL — FINAL PREMIUM VERSION
========================================================================== */

.portal-promotion {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color: var(--text-inverse);
  background:
    radial-gradient(
      circle at 8% 12%,
      rgb(22 166 148 / 29%),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 84%,
      rgb(59 130 246 / 20%),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--secondary-900),
      var(--secondary-950) 72%
    );
}

.portal-promotion::before,
.portal-promotion::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(10px);
}

.portal-promotion::before {
  top: -260px;
  left: -190px;
  width: 620px;
  height: 620px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 29%),
      transparent 70%
    );
}

.portal-promotion::after {
  right: -250px;
  bottom: -300px;
  width: 680px;
  height: 680px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 20%),
      transparent 70%
    );
}

/* --------------------------------------------------------------------------
   Portal shell
-------------------------------------------------------------------------- */

.portal-promotion__shell {
  position: relative;
  display: grid;
  min-height:
    clamp(
      560px,
      65vw,
      760px
    );
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 1fr);
  align-items: center;
  gap:
    clamp(
      46px,
      7vw,
      96px
    );
  overflow: hidden;
  padding:
    clamp(
      34px,
      5vw,
      68px
    );
  border:
    1px solid
    rgb(255 255 255 / 14%);
  border-radius:
    clamp(
      26px,
      3vw,
      42px
    );
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 8%),
      rgb(255 255 255 / 4%)
    );
  box-shadow:
    0 38px 110px
    rgb(0 0 0 / 30%),
    inset 0 1px 0
    rgb(255 255 255 / 10%);
  backdrop-filter:
    blur(18px)
    saturate(140%);
}

.portal-promotion__shell::before {
  position: absolute;
  top: -190px;
  right: -150px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(150 241 228 / 14%),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.portal-promotion__shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 6%);
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Portal content
-------------------------------------------------------------------------- */

.portal-promotion__content {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.portal-promotion__content h2 {
  max-width: 700px;
  margin-top: var(--space-3);
  color: var(--text-inverse);
  text-shadow:
    0 14px 40px
    rgb(0 0 0 / 30%);
}

.portal-promotion__content >
p:not(.eyebrow) {
  max-width: 690px;
  margin-top: var(--space-5);
  color: rgb(255 255 255 / 70%);
  font-size:
    clamp(
      0.98rem,
      1.45vw,
      1.1rem
    );
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Portal feature list
-------------------------------------------------------------------------- */

.portal-promotion__features {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top:
    clamp(
      26px,
      4vw,
      38px
    );
}

.portal-promotion__features li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding:
    12px 14px;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 11%);
  border-radius: 14px;
  background:
    rgb(255 255 255 / 5%);
  color: rgb(255 255 255 / 78%);
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.45;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 7%);
  backdrop-filter: blur(10px);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.portal-promotion__features li::after {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(150 241 228 / 13%),
      transparent 68%
    );
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.portal-promotion__features li i {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 2px;
  color: #96f1e4;
  font-size: 1rem;
}

.portal-promotion__features li span {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .portal-promotion__features li:hover {
    border-color:
      rgb(150 241 228 / 25%);
    background:
      rgb(255 255 255 / 8%);
    transform: translateY(-3px);
  }

  .portal-promotion__features li:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Portal actions
-------------------------------------------------------------------------- */

.portal-promotion__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top:
    clamp(
      30px,
      4vw,
      44px
    );
}

.portal-promotion__actions
.button--light {
  color: var(--secondary-950);
  box-shadow:
    0 18px 40px
    rgb(0 0 0 / 22%);
}

.portal-promotion__actions
.button--light:hover {
  box-shadow:
    0 24px 54px
    rgb(0 0 0 / 30%);
}

.portal-promotion__actions
.button--transparent i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.portal-promotion__actions
.button--transparent:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   47. PORTAL DEVICE ILLUSTRATION
========================================================================== */

.portal-promotion__media {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height:
    clamp(
      430px,
      45vw,
      590px
    );
  perspective: 1400px;
}

/* --------------------------------------------------------------------------
   Main device
-------------------------------------------------------------------------- */

.portal-device {
  position: absolute;
  inset: 50% auto auto 50%;
  width:
    min(
      100%,
      590px
    );
  transform:
    translate(-47%, -50%)
    rotateY(-7deg)
    rotateX(2deg);
  transform-style: preserve-3d;
  transition:
    transform
    800ms
    var(--ease-premium);
}

.portal-device::before {
  position: absolute;
  right: 5%;
  bottom: -55px;
  left: 5%;
  height: 72px;
  border-radius: 50%;
  background:
    rgb(0 0 0 / 34%);
  content: "";
  filter: blur(24px);
  transform: rotateX(72deg);
}

@media (hover: hover) and (pointer: fine) {
  .portal-promotion__media:hover
  .portal-device {
    transform:
      translate(-47%, -52%)
      rotateY(-2deg)
      rotateX(0)
      scale(1.018);
  }
}

/* --------------------------------------------------------------------------
   Browser frame
-------------------------------------------------------------------------- */

.portal-device__browser {
  position: relative;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 24%);
  border-radius:
    clamp(
      20px,
      2.4vw,
      30px
    );
  background:
    rgb(239 247 248 / 98%);
  box-shadow:
    0 42px 100px
    rgb(0 0 0 / 42%),
    inset 0 1px 0
    rgb(255 255 255 / 94%);
}

.portal-device__browser::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 22%);
  pointer-events: none;
  content: "";
}

/* Browser bar */

.portal-device__browser-bar {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 7px;
  padding-inline: 17px;
  border-bottom:
    1px solid
    rgb(15 23 42 / 7%);
  background:
    linear-gradient(
      180deg,
      #fff,
      #f4f8f9
    );
}

.portal-device__browser-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px
    rgb(255 255 255 / 36%);
}

.portal-device__browser-bar
span:nth-child(1) {
  background: #ef6b65;
}

.portal-device__browser-bar
span:nth-child(2) {
  background: #f2c054;
}

.portal-device__browser-bar
span:nth-child(3) {
  background: #53c57b;
}

/* --------------------------------------------------------------------------
   Portal screen
-------------------------------------------------------------------------- */

.portal-device__screen {
  display: grid;
  min-height:
    clamp(
      360px,
      38vw,
      475px
    );
  grid-template-columns:
    86px minmax(0, 1fr);
  background:
    linear-gradient(
      145deg,
      #f5fafb,
      #eaf3f4
    );
}

/* Sidebar */

.portal-device__sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding:
    28px 16px;
  background:
    linear-gradient(
      180deg,
      var(--primary-700),
      var(--primary-900)
    );
}

.portal-device__sidebar::before {
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border:
    2px solid
    rgb(255 255 255 / 28%);
  border-radius: 13px;
  background:
    rgb(255 255 255 / 13%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 16%);
  content: "";
}

.portal-device__sidebar span {
  width: 32px;
  height: 8px;
  border-radius: var(--radius-pill);
  background:
    rgb(255 255 255 / 18%);
}

.portal-device__sidebar
span:first-of-type {
  width: 38px;
  height: 34px;
  border:
    1px solid
    rgb(255 255 255 / 18%);
  border-radius: 11px;
  background:
    rgb(255 255 255 / 16%);
}

/* --------------------------------------------------------------------------
   Portal device content
-------------------------------------------------------------------------- */

.portal-device__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 22px;
  padding:
    clamp(
      22px,
      3vw,
      34px
    );
}

/* User profile */

.portal-device__profile {
  display: flex;
  align-items: center;
  gap: 13px;
}

.portal-device__profile > span {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      var(--primary-200),
      var(--primary-400)
    );
  box-shadow:
    0 10px 24px
    rgb(22 166 148 / 22%);
}

.portal-device__profile > div {
  display: grid;
  flex: 1 1 auto;
  gap: 7px;
}

.portal-device__profile b,
.portal-device__profile small {
  display: block;
  border-radius: var(--radius-pill);
  background:
    var(--neutral-300);
}

.portal-device__profile b {
  width: 44%;
  height: 11px;
}

.portal-device__profile small {
  width: 28%;
  height: 7px;
  background:
    var(--neutral-200);
}

/* Dashboard summary cards */

.portal-device__cards {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.portal-device__cards span {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  border:
    1px solid
    rgb(15 23 42 / 6%);
  border-radius: 16px;
  background:
    #fff;
  box-shadow:
    0 10px 28px
    rgb(15 23 42 / 7%);
}

.portal-device__cards span::before {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background:
    var(--primary-100);
  content: "";
}

.portal-device__cards span::after {
  position: absolute;
  right: 15px;
  bottom: 17px;
  left: 15px;
  height: 8px;
  border-radius: var(--radius-pill);
  background:
    var(--neutral-200);
  content: "";
}

.portal-device__cards
span:nth-child(2)::before {
  background:
    var(--info-100);
}

.portal-device__cards
span:nth-child(3)::before {
  background:
    var(--warning-100);
}

/* Chart */

.portal-device__chart {
  position: relative;
  min-height:
    clamp(
      145px,
      15vw,
      190px
    );
  overflow: hidden;
  border:
    1px solid
    rgb(15 23 42 / 6%);
  border-radius: 18px;
  background:
    #fff;
  box-shadow:
    0 12px 30px
    rgb(15 23 42 / 7%);
}

.portal-device__chart::before {
  position: absolute;
  inset: 22px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 29px,
      rgb(15 23 42 / 6%) 30px
    );
  content: "";
}

.portal-device__chart span {
  position: absolute;
  right: 22px;
  bottom: 26px;
  left: 22px;
  height: 68%;
  overflow: hidden;
}

.portal-device__chart span::before {
  position: absolute;
  inset: 16% 0 0;
  background:
    linear-gradient(
      180deg,
      rgb(22 166 148 / 22%),
      rgb(22 166 148 / 3%)
    );
  clip-path:
    polygon(
      0 74%,
      12% 54%,
      25% 68%,
      39% 28%,
      51% 42%,
      65% 14%,
      78% 35%,
      91% 6%,
      100% 18%,
      100% 100%,
      0 100%
    );
  content: "";
}

.portal-device__chart span::after {
  position: absolute;
  inset: 16% 0 auto;
  height: 3px;
  background:
    var(--color-primary);
  clip-path:
    polygon(
      0 72%,
      12% 51%,
      25% 65%,
      39% 25%,
      51% 39%,
      65% 11%,
      78% 32%,
      91% 3%,
      100% 15%,
      100% 21%,
      91% 9%,
      78% 38%,
      65% 17%,
      51% 45%,
      39% 31%,
      25% 71%,
      12% 57%,
      0 78%
    );
  content: "";
}

/* --------------------------------------------------------------------------
   Security badge
-------------------------------------------------------------------------- */

.portal-device__security {
  position: absolute;
  right: -24px;
  bottom: -26px;
  z-index: 8;
  display: grid;
  width: 92px;
  height: 92px;
  border:
    8px solid
    rgb(255 255 255 / 92%);
  border-radius: 28px;
  background:
    var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 2.1rem;
  box-shadow:
    0 24px 58px
    rgb(0 0 0 / 38%),
    inset 0 1px 0
    rgb(255 255 255 / 24%);
  place-items: center;
  transform:
    rotate(4deg);
  animation:
    portal-security-float
    4.6s
    ease-in-out
    infinite;
}

.portal-device__security::before {
  position: absolute;
  inset: -16px;
  z-index: -1;
  border:
    1px solid
    rgb(150 241 228 / 28%);
  border-radius: 34px;
  content: "";
  animation:
    portal-security-pulse
    2.8s
    ease-out
    infinite;
}

@keyframes portal-security-float {
  0%,
  100% {
    transform:
      rotate(4deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(1deg)
      translateY(-8px);
  }
}

@keyframes portal-security-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.82);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* ==========================================================================
   48. PORTAL RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .portal-promotion__shell {
    grid-template-columns:
      minmax(0, 0.88fr)
      minmax(360px, 1fr);
    gap: 44px;
    padding: 42px;
  }

  .portal-device {
    width: 520px;
  }

  .portal-device__screen {
    grid-template-columns:
      76px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .portal-promotion__shell {
    grid-template-columns: 1fr;
  }

  .portal-promotion__content {
    max-width: 760px;
  }

  .portal-promotion__media {
    min-height:
      clamp(
        440px,
        76vw,
        570px
      );
  }

  .portal-device {
    width:
      min(
        92%,
        590px
      );
    transform:
      translate(-50%, -50%)
      rotateY(-4deg)
      rotateX(1deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .portal-promotion__media:hover
    .portal-device {
      transform:
        translate(-50%, -52%)
        rotateY(0)
        rotateX(0)
        scale(1.015);
    }
  }
}

@media (max-width: 767px) {
  .portal-promotion__shell {
    min-height: 0;
    padding:
      clamp(
        26px,
        6vw,
        36px
      );
    border-radius:
      var(--radius-xl);
  }

  .portal-promotion__features {
    grid-template-columns: 1fr;
  }

  .portal-promotion__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-promotion__actions .button {
    width: 100%;
  }

  .portal-promotion__media {
    min-height:
      clamp(
        360px,
        92vw,
        510px
      );
  }

  .portal-device__content {
    gap: 15px;
    padding: 20px;
  }

  .portal-device__cards span {
    min-height: 76px;
  }

  .portal-device__chart {
    min-height: 130px;
  }

  .portal-device__security {
    right: -12px;
    bottom: -18px;
    width: 76px;
    height: 76px;
    border-width: 6px;
    border-radius: 23px;
    font-size: 1.7rem;
  }
}

@media (max-width: 560px) {
  .portal-promotion__shell {
    padding: 24px 18px 34px;
  }

  .portal-promotion__media {
    min-height: 330px;
  }

  .portal-device {
    width: 520px;
    transform:
      translate(-48%, -50%)
      scale(0.66);
  }

  @media (hover: hover) and (pointer: fine) {
    .portal-promotion__media:hover
    .portal-device {
      transform:
        translate(-48%, -51%)
        scale(0.67);
    }
  }
}

@media (max-width: 390px) {
  .portal-promotion__media {
    min-height: 290px;
  }

  .portal-device {
    transform:
      translate(-48%, -50%)
      scale(0.56);
  }

  @media (hover: hover) and (pointer: fine) {
    .portal-promotion__media:hover
    .portal-device {
      transform:
        translate(-48%, -51%)
        scale(0.57);
    }
  }
}

/* ==========================================================================
   49. PORTAL ACCESSIBILITY AND REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .portal-promotion__features li,
  .portal-promotion__features li::after,
  .portal-device,
  .portal-device__security,
  .portal-device__security::before {
    animation: none !important;
    transition: none !important;
  }

  .portal-promotion__features li:hover,
  .portal-promotion__media:hover
  .portal-device {
    transform: none !important;
  }

  .portal-device {
    transform:
      translate(-50%, -50%) !important;
  }
}

html[data-reduce-motion="true"]
.portal-promotion__features li,
html[data-reduce-motion="true"]
.portal-device,
html[data-reduce-motion="true"]
.portal-device__security,
html[data-reduce-motion="true"]
.portal-device__security::before {
  animation: none !important;
  transition: none !important;
}

html[data-reduce-motion="true"]
.portal-device {
  transform:
    translate(-50%, -50%) !important;
}

/* ==========================================================================
   50. PORTAL PRINT
========================================================================== */

@media print {
  .portal-promotion__media,
  .portal-promotion__actions {
    display: none !important;
  }

  .portal-promotion {
    color: #000 !important;
    background: #fff !important;
  }

  .portal-promotion__shell {
    display: block;
    min-height: 0;
    padding: 24px;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .portal-promotion__content h2,
  .portal-promotion__content p,
  .portal-promotion__features li {
    color: #000 !important;
  }

  .portal-promotion__features li {
    border:
      1px solid #ccc;
    background: #fff;
    box-shadow: none;
  }
}
/* ==========================================================================
   51. LOCATIONS — FINAL PREMIUM VERSION
========================================================================== */

.locations {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 94% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgb(59 130 246 / 7%),
      transparent 28%
    ),
    var(--surface-soft);
}

.locations::before {
  position: absolute;
  top: -200px;
  right: -170px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Header actions
-------------------------------------------------------------------------- */

.locations__header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 92%,
      transparent
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  backdrop-filter:
    blur(12px);
}

.locations__header-actions
.button {
  min-height: 42px;
  padding-inline: 15px;
  border-color: transparent;
  box-shadow: none;
}

.locations__header-actions
.button[aria-pressed="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      transparent
    );
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 9px 24px
    rgb(11 133 121 / 24%);
}

.locations__header-actions
.button[aria-pressed="false"]:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
}

/* ==========================================================================
   52. LOCATION FILTERS
========================================================================== */

.locations__filters {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(180px, 0.8fr)
    minmax(150px, 0.65fr)
    auto;
  align-items: end;
  gap:
    clamp(
      12px,
      2vw,
      18px
    );
  margin:
    clamp(
      28px,
      4vw,
      42px
    )
    0;
  padding:
    clamp(
      18px,
      2.6vw,
      26px
    );
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-xl);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 91%,
      transparent
    );
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0
    rgb(255 255 255 / 78%);
  backdrop-filter:
    blur(18px)
    saturate(135%);
}

.locations__filters
.form__group {
  min-width: 0;
  margin: 0;
}

.locations__filters label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 0.73rem;
  font-weight: 780;
}

.locations__filters input,
.locations__filters select {
  min-height: 48px;
  background:
    var(--surface-elevated);
}

.locations__filters
#locations-use-position {
  min-height: 48px;
  white-space: nowrap;
}

/* Geolocation active state */

#locations-use-position.is-active,
#locations-use-position[aria-pressed="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      var(--border-default)
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
}

#locations-use-position.is-loading i {
  animation:
    location-position-spin
    900ms linear infinite;
}

@keyframes location-position-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   53. LOCATION LIST VIEW
========================================================================== */

.locations__list-view,
.locations__map-view {
  position: relative;
  z-index: 1;
}

.locations__grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: var(--homepage-card-gap);
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Location card
-------------------------------------------------------------------------- */

.location-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

/* Location media */

.location-card__media {
  position: relative;
  height:
    clamp(
      205px,
      22vw,
      270px
    );
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      var(--surface-muted),
      var(--color-primary-soft)
    );
}

.location-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 3%) 0%,
      rgb(2 12 27 / 8%) 52%,
      rgb(2 12 27 / 52%) 100%
    );
  pointer-events: none;
  content: "";
}

.location-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 17%) 48%,
      transparent 75%
    );
  pointer-events: none;
  content: "";
  transform: translateX(-130%);
  transition:
    transform
    950ms
    var(--ease-premium);
}

.location-card__media >
img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    900ms
    var(--ease-premium),
    filter
    500ms
    var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .location-card:hover
  .location-card__media::after {
    transform: translateX(130%);
  }

  .location-card:hover
  .location-card__media >
  img:first-child {
    filter:
      saturate(1.06)
      contrast(1.025);
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Location logo
-------------------------------------------------------------------------- */

.location-card__logo {
  position: absolute;
  left:
    clamp(
      14px,
      2vw,
      20px
    );
  bottom:
    clamp(
      14px,
      2vw,
      20px
    );
  z-index: 5;
  display: grid;
  width: 68px;
  height: 68px;
  padding: 8px;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 62%);
  border-radius: 18px;
  background:
    rgb(255 255 255 / 94%);
  box-shadow:
    0 14px 36px
    rgb(2 12 27 / 26%),
    inset 0 1px 0
    rgb(255 255 255 / 98%);
  backdrop-filter:
    blur(14px)
    saturate(150%);
  place-items: center;
  transition:
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.location-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .location-card:hover
  .location-card__logo {
    box-shadow:
      0 18px 44px
      rgb(2 12 27 / 32%),
      inset 0 1px 0
      rgb(255 255 255 / 98%);
    transform:
      translateY(-3px)
      rotate(-2deg);
  }
}

/* --------------------------------------------------------------------------
   Distance badge
-------------------------------------------------------------------------- */

.location-card__distance {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border:
    1px solid
    rgb(255 255 255 / 48%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 91%);
  color: var(--secondary-800);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1;
  box-shadow:
    0 10px 28px
    rgb(2 12 27 / 21%),
    inset 0 1px 0
    rgb(255 255 255 / 94%);
  backdrop-filter:
    blur(12px)
    saturate(145%);
}

.location-card__distance::before {
  color: var(--color-primary);
  content: "●";
  font-size: 0.7rem;
}

/* ==========================================================================
   54. LOCATION CARD CONTENT
========================================================================== */

.location-card__content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding:
    clamp(
      20px,
      2.5vw,
      28px
    );
}

.location-card__content h3 {
  font-size:
    clamp(
      1.12rem,
      1.7vw,
      1.38rem
    );
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Details
-------------------------------------------------------------------------- */

.location-card__detail {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.48;
}

.location-card__detail i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 0.94rem;
}

.location-card__detail span,
.location-card__detail a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.location-card__detail a {
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.location-card__detail a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Services
-------------------------------------------------------------------------- */

.location-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--space-4);
}

.location-card__services span,
.location-card__services a {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 6px 9px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 16%,
      var(--border-subtle)
    );
  border-radius:
    var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 62%,
      transparent
    );
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 730;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Actions
-------------------------------------------------------------------------- */

.location-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top:
    1px solid
    var(--border-subtle);
}

.location-card__actions
.text-link {
  font-size: 0.8rem;
}

.location-card__actions
.text-link::after {
  display: none;
}

.location-card__actions
.text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.location-card__actions
.text-link:hover i {
  transform:
    translate(3px, -3px);
}

/* Highlight selected location */

.location-card.is-selected,
.location-card[aria-current="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 52%,
      var(--border-default)
    );
  box-shadow:
    0 24px 68px
    rgb(11 133 121 / 17%),
    0 0 0 3px
    color-mix(
      in srgb,
      var(--color-primary) 9%,
      transparent
    ),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
}

/* ==========================================================================
   55. LOCATION MAP VIEW
========================================================================== */

.locations__map-view {
  margin-top:
    clamp(
      26px,
      4vw,
      38px
    );
}

.locations__map-layout {
  display: grid;
  min-height:
    clamp(
      520px,
      55vw,
      680px
    );
  grid-template-columns:
    minmax(260px, 0.34fr)
    minmax(0, 1fr);
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      22px,
      2.5vw,
      var(--radius-2xl)
    );
  background:
    var(--surface-elevated);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 74%);
}

/* --------------------------------------------------------------------------
   Map sidebar
-------------------------------------------------------------------------- */

.locations__map-sidebar {
  display: flex;
  min-width: 0;
  max-height:
    clamp(
      520px,
      55vw,
      680px
    );
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 14px;
  border-right:
    1px solid
    var(--border-default);
  background:
    linear-gradient(
      180deg,
      var(--surface-elevated),
      var(--surface-soft)
    );
  scrollbar-width: thin;
  scrollbar-color:
    var(--border-strong)
    transparent;
}

.locations__map-sidebar::-webkit-scrollbar {
  width: 7px;
}

.locations__map-sidebar::-webkit-scrollbar-thumb {
  border-radius:
    var(--radius-pill);
  background:
    var(--border-strong);
}

/* --------------------------------------------------------------------------
   Map sidebar item
-------------------------------------------------------------------------- */

.location-map-item {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns:
    38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  overflow: hidden;
  border:
    1px solid
    transparent;
  border-radius: 15px;
  background:
    transparent;
  color: var(--text-secondary);
  text-align: left;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.location-map-item__number {
  display: grid;
  width: 38px;
  height: 38px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );
  border-radius: 12px;
  background:
    var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.location-map-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.location-map-item strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-map-item small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.location-map-item > i {
  color: var(--text-muted);
  font-size: 1rem;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.location-map-item:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      var(--border-default)
    );
  background:
    color-mix(
      in srgb,
      var(--color-primary-soft) 55%,
      transparent
    );
  color: var(--color-primary);
  transform: translateX(2px);
}

.location-map-item:hover > i {
  color: var(--color-primary);
  transform: translateX(2px);
}

.location-map-item.is-active,
.location-map-item[aria-selected="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 34%,
      var(--border-default)
    );
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-primary-soft) 90%,
        white
      ),
      color-mix(
        in srgb,
        var(--color-primary-soft) 54%,
        transparent
      )
    );
  box-shadow:
    0 10px 26px
    color-mix(
      in srgb,
      var(--color-primary) 11%,
      transparent
    );
}

.location-map-item.is-active
.location-map-item__number,
.location-map-item[aria-selected="true"]
.location-map-item__number {
  border-color: transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 10px 24px
    rgb(11 133 121 / 24%);
}

/* --------------------------------------------------------------------------
   Map area
-------------------------------------------------------------------------- */

.locations__map {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #e6f1f0,
      #dcebea
    );
}

/* Subtle map-like pattern */

.locations__map::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      35deg,
      transparent 42%,
      rgb(255 255 255 / 38%) 43%,
      rgb(255 255 255 / 38%) 45%,
      transparent 46%
    ),
    linear-gradient(
      -28deg,
      transparent 39%,
      rgb(255 255 255 / 31%) 40%,
      rgb(255 255 255 / 31%) 42%,
      transparent 43%
    ),
    radial-gradient(
      circle at 20% 30%,
      rgb(22 166 148 / 15%),
      transparent 20%
    ),
    radial-gradient(
      circle at 72% 66%,
      rgb(59 130 246 / 12%),
      transparent 22%
    );
  background-size:
    140px 140px,
    170px 170px,
    auto,
    auto;
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Map placeholder
-------------------------------------------------------------------------- */

.locations__map-placeholder {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  width:
    min(
      calc(100% - 42px),
      420px
    );
  justify-items: center;
  gap: var(--space-3);
  padding:
    clamp(
      26px,
      4vw,
      40px
    );
  border:
    1px solid
    rgb(255 255 255 / 66%);
  border-radius:
    var(--radius-xl);
  background:
    rgb(255 255 255 / 86%);
  box-shadow:
    0 24px 68px
    rgb(15 23 42 / 16%),
    inset 0 1px 0
    rgb(255 255 255 / 96%);
  text-align: center;
  backdrop-filter:
    blur(20px)
    saturate(145%);
  transform:
    translate(-50%, -50%);
}

.locations__map-placeholder > span {
  display: grid;
  width: 62px;
  height: 62px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );
  border-radius: 20px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 1.5rem;
  box-shadow:
    0 15px 34px
    rgb(11 133 121 / 25%);
  place-items: center;
}

.locations__map-placeholder h3 {
  font-size:
    clamp(
      1.12rem,
      2vw,
      1.42rem
    );
}

.locations__map-placeholder p {
  max-width: 330px;
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Optional real map compatibility */

.locations__map iframe,
.locations__map canvas,
.locations__map .leaflet-container,
.locations__map .mapboxgl-map {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   56. LOCATION LOADING STATES
========================================================================== */

.location-card.is-loading {
  pointer-events: none;
}

.location-card.is-loading
.location-card__media,
.location-card.is-loading h3,
.location-card.is-loading
.location-card__detail,
.location-card.is-loading
.location-card__services {
  position: relative;
  overflow: hidden;
  background:
    var(--surface-muted);
  color: transparent;
}

.location-card.is-loading h3 {
  width: 68%;
  height: 21px;
  border-radius: 7px;
}

.location-card.is-loading
.location-card__detail {
  width: 88%;
  height: 17px;
  border-radius: 7px;
}

.location-card.is-loading
.location-card__services {
  width: 76%;
  height: 30px;
  border-radius:
    var(--radius-pill);
}

.location-card.is-loading
.location-card__media::after,
.location-card.is-loading h3::after,
.location-card.is-loading
.location-card__detail::after,
.location-card.is-loading
.location-card__services::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 67%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    location-card-shimmer
    1.45s linear infinite;
  transform: translateX(-120%);
}

@keyframes location-card-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ==========================================================================
   57. LOCATIONS — RESPONSIVE
========================================================================== */

@media (max-width: 1180px) {
  .locations__filters {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .locations__filters
  #locations-use-position {
    grid-column:
      1 / -1;
    justify-self: start;
  }

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

  .locations__map-layout {
    grid-template-columns:
      minmax(240px, 0.37fr)
      minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .locations .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .locations__header-actions {
    align-self: stretch;
  }

  .locations__header-actions
  .button {
    flex: 1 1 0;
  }

  .locations__map-layout {
    min-height: 720px;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto minmax(430px, 1fr);
  }

  .locations__map-sidebar {
    max-height: 250px;
    border-right: 0;
    border-bottom:
      1px solid
      var(--border-default);
  }
}

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

  .locations__filters
  #locations-use-position {
    width: 100%;
    justify-self: stretch;
  }

  .location-card__media {
    height:
      clamp(
        210px,
        62vw,
        300px
      );
  }

  .location-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .location-card__actions
  .button {
    width: 100%;
  }

  .locations__map-layout {
    min-height: 660px;
    grid-template-rows:
      auto minmax(390px, 1fr);
  }

  .location-map-item {
    grid-template-columns:
      36px minmax(0, 1fr) auto;
  }
}

@media (max-width: 520px) {
  .locations__header-actions {
    border-radius:
      var(--radius-lg);
  }

  .locations__header-actions
  .button {
    min-width: 0;
    padding-inline: 10px;
    font-size: 0.72rem;
  }

  .locations__filters {
    padding: 18px;
    border-radius:
      var(--radius-lg);
  }

  .location-card {
    border-radius:
      var(--radius-lg);
  }

  .location-card__media {
    height: 210px;
  }

  .location-card__logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .location-card__content {
    padding: 20px;
  }

  .locations__map-layout {
    min-height: 610px;
    grid-template-rows:
      auto minmax(350px, 1fr);
    border-radius:
      var(--radius-lg);
  }

  .locations__map-sidebar {
    max-height: 230px;
    padding: 10px;
  }

  .locations__map-placeholder {
    width:
      calc(100% - 28px);
    padding: 24px 18px;
    border-radius:
      var(--radius-lg);
  }
}

/* ==========================================================================
   58. LOCATIONS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.locations__header-actions,
html[data-color-mode="dark"]
.locations__filters {
  background:
    rgb(15 29 44 / 82%);
  box-shadow:
    0 18px 46px
    rgb(0 0 0 / 28%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.locations__filters input,
html[data-color-mode="dark"]
.locations__filters select {
  background:
    rgb(10 25 39 / 88%);
}

html[data-color-mode="dark"]
.location-card__logo {
  border-color:
    rgb(255 255 255 / 16%);
  background:
    rgb(255 255 255 / 94%);
}

html[data-color-mode="dark"]
.location-card__distance {
  border-color:
    rgb(255 255 255 / 12%);
  background:
    rgb(12 29 42 / 90%);
  color:
    var(--text-primary);
  box-shadow:
    0 14px 34px
    rgb(0 0 0 / 36%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.location-card__services span,
html[data-color-mode="dark"]
.location-card__services a {
  background:
    rgb(22 166 148 / 9%);
}

html[data-color-mode="dark"]
.locations__map-layout {
  background:
    rgb(10 25 39 / 96%);
  box-shadow:
    0 28px 80px
    rgb(0 0 0 / 37%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.locations__map-sidebar {
  background:
    linear-gradient(
      180deg,
      rgb(18 35 52),
      rgb(10 25 39)
    );
}

html[data-color-mode="dark"]
.location-map-item.is-active,
html[data-color-mode="dark"]
.location-map-item[aria-selected="true"] {
  background:
    linear-gradient(
      135deg,
      rgb(22 166 148 / 17%),
      rgb(22 166 148 / 7%)
    );
}

html[data-color-mode="dark"]
.locations__map {
  background:
    linear-gradient(
      145deg,
      #152f3a,
      #102630
    );
}

html[data-color-mode="dark"]
.locations__map-placeholder {
  border-color:
    rgb(255 255 255 / 11%);
  background:
    rgb(15 29 44 / 90%);
  box-shadow:
    0 26px 70px
    rgb(0 0 0 / 38%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

/* ==========================================================================
   59. LOCATIONS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .location-card,
  .location-card img,
  .location-card__media::after,
  .location-card__logo,
  .location-card__actions i,
  .location-map-item,
  .location-map-item__number,
  .location-map-item > i,
  #locations-use-position i {
    animation: none !important;
    transition: none !important;
  }

  .location-card:hover,
  .location-card:hover img,
  .location-card:hover
  .location-card__logo,
  .location-map-item:hover {
    transform: none !important;
  }

  .location-card.is-loading
  .location-card__media::after,
  .location-card.is-loading h3::after,
  .location-card.is-loading
  .location-card__detail::after,
  .location-card.is-loading
  .location-card__services::after {
    animation: none !important;
  }
}

html[data-reduce-motion="true"]
.location-card,
html[data-reduce-motion="true"]
.location-card img,
html[data-reduce-motion="true"]
.location-card__media::after,
html[data-reduce-motion="true"]
.location-card__logo,
html[data-reduce-motion="true"]
.location-map-item {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   60. LOCATIONS — PRINT
========================================================================== */

@media print {
  .locations__header-actions,
  .locations__filters,
  .locations__map-view,
  .locations .section-actions,
  .location-card__actions {
    display: none !important;
  }

  .locations {
    background: #fff !important;
  }

  .locations__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .location-card {
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .location-card__media {
    height: 150px;
  }
}
/* ==========================================================================
   61. GALLERY — FINAL PREMIUM VERSION
========================================================================== */

.gallery {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 94% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgb(59 130 246 / 6%),
      transparent 28%
    ),
    var(--surface-page);
}

.gallery::before {
  position: absolute;
  top: -180px;
  right: -150px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Gallery filters
-------------------------------------------------------------------------- */

.gallery__filters {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.gallery__filters button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-pill);
  background:
    var(--surface-elevated);
  color:
    var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1;
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.gallery__filters button:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 35%,
      var(--border-default)
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
  transform:
    translateY(-2px);
}

.gallery__filters button[aria-selected="true"],
.gallery__filters button[aria-pressed="true"],
.gallery__filters button.is-active {
  border-color:
    transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 10px 25px
    rgb(11 133 121 / 24%);
}

/* --------------------------------------------------------------------------
   Gallery grid
-------------------------------------------------------------------------- */

.gallery__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap:
    clamp(
      14px,
      2vw,
      22px
    );
}

.gallery-card {
  grid-column:
    span 4;
  min-width: 0;
  overflow: hidden;
}

.gallery-card:nth-child(7n + 1),
.gallery-card:nth-child(7n + 5) {
  grid-column:
    span 8;
}

.gallery-card:nth-child(7n + 1)
.gallery-card__button,
.gallery-card:nth-child(7n + 5)
.gallery-card__button {
  aspect-ratio:
    16 / 9;
}

.gallery-card:nth-child(7n + 2),
.gallery-card:nth-child(7n + 6) {
  grid-column:
    span 4;
}

.gallery-card:nth-child(7n + 2)
.gallery-card__button,
.gallery-card:nth-child(7n + 6)
.gallery-card__button {
  aspect-ratio:
    4 / 5;
}

/* --------------------------------------------------------------------------
   Gallery card button
-------------------------------------------------------------------------- */

.gallery-card__button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio:
    4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    var(--surface-muted);
  cursor: zoom-in;
}

.gallery-card__button::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 2%) 20%,
      rgb(2 12 27 / 8%) 55%,
      rgb(2 12 27 / 58%) 100%
    );
  pointer-events: none;
  content: "";
}

.gallery-card__button::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 18%) 48%,
      transparent 76%
    );
  pointer-events: none;
  content: "";
  transform:
    translateX(-135%);
  transition:
    transform
    950ms
    var(--ease-premium);
}

.gallery-card__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    900ms
    var(--ease-premium),
    filter
    500ms
    var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Gallery overlay
-------------------------------------------------------------------------- */

.gallery-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  background:
    rgb(2 12 27 / 12%);
  color:
    var(--text-inverse);
  opacity: 0;
  place-items: center;
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    background
    var(--duration-normal)
    var(--ease-standard);
}

.gallery-card__overlay i {
  display: grid;
  width: 58px;
  height: 58px;
  border:
    1px solid
    rgb(255 255 255 / 48%);
  border-radius: 18px;
  background:
    rgb(255 255 255 / 88%);
  color:
    var(--color-primary);
  font-size: 1.4rem;
  box-shadow:
    0 18px 44px
    rgb(2 12 27 / 30%);
  backdrop-filter:
    blur(14px)
    saturate(145%);
  place-items: center;
  transform:
    translateY(12px)
    scale(0.88);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Gallery category
-------------------------------------------------------------------------- */

.gallery-card__category {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border:
    1px solid
    rgb(255 255 255 / 42%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 88%);
  color:
    var(--secondary-800);
  font-size: 0.67rem;
  font-weight: 820;
  line-height: 1;
  box-shadow:
    0 9px 24px
    rgb(2 12 27 / 18%);
  backdrop-filter:
    blur(12px)
    saturate(145%);
}

/* --------------------------------------------------------------------------
   Gallery caption
-------------------------------------------------------------------------- */

.gallery-card figcaption {
  display: grid;
  gap: 5px;
  padding:
    clamp(
      16px,
      2vw,
      21px
    );
}

.gallery-card figcaption strong {
  overflow: hidden;
  color:
    var(--text-primary);
  font-family:
    var(--font-display);
  font-size:
    clamp(
      0.92rem,
      1.4vw,
      1.08rem
    );
  font-weight: 810;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card figcaption span {
  display:
    -webkit-box;
  overflow: hidden;
  color:
    var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover
  .gallery-card__button::after {
    transform:
      translateX(135%);
  }

  .gallery-card:hover
  .gallery-card__button img {
    filter:
      saturate(1.08)
      contrast(1.03);
    transform:
      scale(1.07);
  }

  .gallery-card:hover
  .gallery-card__overlay {
    background:
      rgb(2 12 27 / 28%);
    opacity: 1;
  }

  .gallery-card:hover
  .gallery-card__overlay i {
    transform:
      translateY(0)
      scale(1);
  }

  .gallery-card__overlay i:hover {
    background:
      var(--gradient-primary);
    color:
      var(--text-inverse);
  }
}

/* ==========================================================================
   62. VIDEO GALLERY — FINAL PREMIUM VERSION
========================================================================== */

.video-gallery {
  position: relative;
  overflow: clip;
  isolation: isolate;
  color:
    var(--text-inverse);
  background:
    radial-gradient(
      circle at 10% 12%,
      rgb(22 166 148 / 24%),
      transparent 29%
    ),
    radial-gradient(
      circle at 90% 88%,
      rgb(59 130 246 / 19%),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      var(--secondary-900),
      var(--secondary-950) 72%
    );
}

.video-gallery::before,
.video-gallery::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.video-gallery::before {
  top: -230px;
  left: -170px;
  width: 560px;
  height: 560px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 26%),
      transparent 70%
    );
}

.video-gallery::after {
  right: -210px;
  bottom: -260px;
  width: 620px;
  height: 620px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 18%),
      transparent 70%
    );
}

.video-gallery .section-heading h2 {
  color:
    var(--text-inverse);
}

.video-gallery .section-heading > p:last-child {
  color:
    rgb(255 255 255 / 68%);
}

/* --------------------------------------------------------------------------
   Featured video
-------------------------------------------------------------------------- */

.video-gallery__featured {
  position: relative;
  z-index: 1;
  margin:
    clamp(
      30px,
      5vw,
      50px
    )
    auto
    clamp(
      20px,
      3vw,
      30px
    );
}

.video-gallery__featured:empty {
  display: none;
}

.video-gallery__featured
.video-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(280px, 0.65fr);
  min-height:
    clamp(
      390px,
      48vw,
      560px
    );
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 14%);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 9%),
      rgb(255 255 255 / 4%)
    );
  box-shadow:
    0 34px 100px
    rgb(0 0 0 / 34%),
    inset 0 1px 0
    rgb(255 255 255 / 10%);
  backdrop-filter:
    blur(18px)
    saturate(135%);
}

.video-gallery__featured
.video-card__media {
  min-height: 390px;
  aspect-ratio: auto;
}

.video-gallery__featured
.video-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(
      28px,
      4vw,
      48px
    );
}

.video-gallery__featured
.video-card__content::before {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 7px 11px;
  border:
    1px solid
    rgb(150 241 228 / 22%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(150 241 228 / 9%);
  color:
    #96f1e4;
  content: "Featured";
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-gallery__featured
.video-card__content h3 {
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.45rem,
      2.7vw,
      2.25rem
    );
  line-height: 1.25;
}

.video-gallery__featured
.video-card__content p {
  margin-top: var(--space-4);
  color:
    rgb(255 255 255 / 66%);
  font-size:
    clamp(
      0.9rem,
      1.3vw,
      1rem
    );
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Video grid
-------------------------------------------------------------------------- */

.video-gallery__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap:
    clamp(
      16px,
      2.2vw,
      26px
    );
}

.video-gallery__grid:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Video card
-------------------------------------------------------------------------- */

.video-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 12%);
  border-radius:
    clamp(
      20px,
      2vw,
      28px
    );
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 8%),
      rgb(255 255 255 / 4%)
    );
  box-shadow:
    0 18px 52px
    rgb(0 0 0 / 22%),
    inset 0 1px 0
    rgb(255 255 255 / 8%);
  backdrop-filter:
    blur(14px)
    saturate(130%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Video media
-------------------------------------------------------------------------- */

.video-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio:
    16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    rgb(2 12 27 / 50%);
  cursor: pointer;
}

.video-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 3%) 20%,
      rgb(2 12 27 / 12%) 56%,
      rgb(2 12 27 / 60%) 100%
    );
  pointer-events: none;
  content: "";
}

.video-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 15%) 48%,
      transparent 76%
    );
  pointer-events: none;
  content: "";
  transform:
    translateX(-135%);
  transition:
    transform
    950ms
    var(--ease-premium);
}

.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    900ms
    var(--ease-premium),
    filter
    500ms
    var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Play button
-------------------------------------------------------------------------- */

.video-card__play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  display: grid;
  width: 66px;
  height: 66px;
  border:
    1px solid
    rgb(255 255 255 / 48%);
  border-radius: 50%;
  background:
    rgb(255 255 255 / 90%);
  color:
    var(--color-primary);
  font-size: 1.55rem;
  box-shadow:
    0 18px 46px
    rgb(2 12 27 / 32%),
    0 0 0 9px
    rgb(255 255 255 / 9%);
  backdrop-filter:
    blur(14px)
    saturate(145%);
  place-items: center;
  transform:
    translate(-50%, -50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.video-card__play i {
  margin-left: 3px;
}

/* --------------------------------------------------------------------------
   Video duration
-------------------------------------------------------------------------- */

.video-card__duration {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 5;
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 6px 9px;
  border:
    1px solid
    rgb(255 255 255 / 24%);
  border-radius:
    9px;
  background:
    rgb(2 12 27 / 72%);
  color:
    var(--text-inverse);
  font-size: 0.66rem;
  font-weight: 780;
  line-height: 1;
  backdrop-filter:
    blur(8px);
}

/* --------------------------------------------------------------------------
   Video content
-------------------------------------------------------------------------- */

.video-card__content {
  display: grid;
  gap: 8px;
  padding:
    clamp(
      18px,
      2.4vw,
      24px
    );
}

.video-card__content h3 {
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1rem,
      1.55vw,
      1.2rem
    );
  line-height: 1.35;
}

.video-card__content p {
  display:
    -webkit-box;
  overflow: hidden;
  color:
    rgb(255 255 255 / 61%);
  font-size: 0.77rem;
  line-height: 1.52;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (hover: hover) and (pointer: fine) {
  .video-card:hover {
    border-color:
      rgb(150 241 228 / 24%);
    box-shadow:
      0 28px 72px
      rgb(0 0 0 / 32%),
      inset 0 1px 0
      rgb(255 255 255 / 10%);
    transform:
      translateY(-7px);
  }

  .video-card:hover
  .video-card__media::after {
    transform:
      translateX(135%);
  }

  .video-card:hover
  .video-card__media img {
    filter:
      saturate(1.08)
      contrast(1.03);
    transform:
      scale(1.065);
  }

  .video-card:hover
  .video-card__play {
    background:
      var(--gradient-primary);
    color:
      var(--text-inverse);
    box-shadow:
      0 22px 55px
      rgb(0 0 0 / 38%),
      0 0 0 13px
      rgb(150 241 228 / 10%);
    transform:
      translate(-50%, -50%)
      scale(1.07);
  }
}

/* ==========================================================================
   63. MEDIA LIGHTBOX — FINAL PREMIUM VERSION
========================================================================== */

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  padding:
    clamp(
      14px,
      3vw,
      34px
    );
  place-items: center;
}

.media-lightbox[hidden] {
  display: none !important;
}

.media-lightbox.is-open {
  animation:
    media-lightbox-enter
    260ms
    var(--ease-standard)
    both;
}

@keyframes media-lightbox-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Lightbox backdrop
-------------------------------------------------------------------------- */

.media-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background:
    rgb(2 8 18 / 84%);
  backdrop-filter:
    blur(18px)
    saturate(120%);
}

/* --------------------------------------------------------------------------
   Lightbox dialog
-------------------------------------------------------------------------- */

.media-lightbox__dialog {
  position: relative;
  z-index: 2;
  display: grid;
  width:
    min(
      100%,
      1160px
    );
  max-height:
    calc(100dvh - 40px);
  grid-template-rows:
    auto minmax(0, 1fr) auto;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 14%);
  border-radius:
    clamp(
      20px,
      2.4vw,
      32px
    );
  background:
    rgb(10 24 38 / 96%);
  color:
    var(--text-inverse);
  box-shadow:
    0 42px 130px
    rgb(0 0 0 / 58%),
    inset 0 1px 0
    rgb(255 255 255 / 9%);
  animation:
    media-lightbox-dialog-enter
    380ms
    var(--ease-premium)
    both;
}

@keyframes media-lightbox-dialog-enter {
  from {
    opacity: 0;
    transform:
      translateY(18px)
      scale(0.975);
  }

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

/* --------------------------------------------------------------------------
   Lightbox header
-------------------------------------------------------------------------- */

.media-lightbox__header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding:
    clamp(
      18px,
      2.5vw,
      26px
    );
  border-bottom:
    1px solid
    rgb(255 255 255 / 10%);
  background:
    rgb(255 255 255 / 3%);
}

.media-lightbox__header > div {
  min-width: 0;
}

.media-lightbox__type {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  margin-bottom: 7px;
  padding: 5px 9px;
  border:
    1px solid
    rgb(150 241 228 / 20%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(150 241 228 / 8%);
  color:
    #96f1e4;
  font-size: 0.65rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.media-lightbox__header h2 {
  overflow: hidden;
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.05rem,
      2vw,
      1.5rem
    );
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-lightbox__close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 0;
  border:
    1px solid
    rgb(255 255 255 / 14%);
  border-radius: 15px;
  background:
    rgb(255 255 255 / 6%);
  color:
    var(--text-inverse);
  font-size: 1.2rem;
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.media-lightbox__close:hover {
  border-color:
    rgb(255 255 255 / 28%);
  background:
    rgb(255 255 255 / 12%);
  color:
    #fff;
  transform:
    rotate(4deg)
    scale(1.04);
}

/* --------------------------------------------------------------------------
   Lightbox content
-------------------------------------------------------------------------- */

.media-lightbox__content {
  position: relative;
  display: grid;
  min-height:
    min(
      62vh,
      620px
    );
  overflow: auto;
  background:
    rgb(2 10 20 / 72%);
  place-items: center;
}

.media-lightbox__content img,
.media-lightbox__content video,
.media-lightbox__content iframe {
  display: block;
  max-width: 100%;
  max-height:
    min(
      68vh,
      720px
    );
}

.media-lightbox__content img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.media-lightbox__content video {
  width: 100%;
  background: #000;
}

.media-lightbox__content iframe {
  width: 100%;
  min-height:
    min(
      62vh,
      680px
    );
  border: 0;
}

.media-lightbox__content
.media-lightbox__image {
  padding:
    clamp(
      12px,
      2vw,
      24px
    );
}

.media-lightbox__content
.media-lightbox__video {
  width: 100%;
  aspect-ratio:
    16 / 9;
}

/* --------------------------------------------------------------------------
   Lightbox footer
-------------------------------------------------------------------------- */

.media-lightbox__footer {
  padding:
    clamp(
      16px,
      2.3vw,
      24px
    );
  border-top:
    1px solid
    rgb(255 255 255 / 10%);
  background:
    rgb(255 255 255 / 3%);
}

.media-lightbox__footer:empty,
.media-lightbox__footer p:empty {
  display: none;
}

.media-lightbox__footer p {
  max-width: 900px;
  color:
    rgb(255 255 255 / 65%);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ==========================================================================
   64. GALLERY + VIDEO GALLERY — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .gallery-card,
  .gallery-card:nth-child(7n + 1),
  .gallery-card:nth-child(7n + 2),
  .gallery-card:nth-child(7n + 5),
  .gallery-card:nth-child(7n + 6) {
    grid-column:
      span 6;
  }

  .gallery-card__button,
  .gallery-card:nth-child(7n + 1)
  .gallery-card__button,
  .gallery-card:nth-child(7n + 2)
  .gallery-card__button,
  .gallery-card:nth-child(7n + 5)
  .gallery-card__button,
  .gallery-card:nth-child(7n + 6)
  .gallery-card__button {
    aspect-ratio:
      4 / 3;
  }

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

  .video-gallery__featured
  .video-card {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(260px, 0.75fr);
  }
}

@media (max-width: 900px) {
  .gallery .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .video-gallery__featured
  .video-card {
    grid-template-columns: 1fr;
  }

  .video-gallery__featured
  .video-card__media {
    min-height: 0;
    aspect-ratio:
      16 / 9;
  }
}

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

  .gallery-card,
  .gallery-card:nth-child(7n + 1),
  .gallery-card:nth-child(7n + 2),
  .gallery-card:nth-child(7n + 5),
  .gallery-card:nth-child(7n + 6) {
    grid-column:
      1 / -1;
  }

  .gallery__filters {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .gallery__filters button {
    flex: 0 0 auto;
  }

  .video-gallery__featured
  .video-card__content {
    padding: 24px;
  }

  .media-lightbox {
    padding: 8px;
  }

  .media-lightbox__dialog {
    max-height:
      calc(100dvh - 16px);
    border-radius:
      var(--radius-lg);
  }

  .media-lightbox__content {
    min-height:
      min(
        58vh,
        520px
      );
  }

  .media-lightbox__content iframe {
    min-height:
      min(
        58vh,
        520px
      );
  }
}

@media (max-width: 480px) {
  .gallery-card,
  .video-card {
    border-radius:
      var(--radius-lg);
  }

  .gallery-card__overlay i {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .video-card__play {
    width: 58px;
    height: 58px;
    font-size: 1.35rem;
  }

  .media-lightbox__header {
    padding: 15px;
  }

  .media-lightbox__close {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 13px;
  }

  .media-lightbox__footer {
    padding: 15px;
  }
}

/* ==========================================================================
   65. GALLERY + VIDEO GALLERY — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.gallery__filters button {
  background:
    rgb(15 29 44 / 86%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.gallery-card__category {
  border-color:
    rgb(255 255 255 / 12%);
  background:
    rgb(12 29 42 / 90%);
  color:
    var(--text-primary);
}

html[data-color-mode="dark"]
.gallery-card__overlay i {
  border-color:
    rgb(255 255 255 / 14%);
  background:
    rgb(12 29 42 / 90%);
  color:
    var(--primary-300);
}

/* ==========================================================================
   66. GALLERY + VIDEO GALLERY — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gallery__filters button,
  .gallery-card,
  .gallery-card img,
  .gallery-card__button::after,
  .gallery-card__overlay,
  .gallery-card__overlay i,
  .video-card,
  .video-card img,
  .video-card__media::after,
  .video-card__play,
  .media-lightbox,
  .media-lightbox__dialog,
  .media-lightbox__close {
    animation: none !important;
    transition: none !important;
  }

  .gallery-card:hover,
  .gallery-card:hover img,
  .gallery-card:hover
  .gallery-card__overlay i,
  .video-card:hover,
  .video-card:hover img,
  .video-card:hover
  .video-card__play,
  .media-lightbox__close:hover {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.gallery-card,
html[data-reduce-motion="true"]
.gallery-card img,
html[data-reduce-motion="true"]
.video-card,
html[data-reduce-motion="true"]
.video-card img,
html[data-reduce-motion="true"]
.media-lightbox,
html[data-reduce-motion="true"]
.media-lightbox__dialog {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   67. GALLERY + VIDEO GALLERY — PRINT
========================================================================== */

@media print {
  .gallery__filters,
  .gallery .section-actions,
  .video-gallery,
  .media-lightbox {
    display: none !important;
  }

  .gallery__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .gallery-card,
  .gallery-card:nth-child(n) {
    grid-column: auto;
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .gallery-card__button {
    aspect-ratio:
      4 / 3 !important;
  }

  .gallery-card__overlay,
  .gallery-card__category {
    display: none !important;
  }
}

/* ==========================================================================
   68. TESTIMONIALS — FINAL PREMIUM VERSION
========================================================================== */

.testimonials {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 92% 10%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 6% 90%,
      rgb(59 130 246 / 6%),
      transparent 28%
    ),
    var(--surface-soft);
}

.testimonials::before {
  position: absolute;
  top: -190px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.testimonials::after {
  position: absolute;
  bottom: -180px;
  left: -150px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 7%),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Testimonial controls
-------------------------------------------------------------------------- */

.testimonials__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Testimonial viewport
-------------------------------------------------------------------------- */

.testimonials__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  padding-block:
    8px 24px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 22px,
      black calc(100% - 22px),
      transparent
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 22px,
      black calc(100% - 22px),
      transparent
    );
}

/* --------------------------------------------------------------------------
   Testimonial track
-------------------------------------------------------------------------- */

.testimonials__track {
  display: flex;
  align-items: stretch;
  gap:
    clamp(
      18px,
      2.3vw,
      30px
    );
  will-change: transform;
  transition:
    transform
    560ms
    var(--ease-premium);
}

/* ==========================================================================
   69. TESTIMONIAL CARD
========================================================================== */

.testimonial-card {
  position: relative;
  display: flex;
  min-width:
    calc(
      (100% - (2 * var(--homepage-card-gap))) / 3
    );
  min-height:
    clamp(
      320px,
      32vw,
      410px
    );
  flex:
    0 0
    calc(
      (100% - (2 * var(--homepage-card-gap))) / 3
    );
  flex-direction: column;
  padding:
    clamp(
      24px,
      3vw,
      34px
    );
  overflow: hidden;
}

.testimonial-card::before {
  top: -100px;
  right: -85px;
  width: 230px;
  height: 230px;
}

.testimonial-card::after {
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 14%);
}

/* Decorative quotation mark */

.testimonial-card__quote-icon {
  position: absolute;
  top:
    clamp(
      20px,
      2.6vw,
      30px
    );
  right:
    clamp(
      20px,
      2.6vw,
      30px
    );
  z-index: 1;
  color:
    color-mix(
      in srgb,
      var(--color-primary) 16%,
      transparent
    );
  font-size:
    clamp(
      2.8rem,
      5vw,
      4.5rem
    );
  line-height: 1;
  pointer-events: none;
  transform: rotate(4deg);
  transition:
    color
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Rating
-------------------------------------------------------------------------- */

.testimonial-card__rating {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 3px;
  padding-right: 70px;
  color:
    var(--warning-500);
  font-size: 1rem;
  line-height: 1;
}

.testimonial-card__rating i,
.testimonial-card__rating svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  filter:
    drop-shadow(
      0 4px 6px
      rgb(245 158 11 / 18%)
    );
}

.testimonial-card__rating
.is-empty,
.testimonial-card__rating
.ri-star-line {
  color:
    color-mix(
      in srgb,
      var(--warning-500) 36%,
      var(--border-default)
    );
}

/* Support text stars produced by JavaScript */

.testimonial-card__rating {
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Quote
-------------------------------------------------------------------------- */

.testimonial-card blockquote {
  position: relative;
  z-index: 2;
  display:
    -webkit-box;
  margin:
    clamp(
      24px,
      4vw,
      38px
    )
    0
    clamp(
      24px,
      4vw,
      36px
    );
  overflow: hidden;
  color:
    var(--text-primary);
  font-family:
    var(--font-display);
  font-size:
    clamp(
      1.03rem,
      1.75vw,
      1.28rem
    );
  font-weight: 610;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.testimonial-card blockquote::before {
  display: inline;
  color:
    var(--color-primary);
  content: "“";
  font-size: 1.25em;
  font-weight: 850;
}

.testimonial-card blockquote::after {
  display: inline;
  color:
    var(--color-primary);
  content: "”";
  font-size: 1.25em;
  font-weight: 850;
}

/* ==========================================================================
   70. TESTIMONIAL AUTHOR
========================================================================== */

.testimonial-card footer {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top:
    clamp(
      18px,
      2.5vw,
      24px
    );
  border-top:
    1px solid
    var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Author image
-------------------------------------------------------------------------- */

.testimonial-card footer > img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  border:
    3px solid
    var(--surface-elevated);
  border-radius: 50%;
  background:
    var(--surface-muted);
  object-fit: cover;
  box-shadow:
    0 10px 26px
    rgb(15 23 42 / 14%),
    0 0 0 1px
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Initial fallback
-------------------------------------------------------------------------- */

.testimonial-card__avatar {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border:
    3px solid
    var(--surface-elevated);
  border-radius: 50%;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-family:
    var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 10px 26px
    rgb(11 133 121 / 22%),
    0 0 0 1px
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );
  place-items: center;
  text-transform: uppercase;
  transition:
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.testimonial-card footer > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.testimonial-card footer strong {
  overflow: hidden;
  color:
    var(--text-primary);
  font-family:
    var(--font-display);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testimonial-card footer
div > span {
  display:
    -webkit-box;
  overflow: hidden;
  color:
    var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover
  .testimonial-card__quote-icon {
    color:
      color-mix(
        in srgb,
        var(--color-primary) 28%,
        transparent
      );
    transform:
      rotate(0)
      scale(1.06);
  }

  .testimonial-card:hover
  footer > img,
  .testimonial-card:hover
  .testimonial-card__avatar {
    box-shadow:
      0 16px 36px
      rgb(15 23 42 / 19%),
      0 0 0 4px
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      );
    transform:
      translateY(-3px)
      scale(1.03);
  }
}

/* ==========================================================================
   71. TESTIMONIAL PAGINATION
========================================================================== */

.testimonials__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top:
    clamp(
      16px,
      3vw,
      28px
    );
}

.testimonials__pagination button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background:
    var(--border-strong);
  box-shadow: none;
  transition:
    width
    var(--duration-normal)
    var(--ease-premium),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.testimonials__pagination button::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    var(--gradient-primary);
  content: "";
  opacity: 0;
  transition:
    opacity
    var(--duration-fast)
    var(--ease-standard);
}

.testimonials__pagination button:hover {
  background:
    color-mix(
      in srgb,
      var(--color-primary) 55%,
      var(--border-strong)
    );
  transform: scale(1.14);
}

.testimonials__pagination
button[aria-selected="true"],
.testimonials__pagination
button[aria-current="true"],
.testimonials__pagination
button.is-active {
  width: 30px;
  border-radius:
    var(--radius-pill);
  background:
    var(--color-primary);
  box-shadow:
    0 7px 18px
    rgb(11 133 121 / 26%);
}

.testimonials__pagination
button[aria-selected="true"]::before,
.testimonials__pagination
button[aria-current="true"]::before,
.testimonials__pagination
button.is-active::before {
  opacity: 1;
}

/* ==========================================================================
   72. TESTIMONIAL FEATURED VARIANTS
========================================================================== */

.testimonial-card.is-featured,
.testimonial-card[data-featured="true"] {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 46%,
      var(--border-default)
    );
  background:
    linear-gradient(
      150deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 96%,
        var(--color-primary-soft)
      ),
      color-mix(
        in srgb,
        var(--surface-card) 88%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    0 24px 70px
    rgb(11 133 121 / 15%),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
}

.testimonial-card.is-featured::before,
.testimonial-card[data-featured="true"]::before {
  opacity: 1;
}

.testimonial-card.is-featured
.testimonial-card__quote-icon,
.testimonial-card[data-featured="true"]
.testimonial-card__quote-icon {
  color:
    color-mix(
      in srgb,
      var(--color-primary) 25%,
      transparent
    );
}

/* ==========================================================================
   73. TESTIMONIAL LOADING STATE
========================================================================== */

.testimonial-card.is-loading {
  pointer-events: none;
}

.testimonial-card.is-loading
.testimonial-card__rating,
.testimonial-card.is-loading
blockquote,
.testimonial-card.is-loading
footer > img,
.testimonial-card.is-loading
footer strong,
.testimonial-card.is-loading
footer div > span {
  position: relative;
  overflow: hidden;
  background:
    var(--surface-muted);
  color: transparent;
}

.testimonial-card.is-loading
.testimonial-card__rating {
  width: 110px;
  height: 20px;
  border-radius: 7px;
}

.testimonial-card.is-loading
blockquote {
  width: 100%;
  height: 145px;
  border-radius: 12px;
}

.testimonial-card.is-loading
footer > img {
  border: 0;
  border-radius: 50%;
}

.testimonial-card.is-loading
footer strong {
  width: 130px;
  height: 17px;
  border-radius: 6px;
}

.testimonial-card.is-loading
footer div > span {
  width: 105px;
  height: 13px;
  border-radius: 6px;
}

.testimonial-card.is-loading
.testimonial-card__rating::after,
.testimonial-card.is-loading
blockquote::after,
.testimonial-card.is-loading
footer > img::after,
.testimonial-card.is-loading
footer strong::after,
.testimonial-card.is-loading
footer div > span::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 66%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    testimonial-shimmer
    1.45s linear infinite;
  transform: translateX(-120%);
}

@keyframes testimonial-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ==========================================================================
   74. TESTIMONIALS — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .testimonial-card {
    min-width:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );
    flex-basis:
      calc(
        (100% - var(--homepage-card-gap)) / 2
      );
  }
}

@media (max-width: 900px) {
  .testimonials .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .testimonials__controls {
    align-self: stretch;
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .testimonials__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .testimonial-card {
    min-width:
      min(
        88vw,
        390px
      );
    min-height: 340px;
    flex-basis:
      min(
        88vw,
        390px
      );
  }
}

@media (max-width: 480px) {
  .testimonial-card {
    min-width:
      calc(100vw - 62px);
    min-height: 330px;
    flex-basis:
      calc(100vw - 62px);
    padding: 22px 20px;
    border-radius:
      var(--radius-lg);
  }

  .testimonial-card blockquote {
    font-size: 1rem;
    -webkit-line-clamp: 8;
  }

  .testimonial-card footer > img,
  .testimonial-card__avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .testimonial-card__quote-icon {
    top: 18px;
    right: 18px;
    font-size: 3rem;
  }
}

/* ==========================================================================
   75. TESTIMONIALS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.testimonial-card {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 18px 52px
    rgb(0 0 0 / 30%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.testimonial-card.is-featured,
html[data-color-mode="dark"]
.testimonial-card[data-featured="true"] {
  background:
    linear-gradient(
      150deg,
      rgb(22 166 148 / 16%),
      rgb(10 25 39 / 96%)
    );
  box-shadow:
    0 24px 72px
    rgb(0 0 0 / 34%),
    inset 0 1px 0
    rgb(255 255 255 / 8%);
}

html[data-color-mode="dark"]
.testimonial-card footer > img,
html[data-color-mode="dark"]
.testimonial-card__avatar {
  border-color:
    rgb(18 35 52);
}

html[data-color-mode="dark"]
.testimonial-card__quote-icon {
  color:
    rgb(150 241 228 / 13%);
}

html[data-color-mode="dark"]
.testimonial-card__rating {
  color: #fcd34d;
}

/* ==========================================================================
   76. TESTIMONIALS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .testimonials__track,
  .testimonial-card,
  .testimonial-card::before,
  .testimonial-card__quote-icon,
  .testimonial-card footer > img,
  .testimonial-card__avatar,
  .testimonials__pagination button,
  .testimonials__pagination button::before {
    animation: none !important;
    transition: none !important;
  }

  .testimonial-card:hover,
  .testimonial-card:hover
  .testimonial-card__quote-icon,
  .testimonial-card:hover
  footer > img,
  .testimonial-card:hover
  .testimonial-card__avatar,
  .testimonials__pagination button:hover {
    transform: none !important;
  }

  .testimonial-card.is-loading
  .testimonial-card__rating::after,
  .testimonial-card.is-loading
  blockquote::after,
  .testimonial-card.is-loading
  footer > img::after,
  .testimonial-card.is-loading
  footer strong::after,
  .testimonial-card.is-loading
  footer div > span::after {
    animation: none !important;
  }
}

html[data-reduce-motion="true"]
.testimonials__track,
html[data-reduce-motion="true"]
.testimonial-card,
html[data-reduce-motion="true"]
.testimonial-card__quote-icon,
html[data-reduce-motion="true"]
.testimonial-card footer > img,
html[data-reduce-motion="true"]
.testimonial-card__avatar {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   77. TESTIMONIALS — PRINT
========================================================================== */

@media print {
  .testimonials__controls,
  .testimonials__pagination {
    display: none !important;
  }

  .testimonials {
    background: #fff !important;
  }

  .testimonials__viewport {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .testimonials__track {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 16px;
    transform: none !important;
  }

  .testimonial-card {
    min-width: 0;
    min-height: 0;
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .testimonial-card blockquote,
  .testimonial-card footer strong,
  .testimonial-card footer span {
    color: #000 !important;
  }
}
/* ==========================================================================
   78. NEWS AND EVENTS — FINAL PREMIUM VERSION
========================================================================== */

.news {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 94% 8%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgb(59 130 246 / 6%),
      transparent 28%
    ),
    var(--surface-page);
}

.news::before {
  position: absolute;
  top: -190px;
  right: -160px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* ==========================================================================
   79. NEWS HEADER ACTIONS
========================================================================== */

.news__header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap:
    clamp(
      12px,
      2vw,
      18px
    );
}

/* --------------------------------------------------------------------------
   News tabs
-------------------------------------------------------------------------- */

.news__tabs {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 92%,
      transparent
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  backdrop-filter:
    blur(12px);
}

.news__tab {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding:
    8px 14px;
  overflow: hidden;
  border:
    1px solid
    transparent;
  border-radius:
    var(--radius-pill);
  background:
    transparent;
  color:
    var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.news__tab:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 18%,
      transparent
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
  transform:
    translateY(-1px);
}

.news__tab.is-active,
.news__tab[aria-selected="true"] {
  border-color:
    transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 9px 23px
    rgb(11 133 121 / 24%);
}

/* ==========================================================================
   80. NEWS LAYOUT
========================================================================== */

.news__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(340px, 0.88fr);
  align-items: start;
  gap:
    clamp(
      22px,
      3vw,
      38px
    );
}

/* ==========================================================================
   81. FEATURED NEWS ARTICLE
========================================================================== */

.news__featured {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      22px,
      2.6vw,
      var(--radius-2xl)
    );
  background:
    linear-gradient(
      155deg,
      var(--surface-elevated),
      color-mix(
        in srgb,
        var(--surface-card) 94%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0
    rgb(255 255 255 / 76%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.news__featured::before {
  position: absolute;
  top: -120px;
  right: -100px;
  z-index: 0;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 14%,
        transparent
      ),
      transparent 68%
    );
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: scale(0.75);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .news__featured:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 40%,
        var(--border-default)
      );
    box-shadow:
      0 30px 82px
      rgb(15 23 42 / 16%),
      inset 0 1px 0
      rgb(255 255 255 / 82%);
    transform:
      translateY(-7px);
  }

  .news__featured:hover::before {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Featured media
-------------------------------------------------------------------------- */

.news__featured-media {
  position: relative;
  display: block;
  aspect-ratio:
    16 / 9;
  overflow: hidden;
  background:
    var(--surface-muted);
}

.news__featured-media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 2%) 18%,
      rgb(2 12 27 / 8%) 52%,
      rgb(2 12 27 / 57%) 100%
    );
  pointer-events: none;
  content: "";
}

.news__featured-media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 18%) 48%,
      transparent 76%
    );
  pointer-events: none;
  content: "";
  transform:
    translateX(-135%);
  transition:
    transform
    950ms
    var(--ease-premium);
}

.news__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    900ms
    var(--ease-premium),
    filter
    500ms
    var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .news__featured:hover
  .news__featured-media::after {
    transform:
      translateX(135%);
  }

  .news__featured:hover
  .news__featured-media img {
    filter:
      saturate(1.07)
      contrast(1.025);
    transform:
      scale(1.055);
  }
}

/* --------------------------------------------------------------------------
   Featured category
-------------------------------------------------------------------------- */

.news__featured-category {
  position: absolute;
  top:
    clamp(
      15px,
      2vw,
      22px
    );
  left:
    clamp(
      15px,
      2vw,
      22px
    );
  z-index: 5;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding:
    7px 11px;
  border:
    1px solid
    rgb(255 255 255 / 45%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 90%);
  color:
    var(--secondary-800);
  font-size: 0.68rem;
  font-weight: 830;
  line-height: 1;
  box-shadow:
    0 10px 27px
    rgb(2 12 27 / 21%);
  backdrop-filter:
    blur(13px)
    saturate(145%);
}

/* Category variants */

.news__featured-category[data-category="events"],
.news-card__category[data-category="events"] {
  color:
    var(--info-700);
}

.news__featured-category[data-category="announcements"],
.news-card__category[data-category="announcements"] {
  color:
    var(--warning-700);
}

/* --------------------------------------------------------------------------
   Featured content
-------------------------------------------------------------------------- */

.news__featured-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  padding:
    clamp(
      24px,
      3.5vw,
      38px
    );
}

.news__featured-content h3 {
  margin-top: var(--space-4);
  font-size:
    clamp(
      1.35rem,
      2.7vw,
      2.2rem
    );
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.news__featured-content h3 a {
  color:
    var(--text-primary);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.news__featured-content h3 a:hover {
  color:
    var(--color-primary);
}

#news-featured-summary {
  display:
    -webkit-box;
  margin-top: var(--space-4);
  overflow: hidden;
  color:
    var(--text-secondary);
  font-size:
    clamp(
      0.9rem,
      1.3vw,
      1rem
    );
  line-height: 1.68;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.news__featured-content
.text-link {
  margin-top:
    clamp(
      20px,
      3vw,
      28px
    );
}

.news__featured-content
.text-link::after {
  display: none;
}

.news__featured-content
.text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.news__featured-content
.text-link:hover i {
  transform:
    translateX(4px);
}

/* ==========================================================================
   82. NEWS METADATA
========================================================================== */

.news__meta,
.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color:
    var(--text-muted);
  font-size: 0.7rem;
  font-weight: 690;
  line-height: 1.3;
}

.news__meta time,
.news-card__meta time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news__meta time::before,
.news-card__meta time::before {
  color:
    var(--color-primary);
  content: "\ea54";
  font-family:
    "remixicon";
  font-size: 0.9rem;
  font-weight: normal;
}

.news__meta span,
.news-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news__meta span::before,
.news-card__meta span::before {
  color:
    var(--color-primary);
  content: "\f20f";
  font-family:
    "remixicon";
  font-size: 0.9rem;
  font-weight: normal;
}

/* ==========================================================================
   83. NEWS GRID
========================================================================== */

.news__grid {
  display: grid;
  grid-template-columns:
    1fr;
  gap:
    clamp(
      16px,
      2vw,
      22px
    );
}

/* ==========================================================================
   84. NEWS CARD
========================================================================== */

.news-card {
  display: grid;
  min-height:
    clamp(
      190px,
      19vw,
      225px
    );
  grid-template-columns:
    minmax(150px, 0.38fr)
    minmax(0, 0.62fr);
  align-items: stretch;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   News card media
-------------------------------------------------------------------------- */

.news-card__media {
  position: relative;
  display: block;
  min-height: 100%;
  overflow: hidden;
  background:
    var(--surface-muted);
}

.news-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgb(2 6 23 / 2%) 22%,
      rgb(2 12 27 / 10%) 56%,
      rgb(2 12 27 / 48%) 100%
    );
  pointer-events: none;
  content: "";
}

.news-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 16%) 48%,
      transparent 76%
    );
  pointer-events: none;
  content: "";
  transform:
    translateX(-135%);
  transition:
    transform
    900ms
    var(--ease-premium);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform
    800ms
    var(--ease-premium),
    filter
    500ms
    var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Card category
-------------------------------------------------------------------------- */

.news-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding:
    6px 9px;
  border:
    1px solid
    rgb(255 255 255 / 42%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 89%);
  color:
    var(--secondary-800);
  font-size: 0.63rem;
  font-weight: 830;
  line-height: 1;
  box-shadow:
    0 8px 22px
    rgb(2 12 27 / 18%);
  backdrop-filter:
    blur(11px)
    saturate(140%);
}

/* --------------------------------------------------------------------------
   Card content
-------------------------------------------------------------------------- */

.news-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding:
    clamp(
      18px,
      2.4vw,
      24px
    );
}

.news-card__content h3 {
  display:
    -webkit-box;
  margin-top: var(--space-3);
  overflow: hidden;
  font-size:
    clamp(
      1rem,
      1.5vw,
      1.18rem
    );
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-card__content h3 a {
  color:
    var(--text-primary);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.news-card__content h3 a:hover {
  color:
    var(--color-primary);
}

.news-card__content
[data-news-summary] {
  display:
    -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color:
    var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.52;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-card__content
.text-link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.76rem;
}

.news-card__content
.text-link::after {
  display: none;
}

.news-card__content
.text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.news-card__content
.text-link:hover i {
  transform:
    translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .news-card:hover
  .news-card__media::after {
    transform:
      translateX(135%);
  }

  .news-card:hover
  .news-card__media img {
    filter:
      saturate(1.07)
      contrast(1.025);
    transform:
      scale(1.06);
  }
}

/* ==========================================================================
   85. NEWS FILTER ANIMATIONS
========================================================================== */

.news-card.is-filtering,
.news__featured.is-filtering {
  opacity: 0.35;
  pointer-events: none;
  transform:
    scale(0.985);
}

.news-card.is-entering,
.news__featured.is-entering {
  animation:
    news-item-enter
    420ms
    var(--ease-premium)
    both;
}

@keyframes news-item-enter {
  from {
    opacity: 0;
    transform:
      translateY(12px)
      scale(0.985);
  }

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

/* ==========================================================================
   86. NEWS LOADING STATE
========================================================================== */

.news-card.is-loading,
.news__featured.is-loading {
  pointer-events: none;
}

.news-card.is-loading
.news-card__media,
.news-card.is-loading h3,
.news-card.is-loading p,
.news__featured.is-loading
.news__featured-media,
.news__featured.is-loading h3,
.news__featured.is-loading
#news-featured-summary {
  position: relative;
  overflow: hidden;
  background:
    var(--surface-muted);
  color: transparent;
}

.news-card.is-loading h3,
.news__featured.is-loading h3 {
  width: 80%;
  height: 22px;
  border-radius: 7px;
}

.news-card.is-loading p {
  width: 92%;
  height: 46px;
  border-radius: 8px;
}

.news__featured.is-loading
#news-featured-summary {
  width: 94%;
  height: 72px;
  border-radius: 9px;
}

.news-card.is-loading
.news-card__media::after,
.news-card.is-loading h3::after,
.news-card.is-loading p::after,
.news__featured.is-loading
.news__featured-media::after,
.news__featured.is-loading h3::after,
.news__featured.is-loading
#news-featured-summary::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgb(255 255 255 / 67%) 48%,
      transparent 76%
    );
  content: "";
  animation:
    news-shimmer
    1.45s linear infinite;
  transform:
    translateX(-120%);
}

@keyframes news-shimmer {
  to {
    transform:
      translateX(120%);
  }
}

/* ==========================================================================
   87. NEWS — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .news__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.78fr);
  }

  .news-card {
    grid-template-columns:
      135px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .news .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .news__header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .news__layout {
    grid-template-columns: 1fr;
  }

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

  .news-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
  }

  .news-card__media {
    min-height: 190px;
    aspect-ratio:
      16 / 10;
  }
}

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

  .news__tabs {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius:
      var(--radius-lg);
    scrollbar-width: thin;
  }

  .news__tab {
    flex: 0 0 auto;
  }

  .news__header-actions
  .button {
    width: 100%;
  }

  .news__grid {
    grid-template-columns: 1fr;
  }

  .news__featured-content {
    padding: 24px 20px;
  }

  .news-card__media {
    min-height: 205px;
  }
}

@media (max-width: 480px) {
  .news__featured,
  .news-card {
    border-radius:
      var(--radius-lg);
  }

  .news__featured-media {
    aspect-ratio:
      4 / 3;
  }

  .news__featured-content h3 {
    font-size: 1.3rem;
  }

  .news-card__content {
    padding: 20px;
  }
}

/* ==========================================================================
   88. NEWS — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.news__tabs {
  background:
    rgb(15 29 44 / 84%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.news__featured {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 22px 66px
    rgb(0 0 0 / 32%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.news__featured-category,
html[data-color-mode="dark"]
.news-card__category {
  border-color:
    rgb(255 255 255 / 12%);
  background:
    rgb(12 29 42 / 90%);
  color:
    var(--text-primary);
}

html[data-color-mode="dark"]
.news__featured-category[data-category="events"],
html[data-color-mode="dark"]
.news-card__category[data-category="events"] {
  color:
    #93c5fd;
}

html[data-color-mode="dark"]
.news__featured-category[data-category="announcements"],
html[data-color-mode="dark"]
.news-card__category[data-category="announcements"] {
  color:
    #fcd34d;
}

/* ==========================================================================
   89. NEWS — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .news__tab,
  .news__featured,
  .news__featured::before,
  .news__featured-media img,
  .news__featured-media::after,
  .news-card,
  .news-card__media img,
  .news-card__media::after,
  .news__featured-content
  .text-link i,
  .news-card__content
  .text-link i {
    animation: none !important;
    transition: none !important;
  }

  .news__tab:hover,
  .news__featured:hover,
  .news__featured:hover
  .news__featured-media img,
  .news-card:hover,
  .news-card:hover
  .news-card__media img {
    transform: none !important;
  }

  .news-card.is-loading
  .news-card__media::after,
  .news-card.is-loading h3::after,
  .news-card.is-loading p::after,
  .news__featured.is-loading
  .news__featured-media::after,
  .news__featured.is-loading h3::after,
  .news__featured.is-loading
  #news-featured-summary::after {
    animation: none !important;
  }
}

html[data-reduce-motion="true"]
.news__tab,
html[data-reduce-motion="true"]
.news__featured,
html[data-reduce-motion="true"]
.news__featured-media img,
html[data-reduce-motion="true"]
.news-card,
html[data-reduce-motion="true"]
.news-card__media img {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   90. NEWS — PRINT
========================================================================== */

@media print {
  .news__header-actions,
  .news__featured-content
  .text-link,
  .news-card__content
  .text-link {
    display: none !important;
  }

  .news {
    background: #fff !important;
  }

  .news__layout {
    display: block;
  }

  .news__featured {
    margin-bottom: 20px;
  }

  .news__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .news__featured,
  .news-card {
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .news__featured-media,
  .news-card__media {
    height: 150px;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   91. FAQ — FINAL PREMIUM VERSION
========================================================================== */

.faq {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 5% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 94% 88%,
      rgb(59 130 246 / 6%),
      transparent 28%
    ),
    var(--surface-soft);
}

.faq::before {
  position: absolute;
  top: -190px;
  left: -160px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   FAQ layout
-------------------------------------------------------------------------- */

.faq__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);
  align-items: start;
  gap:
    clamp(
      42px,
      7vw,
      92px
    );
}

.faq__introduction {
  position: sticky;
  top:
    calc(
      var(--homepage-header-offset) +
      28px
    );
  min-width: 0;
}

.faq__introduction h2 {
  max-width: 620px;
  margin-top: var(--space-3);
}

.faq__introduction >
p:not(.eyebrow) {
  max-width: 580px;
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size:
    clamp(
      0.94rem,
      1.35vw,
      1.05rem
    );
  line-height: 1.72;
}

/* ==========================================================================
   92. FAQ HELP CARD
========================================================================== */

.faq__help-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top:
    clamp(
      28px,
      4vw,
      40px
    );
  padding:
    clamp(
      20px,
      3vw,
      28px
    );
  overflow: hidden;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      var(--border-default)
    );
  border-radius:
    var(--radius-xl);
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 96%,
        var(--color-primary-soft)
      ),
      color-mix(
        in srgb,
        var(--surface-card) 88%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    0 18px 50px
    rgb(15 23 42 / 10%),
    inset 0 1px 0
    rgb(255 255 255 / 80%);
}

.faq__help-card::before {
  position: absolute;
  top: -90px;
  right: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 16%,
        transparent
      ),
      transparent 68%
    );
  pointer-events: none;
  content: "";
}

.faq__help-card > * {
  position: relative;
  z-index: 1;
}

.faq__help-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 18px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 1.3rem;
  box-shadow:
    0 14px 34px
    rgb(11 133 121 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
  place-items: center;
}

.faq__help-card > div {
  min-width: 0;
}

.faq__help-card strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size:
    clamp(
      1rem,
      1.5vw,
      1.18rem
    );
  font-weight: 840;
  line-height: 1.35;
}

.faq__help-card p {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.faq__help-card .text-link {
  margin-top: var(--space-4);
  font-size: 0.8rem;
}

.faq__help-card .text-link::after {
  display: none;
}

.faq__help-card .text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.faq__help-card .text-link:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   93. FAQ CONTENT
========================================================================== */

.faq__content {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Category tabs
-------------------------------------------------------------------------- */

.faq__categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom:
    clamp(
      18px,
      3vw,
      28px
    );
  padding: 6px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-lg);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 90%,
      transparent
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  backdrop-filter: blur(12px);
}

.faq__categories button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border:
    1px solid
    transparent;
  border-radius:
    var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.faq__categories button:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      transparent
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
  transform: translateY(-1px);
}

.faq__categories
button[aria-selected="true"],
.faq__categories
button[aria-pressed="true"],
.faq__categories
button.is-active {
  border-color: transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 9px 23px
    rgb(11 133 121 / 24%);
}

/* --------------------------------------------------------------------------
   FAQ list
-------------------------------------------------------------------------- */

.faq__list {
  display: grid;
  gap: 12px;
}

/* ==========================================================================
   94. FAQ ACCORDION ITEM
========================================================================== */

.faq-item {
  position: relative;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-lg);
  background:
    linear-gradient(
      150deg,
      var(--surface-elevated),
      color-mix(
        in srgb,
        var(--surface-card) 95%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.faq-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background:
    var(--gradient-primary);
  content: "";
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition:
    opacity
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.faq-item:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      var(--border-default)
    );
  box-shadow:
    0 16px 42px
    rgb(15 23 42 / 9%),
    inset 0 1px 0
    rgb(255 255 255 / 80%);
}

.faq-item.is-open,
.faq-item:has(.faq-item__question[aria-expanded="true"]) {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 42%,
      var(--border-default)
    );
  box-shadow:
    0 20px 54px
    rgb(11 133 121 / 12%),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
}

.faq-item.is-open::before,
.faq-item:has(
  .faq-item__question[aria-expanded="true"]
)::before {
  opacity: 1;
  transform: scaleY(1);
}

.faq-item h3 {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Question button
-------------------------------------------------------------------------- */

.faq-item__question {
  display: flex;
  width: 100%;
  min-height:
    clamp(
      68px,
      7vw,
      84px
    );
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding:
    clamp(
      18px,
      2.5vw,
      25px
    );
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size:
    clamp(
      0.96rem,
      1.45vw,
      1.14rem
    );
  font-weight: 790;
  line-height: 1.4;
  letter-spacing: -0.018em;
  text-align: left;
}

.faq-item__question > span:first-child {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Expand icon
-------------------------------------------------------------------------- */

.faq-item__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 20%,
      var(--border-default)
    );
  border-radius: 13px;
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
  font-size: 1.1rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.faq-item__icon i {
  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.faq-item__question[aria-expanded="true"]
.faq-item__icon {
  border-color: transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 10px 26px
    rgb(11 133 121 / 24%);
  transform:
    rotate(180deg);
}

.faq-item__question[aria-expanded="true"]
.faq-item__icon i {
  transform: rotate(45deg);
}

/* ==========================================================================
   95. FAQ ANSWER
========================================================================== */

.faq-item__answer {
  overflow: hidden;
}

.faq-item__answer[hidden] {
  display: none !important;
}

.faq-item__answer > div {
  padding:
    0
    clamp(
      18px,
      2.5vw,
      25px
    )
    clamp(
      20px,
      3vw,
      28px
    );
  color: var(--text-secondary);
  font-size:
    clamp(
      0.84rem,
      1.2vw,
      0.94rem
    );
  line-height: 1.72;
}

.faq-item__answer p + p {
  margin-top: var(--space-3);
}

.faq-item__answer ul,
.faq-item__answer ol {
  display: grid;
  gap: 7px;
  margin:
    var(--space-3)
    0
    0;
  padding-left: 1.2rem;
}

.faq-item__answer a {
  color: var(--color-primary);
  font-weight: 720;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

/* JS animation compatibility */

.faq-item__answer.is-opening {
  animation:
    faq-answer-enter
    320ms
    var(--ease-premium)
    both;
}

@keyframes faq-answer-enter {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

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

/* ==========================================================================
   96. FAQ FILTER STATES
========================================================================== */

.faq-item.is-filtering {
  opacity: 0.32;
  pointer-events: none;
  transform: scale(0.99);
}

.faq-item.is-entering {
  animation:
    faq-item-enter
    380ms
    var(--ease-premium)
    both;
}

@keyframes faq-item-enter {
  from {
    opacity: 0;
    transform:
      translateY(10px)
      scale(0.99);
  }

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

/* ==========================================================================
   97. FAQ — RESPONSIVE
========================================================================== */

@media (max-width: 1000px) {
  .faq__layout {
    grid-template-columns:
      minmax(260px, 0.64fr)
      minmax(0, 1.36fr);
    gap: 42px;
  }
}

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

  .faq__introduction {
    position: static;
    max-width: 760px;
  }

  .faq__help-card {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .faq__categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    scrollbar-width: thin;
  }

  .faq__categories button {
    flex: 0 0 auto;
  }

  .faq-item__question {
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .faq__help-card {
    flex-direction: column;
    padding: 20px;
    border-radius:
      var(--radius-lg);
  }

  .faq__help-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 16px;
  }

  .faq-item {
    border-radius: 15px;
  }

  .faq-item__question {
    min-height: 66px;
    padding: 17px 16px;
    font-size: 0.94rem;
  }

  .faq-item__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
  }

  .faq-item__answer > div {
    padding:
      0 16px 20px;
  }
}

/* ==========================================================================
   98. FAQ — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.faq__help-card,
html[data-color-mode="dark"]
.faq-item {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 16px 48px
    rgb(0 0 0 / 27%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.faq__categories {
  background:
    rgb(15 29 44 / 84%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.faq-item__icon {
  background:
    rgb(22 166 148 / 11%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

/* ==========================================================================
   99. FAQ — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .faq__categories button,
  .faq-item,
  .faq-item::before,
  .faq-item__icon,
  .faq-item__icon i,
  .faq-item__answer,
  .faq-item.is-entering {
    animation: none !important;
    transition: none !important;
  }

  .faq__categories button:hover,
  .faq-item:hover,
  .faq-item__question[aria-expanded="true"]
  .faq-item__icon,
  .faq-item__question[aria-expanded="true"]
  .faq-item__icon i {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.faq__categories button,
html[data-reduce-motion="true"]
.faq-item,
html[data-reduce-motion="true"]
.faq-item__icon,
html[data-reduce-motion="true"]
.faq-item__icon i,
html[data-reduce-motion="true"]
.faq-item__answer {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   100. FAQ — PRINT
========================================================================== */

@media print {
  .faq__categories,
  .faq__help-card {
    display: none !important;
  }

  .faq {
    background: #fff !important;
  }

  .faq__layout {
    display: block;
  }

  .faq-item {
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .faq-item__icon {
    display: none;
  }

  .faq-item__answer[hidden] {
    display: block !important;
  }

  .faq-item__question,
  .faq-item__answer > div {
    color: #000 !important;
  }
}

/* ==========================================================================
   101. APPOINTMENT CTA — FINAL PREMIUM VERSION
========================================================================== */

.appointment-cta {
  position: relative;
  overflow: clip;
  padding-block:
    clamp(
      48px,
      6vw,
      82px
    );
  background:
    var(--surface-page);
}

.appointment-cta::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 8% 20%,
      color-mix(
        in srgb,
        var(--color-primary) 7%,
        transparent
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(59 130 246 / 6%),
      transparent 28%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   CTA shell
-------------------------------------------------------------------------- */

.appointment-cta__shell {
  position: relative;
  z-index: 1;
  display: flex;
  min-height:
    clamp(
      230px,
      25vw,
      320px
    );
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(
      34px,
      6vw,
      82px
    );
  padding:
    clamp(
      34px,
      5vw,
      64px
    );
  overflow: hidden;
  isolation: isolate;
  border:
    1px solid
    rgb(255 255 255 / 18%);
  border-radius:
    clamp(
      26px,
      3vw,
      42px
    );
  background:
    radial-gradient(
      circle at 12% 12%,
      rgb(150 241 228 / 18%),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgb(59 130 246 / 20%),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      var(--primary-700),
      var(--secondary-900) 72%
    );
  color:
    var(--text-inverse);
  box-shadow:
    0 34px 100px
    rgb(15 23 42 / 25%),
    inset 0 1px 0
    rgb(255 255 255 / 15%);
}

.appointment-cta__shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      110deg,
      rgb(255 255 255 / 5%),
      transparent 42%
    );
  pointer-events: none;
  content: "";
}

.appointment-cta__shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 5%);
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Decorative elements
-------------------------------------------------------------------------- */

.appointment-cta__decor {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.appointment-cta__decor--one {
  top: -150px;
  right: -110px;
  width: 360px;
  height: 360px;
  border:
    1px solid
    rgb(255 255 255 / 12%);
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 10%),
      transparent 68%
    );
  animation:
    appointment-cta-float-one
    9s
    ease-in-out
    infinite;
}

.appointment-cta__decor--two {
  bottom: -180px;
  left: 34%;
  width: 420px;
  height: 420px;
  border:
    1px solid
    rgb(150 241 228 / 10%);
  background:
    radial-gradient(
      circle,
      rgb(150 241 228 / 12%),
      transparent 70%
    );
  animation:
    appointment-cta-float-two
    11s
    ease-in-out
    infinite;
}

@keyframes appointment-cta-float-one {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-18px, 14px, 0)
      scale(1.05);
  }
}

@keyframes appointment-cta-float-two {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(16px, -12px, 0)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   CTA content
-------------------------------------------------------------------------- */

.appointment-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  max-width: 800px;
  align-items: flex-start;
  gap:
    clamp(
      18px,
      3vw,
      28px
    );
}

.appointment-cta__icon {
  display: grid;
  width:
    clamp(
      66px,
      7vw,
      84px
    );
  height:
    clamp(
      66px,
      7vw,
      84px
    );
  flex:
    0 0
    clamp(
      66px,
      7vw,
      84px
    );
  border:
    1px solid
    rgb(255 255 255 / 28%);
  border-radius:
    clamp(
      20px,
      2vw,
      26px
    );
  background:
    rgb(255 255 255 / 11%);
  color:
    #bdf8ee;
  font-size:
    clamp(
      1.55rem,
      3vw,
      2rem
    );
  box-shadow:
    0 18px 44px
    rgb(0 0 0 / 22%),
    inset 0 1px 0
    rgb(255 255 255 / 14%);
  backdrop-filter:
    blur(14px)
    saturate(140%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.appointment-cta__content > div {
  min-width: 0;
}

.appointment-cta__content h2 {
  max-width: 700px;
  margin-top: var(--space-2);
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.65rem,
      3.4vw,
      2.8rem
    );
  letter-spacing: -0.045em;
  text-shadow:
    0 12px 34px
    rgb(0 0 0 / 22%);
}

#appointment-cta-description {
  max-width: 680px;
  margin-top: var(--space-4);
  color:
    rgb(255 255 255 / 70%);
  font-size:
    clamp(
      0.92rem,
      1.35vw,
      1.04rem
    );
  line-height: 1.68;
}

@media (hover: hover) and (pointer: fine) {
  .appointment-cta__shell:hover
  .appointment-cta__icon {
    background:
      rgb(255 255 255 / 16%);
    color:
      #fff;
    box-shadow:
      0 24px 56px
      rgb(0 0 0 / 28%),
      inset 0 1px 0
      rgb(255 255 255 / 18%);
    transform:
      translateY(-4px)
      rotate(-3deg)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   CTA actions
-------------------------------------------------------------------------- */

.appointment-cta__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.appointment-cta__actions
.button {
  min-width: 180px;
}

.appointment-cta__actions
.button--light {
  border-color:
    rgb(255 255 255 / 48%);
  background:
    rgb(255 255 255 / 94%);
  color:
    var(--secondary-950);
  box-shadow:
    0 18px 44px
    rgb(0 0 0 / 24%);
}

.appointment-cta__actions
.button--light:hover {
  background: #fff;
  box-shadow:
    0 24px 58px
    rgb(0 0 0 / 31%);
}

.appointment-cta__actions
.button--transparent {
  border-color:
    rgb(255 255 255 / 24%);
  background:
    rgb(255 255 255 / 7%);
}

.appointment-cta__actions
.button--transparent:hover {
  border-color:
    rgb(255 255 255 / 42%);
  background:
    rgb(255 255 255 / 13%);
}

/* ==========================================================================
   102. NEWSLETTER — FINAL PREMIUM VERSION
========================================================================== */

.newsletter {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 5% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 29%
    ),
    radial-gradient(
      circle at 94% 88%,
      rgb(59 130 246 / 6%),
      transparent 27%
    ),
    var(--surface-page);
}

.newsletter::before {
  position: absolute;
  top: -180px;
  left: -150px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Newsletter shell
-------------------------------------------------------------------------- */

.newsletter__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(400px, 1.1fr);
  align-items: center;
  gap:
    clamp(
      38px,
      6vw,
      80px
    );
  padding:
    clamp(
      30px,
      4.5vw,
      58px
    );
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    linear-gradient(
      150deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 97%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 91%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(20px)
    saturate(140%);
}

.newsletter__shell::before {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.newsletter__shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 8%);
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Newsletter content
-------------------------------------------------------------------------- */

.newsletter__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap:
    clamp(
      17px,
      2.5vw,
      24px
    );
}

.newsletter__icon {
  display: grid;
  width:
    clamp(
      58px,
      6vw,
      72px
    );
  height:
    clamp(
      58px,
      6vw,
      72px
    );
  flex:
    0 0
    clamp(
      58px,
      6vw,
      72px
    );
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 25%,
      transparent
    );
  border-radius:
    clamp(
      18px,
      2vw,
      22px
    );
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.35rem,
      2.6vw,
      1.7rem
    );
  box-shadow:
    0 16px 38px
    rgb(11 133 121 / 25%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
  place-items: center;
}

.newsletter__content > div {
  min-width: 0;
}

.newsletter__content h2 {
  margin-top: var(--space-2);
  font-size:
    clamp(
      1.45rem,
      2.8vw,
      2.2rem
    );
}

#newsletter-description {
  max-width: 580px;
  margin-top: var(--space-3);
  color:
    var(--text-secondary);
  font-size:
    clamp(
      0.88rem,
      1.25vw,
      0.98rem
    );
  line-height: 1.65;
}

/* ==========================================================================
   103. NEWSLETTER FORM
========================================================================== */

.newsletter__form {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Email field
-------------------------------------------------------------------------- */

.newsletter__field {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 7px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      17px,
      2vw,
      22px
    );
  background:
    var(--surface-elevated);
  box-shadow:
    0 12px 34px
    rgb(15 23 42 / 8%),
    inset 0 1px 0
    rgb(255 255 255 / 80%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium);
}

.newsletter__field:focus-within {
  border-color:
    var(--color-primary);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 11%,
      transparent
    ),
    0 18px 46px
    rgb(15 23 42 / 11%),
    inset 0 1px 0
    rgb(255 255 255 / 84%);
}

.newsletter__field > i {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 2;
  color:
    var(--text-muted);
  font-size: 1.06rem;
  pointer-events: none;
  transform:
    translateY(-50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.newsletter__field:focus-within > i {
  color:
    var(--color-primary);
}

.newsletter__field input {
  min-width: 0;
  min-height: 48px;
  flex: 1 1 auto;
  padding:
    11px 14px 11px 43px;
  border: 0;
  border-radius: 14px;
  background:
    transparent;
  color:
    var(--text-primary);
  font-size: 0.88rem;
  font-weight: 620;
  outline: none;
}

.newsletter__field input::placeholder {
  color:
    var(--text-muted);
  opacity: 0.86;
}

.newsletter__field .button {
  flex: 0 0 auto;
  min-width: 142px;
  min-height: 48px;
  border-radius: 14px;
}

.newsletter__field .button i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.newsletter__field .button:hover i {
  transform:
    translateX(4px);
}

/* Validation state */

.newsletter__field.is-invalid,
.newsletter__field:has(
  input[aria-invalid="true"]
) {
  border-color:
    var(--danger-500);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--danger-500) 10%,
      transparent
    );
}

.newsletter__field.is-valid,
.newsletter__field:has(
  input[aria-invalid="false"].is-valid
) {
  border-color:
    var(--success-500);
}

/* --------------------------------------------------------------------------
   Consent
-------------------------------------------------------------------------- */

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  color:
    var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  cursor: pointer;
}

.newsletter__consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color:
    var(--color-primary);
  cursor: pointer;
}

.newsletter__consent span {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Newsletter message
-------------------------------------------------------------------------- */

.newsletter__message {
  min-height: 22px;
  margin-top: var(--space-3);
  color:
    var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.newsletter__message[data-state="loading"],
.newsletter__message.is-loading {
  color:
    var(--color-primary);
}

.newsletter__message[data-state="success"],
.newsletter__message.is-success {
  color:
    var(--success-600);
}

.newsletter__message[data-state="error"],
.newsletter__message.is-error {
  color:
    var(--danger-600);
}

/* --------------------------------------------------------------------------
   Loading button
-------------------------------------------------------------------------- */

.newsletter__form
button[type="submit"].is-loading {
  pointer-events: none;
}

.newsletter__form
button[type="submit"].is-loading i {
  animation:
    newsletter-submit-spin
    850ms linear infinite;
}

@keyframes newsletter-submit-spin {
  to {
    transform:
      rotate(360deg);
  }
}

/* ==========================================================================
   104. APPOINTMENT CTA + NEWSLETTER — RESPONSIVE
========================================================================== */

@media (max-width: 1050px) {
  .appointment-cta__shell {
    align-items: flex-start;
    flex-direction: column;
  }

  .appointment-cta__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .newsletter__shell {
    grid-template-columns:
      minmax(0, 0.8fr)
      minmax(360px, 1.2fr);
    gap: 38px;
  }
}

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

  .newsletter__content {
    max-width: 700px;
  }
}

@media (max-width: 767px) {
  .appointment-cta {
    padding-block:
      42px;
  }

  .appointment-cta__shell {
    padding:
      30px 24px;
    border-radius:
      var(--radius-xl);
  }

  .appointment-cta__content {
    flex-direction: column;
  }

  .appointment-cta__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .appointment-cta__actions
  .button {
    width: 100%;
    min-width: 0;
  }

  .newsletter__shell {
    padding:
      28px 24px;
    border-radius:
      var(--radius-xl);
  }

  .newsletter__field {
    align-items: stretch;
    flex-direction: column;
  }

  .newsletter__field > i {
    top: 32px;
    transform:
      translateY(-50%);
  }

  .newsletter__field input {
    width: 100%;
    min-height: 50px;
  }

  .newsletter__field .button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .appointment-cta__shell {
    padding:
      26px 20px;
    border-radius:
      var(--radius-lg);
  }

  .appointment-cta__icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 18px;
  }

  .appointment-cta__content h2 {
    font-size: 1.55rem;
  }

  .newsletter__shell {
    padding:
      24px 18px;
    border-radius:
      var(--radius-lg);
  }

  .newsletter__content {
    flex-direction: column;
  }

  .newsletter__icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 17px;
  }

  .newsletter__field {
    padding: 6px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   105. APPOINTMENT CTA + NEWSLETTER — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.newsletter__shell {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 28px 82px
    rgb(0 0 0 / 36%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.newsletter__field {
  background:
    rgb(10 25 39 / 88%);
  box-shadow:
    0 14px 38px
    rgb(0 0 0 / 26%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.newsletter__field input {
  color:
    var(--text-primary);
}

/* ==========================================================================
   106. APPOINTMENT CTA + NEWSLETTER — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .appointment-cta__decor,
  .appointment-cta__icon,
  .newsletter__field,
  .newsletter__field .button i,
  .newsletter__form
  button[type="submit"].is-loading i {
    animation: none !important;
    transition: none !important;
  }

  .appointment-cta__shell:hover
  .appointment-cta__icon,
  .newsletter__field .button:hover i {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.appointment-cta__decor,
html[data-reduce-motion="true"]
.appointment-cta__icon,
html[data-reduce-motion="true"]
.newsletter__field,
html[data-reduce-motion="true"]
.newsletter__field .button i {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   107. APPOINTMENT CTA + NEWSLETTER — PRINT
========================================================================== */

@media print {
  .appointment-cta__actions,
  .newsletter {
    display: none !important;
  }

  .appointment-cta {
    padding-block: 20px;
    background: #fff !important;
  }

  .appointment-cta__shell {
    display: block;
    min-height: 0;
    padding: 24px;
    border:
      1px solid #bbb;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
  }

  .appointment-cta__icon,
  .appointment-cta__decor {
    display: none !important;
  }

  .appointment-cta__content h2,
  #appointment-cta-description {
    color: #000 !important;
  }
}
/* ==========================================================================
   101. APPOINTMENT CTA — FINAL PREMIUM VERSION
========================================================================== */

.appointment-cta {
  position: relative;
  overflow: clip;
  padding-block:
    clamp(
      48px,
      6vw,
      82px
    );
  background:
    var(--surface-page);
}

.appointment-cta::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 8% 20%,
      color-mix(
        in srgb,
        var(--color-primary) 7%,
        transparent
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(59 130 246 / 6%),
      transparent 28%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   CTA shell
-------------------------------------------------------------------------- */

.appointment-cta__shell {
  position: relative;
  z-index: 1;
  display: flex;
  min-height:
    clamp(
      230px,
      25vw,
      320px
    );
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(
      34px,
      6vw,
      82px
    );
  padding:
    clamp(
      34px,
      5vw,
      64px
    );
  overflow: hidden;
  isolation: isolate;
  border:
    1px solid
    rgb(255 255 255 / 18%);
  border-radius:
    clamp(
      26px,
      3vw,
      42px
    );
  background:
    radial-gradient(
      circle at 12% 12%,
      rgb(150 241 228 / 18%),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgb(59 130 246 / 20%),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      var(--primary-700),
      var(--secondary-900) 72%
    );
  color:
    var(--text-inverse);
  box-shadow:
    0 34px 100px
    rgb(15 23 42 / 25%),
    inset 0 1px 0
    rgb(255 255 255 / 15%);
}

.appointment-cta__shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      110deg,
      rgb(255 255 255 / 5%),
      transparent 42%
    );
  pointer-events: none;
  content: "";
}

.appointment-cta__shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 5%);
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Decorative elements
-------------------------------------------------------------------------- */

.appointment-cta__decor {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.appointment-cta__decor--one {
  top: -150px;
  right: -110px;
  width: 360px;
  height: 360px;
  border:
    1px solid
    rgb(255 255 255 / 12%);
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 10%),
      transparent 68%
    );
  animation:
    appointment-cta-float-one
    9s
    ease-in-out
    infinite;
}

.appointment-cta__decor--two {
  bottom: -180px;
  left: 34%;
  width: 420px;
  height: 420px;
  border:
    1px solid
    rgb(150 241 228 / 10%);
  background:
    radial-gradient(
      circle,
      rgb(150 241 228 / 12%),
      transparent 70%
    );
  animation:
    appointment-cta-float-two
    11s
    ease-in-out
    infinite;
}

@keyframes appointment-cta-float-one {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-18px, 14px, 0)
      scale(1.05);
  }
}

@keyframes appointment-cta-float-two {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(16px, -12px, 0)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   CTA content
-------------------------------------------------------------------------- */

.appointment-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  max-width: 800px;
  align-items: flex-start;
  gap:
    clamp(
      18px,
      3vw,
      28px
    );
}

.appointment-cta__icon {
  display: grid;
  width:
    clamp(
      66px,
      7vw,
      84px
    );
  height:
    clamp(
      66px,
      7vw,
      84px
    );
  flex:
    0 0
    clamp(
      66px,
      7vw,
      84px
    );
  border:
    1px solid
    rgb(255 255 255 / 28%);
  border-radius:
    clamp(
      20px,
      2vw,
      26px
    );
  background:
    rgb(255 255 255 / 11%);
  color:
    #bdf8ee;
  font-size:
    clamp(
      1.55rem,
      3vw,
      2rem
    );
  box-shadow:
    0 18px 44px
    rgb(0 0 0 / 22%),
    inset 0 1px 0
    rgb(255 255 255 / 14%);
  backdrop-filter:
    blur(14px)
    saturate(140%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.appointment-cta__content > div {
  min-width: 0;
}

.appointment-cta__content h2 {
  max-width: 700px;
  margin-top: var(--space-2);
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.65rem,
      3.4vw,
      2.8rem
    );
  letter-spacing: -0.045em;
  text-shadow:
    0 12px 34px
    rgb(0 0 0 / 22%);
}

#appointment-cta-description {
  max-width: 680px;
  margin-top: var(--space-4);
  color:
    rgb(255 255 255 / 70%);
  font-size:
    clamp(
      0.92rem,
      1.35vw,
      1.04rem
    );
  line-height: 1.68;
}

@media (hover: hover) and (pointer: fine) {
  .appointment-cta__shell:hover
  .appointment-cta__icon {
    background:
      rgb(255 255 255 / 16%);
    color:
      #fff;
    box-shadow:
      0 24px 56px
      rgb(0 0 0 / 28%),
      inset 0 1px 0
      rgb(255 255 255 / 18%);
    transform:
      translateY(-4px)
      rotate(-3deg)
      scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   CTA actions
-------------------------------------------------------------------------- */

.appointment-cta__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.appointment-cta__actions
.button {
  min-width: 180px;
}

.appointment-cta__actions
.button--light {
  border-color:
    rgb(255 255 255 / 48%);
  background:
    rgb(255 255 255 / 94%);
  color:
    var(--secondary-950);
  box-shadow:
    0 18px 44px
    rgb(0 0 0 / 24%);
}

.appointment-cta__actions
.button--light:hover {
  background: #fff;
  box-shadow:
    0 24px 58px
    rgb(0 0 0 / 31%);
}

.appointment-cta__actions
.button--transparent {
  border-color:
    rgb(255 255 255 / 24%);
  background:
    rgb(255 255 255 / 7%);
}

.appointment-cta__actions
.button--transparent:hover {
  border-color:
    rgb(255 255 255 / 42%);
  background:
    rgb(255 255 255 / 13%);
}

/* ==========================================================================
   102. NEWSLETTER — FINAL PREMIUM VERSION
========================================================================== */

.newsletter {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 5% 12%,
      color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
      ),
      transparent 29%
    ),
    radial-gradient(
      circle at 94% 88%,
      rgb(59 130 246 / 6%),
      transparent 27%
    ),
    var(--surface-page);
}

.newsletter::before {
  position: absolute;
  top: -180px;
  left: -150px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Newsletter shell
-------------------------------------------------------------------------- */

.newsletter__shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(400px, 1.1fr);
  align-items: center;
  gap:
    clamp(
      38px,
      6vw,
      80px
    );
  padding:
    clamp(
      30px,
      4.5vw,
      58px
    );
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    linear-gradient(
      150deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 97%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 91%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(20px)
    saturate(140%);
}

.newsletter__shell::before {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.newsletter__shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px
    rgb(255 255 255 / 8%);
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Newsletter content
-------------------------------------------------------------------------- */

.newsletter__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap:
    clamp(
      17px,
      2.5vw,
      24px
    );
}

.newsletter__icon {
  display: grid;
  width:
    clamp(
      58px,
      6vw,
      72px
    );
  height:
    clamp(
      58px,
      6vw,
      72px
    );
  flex:
    0 0
    clamp(
      58px,
      6vw,
      72px
    );
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 25%,
      transparent
    );
  border-radius:
    clamp(
      18px,
      2vw,
      22px
    );
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size:
    clamp(
      1.35rem,
      2.6vw,
      1.7rem
    );
  box-shadow:
    0 16px 38px
    rgb(11 133 121 / 25%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
  place-items: center;
}

.newsletter__content > div {
  min-width: 0;
}

.newsletter__content h2 {
  margin-top: var(--space-2);
  font-size:
    clamp(
      1.45rem,
      2.8vw,
      2.2rem
    );
}

#newsletter-description {
  max-width: 580px;
  margin-top: var(--space-3);
  color:
    var(--text-secondary);
  font-size:
    clamp(
      0.88rem,
      1.25vw,
      0.98rem
    );
  line-height: 1.65;
}

/* ==========================================================================
   103. NEWSLETTER FORM
========================================================================== */

.newsletter__form {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Email field
-------------------------------------------------------------------------- */

.newsletter__field {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 7px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      17px,
      2vw,
      22px
    );
  background:
    var(--surface-elevated);
  box-shadow:
    0 12px 34px
    rgb(15 23 42 / 8%),
    inset 0 1px 0
    rgb(255 255 255 / 80%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium);
}

.newsletter__field:focus-within {
  border-color:
    var(--color-primary);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 11%,
      transparent
    ),
    0 18px 46px
    rgb(15 23 42 / 11%),
    inset 0 1px 0
    rgb(255 255 255 / 84%);
}

.newsletter__field > i {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 2;
  color:
    var(--text-muted);
  font-size: 1.06rem;
  pointer-events: none;
  transform:
    translateY(-50%);
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.newsletter__field:focus-within > i {
  color:
    var(--color-primary);
}

.newsletter__field input {
  min-width: 0;
  min-height: 48px;
  flex: 1 1 auto;
  padding:
    11px 14px 11px 43px;
  border: 0;
  border-radius: 14px;
  background:
    transparent;
  color:
    var(--text-primary);
  font-size: 0.88rem;
  font-weight: 620;
  outline: none;
}

.newsletter__field input::placeholder {
  color:
    var(--text-muted);
  opacity: 0.86;
}

.newsletter__field .button {
  flex: 0 0 auto;
  min-width: 142px;
  min-height: 48px;
  border-radius: 14px;
}

.newsletter__field .button i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.newsletter__field .button:hover i {
  transform:
    translateX(4px);
}

/* Validation state */

.newsletter__field.is-invalid,
.newsletter__field:has(
  input[aria-invalid="true"]
) {
  border-color:
    var(--danger-500);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--danger-500) 10%,
      transparent
    );
}

.newsletter__field.is-valid,
.newsletter__field:has(
  input[aria-invalid="false"].is-valid
) {
  border-color:
    var(--success-500);
}

/* --------------------------------------------------------------------------
   Consent
-------------------------------------------------------------------------- */

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  color:
    var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  cursor: pointer;
}

.newsletter__consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color:
    var(--color-primary);
  cursor: pointer;
}

.newsletter__consent span {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Newsletter message
-------------------------------------------------------------------------- */

.newsletter__message {
  min-height: 22px;
  margin-top: var(--space-3);
  color:
    var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.newsletter__message[data-state="loading"],
.newsletter__message.is-loading {
  color:
    var(--color-primary);
}

.newsletter__message[data-state="success"],
.newsletter__message.is-success {
  color:
    var(--success-600);
}

.newsletter__message[data-state="error"],
.newsletter__message.is-error {
  color:
    var(--danger-600);
}

/* --------------------------------------------------------------------------
   Loading button
-------------------------------------------------------------------------- */

.newsletter__form
button[type="submit"].is-loading {
  pointer-events: none;
}

.newsletter__form
button[type="submit"].is-loading i {
  animation:
    newsletter-submit-spin
    850ms linear infinite;
}

@keyframes newsletter-submit-spin {
  to {
    transform:
      rotate(360deg);
  }
}

/* ==========================================================================
   104. APPOINTMENT CTA + NEWSLETTER — RESPONSIVE
========================================================================== */

@media (max-width: 1050px) {
  .appointment-cta__shell {
    align-items: flex-start;
    flex-direction: column;
  }

  .appointment-cta__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .newsletter__shell {
    grid-template-columns:
      minmax(0, 0.8fr)
      minmax(360px, 1.2fr);
    gap: 38px;
  }
}

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

  .newsletter__content {
    max-width: 700px;
  }
}

@media (max-width: 767px) {
  .appointment-cta {
    padding-block:
      42px;
  }

  .appointment-cta__shell {
    padding:
      30px 24px;
    border-radius:
      var(--radius-xl);
  }

  .appointment-cta__content {
    flex-direction: column;
  }

  .appointment-cta__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .appointment-cta__actions
  .button {
    width: 100%;
    min-width: 0;
  }

  .newsletter__shell {
    padding:
      28px 24px;
    border-radius:
      var(--radius-xl);
  }

  .newsletter__field {
    align-items: stretch;
    flex-direction: column;
  }

  .newsletter__field > i {
    top: 32px;
    transform:
      translateY(-50%);
  }

  .newsletter__field input {
    width: 100%;
    min-height: 50px;
  }

  .newsletter__field .button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .appointment-cta__shell {
    padding:
      26px 20px;
    border-radius:
      var(--radius-lg);
  }

  .appointment-cta__icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 18px;
  }

  .appointment-cta__content h2 {
    font-size: 1.55rem;
  }

  .newsletter__shell {
    padding:
      24px 18px;
    border-radius:
      var(--radius-lg);
  }

  .newsletter__content {
    flex-direction: column;
  }

  .newsletter__icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 17px;
  }

  .newsletter__field {
    padding: 6px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   105. APPOINTMENT CTA + NEWSLETTER — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.newsletter__shell {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 28px 82px
    rgb(0 0 0 / 36%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.newsletter__field {
  background:
    rgb(10 25 39 / 88%);
  box-shadow:
    0 14px 38px
    rgb(0 0 0 / 26%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.newsletter__field input {
  color:
    var(--text-primary);
}

/* ==========================================================================
   106. APPOINTMENT CTA + NEWSLETTER — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .appointment-cta__decor,
  .appointment-cta__icon,
  .newsletter__field,
  .newsletter__field .button i,
  .newsletter__form
  button[type="submit"].is-loading i {
    animation: none !important;
    transition: none !important;
  }

  .appointment-cta__shell:hover
  .appointment-cta__icon,
  .newsletter__field .button:hover i {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.appointment-cta__decor,
html[data-reduce-motion="true"]
.appointment-cta__icon,
html[data-reduce-motion="true"]
.newsletter__field,
html[data-reduce-motion="true"]
.newsletter__field .button i {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   107. APPOINTMENT CTA + NEWSLETTER — PRINT
========================================================================== */

@media print {
  .appointment-cta__actions,
  .newsletter {
    display: none !important;
  }

  .appointment-cta {
    padding-block: 20px;
    background: #fff !important;
  }

  .appointment-cta__shell {
    display: block;
    min-height: 0;
    padding: 24px;
    border:
      1px solid #bbb;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
  }

  .appointment-cta__icon,
  .appointment-cta__decor {
    display: none !important;
  }

  .appointment-cta__content h2,
  #appointment-cta-description {
    color: #000 !important;
  }
}
/* ==========================================================================
   108. CONTACT — FINAL PREMIUM VERSION
========================================================================== */

.contact {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(
      circle at 6% 10%,
      color-mix(
        in srgb,
        var(--color-primary) 9%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 94% 90%,
      rgb(59 130 246 / 7%),
      transparent 28%
    ),
    var(--surface-soft);
}

.contact::before {
  position: absolute;
  top: -190px;
  left: -160px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.contact__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(300px, 0.78fr)
    minmax(0, 1.22fr);
  align-items: start;
  gap:
    clamp(
      36px,
      6vw,
      84px
    );
  margin-top:
    clamp(
      34px,
      5vw,
      54px
    );
}

/* ==========================================================================
   109. CONTACT INFORMATION
========================================================================== */

.contact__information {
  min-width: 0;
}

.contact__cards {
  display: grid;
  gap: 14px;
}

.contact-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
  padding:
    clamp(
      18px,
      2.5vw,
      24px
    );
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-lg);
  background:
    linear-gradient(
      150deg,
      var(--surface-elevated),
      color-mix(
        in srgb,
        var(--surface-card) 94%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.contact-card::before {
  position: absolute;
  top: -80px;
  right: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 13%,
        transparent
      ),
      transparent 68%
    );
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: scale(0.75);
  transition:
    opacity
    var(--duration-normal)
    var(--ease-standard),
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

.contact-card__icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 16px;
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
  font-size: 1.2rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 74%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.contact-card > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.contact-card strong {
  color:
    var(--text-primary);
  font-family:
    var(--font-display);
  font-size: 0.9rem;
  font-weight: 840;
  line-height: 1.3;
}

.contact-card address,
.contact-card a:not(.text-link),
.contact-card #contact-hours {
  color:
    var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-card address {
  font-style: normal;
}

.contact-card small {
  color:
    var(--text-muted);
  font-size: 0.71rem;
  line-height: 1.45;
}

.contact-card .text-link {
  margin-top: 5px;
  font-size: 0.76rem;
}

.contact-card .text-link::after {
  display: none;
}

.contact-card .text-link i {
  transition:
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.contact-card .text-link:hover i {
  transform:
    translate(3px, -3px);
}

@media (hover: hover) and (pointer: fine) {
  .contact-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 36%,
        var(--border-default)
      );
    box-shadow:
      0 18px 48px
      rgb(15 23 42 / 11%),
      inset 0 1px 0
      rgb(255 255 255 / 80%);
    transform:
      translateY(-5px);
  }

  .contact-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .contact-card:hover
  .contact-card__icon {
    background:
      var(--gradient-primary);
    color:
      var(--text-inverse);
    box-shadow:
      0 13px 31px
      rgb(11 133 121 / 24%);
    transform:
      translateY(-2px)
      rotate(-3deg);
  }
}

/* ==========================================================================
   110. CONTACT SOCIAL LINKS
========================================================================== */

.contact__social {
  margin-top:
    clamp(
      22px,
      4vw,
      34px
    );
  padding:
    clamp(
      18px,
      2.5vw,
      24px
    );
  border:
    1px solid
    var(--border-default);
  border-radius:
    var(--radius-lg);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 90%,
      transparent
    );
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  backdrop-filter: blur(12px);
}

.contact__social > strong {
  display: block;
  margin-bottom: 12px;
  color:
    var(--text-primary);
  font-size: 0.84rem;
  font-weight: 820;
}

.contact__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.contact__social-links
.social-link {
  display: grid;
  width: 42px;
  height: 42px;
  border:
    1px solid
    var(--border-default);
  border-radius: 13px;
  background:
    var(--surface-soft);
  color:
    var(--text-secondary);
  font-size: 1.05rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 70%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.contact__social-links
.social-link:hover {
  border-color:
    transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 12px 28px
    rgb(11 133 121 / 23%);
  transform:
    translateY(-3px);
}

/* ==========================================================================
   111. CONTACT FORM
========================================================================== */

.contact-form {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding:
    clamp(
      24px,
      3.8vw,
      42px
    );
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      22px,
      2.8vw,
      var(--radius-2xl)
    );
  background:
    linear-gradient(
      155deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 97%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 92%,
        var(--color-primary-soft)
      )
    );
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(22px)
    saturate(140%);
}

.contact-form::before {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.contact-form > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Form header
-------------------------------------------------------------------------- */

.contact-form__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom:
    clamp(
      24px,
      4vw,
      34px
    );
}

.contact-form__icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 18px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 1.35rem;
  box-shadow:
    0 14px 34px
    rgb(11 133 121 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
  place-items: center;
}

.contact-form__header > div {
  min-width: 0;
}

.contact-form__header h3 {
  font-size:
    clamp(
      1.2rem,
      2vw,
      1.55rem
    );
}

.contact-form__header p {
  margin-top: 6px;
  color:
    var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Form rows
-------------------------------------------------------------------------- */

.contact-form
.form__row {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap:
    clamp(
      14px,
      2vw,
      20px
    );
}

.contact-form
.form__group {
  margin-bottom:
    clamp(
      16px,
      2.5vw,
      22px
    );
}

.contact-form
.form__group label {
  display: block;
  margin-bottom: 7px;
  color:
    var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 780;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border:
    1px solid
    var(--border-default);
  border-radius: 14px;
  background:
    var(--surface-elevated);
  color:
    var(--text-primary);
  font-size: 0.86rem;
  font-weight: 610;
  outline: none;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 72%);
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-fast)
    var(--ease-standard);
}

.contact-form input,
.contact-form select {
  min-height: 49px;
  padding:
    11px 13px;
}

.contact-form textarea {
  min-height: 150px;
  padding:
    13px;
  resize: vertical;
  line-height: 1.6;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:
    var(--text-muted);
  opacity: 0.84;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      var(--border-default)
    );
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color:
    var(--color-primary);
  background:
    var(--surface-elevated);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 11%,
      transparent
    );
}

/* Validation */

.contact-form
:where(
  input,
  select,
  textarea
)[aria-invalid="true"],
.contact-form
:where(
  input,
  select,
  textarea
).is-invalid {
  border-color:
    var(--danger-500);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--danger-500) 9%,
      transparent
    );
}

.contact-form
:where(
  input,
  select,
  textarea
).is-valid {
  border-color:
    var(--success-500);
}

/* --------------------------------------------------------------------------
   Error and field metadata
-------------------------------------------------------------------------- */

.contact-form
.form__error {
  display: block;
  min-height: 17px;
  margin-top: 6px;
  color:
    var(--danger-600);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.contact-form
.form__field-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.contact-form
.form__character-count {
  flex: 0 0 auto;
  margin-top: 6px;
  color:
    var(--text-muted);
  font-size: 0.66rem;
  font-weight: 680;
  line-height: 1.35;
}

.contact-form
.form__character-count.is-near-limit {
  color:
    var(--warning-700);
}

.contact-form
.form__character-count.is-limit {
  color:
    var(--danger-600);
}

/* --------------------------------------------------------------------------
   Consent
-------------------------------------------------------------------------- */

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin:
    2px 0
    clamp(
      18px,
      3vw,
      26px
    );
  color:
    var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  cursor: pointer;
}

.contact-form__consent input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin-top: 1px;
  padding: 0;
  accent-color:
    var(--color-primary);
  cursor: pointer;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Submit button
-------------------------------------------------------------------------- */

.contact-form
.button--full {
  width: 100%;
}

#contact-form-submit.is-loading {
  pointer-events: none;
}

#contact-form-submit.is-loading i {
  animation:
    contact-submit-spin
    850ms linear infinite;
}

@keyframes contact-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Security and status messages
-------------------------------------------------------------------------- */

.contact-form
.form__security-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: var(--space-3);
  color:
    var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
}

.contact-form
.form__security-message i {
  color:
    var(--color-primary);
}

.contact-form
.form__message {
  min-height: 22px;
  margin-top: var(--space-3);
  padding: 0;
  border-radius: 11px;
  color:
    var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.45;
}

.contact-form
.form__message:not(:empty) {
  padding:
    10px 12px;
  border:
    1px solid
    var(--border-default);
  background:
    var(--surface-soft);
}

.contact-form
.form__message[data-state="success"],
.contact-form
.form__message.is-success {
  border-color:
    color-mix(
      in srgb,
      var(--success-500) 28%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--success-50) 86%,
      transparent
    );
  color:
    var(--success-700);
}

.contact-form
.form__message[data-state="error"],
.contact-form
.form__message.is-error {
  border-color:
    color-mix(
      in srgb,
      var(--danger-500) 28%,
      transparent
    );
  background:
    color-mix(
      in srgb,
      var(--danger-50) 86%,
      transparent
    );
  color:
    var(--danger-700);
}

.contact-form
.form__message[data-state="loading"],
.contact-form
.form__message.is-loading {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 25%,
      transparent
    );
  background:
    var(--color-primary-soft);
  color:
    var(--color-primary);
}

/* ==========================================================================
   112. EMERGENCY BANNER
========================================================================== */

.emergency-banner {
  position: relative;
  overflow: hidden;
  padding-block:
    clamp(
      24px,
      3.5vw,
      38px
    );
  isolation: isolate;
  color:
    var(--text-inverse);
  background:
    radial-gradient(
      circle at 12% 20%,
      rgb(255 255 255 / 10%),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--danger-700),
      #7f1d1d 72%
    );
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 12%);
}

.emergency-banner::before {
  position: absolute;
  top: -180px;
  right: -130px;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 12%),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.emergency-banner__inner {
  display: flex;
  align-items: center;
  gap:
    clamp(
      18px,
      3vw,
      30px
    );
}

.emergency-banner__icon {
  display: grid;
  width:
    clamp(
      58px,
      6vw,
      72px
    );
  height:
    clamp(
      58px,
      6vw,
      72px
    );
  flex:
    0 0
    clamp(
      58px,
      6vw,
      72px
    );
  border:
    1px solid
    rgb(255 255 255 / 28%);
  border-radius:
    clamp(
      18px,
      2vw,
      22px
    );
  background:
    rgb(255 255 255 / 11%);
  color:
    #fff;
  font-size:
    clamp(
      1.35rem,
      2.8vw,
      1.8rem
    );
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 14%);
  backdrop-filter: blur(12px);
  place-items: center;
  animation:
    emergency-icon-pulse
    2.2s
    ease-in-out
    infinite;
}

@keyframes emergency-icon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0
      rgb(255 255 255 / 0%),
      inset 0 1px 0
      rgb(255 255 255 / 14%);
  }

  50% {
    box-shadow:
      0 0 0 10px
      rgb(255 255 255 / 7%),
      inset 0 1px 0
      rgb(255 255 255 / 14%);
  }
}

.emergency-banner__content {
  min-width: 0;
  flex: 1 1 auto;
}

.emergency-banner__content strong {
  display: block;
  color:
    var(--text-inverse);
  font-family:
    var(--font-display);
  font-size:
    clamp(
      1.15rem,
      2.2vw,
      1.55rem
    );
  font-weight: 880;
  line-height: 1.3;
}

.emergency-banner__content p {
  max-width: 760px;
  margin-top: 6px;
  color:
    rgb(255 255 255 / 72%);
  font-size:
    clamp(
      0.8rem,
      1.15vw,
      0.9rem
    );
  line-height: 1.55;
}

.emergency-banner__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.button--danger-light {
  border:
    1px solid
    rgb(255 255 255 / 52%);
  background:
    rgb(255 255 255 / 94%);
  color:
    var(--danger-800);
  box-shadow:
    0 16px 40px
    rgb(54 8 8 / 28%);
}

.button--danger-light:hover {
  background: #fff;
  color:
    var(--danger-900);
  box-shadow:
    0 22px 52px
    rgb(54 8 8 / 36%);
  transform:
    translateY(-2px);
}

.emergency-banner
.button--transparent {
  border-color:
    rgb(255 255 255 / 25%);
  background:
    rgb(255 255 255 / 7%);
}

.emergency-banner
.button--transparent:hover {
  border-color:
    rgb(255 255 255 / 42%);
  background:
    rgb(255 255 255 / 13%);
}

/* ==========================================================================
   113. CONTACT + EMERGENCY — RESPONSIVE
========================================================================== */

@media (max-width: 1000px) {
  .contact__layout {
    grid-template-columns:
      minmax(270px, 0.68fr)
      minmax(0, 1.32fr);
    gap: 38px;
  }

  .emergency-banner__inner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .emergency-banner__actions {
    width: 100%;
    padding-left:
      calc(
        clamp(
          58px,
          6vw,
          72px
        ) +
        clamp(
          18px,
          3vw,
          30px
        )
      );
    justify-content: flex-start;
  }
}

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

  .contact__information {
    max-width: 720px;
  }

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

@media (max-width: 767px) {
  .contact__cards,
  .contact-form
  .form__row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding:
      26px 22px;
    border-radius:
      var(--radius-xl);
  }

  .emergency-banner__inner {
    flex-direction: column;
  }

  .emergency-banner__actions {
    width: 100%;
    padding-left: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .emergency-banner__actions
  .button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact-card {
    padding: 18px;
    border-radius: 15px;
  }

  .contact-card__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
  }

  .contact-form {
    padding:
      22px 18px;
    border-radius:
      var(--radius-lg);
  }

  .contact-form__header {
    align-items: center;
  }

  .contact-form__icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 16px;
  }

  .contact-form
  .form__field-meta {
    flex-direction: column;
    gap: 0;
  }

  .contact-form
  .form__character-count {
    align-self: flex-end;
  }

  .emergency-banner {
    padding-block: 28px;
  }

  .emergency-banner__icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 17px;
  }
}

/* ==========================================================================
   114. CONTACT + EMERGENCY — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.contact-card,
html[data-color-mode="dark"]
.contact-form,
html[data-color-mode="dark"]
.contact__social {
  background:
    linear-gradient(
      150deg,
      rgb(18 35 52 / 96%),
      rgb(10 25 39 / 94%)
    );
  box-shadow:
    0 18px 52px
    rgb(0 0 0 / 29%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.contact-form input,
html[data-color-mode="dark"]
.contact-form select,
html[data-color-mode="dark"]
.contact-form textarea {
  background:
    rgb(10 25 39 / 88%);
}

html[data-color-mode="dark"]
.contact-form
.form__message[data-state="success"],
html[data-color-mode="dark"]
.contact-form
.form__message.is-success {
  background:
    rgb(5 150 105 / 11%);
  color:
    #6ee7b7;
}

html[data-color-mode="dark"]
.contact-form
.form__message[data-state="error"],
html[data-color-mode="dark"]
.contact-form
.form__message.is-error {
  background:
    rgb(220 38 38 / 11%);
  color:
    #fca5a5;
}

/* ==========================================================================
   115. CONTACT + EMERGENCY — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .contact-card::before,
  .contact-card__icon,
  .contact-card .text-link i,
  .contact__social-links
  .social-link,
  #contact-form-submit.is-loading i,
  .emergency-banner__icon,
  .button--danger-light {
    animation: none !important;
    transition: none !important;
  }

  .contact-card:hover,
  .contact-card:hover
  .contact-card__icon,
  .contact__social-links
  .social-link:hover,
  .button--danger-light:hover {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.contact-card,
html[data-reduce-motion="true"]
.contact-card__icon,
html[data-reduce-motion="true"]
.contact__social-links
.social-link,
html[data-reduce-motion="true"]
.emergency-banner__icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   116. CONTACT + EMERGENCY — PRINT
========================================================================== */

@media print {
  .contact-form,
  .contact__social,
  .emergency-banner__actions {
    display: none !important;
  }

  .contact,
  .emergency-banner {
    background: #fff !important;
    color: #000 !important;
  }

  .contact__layout {
    display: block;
  }

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

  .contact-card {
    break-inside: avoid;
    border:
      1px solid #bbb;
    background: #fff;
    box-shadow: none;
  }

  .emergency-banner {
    border-top:
      2px solid #900;
    border-bottom:
      2px solid #900;
  }

  .emergency-banner__icon {
    display: none;
  }

  .emergency-banner__content strong,
  .emergency-banner__content p {
    color: #000 !important;
  }
}
/* ==========================================================================
   117. FLOATING ACTIONS — FINAL PREMIUM VERSION
========================================================================== */

.floating-actions {
  position: fixed;
  right:
    clamp(
      14px,
      2vw,
      26px
    );
  bottom:
    clamp(
      16px,
      2.5vw,
      30px
    );
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.floating-action {
  position: relative;
  display: inline-flex;
  min-width: 50px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding:
    11px 15px;
  overflow: hidden;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 28%,
      var(--border-default)
    );
  border-radius:
    var(--radius-pill);
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 94%,
      transparent
    );
  color:
    var(--text-primary);
  font-size: 0.77rem;
  font-weight: 790;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 16px 44px
    rgb(15 23 42 / 17%),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(18px)
    saturate(145%);
  pointer-events: auto;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.floating-action::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgb(255 255 255 / 22%) 48%,
      transparent 76%
    );
  pointer-events: none;
  content: "";
  transform:
    translateX(-135%);
  transition:
    transform
    760ms
    var(--ease-premium);
}

.floating-action > * {
  position: relative;
  z-index: 1;
}

.floating-action i {
  flex: 0 0 auto;
  font-size: 1.08rem;
}

@media (hover: hover) and (pointer: fine) {
  .floating-action:hover {
    border-color:
      color-mix(
        in srgb,
        var(--color-primary) 46%,
        var(--border-default)
      );
    box-shadow:
      0 22px 58px
      rgb(15 23 42 / 23%),
      inset 0 1px 0
      rgb(255 255 255 / 86%);
    transform:
      translateY(-4px);
  }

  .floating-action:hover::before {
    transform:
      translateX(135%);
  }
}

/* --------------------------------------------------------------------------
   Floating action variants
-------------------------------------------------------------------------- */

.floating-action--appointment {
  border-color:
    transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 16px 40px
    rgb(11 133 121 / 31%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
}

.floating-action--appointment:hover {
  color:
    var(--text-inverse);
  box-shadow:
    0 23px 58px
    rgb(11 133 121 / 40%);
}

.floating-action--call {
  border-color:
    color-mix(
      in srgb,
      var(--info-500) 28%,
      transparent
    );
  color:
    var(--info-700);
}

.floating-action--call:hover {
  border-color:
    transparent;
  background:
    linear-gradient(
      135deg,
      var(--info-500),
      var(--info-700)
    );
  color:
    var(--text-inverse);
}

.floating-action--whatsapp {
  border-color:
    rgb(37 211 102 / 30%);
  color:
    #11823b;
}

.floating-action--whatsapp:hover {
  border-color:
    transparent;
  background:
    linear-gradient(
      135deg,
      #25d366,
      #128c4b
    );
  color:
    #fff;
}

.floating-action--chat {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      transparent
    );
  color:
    var(--color-primary);
}

.floating-action--chat:hover,
.floating-action--chat[aria-expanded="true"],
.floating-action--chat.is-active {
  border-color:
    transparent;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
}

.floating-action--top {
  width: 50px;
  min-width: 50px;
  padding: 0;
  border-radius: 16px;
}

.floating-action--top i {
  font-size: 1.18rem;
}

/* --------------------------------------------------------------------------
   Floating action visibility animation
-------------------------------------------------------------------------- */

.floating-action.is-entering {
  animation:
    floating-action-enter
    380ms
    var(--ease-premium)
    both;
}

.floating-action.is-leaving {
  animation:
    floating-action-leave
    240ms
    var(--ease-standard)
    both;
}

@keyframes floating-action-enter {
  from {
    opacity: 0;
    transform:
      translateX(14px)
      scale(0.92);
  }

  to {
    opacity: 1;
    transform:
      translateX(0)
      scale(1);
  }
}

@keyframes floating-action-leave {
  from {
    opacity: 1;
    transform:
      translateX(0)
      scale(1);
  }

  to {
    opacity: 0;
    transform:
      translateX(14px)
      scale(0.92);
  }
}

/* ==========================================================================
   118. LIVE CHAT PANEL — FINAL PREMIUM VERSION
========================================================================== */

.chat-panel {
  position: fixed;
  right:
    clamp(
      14px,
      2vw,
      26px
    );
  bottom:
    clamp(
      84px,
      9vw,
      112px
    );
  z-index: 1450;
  display: grid;
  width:
    min(
      calc(100vw - 28px),
      390px
    );
  height:
    min(
      610px,
      calc(100dvh - 130px)
    );
  grid-template-rows:
    auto minmax(0, 1fr) auto;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      20px,
      2.2vw,
      28px
    );
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 97%,
      transparent
    );
  box-shadow:
    0 34px 100px
    rgb(15 23 42 / 27%),
    inset 0 1px 0
    rgb(255 255 255 / 82%);
  backdrop-filter:
    blur(24px)
    saturate(145%);
  transform-origin:
    right bottom;
}

.chat-panel[hidden] {
  display: none !important;
}

.chat-panel.is-open {
  animation:
    chat-panel-enter
    390ms
    var(--ease-premium)
    both;
}

.chat-panel.is-closing {
  animation:
    chat-panel-leave
    250ms
    var(--ease-standard)
    both;
}

@keyframes chat-panel-enter {
  from {
    opacity: 0;
    transform:
      translateY(18px)
      scale(0.94);
  }

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

@keyframes chat-panel-leave {
  from {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

  to {
    opacity: 0;
    transform:
      translateY(14px)
      scale(0.96);
  }
}

/* --------------------------------------------------------------------------
   Chat header
-------------------------------------------------------------------------- */

.chat-panel__header {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding:
    16px 18px;
  overflow: hidden;
  color:
    var(--text-inverse);
  background:
    radial-gradient(
      circle at 14% 10%,
      rgb(150 241 228 / 17%),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      var(--primary-700),
      var(--secondary-900)
    );
}

.chat-panel__header::before {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 12%),
      transparent 68%
    );
  pointer-events: none;
  content: "";
}

.chat-panel__header > * {
  position: relative;
  z-index: 1;
}

.chat-panel__header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.chat-panel__status {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border:
    2px solid
    rgb(255 255 255 / 74%);
  border-radius: 50%;
  background:
    #34d399;
  box-shadow:
    0 0 0 5px
    rgb(52 211 153 / 13%);
}

.chat-panel__status::after {
  position: absolute;
  inset: -5px;
  border:
    1px solid
    rgb(52 211 153 / 45%);
  border-radius: 50%;
  content: "";
  animation:
    chat-status-pulse
    2.2s
    ease-out
    infinite;
}

@keyframes chat-status-pulse {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }

  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

.chat-panel__header
> div > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.chat-panel__header strong {
  overflow: hidden;
  color:
    var(--text-inverse);
  font-family:
    var(--font-display);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-panel__header small {
  color:
    rgb(255 255 255 / 68%);
  font-size: 0.68rem;
  line-height: 1.3;
}

#chat-panel-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border:
    1px solid
    rgb(255 255 255 / 18%);
  border-radius: 13px;
  background:
    rgb(255 255 255 / 7%);
  color:
    var(--text-inverse);
  font-size: 1.1rem;
  place-items: center;
  transition:
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

#chat-panel-close:hover {
  border-color:
    rgb(255 255 255 / 36%);
  background:
    rgb(255 255 255 / 13%);
  transform:
    rotate(4deg)
    scale(1.04);
}

/* ==========================================================================
   119. CHAT MESSAGES
========================================================================== */

.chat-panel__messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding:
    20px 18px;
  background:
    linear-gradient(
      180deg,
      var(--surface-soft),
      var(--surface-page)
    );
  scrollbar-width: thin;
  scrollbar-color:
    var(--border-strong)
    transparent;
  scroll-behavior: smooth;
}

.chat-panel__messages::-webkit-scrollbar {
  width: 7px;
}

.chat-panel__messages::-webkit-scrollbar-thumb {
  border-radius:
    var(--radius-pill);
  background:
    var(--border-strong);
}

/* --------------------------------------------------------------------------
   Chat message
-------------------------------------------------------------------------- */

.chat-message {
  display: flex;
  max-width: 88%;
  align-items: flex-end;
  gap: 9px;
  animation:
    chat-message-enter
    320ms
    var(--ease-premium)
    both;
}

@keyframes chat-message-enter {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.98);
  }

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

.chat-message__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 22%,
      transparent
    );
  border-radius: 11px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 0.9rem;
  box-shadow:
    0 8px 20px
    rgb(11 133 121 / 20%);
  place-items: center;
}

.chat-message > div {
  min-width: 0;
}

.chat-message p {
  padding:
    11px 13px;
  border:
    1px solid
    var(--border-default);
  border-radius:
    16px 16px 16px 5px;
  background:
    var(--surface-elevated);
  color:
    var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.55;
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 70%);
  overflow-wrap: anywhere;
}

.chat-message time {
  display: block;
  margin-top: 5px;
  padding-inline: 4px;
  color:
    var(--text-muted);
  font-size: 0.6rem;
  line-height: 1.3;
}

/* User message */

.chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message--user p {
  border-color:
    transparent;
  border-radius:
    16px 16px 5px 16px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 10px 26px
    rgb(11 133 121 / 22%);
}

.chat-message--user time {
  text-align: right;
}

.chat-message--user
.chat-message__avatar {
  background:
    linear-gradient(
      135deg,
      var(--secondary-700),
      var(--secondary-900)
    );
}

/* System message */

.chat-message--system {
  align-self: center;
  max-width: 96%;
}

.chat-message--system p {
  border-style: dashed;
  border-radius:
    var(--radius-pill);
  background:
    var(--surface-muted);
  color:
    var(--text-muted);
  font-size: 0.68rem;
  text-align: center;
}

/* Typing state */

.chat-message.is-typing p {
  display: flex;
  min-width: 58px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.chat-message.is-typing p::before,
.chat-message.is-typing p::after,
.chat-message.is-typing p span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:
    var(--text-muted);
  content: "";
  animation:
    chat-typing-dot
    1.2s
    ease-in-out
    infinite;
}

.chat-message.is-typing p span {
  animation-delay: 0.15s;
}

.chat-message.is-typing p::after {
  animation-delay: 0.3s;
}

@keyframes chat-typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ==========================================================================
   120. CHAT FORM
========================================================================== */

.chat-panel__form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    44px;
  align-items: center;
  gap: 9px;
  padding:
    13px 14px;
  border-top:
    1px solid
    var(--border-default);
  background:
    var(--surface-elevated);
}

.chat-panel__form input {
  width: 100%;
  min-height: 44px;
  padding:
    10px 13px;
  border:
    1px solid
    var(--border-default);
  border-radius: 14px;
  background:
    var(--surface-soft);
  color:
    var(--text-primary);
  font-size: 0.79rem;
  font-weight: 610;
  outline: none;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-fast)
    var(--ease-standard);
}

.chat-panel__form input::placeholder {
  color:
    var(--text-muted);
}

.chat-panel__form input:focus {
  border-color:
    var(--color-primary);
  background:
    var(--surface-elevated);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 10%,
      transparent
    );
}

.chat-panel__form button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 1rem;
  box-shadow:
    0 10px 25px
    rgb(11 133 121 / 24%);
  place-items: center;
  transition:
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.chat-panel__form button:hover {
  box-shadow:
    0 15px 34px
    rgb(11 133 121 / 32%);
  transform:
    translateY(-2px);
}

.chat-panel__form button:active {
  transform:
    translateY(0)
    scale(0.97);
}

/* ==========================================================================
   121. COOKIE CONSENT — FINAL PREMIUM VERSION
========================================================================== */

.cookie-consent {
  position: fixed;
  right:
    clamp(
      14px,
      2.5vw,
      34px
    );
  bottom:
    clamp(
      14px,
      2.5vw,
      34px
    );
  left:
    clamp(
      14px,
      2.5vw,
      34px
    );
  z-index: 3000;
  display: flex;
  max-width: 1380px;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(
      24px,
      4vw,
      54px
    );
  margin-inline: auto;
  padding:
    clamp(
      20px,
      3vw,
      30px
    );
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      20px,
      2.4vw,
      30px
    );
  background:
    color-mix(
      in srgb,
      var(--surface-elevated) 94%,
      transparent
    );
  box-shadow:
    0 32px 100px
    rgb(15 23 42 / 28%),
    inset 0 1px 0
    rgb(255 255 255 / 88%);
  backdrop-filter:
    blur(26px)
    saturate(150%);
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent::before {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.cookie-consent.is-visible {
  animation:
    cookie-consent-enter
    480ms
    var(--ease-premium)
    both;
}

.cookie-consent.is-hiding {
  animation:
    cookie-consent-leave
    280ms
    var(--ease-standard)
    both;
}

@keyframes cookie-consent-enter {
  from {
    opacity: 0;
    transform:
      translateY(28px)
      scale(0.98);
  }

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

@keyframes cookie-consent-leave {
  from {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

  to {
    opacity: 0;
    transform:
      translateY(20px)
      scale(0.985);
  }
}

/* --------------------------------------------------------------------------
   Cookie content
-------------------------------------------------------------------------- */

.cookie-consent__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap:
    clamp(
      16px,
      2.5vw,
      24px
    );
}

.cookie-consent__icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-primary) 24%,
      transparent
    );
  border-radius: 18px;
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  font-size: 1.35rem;
  box-shadow:
    0 14px 34px
    rgb(11 133 121 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 22%);
  place-items: center;
}

.cookie-consent__content > div {
  min-width: 0;
}

.cookie-consent__content h2 {
  color:
    var(--text-primary);
  font-size:
    clamp(
      1rem,
      1.7vw,
      1.25rem
    );
  line-height: 1.35;
}

.cookie-consent__content p {
  max-width: 760px;
  margin-top: 7px;
  color:
    var(--text-secondary);
  font-size: 0.77rem;
  line-height: 1.58;
}

.cookie-consent__content p a {
  color:
    var(--color-primary);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   Cookie actions
-------------------------------------------------------------------------- */

.cookie-consent__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.cookie-consent__actions
.button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 0.74rem;
}

/* ==========================================================================
   122. COOKIE SETTINGS MODAL
========================================================================== */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  padding:
    clamp(
      14px,
      3vw,
      34px
    );
  place-items: center;
}

.cookie-modal[hidden] {
  display: none !important;
}

.cookie-modal.is-open {
  animation:
    cookie-modal-enter
    260ms
    var(--ease-standard)
    both;
}

@keyframes cookie-modal-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Cookie backdrop
-------------------------------------------------------------------------- */

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    rgb(2 8 18 / 72%);
  backdrop-filter:
    blur(14px)
    saturate(120%);
}

/* --------------------------------------------------------------------------
   Cookie dialog
-------------------------------------------------------------------------- */

.cookie-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  width:
    min(
      100%,
      680px
    );
  max-height:
    calc(100dvh - 32px);
  grid-template-rows:
    auto minmax(0, 1fr) auto;
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      20px,
      2.4vw,
      30px
    );
  background:
    var(--surface-elevated);
  box-shadow:
    0 40px 120px
    rgb(0 0 0 / 46%),
    inset 0 1px 0
    rgb(255 255 255 / 84%);
  animation:
    cookie-dialog-enter
    380ms
    var(--ease-premium)
    both;
}

@keyframes cookie-dialog-enter {
  from {
    opacity: 0;
    transform:
      translateY(18px)
      scale(0.975);
  }

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

/* --------------------------------------------------------------------------
   Cookie modal header
-------------------------------------------------------------------------- */

.cookie-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding:
    clamp(
      20px,
      3vw,
      28px
    );
  border-bottom:
    1px solid
    var(--border-default);
  background:
    linear-gradient(
      145deg,
      var(--surface-elevated),
      var(--surface-soft)
    );
}

.cookie-modal__header h2 {
  margin-top: 5px;
  font-size:
    clamp(
      1.22rem,
      2.3vw,
      1.65rem
    );
}

.cookie-modal__header
button[data-cookie-action="close"] {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border:
    1px solid
    var(--border-default);
  border-radius: 14px;
  background:
    var(--surface-elevated);
  color:
    var(--text-secondary);
  font-size: 1.1rem;
  box-shadow:
    var(--shadow-xs);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.cookie-modal__header
button[data-cookie-action="close"]:hover {
  border-color:
    color-mix(
      in srgb,
      var(--danger-500) 26%,
      var(--border-default)
    );
  background:
    var(--danger-50);
  color:
    var(--danger-700);
  transform:
    rotate(4deg)
    scale(1.03);
}

/* ==========================================================================
   123. COOKIE SETTINGS
========================================================================== */

.cookie-modal__body {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  padding:
    clamp(
      18px,
      3vw,
      28px
    );
  background:
    var(--surface-page);
  scrollbar-width: thin;
  scrollbar-color:
    var(--border-strong)
    transparent;
}

.cookie-setting {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(
      18px,
      3vw,
      34px
    );
  padding:
    17px 18px;
  border:
    1px solid
    var(--border-default);
  border-radius: 16px;
  background:
    var(--surface-elevated);
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0
    rgb(255 255 255 / 70%);
  cursor: pointer;
  transition:
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.cookie-setting:hover {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      var(--border-default)
    );
  box-shadow:
    0 13px 34px
    rgb(15 23 42 / 8%),
    inset 0 1px 0
    rgb(255 255 255 / 76%);
  transform:
    translateY(-2px);
}

.cookie-setting > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.cookie-setting strong {
  color:
    var(--text-primary);
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.3;
}

.cookie-setting small {
  color:
    var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.48;
}

/* --------------------------------------------------------------------------
   Premium toggle control
-------------------------------------------------------------------------- */

.cookie-setting input[type="checkbox"] {
  position: relative;
  width: 48px;
  height: 27px;
  flex: 0 0 48px;
  appearance: none;
  border:
    1px solid
    var(--border-strong);
  border-radius:
    var(--radius-pill);
  background:
    var(--surface-muted);
  cursor: pointer;
  outline: none;
  transition:
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-fast)
    var(--ease-standard);
}

.cookie-setting
input[type="checkbox"]::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    var(--surface-elevated);
  box-shadow:
    0 3px 9px
    rgb(15 23 42 / 24%);
  content: "";
  transition:
    transform
    var(--duration-normal)
    var(--ease-premium),
    background
    var(--duration-fast)
    var(--ease-standard);
}

.cookie-setting
input[type="checkbox"]:checked {
  border-color:
    var(--color-primary);
  background:
    var(--gradient-primary);
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--color-primary) 9%,
      transparent
    );
}

.cookie-setting
input[type="checkbox"]:checked::before {
  background:
    #fff;
  transform:
    translateX(21px);
}

.cookie-setting
input[type="checkbox"]:focus-visible {
  box-shadow:
    var(--homepage-focus-ring);
}

.cookie-setting
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-setting
input[type="checkbox"]:disabled:checked {
  background:
    linear-gradient(
      135deg,
      var(--neutral-500),
      var(--neutral-700)
    );
}

/* --------------------------------------------------------------------------
   Cookie footer
-------------------------------------------------------------------------- */

.cookie-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding:
    clamp(
      16px,
      2.5vw,
      22px
    )
    clamp(
      20px,
      3vw,
      28px
    );
  border-top:
    1px solid
    var(--border-default);
  background:
    var(--surface-elevated);
}

/* ==========================================================================
   124. FLOATING + CHAT + COOKIES — RESPONSIVE
========================================================================== */

@media (max-width: 767px) {
  .floating-actions {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .floating-action {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 15px;
  }

  .floating-action span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .floating-action i {
    font-size: 1.1rem;
  }

  .chat-panel {
    right: 8px;
    bottom: 70px;
    width:
      calc(100vw - 16px);
    height:
      min(
        620px,
        calc(100dvh - 82px)
      );
    border-radius:
      var(--radius-lg);
  }

  .cookie-consent {
    right: 10px;
    bottom: 10px;
    left: 10px;
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    border-radius:
      var(--radius-lg);
  }

  .cookie-consent__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .cookie-consent__actions
  .button {
    width: 100%;
  }

  .cookie-modal {
    padding: 8px;
  }

  .cookie-modal__dialog {
    max-height:
      calc(100dvh - 16px);
    border-radius:
      var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .chat-panel__header {
    min-height: 70px;
    padding: 14px;
  }

  .chat-panel__messages {
    padding:
      16px 13px;
  }

  .chat-message {
    max-width: 92%;
  }

  .chat-panel__form {
    padding:
      11px;
  }

  .cookie-consent__content {
    flex-direction: column;
  }

  .cookie-consent__icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 16px;
  }

  .cookie-modal__header,
  .cookie-modal__body {
    padding:
      18px;
  }

  .cookie-setting {
    gap: 14px;
    padding: 15px;
  }

  .cookie-modal__footer {
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 16px 18px;
  }

  .cookie-modal__footer
  .button {
    width: 100%;
  }
}

/* ==========================================================================
   125. FLOATING + CHAT + COOKIES — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.floating-action {
  background:
    rgb(15 29 44 / 91%);
  box-shadow:
    0 18px 48px
    rgb(0 0 0 / 36%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.floating-action--appointment,
html[data-color-mode="dark"]
.floating-action--chat[aria-expanded="true"],
html[data-color-mode="dark"]
.floating-action--chat.is-active {
  background:
    var(--gradient-primary);
}

html[data-color-mode="dark"]
.chat-panel,
html[data-color-mode="dark"]
.cookie-consent,
html[data-color-mode="dark"]
.cookie-modal__dialog {
  background:
    rgb(15 29 44 / 96%);
  box-shadow:
    0 38px 110px
    rgb(0 0 0 / 48%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.chat-panel__messages,
html[data-color-mode="dark"]
.cookie-modal__body {
  background:
    linear-gradient(
      180deg,
      rgb(10 25 39),
      rgb(7 20 32)
    );
}

html[data-color-mode="dark"]
.chat-message p,
html[data-color-mode="dark"]
.chat-panel__form,
html[data-color-mode="dark"]
.chat-panel__form input,
html[data-color-mode="dark"]
.cookie-setting,
html[data-color-mode="dark"]
.cookie-modal__footer {
  background:
    rgb(18 35 52 / 92%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

html[data-color-mode="dark"]
.chat-message--user p {
  background:
    var(--gradient-primary);
}

html[data-color-mode="dark"]
.cookie-modal__header {
  background:
    linear-gradient(
      145deg,
      rgb(18 35 52),
      rgb(10 25 39)
    );
}

/* ==========================================================================
   126. FLOATING + CHAT + COOKIES — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .floating-action,
  .floating-action::before,
  .chat-panel,
  .chat-panel__status::after,
  .chat-message,
  .chat-message.is-typing p::before,
  .chat-message.is-typing p::after,
  .chat-message.is-typing p span,
  #chat-panel-close,
  .chat-panel__form button,
  .cookie-consent,
  .cookie-modal,
  .cookie-modal__dialog,
  .cookie-modal__header
  button[data-cookie-action="close"],
  .cookie-setting,
  .cookie-setting
  input[type="checkbox"],
  .cookie-setting
  input[type="checkbox"]::before {
    animation: none !important;
    transition: none !important;
  }

  .floating-action:hover,
  #chat-panel-close:hover,
  .chat-panel__form button:hover,
  .cookie-modal__header
  button[data-cookie-action="close"]:hover,
  .cookie-setting:hover {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.floating-action,
html[data-reduce-motion="true"]
.chat-panel,
html[data-reduce-motion="true"]
.chat-message,
html[data-reduce-motion="true"]
.cookie-consent,
html[data-reduce-motion="true"]
.cookie-modal,
html[data-reduce-motion="true"]
.cookie-modal__dialog,
html[data-reduce-motion="true"]
.cookie-setting {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   127. FLOATING + CHAT + COOKIES — PRINT
========================================================================== */

@media print {
  .floating-actions,
  .chat-panel,
  .cookie-consent,
  .cookie-modal {
    display: none !important;
  }
}

/* ==========================================================================
   128. PREMIUM SITE FOOTER
========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: rgb(255 255 255 / 74%);
  background:
    radial-gradient(
      circle at 8% 8%,
      rgb(22 166 148 / 22%),
      transparent 29%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgb(59 130 246 / 16%),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--secondary-900),
      var(--secondary-950) 72%
    );
}

.site-footer::before,
.site-footer::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(12px);
}

.site-footer::before {
  top: -260px;
  left: -190px;
  width: 600px;
  height: 600px;
  background:
    radial-gradient(
      circle,
      rgb(22 166 148 / 24%),
      transparent 70%
    );
}

.site-footer::after {
  right: -240px;
  bottom: -280px;
  width: 650px;
  height: 650px;
  background:
    radial-gradient(
      circle,
      rgb(59 130 246 / 17%),
      transparent 70%
    );
}

/* ==========================================================================
   129. FOOTER PRIMARY AREA
========================================================================== */

.site-footer__primary {
  position: relative;
  padding-block:
    clamp(
      62px,
      8vw,
      104px
    );
  border-bottom:
    1px solid
    rgb(255 255 255 / 10%);
}

.site-footer__primary::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgb(255 255 255 / 3%),
      transparent 38%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Footer grid
-------------------------------------------------------------------------- */

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(280px, 1.35fr)
    repeat(3, minmax(170px, 0.72fr));
  align-items: start;
  gap:
    clamp(
      34px,
      5vw,
      74px
    );
}

/* ==========================================================================
   130. FOOTER BRAND
========================================================================== */

.site-footer__brand {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Brand link
-------------------------------------------------------------------------- */

.site-footer__brand-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 14px;
  padding:
    5px;
  border-radius: 17px;
  color: inherit;
  transition:
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.site-footer__brand-link:hover {
  background:
    rgb(255 255 255 / 5%);
  transform:
    translateY(-2px);
}

/* --------------------------------------------------------------------------
   Footer logo
-------------------------------------------------------------------------- */

.site-footer__logo {
  width:
    clamp(
      54px,
      6vw,
      68px
    );
  height:
    clamp(
      54px,
      6vw,
      68px
    );
  flex:
    0 0
    clamp(
      54px,
      6vw,
      68px
    );
  padding: 7px;
  overflow: hidden;
  border:
    1px solid
    rgb(255 255 255 / 20%);
  border-radius:
    clamp(
      17px,
      2vw,
      21px
    );
  background:
    rgb(255 255 255 / 94%);
  object-fit: contain;
  box-shadow:
    0 16px 40px
    rgb(0 0 0 / 24%),
    inset 0 1px 0
    rgb(255 255 255 / 96%);
}

/* --------------------------------------------------------------------------
   Organization name and tagline
-------------------------------------------------------------------------- */

.site-footer__brand-link > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.site-footer__brand-link strong {
  overflow: hidden;
  color:
    var(--text-inverse);
  font-family:
    var(--font-display);
  font-size:
    clamp(
      1.08rem,
      1.8vw,
      1.36rem
    );
  font-weight: 880;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer__brand-link small {
  display: -webkit-box;
  overflow: hidden;
  color:
    rgb(255 255 255 / 58%);
  font-size: 0.7rem;
  font-weight: 630;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* --------------------------------------------------------------------------
   Footer description
-------------------------------------------------------------------------- */

.site-footer__description {
  max-width: 450px;
  margin-top:
    clamp(
      20px,
      3vw,
      28px
    );
  color:
    rgb(255 255 255 / 64%);
  font-size:
    clamp(
      0.82rem,
      1.2vw,
      0.9rem
    );
  line-height: 1.72;
}

/* ==========================================================================
   131. FOOTER CERTIFICATION
========================================================================== */

.site-footer__certification {
  display: flex;
  max-width: 430px;
  align-items: flex-start;
  gap: 13px;
  margin-top:
    clamp(
      20px,
      3vw,
      28px
    );
  padding:
    14px 16px;
  border:
    1px solid
    rgb(150 241 228 / 17%);
  border-radius: 16px;
  background:
    rgb(150 241 228 / 6%);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 7%);
  backdrop-filter: blur(12px);
}

.site-footer__certification > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border:
    1px solid
    rgb(150 241 228 / 22%);
  border-radius: 13px;
  background:
    rgb(150 241 228 / 10%);
  color: #96f1e4;
  font-size: 1.1rem;
  place-items: center;
}

.site-footer__certification > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.site-footer__certification strong {
  color:
    var(--text-inverse);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.site-footer__certification small {
  color:
    rgb(255 255 255 / 56%);
  font-size: 0.67rem;
  line-height: 1.45;
}

/* ==========================================================================
   132. FOOTER SOCIAL LINKS
========================================================================== */

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top:
    clamp(
      22px,
      3vw,
      30px
    );
}

.site-footer__social a {
  display: grid;
  width: 42px;
  height: 42px;
  border:
    1px solid
    rgb(255 255 255 / 13%);
  border-radius: 13px;
  background:
    rgb(255 255 255 / 5%);
  color:
    rgb(255 255 255 / 72%);
  font-size: 1.05rem;
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 7%);
  place-items: center;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    background
    var(--duration-fast)
    var(--ease-standard),
    border-color
    var(--duration-fast)
    var(--ease-standard),
    box-shadow
    var(--duration-normal)
    var(--ease-premium),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.site-footer__social a:hover {
  border-color:
    rgb(150 241 228 / 30%);
  background:
    var(--gradient-primary);
  color:
    var(--text-inverse);
  box-shadow:
    0 14px 32px
    rgb(0 0 0 / 24%);
  transform:
    translateY(-3px);
}

/* ==========================================================================
   133. FOOTER COLUMNS
========================================================================== */

.site-footer__column {
  min-width: 0;
}

.site-footer__column h2 {
  position: relative;
  margin-bottom:
    clamp(
      20px,
      3vw,
      28px
    );
  padding-bottom: 12px;
  color:
    var(--text-inverse);
  font-family:
    var(--font-display);
  font-size:
    clamp(
      0.92rem,
      1.4vw,
      1.08rem
    );
  font-weight: 840;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.site-footer__column h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius:
    var(--radius-pill);
  background:
    linear-gradient(
      90deg,
      #96f1e4,
      transparent
    );
  content: "";
}

.site-footer__column ul {
  display: grid;
  gap: 11px;
}

.site-footer__column li {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Footer links
-------------------------------------------------------------------------- */

.site-footer__column a:not(.button) {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  color:
    rgb(255 255 255 / 61%);
  font-size: 0.78rem;
  font-weight: 640;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.site-footer__column
ul:not(.site-footer__contact-list)
a::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background:
    rgb(150 241 228 / 55%);
  content: "";
  transition:
    background
    var(--duration-fast)
    var(--ease-standard),
    transform
    var(--duration-fast)
    var(--ease-premium);
}

.site-footer__column a:not(.button):hover {
  color:
    #bdf8ee;
  transform:
    translateX(4px);
}

.site-footer__column
ul:not(.site-footer__contact-list)
a:hover::before {
  background:
    #96f1e4;
  transform:
    scale(1.35);
}

/* ==========================================================================
   134. FOOTER CONTACT LIST
========================================================================== */

.site-footer__contact-list {
  gap: 14px !important;
}

.site-footer__contact-list li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  color:
    rgb(255 255 255 / 61%);
  font-size: 0.76rem;
  line-height: 1.55;
}

.site-footer__contact-list li > i {
  flex: 0 0 auto;
  margin-top: 3px;
  color:
    #96f1e4;
  font-size: 0.95rem;
}

.site-footer__contact-list address {
  min-width: 0;
  font-style: normal;
  overflow-wrap: anywhere;
}

.site-footer__contact-list a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-footer__contact-list a:hover {
  transform: none;
}

/* --------------------------------------------------------------------------
   Footer directions button
-------------------------------------------------------------------------- */

.button--footer {
  min-height: 44px;
  margin-top:
    clamp(
      20px,
      3vw,
      28px
    );
  border:
    1px solid
    rgb(255 255 255 / 17%);
  border-radius:
    var(--radius-pill);
  background:
    rgb(255 255 255 / 6%);
  color:
    var(--text-inverse);
  box-shadow:
    inset 0 1px 0
    rgb(255 255 255 / 8%);
  backdrop-filter: blur(10px);
}

.button--footer:hover {
  border-color:
    rgb(150 241 228 / 28%);
  background:
    rgb(150 241 228 / 10%);
  color:
    #bdf8ee;
  box-shadow:
    0 14px 34px
    rgb(0 0 0 / 22%);
}

/* ==========================================================================
   135. FOOTER SECONDARY AREA
========================================================================== */

.site-footer__secondary {
  position: relative;
  padding-block:
    clamp(
      20px,
      3vw,
      28px
    );
  background:
    rgb(2 10 20 / 28%);
}

.site-footer__secondary-inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap:
    clamp(
      18px,
      3vw,
      34px
    );
}

.site-footer__secondary-inner > p {
  color:
    rgb(255 255 255 / 50%);
  font-size: 0.68rem;
  line-height: 1.5;
}

.site-footer__powered {
  justify-self: end;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Legal navigation
-------------------------------------------------------------------------- */

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap:
    8px 18px;
}

.site-footer__legal a,
.site-footer__legal button {
  position: relative;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color:
    rgb(255 255 255 / 55%);
  font-size: 0.67rem;
  font-weight: 650;
  line-height: 1.4;
  transition:
    color
    var(--duration-fast)
    var(--ease-standard);
}

.site-footer__legal a::after,
.site-footer__legal button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background:
    #96f1e4;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}

.site-footer__legal a:hover,
.site-footer__legal button:hover {
  color:
    #bdf8ee;
}

.site-footer__legal a:hover::after,
.site-footer__legal button:hover::after {
  transform:
    scaleX(1);
}

/* ==========================================================================
   136. GLOBAL PAGE ERROR STATE
========================================================================== */

.page-error {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  min-height: 100dvh;
  padding:
    clamp(
      20px,
      4vw,
      44px
    );
  overflow-y: auto;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 14% 12%,
      color-mix(
        in srgb,
        var(--danger-500) 12%,
        transparent
      ),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 86%,
      color-mix(
        in srgb,
        var(--color-primary) 13%,
        transparent
      ),
      transparent 34%
    ),
    var(--surface-page);
  place-items: center;
}

.page-error[hidden] {
  display: none !important;
}

.page-error::before {
  position: fixed;
  top: -220px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--danger-500) 10%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

/* --------------------------------------------------------------------------
   Error content card
-------------------------------------------------------------------------- */

.page-error__content {
  position: relative;
  z-index: 1;
  display: grid;
  width:
    min(
      100%,
      680px
    );
  justify-items: center;
  gap: var(--space-4);
  padding:
    clamp(
      34px,
      6vw,
      64px
    );
  overflow: hidden;
  border:
    1px solid
    var(--border-default);
  border-radius:
    clamp(
      24px,
      3vw,
      38px
    );
  background:
    linear-gradient(
      155deg,
      color-mix(
        in srgb,
        var(--surface-elevated) 97%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface-card) 92%,
        var(--danger-50)
      )
    );
  box-shadow:
    0 36px 110px
    rgb(15 23 42 / 20%),
    inset 0 1px 0
    rgb(255 255 255 / 84%);
  text-align: center;
  backdrop-filter:
    blur(24px)
    saturate(140%);
}

.page-error__content::before {
  position: absolute;
  top: -140px;
  right: -110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--danger-500) 14%,
        transparent
      ),
      transparent 70%
    );
  pointer-events: none;
  content: "";
}

.page-error__content > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Error icon
-------------------------------------------------------------------------- */

.page-error__icon {
  display: grid;
  width:
    clamp(
      76px,
      9vw,
      96px
    );
  height:
    clamp(
      76px,
      9vw,
      96px
    );
  border:
    1px solid
    color-mix(
      in srgb,
      var(--danger-500) 26%,
      transparent
    );
  border-radius:
    clamp(
      22px,
      2.7vw,
      30px
    );
  background:
    linear-gradient(
      145deg,
      var(--danger-50),
      color-mix(
        in srgb,
        var(--danger-100) 80%,
        white
      )
    );
  color:
    var(--danger-600);
  font-size:
    clamp(
      2rem,
      4vw,
      2.7rem
    );
  box-shadow:
    0 18px 46px
    color-mix(
      in srgb,
      var(--danger-500) 18%,
      transparent
    ),
    inset 0 1px 0
    rgb(255 255 255 / 88%);
  place-items: center;
  animation:
    page-error-icon-float
    4s
    ease-in-out
    infinite;
}

@keyframes page-error-icon-float {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(0);
  }

  50% {
    transform:
      translateY(-7px)
      rotate(-2deg);
  }
}

/* --------------------------------------------------------------------------
   Error typography
-------------------------------------------------------------------------- */

.page-error__content .eyebrow {
  color:
    var(--danger-600);
}

.page-error__content h1 {
  max-width: 560px;
  color:
    var(--text-primary);
  font-size:
    clamp(
      1.8rem,
      4.2vw,
      3.15rem
    );
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.05em;
}

#page-error-description {
  max-width: 540px;
  color:
    var(--text-secondary);
  font-size:
    clamp(
      0.9rem,
      1.4vw,
      1.04rem
    );
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Error actions
-------------------------------------------------------------------------- */

.page-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top:
    clamp(
      10px,
      2vw,
      18px
    );
}

.page-error__actions .button {
  min-width: 150px;
}

#page-error-retry.is-loading i {
  animation:
    page-error-retry-spin
    850ms linear infinite;
}

@keyframes page-error-retry-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   137. FOOTER + ERROR — RESPONSIVE
========================================================================== */

@media (max-width: 1100px) {
  .site-footer__grid {
    grid-template-columns:
      minmax(280px, 1.2fr)
      repeat(2, minmax(170px, 0.8fr));
  }

  .site-footer__grid
  > :last-child {
    grid-column:
      2 / -1;
  }
}

@media (max-width: 820px) {
  .site-footer__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column:
      1 / -1;
  }

  .site-footer__grid
  > :last-child {
    grid-column: auto;
  }

  .site-footer__secondary-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__powered {
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 580px) {
  .site-footer__primary {
    padding-block:
      56px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__brand,
  .site-footer__grid
  > :last-child {
    grid-column: auto;
  }

  .site-footer__column h2 {
    margin-bottom: 18px;
  }

  .site-footer__legal {
    align-items: center;
    flex-direction: column;
    gap: 8px;
  }

  .page-error__content {
    padding:
      34px 22px;
    border-radius:
      var(--radius-xl);
  }

  .page-error__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .page-error__actions .button {
    width: 100%;
  }
}

/* ==========================================================================
   138. FOOTER + ERROR — DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.page-error__content {
  background:
    linear-gradient(
      155deg,
      rgb(18 35 52 / 97%),
      rgb(10 25 39 / 95%)
    );
  box-shadow:
    0 38px 115px
    rgb(0 0 0 / 48%),
    inset 0 1px 0
    rgb(255 255 255 / 7%);
}

html[data-color-mode="dark"]
.page-error__icon {
  border-color:
    rgb(248 113 113 / 22%);
  background:
    rgb(220 38 38 / 11%);
  color:
    #fca5a5;
  box-shadow:
    0 18px 46px
    rgb(220 38 38 / 15%),
    inset 0 1px 0
    rgb(255 255 255 / 6%);
}

/* ==========================================================================
   139. FOOTER + ERROR — REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-footer__brand-link,
  .site-footer__social a,
  .site-footer__column a,
  .site-footer__column
  ul:not(.site-footer__contact-list)
  a::before,
  .site-footer__legal a::after,
  .site-footer__legal button::after,
  .page-error__icon,
  #page-error-retry.is-loading i {
    animation: none !important;
    transition: none !important;
  }

  .site-footer__brand-link:hover,
  .site-footer__social a:hover,
  .site-footer__column a:hover,
  .page-error__icon {
    transform: none !important;
  }
}

html[data-reduce-motion="true"]
.site-footer__brand-link,
html[data-reduce-motion="true"]
.site-footer__social a,
html[data-reduce-motion="true"]
.site-footer__column a,
html[data-reduce-motion="true"]
.page-error__icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ==========================================================================
   140. FOOTER + ERROR — PRINT
========================================================================== */

@media print {
  .site-footer__social,
  .site-footer__legal,
  .button--footer,
  .page-error {
    display: none !important;
  }

  .site-footer {
    color: #000 !important;
    background: #fff !important;
  }

  .site-footer__primary {
    padding-block: 24px;
    border-top:
      1px solid #bbb;
    border-bottom:
      1px solid #bbb;
  }

  .site-footer__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .site-footer__brand-link strong,
  .site-footer__column h2,
  .site-footer__description,
  .site-footer__column a,
  .site-footer__contact-list li,
  .site-footer__secondary-inner p {
    color: #000 !important;
  }

  .site-footer__secondary {
    padding-block: 14px;
    background: #fff;
  }

  .site-footer__secondary-inner {
    display: block;
    text-align: center;
  }
}

/* ==========================================================================
   MAIN HOMEPAGE FOOTER — FINAL COMPACT PREMIUM OVERRIDE
========================================================================== */

.site-footer {
  min-height: 0;
}

/* Remove legacy padding inherited by the footer grid */

.site-footer__grid {
  padding-block: 0;
}

/* Compact primary footer area */

.site-footer__primary {
  min-height: 0;
  padding-block:
    clamp(
      36px,
      4vw,
      52px
    );
}

/* Balanced desktop structure */

.site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.25fr)
    repeat(3, minmax(150px, 0.75fr));
  align-items: start;
  gap:
    clamp(
      26px,
      3.5vw,
      48px
    );
}

/* ==========================================================================
   COMPACT BRAND
========================================================================== */

.site-footer__brand-link {
  gap: 12px;
  padding: 3px;
}

.site-footer__logo {
  width: 58px;
  height: 58px;
}

.site-footer__brand-link strong {
  font-size:
    clamp(
      1rem,
      1.4vw,
      1.2rem
    );
}

.site-footer__brand-link small {
  font-size: 0.67rem;
}

.site-footer__description {
  max-width: 390px;
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.55;
}

/* Certification appears only when it contains content */

.site-footer__certification {
  margin-top: 16px;
  padding: 12px;
}

.site-footer__certification > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.site-footer__social {
  margin-top: 16px;
  gap: 7px;
}

.site-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* ==========================================================================
   COMPACT LINK COLUMNS
========================================================================== */

.site-footer__column h2 {
  margin-bottom: 14px;
  padding-bottom: 9px;
  font-size: 0.84rem;
}

.site-footer__column h2::after {
  width: 30px;
  height: 2px;
}

.site-footer__column ul {
  gap: 8px;
}

.site-footer__column a:not(.button) {
  font-size: 0.76rem;
  line-height: 1.4;
}

.site-footer__contact-list {
  gap: 9px !important;
}

.site-footer__contact-list li {
  gap: 8px;
  font-size: 0.73rem;
  line-height: 1.45;
}

.site-footer__contact-list li > i {
  margin-top: 2px;
  font-size: 0.88rem;
}

.button--footer {
  min-height: 38px;
  margin-top: 16px;
  padding: 9px 15px;
  font-size: 0.74rem;
}

/* ==========================================================================
   COMPACT LEGAL AREA
========================================================================== */

.site-footer__secondary {
  padding-block:
    clamp(
      12px,
      1.7vw,
      18px
    );
}

.site-footer__secondary-inner {
  gap: 18px;
}

.site-footer__secondary-inner > p,
.site-footer__legal a,
.site-footer__legal button {
  font-size: 0.66rem;
}

.site-footer__legal {
  gap: 6px 15px;
}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 1100px) {
  .site-footer__grid {
    grid-template-columns:
      minmax(240px, 1.1fr)
      repeat(3, minmax(135px, 0.75fr));
    gap: 26px;
  }
}

@media (max-width: 900px) {
  .site-footer__primary {
    padding-block: 36px;
  }

  .site-footer__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 580px) {
  .site-footer__primary {
    padding-block: 30px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__column h2 {
    margin-bottom: 12px;
  }

  .site-footer__secondary {
    padding-block: 14px;
  }

  .site-footer__secondary-inner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
    text-align: left;
  }

  .site-footer__legal {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px 14px;
  }

  .site-footer__powered {
    justify-self: start;
    text-align: left;
  }
}


/* ==========================================================================
   PUBLIC HOMEPAGE — DEFINITIVE PREMIUM MOBILE MENU
========================================================================== */

@media (max-width: 1180px) {
  /* ------------------------------------------------------------------------
     Darkened page backdrop
  ------------------------------------------------------------------------ */

  body:has(.navbar__menu.is-open) {
    overflow: hidden;
  }

  body:has(.navbar__menu.is-open)::before {
    position: fixed;
    z-index: calc(var(--z-dropdown) - 1);
    inset: 0;
    background:
      linear-gradient(
        135deg,
        rgb(3 12 24 / 42%),
        rgb(15 23 42 / 58%)
      );
    content: "";
    opacity: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  /* ------------------------------------------------------------------------
     Compact floating drawer
  ------------------------------------------------------------------------ */

  .navbar__menu {
    position: fixed !important;
    z-index: var(--z-dropdown);
    top:
      calc(
        var(--header-total-height) + 12px
      ) !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;

    display: grid !important;
    width:
      min(
        420px,
        calc(100vw - 32px)
      ) !important;
    max-width: 420px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height:
      calc(
        100dvh -
        var(--header-total-height) -
        26px
      ) !important;

    margin: 0 !important;
    padding: 66px 16px 16px !important;

    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    align-content: start !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    gap: 14px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    visibility: hidden;
    border:
      1px solid
      color-mix(
        in srgb,
        var(--color-primary-border) 68%,
        var(--border-default)
      ) !important;
    border-radius: 24px !important;

    background:
      radial-gradient(
        circle at top right,
        color-mix(
          in srgb,
          var(--color-primary) 10%,
          transparent
        ),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        rgb(255 255 255 / 99%),
        color-mix(
          in srgb,
          var(--surface-soft) 92%,
          var(--color-primary-soft)
        )
      ) !important;

    box-shadow:
      0 32px 80px rgb(2 8 23 / 30%),
      0 10px 30px rgb(15 23 42 / 15%),
      inset 0 1px 0 rgb(255 255 255 / 94%) !important;

    opacity: 0;
    pointer-events: none;

    transform:
      translateY(-12px)
      translateX(10px)
      scale(0.97);

    transform-origin: top right;

    transition:
      visibility 220ms var(--ease-standard),
      opacity 180ms var(--ease-standard),
      transform 260ms var(--ease-premium) !important;

    overscroll-behavior: contain;
    backdrop-filter:
      blur(26px)
      saturate(145%);
    -webkit-backdrop-filter:
      blur(26px)
      saturate(145%);
  }

  .navbar__menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;

    transform:
      translateY(0)
      translateX(0)
      scale(1);
  }

  /* ------------------------------------------------------------------------
     Close button positioned inside the drawer
  ------------------------------------------------------------------------ */

  .navbar__toggle[aria-expanded="true"] {
    position: fixed !important;
    z-index: calc(var(--z-dropdown) + 2);

    top:
      calc(
        var(--header-total-height) + 26px
      ) !important;
    right: 30px !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
      1px solid
      color-mix(
        in srgb,
        var(--color-primary) 70%,
        transparent
      ) !important;
    border-radius: 13px !important;

    background:
      linear-gradient(
        145deg,
        var(--color-primary),
        var(--color-primary-hover)
      ) !important;

    box-shadow:
      0 10px 24px
      color-mix(
        in srgb,
        var(--color-primary) 28%,
        transparent
      ) !important;
  }

  .navbar__toggle[aria-expanded="true"]:hover {
    transform:
      translateY(-1px)
      scale(1.03);
  }

  .navbar__toggle[aria-expanded="true"] span {
    left: 10px;
    width: 20px;
    background: #ffffff;
  }

  .navbar__toggle[aria-expanded="true"]
  span:nth-child(1),
  .navbar__toggle[aria-expanded="true"]
  span:nth-child(3) {
    top: 19px;
  }

  /* ------------------------------------------------------------------------
     Compact navigation grid
  ------------------------------------------------------------------------ */

  .navbar__links {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    align-items: stretch !important;
    align-content: start !important;
    justify-content: stretch !important;

    gap: 7px !important;

    list-style: none !important;
  }

  .navbar__links li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar__link {
    position: relative;

    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    padding: 10px 12px !important;

    align-items: center !important;
    justify-content: flex-start !important;

    overflow: hidden !important;

    border:
      1px solid
      var(--border-subtle) !important;
    border-radius: 12px !important;

    color: var(--text-secondary) !important;
    background:
      rgb(255 255 255 / 66%) !important;

    font-size: 0.83rem !important;
    font-weight: 740 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    box-shadow:
      inset 0 1px 0
      rgb(255 255 255 / 80%);

    transition:
      border-color var(--duration-fast)
      var(--ease-standard),
      color var(--duration-fast)
      var(--ease-standard),
      background-color var(--duration-fast)
      var(--ease-standard),
      transform var(--duration-fast)
      var(--ease-premium) !important;
  }

  .navbar__link::after {
    display: none !important;
  }

  .navbar__link:hover {
    border-color:
      var(--color-primary-border) !important;
    color:
      var(--color-primary) !important;
    background:
      var(--color-primary-soft) !important;
    transform:
      translateY(-1px);
  }

  .navbar__link.is-active {
    border-color:
      var(--color-primary) !important;
    color:
      var(--color-primary) !important;
    background:
      linear-gradient(
        145deg,
        var(--color-primary-soft),
        #ffffff
      ) !important;
    box-shadow:
      0 6px 16px
      color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
      ) !important;
  }

  /* ------------------------------------------------------------------------
     Compact actions area
  ------------------------------------------------------------------------ */

  .navbar__actions {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 14px 0 0 !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    align-items: stretch !important;
    justify-content: stretch !important;

    gap: 8px !important;

    border-top:
      1px solid
      var(--border-subtle) !important;
  }

  .navbar__actions > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .navbar__actions .language-switcher {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  .navbar__actions
  .language-switcher__button {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  .navbar__actions .button {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 9px 11px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   PHONE
========================================================================== */

@media (max-width: 680px) {
  .navbar__menu {
    top:
      calc(
        var(--header-total-height) + 8px
      ) !important;
    right: 10px !important;

    width:
      min(
        400px,
        calc(100vw - 20px)
      ) !important;

    max-width: 400px !important;

    padding:
      62px
      13px
      13px !important;

    gap: 11px !important;
    border-radius: 20px !important;
  }

  .navbar__toggle[aria-expanded="true"] {
    top:
      calc(
        var(--header-total-height) + 20px
      ) !important;
    right: 22px !important;
  }

  .navbar__links {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
    gap: 6px !important;
  }

  .navbar__link {
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  .navbar__actions {
    gap: 7px !important;
    padding-top: 11px !important;
  }

  .navbar__actions .button {
    min-height: 42px !important;
    padding-inline: 8px !important;
    font-size: 0.74rem !important;
  }
}

/* ==========================================================================
   VERY NARROW PHONE
========================================================================== */

@media (max-width: 360px) {
  .navbar__menu {
    right: 8px !important;

    width:
      calc(
        100vw - 16px
      ) !important;

    padding:
      60px
      11px
      11px !important;
  }

  .navbar__toggle[aria-expanded="true"] {
    right: 19px !important;
  }

  .navbar__links {
    grid-template-columns: 1fr !important;
  }

  .navbar__actions {
    grid-template-columns: 1fr !important;
  }

  .navbar__actions .language-switcher {
    grid-column: 1 !important;
  }
}

/* ==========================================================================
   DARK MODE
========================================================================== */

html[data-color-mode="dark"]
.navbar__menu {
  border-color:
    rgb(255 255 255 / 12%) !important;

  background:
    radial-gradient(
      circle at top right,
      color-mix(
        in srgb,
        var(--color-primary) 18%,
        transparent
      ),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgb(12 25 40 / 99%),
      rgb(17 35 52 / 99%)
    ) !important;

  box-shadow:
    0 32px 80px
    rgb(0 0 0 / 48%) !important;
}

html[data-color-mode="dark"]
.navbar__link {
  border-color:
    rgb(255 255 255 / 8%) !important;
  color:
    rgb(255 255 255 / 72%) !important;
  background:
    rgb(255 255 255 / 4%) !important;
}

html[data-color-mode="dark"]
.navbar__link:hover,
html[data-color-mode="dark"]
.navbar__link.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--color-primary) 60%,
      transparent
    ) !important;
  color: #ffffff !important;
  background:
    color-mix(
      in srgb,
      var(--color-primary) 18%,
      transparent
    ) !important;
}
/* ==========================================================================
   MOBILE MENU — FINAL LAYERING, BLUR AND CLICK FIX
========================================================================== */

@media (max-width: 1180px) {
  /* Keep the complete header and its menu above the backdrop */

  body:has(.navbar__menu.is-open)
  .site-header {
    z-index:
      calc(
        var(--z-dropdown) + 10
      ) !important;
    isolation: isolate;
  }

  /* Backdrop remains below the header/menu */

  body:has(.navbar__menu.is-open)::before {
    position: fixed !important;
    z-index:
      calc(
        var(--z-header) - 1
      ) !important;
    inset: 0 !important;

    background:
      linear-gradient(
        135deg,
        rgb(3 12 24 / 28%),
        rgb(15 23 42 / 38%)
      ) !important;

    content: "";
    opacity: 1;

    backdrop-filter:
      blur(2px)
      saturate(90%) !important;

    -webkit-backdrop-filter:
      blur(2px)
      saturate(90%) !important;
  }

  /* Ensure the drawer stays sharp and interactive */

  .navbar__menu {
    z-index:
      calc(
        var(--z-dropdown) + 20
      ) !important;
    isolation: isolate;
  }

  .navbar__menu.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .navbar__menu.is-open,
  .navbar__menu.is-open * {
    filter: none !important;
  }

  /* Close button remains above the menu surface */

  .navbar__toggle[aria-expanded="true"] {
    z-index:
      calc(
        var(--z-dropdown) + 30
      ) !important;
    pointer-events: auto !important;
  }

  /* Floating public actions must not cover the open menu */

  body:has(.navbar__menu.is-open)
  .floating-actions {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform:
      translateY(12px)
      scale(0.96);
  }
}

/* ==========================================================================
   PUBLIC HOMEPAGE HERO — FINAL PREMIUM SLIDER
========================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  overflow: hidden;
  background: var(--secondary-950);
}

/* Give the complete slider one controlled height */

#hero-slider {
  position: relative;
  width: 100%;
  height:
    clamp(
      540px,
      calc(
        100svh -
        var(--header-total-height)
      ),
      820px
    );
  min-height: 540px !important;
  overflow: hidden;
  isolation: isolate;
  background: var(--secondary-950);
}

#hero-slider-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* ==========================================================================
   SLIDES
========================================================================== */

#hero-slider-track .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}

#hero-slider-track
.hero-slide__media,
#hero-slider-track
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hero-slider-track
.hero-slide__picture {
  display: block;
  width: 100%;
  height: 100%;
}

#hero-slider-track
.hero-slide__image,
#hero-slider-track
.hero-slide__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure content uses the complete slide height */

#hero-slider-track
.hero-slide .hero__grid {
  position: relative;
  z-index: 2;
  min-height: 100%;
}

/* ==========================================================================
   PREVIOUS AND NEXT CONTROLS
========================================================================== */

#hero-slider-navigation {
  position: absolute !important;
  z-index: 12;
  top: 50%;
  right: 0;
  left: 0;

  display: flex;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0 22px;

  align-items: center;
  justify-content: space-between;

  pointer-events: none;

  transform: translateY(-50%);
}

#hero-slider-navigation[hidden] {
  display: none !important;
}

#hero-slider-previous,
#hero-slider-next {
  position: relative !important;
  inset: auto !important;

  display: grid;
  width: 48px;
  height: 48px;
  min-width: 48px;

  margin: 0;
  padding: 0;

  place-items: center;

  cursor: pointer;

  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 15px;

  color: #ffffff;
  background:
    rgb(5 18 32 / 48%);

  box-shadow:
    0 12px 28px rgb(0 0 0 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 18%);

  pointer-events: auto;

  backdrop-filter:
    blur(14px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(130%);

  transition:
    border-color var(--duration-fast)
      var(--ease-standard),
    background-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-premium);
}

#hero-slider-previous:hover,
#hero-slider-next:hover {
  border-color:
    rgb(255 255 255 / 58%);
  background:
    var(--color-primary);
  box-shadow:
    0 16px 34px
    color-mix(
      in srgb,
      var(--color-primary) 30%,
      transparent
    );
  transform:
    translateY(-2px)
    scale(1.04);
}

#hero-slider-previous:focus-visible,
#hero-slider-next:focus-visible {
  outline:
    3px solid
    rgb(255 255 255 / 48%);
  outline-offset: 3px;
}

#hero-slider-previous i,
#hero-slider-next i {
  font-size: 1.3rem;
}

/* ==========================================================================
   BOTTOM SLIDER UTILITIES
========================================================================== */

#hero-slider-utilities {
  position: absolute !important;
  z-index: 13;
  right: auto !important;
  bottom: 24px !important;
  left: 50% !important;
  top: auto !important;

  display: flex;
  width: auto;
  min-width: 0;
  height: auto;

  margin: 0;
  padding: 7px 9px;

  align-items: center;
  justify-content: center;
  gap: 9px;

  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--radius-pill);

  color: #ffffff;
  background:
    rgb(5 18 32 / 52%);

  box-shadow:
    0 12px 30px rgb(0 0 0 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 15%);

  transform: translateX(-50%);

  backdrop-filter:
    blur(16px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(135%);
}

#hero-slider-utilities[hidden] {
  display: none !important;
}

/* ==========================================================================
   PAGINATION DOTS
========================================================================== */

#hero-slider-pagination {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#hero-slider-pagination
.hero-slider__dot {
  position: relative;

  display: block;
  width: 8px;
  height: 8px;

  margin: 0;
  padding: 0;

  cursor: pointer;

  border: 0;
  border-radius: var(--radius-pill);

  background:
    rgb(255 255 255 / 48%);

  transition:
    width var(--duration-normal)
      var(--ease-premium),
    background-color var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-premium);
}

#hero-slider-pagination
.hero-slider__dot:hover {
  background:
    rgb(255 255 255 / 82%);
  transform: scale(1.15);
}

#hero-slider-pagination
.hero-slider__dot.is-active,
#hero-slider-pagination
.hero-slider__dot[aria-selected="true"] {
  width: 24px;
  background: #ffffff;
}

/* ==========================================================================
   PAUSE BUTTON
========================================================================== */

#hero-slider-pause {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;

  margin: 0;
  padding: 0;

  place-items: center;

  cursor: pointer;

  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;

  color: #ffffff;
  background:
    rgb(255 255 255 / 10%);

  transition:
    background-color var(--duration-fast)
      var(--ease-standard),
    transform var(--duration-fast)
      var(--ease-premium);
}

#hero-slider-pause:hover {
  background:
    var(--color-primary);
  transform: scale(1.05);
}

#hero-slider-pause i {
  font-size: 1rem;
}

/* ==========================================================================
   SLIDE COUNTER
========================================================================== */

#hero-slider-current,
#hero-slider-total {
  display: inline-block;
  min-width: 12px;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PROGRESS LINE
========================================================================== */

#hero-slider-progress {
  position: absolute !important;
  z-index: 15;
  right: 0;
  bottom: 0;
  left: 0;

  display: block;
  width: 0;
  height: 4px;

  border-radius:
    0 var(--radius-pill)
    var(--radius-pill) 0;

  background:
    linear-gradient(
      90deg,
      var(--color-primary),
      var(--color-accent)
    );

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--color-primary) 48%,
      transparent
    );
}

#hero-slider-progress.is-running {
  animation:
    hero-slider-progress
    var(
      --hero-progress-duration,
      6500ms
    )
    linear forwards;
}

@keyframes hero-slider-progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 900px) {
  #hero-slider {
    height:
      clamp(
        560px,
        78svh,
        720px
      );
    min-height: 560px !important;
  }

  #hero-slider-navigation {
    padding-inline: 14px;
  }

  #hero-slider-previous,
  #hero-slider-next {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
  }

  #hero-slider-utilities {
    bottom: 18px !important;
  }
}

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 600px) {
  #hero-slider {
    height:
      clamp(
        560px,
        82svh,
        680px
      );
    min-height: 560px !important;
  }

  #hero-slider-navigation {
    top: auto;
    right: 14px;
    bottom: 18px;
    left: 14px;

    width: auto;
    height: auto;

    padding: 0;

    justify-content: space-between;

    transform: none;
  }

  #hero-slider-previous,
  #hero-slider-next {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
  }

  #hero-slider-utilities {
    bottom: 18px !important;
    padding: 5px 7px;
    gap: 7px;
  }

  #hero-slider-pause {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}