/* ========================================================================== */
/* İçel İşitme — shared design tokens                                         */
/* Page-specific artwork remains intact; shared geometry and rhythm live here. */
/* ========================================================================== */
      .device-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.2) 32%, transparent 56%),
          radial-gradient(circle at 25% 84%, rgba(244, 213, 145, 0.14) 0, transparent 22%);
        background-size: auto, auto;
        background-repeat: no-repeat;
        background-position: center, center;
        pointer-events: none;
      }


:root {
  /* Color */
  --ds-color-ink: #172033;
  --ds-color-ink-muted: #5d6677;
  --ds-color-navy: #1c2230;
  --ds-color-navy-strong: #0b1020;
  --ds-color-navy-hover: #12192d;
  --ds-color-accent: #f5c94f;
  --ds-color-accent-hover: #ffd866;
  --ds-color-accent-ink: #684b00;
  --ds-color-surface: #ffffff;
  --ds-color-surface-soft: #f7f4ec;
  --ds-color-border: rgba(28, 34, 48, 0.14);
  --ds-color-danger: #b42318;
  --ds-color-info: #175cd3;
  --ds-color-brand-ink: #13284c;
  --ds-color-brand-ink-muted: rgba(19, 40, 76, 0.68);
  --ds-color-brand-blue: #285fc4;
  --ds-color-brand-blue-soft: rgba(66, 120, 213, 0.1);
  --ds-color-brand-blue-border: rgba(40, 95, 196, 0.12);

  /* Typography */
  --ds-font-family: "Poppins", sans-serif;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  --ds-text-xs: 12px;
  --ds-text-sm: 14px;
  --ds-text-md: 16px;
  --ds-text-lg: 18px;
  --ds-title-card: 20px;
  --ds-title-article: clamp(32px, 3.2vw, 44px);
  --ds-title-page: clamp(36px, 4vw, 52px);
  --ds-title-section: clamp(34px, 3vw, 42px);
  --ds-title-display: clamp(42px, 4.4vw, 64px);
  --ds-icon-xs: 16px;
  --ds-icon-sm: 20px;
  --ds-icon-md: 24px;
  --ds-icon-lg: 32px;

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-24: 96px;

  /* Radius */
  --ds-radius-sm: 8px;
  --ds-radius-control: 12px;
  --ds-radius-card: 20px;
  --ds-radius-panel: 28px;
  --ds-radius-pill: 999px;
  --ds-radius-md: var(--ds-radius-card);
  --ds-radius-lg: var(--ds-radius-panel);

  /* Layout and controls */
  --ds-container: 1240px;
  --ds-container-wide: 1440px;
  --ds-container-article: 780px;
  --ds-gutter: clamp(20px, 4vw, 48px);
  --ds-section-space: clamp(64px, 7vw, 96px);
  --ds-control-sm: 44px;
  --ds-control-md: 48px;
  --ds-control-lg: 52px;

  /* Elevation, motion and focus */
  --ds-shadow-sm: 0 8px 24px rgba(28, 34, 48, 0.08);
  --ds-shadow-md: 0 18px 50px rgba(28, 34, 48, 0.12);
  --ds-card-border: 1px solid var(--ds-color-border);
  --ds-card-padding: clamp(20px, 2.4vw, 32px);
  --ds-card-shadow: var(--ds-shadow-sm);
  --ds-card-shadow-hover: var(--ds-shadow-md);
  --ds-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-focus-ring: 0 0 0 4px rgba(245, 201, 79, 0.34);
  --ds-z-header: 100;
  --ds-z-skip: 1000;

  /* Legacy aliases: one source of truth while page styles are migrated. */
  --bg: var(--ds-color-surface);
  --text: var(--ds-color-ink);
  --nav: var(--ds-color-navy);
  --line: var(--ds-color-border);
  --button: var(--ds-color-navy-strong);
  --button-hover: var(--ds-color-navy-hover);
  --accent: var(--ds-color-accent);
  --mobile-nav-top: 156px;
  --ui-container: var(--ds-container);
  --ui-container-wide: var(--ds-container-wide);
  --ui-gutter: var(--ds-gutter);
  --ui-section-space: var(--ds-section-space);
  --ui-radius-sm: var(--ds-radius-sm);
  --ui-radius-control: var(--ds-radius-control);
  --ui-radius-card: var(--ds-radius-card);
  --ui-radius-panel: var(--ds-radius-panel);
  --ui-control-sm: var(--ds-control-sm);
  --ui-control-md: var(--ds-control-md);
  --ui-control-lg: var(--ds-control-lg);
  --ui-text-xs: var(--ds-text-xs);
  --ui-text-sm: var(--ds-text-sm);
  --ui-text-md: var(--ds-text-md);
  --ui-title-card: var(--ds-title-card);
  --ui-title-section: var(--ds-title-section);
  --ui-shadow-card: var(--ds-shadow-sm);
  --ui-transition: var(--ds-transition);
  --ui-breadcrumb-color: rgba(72, 86, 110, 0.7);
  --ui-breadcrumb-link: rgba(43, 58, 87, 0.86);
  --ui-breadcrumb-active: #071a36;
  --ui-pill-color: var(--ds-color-brand-blue);
  --ui-pill-background: var(--ds-color-brand-blue-soft);
  --ui-pill-border: var(--ds-color-brand-blue-border);
}

/* Homepage secondary CTA: cream at rest, blue left-to-right fill on hover. */
.hero-btn.hero-btn--secondary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #0F1523;
  border-color: #0F1523;
  background: transparent;
}

.hero-btn.hero-btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--ds-color-brand-blue);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: 0;
}

.hero-btn.hero-btn--secondary::after {
  content: none;
}

.hero-btn.hero-btn--secondary > .hero-btn-label,
.hero-btn.hero-btn--secondary > i {
  position: relative;
  z-index: 1;
}

.hero-btn.hero-btn--secondary:hover,
.hero-btn.hero-btn--secondary:focus-visible {
  color: #fff;
  border-color: var(--ds-color-brand-blue);
  background: transparent;
}

.hero-btn.hero-btn--secondary:hover::before,
.hero-btn.hero-btn--secondary:focus-visible::before {
  transform: scaleX(1);
}

/* Page-level, editor-managed FAQ and pediatric page */
.page-seo-faq {
  padding: clamp(64px, 7vw, 104px) 24px;
  background: #f5f7fa;
  color: #10284b;
}

.page-seo-faq__shell,
.pediatric-page-shell {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.page-seo-faq h2 {
  max-width: 760px;
  margin: 18px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-seo-faq__intro {
  max-width: 760px;
  margin: 0 0 32px;
  color: #52627a;
  font-size: 17px;
  line-height: 1.7;
}

.page-seo-faq__items {
  display: grid;
  gap: 12px;
  max-width: 900px;
}

.page-seo-faq details {
  border: 1px solid #dbe3ec;
  border-radius: 16px;
  background: #fff;
}

.page-seo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  color: #10284b;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.page-seo-faq summary::-webkit-details-marker {
  display: none;
}

.page-seo-faq summary span {
  flex: 0 0 auto;
  font-size: 24px;
  transition: transform .2s ease;
}

.page-seo-faq details[open] summary span {
  transform: rotate(45deg);
}

.page-seo-faq details > div {
  padding: 0 22px 20px;
  color: #52627a;
  line-height: 1.72;
}

.pediatric-page {
  background: #fff;
  color: #10284b;
}

.pediatric-page-hero {
  padding: 34px 24px clamp(64px, 8vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(65, 150, 255, .18), transparent 34%),
    linear-gradient(145deg, #071a36 0%, #0d2b54 100%);
  color: #fff;
}

.pediatric-page-breadcrumb {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(44px, 6vw, 76px);
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
}

.pediatric-page-breadcrumb a {
  color: #fff;
}

.pediatric-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  align-items: center;
  gap: clamp(44px, 7vw, 96px);
}

.pediatric-page-hero-copy h1 {
  max-width: 700px;
  margin: 20px 0;
  color: #fff;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.pediatric-page-hero-copy > p:last-child {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.65;
}

.pediatric-page-hero-media {
  position: relative;
  margin: 0;
}

.pediatric-page-hero-media::before {
  position: absolute;
  inset: -18px 24px 22px -18px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 32px;
  content: "";
}

.pediatric-page-hero-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  object-fit: cover;
}

.pediatric-page-content {
  padding: clamp(64px, 8vw, 112px) 24px;
}

.pediatric-page-editor {
  max-width: 860px;
  font-size: 18px;
  line-height: 1.75;
}

.pediatric-page-editor h2 {
  margin: 56px 0 18px;
  color: #10284b;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.pediatric-page-editor h2:first-child {
  margin-top: 0;
}

.pediatric-page-editor h3 {
  margin: 36px 0 12px;
  color: #10284b;
  font-size: 25px;
}

.pediatric-page-editor p,
.pediatric-page-editor li {
  color: #52627a;
}

.pediatric-page-cta {
  padding: 0 24px clamp(72px, 9vw, 120px);
}

.pediatric-page-cta .pediatric-page-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(34px, 5vw, 60px);
  border-radius: 28px;
  background: #f0f5fb;
}

.pediatric-page-cta h2 {
  margin: 0 0 10px;
  color: #10284b;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.03em;
}

.pediatric-page-cta p {
  max-width: 680px;
  margin: 0;
  color: #52627a;
  line-height: 1.65;
}

.pediatric-page-cta a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: #10284b;
  color: #fff;
  font-weight: 700;
}

@media (max-width: 900px) {
  .pediatric-page-hero-grid {
    grid-template-columns: 1fr;
  }

  .pediatric-page-hero-media {
    max-width: 680px;
  }

  .pediatric-page-cta .pediatric-page-shell {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .page-seo-faq,
  .pediatric-page-hero,
  .pediatric-page-content,
  .pediatric-page-cta {
    padding-right: 18px;
    padding-left: 18px;
  }

  .page-seo-faq summary {
    padding: 18px;
  }

  .page-seo-faq details > div {
    padding: 0 18px 18px;
  }

  .pediatric-page-hero {
    padding-top: 24px;
  }

  .pediatric-page-hero-copy h1 {
    font-size: clamp(40px, 13vw, 54px);
  }

  .pediatric-page-hero-media::before {
    inset: -10px 12px 12px -10px;
    border-radius: 22px;
  }

  .pediatric-page-hero-media img,
  .pediatric-page-cta .pediatric-page-shell {
    border-radius: 20px;
  }
}

/* Homepage local-intent intro: one clear semantic entry point before the product hero. */
.home-local-intro { padding: clamp(32px, 5vw, 72px) 24px; background: var(--ds-color-surface-soft); border-bottom: 1px solid var(--ds-color-border); }
.home-local-intro__inner { max-width: 1180px; margin: 0 auto; }
.home-local-intro .ui-pill { margin: 0 0 12px; color: var(--ds-color-brand-blue); font-weight: 600; }
.home-local-intro h1 { max-width: 780px; margin: 0; color: var(--ds-color-brand-ink); font-size: clamp(32px, 5vw, 58px); line-height: 1.08; letter-spacing: -0.035em; }
.home-local-intro p:not(.ui-pill) { max-width: 680px; margin: 18px 0 24px; color: var(--ds-color-ink-muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.home-local-intro .ui-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--ds-radius-pill); background: var(--ds-color-navy); color: #fff; font-weight: 600; text-decoration: none; }
.home-local-intro .ui-button:hover, .home-local-intro .ui-button:focus-visible { background: var(--ds-color-navy-hover); color: #fff; }
@media (max-width: 640px) { .home-local-intro { padding-inline: 18px; } }

/* İşitme testi: odyolojik testleri ölçüm rotası, sonuçları açık değerlendirme satırları olarak sunar. */
.service-gutenberg-content .icel-hearing-test {
  --test-ink: #102a56;
  --test-copy: #52627b;
  --test-accent: #2879d8;
  --test-line: #d5e3f2;
  --test-wash: #f3f7fc;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--test-copy);
}

.service-gutenberg-content .icel-hearing-test :where(.wp-block-group),
.service-gutenberg-content .icel-hearing-test .wp-block-group > .wp-block-group__inner-container {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.service-gutenberg-content .icel-hearing-test__intro {
  margin: 0;
  padding: 18px 22px;
  border-left: 4px solid var(--test-accent);
  background: linear-gradient(90deg, var(--test-wash), rgba(243, 247, 252, .25) 78%, transparent);
}

.service-gutenberg-content .icel-hearing-test__intro p,
.service-gutenberg-content .icel-hearing-test__context p,
.service-gutenberg-content .icel-hearing-test__outcome p {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
}

.service-gutenberg-content .icel-hearing-test__intro p {
  max-width: 840px;
  color: var(--test-ink);
}

.service-gutenberg-content .icel-hearing-test__context {
  margin: 24px 0 0;
  padding: 0 0 23px;
  border-bottom: 1px solid var(--test-line);
}

.service-gutenberg-content .icel-hearing-test__context > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.8fr);
  gap: 26px;
}

.service-gutenberg-content .icel-hearing-test h2 {
  margin: 0;
  color: var(--test-ink);
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.service-gutenberg-content .icel-hearing-test__context p {
  max-width: 680px;
}

.service-gutenberg-content .icel-hearing-test__tests {
  margin: 25px 0 0;
}

.service-gutenberg-content .icel-hearing-test__route {
  position: relative;
  margin: 20px 0 0;
}

.service-gutenberg-content .icel-hearing-test__route > .wp-block-group__inner-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.service-gutenberg-content .icel-hearing-test__route > .wp-block-group__inner-container::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6.5px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: var(--test-line);
}

.service-gutenberg-content .icel-hearing-test__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 31px 0 0;
}

.service-gutenberg-content .icel-hearing-test__stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--test-accent);
  box-shadow: 0 0 0 1px var(--test-accent);
  transform: translateX(-50%);
}

.service-gutenberg-content .icel-hearing-test__stage h3 {
  min-height: 2.7em;
  margin: 0;
  color: var(--test-ink);
  font-size: 16px;
  line-height: 1.35;
}

.service-gutenberg-content .icel-hearing-test__stage p {
  margin: 9px 0 0;
  color: var(--test-copy);
  font-size: 13.6px;
  line-height: 1.58;
}

.service-gutenberg-content .icel-hearing-test__outcomes {
  margin: 27px 0 0;
  border-top: 1px solid var(--test-line);
}

.service-gutenberg-content .icel-hearing-test__outcome {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--test-line);
}

.service-gutenberg-content .icel-hearing-test__outcome > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.8fr);
  gap: 26px;
}

.service-gutenberg-content .icel-hearing-test__outcome > .wp-block-group__inner-container > :not(h2) {
  grid-column: 2;
}

.service-gutenberg-content .icel-hearing-test__outcome p + p {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .service-gutenberg-content .icel-hearing-test__intro {
    padding: 16px;
  }

  .service-gutenberg-content .icel-hearing-test__intro p,
  .service-gutenberg-content .icel-hearing-test__context p,
  .service-gutenberg-content .icel-hearing-test__outcome p {
    font-size: 14.25px;
    line-height: 1.64;
  }

  .service-gutenberg-content .icel-hearing-test__context > .wp-block-group__inner-container,
  .service-gutenberg-content .icel-hearing-test__outcome > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .service-gutenberg-content .icel-hearing-test__context {
    margin-top: 20px;
    padding-bottom: 19px;
  }

  .service-gutenberg-content .icel-hearing-test h2 {
    font-size: 19px;
  }

  .service-gutenberg-content .icel-hearing-test__tests {
    margin-top: 21px;
  }

  .service-gutenberg-content .icel-hearing-test__route {
    margin-top: 18px;
  }

  .service-gutenberg-content .icel-hearing-test__route > .wp-block-group__inner-container {
    display: block;
  }

  .service-gutenberg-content .icel-hearing-test__route > .wp-block-group__inner-container::before {
    display: none;
  }

  .service-gutenberg-content .icel-hearing-test__stage {
    padding: 0 0 20px 32px;
  }

  .service-gutenberg-content .icel-hearing-test__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 7px;
    bottom: -7px;
    left: 6.5px;
    width: 1px;
    background: var(--test-line);
  }

  .service-gutenberg-content .icel-hearing-test__stage::before {
    left: 0;
    transform: none;
  }

  .service-gutenberg-content .icel-hearing-test__stage h3 {
    min-height: 0;
    font-size: 15.5px;
  }

  .service-gutenberg-content .icel-hearing-test__stage p {
    margin-top: 6px;
    font-size: 13.75px;
    line-height: 1.58;
  }

  .service-gutenberg-content .icel-hearing-test__outcomes {
    margin-top: 2px;
  }

  .service-gutenberg-content .icel-hearing-test__outcome {
    padding: 17px 0;
  }

  .service-gutenberg-content .icel-hearing-test__outcome > .wp-block-group__inner-container > :not(h2) {
    grid-column: auto;
  }
}

/* Hearing guide CTA — compact consultation panel (authoritative overrides are appended below). */
.hearing-knowledge-cta {
  padding: 20px 0 76px;
}

.hearing-knowledge-cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 14%, rgba(80, 135, 218, 0.2), transparent 29%),
    linear-gradient(116deg, #071a3a 0%, #0a2859 58%, #0b3474 100%);
  box-shadow: 0 24px 60px rgba(7, 26, 59, 0.14);
  color: #fff;
}

.hearing-knowledge-cta-card::before {
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -70px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255, 255, 255, 0.025), 0 0 0 108px rgba(255, 255, 255, 0.018);
  content: "";
}

.hearing-knowledge-cta-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
  max-width: none;
}

.hearing-knowledge-cta-message {
  max-width: 660px;
}

.hearing-knowledge-cta-copy .hearing-knowledge-pill {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e0b75d;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.hearing-knowledge-cta h2 {
  max-width: 650px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  text-wrap: balance;
}

.hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 610px;
  margin: 16px 0 0;
  color: #c8d4e6;
  font-size: 15.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.hearing-knowledge-cta-panel {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.hearing-knowledge-cta-panel-label {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
}

.hearing-knowledge-cta-panel-label i {
  color: #e0b75d;
  font-size: 19px;
}

.hearing-knowledge-cta-panel ul {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.hearing-knowledge-cta-panel li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #d3ddec;
  font-size: 12.5px;
}

.hearing-knowledge-cta-panel li i {
  color: #e0b75d;
}

.hearing-knowledge-cta-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hearing-knowledge-cta .hearing-knowledge-button--primary {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(3, 16, 39, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
  white-space: nowrap;
}

.hearing-knowledge-cta .hearing-knowledge-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 16, 39, 0.26);
}

.hearing-knowledge-cta .hearing-knowledge-button--primary:active {
  transform: translateY(0) scale(0.98);
}

.hearing-knowledge-cta-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.hearing-knowledge-cta-link:hover {
  color: #e8c87f;
}

.hearing-knowledge-cta-card.has-image {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 0;
  padding: 0;
}

.hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: clamp(34px, 4vw, 48px);
}

@media (max-width: 991px) {
  .hearing-knowledge-cta-copy {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
    gap: 28px;
  }
}

@media (max-width: 760px) {
  .hearing-knowledge-cta {
    padding: 8px 0 58px;
  }

  .hearing-knowledge-cta-card,
  .hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy {
    padding: 26px 20px 18px;
  }

  .hearing-knowledge-cta-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hearing-knowledge-cta h2 {
    font-size: clamp(27px, 8vw, 31px);
    line-height: 1.02;
  }

  .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
    font-size: 14.5px;
  }

  .hearing-knowledge-cta-panel {
    padding: 18px;
  }

  .hearing-knowledge-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hearing-knowledge-cta .hearing-knowledge-button--primary {
    width: auto;
  }

  .hearing-knowledge-cta-link {
    justify-content: center;
    min-height: 36px;
  }
}

/* Final cascade: preserve the shared guide hierarchy after legacy page rules. */
.cochlear-detail-page .cochlear-hero h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.cochlear-detail-page .cochlear-lede {
  max-width: 62ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section h2 {
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section h3 {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.22;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section p,
.cochlear-detail-page .cochlear-editor-content .cochlear-content-section li {
  color: #34445c;
  font-size: 16.5px;
  line-height: 1.75;
}

@media (max-width: 760px) {
  .cochlear-detail-page .cochlear-hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.04;
  }

  .cochlear-detail-page .cochlear-lede {
    font-size: 16px;
  }

  .cochlear-detail-page .cochlear-editor-content .cochlear-content-section p,
  .cochlear-detail-page .cochlear-editor-content .cochlear-content-section li {
    font-size: 16px;
    line-height: 1.72;
  }
}

/* Koklear implant bilgi rehberi — işitme rehberiyle ortak okuma sistemi */
.cochlear-detail-page {
  --cochlear-ink: #071a3b;
  --cochlear-blue: #0b5eae;
  --cochlear-blue-dark: #06437f;
  --cochlear-gold: #d5a535;
  --cochlear-surface: #f4f8fc;
  --cochlear-line: #dce6f0;
  color: var(--cochlear-ink);
}

.cochlear-detail-page .cochlear-hero {
  padding: 24px 0 48px;
}

.cochlear-detail-page .cochlear-breadcrumb {
  margin-bottom: 20px;
  font-size: 13px;
}

.cochlear-detail-page .cochlear-layout {
  grid-template-columns: minmax(0, 1.06fr) minmax(400px, 0.94fr);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid #d6e2ef;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 100%);
  box-shadow: 0 24px 58px rgba(7, 26, 59, 0.1);
}

.cochlear-detail-page .cochlear-hero-card {
  padding: clamp(40px, 4.7vw, 64px);
}

.cochlear-detail-page .cochlear-kicker {
  color: var(--cochlear-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cochlear-detail-page .cochlear-hero h1 {
  max-width: 720px;
  margin-top: 14px;
  color: var(--cochlear-ink);
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.cochlear-detail-page .cochlear-lede {
  max-width: 62ch;
  margin-top: 20px;
  color: #40516b;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
}

.cochlear-detail-page .cochlear-quick-grid {
  gap: 10px;
  margin-top: 30px;
}

.cochlear-detail-page .cochlear-quick-item {
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid rgba(11, 94, 174, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.cochlear-detail-page .cochlear-quick-item strong {
  font-size: 13px;
  line-height: 1.3;
}

.cochlear-detail-page .cochlear-quick-item p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

.cochlear-detail-page .cochlear-hero-visual {
  min-height: 480px;
}

.cochlear-detail-page .cochlear-hero-visual::before {
  background: linear-gradient(90deg, #edf5fc 0%, rgba(237, 245, 252, 0.18) 42%, rgba(237, 245, 252, 0) 100%);
}

.cochlear-mobile-guide {
  display: none;
}

.cochlear-detail-page .cochlear-body {
  padding: 72px 0 58px;
}

.cochlear-detail-page .cochlear-body-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.cochlear-detail-page .cochlear-editor-content {
  min-width: 0;
}

.cochlear-detail-page .cochlear-editor-content > * {
  max-width: 72ch;
}

.cochlear-detail-page .cochlear-editor-content p,
.cochlear-detail-page .cochlear-editor-content li {
  color: #34445c;
  font-size: 16.5px;
  line-height: 1.75;
}

.cochlear-detail-page .cochlear-editor-content h2 {
  margin-top: 48px;
  color: var(--cochlear-ink);
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cochlear-detail-page .cochlear-editor-content h3 {
  margin-top: 34px;
  color: var(--cochlear-ink);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.22;
}

.cochlear-detail-page .cochlear-editor-content a {
  color: var(--cochlear-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cochlear-detail-page .cochlear-side {
  position: sticky;
  top: 110px;
}

.cochlear-detail-page .cochlear-toc {
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--cochlear-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(7, 26, 59, 0.07);
}

.cochlear-detail-page .cochlear-toc h2 {
  margin: 0;
  padding: 12px 12px 14px;
  color: #66758a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cochlear-detail-page .cochlear-toc a {
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #3e4f68;
  font-size: 13px;
  line-height: 1.3;
}

.cochlear-detail-page .cochlear-toc a:hover {
  background: var(--cochlear-surface);
  color: var(--cochlear-blue-dark);
}

.cochlear-detail-page .cochlear-toc a.is-active {
  background: #eaf3fc;
  color: var(--cochlear-blue-dark);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--cochlear-blue);
}

.cochlear-detail-page .cochlear-side-cta {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #cfe0ef;
  border-radius: 18px;
  background: var(--cochlear-surface);
  color: var(--cochlear-ink);
}

.cochlear-detail-page .cochlear-side-cta h2 {
  font-size: 20px;
  line-height: 1.18;
}

.cochlear-detail-page .cochlear-side-cta p {
  color: #53657c;
  font-size: 13.5px;
  line-height: 1.55;
}

.cochlear-detail-page .cochlear-side-cta a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid var(--cochlear-blue);
  border-radius: 10px;
  background: transparent;
  color: var(--cochlear-blue-dark);
  font-size: 13px;
  font-weight: 800;
}

.cochlear-detail-page .cochlear-side-cta a:hover {
  background: #fff;
}

.cochlear-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: none !important;
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid var(--cochlear-line);
}

.cochlear-pagination-link {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 94px;
  padding: 18px;
  border: 1px solid var(--cochlear-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cochlear-ink) !important;
  text-decoration: none !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cochlear-pagination-link:hover {
  transform: translateY(-2px);
  border-color: #aac6e0;
  box-shadow: 0 12px 28px rgba(7, 26, 59, 0.08);
}

.cochlear-pagination-link.is-next {
  justify-content: flex-end;
  text-align: right;
}

.cochlear-pagination-link > i {
  flex: 0 0 auto;
  color: var(--cochlear-blue);
  font-size: 20px;
}

.cochlear-pagination-link span {
  display: grid;
  gap: 5px;
}

.cochlear-pagination-link small {
  color: #77869a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cochlear-pagination-link strong {
  font-size: 14px;
  line-height: 1.35;
}

.cochlear-related {
  padding: 62px 0 72px;
  border-top: 1px solid var(--cochlear-line);
  background: var(--cochlear-surface);
}

.cochlear-related-kicker {
  margin: 0 0 10px;
  color: var(--cochlear-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cochlear-related h2 {
  margin: 0;
  color: var(--cochlear-ink);
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.cochlear-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.cochlear-related-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 150px;
  padding: 24px;
  border: 1px solid var(--cochlear-line);
  border-radius: 18px;
  background: #fff;
  color: var(--cochlear-ink);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cochlear-related-card:hover {
  transform: translateY(-3px);
  border-color: #aac6e0;
  box-shadow: 0 16px 34px rgba(7, 26, 59, 0.09);
}

.cochlear-related-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: #eaf3fc;
  color: var(--cochlear-blue);
  font-size: 21px;
}

.cochlear-related-card strong {
  font-size: 17px;
  line-height: 1.28;
}

.cochlear-related-card > span:last-child {
  grid-column: 2;
  color: var(--cochlear-blue-dark);
  font-size: 12.5px;
  font-weight: 800;
}

.cochlear-detail-page .cochlear-consult {
  padding-top: 72px;
}

.cochlear-detail-page .cochlear-consult-card {
  border-radius: 24px;
}

.cochlear-detail-page a:focus-visible,
.cochlear-mobile-guide summary:focus-visible {
  outline: 3px solid rgba(11, 94, 174, 0.28);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .cochlear-detail-page .cochlear-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cochlear-detail-page .cochlear-hero-visual {
    min-height: 400px;
  }

  .cochlear-mobile-guide {
    display: block;
    margin-top: 24px;
  }

  .cochlear-mobile-guide details {
    overflow: hidden;
    border: 1px solid var(--cochlear-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 26, 59, 0.07);
  }

  .cochlear-mobile-guide summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 16px 17px 18px;
    color: var(--cochlear-ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }

  .cochlear-mobile-guide summary::-webkit-details-marker {
    display: none;
  }

  .cochlear-mobile-guide summary span {
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }

  .cochlear-mobile-guide summary .cochlear-mobile-guide-label {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .cochlear-mobile-guide .cochlear-mobile-guide-label > span {
    display: grid;
    gap: 5px;
    align-items: start;
  }

  .cochlear-mobile-guide .cochlear-mobile-guide-label small {
    color: #7b8aa0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.075em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .cochlear-mobile-guide .cochlear-mobile-guide-label strong {
    color: var(--cochlear-ink);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
  }

  .cochlear-mobile-guide details[open] summary > i {
    transform: rotate(180deg);
  }

  .cochlear-guide-menu {
    display: grid;
    gap: 5px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--cochlear-line);
  }

  .cochlear-guide-menu a {
    display: flex;
    gap: 11px;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #40516b;
    font-size: 13.5px;
    line-height: 1.3;
    text-decoration: none;
  }

  .cochlear-guide-menu a.is-active {
    background: #eaf3fc;
    color: var(--cochlear-blue-dark);
    font-weight: 800;
  }

  .cochlear-detail-page .cochlear-body-grid {
    display: block;
  }

  .cochlear-detail-page .cochlear-side {
    display: none;
  }
}

@media (max-width: 760px) {
  .cochlear-detail-page .cochlear-hero {
    padding: 16px 0 24px;
  }

  .cochlear-detail-page .cochlear-breadcrumb {
    margin-bottom: 14px;
  }

  .cochlear-detail-page .cochlear-layout {
    min-height: auto;
    border-radius: 20px;
  }

  .cochlear-detail-page .cochlear-hero-card {
    padding: 30px 20px 26px;
  }

  .cochlear-detail-page .cochlear-hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.04;
  }

  .cochlear-detail-page .cochlear-lede {
    margin-top: 16px;
    font-size: 16px;
  }

  .cochlear-detail-page .cochlear-quick-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .cochlear-detail-page .cochlear-quick-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 11px;
    padding: 13px;
  }

  .cochlear-detail-page .cochlear-quick-item span {
    grid-row: span 2;
  }

  .cochlear-detail-page .cochlear-quick-item p {
    margin: 2px 0 0;
  }

  .cochlear-detail-page .cochlear-hero-visual {
    min-height: 290px;
  }

  .cochlear-mobile-guide {
    margin-top: 18px;
  }

  .cochlear-detail-page .cochlear-body {
    padding: 46px 0 42px;
  }

  .cochlear-detail-page .cochlear-editor-content p,
  .cochlear-detail-page .cochlear-editor-content li {
    font-size: 16px;
    line-height: 1.72;
  }

  .cochlear-pagination {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 42px;
  }

  .cochlear-pagination-link.is-next {
    text-align: left;
  }

  .cochlear-pagination-link.is-next span {
    order: 2;
  }

  .cochlear-pagination-link.is-next i {
    order: 1;
    transform: rotate(180deg);
  }

  .cochlear-related {
    padding: 46px 0 54px;
  }

  .cochlear-related-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .cochlear-related-card {
    min-height: 126px;
    padding: 20px;
  }

  .cochlear-detail-page .cochlear-consult {
    padding-top: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cochlear-pagination-link,
  .cochlear-related-card {
    transition: none;
  }
}

/* Kulak çınlaması hero görseli: şeffaf portreyi bozmadan yüz odağını koru. */
#kulak-cinlamasi .service-hero-image img {
  right: 50%;
  bottom: -86px;
  width: auto;
  height: 125%;
  transform: translateX(50%);
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 720px) {
  #kulak-cinlamasi .service-hero-image img {
    bottom: -52px;
    height: 130%;
  }
}

/* Tamir ve bakım: bakım notunu izleyen, başlık üstte servis bilgisi altta editoryal akış. */
.service-gutenberg-content .icel-repair-record {
  --repair-ink: #102a56;
  --repair-muted: #53647f;
  --repair-line: #d8e2ef;
  --repair-accent: #2876d9;
  width: 100%;
  max-width: none;
  margin: 0;
}

.service-gutenberg-content .icel-repair-record,
.service-gutenberg-content .icel-repair-record > .wp-block-group__inner-container,
.service-gutenberg-content .icel-repair-record__care,
.service-gutenberg-content .icel-repair-record__service,
.service-gutenberg-content .icel-repair-record__care > .wp-block-group__inner-container,
.service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.service-gutenberg-content .icel-repair-record__care {
  margin: 0;
}

.service-gutenberg-content .icel-repair-record__care > .wp-block-group__inner-container {
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--repair-accent);
}

.service-gutenberg-content .icel-repair-record__care > .wp-block-group__inner-container > p {
  margin: 0;
  color: var(--repair-ink);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 760px;
}

.service-gutenberg-content .icel-repair-record__service {
  margin: 28px 0 0;
  padding: 23px 26px 24px;
  border-top: 1px solid var(--repair-line);
  background: linear-gradient(90deg, #f5f9fe 0%, rgba(245, 249, 254, .35) 76%, rgba(245, 249, 254, 0) 100%);
}

.service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container {
  display: block;
}

.service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container > h2 {
  margin: 0;
  color: var(--repair-ink);
  font-size: clamp(21px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container > p {
  margin: 10px 0 0;
  color: var(--repair-muted);
  font-size: 15px;
  line-height: 1.72;
  max-width: 620px;
}

@media (max-width: 700px) {
  .service-gutenberg-content .icel-repair-record__care > .wp-block-group__inner-container {
    padding-left: 15px;
  }

  .service-gutenberg-content .icel-repair-record__care > .wp-block-group__inner-container > p {
    font-size: 14.5px;
    line-height: 1.65;
  }

  .service-gutenberg-content .icel-repair-record__service {
    margin-top: 22px;
    padding: 19px 18px 20px;
  }

  .service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container > h2 {
    font-size: 21px;
  }

  .service-gutenberg-content .icel-repair-record__service > .wp-block-group__inner-container > p {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
  }
}

/* Cihaz temizliği: bakım ilkesinden profesyonel uygulamaya açık ve sakin akış. */
.service-gutenberg-content .icel-cleaning-guide {
  --cleaning-ink: #102a56;
  --cleaning-copy: #53647f;
  --cleaning-accent: #2876d9;
  --cleaning-wash: #f2f7fd;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
}

.service-gutenberg-content .icel-cleaning-guide :where(.icel-cleaning-guide__principle, .icel-cleaning-guide__professional),
.service-gutenberg-content .icel-cleaning-guide :where(.icel-cleaning-guide__principle, .icel-cleaning-guide__professional) > .wp-block-group__inner-container {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.service-gutenberg-content .icel-cleaning-guide__principle {
  margin: 0;
  padding: 20px 24px;
  border-left: 4px solid var(--cleaning-accent);
  background: linear-gradient(90deg, var(--cleaning-wash) 0%, rgba(242, 247, 253, .62) 72%, rgba(242, 247, 253, 0) 100%);
}

.service-gutenberg-content .icel-cleaning-guide__principle p {
  max-width: 760px;
  margin: 0;
  color: var(--cleaning-ink);
  font-size: 15.5px;
  line-height: 1.72;
}

.service-gutenberg-content hr.icel-cleaning-guide__divider {
  width: 100%;
  max-width: none;
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: linear-gradient(90deg, rgba(40, 118, 217, .55), rgba(40, 118, 217, .12) 72%, transparent);
}

.service-gutenberg-content .icel-cleaning-guide__professional {
  margin: 0;
}

.service-gutenberg-content .icel-cleaning-guide__professional h2 {
  position: relative;
  max-width: 760px;
  margin: 0;
  padding-bottom: 11px;
  color: var(--cleaning-ink);
  font-size: clamp(21px, 1.75vw, 24px);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.service-gutenberg-content .icel-cleaning-guide__professional h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: 2px;
  background: var(--cleaning-accent);
}

.service-gutenberg-content .icel-cleaning-guide__professional p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--cleaning-copy);
  font-size: 15px;
  line-height: 1.72;
}

@media (max-width: 700px) {
  .service-gutenberg-content .icel-cleaning-guide__principle {
    padding: 17px 16px;
  }

  .service-gutenberg-content .icel-cleaning-guide__principle p,
  .service-gutenberg-content .icel-cleaning-guide__professional p {
    font-size: 14.5px;
    line-height: 1.65;
  }

  .service-gutenberg-content hr.icel-cleaning-guide__divider {
    margin: 20px 0;
  }

  .service-gutenberg-content .icel-cleaning-guide__professional h2 {
    padding-bottom: 9px;
    font-size: 21px;
  }

  .service-gutenberg-content .icel-cleaning-guide__professional p {
    margin-top: 10px;
  }
}

/* SGK ile cihaz alımı: başvuru belgelerini açık bir dosya kontrol akışında toplar. */
.service-gutenberg-content .icel-sgk-dossier {
  --sgk-ink: #102a56;
  --sgk-copy: #52627b;
  --sgk-blue: #246fce;
  --sgk-line: #d7e3f2;
  --sgk-wash: #f3f7fc;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--sgk-copy);
}

.service-gutenberg-content .icel-sgk-dossier :where(.wp-block-group, .wp-block-column, .wp-block-columns),
.service-gutenberg-content .icel-sgk-dossier :where(.wp-block-group, .wp-block-column) > .wp-block-group__inner-container {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.service-gutenberg-content .icel-sgk-dossier__intro {
  margin: 0;
  padding: 19px 24px;
  border-left: 4px solid var(--sgk-blue);
  background: linear-gradient(90deg, var(--sgk-wash), rgba(243, 247, 252, .32) 76%, transparent);
}

.service-gutenberg-content .icel-sgk-dossier__intro p {
  max-width: 820px;
  margin: 0;
  color: var(--sgk-ink);
  font-size: 15px;
  line-height: 1.7;
}

.service-gutenberg-content .icel-sgk-dossier__summary {
  margin: 24px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--sgk-line);
}

.service-gutenberg-content .icel-sgk-dossier h2 {
  margin: 0;
  color: var(--sgk-ink);
  font-size: clamp(20px, 1.65vw, 23px);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.service-gutenberg-content .icel-sgk-dossier__summary p {
  max-width: 760px;
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.68;
}

.service-gutenberg-content .icel-sgk-dossier__documents {
  align-items: stretch;
  gap: 0;
  margin: 0;
}

.service-gutenberg-content .icel-sgk-dossier__documents > .wp-block-column {
  flex-basis: 50%;
  margin: 0;
  padding: 24px 26px 22px 0;
}

.service-gutenberg-content .icel-sgk-dossier__documents > .wp-block-column + .wp-block-column {
  padding-right: 0;
  padding-left: 26px;
  border-left: 1px solid var(--sgk-line);
}

.service-gutenberg-content .icel-sgk-dossier__document h2 {
  max-width: 360px;
  min-height: 2.6em;
}

.service-gutenberg-content .icel-sgk-dossier__document ul,
.service-gutenberg-content .icel-sgk-dossier__contribution ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.service-gutenberg-content .icel-sgk-dossier__document li {
  position: relative;
  margin: 0;
  padding: 9px 0 9px 24px;
  border-top: 1px solid rgba(215, 227, 242, .78);
  color: var(--sgk-copy);
  font-size: 14.25px;
  line-height: 1.56;
}

.service-gutenberg-content .icel-sgk-dossier__document li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--sgk-blue);
  border-radius: 50%;
  background: #fff;
}

.service-gutenberg-content .icel-sgk-dossier__contribution {
  margin: 0;
  padding: 23px 0 0;
  border-top: 1px solid var(--sgk-line);
}

.service-gutenberg-content .icel-sgk-dossier__contribution ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.service-gutenberg-content .icel-sgk-dossier__contribution li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--sgk-line);
  color: var(--sgk-ink);
  font-size: 14.25px;
  line-height: 1.55;
}

.service-gutenberg-content .icel-sgk-dossier__note {
  margin: 22px 0 0;
  padding: 16px 19px;
  border-left: 3px solid var(--sgk-blue);
  background: var(--sgk-wash);
}

.service-gutenberg-content .icel-sgk-dossier__note p {
  margin: 0;
  color: #334a6b;
  font-size: 13.75px;
  line-height: 1.62;
}

@media (max-width: 700px) {
  .service-gutenberg-content .icel-sgk-dossier__intro {
    padding: 16px;
  }

  .service-gutenberg-content .icel-sgk-dossier__intro p,
  .service-gutenberg-content .icel-sgk-dossier__summary p {
    font-size: 14.25px;
    line-height: 1.64;
  }

  .service-gutenberg-content .icel-sgk-dossier__summary {
    margin-top: 20px;
    padding-bottom: 18px;
  }

  .service-gutenberg-content .icel-sgk-dossier h2 {
    font-size: 19px;
  }

  .service-gutenberg-content .icel-sgk-dossier__documents {
    display: block;
  }

  .service-gutenberg-content .icel-sgk-dossier__documents > .wp-block-column,
  .service-gutenberg-content .icel-sgk-dossier__documents > .wp-block-column + .wp-block-column {
    padding: 20px 0;
    border-left: 0;
  }

  .service-gutenberg-content .icel-sgk-dossier__documents > .wp-block-column + .wp-block-column {
    border-top: 1px solid var(--sgk-line);
  }

  .service-gutenberg-content .icel-sgk-dossier__document h2 {
    min-height: 0;
  }

  .service-gutenberg-content .icel-sgk-dossier__document li,
  .service-gutenberg-content .icel-sgk-dossier__contribution li {
    font-size: 13.75px;
  }

  .service-gutenberg-content .icel-sgk-dossier__contribution ul {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .service-gutenberg-content .icel-sgk-dossier__note {
    margin-top: 18px;
    padding: 14px 15px;
  }

  .service-gutenberg-content .icel-sgk-dossier__note p {
    font-size: 13.25px;
  }
}

/* Homepage blog carousel: uses the same cards as the blog directory. */
.blog-section .blog-header {
  max-width: none;
  text-align: left;
}

.blog-section .blog-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.blog-section .blog-header .blog-kicker {
  margin-left: 0;
}

.blog-section .blog-header > p {
  max-width: 760px;
  margin-left: 0;
}

.blog-carousel-nav {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding-bottom: 4px;
}

.blog-section .blog-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 125, 228, 0.32) transparent;
}

.blog-section .blog-grid::-webkit-scrollbar {
  height: 5px;
}

.blog-section .blog-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(63, 125, 228, 0.32);
}

.blog-section .blog-card {
  min-height: 100%;
  scroll-snap-align: start;
}

.blog-section .blog-card-title {
  font-size: clamp(18px, 1.45vw, 21px);
}

.blog-carousel-nav .insight-nav-btn:disabled {
  cursor: default;
  opacity: 0.38;
}

@media (max-width: 900px) {
  .blog-section .blog-grid {
    grid-auto-columns: calc((100% - 14px) / 2);
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .blog-section .blog-header {
    text-align: center;
  }

  .blog-section .blog-header-top {
    align-items: center;
    justify-content: center;
  }

  .blog-section .blog-header-top > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .blog-section .blog-header .blog-kicker {
    margin-inline: auto;
    margin-bottom: 12px;
  }

  .blog-section .blog-header > p {
    width: 100%;
    margin-inline: auto;
  }

  .blog-section .blog-grid {
    grid-auto-columns: 86%;
  }

}

/* Contact headings follow the Hakkımızda page typography. */
body.page-template-page-iletisim .contact-page-header h1,
body.page-template-page-iletisim .contact-message-header h2 {
  margin: 0;
  color: #071932;
  font-family: "Poppins", sans-serif;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.page-template-page-iletisim .contact-page-header p,
body.page-template-page-iletisim .contact-message-header p {
  max-width: 680px;
  margin: 12px auto 0;
  color: rgba(7, 25, 50, 0.7);
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  body.page-template-page-iletisim .contact-page-header h1,
  body.page-template-page-iletisim .contact-message-header h2 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.06;
  }

  body.page-template-page-iletisim .contact-page-header p,
  body.page-template-page-iletisim .contact-message-header p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
  }
}

html { scroll-padding-top: 112px; }
body {
  color: var(--ds-color-ink);
  font-family: var(--ds-font-family);
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  z-index: var(--ds-z-skip);
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-accent);
  color: var(--ds-color-navy);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ds-transition);
}
.skip-link:focus { transform: translateY(0); box-shadow: var(--ds-focus-ring); }

h1, h2, h3 { color: inherit; text-wrap: balance; }
p, li { text-wrap: pretty; }

:where(.ui-container, .content-shell, .legal-shell, .blog-page-shell, .about-shell, .contact-page-shell,
  .services-page-shell, .devices-page-shell, .service-detail-shell,
  .service-overview-shell, .device-detail-shell, .callback-shell,
  .cochlear-shell) {
  width: min(calc(100% - (2 * var(--ds-gutter))), var(--ds-container));
  margin-inline: auto;
}

.ui-section {
  padding-block: var(--ds-section-space);
}

.page.content-shell {
  width: min(calc(100% - (2 * var(--ds-gutter))), var(--ds-container));
  margin-inline: auto;
  min-height: 40vh;
  padding-block: clamp(var(--ds-space-12), 7vw, var(--ds-space-24));
}

.generic-page-article {
  width: 100%;
  max-width: var(--ds-container-article);
  margin-inline: auto;
  color: var(--ds-color-ink-muted);
  font-size: var(--ds-text-md);
  line-height: 1.7;
}

.generic-page-article > h1:first-child {
  margin: 0 0 var(--ds-space-8);
  color: var(--ds-color-ink);
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.generic-page-article :where(h2, h3) {
  margin: var(--ds-space-12) 0 var(--ds-space-4);
  color: var(--ds-color-ink);
  line-height: 1.25;
}

.generic-page-article h2 { font-size: clamp(28px, 2.4vw, 40px); }
.generic-page-article h3 { font-size: clamp(20px, 1.7vw, 28px); }
.generic-page-article :where(p, ul, ol) { margin-block: 0 var(--ds-space-4); }

:where(.legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
  .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
  .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
  .cochlear-breadcrumb) {
  color: var(--ds-color-ink-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

:where(.cta, .hero-btn, .devices-primary-btn, .devices-secondary-btn,
  .services-page-cta, .service-primary-btn, .pediatric-btn,
  .about-cta-button, .callback-submit, .contact-message-submit,
  .blog-newsletter-cta, .service-overview-btn, .insight-card-btn) {
  min-height: var(--ds-control-md);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: color var(--ds-transition), background-color var(--ds-transition),
    border-color var(--ds-transition), box-shadow var(--ds-transition),
    transform var(--ds-transition);
}

:where(.cta, .hero-btn, .devices-primary-btn, .services-page-cta,
  .service-primary-btn, .pediatric-btn-primary, .about-cta-button,
  .callback-submit, .contact-message-submit, .blog-newsletter-cta):hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-sm);
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ds-focus-ring);
}

:where(button, [role="button"]):active:not(:disabled) { transform: translateY(1px); }
:where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: 0.55; }

:where(.callback-form, .contact-message-form, .blog-newsletter-form)
  :where(input, select, textarea) {
  min-height: var(--ds-control-md);
  border-color: var(--ds-color-border);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition),
    background-color var(--ds-transition);
}
:where(.callback-form, .contact-message-form, .blog-newsletter-form)
  :where(input, select, textarea):focus-visible {
  border-color: var(--ds-color-accent);
  box-shadow: var(--ds-focus-ring);
}
.was-validated :where(input, select, textarea):invalid {
  border-color: var(--ds-color-danger) !important;
}
.form-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(23, 92, 211, 0.22);
  border-radius: var(--ds-radius-sm);
  background: rgba(23, 92, 211, 0.07);
  color: var(--ds-color-info);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.form-status[data-state="error"] {
  border-color: rgba(180, 35, 24, 0.24);
  background: rgba(180, 35, 24, 0.07);
  color: var(--ds-color-danger);
}
.form-status[data-state="success"] {
  border-color: rgba(18, 125, 72, 0.24);
  background: rgba(18, 125, 72, 0.08);
  color: #0f6d3f;
}

.site-footer-socials a[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(1);
}

.reveal-ready [data-ui-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-ui-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  :root { --ds-gutter: 18px; --ds-section-space: 68px; }
  html { scroll-padding-top: 88px; }
  :where(h1) { line-height: 1.06; }
  :where(.callback-submit, .contact-message-submit, .blog-newsletter-cta) {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-ready [data-ui-reveal] { opacity: 1; transform: none; }
}

/* Legal pages */
.legal-page {
  background:
    radial-gradient(circle at 86% 5%, rgba(255, 193, 32, 0.11), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 38%, #f8fafc 100%);
}

.legal-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.legal-hero {
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(8, 30, 63, 0.1);
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: #647189;
  font-size: 12.5px;
  font-weight: 600;
}

.legal-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-breadcrumb a:hover {
  color: #0a1d3a;
}

.legal-hero-copy {
  max-width: 900px;
}

.legal-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 14px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(66, 120, 213, 0.1);
  color: #285fc4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-hero h1 {
  max-width: 800px;
  margin: 0;
  color: #071a36;
  font-size: clamp(36px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.legal-hero-copy > p:not(.legal-kicker) {
  max-width: 720px;
  margin: 16px 0 0;
  color: #637085;
  font-size: 16px;
  line-height: 1.62;
  font-weight: 500;
}

.legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0 0;
  border-top: 1px solid rgba(8, 30, 63, 0.12);
  border-bottom: 1px solid rgba(8, 30, 63, 0.12);
}

.legal-hero-meta > div {
  display: grid;
  gap: 4px;
  min-width: min(100%, 270px);
  padding: 14px 28px 14px 0;
  margin-right: 28px;
  color: #243653;
}

.legal-hero-meta > div + div {
  padding-left: 28px;
  border-left: 1px solid rgba(8, 30, 63, 0.12);
}

.legal-hero-meta span {
  color: #66738a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-hero-meta strong,
.legal-hero-meta time {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.legal-content {
  padding: 50px 0 80px;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(168px, 190px) minmax(0, 880px);
  gap: clamp(28px, 3.5vw, 52px);
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: 118px;
  padding-top: 2px;
}

.legal-sidebar-title {
  display: block;
  margin: 0 0 12px;
  color: #647189;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-sidebar nav {
  display: grid;
  gap: 5px;
}

.legal-sidebar a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #53637c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.legal-sidebar a i {
  flex: 0 0 auto;
  font-size: 16px;
}

.legal-sidebar a:hover,
.legal-sidebar a.is-active {
  background: rgba(66, 120, 213, 0.1);
  color: #285fc4;
}

.legal-article {
  min-width: 0;
  max-width: 880px;
}

.legal-article-lead {
  max-width: 720px;
  margin: 0 0 30px;
  color: #495a74;
  font-size: 17px;
  line-height: 1.7;
}

.legal-article-lead p {
  margin: 0;
}

.legal-section {
  scroll-margin-top: 132px;
  padding: 30px 0 32px;
  border-top: 1px solid rgba(8, 30, 63, 0.1);
}

.legal-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.legal-section h2 {
  margin: 0 0 13px;
  color: #071a36;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.legal-section p {
  margin: 0;
  color: #4d5e77;
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
}

.legal-section p + p {
  margin-top: 14px;
}

.legal-section :where(ul, ol),
.legal-article-lead :where(ul, ol) {
  margin: 16px 0 0;
  padding-left: 23px;
  color: #4d5e77;
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 500;
}

.legal-section li + li {
  margin-top: 8px;
}

.legal-section li::marker {
  color: #285fc4;
}

.legal-section a,
.legal-note a,
.legal-contact-panel a {
  color: #285fc4;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 20px 22px;
  border-left: 3px solid #f2b628;
  background: #fffaf0;
  color: #4d5e77;
}

.legal-note i {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 193, 32, 0.2);
  color: #071a36;
  font-size: 18px;
}

.legal-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 600;
}

.legal-contact-panel {
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(8, 30, 63, 0.14);
}

.legal-contact-panel > div > p:first-child {
  margin: 0 0 7px;
  color: #285fc4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.legal-contact-panel h2 {
  margin: 0;
  color: #071a36;
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -0.025em;
}

.legal-contact-panel > div > p:last-child {
  margin: 11px 0 0;
  color: #4d5e77;
  font-size: 15px;
  line-height: 1.68;
}

.legal-contact-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.legal-contact-panel li {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-top: 1px solid rgba(8, 30, 63, 0.1);
  color: #5b6b82;
  font-size: 13px;
  line-height: 1.55;
}

.legal-contact-panel strong {
  color: #102444;
  font-size: 14px;
}

.legal-contact-panel li a {
  width: fit-content;
}

.legal-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 14px;
}

.legal-breadcrumb a:focus-visible,
.legal-sidebar a:focus-visible,
.legal-section a:focus-visible,
.legal-note a:focus-visible,
.legal-contact-panel a:focus-visible {
  outline: 3px solid rgba(40, 95, 196, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 980px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legal-sidebar {
    position: static;
    padding: 0;
  }

  .legal-sidebar nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .legal-sidebar a {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
  }

  .legal-article {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .legal-shell {
    width: min(100% - 32px, 1180px);
  }

  .legal-hero {
    padding: 20px 0 24px;
  }

  .legal-breadcrumb {
    margin-bottom: 18px;
    font-size: 12px;
    flex-wrap: wrap;
  }

  .legal-hero h1 {
    font-size: clamp(30px, 8vw, 34px);
    line-height: 1.08;
  }

  .legal-hero-copy > p:not(.legal-kicker) {
    font-size: 15px;
    line-height: 1.58;
  }

  .legal-hero-meta {
    display: grid;
    margin-top: 22px;
  }

  .legal-hero-meta > div,
  .legal-hero-meta > div + div {
    min-width: 0;
    margin: 0;
    padding: 13px 0;
    border: 0;
  }

  .legal-hero-meta > div + div {
    border-top: 1px solid rgba(8, 30, 63, 0.1);
  }

  .legal-content {
    padding-bottom: 58px;
  }

  .legal-section {
    padding: 25px 0;
  }

  .legal-section h2 {
    font-size: 22px;
  }

  .legal-section p {
    font-size: 15px;
    line-height: 1.68;
  }

  .legal-section :where(ul, ol),
  .legal-article-lead :where(ul, ol) {
    font-size: 15px;
  }

  .legal-article-lead {
    margin-bottom: 25px;
    font-size: 16px;
  }

  .legal-note {
    align-items: flex-start;
    padding: 18px;
  }

  .legal-contact-panel ul {
    grid-template-columns: 1fr;
  }
}

/* Blog listing page */
.blog-page {
  background:
    radial-gradient(circle at 10% 9%, rgba(45, 108, 223, 0.08), transparent 26%),
    radial-gradient(circle at 92% 6%, rgba(255, 193, 32, 0.1), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f7faff 100%);
  color: #071a36;
}

.blog-page-shell {
  /* Match the header's visible content axis: 1240px shell minus 32px gutters. */
  width: min(1176px, calc(100% - 64px));
  margin: 0 auto;
}

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

.blog-listing-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 0 40px;
}

.blog-listing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(88, 132, 210, 0.22) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg width='560' height='180' viewBox='0 0 560 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2389aeea' stroke-width='1.1' opacity='.18'%3E%3Cpath d='M0 92 C40 36 72 148 114 92 S194 36 240 92 S320 148 362 92 S442 36 488 92 S520 148 560 92'/%3E%3Cpath d='M0 110 C40 54 72 166 114 110 S194 54 240 110 S320 166 362 110 S442 54 488 110 S520 166 560 110'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right 7% top 18%, left 2% top 28%;
  background-repeat: repeat, no-repeat;
  background-size: 20px 20px, 560px 180px;
  opacity: 0.34;
  pointer-events: none;
}

.blog-listing-hero > .blog-page-shell,
.blog-directory > .blog-page-shell,
.blog-newsletter > .blog-page-shell {
  position: relative;
  z-index: 1;
}

.blog-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  color: rgba(7, 26, 54, 0.54);
  font-size: 12.5px;
  font-weight: 600;
}

.blog-page-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.blog-page-breadcrumb a:hover {
  color: #0b2a5b;
}

.blog-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1fr);
  gap: clamp(30px, 4.6vw, 66px);
  align-items: center;
}

.blog-hero-copy {
  max-width: 530px;
}

.blog-page-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 14px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(66, 120, 213, 0.1);
  color: #285fc4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-hero-copy h1 {
  max-width: 520px;
  margin: 0;
  color: #071a36;
  font-size: clamp(34px, 3.35vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.blog-hero-copy > p {
  max-width: 470px;
  margin: 16px 0 0;
  color: #637085;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.68;
}

.blog-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 24px;
}

.blog-proof-list span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #243653;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

.blog-proof-list i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(234, 242, 255, 0.92);
  color: #2d6cdf;
  font-size: 18px;
  box-shadow: 0 12px 24px rgba(45, 108, 223, 0.1);
}

.blog-proof-list .blog-proof-custom-icon {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(234, 242, 255, 0.92);
  object-fit: contain;
  box-shadow: 0 12px 24px rgba(45, 108, 223, 0.1);
}

.blog-proof-list span:nth-child(2) i {
  background: rgba(255, 193, 32, 0.18);
  color: #c99000;
}

.blog-hero-visual {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.blog-hero-visual img {
  display: block;
  width: 100%;
  height: clamp(350px, 34vw, 430px);
  object-fit: cover;
  object-position: 60% 50%;
  border: 10px solid rgba(255, 255, 255, 0.94);
  border-radius: 88px 28px 88px 28px;
  box-shadow: 0 24px 54px rgba(19, 40, 76, 0.16);
}

.blog-hearing-flow {
  position: absolute;
  inset: 10px;
  z-index: 2;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: visible;
  border-radius: 78px 20px 78px 20px;
  pointer-events: none;
}

.blog-sound-ribbons path {
  fill: none;
  stroke: rgba(255, 255, 255, .82);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  opacity: 0;
  filter: url(#blog-sound-glow);
  animation: blogRibbonBreathe 4.8s ease-in-out infinite;
}

.blog-sound-ribbons path:nth-child(2) { animation-delay: .16s; }
.blog-sound-ribbons path:nth-child(3) { animation-delay: .32s; }

.blog-sound-trace {
  fill: none;
  stroke: #69a1ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: .08 .92;
  stroke-dashoffset: 1;
  filter: url(#blog-sound-glow);
  animation: blogSoundTrace 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.blog-ear-halo { fill: none; stroke: rgba(255, 255, 255, .9); transform-box: fill-box; transform-origin: center; opacity: 0; }
.blog-ear-halo--outer { stroke-width: 3; animation: blogEarReceive 4.8s ease-out 1.25s infinite; }
.blog-ear-halo--inner { stroke: #69a1ff; stroke-width: 5; animation: blogEarReceive 4.8s ease-out 1.08s infinite; }
.blog-ear-core { fill: #fff; opacity: 0; filter: url(#blog-sound-glow); animation: blogEarCore 4.8s ease-in-out 1s infinite; }

@keyframes blogRibbonBreathe {
  0%, 12%, 78%, 100% { opacity: 0; stroke-dashoffset: 28; }
  26%, 58% { opacity: .76; }
  68% { opacity: .18; stroke-dashoffset: -20; }
}

@keyframes blogSoundTrace {
  0%, 18% { opacity: 0; stroke-dashoffset: 1; }
  22% { opacity: 1; }
  48% { opacity: 1; stroke-dashoffset: 0; }
  58%, 100% { opacity: 0; stroke-dashoffset: -.12; }
}

@keyframes blogEarReceive {
  0%, 20% { opacity: 0; transform: scale(.55); }
  28% { opacity: .85; }
  52%, 100% { opacity: 0; transform: scale(2.1); }
}

@keyframes blogEarCore {
  0%, 20%, 54%, 100% { opacity: 0; transform: scale(.7); }
  28%, 42% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-sound-ribbons path,
  .blog-sound-trace,
  .blog-ear-halo,
  .blog-ear-core {
    animation: none;
  }

  .blog-sound-ribbons path { opacity: .34; }
  .blog-ear-core { opacity: .82; }
}

.blog-featured-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  min-height: 290px;
  margin-top: 48px;
  overflow: visible;
  isolation: isolate;
  border-radius: 22px;
  background: #071a36;
  color: #ffffff;
  box-shadow: 0 22px 54px rgba(7, 26, 54, 0.18);
}

.blog-featured-media {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  border-radius: 22px 0 0 22px;
}

.blog-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 26, 54, 0.18), rgba(7, 26, 54, 0));
}

.blog-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 42%;
  filter: saturate(0.9) contrast(1.04);
}

.blog-image-chip,
.blog-list-category {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #2d6cdf;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(19, 40, 76, 0.12);
}

.blog-image-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}

.blog-featured-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 38px);
}

.blog-featured-label {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(45, 108, 223, 0.18);
  color: #9fc0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-featured-copy h2 {
  max-width: 500px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 2.15vw, 29px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.blog-featured-copy h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-featured-media:focus-visible,
.blog-featured-copy h2 a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -5px;
}

.blog-featured-copy h2 a:focus-visible {
  outline-offset: 4px;
}

.blog-featured-copy p {
  max-width: 500px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.72;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}

.blog-featured-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.blog-featured-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: -6px -8px -6px 0;
  padding: 0 10px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ui-transition), color var(--ui-transition);
}

.blog-featured-action i {
  font-size: 17px;
  line-height: 1;
  transition: transform var(--ui-transition);
}

.blog-featured-action:hover,
.blog-featured-action:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  outline: none;
}

.blog-featured-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(159, 192, 255, 0.5);
}

.blog-featured-action:hover i,
.blog-featured-action:focus-visible i {
  transform: translateX(3px);
}

.blog-featured-meta .blog-card-arrow {
  display: grid;
  flex: 0 0 auto;
  width: var(--ui-control-md);
  height: var(--ui-control-md);
  min-width: var(--ui-control-md);
  place-items: center;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-control-bg);
  color: #10213d;
  text-decoration: none;
  box-shadow: var(--ui-control-shadow);
  transition:
    transform var(--ui-transition),
    background var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    color var(--ui-transition);
}

.blog-featured-meta .blog-card-arrow i {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--ui-transition);
}

.blog-featured-meta .blog-card-arrow:hover,
.blog-featured-meta .blog-card-arrow:focus-visible {
  transform: translateX(2px);
  background: #ffffff;
  border-color: rgba(30, 54, 95, 0.2);
  box-shadow: 0 16px 34px rgba(18, 37, 72, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  outline: none;
}

.blog-featured-meta .blog-card-arrow:hover i,
.blog-featured-meta .blog-card-arrow:focus-visible i {
  transform: translateX(2px);
}

.blog-directory {
  padding: 28px 0 64px;
}

.blog-directory > .blog-page-shell > h2,
.blog-directory > .blog-page-shell > p {
  display: none;
}

.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid rgba(7, 26, 54, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(19, 40, 76, 0.07);
}

.blog-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.blog-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 244px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(7, 26, 54, 0.1);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
}

.blog-search i {
  color: #285fc4;
  font-size: 17px;
}

.blog-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #071a36;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.blog-search input::placeholder {
  color: rgba(99, 112, 133, 0.82);
}

.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.blog-filter {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(7, 26, 54, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #3f4c61;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blog-filter:hover,
.blog-filter:focus-visible,
.blog-filter.is-active {
  border-color: var(--category-color, #071a36);
  background: var(--category-color, #071a36);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.blog-sort {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(7, 26, 54, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #071a36;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
}

.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.blog-list-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(19, 40, 76, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(93, 141, 217, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(25, 48, 85, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.blog-list-card:hover,
.blog-list-card:focus-visible {
  border-color: rgba(94, 136, 216, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(25, 48, 85, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  outline: none;
}

.blog-list-card:focus-visible {
  box-shadow:
    0 0 0 3px rgba(245, 201, 79, 0.24),
    0 20px 46px rgba(25, 48, 85, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.blog-list-media {
  position: relative;
  display: block;
  aspect-ratio: 1.48 / 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.92), transparent 32%),
    linear-gradient(135deg, #eef5ff 0%, #dce9ff 100%);
}

.blog-list-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(14, 35, 74, 0.08) 100%);
  pointer-events: none;
}

.blog-list-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.28s ease;
}

.blog-list-card:hover .blog-list-media img,
.blog-list-card:focus-visible .blog-list-media img {
  transform: scale(1.035);
}

.blog-list-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 16px;
}

.blog-list-category {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  background: rgba(63, 125, 228, 0.92);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px rgba(31, 82, 167, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
}

.blog-list-category--gold {
  background: linear-gradient(180deg, #f3c93a 0%, #d9a700 100%);
  color: #1d1d16;
  box-shadow: 0 10px 22px rgba(216, 167, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.blog-list-body strong {
  display: -webkit-box;
  overflow: hidden;
  color: #13284c;
  font-size: clamp(20px, 1.9vw, 23px);
  line-height: 1.14;
  letter-spacing: -0.045em;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blog-list-body > span:not(.blog-list-meta) {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 10px;
  color: rgba(32, 41, 57, 0.72);
  font-size: 14px;
  line-height: 1.56;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blog-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  color: rgba(45, 58, 84, 0.74);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.blog-list-meta i {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.38), transparent 26%),
    linear-gradient(180deg, #4e86eb 0%, #2459cf 100%);
  color: #ffffff;
  font-size: 17px;
  box-shadow: 0 12px 24px rgba(35, 91, 203, 0.24);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.blog-list-card:hover .blog-list-meta i,
.blog-list-card:focus-visible .blog-list-meta i {
  transform: translateX(3px);
  box-shadow: 0 14px 28px rgba(35, 91, 203, 0.3);
}

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(7, 26, 54, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #071a36;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.blog-pagination a:hover,
.blog-pagination a:focus-visible,
.blog-pagination a.is-active {
  border-color: #071a36;
  background: #071a36;
  color: #ffffff;
  outline: none;
}

.blog-pagination-next {
  padding: 0;
}

.blog-newsletter {
  padding: 0 0 82px;
}

.blog-newsletter-card {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(45, 108, 223, 0.14);
  border-radius: 22px;
  background: #ffffff;
  color: #071a36;
  box-shadow: 0 20px 48px rgba(19, 40, 76, 0.08);
}

.blog-newsletter-panel {
  display: flex;
  min-height: 176px;
  align-items: center;
  gap: 18px;
  padding: 30px 54px 30px 34px;
  clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #2d6cdf 0%, #0e4bb7 100%);
  color: #ffffff;
}

.blog-newsletter-icon {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffc120;
  font-size: 25px;
}

.blog-newsletter-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.blog-newsletter-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 1.6;
}

.blog-newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 30px;
}

.blog-newsletter-input {
  display: flex;
  min-height: 48px;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid rgba(7, 26, 54, 0.1);
  border-radius: 999px;
  background: #f7faff;
  color: #2d6cdf;
}

.blog-newsletter-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #071a36;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.blog-newsletter-cta {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #071a36;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-newsletter-cta:hover,
.blog-newsletter-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 26, 54, 0.2);
  outline: none;
}

@media (max-width: 1120px) {
  .blog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .blog-toolbar-actions {
    width: 100%;
  }

  .blog-search {
    width: min(100%, 320px);
  }

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

@media (max-width: 900px) {
  .blog-hero-grid,
  .blog-featured-card,
  .blog-newsletter-card {
    grid-template-columns: 1fr;
  }

  .blog-hero-grid {
    gap: 34px;
  }

  .blog-hero-visual {
    min-height: 380px;
  }

  .blog-hero-visual img {
    height: 380px;
  }

  .blog-featured-media {
    min-height: 220px;
  }

  .blog-featured-media {
    border-radius: 22px 22px 0 0;
  }

  .blog-newsletter-panel {
    clip-path: none;
  }

  .blog-newsletter-form {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .blog-page-shell {
    /* The compact header uses 14px side padding at this breakpoint. */
    width: min(100% - 28px, 1176px);
  }

  .blog-listing-hero {
    padding: 18px 0 32px;
  }

  .blog-page-breadcrumb {
    margin-bottom: 24px;
    font-size: 12.5px;
  }

  .blog-hero-copy h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .blog-hero-visual {
    order: -1;
  }

  .blog-hero-copy > p,
  .blog-featured-copy p,
  .blog-newsletter-card p {
    font-size: 15.5px;
    line-height: 1.72;
  }

  .blog-proof-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .blog-proof-list span {
    font-size: 12.5px;
  }

  .blog-hero-visual {
    min-height: 305px;
  }

  .blog-hero-visual img {
    height: 305px;
    border-width: 7px;
    border-radius: 46px 18px 46px 18px;
    object-position: 62% 50%;
  }

  .blog-hearing-flow {
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 39px 12px 39px 12px;
  }

  .blog-sound-ribbons path { stroke-width: 4; }
  .blog-sound-trace { stroke-width: 6; }

  .blog-featured-media {
    min-height: 190px;
  }

  .blog-featured-card {
    margin-top: 38px;
    border-radius: 18px;
  }

  .blog-featured-media {
    border-radius: 18px 18px 0 0;
  }

  .blog-featured-copy {
    padding: 21px;
  }

  .blog-featured-copy h2 {
    font-size: clamp(20px, 6.2vw, 26px);
  }

  .blog-directory {
    padding-bottom: 52px;
  }

  .blog-toolbar {
    padding: 12px;
    border-radius: 16px;
  }

  .blog-filter-row {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .blog-filter {
    flex: 0 0 auto;
  }

  .blog-toolbar-actions,
  .blog-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-search,
  .blog-sort {
    width: 100%;
  }

  .blog-list-grid {
    grid-template-columns: 1fr;
  }

  .blog-list-card {
    min-height: auto;
  }

  .blog-newsletter {
    padding-bottom: 64px;
  }

  .blog-newsletter-card {
    border-radius: 18px;
  }

  .blog-newsletter-panel {
    min-height: auto;
    align-items: flex-start;
    padding: 24px;
  }

  .blog-newsletter-card h2 {
    font-size: 23px;
  }
}

/* Blog detail page */
.blog-detail-page {
  background:
    radial-gradient(circle at 8% 7%, rgba(45, 108, 223, 0.08), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(255, 193, 32, 0.08), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 44%, #f7faff 100%);
}

.blog-article-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 0 38px;
}

.blog-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(88, 132, 210, 0.2) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg width='520' height='170' viewBox='0 0 520 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2389aeea' stroke-width='1.05' opacity='.2'%3E%3Cpath d='M0 82 C38 34 72 130 112 82 S188 34 232 82 S308 130 350 82 S426 34 468 82 S500 130 520 82'/%3E%3Cpath d='M0 102 C38 54 72 150 112 102 S188 54 232 102 S308 150 350 102 S426 54 468 102 S500 150 520 102'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right 6% top 18%, left 1% top 38%;
  background-repeat: repeat, no-repeat;
  background-size: 22px 22px, 520px 170px;
  opacity: 0.28;
  pointer-events: none;
}

.blog-article-hero > .blog-page-shell,
.blog-article-section > .blog-page-shell {
  position: relative;
  z-index: 1;
}

.blog-article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
  gap: clamp(28px, 4.2vw, 64px);
  align-items: center;
}

.blog-article-hero-copy {
  max-width: 560px;
  animation: blogArticleRise 0.7s ease both;
}

.blog-article-hero-copy .blog-page-kicker {
  gap: 7px;
  min-height: 28px;
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.blog-article-hero-copy h1 {
  max-width: 540px;
  margin: 0;
  color: #071a36;
  font-size: clamp(28px, 2.45vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.blog-article-hero-copy p {
  max-width: 510px;
  margin: 12px 0 0;
  color: #5f6f86;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.62;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 24px;
  color: #182b4a;
  font-size: 12.5px;
  font-weight: 700;
}

.blog-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.blog-article-meta i {
  color: #2d6cdf;
  font-size: 16px;
}

.blog-article-hero-media {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(19, 40, 76, 0.13);
  animation: blogArticleRise 0.8s 0.08s ease both;
}

.blog-article-hero-media img {
  display: block;
  width: 100%;
  height: clamp(300px, 29vw, 362px);
  object-fit: cover;
  object-position: 58% 47%;
}

.blog-article-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 20, 46, 0.06), transparent 45%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.blog-article-sound {
  position: absolute;
  top: 50%;
  right: 8%;
  left: 7%;
  height: 46px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(65, 157, 255, 0.9), transparent);
  filter: blur(12px);
  opacity: 0.22;
  pointer-events: none;
  animation: blogArticlePulse 2.4s ease-in-out infinite;
}

.blog-article-section {
  padding: 18px 0 84px;
}

.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(30px, 4.4vw, 58px);
  align-items: start;
}

.blog-article-content {
  min-width: 0;
  max-width: 780px;
  color: #293953;
  font-size: 17px;
  line-height: 1.78;
  text-wrap: pretty;
}

.blog-article-lead {
  max-width: 760px;
  margin: 0 0 30px;
  color: #33425a;
  font-size: 14.5px;
  line-height: 1.78;
}

.blog-article-block {
  margin-top: 28px;
  scroll-margin-top: 120px;
}

.blog-article-block h2,
.blog-article-block h3,
.blog-article-block h4,
.blog-article-block h5,
.blog-article-block h6 {
  color: #102443;
  font-weight: 700;
  text-wrap: balance;
}

.blog-article-block h2 {
  margin: 2.4em 0 0.72em;
  font-size: clamp(29px, 2.55vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.blog-article-block h3 {
  margin: 2em 0 0.65em;
  font-size: clamp(24px, 2.05vw, 29px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.blog-article-block h4 {
  margin: 1.7em 0 0.55em;
  font-size: 19px;
  line-height: 1.4;
}

.blog-article-block h5,
.blog-article-block h6 {
  margin: 1.5em 0 0.5em;
  font-size: 17px;
  line-height: 1.45;
}

.blog-article-block > h2:first-child,
.blog-article-block > h3:first-child,
.blog-article-block > h4:first-child {
  margin-top: 0;
}

.blog-article-block h2 span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: #eaf2ff;
  color: #2d6cdf;
  font-size: 17px;
  box-shadow: 0 10px 22px rgba(45, 108, 223, 0.09);
}

.blog-article-block p {
  margin: 0 0 1.15em;
  color: #3e4d64;
  font-size: inherit;
  line-height: inherit;
}

.blog-article-block ul,
.blog-article-block ol {
  margin: 0.4em 0 1.4em;
  padding-left: 1.5em;
  color: #3e4d64;
}

.blog-article-block ul {
  list-style: none;
}

.blog-article-block ol {
  list-style: decimal;
}

.blog-article-block li {
  position: relative;
  margin: 0.62em 0;
  padding-left: 0.35em;
  color: #3e4d64;
  font-size: inherit;
  line-height: 1.68;
}

.blog-article-block ul > li {
  padding-left: 0.65em;
}

.blog-article-block ul > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: -0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5b800;
}

.blog-article-block ol > li::marker {
  color: #2459cf;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.blog-article-block li > ul,
.blog-article-block li > ol {
  margin-top: 0.55em;
  margin-bottom: 0.3em;
}

.blog-article-block ul ul > li::before {
  border: 2px solid #2d6cdf;
  background: transparent;
}

.blog-article-block strong {
  color: #263a58;
  font-weight: 700;
}

.blog-article-block a:not(.blog-post-navigation a) {
  color: #1858c7;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.blog-article-block .blog-article-disclaimer {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 34px;
  padding: 18px 22px;
  border: 1px solid #d3e0ef;
  border-left: 4px solid #173e78;
  border-radius: 0 12px 12px 0;
  background: #eef4fb;
  color: #29466e;
  font-size: 15px;
  line-height: 1.62;
}

.blog-article-block .blog-article-disclaimer-icon {
  margin-top: 2px;
  color: #173e78;
  font-size: 20px;
}

.blog-article-block .blog-article-disclaimer p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.blog-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  padding: 18px 20px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #f8fbff;
}

.blog-share-title {
  color: #10294b;
  font-size: 14px;
  font-weight: 800;
}

.blog-share-links {
  display: flex;
  gap: 9px;
}

.blog-article-block .blog-share-link {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #183b67;
  font-size: 19px;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px #d8e3f0;
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.blog-article-block .blog-share-link:hover,
.blog-article-block .blog-share-link:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 8px 18px rgba(15, 40, 75, .16);
}

.blog-share-link.is-facebook:hover,
.blog-share-link.is-facebook:focus-visible { background: #1877f2; }
.blog-share-link.is-x:hover,
.blog-share-link.is-x:focus-visible { background: #111111; }
.blog-share-link.is-linkedin:hover,
.blog-share-link.is-linkedin:focus-visible { background: #0a66c2; }
.blog-share-link.is-whatsapp:hover,
.blog-share-link.is-whatsapp:focus-visible { background: #1f9d55; }

@media (max-width: 560px) {
  .blog-article-block .blog-article-disclaimer {
    gap: 12px;
    margin-top: 28px;
    padding: 15px 16px;
    font-size: 14px;
  }

  .blog-article-block .blog-article-disclaimer-icon {
    font-size: 19px;
  }

  .blog-share {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 34px;
    padding: 16px;
  }
}

.blog-post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid #dbe5f2;
}

.blog-post-nav-link {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid #dce6f3;
  border-radius: 15px;
  background: #fff;
  color: #102443;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(19, 40, 76, 0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.blog-post-nav-link:hover,
.blog-post-nav-link:focus-visible {
  border-color: #a9c2ed;
  box-shadow: 0 14px 30px rgba(19, 40, 76, 0.1);
  transform: translateY(-2px);
}

.blog-post-nav-link.is-next {
  grid-column: 2;
  text-align: right;
}

.blog-post-nav-link span { min-width: 0; }
.blog-post-nav-link.is-next span { margin-left: auto; }

.blog-post-nav-link small {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.blog-post-nav-link strong {
  display: -webkit-box;
  overflow: hidden;
  color: #102443;
  font-size: 13.5px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blog-post-nav-link i {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #eef4ff;
  color: #2459cf;
  font-size: 16px;
}

.blog-article-block blockquote {
  margin: 1.7em 0;
  padding: 0.9em 1.2em;
  border-left: 4px solid #2d6cdf;
  border-radius: 0 12px 12px 0;
  background: #f2f7ff;
  color: #263a58;
}

.blog-article-block blockquote p:last-child {
  margin-bottom: 0;
}

.blog-article-block img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.blog-signal-list li::before {
  background: #2d6cdf;
}

.blog-note-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(245, 184, 0, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7d8, #fffaf0);
  box-shadow: 0 12px 30px rgba(202, 152, 0, 0.08);
}

.blog-note-card i {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #ffc120;
  color: #071a36;
  font-size: 17px;
}

.blog-note-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.blog-expert-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f1f6ff 0%, #ffffff 100%);
  box-shadow: 0 16px 36px rgba(25, 48, 85, 0.08);
}

.blog-expert-card blockquote {
  margin: 0;
  color: #17365f;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.65;
}

.blog-expert-card blockquote::before {
  content: "\201C";
  display: block;
  height: 22px;
  color: #2d6cdf;
  font-size: 48px;
  line-height: 0.7;
}

.blog-expert-card span {
  display: block;
  margin-top: 10px;
  color: #2d6cdf;
  font-size: 12px;
  font-weight: 800;
}

.blog-expert-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 14px;
}

.blog-benefit-list li {
  padding-left: 28px;
}

.blog-benefit-list li::before {
  display: none;
}

.blog-benefit-list i {
  position: absolute;
  top: 0.18em;
  left: 0;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #2d6cdf;
  color: #ffffff;
  font-size: 11px;
}

.blog-article-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 18px;
}

.blog-toc-card,
.blog-callback-card,
.blog-related-card {
  border: 1px solid rgba(19, 40, 76, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(25, 48, 85, 0.08);
}

.blog-toc-card {
  padding: 20px;
}

.blog-toc-toggle,
.blog-related-card h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #13284c;
  font-size: 15px;
  line-height: 1.25;
}

.blog-toc-toggle {
  list-style: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  color: #071a3b;
  font-weight: 800;
}

.blog-toc-toggle::-webkit-details-marker {
  display: none;
}

.blog-toc-toggle::marker {
  content: "";
}

.blog-toc-toggle > span {
  flex: 1;
}

.blog-toc-card .blog-toc-toggle > i:first-child,
.blog-related-card h2 i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: #eaf2ff;
  color: #2d6cdf;
  font-size: 16px;
}

.blog-toc-caret {
  margin-left: auto;
  color: #6c7c94;
  transition: transform 180ms ease;
}

.blog-toc-card[open] .blog-toc-caret {
  transform: rotate(180deg);
}

.blog-toc-links {
  margin-top: 14px;
}

.blog-toc-card a {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(19, 40, 76, 0.07);
  color: #4a5a71;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}

.blog-toc-card a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: #2d6cdf;
}

.blog-toc-card a:hover,
.blog-toc-card a:focus-visible {
  color: #0e4bb7;
  outline: none;
}

.blog-callback-card {
  padding: 22px;
  background:
    radial-gradient(circle at 15% 20%, rgba(74, 134, 235, 0.28), transparent 36%),
    linear-gradient(145deg, #08234d 0%, #031228 100%);
  color: #ffffff;
}

.blog-callback-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #8fb8ff;
  font-size: 22px;
}

.blog-callback-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.25;
}

.blog-callback-card p {
  margin: 8px 0 18px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12.8px;
  line-height: 1.55;
}

.blog-callback-card a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4384f4, #1957d0);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.blog-callback-card a:hover,
.blog-callback-card a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 102, 223, 0.32);
  outline: none;
}

.blog-callback-card small {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
}

.blog-related-card {
  padding: 20px;
}

.blog-related-card > a:not(.blog-related-all) {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(19, 40, 76, 0.08);
  color: inherit;
  text-decoration: none;
}

.blog-related-card img {
  width: 82px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  background: #eaf2ff;
}

.blog-related-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #12284b;
  font-size: 12.7px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blog-related-card small {
  display: block;
  margin-top: 7px;
  color: #5e6c80;
  font-size: 11.5px;
}

.blog-related-card > a:not(.blog-related-all):hover strong,
.blog-related-card > a:not(.blog-related-all):focus-visible strong {
  color: #0e4bb7;
}

.blog-related-all {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid rgba(45, 108, 223, 0.18);
  border-radius: 999px;
  color: #2459cf;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

@keyframes blogArticleRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes blogArticlePulse {
  0%,
  100% {
    opacity: 0.16;
    transform: translateY(-50%) scaleX(0.96);
  }

  50% {
    opacity: 0.28;
    transform: translateY(-50%) scaleX(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-article-hero-copy,
  .blog-article-hero-media,
  .blog-article-sound {
    animation: none;
  }
}

@media (max-width: 1020px) {
  .blog-article-hero-grid,
  .blog-article-layout {
    grid-template-columns: 1fr;
  }

  .blog-article-hero-media {
    min-height: 280px;
  }

  .blog-article-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-toc-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .blog-article-hero {
    padding: 18px 0 28px;
  }

  .blog-article-hero-grid {
    gap: 24px;
  }

  .blog-article-hero-copy h1 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.16;
  }

  .blog-article-hero-copy p {
    font-size: 13px;
    line-height: 1.6;
  }

  .blog-article-meta {
    gap: 10px 14px;
    font-size: 12px;
  }

  .blog-article-hero-media {
    min-height: 238px;
    border-radius: 18px;
  }

  .blog-article-hero-media img {
    height: 250px;
    object-position: 60% 48%;
  }

  .blog-article-section {
    padding-bottom: 62px;
  }

  .blog-article-lead {
    font-size: 13.8px;
    line-height: 1.72;
  }

  .blog-article-block {
    margin-top: 24px;
  }

  .blog-article-content {
    font-size: 16px;
    line-height: 1.74;
  }

  .blog-post-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 36px;
    padding-top: 20px;
  }

  .blog-post-nav-link,
  .blog-post-nav-link.is-next {
    grid-column: auto;
    min-height: 82px;
    padding: 13px;
  }

  .blog-article-block h2 {
    margin-top: 2em;
    font-size: 24px;
    line-height: 1.25;
  }

  .blog-article-block h3 {
    margin-top: 1.7em;
    font-size: 20px;
  }

  .blog-article-block h4 {
    font-size: 18px;
  }

  .blog-article-block h2 span {
    width: 32px;
    height: 32px;
  }

  .blog-article-block ul,
  .blog-article-block ol {
    padding-left: 1.3em;
  }

  .blog-article-block li {
    margin: 0.72em 0;
    line-height: 1.62;
  }

  .blog-expert-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .blog-expert-card img {
    height: 156px;
  }

  .blog-article-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-callback-card,
  .blog-related-card,
  .blog-toc-card {
    border-radius: 18px;
  }
}

/* About page */
.about-page {
  overflow: clip;
  background:
    radial-gradient(circle at 8% 12%, rgba(250, 190, 51, 0.16), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 38%, #eef6ff 100%);
  color: #071932;
}

.about-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.about-hero {
  /* Keep the full-bleed hero card flush with the section below it. */
  padding: 0;
}

/* The hero media is a full-bleed card; the breadcrumb sits inside its top
   edge without changing the copy position. */
.about-hero > .about-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.about-hero-grid {
  position: relative;
}

.about-hero-grid > .about-breadcrumb {
  position: absolute;
  top: 0;
  left: clamp(24px, 4vw, 64px);
  z-index: 6;
  width: auto;
  box-sizing: border-box;
  margin: 0;
  padding-top: 28px;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 4px rgba(4, 20, 48, 0.32);
}

.about-hero-grid > .about-breadcrumb a:hover {
  color: #ffffff;
}

/* Hakkımızda hero artık header'ın hemen altında tam genişlikte başlar.  Daha
   sonra gelen ortak hero kuralının üst boşluğunu bu sayfada sıfırlıyoruz. */
body.page-template-page-hakkimizda main.about-page,
body.page-template-page-hakkimizda .about-hero,
body.page-template-page-hakkimizda .about-hero > .about-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.page-template-page-hakkimizda .about-hero-visual {
  border-radius: 0;
  box-shadow: none;
}

body.page-template-page-hakkimizda .about-hero-grid > .about-breadcrumb,
body.page-template-page-hakkimizda .about-hero-grid > .about-breadcrumb a,
body.page-template-page-hakkimizda .about-hero-grid > .about-breadcrumb span {
  color: #ffffff;
}

body.page-template-page-hakkimizda .about-hero-grid,
body.page-template-page-hakkimizda .about-hero-visual {
  height: calc(100vh - 145px + 94px);
  height: calc(100svh - 145px + 94px);
  height: calc(100dvh - 145px + 94px);
  min-height: 669px;
}

@media (max-width: 1200px) {
  body.page-template-page-hakkimizda .about-hero-grid,
  body.page-template-page-hakkimizda .about-hero-visual {
    height: calc(100vh - 162px + 94px);
    height: calc(100svh - 162px + 94px);
    height: calc(100dvh - 162px + 94px);
    min-height: 652px;
  }
}

@media (max-width: 767px) {
  body.page-template-page-hakkimizda .about-hero-grid,
  body.page-template-page-hakkimizda .about-hero-visual {
    height: min(500px, calc(100vh - 162px));
    height: min(500px, calc(100svh - 162px));
    height: min(500px, calc(100dvh - 162px));
    min-height: 500px;
  }
}

/* İşitme Hakkında: page-owned ACF hero and automatic guide directory. */
.hearing-about-directory-page {
  --had-ink: #10233f;
  --had-muted: #5e6d82;
  --had-line: #dce4ee;
  background: #fff;
  color: var(--had-ink);
}

.hearing-about-directory-page .hearing-knowledge-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.hearing-about-directory-hero {
  padding: 42px 0 76px;
  background: linear-gradient(145deg, #f7f9fc 0%, #eef4f9 100%);
}

.hearing-about-directory-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
  padding-top: 40px;
}

.hearing-about-directory-hero h1 {
  max-width: 780px;
  margin: 18px 0 22px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.hearing-about-directory-hero-grid > div > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--had-muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
}

.hearing-about-directory-hero figure {
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #dfeaf2;
}

.hearing-about-directory-hero figure img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.hearing-about-directory-list {
  padding: 96px 0 112px;
}

.hearing-about-directory-list header {
  max-width: 760px;
  margin-bottom: 46px;
}

.hearing-about-directory-list h2 {
  margin: 18px 0 14px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hearing-about-directory-list header > p:last-child {
  color: var(--had-muted);
  font-size: 18px;
  line-height: 1.7;
}

.hearing-about-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hearing-about-directory-grid article,
.hearing-about-directory-grid article > a {
  min-width: 0;
  height: 100%;
}

.hearing-about-directory-grid article > a {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--had-line);
  border-radius: 22px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(27, 48, 78, .06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hearing-about-directory-grid article > a:hover {
  transform: translateY(-4px);
  border-color: #b9cce0;
  box-shadow: 0 18px 44px rgba(27, 48, 78, .11);
}

.hearing-about-directory-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 15px;
  background: #eaf2f9;
  color: #174f7c;
  font-size: 23px;
}

.hearing-about-directory-grid h3 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.25;
}

.hearing-about-directory-grid p {
  margin: 0 0 24px;
  color: var(--had-muted);
  line-height: 1.65;
}

.hearing-about-directory-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  color: #174f7c;
  font-weight: 750;
}

@media (max-width: 960px) {
  .hearing-about-directory-hero-grid {
    grid-template-columns: 1fr;
  }
  .hearing-about-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .hearing-about-directory-page .hearing-knowledge-shell {
    width: min(100% - 32px, 1180px);
  }
  .hearing-about-directory-hero {
    padding: 28px 0 54px;
  }
  .hearing-about-directory-hero-grid {
    gap: 30px;
    padding-top: 24px;
  }
  .hearing-about-directory-hero-grid > div {
    min-width: 0;
  }
  .hearing-about-directory-hero h1 {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 42px);
    overflow-wrap: anywhere;
    text-wrap: wrap;
    white-space: normal;
  }
  .hearing-about-directory-hero figure,
  .hearing-about-directory-hero figure img {
    min-height: 280px;
  }
  .hearing-about-directory-list {
    padding: 68px 0 80px;
  }
  .hearing-about-directory-grid {
    grid-template-columns: 1fr;
  }
}

.about-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: rgba(7, 25, 50, 0.58);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.about-breadcrumb a:hover {
  color: #0b2a5b;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.86fr);
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
}

.about-hero-copy {
  max-width: 560px;
}

.about-kicker {
  margin: 0 0 10px;
  color: #e2a817;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-hero h1,
.about-section-heading h2,
.about-cta-card h2 {
  margin: 0;
  color: #071932;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.about-hero h1 {
  max-width: 540px;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.06;
}

.about-hero h1 span {
  color: #f3b51f;
}

.about-hero-copy > p:not(.about-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: rgba(7, 25, 50, 0.7);
  font-size: 14.5px;
  line-height: 1.65;
}

.about-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.about-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(8, 34, 72, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 36px rgba(8, 34, 72, 0.08);
  color: #0a1d3c;
  font-size: 13px;
  font-weight: 700;
}

.about-trust-item i {
  color: #f3b51f;
  font-size: 18px;
}

.about-hero-visual {
  position: relative;
  min-height: 390px;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #dcecff;
  box-shadow: 0 22px 58px rgba(8, 34, 72, 0.14);
}

.about-hero-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(5, 22, 48, 0.64) 100%);
  pointer-events: none;
}

.about-hero-visual img,
.about-hero-visual video,
.about-photo-card img,
.about-team-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-visual > img,
.about-hero-visual > video {
  position: relative;
  z-index: 0;
}

.about-acoustic-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.about-acoustic-field__canvas {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(123, 205, 255, 0.3));
}

.about-acoustic-field__contour,
.about-acoustic-field__signal,
.about-acoustic-field__focus ellipse {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.about-acoustic-field__contour {
  stroke: url("#about-acoustic-cool");
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 2 9 24 11;
  opacity: 0.62;
  animation: about-acoustic-flow 8s linear infinite;
}

.about-acoustic-field__contour--two {
  stroke-width: 1.1;
  opacity: 0.48;
  animation-duration: 10s;
  animation-direction: reverse;
}

.about-acoustic-field__contour--three {
  opacity: 0.34;
  animation-duration: 12s;
}

.about-acoustic-field__focus {
  transform-box: fill-box;
  transform-origin: center;
  animation: about-acoustic-orbit 16s linear infinite;
}

.about-acoustic-field__focus ellipse {
  stroke: url("#about-acoustic-warm");
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 24 18 4 17;
  opacity: 0.68;
}

.about-acoustic-field__focus ellipse:nth-child(2) {
  stroke-width: 1;
  stroke-dasharray: 42 25 6 31;
  opacity: 0.44;
}

.about-acoustic-field__focus ellipse:nth-child(3) {
  stroke-dasharray: 60 48 3 34;
  opacity: 0.25;
}

.about-acoustic-field__signal {
  stroke: url("#about-acoustic-cool");
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 1 13;
  opacity: 0.7;
  animation: about-acoustic-scan 5.8s linear infinite;
}

.about-acoustic-field__signal--warm {
  stroke: url("#about-acoustic-warm");
  stroke-width: 1.15;
  stroke-dasharray: 18 15 2 20;
  opacity: 0.55;
  animation-duration: 8.4s;
  animation-direction: reverse;
}

.about-acoustic-field__aperture {
  position: absolute;
  top: 19%;
  left: 45%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 105, 0.18) 0, rgba(123, 205, 255, 0.08) 26%, transparent 68%);
  mix-blend-mode: screen;
  animation: about-acoustic-breathe 3.8s ease-in-out infinite;
}

.about-acoustic-field__focus-dot {
  position: absolute;
  top: 31.9%;
  left: 54.8%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #f6bc2f;
  box-shadow: 0 0 0 5px rgba(246, 188, 47, 0.12), 0 0 16px rgba(255, 216, 121, 0.82);
  animation: about-acoustic-pulse 2.6s ease-out infinite;
}

@keyframes about-acoustic-flow {
  to {
    stroke-dashoffset: -124;
  }
}

@keyframes about-acoustic-scan {
  to {
    stroke-dashoffset: -168;
  }
}

@keyframes about-acoustic-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes about-acoustic-breathe {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.82);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.12);
  }
}

@keyframes about-acoustic-pulse {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  24%,
  68% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@media (max-width: 680px) {
  .about-acoustic-field__contour--three,
  .about-acoustic-field__focus ellipse:nth-child(3),
  .about-acoustic-field__signal--warm {
    display: none;
  }

  .about-acoustic-field__canvas {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-acoustic-field__contour,
  .about-acoustic-field__signal,
  .about-acoustic-field__focus,
  .about-acoustic-field__aperture,
  .about-acoustic-field__focus-dot {
    animation: none;
  }

  .about-acoustic-field__focus-dot {
    opacity: 0.7;
  }
}

.about-hero-visual figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #071932;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 18px 42px rgba(4, 18, 40, 0.18);
}

.about-hero-visual figcaption i {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #f3b51f;
  color: #071932;
  font-size: 19px;
}

.about-journey,
.about-values,
.about-team,
.about-cta-strip {
  padding: clamp(64px, 7vw, 92px) 0;
}

.about-section-heading {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}

.about-section-heading--compact {
  max-width: 760px;
}

.about-section-heading h2 {
  font-size: clamp(34px, 3.5vw, 48px);
  text-wrap: balance;
}

.about-cta-card h2 {
  font-size: clamp(30px, 3vw, 42px);
}

.about-section-heading > p:not(.about-kicker) {
  margin: 12px auto 0;
  max-width: 680px;
  color: rgba(7, 25, 50, 0.66);
  font-size: 14.5px;
  line-height: 1.6;
}

.about-journey-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 154px;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.about-photo-card,
.about-stat-card,
.about-process-card,
.about-value-card,
.about-team-card,
.about-cta-card {
  border: 1px solid rgba(8, 34, 72, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(8, 34, 72, 0.1);
}

.about-photo-card {
  min-height: 0;
  overflow: hidden;
  background: #dcecff;
}

.about-photo-card--large {
  grid-column: 1 / 6;
  grid-row: 1 / 4;
}

.about-journey-grid > :nth-child(2) {
  grid-column: 6 / 9;
  grid-row: 1 / 2;
}

.about-journey-grid > :nth-child(3) {
  grid-column: 9 / 13;
  grid-row: 1 / 2;
}

.about-journey-grid > :nth-child(4) {
  grid-column: 6 / 10;
  grid-row: 2 / 4;
}

.about-journey-grid > :nth-child(5) {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
}

.about-journey-grid > :nth-child(6) {
  grid-column: 1 / 4;
  grid-row: 4 / 5;
}

.about-journey-grid > :nth-child(7) {
  grid-column: 4 / 7;
  grid-row: 4 / 5;
}

.about-journey-grid > :nth-child(8) {
  grid-column: 7 / 10;
  grid-row: 4 / 5;
}

.about-journey-grid > :nth-child(9) {
  grid-column: 10 / 13;
  grid-row: 3 / 5;
}

.about-stat-card,
.about-process-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: 34px 38px;
  background: rgba(255, 255, 255, 0.9);
}

.about-journey-grid .about-stat-card {
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 15px;
  overflow: hidden;
  padding: 18px 22px;
}

.about-stat-card i {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(246, 188, 47, 0.42);
  border-radius: 14px;
  background: rgba(246, 188, 47, 0.1);
  color: #f6bc2f;
  font-size: 22px;
}

.about-stat-card div {
  flex: 1 1 0;
  min-width: 0;
}

.about-stat-card span {
  color: #f0ad15;
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3.5vw, 58px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.about-stat-card strong,
.about-process-card h3,
.about-value-card h3,
.about-team-card h3 {
  display: block;
  margin: 12px 0 0;
  color: #071932;
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.about-stat-card p,
.about-process-card p,
.about-value-card p,
.about-team-card span {
  margin: 7px 0 0;
  color: rgba(7, 25, 50, 0.64);
  font-size: 11px;
  line-height: 1.45;
}

.about-journey-grid .about-photo-card img {
  filter: none;
}

@media (min-width: 761px) {
  .about-journey-grid > :nth-child(3) img {
    object-position: center 36%;
  }
}

.about-journey-grid .about-stat-card p {
  display: none;
}

.about-journey-grid .about-stat-card {
  background: #071932;
}

.about-journey-grid .about-stat-card span {
  color: #f6bc2f;
}

.about-journey-grid .about-stat-card strong,
.about-journey-grid .about-stat-card p {
  color: #ffffff;
}

.about-stat-card--gold {
  background: #f6bc2f;
}

.about-stat-card--gold span,
.about-stat-card--gold strong,
.about-stat-card--gold p,
.about-stat-card--dark span,
.about-stat-card--dark strong,
.about-stat-card--dark p {
  color: #071932;
}

.about-stat-card--dark {
  background: #071932;
}

.about-stat-card--dark span,
.about-stat-card--dark strong,
.about-stat-card--dark p {
  color: #ffffff;
}

.about-journey-grid .about-stat-card--gold {
  background: #071932;
}

.about-journey-grid .about-stat-card--gold span {
  color: #f6bc2f;
}

.about-journey-grid .about-stat-card--gold strong,
.about-journey-grid .about-stat-card--gold p {
  color: #ffffff;
}

.about-process-card {
  background: #eaf4ff;
}

.about-process-card i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: #071932;
  color: #f6bc2f;
  font-size: 28px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.about-values-grid--dynamic {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.about-page .about-hero-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.about-page img {
  height: auto;
}

.about-page .about-hero-visual img,
.about-page .about-hero-visual video,
.about-page .about-photo-card img,
.about-page .about-team-card > img {
  height: 100%;
}

.about-value-card {
  position: relative;
  display: grid;
  min-height: 210px;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  background: #ffffff;
}

.about-value-card--blue {
  background: #eef7ff;
}

.about-value-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  background: #f6bc2f;
  color: #071932;
  font-size: 22px;
}

.about-value-card h3 {
  margin-top: 16px;
  font-size: clamp(22px, 2vw, 26px);
}

.about-value-card p {
  max-width: 350px;
  font-size: 13.5px;
}

.about-value-card img {
  width: 150px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(48, 91, 146, 0.12));
}

.about-team {
  overflow-x: hidden;
}

.about-team-heading-row {
  display: block;
  margin-bottom: 26px;
}

.about-team-heading-row .about-section-heading {
  margin-bottom: 0;
}

.about-team-controls {
  display: flex;
  position: relative;
  z-index: 2;
  width: max-content;
  gap: 10px;
  margin: 20px auto 0;
}

.about-team-controls button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(7, 25, 50, 0.12);
  border-radius: 14px;
  background: #ffffff;
  color: #071932;
  cursor: pointer;
  font-size: 19px;
  box-shadow: 0 12px 30px rgba(8, 34, 72, 0.08);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.about-team-controls button:hover:not(:disabled) {
  background: #071932;
  color: #f6bc2f;
  transform: translateY(-2px);
}

.about-team-controls button:focus-visible,
.about-team-grid:focus-visible {
  outline: 3px solid rgba(246, 188, 47, 0.5);
  outline-offset: 3px;
}

.about-team-controls button:disabled {
  cursor: default;
  opacity: 0.34;
}

.about-team-grid,
.about-team-grid--dynamic {
  --team-track-bleed: calc((100vw - min(1180px, calc(100vw - 48px))) / 2);

  display: grid;
  grid-auto-columns: clamp(260px, 25vw, 300px);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 18px;
  margin: -22px calc(-1 * var(--team-track-bleed)) -38px;
  padding: 24px calc(var(--team-track-bleed) + 2px) 52px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.about-team-grid::-webkit-scrollbar {
  display: none;
}

.about-team-card {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: #ffffff;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.about-team-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.82) contrast(0.98);
  transition: transform 420ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.about-team-card:hover {
  border-color: rgba(246, 188, 47, 0.42);
  box-shadow: 0 24px 56px rgba(8, 34, 72, 0.14);
  transform: translateY(-3px);
}

.about-team-card:hover img {
  transform: scale(1.025);
}

.about-team-card-body {
  position: relative;
  display: flex;
  min-height: 98px;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px 17px;
  border-top: 1px solid rgba(8, 34, 72, 0.08);
  background: #ffffff;
}

.about-team-card-body::before {
  position: absolute;
  top: -1px;
  left: 18px;
  width: 42px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #f6bc2f;
  content: "";
}

.about-team-card-body p {
  margin: 0;
  color: #c68800;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-team-card h3 {
  margin-top: 7px;
  color: #071932;
  font-size: clamp(18px, 1.65vw, 21px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.about-cta-strip {
  padding: clamp(48px, 5vw, 68px) 0 64px;
}

.about-cta-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  min-height: 0;
  padding: clamp(30px, 3.4vw, 44px) clamp(30px, 4.2vw, 58px);
  overflow: hidden;
  border-color: rgba(111, 162, 232, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 50%, rgba(27, 91, 172, 0.38) 0, rgba(13, 49, 98, 0.2) 24%, transparent 48%),
    radial-gradient(circle at 12% 118%, rgba(246, 188, 47, 0.13), transparent 38%),
    linear-gradient(125deg, #071932 0%, #081d3b 58%, #06162d 100%);
  color: #ffffff;
  box-shadow: 0 24px 56px rgba(7, 25, 50, 0.17);
}

.about-cta-card::after {
  position: absolute;
  z-index: -1;
  right: 30%;
  bottom: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 188, 47, 0.7), transparent);
  content: "";
}

.about-cta-copy,
.about-cta-action {
  position: relative;
  z-index: 1;
}

.about-cta-card .about-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 13px;
  padding: 0 12px;
  border: 1px solid #cbd9ef;
  border-radius: 999px;
  background: #edf3fc;
  color: #2d5ea5;
}

.about-cta-card h2 {
  max-width: 690px;
  color: #ffffff;
  font-size: clamp(32px, 3.25vw, 45px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.about-cta-text {
  max-width: 610px;
  margin: 13px 0 0;
  color: rgba(225, 237, 255, 0.72);
  font-size: 15px;
  line-height: 1.55;
}

.about-cta-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.about-cta-features li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid rgba(194, 217, 250, 0.18);
  border-radius: 0;
  background: transparent;
  color: rgba(244, 248, 255, 0.88);
  font-size: 12.5px;
  font-weight: 650;
}

.about-cta-features li:first-child {
  padding-left: 0;
}

.about-cta-features li:last-child {
  padding-right: 0;
  border-right: 0;
}

.about-cta-features i {
  color: #f6bc2f;
  font-size: 17px;
}

.about-cta-action {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.about-cta-button {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 25px;
  border-radius: 14px;
  background: #f6bc2f;
  color: #071932;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(246, 188, 47, 0.24);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.about-cta-button i {
  font-size: 17px;
  transition: transform 180ms ease;
}

.about-cta-button:hover {
  background: #ffca42;
  box-shadow: 0 22px 48px rgba(246, 188, 47, 0.36);
  transform: none;
}

.about-cta-button:hover i {
  transform: translate(2px, -2px);
}

.about-cta-button--secondary:hover i,
.about-cta-button--secondary:focus-visible i {
  transform: none;
}

.about-cta-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.88);
  outline-offset: 4px;
}

.about-cta-button--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

.about-cta-button--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

@media (max-width: 1080px) {
  .about-hero-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-copy {
    max-width: none;
  }

  .about-hero-visual {
    min-height: 420px;
  }

  .about-journey-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 118px;
    gap: 16px;
    max-width: 920px;
  }

  .about-stat-card,
  .about-process-card {
    padding: 22px;
  }

  .about-journey-grid .about-stat-card {
    gap: 10px;
    padding: 14px 16px;
  }

  .about-stat-card i {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 18px;
  }

  .about-stat-card span {
    font-size: clamp(27px, 4vw, 38px);
  }

  .about-stat-card strong {
    margin-top: 7px;
    font-size: 13px;
  }

  .about-photo-card--large {
    grid-column: 1 / 6;
    grid-row: 1 / 4;
  }

  .about-value-card {
    grid-template-columns: minmax(0, 1fr) 140px;
  }
}

@media (max-width: 760px) {
  .about-shell {
    width: min(100% - 32px, 1180px);
  }

  .about-team-grid,
  .about-team-grid--dynamic {
    --team-track-bleed: 16px;
  }

  .about-hero {
    padding: 0;
  }

  .about-hero-grid {
    position: relative;
    display: block;
    height: clamp(430px, 112vw, 520px);
  }

  .about-hero-copy {
    position: absolute;
    top: 50%;
    right: 22px;
    left: 22px;
    z-index: 4;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    color: #ffffff;
    transform: translateY(-50%);
  }

  .about-breadcrumb {
    margin-bottom: 26px;
  }

  .about-hero-grid > .about-breadcrumb {
    left: 22px;
    padding-top: 22px;
  }

  .about-hero h1 {
    max-width: 100%;
    color: #ffffff;
    font-size: clamp(25px, 8.5vw, 34px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
  }

  .about-hero h1 span {
    color: #f7c33b;
  }

  .about-hero-copy > p:not(.about-kicker),
    .about-section-heading > p:not(.about-kicker) {
    font-size: 14px;
    line-height: 1.6;
  }

  .about-hero-copy > p:not(.about-kicker) {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.84);
    overflow-wrap: anywhere;
  }

  .about-trust-list {
    gap: 10px;
    margin-top: 20px;
  }

  .about-trust-item {
    width: 100%;
    justify-content: center;
  }

  .about-hero-visual {
    min-height: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 22px;
  }

  .about-hero-visual > img,
  .about-hero-visual > video {
    object-position: center 20%;
  }

  .about-hero-visual::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, rgba(4, 20, 48, 0.9) 0%, rgba(4, 20, 48, 0.68) 42%, rgba(4, 20, 48, 0.2) 78%, transparent 100%);
    pointer-events: none;
  }

  .about-hero-visual figcaption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  .about-journey,
  .about-values,
  .about-team,
    .about-cta-strip {
    padding: 38px 0;
  }

  .about-section-heading {
    margin-bottom: 22px;
    text-align: left;
  }

  .about-section-heading h2 {
    font-size: clamp(30px, 8.8vw, 38px);
  }

  .about-cta-card h2 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-journey-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    max-width: none;
  }

  .about-journey-grid > *,
  .about-journey-grid > :nth-child(n),
  .about-photo-card--large {
    grid-column: auto;
    grid-row: auto;
  }

  .about-journey-grid > :nth-child(1) {
    order: 1;
  }

  .about-journey-grid > :nth-child(2) {
    order: 2;
  }

  .about-journey-grid > :nth-child(3) {
    order: 3;
  }

  .about-journey-grid > :nth-child(4) {
    order: 5;
  }

  .about-journey-grid > :nth-child(5) {
    order: 4;
  }

  .about-journey-grid > :nth-child(6) {
    order: 6;
  }

  .about-journey-grid > :nth-child(7) {
    order: 7;
  }

  .about-journey-grid > :nth-child(8) {
    order: 8;
  }

  .about-journey-grid > :nth-child(9) {
    order: 9;
  }

  .about-photo-card {
    min-height: 210px;
  }

  .about-photo-card--large {
    min-height: 250px;
  }

  .about-stat-card,
  .about-process-card {
    min-height: 132px;
    padding: 20px;
    border-radius: 17px;
  }

  .about-stat-card i {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 19px;
  }

  .about-stat-card span {
    font-size: clamp(34px, 11vw, 44px);
  }

  .about-stat-card strong {
    margin-top: 8px;
    font-size: 17px;
  }

  .about-stat-card p {
    margin-top: 5px;
    font-size: 10.5px;
  }

  .about-value-card {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .about-value-card {
    min-height: 0;
  }

  .about-value-card img {
    width: 140px;
    justify-self: end;
    margin-top: -22px;
  }

  .about-team-grid,
  .about-team-grid--dynamic {
    grid-auto-columns: min(78vw, 300px);
  }

  .about-team-card-body {
    padding: 20px;
  }

  .about-cta-card {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 30px 26px;
    border-radius: 22px;
  }

  .about-cta-card h2 {
    max-width: 620px;
    font-size: clamp(29px, 8vw, 38px);
  }

  .about-cta-action {
    width: 100%;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .about-cta-button {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .about-hero-visual {
    min-height: 270px;
  }

  .about-hero-visual figcaption {
    font-size: 13px;
  }

  .about-team-heading-row {
    margin-bottom: 16px;
  }

  .about-team {
    padding: 28px 0 30px;
  }

  .about-team-heading-row .about-section-heading h2 {
    font-size: clamp(28px, 8vw, 32px);
    line-height: 1;
  }

  .about-team-controls {
    margin-top: 12px;
  }

  .about-team-controls button {
    width: 40px;
    height: 40px;
  }

  .about-team-grid,
  .about-team-grid--dynamic {
    grid-auto-columns: min(72vw, 252px);
    margin-top: -14px;
    margin-bottom: -28px;
    padding-top: 16px;
    padding-bottom: 40px;
  }

  .about-team-card-body {
    min-height: 82px;
    padding: 13px 15px 14px;
  }

  .about-team-card-body::before {
    left: 15px;
  }

  .about-team-card h3 {
    margin-top: 5px;
    font-size: 18px;
  }

  .about-cta-card {
    width: 100%;
    padding: 26px 20px;
  }

  .about-cta-features {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 9px 14px;
  }

  .about-cta-features li,
  .about-cta-features li:first-child,
  .about-cta-features li:last-child {
    min-height: 22px;
    padding: 0;
    border: 0;
    font-size: 11.5px;
  }

  .about-cta-button {
    flex: 0 0 auto;
    width: 100%;
  }

  .about-cta-action {
    flex-direction: column;
  }
}

/* Desktop about hero: let the video carry the full card while the copy sits
   over a calm left-to-right contrast wash. The media keeps its right edge. */
@media (min-width: 1081px) {
  .about-hero-grid {
    position: relative;
    display: block;
    height: 520px;
  }

  .about-hero-visual {
    width: 100%;
    height: 520px;
    min-height: 0;
  }

  .about-hero-visual > img,
  .about-hero-visual > video {
    object-position: center 20%;
  }

  .about-hero-visual::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, rgba(4, 20, 48, 0.88) 0%, rgba(4, 20, 48, 0.62) 27%, rgba(4, 20, 48, 0.12) 53%, transparent 72%);
    pointer-events: none;
  }

  .about-hero-copy {
    position: absolute;
    top: 50%;
    left: clamp(30px, 4vw, 64px);
    z-index: 4;
    width: min(50%, 600px);
    max-width: none;
    color: #ffffff;
    transform: translateY(-50%);
  }

  .about-hero h1 {
    color: #ffffff;
    font-size: clamp(40px, 4.4vw, 66px);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  .about-hero h1 span {
    color: #f7c33b;
  }

  .about-hero-copy > p:not(.about-kicker) {
    color: rgba(255, 255, 255, 0.82);
  }

  .about-trust-item {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Hearing guide: contextual product carousel */
.hearing-knowledge-products {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(213, 165, 53, 0.2);
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 193, 32, 0.22), transparent 31%),
    radial-gradient(circle at 94% 88%, rgba(213, 165, 53, 0.18), transparent 29%),
    linear-gradient(180deg, #fffdf7 0%, #fff7dc 54%, #fffaf0 100%);
}

.hearing-knowledge-products::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.28;
  background-image: radial-gradient(rgba(153, 109, 8, 0.14) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000);
}

.hearing-knowledge-products > .hearing-knowledge-shell {
  position: relative;
  z-index: 1;
}

.hearing-products-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 34px;
}

.hearing-products-copy {
  max-width: 760px;
}

.hearing-products-copy > p:last-child {
  max-width: 650px;
  margin: 13px 0 0;
  color: #52647f;
  font-size: 16px;
  line-height: 1.68;
}

.hearing-products-actions {
  display: grid;
  justify-items: end;
  gap: 22px;
}

.hearing-products-actions > a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #0d3470;
  font-weight: 700;
  text-decoration: none;
}

.hearing-products-actions > a i {
  transition: transform 180ms ease;
}

.hearing-products-actions > a:hover i {
  transform: translateX(4px);
}

.hearing-products-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hearing-products-counter {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  min-width: 70px;
  color: #71809a;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.hearing-products-counter strong {
  color: #0b2858;
  font-size: 16px;
}

.hearing-products-nav button {
  display: inline-grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(13, 52, 112, 0.18);
  border-radius: 50%;
  background: #fff;
  color: #0d3470;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(13, 52, 112, 0.08);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hearing-products-nav button:hover:not(:disabled),
.hearing-products-nav button:focus-visible {
  border-color: #0d3470;
  background: #0d3470;
  color: #fff;
  transform: translateY(-2px);
}

.hearing-products-nav button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.hearing-products-carousel {
  margin: -20px -30px -38px;
  padding: 20px 30px 38px;
  overflow: hidden;
}

.hearing-knowledge-product-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  overflow-x: auto;
  padding: 4px 2px 22px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.hearing-knowledge-product-grid::-webkit-scrollbar {
  display: none;
}

.hearing-knowledge-product-grid .device-series-card {
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-shadow: 0 16px 44px rgba(13, 52, 112, 0.1);
}

@media (max-width: 1100px) {
  .hearing-products-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hearing-products-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    justify-items: start;
    align-items: center;
  }

  .hearing-products-nav {
    justify-self: end;
  }

  .hearing-knowledge-product-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 22px) / 2);
  }
}

@media (max-width: 700px) {
  .hearing-knowledge-products {
    padding-block: 66px;
  }

  .hearing-products-head {
    margin-bottom: 24px;
  }

  .hearing-products-copy > p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }

  .hearing-products-actions {
    gap: 16px;
  }

  .hearing-products-actions > a {
    font-size: 13px;
  }

  .hearing-products-counter {
    display: none;
  }

  .hearing-products-nav button {
    width: 42px;
    height: 42px;
  }

  .hearing-knowledge-product-grid {
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 330px);
    gap: 14px;
    padding-bottom: 16px;
  }

  .hearing-products-carousel {
    margin: -14px -12px -30px;
    padding: 14px 12px 30px;
  }

  .hearing-knowledge-product-grid .device-series-card {
    min-height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hearing-knowledge-product-grid {
    scroll-behavior: auto;
  }
}

      .callback-page {
        background:
          radial-gradient(circle at 8% 12%, rgba(255, 194, 46, 0.12), transparent 18%),
          radial-gradient(circle at 92% 8%, rgba(77, 133, 214, 0.14), transparent 22%),
          linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
      }

/* Hearing series archives and the product-level series navigator. */
.device-detail-breadcrumb {
  position: relative;
  z-index: 12;
}

.device-detail-series-crumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.device-detail-series-toggle {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(19, 40, 76, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #13284c;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.device-detail-series-toggle:hover,
.device-detail-series-toggle:focus-visible,
.device-detail-series-toggle[aria-expanded="true"] {
  border-color: #13284c;
  background: #13284c;
  color: #ffffff;
  outline: none;
}

.device-detail-series-toggle i {
  font-size: 13px;
  transition: transform 180ms ease;
}

.device-detail-series-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.device-detail-series-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: min(330px, calc(100vw - 32px));
  max-height: min(360px, 65vh);
  padding: 10px;
  overflow-y: auto;
  border: 1px solid rgba(192, 204, 221, 0.8);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(17, 35, 66, 0.18);
  backdrop-filter: blur(16px);
}

.device-detail-series-menu[hidden] {
  display: none !important;
}

.device-detail-series-menu-title {
  display: block;
  padding: 8px 10px 10px;
  color: rgba(19, 40, 76, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device-detail-series-menu ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.device-detail-series-menu li a {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px;
  border-radius: 10px;
  color: #13284c;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}

.device-detail-series-menu li a:hover,
.device-detail-series-menu li a:focus-visible {
  background: #f2f6fb;
  color: #0c57a5;
  outline: none;
}

.device-detail-series-menu li i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.hearing-series-page {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--series-color) 52%, transparent), transparent 20%),
    linear-gradient(180deg, #f9fbfe 0%, #ffffff 45%, #f4f7fb 100%);
}

.hearing-series-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 34px) 0 clamp(84px, 7vw, 94px);
  background:
    radial-gradient(circle at 78% 35%, color-mix(in srgb, var(--series-color) 72%, white), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.hearing-series-hero-card {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(400px, 1.06fr);
  align-items: center;
  gap: clamp(34px, 6vw, 88px);
  padding: clamp(42px, 6vw, 78px);
  border: 1px solid rgba(194, 206, 223, 0.72);
  border-radius: 30px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.98) 0 49%, color-mix(in srgb, var(--series-color) 70%, white) 100%);
  box-shadow: 0 32px 90px rgba(21, 44, 79, 0.11);
}

.hearing-series-pill {
  width: fit-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--series-color);
  color: var(--series-contrast);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hearing-series-hero-copy h1 {
  max-width: 11ch;
  margin: 0;
  color: #13284c;
  font-family: "Poppins", sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.hearing-series-intro {
  max-width: 590px;
  margin-top: 22px;
  color: rgba(19, 40, 76, 0.68);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
}

.hearing-series-intro > :first-child,
.hearing-series-intro > :last-child {
  margin-top: 0;
  margin-bottom: 0;
}

.hearing-series-hero-visual {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hearing-series-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(430px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 0 0 32px rgba(255, 255, 255, 0.25),
    0 0 0 64px rgba(255, 255, 255, 0.14);
}

.hearing-series-orbit {
  position: absolute;
  z-index: -1;
  width: min(500px, 100%);
  aspect-ratio: 1.65;
  border: 1px solid color-mix(in srgb, var(--series-contrast) 20%, transparent);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.hearing-series-hero-visual > img {
  width: min(410px, 86%);
  height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(29, 45, 72, 0.2));
}

.hearing-series-count {
  position: absolute;
  right: 0;
  bottom: 20px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid rgba(193, 205, 222, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #4a5a72;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 18px 42px rgba(25, 43, 71, 0.12);
  backdrop-filter: blur(12px);
}

.hearing-series-count strong {
  color: #13284c;
  font-size: 22px;
}

.hearing-series-scroll-cue {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: clamp(10px, 1.5vw, 20px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-control);
  color: var(--ds-color-brand-ink);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-weight-bold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transform: translateX(50%);
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.hearing-series-scroll-cue:hover {
  background: rgba(255, 255, 255, 0.64);
  color: var(--ds-color-brand-blue);
}

.hearing-series-scroll-cue:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--series-color) 72%, var(--ds-color-brand-blue));
  outline-offset: 3px;
}

.hearing-series-scroll-cue i {
  font-size: var(--ds-icon-sm);
  animation: hearing-series-cue-bob 1.65s ease-in-out infinite;
}

@keyframes hearing-series-cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

.hearing-series-products {
  padding: clamp(72px, 8vw, 116px) 0;
  scroll-margin-top: clamp(72px, 8vw, 104px);
}

.hearing-series-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: 40px;
  margin-bottom: 38px;
}

.hearing-series-section-kicker {
  margin: 0 0 12px;
  color: #0c66bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hearing-series-section-head h2 {
  margin: 0;
  color: #13284c;
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hearing-series-section-head > p {
  margin: 0;
  color: rgba(19, 40, 76, 0.64);
  font-size: 15px;
  line-height: 1.7;
}

.hearing-series-product-grid {
  align-items: stretch;
}

.hearing-series-empty {
  padding: 28px;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  background: #ffffff;
  color: #53627a;
}

@media (max-width: 980px) {
  .hearing-series-hero-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hearing-series-hero-copy h1 {
    max-width: 16ch;
  }

  .hearing-series-hero-visual {
    min-height: 340px;
  }

  .hearing-series-section-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .device-detail-page .device-detail-breadcrumb {
    gap: 6px;
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: 40;
  }

  .device-detail-series-crumb {
    position: static;
  }

  .device-detail-series-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-height: min(420px, 60vh);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(11, 28, 54, 0.28);
  }

  .hearing-series-hero {
    padding-bottom: 96px;
  }

  .hearing-series-hero-card {
    gap: 24px;
    padding: 26px 20px;
    border-radius: 22px;
  }

  .hearing-series-hero-copy h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .hearing-series-intro {
    font-size: 14px;
    line-height: 1.62;
  }

  .hearing-series-hero-visual {
    min-height: 270px;
  }

  .hearing-series-hero-visual > img {
    width: min(280px, 82%);
    height: 250px;
  }

  .hearing-series-count {
    right: 4px;
    bottom: 0;
  }

  .hearing-series-products {
    padding: 62px 0;
    scroll-margin-top: 84px;
  }

  .hearing-series-section-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 26px;
  }

  .hearing-series-section-head h2 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hearing-series-scroll-cue i {
    animation: none;
  }
}

      .contact-page {
        background:
          radial-gradient(circle at 8% 10%, rgba(87, 142, 255, 0.12), transparent 16%),
          radial-gradient(circle at 90% 8%, rgba(245, 201, 79, 0.16), transparent 18%),
          radial-gradient(circle at 16% 82%, rgba(88, 160, 255, 0.08), transparent 16%),
          linear-gradient(180deg, #fbfdff 0%, #f5f8fd 100%);
      }

      .contact-page-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), 1220px);
        margin: 0 auto;
      }

      .contact-page-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: clamp(20px, 3vw, 38px) 0 clamp(30px, 4vw, 52px);
      }

      .contact-page-hero::before,
      .contact-page-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .contact-page-hero::before {
        background:
          radial-gradient(circle at 10% 8%, rgba(48, 112, 232, 0.12), transparent 11%),
          radial-gradient(circle at 10% 8%, rgba(48, 112, 232, 0.08), transparent 18%),
          radial-gradient(circle at 92% 10%, rgba(61, 121, 224, 0.1), transparent 16%);
        opacity: 0.9;
      }

      .contact-page-hero::after {
        background-image:
          url("data:image/svg+xml,%3Csvg width='500' height='260' viewBox='0 0 500 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238db1ff' fill-opacity='.32'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='28' cy='8' r='3'/%3E%3Ccircle cx='48' cy='8' r='3'/%3E%3Ccircle cx='68' cy='8' r='3'/%3E%3Ccircle cx='88' cy='8' r='3'/%3E%3Ccircle cx='108' cy='8' r='3'/%3E%3Ccircle cx='8' cy='28' r='3'/%3E%3Ccircle cx='28' cy='28' r='3'/%3E%3Ccircle cx='48' cy='28' r='3'/%3E%3Ccircle cx='68' cy='28' r='3'/%3E%3Ccircle cx='88' cy='28' r='3'/%3E%3Ccircle cx='108' cy='28' r='3'/%3E%3Ccircle cx='8' cy='48' r='3'/%3E%3Ccircle cx='28' cy='48' r='3'/%3E%3Ccircle cx='48' cy='48' r='3'/%3E%3Ccircle cx='68' cy='48' r='3'/%3E%3Ccircle cx='88' cy='48' r='3'/%3E%3Ccircle cx='108' cy='48' r='3'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(circle at 83% 24%, rgba(66, 127, 235, 0.16), transparent 12%),
          radial-gradient(circle at 94% 13%, rgba(66, 127, 235, 0.08), transparent 18%);
        background-repeat: no-repeat;
        background-position: left 20px top 84px, left top, left top;
        background-size: 118px 118px, 100% 100%, 100% 100%;
        opacity: 0.85;
        mix-blend-mode: screen;
      }

      .contact-page-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: 14px;
        color: rgba(31, 52, 91, 0.48);
        font-size: 11px;
        font-weight: 600;
        text-align: center;
      }

      .contact-page-breadcrumb a {
        color: rgba(31, 52, 91, 0.66);
        text-decoration: none;
        transition: color 0.2s ease;
      }

      .contact-page-breadcrumb a:hover,
      .contact-page-breadcrumb a:focus-visible {
        color: #071a44;
      }

      .contact-page-header {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 0 auto 18px;
        text-align: center;
      }

      .contact-page-kicker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        margin: 0 0 10px;
        padding: 3px 12px;
        border-radius: 999px;
        background: rgba(224, 235, 255, 0.88);
        color: #1f4f99;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .contact-page-header h1 {
        margin: 0;
        color: #06173b;
        font-size: clamp(28px, 3.1vw, 40px);
        line-height: 1.08;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .contact-page-header p {
        max-width: 600px;
        margin: 10px auto 0;
        color: rgba(22, 40, 74, 0.74);
        font-size: clamp(13px, 0.92vw, 15px);
        line-height: 1.55;
        text-wrap: pretty;
      }

      .contact-page-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-width: 760px;
        margin: 16px auto 0;
      }

      .contact-chip {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        gap: 2px;
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(214, 225, 242, 0.88);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: 0 18px 36px rgba(34, 55, 91, 0.06);
      }

      .contact-chip > .contact-chip-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        background: rgba(31, 87, 177, 0.1);
        color: #2059b0;
        font-size: 19px;
      }

      .contact-chip > .contact-chip-icon i {
        display: block;
        font-size: 19px;
        line-height: 1;
      }

      .contact-chip strong {
        display: block;
        color: #0f2552;
        font-size: 14px;
        line-height: 1.15;
      }

      .contact-chip > div > span {
        display: block;
        margin-top: 4px;
        color: rgba(22, 40, 74, 0.66);
        font-size: 11.5px;
        line-height: 1.45;
      }

      .contact-page-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 16px;
        margin-top: 20px;
      }

      .contact-branch-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 14px;
        border: 1px solid rgba(214, 225, 242, 0.92);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--ui-shadow-card);
      }

      .contact-branch-media {
        position: relative;
        overflow: hidden;
        flex: none;
        width: 100%;
        height: clamp(250px, 23vw, 320px);
        aspect-ratio: auto;
        max-height: none;
        border: 1px solid rgba(214, 225, 242, 0.82);
        border-radius: 16px;
        background: linear-gradient(135deg, #f5f8fd, #eef4fb);
      }

      .contact-branch-media::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 34%;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.52));
        pointer-events: none;
      }

      .contact-branch-media img {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.01);
      }

      .contact-branch-media .contact-branch-map {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
      }

      .contact-branch-body {
        flex: 1;
        display: grid;
        gap: 10px;
        padding: 14px 2px 0;
      }

      .contact-branch-top {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .contact-branch-heading {
        flex: 1;
        min-width: 0;
      }

      .contact-branch-badge {
        width: 42px;
        height: 42px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(31, 87, 177, 0.1);
        color: #2059b0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }

      .contact-branch-badge i {
        font-size: 20px;
      }

      .contact-branch-name {
        margin: 0;
        color: #081a42;
        font-size: clamp(18px, 1.35vw, 22px);
        line-height: 1.12;
        letter-spacing: -0.03em;
      }

      .contact-branch-address {
        margin: 6px 0 0;
        max-width: none;
        color: rgba(22, 40, 74, 0.7);
        font-size: 14px;
        line-height: 1.5;
        text-wrap: pretty;
      }

      .contact-branch-meta {
        display: grid;
        gap: 8px;
        padding-top: 13px;
        border-top: 1px solid rgba(214, 225, 242, 0.9);
      }

      .contact-branch-meta-row {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 9px;
        align-items: start;
        color: #15305f;
        font-size: 13px;
        line-height: 1.5;
      }

      .contact-branch-meta-row i {
        margin-top: 1px;
        color: #2059b0;
        font-size: 17px;
      }

      .contact-branch-meta-row a {
        color: inherit;
        text-decoration: none;
      }

      .contact-branch-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 2px;
      }

      .contact-branch-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-decoration: none;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      }

      .contact-branch-btn.primary {
        background: linear-gradient(180deg, rgba(255, 199, 56, 0.98), rgba(245, 182, 31, 0.98));
        color: #081a42;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 14px 30px rgba(243, 175, 26, 0.24);
      }

      .contact-branch-btn.secondary {
        border: 1px solid rgba(188, 202, 228, 0.96);
        background: #ffffff;
        color: #0f2552;
      }

      .contact-branch-btn:hover,
      .contact-branch-btn:focus-visible {
        transform: translateY(-1px);
        outline: none;
      }

      .contact-branch-btn i {
        font-size: 16px;
        line-height: 1;
      }

      .contact-branch-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        color: rgba(22, 40, 74, 0.62);
        font-size: 11.5px;
        line-height: 1.45;
      }

      .contact-branch-note i {
        margin-top: 1px;
        color: #2059b0;
        font-size: 16px;
      }

      .contact-message-section {
        position: relative;
        overflow: hidden;
        padding: clamp(38px, 4.2vw, 60px) 0 clamp(46px, 5vw, 72px);
        background:
          radial-gradient(circle at 12% 24%, rgba(245, 201, 79, 0.12), transparent 18%),
          radial-gradient(circle at 92% 28%, rgba(69, 131, 235, 0.11), transparent 22%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 250, 255, 0.94));
      }

      .contact-message-header {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
      }

      .contact-message-icon {
        width: 46px;
        height: 46px;
        display: inline-grid;
        place-items: center;
        margin-bottom: 12px;
        border-radius: 50%;
        background: #ffffff;
        color: #2059b0;
        font-size: 22px;
        box-shadow: 0 16px 36px rgba(34, 55, 91, 0.1);
      }

      .contact-message-header h2 {
        margin: 0;
        color: #071a44;
        font-size: clamp(28px, 3.2vw, 42px);
        line-height: 1.06;
        letter-spacing: -0.04em;
        text-wrap: balance;
      }

      .contact-message-header p {
        max-width: 620px;
        margin: 10px auto 0;
        color: rgba(22, 40, 74, 0.7);
        font-size: clamp(13px, 1.05vw, 16px);
        line-height: 1.55;
        text-wrap: pretty;
      }

      .contact-message-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr);
        gap: clamp(18px, 2.5vw, 28px);
        align-items: stretch;
        margin-top: clamp(24px, 3.2vw, 36px);
      }

      .contact-message-visual {
        position: relative;
        min-height: clamp(330px, 32vw, 460px);
        margin: 0;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(214, 225, 242, 0.92);
        border-radius: 22px;
        background: #eef4fb;
        box-shadow: var(--ui-shadow-card);
      }

      .contact-message-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6, 23, 59, 0), rgba(6, 23, 59, 0.08));
        pointer-events: none;
      }

      .contact-message-visual img {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center 42%;
      }

      .contact-message-trust {
        position: absolute;
        left: clamp(16px, 2vw, 24px);
        bottom: clamp(16px, 2vw, 24px);
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 230px;
        padding: 14px 18px;
        border: 1px solid rgba(214, 225, 242, 0.84);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        color: #071a44;
        box-shadow: 0 16px 32px rgba(19, 40, 76, 0.12);
      }

      .contact-message-trust span {
        width: 42px;
        height: 42px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(31, 87, 177, 0.1);
        color: #2059b0;
        font-size: 22px;
      }

      .contact-message-trust strong {
        font-size: 16px;
        line-height: 1.18;
        letter-spacing: -0.02em;
      }

      .contact-message-form {
        align-self: stretch;
        padding: clamp(18px, 2.1vw, 28px);
        border: 1px solid rgba(214, 225, 242, 0.96);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: var(--ui-shadow-card);
        min-width: 0;
      }

      .contact-message-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .contact-message-form input,
      .contact-message-form select,
      .contact-message-form textarea {
        width: 100%;
        min-width: 0;
        border: 1px solid rgba(202, 216, 238, 0.96);
        border-radius: 14px;
        background: #ffffff;
        color: #071a44;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .contact-message-form input,
      .contact-message-form select {
        height: 50px;
        padding: 0 15px;
      }

      .contact-message-form textarea {
        grid-column: 1 / -1;
        min-height: 128px;
        padding: 15px;
        resize: vertical;
      }

      .contact-message-form input::placeholder,
      .contact-message-form textarea::placeholder {
        color: rgba(22, 40, 74, 0.5);
      }

      .contact-message-form input:focus,
      .contact-message-form select:focus,
      .contact-message-form textarea:focus {
        border-color: rgba(32, 89, 176, 0.68);
        box-shadow: 0 0 0 4px rgba(32, 89, 176, 0.1);
      }

      .contact-message-select {
        position: relative;
        display: block;
        min-width: 0;
      }

      .contact-message-select select {
        appearance: none;
        padding-right: 44px;
        cursor: pointer;
      }

      .contact-message-select i {
        position: absolute;
        top: 50%;
        right: 16px;
        color: #071a44;
        font-size: 17px;
        line-height: 1;
        pointer-events: none;
        transform: translateY(-50%);
      }

      .contact-message-consent {
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: rgba(22, 40, 74, 0.72);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.45;
      }

      .contact-message-consent input {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 2px;
        padding: 0;
        border-radius: 5px;
        accent-color: #2059b0;
      }

      .contact-message-consent a {
        color: #2059b0;
        text-decoration: none;
      }

      .contact-message-consent a:hover,
      .contact-message-consent a:focus-visible {
        text-decoration: underline;
      }

      .contact-message-submit {
        grid-column: 1 / -1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        min-height: 50px;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(180deg, rgba(255, 199, 56, 1), rgba(245, 181, 31, 1));
        color: #071a44;
        font: inherit;
        font-size: 14.5px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 16px 32px rgba(243, 175, 26, 0.24);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .contact-message-submit:hover,
      .contact-message-submit:focus-visible {
        transform: translateY(-1px);
        outline: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 18px 36px rgba(243, 175, 26, 0.3);
      }

      .contact-message-submit i {
        font-size: 18px;
        line-height: 1;
      }

      .contact-form-feedback {
        grid-column: 1 / -1;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.45;
      }

      .contact-form-feedback--success { background: #eaf8f0; color: #17613a; }
      .contact-form-feedback--error { background: #fff1ef; color: #9b2c24; }
      .contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

      @media (max-width: 1180px) {
        .contact-page-header {
          max-width: 760px;
        }
      }

      @media (max-width: 820px) {
        .contact-page-shell {
          width: min(calc(100% - 36px), var(--ui-container-wide));
        }

        .contact-page-hero {
          padding: 20px 0 36px;
        }

        .contact-page-header h1 {
          font-size: clamp(27px, 6.5vw, 36px);
        }

        .contact-page-chips,
        .contact-page-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .contact-chip {
          padding: 12px;
        }

        .contact-branch-media {
          height: clamp(240px, 44vw, 300px);
          max-height: none;
        }

        .contact-message-layout {
          grid-template-columns: 1fr;
        }

        .contact-message-visual {
          min-height: clamp(300px, 48vw, 410px);
          max-height: 430px;
        }
      }

      @media (max-width: 640px) {
        .contact-page-shell {
          width: min(calc(100% - 24px), var(--ui-container-wide));
        }

        .contact-page-hero {
          padding: 20px 0 32px;
        }

        .contact-page-breadcrumb {
          gap: 6px;
          overflow-x: auto;
          justify-content: center;
          white-space: nowrap;
        }

        .contact-page-header {
          margin-bottom: 18px;
        }

        .contact-page-header h1 {
          font-size: clamp(30px, 8vw, 34px);
        }

        .contact-page-header p {
          margin-top: 10px;
          font-size: 13px;
        }

        .contact-chip {
          grid-template-columns: 38px minmax(0, 1fr);
          gap: 9px;
        }

        .contact-chip > .contact-chip-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          font-size: 18px;
        }

        .contact-chip > .contact-chip-icon i {
          font-size: 18px;
        }

        .contact-chip strong {
          font-size: 14px;
        }

        .contact-chip > div > span {
          font-size: 11.5px;
        }

        .contact-branch-card {
          padding: 11px;
          border-radius: 17px;
        }

        .contact-branch-media {
          aspect-ratio: 2.05;
          border-radius: 14px;
        }

        .contact-branch-body {
          padding: 14px 0 0;
        }

        .contact-branch-top {
          gap: 12px;
        }

        .contact-branch-badge {
          width: 40px;
          height: 40px;
          border-radius: 13px;
        }

        .contact-branch-badge i {
          font-size: 20px;
        }

        .contact-branch-actions {
          grid-template-columns: 1fr;
        }

        .contact-branch-btn {
          min-height: 40px;
          font-size: 13px;
        }

        .contact-message-section {
          padding: 34px 0 46px;
        }

        .contact-message-icon {
          width: 42px;
          height: 42px;
          margin-bottom: 12px;
          font-size: 20px;
        }

        .contact-message-header h2 {
          font-size: clamp(25px, 7.4vw, 32px);
        }

        .contact-message-header p {
          font-size: 13px;
        }

        .contact-message-visual {
          min-height: 250px;
          max-height: 310px;
          border-radius: 20px;
        }

        .contact-message-visual img {
          object-position: center 38%;
        }

        .contact-message-trust {
          min-width: 0;
          padding: 12px 14px;
          border-radius: 16px;
        }

        .contact-message-trust span {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          font-size: 20px;
        }

        .contact-message-trust strong {
          font-size: 14px;
        }

        .contact-message-form {
          padding: 14px;
          border-radius: 20px;
        }

        .contact-message-form-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .contact-message-form input,
        .contact-message-form select {
          height: 48px;
          font-size: 13.5px;
        }

        .contact-message-form textarea {
          min-height: 120px;
          font-size: 13.5px;
        }

        .contact-message-consent {
          font-size: 12.5px;
        }

        .contact-message-submit {
          min-height: 50px;
          font-size: 14px;
        }
      }

      /* Contact page: compact hierarchy, accessible controls and responsive flow. */
      body.page-template-page-iletisim {
        overflow-x: clip;
      }

      body.page-template-page-iletisim .header::after {
        left: 0;
        width: 100%;
        transform: none;
      }

      .contact-page-hero {
        padding: clamp(16px, 2vw, 26px) 0 clamp(28px, 3vw, 42px);
      }

      .contact-page-breadcrumb {
        margin-bottom: 10px;
      }

      .contact-page-header {
        max-width: 860px;
        margin-bottom: 0;
      }

      .contact-page-kicker {
        margin-bottom: 7px;
      }

      .contact-page-header h1 {
        font-size: clamp(32px, 3.4vw, 46px);
      }

      .contact-page-header p {
        max-width: 680px;
        margin-top: 8px;
      }

      .contact-page-chips {
        max-width: 900px;
        margin: 14px auto 0;
        padding: 8px;
        gap: 0;
        list-style: none;
        border: 1px solid rgba(205, 218, 239, 0.92);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 16px 36px rgba(34, 55, 91, 0.07);
      }

      .contact-chip {
        grid-template-columns: 34px minmax(0, 220px);
        align-items: start;
        justify-content: center;
        gap: 9px;
        min-height: 56px;
        padding: 7px 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .contact-chip > div {
        min-width: 0;
        text-align: left;
      }

      .contact-chip + .contact-chip {
        border-left: 1px solid rgba(205, 218, 239, 0.82);
      }

      .contact-chip > .contact-chip-icon {
        width: 34px;
        height: 34px;
        margin-top: 1px;
        border-radius: 11px;
        font-size: 17px;
      }

      .contact-chip > .contact-chip-icon i {
        font-size: 17px;
      }

      .contact-chip strong {
        font-size: 13px;
      }

      .contact-chip > div > span {
        margin-top: 2px;
        font-size: 11.5px;
        line-height: 1.35;
      }

      .contact-page-grid {
        gap: clamp(22px, 2vw, 28px);
        margin-top: 24px;
      }

      .contact-branch-card {
        padding: 14px;
        border-radius: 22px;
        box-shadow: 0 22px 54px rgba(26, 48, 87, 0.1);
      }

      .contact-branch-media {
        height: clamp(250px, 23vw, 320px);
        aspect-ratio: auto;
        max-height: none;
      }

      .contact-branch-body {
        gap: 14px;
        padding: 16px 4px 3px;
      }

      .contact-branch-top {
        align-items: flex-start;
      }

      .contact-branch-badge {
        margin-top: -1px;
      }

      .contact-branch-address {
        margin-top: 4px;
      }

      .contact-branch-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 14px;
      }

      .contact-branch-hours {
        grid-column: 1 / -1;
      }

      .contact-branch-meta-row {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        min-height: 52px;
        padding: 6px 12px;
        border: 1px solid rgba(216, 226, 242, 0.82);
        border-radius: 12px;
        background: #f8faff;
        color: #15305f;
        line-height: 1.3;
        text-decoration: none;
      }

      .contact-branch-meta-row > i {
        width: 20px;
        height: 20px;
        display: grid;
        align-self: start;
        place-items: center;
        margin-top: 0;
        font-size: 17px;
        line-height: 1;
      }

      .contact-branch-meta-copy {
        display: block;
        min-width: 0;
      }

      .contact-branch-meta-copy small,
      .contact-branch-meta-copy strong {
        display: block;
      }

      .contact-branch-meta-copy small {
        margin-bottom: 1px;
        color: rgba(22, 40, 74, 0.58);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
      }

      .contact-branch-meta-copy strong {
        overflow-wrap: break-word;
        color: #102957;
        font-size: 13.5px;
        font-weight: 750;
        line-height: 1.25;
      }

      .contact-branch-hours {
        min-height: 58px;
      }

      .contact-branch-phone .contact-branch-meta-copy strong {
        white-space: nowrap;
      }

      .contact-branch-phone {
        transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
      }

      .contact-branch-phone:hover {
        border-color: rgba(32, 89, 176, 0.35);
        background: #f2f6fd;
        transform: translateY(-1px);
      }

      .contact-branch-btn {
        position: relative;
        justify-content: center;
        min-height: 46px;
        padding-inline: 38px;
      }

      .contact-branch-btn i {
        position: absolute;
        right: 14px;
      }

      .contact-branch-note > i {
        width: 17px;
        height: 17px;
        flex: none;
        display: grid;
        place-items: center;
        margin-top: -1px;
        line-height: 1;
      }

      .contact-branch-btn.primary {
        border: 1px solid rgba(230, 165, 18, 0.3);
      }

      .contact-branch-btn.secondary {
        color: #173e78;
      }

      .contact-branch-btn:focus-visible,
      .contact-branch-phone:focus-visible,
      .contact-page-breadcrumb a:focus-visible,
      .contact-message-consent a:focus-visible,
      .contact-message-submit:focus-visible {
        outline: 3px solid #2059b0;
        outline-offset: 3px;
      }

      .contact-message-section {
        scroll-margin-top: 100px;
        padding: clamp(32px, 3.6vw, 48px) 0 clamp(42px, 4.4vw, 62px);
      }

      .contact-message-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 9px;
      }

      .contact-message-header h2 {
        font-size: clamp(29px, 3vw, 40px);
      }

      .contact-message-header p {
        margin-top: 8px;
      }

      .contact-message-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
        grid-template-areas: "visual form";
        gap: clamp(18px, 2.2vw, 26px);
        margin-top: clamp(20px, 2.6vw, 30px);
      }

      .contact-message-form {
        grid-area: form;
        padding: clamp(18px, 1.9vw, 24px);
      }

      .contact-message-visual {
        grid-area: visual;
        min-height: 410px;
      }

      .contact-form-feedback {
        margin-bottom: 14px;
        border: 1px solid transparent;
      }

      .contact-form-feedback:focus {
        outline: 3px solid #2059b0;
        outline-offset: 3px;
      }

      .contact-form-feedback--success { border-color: #b9e3ca; }
      .contact-form-feedback--error { border-color: #efc1bc; }

      .contact-message-form-grid {
        gap: 11px 12px;
      }

      .contact-field {
        display: grid;
        align-content: start;
        gap: 6px;
        min-width: 0;
      }

      .contact-field--wide,
      .contact-consent-field {
        grid-column: 1 / -1;
      }

      .contact-field-label {
        color: #102957;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.2;
      }

      .contact-field-label b,
      .contact-message-consent b {
        color: #b62f28;
      }

      .contact-field-label em {
        margin-left: 5px;
        color: rgba(22, 40, 74, 0.48);
        font-size: 10.5px;
        font-style: normal;
        font-weight: 600;
      }

      .contact-message-form input,
      .contact-message-form select {
        height: 48px;
      }

      .contact-message-form textarea {
        min-height: 104px;
      }

      .contact-message-form input:focus-visible,
      .contact-message-form select:focus-visible,
      .contact-message-form textarea:focus-visible {
        outline: 2px solid #2059b0;
        outline-offset: 1px;
        border-color: #2059b0;
        box-shadow: 0 0 0 4px rgba(32, 89, 176, 0.1);
      }

      .contact-message-form [aria-invalid="true"] {
        border-color: #b62f28;
        background: #fffafa;
      }

      .contact-field-error {
        color: #a92b24;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
      }

      .contact-field-error:empty {
        display: none;
      }

      .contact-message-select {
        width: 100%;
      }

      .contact-consent-field {
        display: grid;
        gap: 4px;
      }

      .contact-message-consent {
        min-height: 44px;
        align-items: center;
      }

      .contact-message-consent input {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin: 0;
      }

      .contact-message-submit {
        min-height: 48px;
      }

      .contact-message-submit[disabled] {
        cursor: wait;
        filter: saturate(0.65);
        opacity: 0.72;
        transform: none;
      }

      @media (max-width: 1024px) {
        .contact-page-grid {
          gap: 20px;
        }

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

        .contact-branch-hours {
          grid-column: 1 / -1;
        }

        .contact-message-layout {
          grid-template-columns: minmax(0, 0.86fr) minmax(390px, 1.14fr);
        }
      }

      @media (max-width: 820px) {
        .contact-page-hero {
          padding: 14px 0 30px;
        }

        .contact-page-header h1 {
          font-size: clamp(30px, 6.2vw, 38px);
        }

        .contact-page-chips {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 0;
        }

        .contact-page-grid {
          grid-template-columns: 1fr;
          margin-top: 14px;
        }

        .contact-branch-media {
          height: clamp(240px, 44vw, 300px);
          max-height: none;
        }

        .contact-message-layout {
          grid-template-columns: 1fr;
          grid-template-areas: "form" "visual";
        }

        .contact-message-visual {
          min-height: clamp(210px, 42vw, 300px);
          max-height: 300px;
        }
      }

      @media (max-width: 640px) {
        .contact-page-hero {
          padding: 12px 0 26px;
        }

        .contact-page-breadcrumb {
          margin-bottom: 8px;
        }

        .contact-page-kicker {
          min-height: 24px;
          margin-bottom: 6px;
        }

        .contact-page-header h1 {
          font-size: clamp(28px, 7.6vw, 33px);
          line-height: 1.04;
        }

        .contact-page-header p {
          margin-top: 7px;
          line-height: 1.45;
        }

        .contact-page-chips {
          margin-top: 11px;
          padding: 6px 4px;
          border-radius: 15px;
        }

        .contact-chip {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          min-height: 66px;
          padding: 5px 4px;
          text-align: center;
        }

        .contact-chip > div {
          text-align: center;
        }

        .contact-chip > .contact-chip-icon {
          width: 28px;
          height: 28px;
          margin-top: 0;
          border-radius: 9px;
        }

        .contact-chip strong {
          font-size: 10.5px;
          line-height: 1.2;
        }

        .contact-chip > div > span {
          display: none;
        }

        .contact-branch-card {
          padding: 12px;
          border-radius: 18px;
        }

        .contact-branch-media {
          height: 250px;
          aspect-ratio: auto;
          max-height: none;
        }

        .contact-branch-body {
          gap: 12px;
          padding: 14px 2px 2px;
        }

        .contact-branch-name {
          font-size: 19px;
        }

        .contact-branch-address {
          font-size: 12.5px;
          line-height: 1.4;
        }

        .contact-branch-meta {
          grid-template-columns: 1fr;
          gap: 8px;
          padding-top: 12px;
        }

        .contact-branch-hours {
          grid-column: auto;
        }

        .contact-branch-meta-row {
          min-height: 52px;
          padding: 6px 12px;
        }

        .contact-branch-hours {
          min-height: 58px;
        }

        .contact-branch-actions {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 7px;
        }

        .contact-branch-btn {
          min-height: 44px;
          padding-inline: 30px;
          font-size: 12px;
        }

        .contact-branch-btn i {
          right: 10px;
        }

        .contact-message-section {
          padding: 30px 0 42px;
        }

        .contact-message-layout {
          gap: 16px;
          margin-top: 18px;
        }

        .contact-message-form {
          padding: 14px;
        }

        .contact-message-form-grid {
          gap: 11px;
        }

        .contact-message-form textarea {
          min-height: 108px;
        }

        .contact-message-visual {
          display: none;
        }
      }

      @media (max-width: 360px) {
        .contact-branch-actions {
          grid-template-columns: 1fr;
        }
      }

      .callback-shell {
        width: min(calc(100% - 48px), 1240px);
        margin: 0 auto;
      }

      .callback-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 5px 14px;
        border-radius: 999px;
        background: rgba(224, 235, 255, 0.84);
        color: #1e4f99;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .callback-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
        color: rgba(31, 52, 91, 0.46);
        font-size: 12px;
        font-weight: 600;
      }

      .callback-breadcrumb a {
        color: rgba(31, 52, 91, 0.62);
        text-decoration: none;
      }

      .callback-hero {
        padding: 40px 0 46px;
      }

      .callback-hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.7fr);
        gap: clamp(28px, 3.6vw, 48px);
        align-items: start;
      }

      .callback-hero-copy h1,
      .callback-form-head h2,
      .callback-section-head h2,
      .callback-flow-copy h2,
      .callback-cta-card h2 {
        margin: 16px 0 0;
        color: #071a44;
        font-size: clamp(34px, 4vw, 64px);
        line-height: 1.08;
        letter-spacing: -0.03em;
        text-wrap: balance;
      }

      .callback-lede,
      .callback-section-head p,
      .callback-flow-copy > p,
      .callback-cta-card p,
      .callback-proof-grid p,
      .callback-flow-steps p,
      .callback-form-note p,
      .callback-hotline-intro p {
        color: rgba(22, 40, 74, 0.72);
        font-size: 16px;
        line-height: 1.7;
      }

      .callback-lede {
        max-width: 620px;
        margin: 20px 0 0;
      }

      .callback-trust-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 28px;
      }

      .callback-trust-card {
        min-width: 0;
        padding: 18px 16px 16px;
        border: 1px solid rgba(214, 225, 242, 0.9);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 18px 36px rgba(34, 55, 91, 0.06);
      }

      .callback-trust-card span,
      .callback-proof-grid span {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(31, 87, 177, 0.1);
        color: #2059b0;
        font-size: 21px;
      }

      .callback-trust-card strong,
      .callback-proof-grid h3,
      .callback-flow-steps h3 {
        display: block;
        margin-top: 14px;
        color: #0f2552;
        font-size: 18px;
        line-height: 1.2;
      }

      .callback-trust-card p {
        margin: 8px 0 0;
        color: rgba(22, 40, 74, 0.66);
        font-size: 13px;
        line-height: 1.55;
      }

      .callback-flow-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .callback-form-card {
        position: sticky;
        top: 118px;
        padding: 22px;
        border: 1px solid rgba(214, 225, 242, 0.92);
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 24px 60px rgba(34, 55, 91, 0.1);
        backdrop-filter: blur(10px);
      }

      .callback-form-head h2 {
        margin-top: 8px;
        font-size: clamp(28px, 2.8vw, 42px);
        line-height: 1.05;
      }

      .callback-form {
        display: grid;
        gap: 12px;
        margin-top: 20px;
      }

      .callback-form label > span {
        display: block;
        margin-bottom: 7px;
        color: #284067;
        font-size: 12px;
        font-weight: 700;
      }

      .callback-form input,
      .callback-form select,
      .callback-form textarea {
        width: 100%;
        padding: 14px 15px;
        border: 1px solid rgba(211, 223, 241, 0.96);
        border-radius: 14px;
        background: #ffffff;
        color: #10244c;
        font: inherit;
        font-size: 14px;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      .callback-form input:focus,
      .callback-form select:focus,
      .callback-form textarea:focus {
        border-color: rgba(43, 101, 194, 0.56);
        box-shadow: 0 0 0 4px rgba(43, 101, 194, 0.1);
        outline: none;
      }

      .callback-form textarea {
        resize: vertical;
        min-height: 116px;
      }

      .callback-consent {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding-top: 4px;
      }

      .callback-consent input {
        margin: 3px 0 0;
      }

      .callback-consent span {
        margin: 0;
        color: rgba(20, 37, 68, 0.76);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
      }

      .callback-submit,
      .callback-cta-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffc946 0%, #f4af1e 100%);
        color: #071a44;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 18px 34px rgba(228, 161, 34, 0.24);
        cursor: pointer;
      }

      .callback-form-note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(219, 228, 242, 0.84);
      }

      .callback-form-note i {
        margin-top: 2px;
        color: #1f58af;
        font-size: 18px;
      }

      .callback-form-note p {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
      }

      .callback-hotline {
        padding: 6px 0 28px;
      }

      .callback-hotline-strip {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(220px, 0.5fr));
        gap: 16px;
        align-items: center;
        padding: 22px;
        border: 1px solid rgba(216, 226, 240, 0.9);
        border-radius: 28px;
        background: linear-gradient(90deg, rgba(235, 243, 255, 0.92), rgba(255, 255, 255, 0.92));
        box-shadow: 0 20px 44px rgba(35, 55, 92, 0.08);
      }

      .callback-hotline-intro {
        display: flex;
        align-items: center;
        gap: 18px;
      }

      .callback-hotline-intro span {
        display: grid;
        place-items: center;
        width: 78px;
        height: 78px;
        border-radius: 50%;
        background: linear-gradient(180deg, #1a58bf, #0d3b8f);
        color: #ffffff;
        font-size: 30px;
        box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.12);
      }

      .callback-hotline-intro h2 {
        margin: 0;
        color: #10244c;
        font-size: 24px;
        line-height: 1.1;
      }

      .callback-hotline-intro p {
        margin: 6px 0 0;
        font-size: 14px;
      }

      .callback-hotline-branch {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 88px;
        padding: 0 18px;
        border-left: 1px solid rgba(210, 222, 240, 0.86);
        color: #10244c;
        text-decoration: none;
      }

      .callback-hotline-branch i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ffffff;
        color: #1d57af;
        font-size: 20px;
        box-shadow: 0 10px 24px rgba(32, 53, 91, 0.08);
      }

      .callback-hotline-branch strong {
        display: block;
        font-size: 28px;
        line-height: 1;
      }

      .callback-hotline-branch span {
        display: block;
        margin-top: 6px;
        color: rgba(22, 40, 74, 0.74);
        font-size: 14px;
      }

      .callback-proof,
      .callback-flow,
      .callback-cta {
        padding: 34px 0 0;
      }

      .callback-section-head {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
      }

      .callback-section-head h2 {
        margin-top: 14px;
        font-size: clamp(30px, 3.1vw, 50px);
        line-height: 1.04;
      }

      .callback-section-head p {
        margin: 16px auto 0;
        max-width: 680px;
      }

      .callback-proof-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-top: 30px;
      }

      .callback-proof-grid article {
        min-width: 0;
        padding: 22px 20px;
        border: 1px solid rgba(215, 226, 242, 0.9);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 18px 40px rgba(35, 55, 92, 0.06);
      }

      .callback-proof-grid p {
        margin: 10px 0 0;
        font-size: 14px;
      }

      .callback-flow-layout {
        display: grid;
        grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 52px);
        align-items: center;
      }

      .callback-flow-media {
        overflow: hidden;
        border-radius: 28px;
        background: linear-gradient(145deg, rgba(228, 239, 255, 0.88), rgba(255, 255, 255, 0.94));
        box-shadow: 0 24px 56px rgba(32, 53, 91, 0.08);
      }

      .callback-flow-media img {
        aspect-ratio: 1.22 / 1;
      }

      .callback-flow-copy h2 {
        margin-top: 14px;
        font-size: clamp(30px, 3vw, 48px);
        line-height: 1.04;
      }

      .callback-flow-copy > p {
        margin: 16px 0 0;
      }

      .callback-flow-steps {
        display: grid;
        gap: 16px;
        margin-top: 24px;
      }

      .callback-flow-steps article {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 16px;
        padding: 18px 18px 18px 16px;
        border: 1px solid rgba(214, 225, 242, 0.88);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.82);
      }

      .callback-flow-steps b {
        display: grid;
        place-items: center;
        width: 66px;
        height: 66px;
        border-radius: 18px;
        background: linear-gradient(180deg, #f3f8ff 0%, #e3efff 100%);
        color: #235bb2;
        font-size: 24px;
        line-height: 1;
      }

      .callback-flow-steps h3 {
        margin-top: 2px;
      }

      .callback-flow-steps p {
        margin: 8px 0 0;
        font-size: 14px;
      }

      .callback-cta {
        padding-bottom: 64px;
      }

      .callback-cta-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
        padding: 28px 34px;
        border: 1px solid rgba(216, 226, 240, 0.9);
        border-radius: 28px;
        background:
          radial-gradient(circle at 0% 100%, rgba(255, 206, 92, 0.16), transparent 24%),
          linear-gradient(135deg, rgba(238, 245, 255, 0.92), #ffffff 64%);
        box-shadow: 0 20px 48px rgba(35, 55, 92, 0.08);
      }

      .callback-cta-card h2 {
        margin-top: 12px;
        font-size: clamp(28px, 2.8vw, 42px);
        line-height: 1.06;
      }

      .callback-cta-card p {
        margin: 12px 0 0;
        max-width: 640px;
        font-size: 15px;
      }

      .callback-cta-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .callback-cta-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 0 22px;
        border-radius: 16px;
        border: 1px solid rgba(200, 213, 234, 0.96);
        background: rgba(255, 255, 255, 0.86);
        color: #123d82;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
      }

      @media (max-width: 1180px) {
        .callback-hero-layout,
        .callback-flow-layout,
        .callback-cta-card {
          grid-template-columns: 1fr;
        }

        .callback-page .callback-hero-layout {
          grid-template-areas:
            "copy"
            "form";
        }

        .callback-form-card {
          position: static;
        }

        .callback-hotline-strip {
          grid-template-columns: 1fr;
        }

        .callback-hotline-branch {
          min-height: 76px;
          padding: 14px 0 0;
          border-left: 0;
          border-top: 1px solid rgba(210, 222, 240, 0.86);
        }

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

      @media (max-width: 820px) {
        .callback-shell {
          width: min(calc(100% - 36px), 1240px);
        }

        .callback-trust-grid,
        .callback-proof-grid {
          grid-template-columns: 1fr;
        }

        .callback-flow-media {
          order: -1;
        }
      }

      @media (max-width: 640px) {
        .callback-shell {
          width: min(calc(100% - 28px), 1240px);
        }

        .callback-hero {
          padding: 26px 0 34px;
        }

        .callback-breadcrumb {
          overflow-x: auto;
          white-space: nowrap;
        }

        .callback-hero-copy h1,
        .callback-section-head h2,
        .callback-flow-copy h2,
        .callback-cta-card h2 {
          font-size: clamp(28px, 9vw, 42px);
          line-height: 1.1;
        }

        .callback-form-head h2 {
          font-size: clamp(24px, 8vw, 34px);
        }

        .callback-trust-card,
        .callback-proof-grid article,
        .callback-flow-steps article {
          border-radius: 18px;
        }

        .callback-form-card {
          padding: 18px;
          border-radius: 22px;
        }

        .callback-hotline-strip,
        .callback-cta-card {
          padding: 18px;
          border-radius: 22px;
        }

        .callback-hotline-intro {
          align-items: flex-start;
        }

        .callback-hotline-intro span {
          width: 64px;
          height: 64px;
          font-size: 24px;
        }

        .callback-hotline-branch strong {
          font-size: 24px;
        }

        .callback-flow-steps article {
          grid-template-columns: 54px minmax(0, 1fr);
          gap: 14px;
          padding: 16px 14px;
        }

        .callback-flow-steps b {
          width: 54px;
          height: 54px;
          font-size: 20px;
          border-radius: 15px;
        }

        .callback-submit,
        .callback-cta-primary,
        .callback-cta-secondary {
          width: 100%;
        }
      }

      .callback-page {
        overflow-x: hidden;
        background:
          radial-gradient(circle at 50% 9%, rgba(40, 94, 178, 0.08), transparent 22%),
          radial-gradient(circle at 8% 18%, rgba(255, 202, 68, 0.08), transparent 18%),
          linear-gradient(180deg, #ffffff 0%, #fbfdff 42%, #ffffff 100%);
      }

      .callback-page .callback-shell {
        width: min(calc(100% - 64px), 1260px);
      }

      .callback-page .callback-breadcrumb {
        margin-bottom: 54px;
        color: rgba(61, 82, 122, 0.55);
        font-size: 12px;
      }

      .callback-page .callback-hero {
        position: relative;
        isolation: isolate;
        padding: 30px 0 50px;
      }

      .callback-page .callback-hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 108px;
        left: 42%;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background:
          repeating-radial-gradient(circle, rgba(34, 91, 181, 0.1) 0 1px, transparent 1px 48px),
          radial-gradient(circle, rgba(231, 240, 255, 0.72), transparent 68%);
        opacity: 0.72;
        transform: translateX(-50%);
      }

      .callback-page .callback-hero-layout {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
        grid-template-areas: "copy form";
        gap: clamp(22px, 2.4vw, 38px);
        align-items: start;
      }

      .callback-page .callback-hero-copy {
        grid-area: copy;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .callback-page .callback-form-card {
        grid-area: form;
        position: relative;
        z-index: 3;
        width: min(100%, 520px);
        justify-self: end;
      }

      .callback-page .callback-kicker {
        min-height: 28px;
        padding: 5px 15px;
        border-radius: 999px;
        background: #eaf2ff;
        color: #174d9b;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.03em;
      }

      .callback-page .callback-hero-copy h1 {
        max-width: 600px;
        margin: 14px 0 0;
        color: #061943;
        font-size: clamp(42px, 3.9vw, 60px);
        line-height: 1.08;
        letter-spacing: -0.055em;
        text-wrap: balance;
      }

      .callback-page .callback-lede {
        max-width: 590px;
        margin: 20px 0 0;
        color: rgba(13, 31, 64, 0.78);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.75;
      }

      .callback-page .callback-trust-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 2vw, 24px);
        max-width: 640px;
        margin-top: 36px;
      }

      .callback-page .callback-trust-card {
        padding: 0;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .callback-page .callback-trust-card span {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        background: #ffffff;
        color: #1f62c9;
        font-size: 19px;
        box-shadow: 0 10px 24px rgba(25, 60, 112, 0.09);
      }

      .callback-page .callback-trust-card strong {
        grid-column: 2;
        margin-top: 0;
        color: #061943;
        font-size: 14px;
        line-height: 1.2;
      }

      .callback-page .callback-trust-card p {
        grid-column: 2;
        max-width: none;
        margin-top: 0;
        color: rgba(25, 43, 77, 0.67);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
      }

      .callback-page .callback-form-card {
        position: sticky;
        top: 112px;
        width: min(100%, 520px);
        justify-self: end;
        overflow: hidden;
        padding: 28px;
        border: 1px solid rgba(222, 230, 242, 0.9);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 26px 70px rgba(26, 45, 80, 0.12);
        backdrop-filter: blur(14px);
      }

      .callback-page .callback-form-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -40px;
        width: 80px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98));
        pointer-events: none;
      }

      .callback-page .callback-form-card > * {
        position: relative;
        z-index: 1;
      }

      .callback-page .callback-form-head h2 {
        max-width: 100%;
        margin: 0;
        color: #061943;
        font-size: 26px;
        line-height: 1.08;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .callback-page .callback-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 12px;
        margin-top: 16px;
      }

      .callback-page .callback-form.contact-message-form {
        align-self: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .callback-page .callback-form .contact-field--wide,
      .callback-page .callback-form .contact-consent-field,
      .callback-page .callback-form .form-status,
      .callback-page .callback-form .contact-honeypot,
      .callback-page .callback-form .callback-submit {
        grid-column: 1 / -1;
      }

      .callback-page .callback-form .contact-message-consent input {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 0;
        padding: 0;
        margin: 0;
        border-radius: 5px;
      }

      .callback-page .callback-form input,
      .callback-page .callback-form select,
      .callback-page .callback-form textarea {
        width: 100%;
        min-height: 48px;
        padding: 0 15px;
        border: 1px solid #d9e1ed;
        border-radius: 14px;
        background-color: #ffffff;
        color: #14284f;
        font-size: 13px;
        font-weight: 500;
        box-shadow: 0 1px 0 rgba(16, 40, 82, 0.02);
      }

      .callback-page .callback-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 54px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23587096' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 16px 16px;
      }

      .callback-page .callback-form .contact-message-select select {
        padding-right: 44px;
        background-image: none;
      }

      .callback-page .callback-form select::-ms-expand {
        display: none;
      }

      .callback-page .callback-form textarea {
        min-height: 104px;
        padding: 15px;
        line-height: 1.6;
        resize: vertical;
      }

      .callback-page .callback-form .callback-consent {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding-top: 3px;
      }

      .callback-page .callback-form .callback-consent > input {
        width: 14px;
        height: 14px;
        min-height: 0;
        margin: 3px 0 0;
        padding: 0;
        border-radius: 3px;
        accent-color: #1f60c5;
      }

      .callback-page .callback-form .callback-consent > span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        color: rgba(17, 35, 67, 0.75);
        font-size: 13px;
        line-height: 1.55;
      }

      .callback-page .callback-consent a {
        color: #1e5dbc;
        font-weight: 800;
        text-decoration: none;
      }

      .callback-page .callback-submit {
        justify-content: center;
        gap: 12px;
        min-height: 48px;
        margin-top: 0;
        padding: 0 20px;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
        color: #071a44;
        box-shadow: 0 8px 18px rgba(192, 140, 24, 0.12);
      }

      .callback-page .callback-submit i {
        margin-left: 0;
      }

      .callback-page .callback-form-note {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 0;
      }

      .callback-page .callback-form-note i {
        color: #1f60c5;
        font-size: 23px;
      }

      .callback-page .callback-form-note p {
        color: rgba(19, 39, 72, 0.74);
        font-size: 14px;
        line-height: 1.65;
      }

      .callback-page .callback-hotline {
        padding: 26px 0 52px;
      }

      .callback-page .callback-hotline-strip {
        width: min(100%, 1130px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(330px, 1fr) minmax(210px, 0.5fr) minmax(210px, 0.5fr);
        gap: 28px;
        align-items: center;
        padding: 28px 42px;
        border: 1px solid rgba(221, 232, 248, 0.96);
        border-radius: 16px;
        background: linear-gradient(90deg, #eef6ff 0%, #ffffff 68%);
        box-shadow: 0 20px 54px rgba(31, 54, 94, 0.08);
      }

      .callback-page .callback-hotline-intro {
        gap: 22px;
      }

      .callback-page .callback-hotline-intro span {
        position: relative;
        isolation: isolate;
        width: 82px;
        height: 82px;
        background: linear-gradient(180deg, #2c70d7 0%, #174eae 100%);
        box-shadow:
          0 0 0 16px rgba(42, 105, 207, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.2);
      }

      .callback-page .callback-hotline-intro span::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -10px;
        border: 2px solid rgba(42, 105, 207, 0.42);
        border-radius: 50%;
        pointer-events: none;
        animation: callback-hotline-pulse 2.8s ease-out infinite;
      }

      .callback-page .callback-hotline-intro span i {
        transform-origin: 50% 58%;
        animation: callback-phone-ring 3.8s ease-in-out infinite;
      }

      @keyframes callback-hotline-pulse {
        0% {
          opacity: 0;
          transform: scale(0.9);
        }
        18% {
          opacity: 0.58;
        }
        68%,
        100% {
          opacity: 0;
          transform: scale(1.2);
        }
      }

      @keyframes callback-phone-ring {
        0%,
        72%,
        100% {
          transform: rotate(0deg);
        }
        77% {
          transform: rotate(-8deg);
        }
        82% {
          transform: rotate(8deg);
        }
        87% {
          transform: rotate(-5deg);
        }
        92% {
          transform: rotate(5deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .callback-page .callback-hotline-intro span::after,
        .callback-page .callback-hotline-intro span i {
          animation: none;
        }
      }

      .callback-page .callback-hotline-intro h2 {
        color: #061943;
        font-size: 19px;
        letter-spacing: -0.02em;
      }

      .callback-page .callback-hotline-intro p {
        max-width: 330px;
        color: rgba(27, 45, 78, 0.72);
        font-size: 13px;
        line-height: 1.7;
      }

      .callback-page .callback-hotline-branch {
        min-height: 64px;
        padding-left: 32px;
        border-left: 1px solid rgba(203, 216, 235, 0.9);
      }

      .callback-page .callback-hotline-branch i {
        width: 40px;
        height: 40px;
        color: #1f60c5;
        box-shadow: 0 12px 26px rgba(29, 62, 115, 0.08);
      }

      .callback-page .callback-hotline-branch strong {
        color: #071a44;
        font-size: 20px;
        letter-spacing: -0.01em;
      }

      .callback-page .callback-hotline-branch span {
        color: rgba(19, 39, 72, 0.72);
        font-size: 13px;
      }

      .callback-page .callback-proof {
        padding: 0 0 78px;
      }

      .callback-page .callback-section-head {
        max-width: 760px;
      }

      .callback-page .callback-hero-copy .callback-kicker,
      .callback-page .callback-section-head .callback-kicker {
        min-height: 28px;
        margin-top: 0;
        padding: 5px 15px;
        border: 1px solid rgba(40, 95, 196, 0.12);
        border-radius: 999px;
        background: #eaf2ff;
        color: #174d9b;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      .callback-page .callback-hero-copy .callback-kicker {
        margin-bottom: 12px;
      }

      .callback-page .callback-section-head .callback-kicker {
        margin-bottom: 0;
      }

      .callback-page .callback-section-head h2 {
        margin-top: 10px;
        color: #061943;
        font-size: clamp(32px, 3.1vw, 46px);
        line-height: 1.04;
        letter-spacing: -0.04em;
      }

      .callback-page .callback-section-head p {
        margin-top: 12px;
        color: rgba(17, 35, 67, 0.72);
        font-size: 15px;
        font-weight: 500;
      }

      .callback-page .callback-proof-grid {
        width: min(100%, 1130px);
        margin: 36px auto 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
      }

      .callback-page .callback-proof-grid article {
        min-height: 208px;
        padding: 34px 26px 28px;
        border: 1px solid rgba(226, 232, 242, 0.94);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        text-align: center;
        box-shadow: 0 20px 46px rgba(26, 45, 80, 0.07);
      }

      .callback-page .callback-proof-grid span {
        width: 48px;
        height: 48px;
        margin: 0 auto;
        background: transparent;
        color: #1f60c5;
        font-size: 38px;
      }

      .callback-page .callback-proof-grid h3 {
        margin-top: 22px;
        color: #071a44;
        font-size: 17px;
      }

      .callback-page .callback-proof-grid p {
        margin-top: 14px;
        color: rgba(19, 39, 72, 0.7);
        font-size: 13px;
        line-height: 1.75;
      }

      .callback-page .callback-flow,
      .callback-page .callback-cta {
        padding-top: 28px;
      }

      .callback-page .callback-flow-layout {
        width: min(100%, 1130px);
        margin: 0 auto;
        grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1fr);
      }

      .callback-page .callback-flow-media {
        border-radius: 24px;
      }

      .callback-page .callback-cta {
        padding-bottom: 72px;
      }

      .callback-page .callback-cta-card {
        width: min(100%, 1130px);
        margin: 0 auto;
        border-radius: 22px;
      }

      @media (max-width: 1180px) {
        .callback-page .callback-shell {
          width: min(calc(100% - 52px), 980px);
        }

        .callback-page .callback-hero-layout {
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas:
            "copy"
            "form";
          align-items: start;
        }

        .callback-page .callback-form-card {
          position: static;
          width: 100%;
          justify-self: stretch;
        }

        .callback-page .callback-trust-grid {
          margin-top: 36px;
        }

        .callback-page .callback-hotline-strip {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .callback-page .callback-hotline-branch {
          padding: 18px 0 0;
          border-left: 0;
          border-top: 1px solid rgba(203, 216, 235, 0.9);
        }

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

      @media (max-width: 820px) {
        .callback-page .callback-shell {
          width: min(calc(100% - 34px), 680px);
        }

        .callback-page .callback-hero {
          padding-top: 22px;
        }

        .callback-page .callback-breadcrumb {
          margin-bottom: 26px;
          overflow-x: auto;
          white-space: nowrap;
        }

        .callback-page .callback-hero::before {
          top: 70px;
          left: 50%;
          width: 420px;
          height: 420px;
        }

        .callback-page .callback-hero-layout {
          position: static;
          grid-template-columns: 1fr;
          grid-template-areas:
            "copy"
            "form";
          gap: 26px;
        }

        .callback-page .callback-hero-copy h1 {
          max-width: 620px;
          margin-top: 4px;
          font-size: clamp(34px, 5vw, 42px);
          line-height: 1.1;
        }

        .callback-page .callback-lede {
          margin-top: 18px;
          font-size: 14px;
          line-height: 1.75;
        }

  .callback-page .callback-trust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .callback-page .callback-trust-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
  }

  .callback-page .callback-trust-card span {
    width: 44px;
    height: 44px;
    font-size: 19px;
    box-shadow: 0 10px 24px rgba(25, 60, 112, 0.08);
  }

        .callback-page .callback-trust-card strong,
        .callback-page .callback-trust-card p {
          grid-column: 2;
          margin-top: 0;
        }

        .callback-page .callback-trust-card span {
          grid-row: 1 / span 2;
        }

  .callback-page .callback-trust-card p {
    max-width: none;
    margin-top: 3px;
    line-height: 1.5;
  }

        .callback-page .callback-form-card {
          width: 100%;
          justify-self: stretch;
          padding: 28px 24px 26px;
        }

        .callback-page .callback-hotline {
          padding-top: 14px;
        }

        .callback-page .callback-hotline-strip {
          padding: 24px;
          border-radius: 20px;
        }

        .callback-page .callback-hotline-intro {
          align-items: flex-start;
        }

  .callback-page .callback-proof-grid,
  .callback-page .callback-flow-layout,
  .callback-page .callback-cta-card {
    grid-template-columns: 1fr;
  }

  .callback-page .callback-proof-grid {
    gap: 12px;
    margin-top: 24px;
  }

  .callback-page .callback-proof-grid article {
    min-height: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    text-align: left;
  }

  .callback-page .callback-proof-grid span {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 28px;
  }

  .callback-page .callback-proof-grid h3,
  .callback-page .callback-proof-grid p {
    grid-column: 2;
    margin-top: 0;
  }

  .callback-page .callback-proof-grid h3 {
    font-size: 15px;
  }

  .callback-page .callback-proof-grid p {
    font-size: 12px;
    line-height: 1.5;
  }

        .callback-page .callback-flow-media {
          order: -1;
        }
      }

      @media (max-width: 560px) {
        .callback-page .callback-shell {
          width: min(calc(100% - 28px), 480px);
        }

        .callback-page .callback-hero {
          padding-bottom: 38px;
        }

        .callback-page .callback-form-head h2 {
          font-size: 26px;
        }

        .callback-page .callback-hero-copy h1 {
          font-size: clamp(32px, 9vw, 36px);
        }

        .callback-page .callback-form {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .callback-page .callback-form input,
        .callback-page .callback-form select,
        .callback-page .callback-form textarea {
          min-height: 48px;
        }

        .callback-page .callback-form input,
        .callback-page .callback-form select {
          padding-left: 15px;
        }

        .callback-page .callback-form select {
          padding-right: 44px;
          background-position: right 16px center;
        }

        .callback-page .callback-form textarea {
          min-height: 104px;
          padding: 15px;
        }

        .callback-page .callback-hotline-strip {
          padding: 20px;
        }

        .callback-page .callback-hotline-intro span {
          width: 66px;
          height: 66px;
          font-size: 25px;
        }

        .callback-page .callback-hotline-branch strong {
          font-size: 19px;
        }

        .callback-page .callback-proof-grid {
          grid-template-columns: 1fr;
        }
      }

      .cochlear-page {
        background: #f7faff;
      }

      .cochlear-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        margin: 0 auto;
      }

      .cochlear-hero {
        position: relative;
        overflow: hidden;
        min-height: clamp(620px, calc(100vh - 136px), 760px);
        padding: clamp(28px, 3.4vw, 48px) 0 clamp(34px, 4vw, 56px);
        background:
          radial-gradient(circle at 72% 16%, rgba(74, 142, 232, 0.14), transparent 25%),
          radial-gradient(circle at 16% 82%, rgba(245, 201, 79, 0.12), transparent 24%),
          linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      }

      .cochlear-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(111, 147, 195, 0.07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(111, 147, 195, 0.07) 1px, transparent 1px);
        background-size: 58px 58px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 76%);
        pointer-events: none;
      }

      .cochlear-breadcrumb {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: clamp(24px, 3vw, 36px);
        color: rgba(38, 56, 88, 0.58);
        font-size: 12px;
        font-weight: 600;
      }

      .cochlear-breadcrumb a {
        color: rgba(38, 56, 88, 0.68);
        text-decoration: none;
      }

      .cochlear-layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr) 300px;
        gap: clamp(22px, 3vw, 42px);
        align-items: center;
      }

      .cochlear-hero-card {
        padding-top: clamp(10px, 2vw, 28px);
      }

      .cochlear-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin: 0 0 12px;
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(222, 235, 255, 0.82);
        color: #174c93;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
      }

      .cochlear-hero h1 {
        max-width: 620px;
        margin: 0;
        color: #071a44;
        font-size: clamp(30px, 3.4vw, 48px);
        line-height: 1.06;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .cochlear-lede,
      .cochlear-copy p,
      .cochlear-section-head p,
      .cochlear-consult-copy p {
        color: rgba(20, 37, 68, 0.72);
        font-size: 14px;
        line-height: 1.64;
      }

      .cochlear-lede {
        max-width: 640px;
        margin: 14px 0 0;
      }

      .cochlear-quick-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 28px;
      }

      .cochlear-quick-item {
        min-width: 0;
        padding: 16px 14px;
        border: 1px solid rgba(213, 224, 239, 0.9);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 16px 34px rgba(35, 55, 92, 0.07);
      }

      .cochlear-quick-item span,
      .cochlear-benefit-grid span,
      .cochlear-candidate-grid article > span,
      .cochlear-consult-copy > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(245, 201, 79, 0.24);
        color: #0d4ea6;
      }

      .cochlear-quick-item strong {
        display: block;
        margin-top: 12px;
        color: #10244c;
        font-size: 14px;
        line-height: 1.2;
      }

      .cochlear-quick-item p {
        margin: 6px 0 0;
        color: rgba(32, 49, 79, 0.64);
        font-size: 12px;
        line-height: 1.45;
      }

      .cochlear-hero-visual {
        position: relative;
        display: grid;
        place-items: center;
        overflow: visible;
        min-height: clamp(420px, 44vw, 610px);
        aspect-ratio: 1.16 / 1;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .cochlear-hero-visual::before {
        content: "";
        position: absolute;
        inset: 4% -2% 2% 2%;
        z-index: -1;
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 38%, transparent 39%),
          repeating-radial-gradient(circle, rgba(126, 159, 207, 0.16) 0 1px, transparent 2px 42px);
        filter: blur(0.2px);
        opacity: 0.72;
      }

      .cochlear-hero-visual img,
      .cochlear-image-card img,
      .cochlear-consult-card > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .cochlear-hero-visual img {
        width: min(112%, 760px);
        height: auto;
        max-height: clamp(430px, 49vw, 660px);
        object-fit: contain;
        object-position: center center;
        filter: drop-shadow(0 30px 42px rgba(24, 45, 82, 0.16));
      }

      .cochlear-side {
        position: sticky;
        top: 112px;
        display: grid;
        gap: 16px;
      }

      .cochlear-toc,
      .cochlear-side-cta {
        border: 1px solid rgba(216, 226, 240, 0.92);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 18px 42px rgba(35, 55, 92, 0.08);
      }

      .cochlear-toc {
        padding: 18px;
      }

      .cochlear-toc h2,
      .cochlear-side-cta h2 {
        margin: 0 0 12px;
        color: #10244c;
        font-size: 15px;
        line-height: 1.2;
      }

      .cochlear-toc a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 12px;
        color: rgba(22, 41, 76, 0.72);
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
      }

      .cochlear-toc a.is-active,
      .cochlear-toc a:hover,
      .cochlear-toc a:focus-visible {
        background: rgba(222, 235, 255, 0.9);
        color: #0d4ea6;
      }

      .cochlear-side-cta {
        padding: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
      }

      .cochlear-side-cta p {
        margin: 0;
        color: rgba(32, 49, 79, 0.66);
        font-size: 12px;
        line-height: 1.5;
      }

      .cochlear-side-cta a,
      .cochlear-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin-top: 14px;
        padding: 0 18px;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffc947 0%, #f5aa1c 100%);
        color: #071a44;
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 14px 26px rgba(219, 153, 20, 0.22);
      }

      .cochlear-section {
        padding: clamp(54px, 6vw, 84px) 0;
        background: #ffffff;
      }

      .cochlear-two-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
        gap: clamp(28px, 5vw, 68px);
        align-items: center;
      }

      .cochlear-copy h2,
      .cochlear-section-head h2,
      .cochlear-consult-copy h2,
      .cochlear-benefits h2 {
        margin: 0;
        color: #071a44;
        font-size: clamp(24px, 2.2vw, 34px);
        line-height: 1.12;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .cochlear-copy p {
        max-width: 720px;
        margin: 14px 0 0;
      }

      .cochlear-image-card {
        position: relative;
        display: block;
        overflow: visible;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .cochlear-image-card img {
        height: auto;
        object-fit: contain;
        border-radius: 24px;
      }

      .cochlear-benefits {
        padding: clamp(34px, 4vw, 56px) 0;
        background: #ffffff;
      }

      .cochlear-benefits .cochlear-shell {
        position: relative;
        overflow: hidden;
        padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px) clamp(22px, 3vw, 34px);
        border-radius: 20px;
        background:
          radial-gradient(circle at 86% 0%, rgba(79, 144, 232, 0.22), transparent 30%),
          radial-gradient(circle at 8% 88%, rgba(245, 201, 79, 0.1), transparent 28%),
          linear-gradient(135deg, #06215a 0%, #002f83 100%);
        color: #ffffff;
        box-shadow: 0 22px 48px rgba(3, 24, 71, 0.18);
      }

      .cochlear-benefits .cochlear-shell::before {
        content: "";
        position: absolute;
        top: 12px;
        right: -20px;
        width: 34%;
        height: 88px;
        border-radius: 50%;
        background:
          repeating-radial-gradient(ellipse at center, rgba(255, 255, 255, 0.13) 0 1px, transparent 2px 12px);
        opacity: 0.35;
        pointer-events: none;
      }

      .cochlear-benefits h2 {
        position: relative;
        color: #ffffff;
        font-size: clamp(18px, 1.6vw, 24px);
        line-height: 1.16;
        scroll-margin-top: 124px;
      }

      .cochlear-benefit-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-top: 22px;
      }

      .cochlear-benefit-grid article {
        min-width: 0;
        padding: 0 clamp(14px, 1.8vw, 24px);
        border-left: 1px solid rgba(255, 255, 255, 0.16);
      }

      .cochlear-benefit-grid article:first-child {
        border-left: 0;
        padding-left: 0;
      }

      .cochlear-benefit-grid span {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.11);
        color: #f5c94f;
        font-size: 20px;
      }

      .cochlear-benefit-grid h3 {
        margin: 12px 0 0;
        color: #ffffff;
        font-size: clamp(12px, 1vw, 15px);
        line-height: 1.22;
      }

      .cochlear-benefit-grid p {
        margin: 8px 0 0;
        color: rgba(255, 255, 255, 0.74);
        font-size: clamp(10px, 0.92vw, 12px);
        line-height: 1.55;
      }

      .cochlear-section-head {
        max-width: 840px;
        margin-bottom: 24px;
      }

      .cochlear-candidate-grid,
      .cochlear-process-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .cochlear-candidate-grid article,
      .cochlear-process-grid article {
        position: relative;
        overflow: hidden;
        min-height: 190px;
        padding: 24px;
        border: 1px solid rgba(216, 226, 240, 0.9);
        border-radius: 22px;
        background:
          radial-gradient(circle at 92% 18%, rgba(80, 145, 232, 0.12), transparent 24%),
          #f8fbff;
        box-shadow: 0 18px 42px rgba(35, 55, 92, 0.07);
      }

      .cochlear-candidate-grid h3,
      .cochlear-process-grid h3 {
        margin: 14px 0 0;
        color: #10244c;
        font-size: 16px;
        line-height: 1.2;
      }

      .cochlear-candidate-grid ul {
        display: grid;
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
      }

      .cochlear-candidate-grid li {
        color: rgba(32, 49, 79, 0.68);
        font-size: 13px;
        line-height: 1.45;
      }

      .cochlear-candidate-grid li::before {
        content: "✓";
        margin-right: 8px;
        color: #0d7c56;
        font-weight: 800;
      }

      .cochlear-process {
        padding: clamp(54px, 6vw, 84px) 0;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
      }

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

      .cochlear-process-grid b {
        color: rgba(13, 78, 166, 0.2);
        font-size: 34px;
        line-height: 1;
      }

      .cochlear-process-grid p {
        margin: 9px 0 0;
        color: rgba(32, 49, 79, 0.66);
        font-size: 13px;
        line-height: 1.5;
      }

      .cochlear-consult {
        padding: clamp(34px, 5vw, 64px) 0 clamp(54px, 7vw, 86px);
        background: #ffffff;
      }

      .cochlear-consult-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr) clamp(360px, 32%, 430px);
        grid-template-areas: "icon copy media";
        gap: clamp(20px, 2.4vw, 34px);
        align-items: center;
        overflow: hidden;
        min-height: 188px;
        padding: 22px 0 22px clamp(22px, 2.8vw, 34px);
        border: 1px solid rgba(216, 226, 240, 0.9);
        border-radius: 24px;
        background:
          radial-gradient(circle at 8% 48%, rgba(38, 104, 210, 0.08), transparent 18%),
          linear-gradient(90deg, #eef6ff 0%, #f8fbff 54%, #ffffff 100%);
        box-shadow: 0 20px 48px rgba(35, 55, 92, 0.08);
      }

      .cochlear-consult-icon {
        grid-area: icon;
        position: relative;
        display: grid;
        place-items: center;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.76);
        color: #2d70d6;
        font-size: 38px;
        box-shadow: inset 0 0 0 2px rgba(45, 112, 214, 0.08);
      }

      .cochlear-consult-icon::after {
        content: "";
        position: absolute;
        inset: -12px;
        border: 2px solid rgba(45, 112, 214, 0.08);
        border-radius: inherit;
      }

      .cochlear-consult-copy {
        grid-area: copy;
        min-width: 0;
      }

      .cochlear-consult-copy h2 {
        max-width: 680px;
        font-size: clamp(24px, 2.3vw, 34px);
        line-height: 1.08;
      }

      .cochlear-consult-copy p {
        max-width: 660px;
        margin: 12px 0 0;
        color: rgba(20, 37, 68, 0.7);
        font-size: clamp(15px, 1.2vw, 16px);
        line-height: 1.6;
      }

      .cochlear-consult-actions {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2.4vw, 34px);
        flex-wrap: wrap;
        margin-top: 18px;
      }

      .cochlear-consult-actions .cochlear-primary {
        margin-top: 0;
        min-width: 210px;
        min-height: 48px;
        border-radius: 12px;
        background: #07152e;
        color: #ffffff;
        box-shadow: 0 18px 34px rgba(7, 21, 46, 0.24);
        font-size: 13px;
      }

      .cochlear-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #123d82;
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
      }

      .cochlear-consult-card > img {
        grid-area: media;
        align-self: stretch;
        width: 100%;
        min-height: 188px;
        height: calc(100% + 44px);
        margin: -22px 0 -22px 0;
        border-radius: 0 24px 24px 0;
        object-fit: cover;
        object-position: center center;
      }

      @media (max-width: 1180px) {
        .cochlear-layout {
          grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
        }

        .cochlear-side {
          position: static;
          grid-column: 1 / -1;
          grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
        }

        .cochlear-process-grid,
        .cochlear-benefit-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 18px;
        }

        .cochlear-benefit-grid article,
        .cochlear-benefit-grid article:first-child {
          padding: 0;
          border-left: 0;
        }
      }

      @media (max-width: 1024px) {
        .cochlear-layout,
        .cochlear-two-col {
          grid-template-columns: 1fr;
        }

        .cochlear-consult-card {
          grid-template-columns: 1fr;
          grid-template-areas:
            "media"
            "icon"
            "copy";
          gap: 18px;
          padding: 0 0 26px;
        }

        .cochlear-two-col {
          grid-template-areas:
            "visual"
            "copy";
        }

        .cochlear-two-col > .cochlear-image-card {
          grid-area: visual;
        }

        .cochlear-two-col > .cochlear-copy {
          grid-area: copy;
        }

        .cochlear-two-col > .cochlear-image-card {
          min-height: 0;
          aspect-ratio: auto;
        }

        .cochlear-two-col > .cochlear-image-card img {
          position: static;
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: center center;
        }

        .cochlear-quick-grid,
        .cochlear-side {
          grid-template-columns: 1fr;
        }

        .cochlear-hero-visual {
          aspect-ratio: 4 / 3;
        }

        .cochlear-candidate-grid,
        .cochlear-process-grid,
        .cochlear-benefit-grid {
          grid-template-columns: 1fr;
        }

        .cochlear-consult-card > img {
          order: 0;
          align-self: auto;
          min-height: 0;
          height: auto;
          margin: 0;
          border-radius: 24px 24px 0 0;
        }

        .cochlear-consult-icon {
          margin-left: 28px;
        }

        .cochlear-consult-copy {
          padding: 0 28px;
        }

        .cochlear-consult-actions {
          gap: 14px;
        }
      }

      @media (max-width: 720px) {
        .cochlear-shell {
          width: min(calc(100% - 32px), var(--ui-container));
        }

        .cochlear-hero {
          padding-top: 24px;
        }

        .cochlear-breadcrumb {
          overflow-x: auto;
          white-space: nowrap;
        }

        .cochlear-hero h1 {
          font-size: clamp(28px, 8.6vw, 38px);
        }

        .cochlear-quick-item,
        .cochlear-candidate-grid article,
        .cochlear-process-grid article {
          border-radius: 18px;
        }

        .cochlear-toc {
          padding: 14px;
        }

        .cochlear-consult-card {
          gap: 16px;
          padding-bottom: 22px;
          border-radius: 22px;
        }

        .cochlear-consult-copy {
          padding: 0 24px;
        }

        .cochlear-consult-actions,
        .cochlear-primary,
        .cochlear-side-cta a {
          width: 100%;
        }

        .cochlear-consult-icon {
          width: 78px;
          height: 78px;
          margin-left: 24px;
          font-size: 32px;
        }

        .cochlear-consult-icon::after {
          inset: -9px;
        }

        .cochlear-consult-copy h2 {
          font-size: clamp(20px, 7vw, 30px);
          line-height: 1.1;
        }

        .cochlear-consult-copy p {
          font-size: 15px;
          line-height: 1.6;
        }

        .cochlear-consult-actions .cochlear-primary {
          min-width: 0;
        }

        .cochlear-link {
          justify-content: center;
          width: 100%;
        }
      }

      .cochlear-page .cochlear-hero {
        padding-bottom: clamp(52px, 6vw, 88px);
      }

      .cochlear-page .cochlear-layout {
        grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.82fr);
        align-items: center;
      }

      .cochlear-body {
        padding: clamp(54px, 6vw, 86px) 0 clamp(58px, 7vw, 96px);
        background: #ffffff;
      }

      .cochlear-body-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: clamp(28px, 4vw, 56px);
        align-items: start;
      }

      .cochlear-body-main {
        min-width: 0;
      }

      .cochlear-body-main > section {
        padding-left: 0;
        padding-right: 0;
        scroll-margin-top: 124px;
      }

      .cochlear-body-main > section:first-child {
        padding-top: 0;
      }

      .cochlear-body-main > section:last-child {
        padding-bottom: 0;
      }

      .cochlear-body-main .cochlear-shell {
        width: 100%;
        max-width: none;
      }

      .cochlear-body .cochlear-side {
        position: sticky;
        top: 118px;
        align-self: start;
      }

      .cochlear-body .cochlear-benefit-grid,
      .cochlear-body .cochlear-process-grid {
        gap: 18px;
      }

      .cochlear-body .cochlear-benefit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
      }

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

      .cochlear-body .cochlear-benefit-grid article,
      .cochlear-body .cochlear-benefit-grid article:first-child {
        padding: 0;
        border-left: 0;
      }

      @media (max-width: 1180px) {
        .cochlear-page .cochlear-layout,
        .cochlear-body-grid {
          grid-template-columns: 1fr;
        }

        .cochlear-body .cochlear-side {
          position: static;
          grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
        }
      }

      @media (max-width: 1024px) {
        .cochlear-page .cochlear-layout {
          grid-template-areas:
            "visual"
            "card";
        }

        .cochlear-page .cochlear-hero-card {
          grid-area: card;
        }

        .cochlear-page .cochlear-hero-visual {
          grid-area: visual;
        }

        .cochlear-body .cochlear-side {
          grid-template-columns: 1fr;
        }

        .cochlear-two-col .cochlear-image-card {
          order: -1;
        }

        .cochlear-body .cochlear-benefit-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 20px 0;
        }

        .cochlear-benefit-grid article:nth-child(odd) {
          border-left: 0;
          padding-left: 0;
        }
      }

      @media (max-width: 720px) {
        .cochlear-page {
          overflow-x: hidden;
        }

        .cochlear-page .cochlear-hero {
          min-height: auto;
          padding-bottom: 38px;
        }

        .cochlear-page .cochlear-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: 28px;
          grid-template-areas:
            "visual"
            "card";
        }

        .cochlear-page .cochlear-hero-card {
          grid-area: card;
        }

        .cochlear-page .cochlear-hero-visual {
          grid-area: visual;
        }

        .cochlear-two-col {
          gap: 20px;
          grid-template-areas:
            "visual"
            "copy";
        }

        .cochlear-page .cochlear-hero-card,
        .cochlear-page .cochlear-hero h1,
        .cochlear-page .cochlear-lede {
          max-width: 100%;
          min-width: 0;
        }

        .cochlear-page .cochlear-hero h1 {
          overflow-wrap: normal;
          text-wrap: balance;
        }

        .cochlear-page .cochlear-quick-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .cochlear-page .cochlear-hero-visual {
          min-height: 330px;
          aspect-ratio: 1 / 0.88;
        }

        .cochlear-page .cochlear-hero-visual img {
          width: min(118%, 460px);
          max-height: 410px;
        }

        .cochlear-page .cochlear-hero-visual::before {
          inset: 2% -24% -8%;
        }

        .cochlear-two-col .cochlear-image-card {
          order: 0;
          position: relative;
          display: block;
          overflow: visible;
          min-height: 0;
          aspect-ratio: auto;
        }

        .cochlear-two-col > .cochlear-copy {
          order: 1;
        }

        .cochlear-two-col > .cochlear-image-card img {
          position: static;
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: center center;
        }
      }

      @media (max-width: 480px) {
        .cochlear-body .cochlear-benefit-grid {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .cochlear-benefit-grid article,
        .cochlear-benefit-grid article:first-child,
        .cochlear-benefit-grid article:nth-child(odd) {
          padding: 0;
          border-left: 0;
        }
      }

      /* Pil satışı: numara ve uluslararası renk kodlarını tek seçim şeridinde eşleştirir. */
      .service-gutenberg-content--pil-satisi .icel-battery-spectrum {
        --battery-blue: #246ed0;
        margin: 0;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum :where(h2, h3, p) {
        margin-top: 0;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro {
        position: relative;
        max-width: 74ch;
        padding: 19px 0 20px 50px;
        border-top: 1px solid rgba(36, 110, 208, 0.18);
        border-bottom: 1px solid rgba(36, 110, 208, 0.18);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro::before {
        content: "";
        position: absolute;
        top: 25px;
        left: 2px;
        width: 29px;
        height: 15px;
        border: 2px solid var(--battery-blue);
        border-radius: 5px;
        box-shadow: inset -6px 0 0 rgba(36, 110, 208, 0.14);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro::after {
        content: "";
        position: absolute;
        top: 30px;
        left: 33px;
        width: 4px;
        height: 7px;
        border-radius: 0 2px 2px 0;
        background: var(--battery-blue);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro p {
        margin-bottom: 0;
        color: #263a5a;
        font-size: 15.5px;
        line-height: 1.65;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__guide {
        margin-top: 34px;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading {
        display: block;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.7fr);
        gap: 28px;
        align-items: start;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading h2 {
        margin-bottom: 0;
        color: #0d2551;
        font-size: clamp(21px, 2vw, 25px);
        line-height: 1.18;
        letter-spacing: -0.025em;
        text-wrap: balance;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading p {
        max-width: 59ch;
        margin-bottom: 0;
        color: #53627b;
        font-size: 15px;
        line-height: 1.65;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__rail {
        margin-top: 25px;
        border-top: 1px solid rgba(13, 37, 81, 0.18);
        border-bottom: 1px solid rgba(13, 37, 81, 0.18);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__rail > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item {
        --battery-code: #246ed0;
        position: relative;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2px 11px;
        align-content: center;
        min-width: 0;
        min-height: 92px;
        padding: 18px 14px;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item + .icel-battery-spectrum__item {
        border-left: 1px solid rgba(13, 37, 81, 0.13);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item::before {
        content: "";
        grid-row: 1 / 3;
        align-self: center;
        box-sizing: border-box;
        width: 31px;
        height: 31px;
        border: 5px solid #fff;
        border-radius: 50%;
        background: var(--battery-code);
        box-shadow: 0 0 0 1px rgba(13, 37, 81, 0.18), 0 4px 10px rgba(13, 37, 81, 0.08);
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item h3 {
        align-self: end;
        margin-bottom: 0;
        color: #0d2551;
        font-size: 17px;
        line-height: 1.25;
        letter-spacing: -0.015em;
        white-space: nowrap;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item p {
        margin-bottom: 0;
        color: #647189;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.35;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item .icel-battery-spectrum__description {
        grid-column: 2;
        margin-top: 5px;
        font-size: 12px;
        font-weight: 500;
      }

      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item--yellow { --battery-code: #f0c928; }
      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item--brown { --battery-code: #8b6045; }
      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item--orange { --battery-code: #ed8730; }
      .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item--blue { --battery-code: #347fd1; }

      @media (max-width: 760px) {
        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro {
          max-width: none;
          padding: 16px 0 17px 43px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro::before {
          top: 21px;
          width: 27px;
          height: 14px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro::after {
          top: 25px;
          left: 31px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__intro p,
        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading p {
          font-size: 14px;
          line-height: 1.58;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__guide {
          margin-top: 27px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading {
          display: block;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 9px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__heading h2 {
          font-size: 21px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__rail {
          margin-top: 20px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__rail > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item {
          min-height: 69px;
          padding: 12px 4px;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item + .icel-battery-spectrum__item {
          border-top: 1px solid rgba(13, 37, 81, 0.13);
          border-left: 0;
        }

        .service-gutenberg-content--pil-satisi .icel-battery-spectrum__item h3 {
          font-size: 16px;
        }
      }

      /* Filter sales: an open technical narrative divided by an editable membrane block. */
      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0 0 clamp(28px, 3vw, 38px);
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story :where(h2, p) {
        max-width: none;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__lead {
        position: relative;
        margin: 0;
        padding: clamp(14px, 1.5vw, 17px) clamp(17px, 2vw, 22px);
        border-left: 4px solid #246ed0;
        background: linear-gradient(90deg, #f2f7fe 0%, rgba(242, 247, 254, 0.16) 88%);
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__lead p,
      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point p {
        margin: 0;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__lead p {
        max-width: 76ch;
        color: #18355e;
        font-size: clamp(15px, 1vw, 16px);
        font-weight: 500;
        line-height: 1.58;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body {
        margin: clamp(24px, 2.7vw, 32px) 0 0;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body > h2,
      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body > .wp-block-group__inner-container > h2 {
        margin: 0 0 clamp(16px, 1.8vw, 20px);
        color: #0a204d;
        font-size: clamp(21px, 1.45vw, 23px);
        line-height: 1.24;
        text-wrap: balance;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__route {
        display: grid;
        grid-template-columns: minmax(200px, 0.82fr) 2px minmax(0, 1.28fr);
        gap: clamp(18px, 2vw, 26px);
        align-items: stretch;
        min-width: 0;
        margin: 0;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__route > .wp-block-group__inner-container {
        display: contents;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point {
        display: grid;
        align-content: center;
        min-width: 0;
        margin: 0;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point--placement {
        padding: clamp(14px, 1.7vw, 20px) 0;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point--effect {
        padding: clamp(16px, 1.8vw, 21px) clamp(18px, 2.1vw, 24px);
        border-radius: 0 16px 16px 0;
        background: #f7f9fc;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point p {
        color: #4b5c77;
        font-size: clamp(14.5px, 0.98vw, 15.5px);
        line-height: 1.64;
      }

      .service-gutenberg-content--filtre-satisi-ve-degisimi hr.icel-filter-story__membrane {
        align-self: stretch;
        width: 2px;
        height: auto;
        min-height: 100%;
        margin: 0;
        border: 0;
        background: linear-gradient(180deg, #246ed0 0 30%, #d4e1f3 30% 70%, #e0ad22 70% 100%);
      }

      @media (max-width: 760px) {
        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story {
          margin-bottom: 30px;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__lead {
          padding: 13px 15px;
          border-left-width: 3px;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__lead p {
          font-size: 14.5px;
          line-height: 1.56;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body {
          margin-top: 22px;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body > h2,
        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__body > .wp-block-group__inner-container > h2 {
          margin-bottom: 15px;
          font-size: clamp(19px, 5.1vw, 21px);
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__route {
          grid-template-columns: minmax(0, 1fr);
          gap: 13px;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point--placement {
          padding: 0;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi hr.icel-filter-story__membrane {
          width: 100%;
          height: 2px;
          min-height: 2px;
          background: linear-gradient(90deg, #246ed0 0 30%, #d4e1f3 30% 70%, #e0ad22 70% 100%);
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point--effect {
          padding: 15px 17px;
          border-radius: 0 0 14px 14px;
        }

        .service-gutenberg-content--filtre-satisi-ve-degisimi .icel-filter-story__point p {
          font-size: 14.5px;
          line-height: 1.6;
        }
      }

      /* Keep the off-canvas related-services rail from creating page-level horizontal scroll. */
      html:has(body.postid-3618),
      body.postid-3618 {
        overflow-x: clip;
      }

      /* Hortum değişimi: kısa içeriği zorlamayan, açık editoryal okuma akışı. */
      .service-gutenberg-content .icel-hose-path {
        --hose-blue: #246ed0;
        --hose-pale: rgba(36, 110, 208, 0.16);
        width: min(100%, 820px);
        margin: 0;
      }

      .service-gutenberg-content .icel-hose-path :where(h2, p) {
        margin-top: 0;
      }

      .service-gutenberg-content .icel-hose-path__intro {
        margin: 0 0 clamp(24px, 3vw, 32px);
        padding: 1px 0 1px clamp(16px, 2vw, 22px);
        border-left: 3px solid var(--hose-blue);
      }

      .service-gutenberg-content .icel-hose-path__intro p {
        max-width: 66ch;
        margin-bottom: 0;
        color: #19345f;
        font-size: clamp(16px, 1.08vw, 17px);
        font-weight: 500;
        line-height: 1.62;
      }

      .service-gutenberg-content .icel-hose-path__function {
        position: relative;
        margin: 0;
        padding: clamp(22px, 2.7vw, 30px) 0 0;
        border-top: 1px solid var(--hose-pale);
      }

      .service-gutenberg-content .icel-hose-path__function::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 56px;
        height: 2px;
        background: var(--hose-blue);
      }

      .service-gutenberg-content h2.icel-hose-path__title {
        max-width: none;
        margin: 0 0 12px;
        font-size: clamp(24px, 1.8vw, 28px);
        line-height: 1.2;
        letter-spacing: -0.025em;
        text-wrap: pretty;
      }

      .service-gutenberg-content p.icel-hose-path__copy {
        max-width: 65ch;
        margin-bottom: 0;
        color: rgba(18, 35, 66, 0.78);
        font-size: clamp(15px, 1.02vw, 16px);
        line-height: 1.7;
      }

      @media (max-width: 680px) {
        .service-gutenberg-content .icel-hose-path__intro {
          margin-bottom: 22px;
          padding-left: 14px;
        }

        .service-gutenberg-content .icel-hose-path__intro p {
          max-width: none;
          font-size: 15px;
          line-height: 1.62;
        }

        .service-gutenberg-content .icel-hose-path__function {
          padding-top: 21px;
        }

        .service-gutenberg-content .icel-hose-path__function::before {
          width: 44px;
        }

        .service-gutenberg-content h2.icel-hose-path__title {
          margin-bottom: 10px;
          font-size: clamp(22px, 6vw, 24px);
        }

        .service-gutenberg-content p.icel-hose-path__copy {
          max-width: none;
          font-size: 15px;
          line-height: 1.66;
        }
      }

      /* Uygulama ve Adaptasyon: an open calibration route, not a card grid. */
      html:has(body.postid-3630),
      body.postid-3630 {
        overflow-x: clip;
      }

      .service-gutenberg-content .icel-adaptation-model {
        --adaptation-ink: #082556;
        --adaptation-blue: #1768ca;
        --adaptation-line: rgba(23, 104, 202, 0.24);
        margin: 0;
      }

      .service-gutenberg-content .icel-adaptation-model :where(h2, h3, p) {
        max-width: none;
      }

      .service-gutenberg-content .icel-adaptation-intro {
        margin: 0 0 clamp(26px, 3vw, 36px);
        padding: 0 0 0 16px;
        border-left: 3px solid #e3b631;
      }

      .service-gutenberg-content .icel-adaptation-intro p {
        max-width: 760px;
        margin: 0;
        color: var(--adaptation-ink);
        font-size: clamp(16px, 1.25vw, 18px);
        font-weight: 600;
        line-height: 1.55;
        letter-spacing: -0.012em;
      }

      .service-gutenberg-content .icel-adaptation-context {
        position: relative;
        min-height: 165px;
        margin: 0 0 12px;
        padding: 12px clamp(132px, 19%, 160px) 24px 0;
        overflow: hidden;
        border-bottom: 1px solid var(--adaptation-line);
      }

      .service-gutenberg-content .icel-adaptation-context::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 8px;
        width: 112px;
        aspect-ratio: 1;
        border: 1px solid rgba(23, 104, 202, 0.24);
        border-radius: 50%;
        background:
          radial-gradient(circle at center, #e3b631 0 5px, transparent 6px 24px, rgba(23, 104, 202, 0.12) 25px 26px, transparent 27px 50px, rgba(23, 104, 202, 0.16) 51px 52px, transparent 53px 76px, rgba(23, 104, 202, 0.11) 77px 78px, transparent 79px),
          linear-gradient(135deg, rgba(238, 245, 255, 0.8), rgba(255, 255, 255, 0));
        box-shadow: 0 24px 60px rgba(23, 104, 202, 0.08);
      }

      .service-gutenberg-content .icel-adaptation-context h2 {
        margin: 0 0 12px;
        color: var(--adaptation-ink);
        font-size: clamp(24px, 2.35vw, 30px);
        line-height: 1.12;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .service-gutenberg-content .icel-adaptation-context p {
        margin: 0;
        color: rgba(30, 48, 78, 0.72);
        font-size: clamp(14px, 1.15vw, 16px);
        line-height: 1.58;
      }

      .service-gutenberg-content .icel-adaptation-route {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(20px, 2.5vw, 30px);
        margin: 0;
      }

      .service-gutenberg-content .icel-adaptation-route > .wp-block-group__inner-container {
        display: contents;
      }

      .service-gutenberg-content .icel-adaptation-route::before {
        content: "";
        position: absolute;
        top: 21px;
        left: 7px;
        right: 7px;
        height: 1px;
        background: linear-gradient(90deg, #1768ca, rgba(23, 104, 202, 0.18));
      }

      .service-gutenberg-content .icel-adaptation-step {
        position: relative;
        min-width: 0;
        margin: 0;
        padding: 36px 0 22px;
        background: transparent;
      }

      .service-gutenberg-content .icel-adaptation-step::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 4px solid #f6f9ff;
        border-radius: 50%;
        background: #1768ca;
        box-shadow: 0 0 0 1px #1768ca;
      }

      .service-gutenberg-content .icel-adaptation-step h3 {
        margin: 0 0 7px;
        color: var(--adaptation-ink);
        font-size: clamp(16px, 1.25vw, 18px);
        line-height: 1.22;
        letter-spacing: -0.025em;
      }

      .service-gutenberg-content .icel-adaptation-step p {
        margin: 0;
        color: rgba(30, 48, 78, 0.68);
        font-size: 13px;
        line-height: 1.55;
      }

      .service-gutenberg-content .icel-adaptation-support {
        margin: clamp(16px, 2vw, 24px) 0 0;
        padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 30px);
        border-left: 5px solid #e3b631;
        background: linear-gradient(90deg, rgba(227, 240, 255, 0.8), rgba(247, 250, 255, 0));
      }

      .service-gutenberg-content .icel-adaptation-support h3 {
        margin: 0 0 8px;
        color: var(--adaptation-ink);
        font-size: clamp(18px, 1.55vw, 21px);
        line-height: 1.2;
        letter-spacing: -0.025em;
      }

      .service-gutenberg-content .icel-adaptation-support p {
        margin: 0;
        color: rgba(30, 48, 78, 0.72);
        font-size: 14px;
        line-height: 1.55;
      }

      @media (max-width: 767px) {
        .service-gutenberg-content .icel-adaptation-intro {
          margin-bottom: 26px;
          padding-left: 14px;
        }

        .service-gutenberg-content .icel-adaptation-intro p {
          font-size: 16px;
        }

        .service-gutenberg-content .icel-adaptation-context {
          min-height: 0;
          padding: 0 0 24px;
        }

        .service-gutenberg-content .icel-adaptation-context::after {
          top: auto;
          right: -56px;
          bottom: -66px;
          width: 118px;
          opacity: 0.48;
        }

        .service-gutenberg-content .icel-adaptation-context h2,
        .service-gutenberg-content .icel-adaptation-context p {
          position: relative;
          z-index: 1;
        }

        .service-gutenberg-content .icel-adaptation-context h2 {
          margin-bottom: 10px;
          font-size: 23px;
        }

        .service-gutenberg-content .icel-adaptation-route {
          display: block;
          padding-left: 28px;
        }

        .service-gutenberg-content .icel-adaptation-route::before {
          top: 0;
          bottom: 26px;
          left: 11px;
          right: auto;
          width: 1px;
          height: auto;
          background: linear-gradient(180deg, #1768ca, rgba(23, 104, 202, 0.14));
        }

        .service-gutenberg-content .icel-adaptation-step {
          padding: 18px 0 20px;
        }

        .service-gutenberg-content .icel-adaptation-step::before {
          top: 23px;
          left: -28px;
        }

        .service-gutenberg-content .icel-adaptation-support {
          margin-top: 14px;
          padding: 18px 16px;
        }
      }

      /* Gutenberg service cards: editable blocks with a calm editorial rhythm. */
      .service-gutenberg-content .icel-service-feature-grid,
      .service-gutenberg-content .icel-service-value-grid {
        display: block;
        margin: 24px 0 10px;
      }

      .service-gutenberg-content .icel-service-feature-grid > .wp-block-group__inner-container,
      .service-gutenberg-content .icel-service-value-grid > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin: 0;
      }

      .service-gutenberg-content .icel-service-feature-grid--three > .wp-block-group__inner-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .service-gutenberg-content .icel-service-feature-card,
      .service-gutenberg-content .icel-service-value-card {
        position: relative;
        box-sizing: border-box;
        min-width: 0;
        min-height: 168px;
        margin: 0;
        padding: 68px 20px 20px;
        overflow: hidden;
        border: 1px solid #d4e1f2;
        border-radius: 20px;
        background:
          radial-gradient(circle at 100% 0, rgba(64, 126, 211, 0.08), transparent 42%),
          #fff;
        box-shadow: 0 14px 34px rgba(28, 55, 93, 0.055);
      }

      .service-gutenberg-content .icel-service-feature-card::before,
      .service-gutenberg-content .icel-service-value-card::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 20px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #fff3cf;
      }

      .service-gutenberg-content .icel-service-feature-card::after {
        content: "";
        position: absolute;
        top: 30px;
        left: 30px;
        width: 22px;
        height: 22px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .service-gutenberg-content .icel-service-feature-card--ear::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6 6 0 0 1 12 0c0 4.5-5 4-5 8.5a3 3 0 0 1-6 0'/%3E%3Cpath d='M10 9a2 2 0 1 1 4 0c0 2-2 2.2-2 4'/%3E%3C/svg%3E");
      }

      .service-gutenberg-content .icel-service-feature-card--wave::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5fc4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14v-4M8 18V6M12 15V9M16 20V4M20 13v-2'/%3E%3C/svg%3E");
      }

      .service-gutenberg-content .icel-service-feature-card--headphones::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14a2 2 0 0 1 2-2h1v7H6a2 2 0 0 1-2-2v-3ZM20 14a2 2 0 0 0-2-2h-1v7h1a2 2 0 0 0 2-2v-3Z'/%3E%3C/svg%3E");
      }

      .service-gutenberg-content .icel-service-feature-card--mic::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E");
      }

      .service-gutenberg-content .icel-service-feature-card h3,
      .service-gutenberg-content .icel-service-value-card h3 {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        color: #0a204d;
        font-size: clamp(16px, 1.15vw, 18px);
        line-height: 1.28;
      }

      .service-gutenberg-content .icel-service-feature-card p,
      .service-gutenberg-content .icel-service-value-card p {
        margin: 0;
        color: rgba(30, 48, 78, 0.66);
        font-size: 13px;
        line-height: 1.58;
      }

      .service-gutenberg-content .icel-service-value-card {
        min-height: 136px;
        padding-top: 56px;
      }

      .service-gutenberg-content .icel-service-value-card::before {
        top: 22px;
        width: 22px;
        height: 22px;
        border: 6px solid #fff;
        box-shadow: 0 0 0 1px rgba(19, 44, 84, 0.12);
      }

      .service-gutenberg-content .icel-service-value-card--yellow::before { background: #f2c84b; }
      .service-gutenberg-content .icel-service-value-card--brown::before { background: #8b5f45; }
      .service-gutenberg-content .icel-service-value-card--orange::before { background: #ed8b34; }
      .service-gutenberg-content .icel-service-value-card--blue::before { background: #3d83d6; }

      /* Reusable, icon-free Gutenberg feature index. */
      .service-gutenberg-content .icel-service-feature-index {
        counter-reset: icel-service-feature;
        display: block;
        margin: clamp(30px, 4vw, 48px) 0 10px;
        padding-top: 8px;
        border-top: 1px solid rgba(22, 58, 105, 0.18);
      }

      .service-gutenberg-content .icel-service-feature-index > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(28px, 4vw, 56px);
        margin: 0;
      }

      .service-gutenberg-content .icel-service-feature-item {
        counter-increment: icel-service-feature;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: clamp(20px, 2.5vw, 28px) 0;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid rgba(22, 58, 105, 0.14);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .service-gutenberg-content .icel-service-feature-item::before {
        content: counter(icel-service-feature, decimal-leading-zero);
        padding-top: 4px;
        color: #1768ca;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0.12em;
      }

      .service-gutenberg-content .icel-service-feature-item > .wp-block-group__inner-container {
        min-width: 0;
      }

      .service-gutenberg-content .icel-service-feature-item h3 {
        margin: 0 0 7px !important;
        padding: 0 !important;
        border: 0 !important;
        color: #0a204d;
        font-size: clamp(17px, 1.25vw, 20px);
        line-height: 1.28;
      }

      .service-gutenberg-content .icel-service-feature-item p {
        max-width: 52ch;
        margin: 0;
        color: rgba(30, 48, 78, 0.68);
        font-size: 14px;
        line-height: 1.62;
      }

      .service-gutenberg-content .icel-service-product > .icel-service-feature-grid,
      .service-gutenberg-content .icel-service-product > .wp-block-group__inner-container > .icel-service-feature-grid,
      .service-gutenberg-content .icel-service-product > .icel-service-feature-index,
      .service-gutenberg-content .icel-service-product > .wp-block-group__inner-container > .icel-service-feature-index {
        margin-top: 28px;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns,
      .service-gutenberg-content .icel-service-card-grid > .wp-block-group__inner-container > .wp-block-columns {
        gap: 16px;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column,
      .service-gutenberg-content .icel-service-card-grid > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
        padding: 24px !important;
        border: 1px solid #d4e1f2 !important;
        border-radius: 20px;
        background: linear-gradient(135deg, #fff, #f7faff);
        box-shadow: 0 14px 34px rgba(28, 55, 93, 0.055);
      }

      .service-gutenberg-content .icel-service-card-grid .wp-block-column .wp-block-columns {
        display: block;
        margin: 0 0 16px;
      }

      .service-gutenberg-content .icel-service-card-grid .wp-block-column :where(h2, h3, h4):first-of-type {
        margin-top: 0;
        font-size: clamp(17px, 1.25vw, 19px);
      }

      @media (max-width: 760px) {
        .service-gutenberg-content .icel-service-feature-grid > .wp-block-group__inner-container,
        .service-gutenberg-content .icel-service-feature-grid--three > .wp-block-group__inner-container,
        .service-gutenberg-content .icel-service-value-grid > .wp-block-group__inner-container,
        .service-gutenberg-content .icel-service-feature-index > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content .icel-service-feature-item {
          grid-template-columns: 36px minmax(0, 1fr);
          gap: 10px;
        }

        .service-gutenberg-content .icel-service-feature-card,
        .service-gutenberg-content .icel-service-value-card {
          min-height: 0;
        }
      }

      /* Service detail: archive-style cards in an accessible horizontal carousel. */
      .service-related-controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 0;
      }

      .service-related-nav {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(83, 160, 255, 0.48);
        border-radius: 50%;
        background: rgba(8, 32, 76, 0.86);
        color: #f5f8ff;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        transition: transform 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
      }

      .service-related-nav:hover:not(:disabled),
      .service-related-nav:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(138, 193, 255, 0.76);
        outline: none;
      }

      .service-related-nav:disabled {
        opacity: 0.34;
        cursor: default;
      }

      .service-related-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 36px) / 3);
        gap: 18px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        padding: 4px 2px 18px;
      }

      .service-related-track::-webkit-scrollbar {
        display: none;
      }

      .service-related-track .services-page-card {
        width: 100%;
        scroll-snap-align: start;
      }

      body.home .service-related-track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 4px;
      }

      @media (max-width: 1100px) {
        .service-related-track {
          grid-auto-columns: calc((100% - 18px) / 2);
        }

        body.home .service-related-track {
          grid-auto-columns: auto;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 720px) {
        .service-related-controls {
          justify-content: center;
        }

        .service-related-track {
          grid-auto-columns: min(86vw, 360px);
          padding-bottom: 14px;
        }

        body.home .service-related-track {
          grid-auto-flow: column;
          grid-template-columns: none;
          grid-auto-columns: min(86vw, 360px);
          overflow-x: auto;
          scroll-snap-type: inline mandatory;
        }
      }

/* Keep the result total visually connected to the cards, not the filter controls. */
.blog-results-count {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin: 16px 0 12px 0;
  color: rgba(45, 58, 84, 0.58);
  font-size: 13px;
  line-height: 1.4;
}

.blog-results-count strong {
  color: rgba(19, 40, 76, 0.78);
  font-size: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .blog-results-count {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

/* Blog detail: contents, reading progress and related carousel */
.blog-reading-progress {
  position: fixed;
  z-index: 240;
  top: var(--blog-progress-top, 0px);
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(28, 72, 133, 0.12);
  pointer-events: none;
}

.blog-reading-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2d6cdf, #56a9f5);
  will-change: width;
}

.blog-toc-links:empty::after {
  content: "Bu yazıda bölüm başlığı bulunmuyor.";
  display: block;
  color: #69778b;
  font-size: 12.5px;
  line-height: 1.5;
}

.blog-toc-card a.is-subheading {
  padding-left: 15px;
  font-size: 12px;
}

.blog-toc-card a.is-active {
  color: #0e4bb7;
}

.blog-toc-card a.is-active::before {
  box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.13);
}

@media (min-width: 1021px) {
  .blog-toc-card {
    display: flex;
    max-height: calc(100vh - 128px);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .blog-toc-toggle {
    flex: 0 0 auto;
  }

  .blog-toc-links {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 108, 223, 0.32) transparent;
  }

  .blog-toc-links::-webkit-scrollbar {
    width: 5px;
  }

  .blog-toc-links::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(45, 108, 223, 0.32);
  }
}

.blog-related-section {
  margin-top: clamp(48px, 7vw, 82px);
  padding-top: clamp(28px, 4vw, 42px);
  border-top: 1px solid rgba(19, 40, 76, 0.1);
}

.blog-related-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.blog-related-header > div:first-child > span {
  display: block;
  margin-bottom: 5px;
  color: #2d6cdf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-related-header h2 {
  margin: 0;
  color: #102443;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}

.blog-related-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-related-actions button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(19, 40, 76, 0.13);
  border-radius: 50%;
  background: #ffffff;
  color: #142c50;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blog-related-actions button:hover,
.blog-related-actions button:focus-visible {
  border-color: #2d6cdf;
  color: #2d6cdf;
  transform: translateY(-1px);
  outline: none;
}

.blog-related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  padding: 2px 2px 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 108, 223, 0.35) transparent;
}

.blog-related-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.blog-related-footer .blog-related-all {
  min-height: 42px;
  margin-top: 0;
  padding: 0 16px;
  border-color: rgba(45, 108, 223, 0.22);
  background: rgba(255, 255, 255, 0.78);
  color: #2459cf;
  font-size: 13px;
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blog-related-footer .blog-related-all i {
  font-size: 16px;
}

.blog-related-footer .blog-related-all:hover,
.blog-related-footer .blog-related-all:focus-visible {
  border-color: rgba(45, 108, 223, 0.42);
  background: #ffffff;
  color: #102443;
  transform: translateY(-1px);
}

.blog-related-header > div:first-child > .blog-related-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin: 0 0 12px;
  padding: 4px 14px;
  border: 1px solid var(--ui-pill-border);
  border-radius: var(--ds-control-radius);
  background: var(--ui-pill-background);
  color: var(--ui-pill-color);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-related-list-card {
  scroll-snap-align: start;
}

.blog-related-slide {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(19, 40, 76, 0.1);
  border-radius: 18px;
  background: #ffffff;
  scroll-snap-align: start;
}

.blog-related-slide > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.blog-related-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eaf2ff;
}

.blog-related-slide > a > div {
  padding: 18px;
}

.blog-related-slide small {
  color: #6a788c;
  font-size: 11.5px;
  font-weight: 700;
}

.blog-related-slide h3 {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 7px 0 16px;
  overflow: hidden;
  color: #12284b;
  font-size: 17px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.blog-related-slide span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #2d6cdf;
  font-size: 12.5px;
  font-weight: 800;
}

@media (max-width: 1020px) {
  .blog-article-sidebar {
    order: -1;
  }

  .blog-toc-card {
    padding: 18px 20px;
  }

  .blog-toc-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .blog-related-track {
    grid-auto-columns: minmax(260px, 46%);
  }
}

@media (max-width: 640px) {
  .blog-reading-progress {
    height: 2px;
  }

  .blog-toc-links {
    grid-template-columns: 1fr;
  }

  .blog-related-header {
    align-items: center;
  }

  .blog-related-actions button {
    width: 38px;
    height: 38px;
  }

  .blog-related-track {
    width: calc(100% + 18px);
    grid-auto-columns: 82%;
    gap: 14px;
  }

  .blog-related-footer {
    margin-top: 14px;
  }

  .blog-related-footer .blog-related-all {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 12.5px;
  }
}

      /* Mobile navigation stability -------------------------------------- */
      @media (max-width: 1200px) {
        .header-shell,
        .header-shell * {
          box-sizing: border-box;
        }

        .header-shell {
          max-width: 100vw;
        }

        .header {
          min-height: 74px;
          align-items: center;
          overflow: visible;
        }

        .header .brand {
          position: relative;
          z-index: 405;
          min-width: 0;
          align-self: center;
        }

        .header .brand-mark,
        .header .brand-mark img {
          display: block;
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .header-shell .nav {
          width: 100%;
          max-width: 100vw;
          overflow-x: hidden;
          overscroll-behavior: contain;
          scrollbar-gutter: stable;
        }

        .header-shell .nav-main,
        .header-shell .nav-main > *,
        .header-shell .mobile-branches,
        .header-shell .mobile-branch-card {
          min-width: 0;
          max-width: 100%;
        }

        .header-shell .mobile-branch-card {
          width: 100%;
        }

        .header-shell .mobile-branches-heading h2,
        .header-shell .mobile-branch-copy {
          min-width: 0;
          overflow-wrap: anywhere;
        }

        .header-shell.nav-open .nav {
          isolation: isolate;
        }
      }

      @media (max-width: 720px) {
        .header {
          min-height: 68px;
        }

        .header-shell .nav {
          padding-left: max(14px, env(safe-area-inset-left));
          padding-right: max(14px, env(safe-area-inset-right));
          padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        .header-shell .mobile-branches-heading {
          gap: 8px;
        }

        .header-shell .mobile-branches-heading h2 {
          min-width: 0;
          font-size: 14px;
          line-height: 1.2;
          white-space: nowrap;
        }

        .header-shell .mobile-branch-card {
          grid-template-columns: 42px minmax(0, 1fr) 38px;
          gap: 10px;
        }
      }

      @media (max-width: 380px) {
        .header {
          padding-inline: 12px;
        }

        .header-shell .nav {
          padding-inline: 12px;
        }

        .header-shell .mobile-branches-heading h2 {
          font-size: 13px;
        }

        .header-shell .mobile-branch-card {
          grid-template-columns: 38px minmax(0, 1fr) 36px;
          padding-inline: 10px;
        }
      }

      .service-detail-page {
        background: #f7faff;
      }

      .service-detail-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: clamp(30px, 4vw, 54px) 0 0;
        background:
          radial-gradient(circle at 86% 18%, rgba(67, 140, 234, 0.13), transparent 24%),
          radial-gradient(circle at 12% 76%, rgba(245, 201, 79, 0.11), transparent 20%),
          linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      }

      .service-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
          linear-gradient(rgba(115, 149, 194, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(115, 149, 194, 0.08) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 78%);
        pointer-events: none;
      }

      .service-detail-shell,
      .service-overview-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        margin: 0 auto;
      }

      .service-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: clamp(24px, 3vw, 38px);
        color: rgba(38, 56, 88, 0.58);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
      }

      .service-breadcrumb a {
        color: rgba(38, 56, 88, 0.66);
        text-decoration: none;
        transition: color 0.2s ease;
      }

      .service-breadcrumb a:hover,
      .service-breadcrumb a:focus-visible {
        color: #0b4fb4;
      }

      .service-hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.82fr);
        gap: clamp(30px, 5vw, 76px);
        align-items: end;
      }

      .service-hero-copy {
        align-self: center;
        padding-bottom: clamp(34px, 5vw, 72px);
      }

      .service-detail-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        margin: 0 0 12px;
        padding: 4px 12px;
        border: 1px solid rgba(245, 201, 79, 0.42);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        color: rgba(21, 46, 88, 0.7);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .service-hero-copy h1 {
        margin: 0;
        color: #071a44;
        font-size: clamp(38px, 4.4vw, 64px);
        line-height: 1.02;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .service-detail-lede {
        max-width: 620px;
        margin: 12px 0 0;
        color: rgba(20, 37, 68, 0.72);
        font-size: clamp(14px, 1vw, 16px);
        line-height: 1.58;
        text-wrap: pretty;
      }

      .service-hero-benefits {
        display: grid;
        gap: 10px;
        max-width: 680px;
        margin-top: 20px;
      }

      .service-hero-benefit {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 8px 12px 8px 8px;
        border: 1px solid rgba(210, 223, 241, 0.82);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: 0 10px 30px rgba(42, 65, 103, 0.06);
        backdrop-filter: blur(12px);
      }

      .service-hero-benefit > span,
      .service-highlight-strip article > span,
      .service-test-card > span {
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #0d4ea6;
        background: rgba(245, 201, 79, 0.28);
      }

      .service-hero-benefit > span {
        width: 38px;
        height: 38px;
      }

      .service-hero-benefit i,
      .service-highlight-strip i,
      .service-test-card i {
        font-size: 20px;
        line-height: 1;
      }

      .service-hero-benefit p {
        margin: 0;
        color: rgba(21, 38, 70, 0.76);
        font-size: 13px;
        line-height: 1.42;
      }

      .service-hero-actions {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-top: 26px;
      }

      .service-primary-btn,
      .service-overview-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 20px;
        border-radius: 999px;
        background: #071a44;
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 18px 34px rgba(7, 26, 68, 0.24);
        transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      }

      .service-primary-btn:hover,
      .service-primary-btn:focus-visible,
      .service-overview-btn:hover,
      .service-overview-btn:focus-visible {
        transform: translateY(-1px);
        background: #0f2b66;
        box-shadow: 0 22px 42px rgba(7, 26, 68, 0.28);
      }

      .service-secondary-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #123d82;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
      }

      .service-secondary-link i,
      .service-primary-btn i,
      .service-overview-btn i {
        transition: transform 0.2s ease;
      }

      .service-secondary-link:hover i,
      .service-secondary-link:focus-visible i,
      .service-primary-btn:hover i,
      .service-primary-btn:focus-visible i,
      .service-overview-btn:hover i,
      .service-overview-btn:focus-visible i {
        transform: translateX(3px);
      }

      .service-hero-visual {
        position: relative;
        min-height: clamp(360px, 38vw, 530px);
      }

      .service-hero-visual::before,
      .service-hero-visual::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }

      .service-hero-visual::before {
        right: -7%;
        bottom: 6%;
        width: 112%;
        aspect-ratio: 1;
        border: 1px solid rgba(87, 137, 207, 0.16);
        box-shadow:
          inset 0 0 0 36px rgba(87, 137, 207, 0.035),
          inset 0 0 0 78px rgba(87, 137, 207, 0.025);
      }

      .service-hero-visual::after {
        right: 8%;
        bottom: 7%;
        width: 58%;
        aspect-ratio: 1;
        background: rgba(245, 201, 79, 0.16);
        filter: blur(38px);
      }

      .service-hero-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
      }

      .service-hero-image img {
        position: absolute;
        right: -15%;
        bottom: -18px;
        width: min(142%, 820px);
        max-width: none;
        height: 146%;
        display: block;
        object-fit: contain;
        object-position: center bottom;
        filter: drop-shadow(0 26px 42px rgba(28, 48, 84, 0.16));
      }

      .service-highlight-strip {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: -20px 0 0;
        padding: 12px;
        border: 1px solid rgba(210, 223, 241, 0.88);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 18px 48px rgba(33, 56, 94, 0.08);
        backdrop-filter: blur(16px);
      }

      .service-highlight-strip article {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 16px;
      }

      .service-highlight-strip article > span {
        width: 44px;
        height: 44px;
      }

      .service-highlight-strip h2 {
        margin: 0;
        color: #10244c;
        font-size: 14px;
        line-height: 1.12;
        letter-spacing: 0;
      }

      #hortum-degisimi .service-hero-image img {
        inset: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: 100%;
        padding: clamp(22px, 3.5vw, 50px);
        box-sizing: border-box;
        object-fit: contain;
        object-position: center;
      }

      .service-highlight-strip p {
        margin: 4px 0 0;
        color: rgba(32, 49, 79, 0.62);
        font-size: 12px;
        line-height: 1.24;
      }

      .service-detail-overview {
        padding: clamp(54px, 6vw, 86px) 0 clamp(58px, 7vw, 96px);
        background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
      }

      .service-overview-shell {
        display: grid;
        grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(28px, 4vw, 58px);
        align-items: start;
      }

      .service-overview-copy {
        position: sticky;
        top: 116px;
      }

      .service-overview-shell--single {
        grid-template-columns: minmax(0, 780px);
        justify-content: center;
      }

      .service-overview-shell--single .service-overview-copy {
        position: static;
        width: 100%;
      }

      .service-overview-shell--single .service-overview-copy > div {
        color: rgba(20, 37, 68, 0.76);
        font-size: clamp(16px, 1.15vw, 18px);
        line-height: 1.72;
      }

      .service-overview-copy h2 {
        margin: 0;
        color: #071a44;
        font-size: clamp(28px, 2.3vw, 38px);
        line-height: 1.08;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .service-overview-copy > p:not(.service-detail-kicker) {
        margin: 12px 0 0;
        color: rgba(20, 37, 68, 0.7);
        font-size: 14px;
        line-height: 1.58;
      }

      .service-overview-btn {
        margin-top: 22px;
      }

      .service-detail-overview--editorial {
        padding-top: clamp(60px, 7vw, 104px);
      }

      .service-editorial-shell {
        width: min(calc(100% - (2 * var(--ds-gutter))), var(--ds-container));
        margin: 0 auto;
      }

      .service-editorial-header {
        max-width: 760px;
        margin-bottom: clamp(28px, 4vw, 48px);
      }

      .service-editorial-header h2 {
        margin: 0;
        color: #071a44;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1.08;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .service-editorial-header > p:last-child {
        max-width: 650px;
        margin: 14px 0 0;
        color: rgba(20, 37, 68, 0.68);
        font-size: 15px;
        line-height: 1.65;
      }

      .service-editorial-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: clamp(40px, 4vw, 64px);
        align-items: start;
      }

      .service-gutenberg-content {
        min-width: 0;
        color: rgba(18, 35, 66, 0.78);
        font-size: clamp(16px, 1vw, 17px);
        line-height: 1.72;
      }

      .service-gutenberg-content > :first-child {
        margin-top: 0;
      }

      .service-gutenberg-content > :last-child {
        margin-bottom: 0;
      }

      .service-gutenberg-content p {
        margin: 0 0 1.25em;
        text-wrap: pretty;
      }

      .service-gutenberg-content h2,
      .service-gutenberg-content h3,
      .service-gutenberg-content h4 {
        color: #0a204d;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .service-gutenberg-content h2 {
        margin: 1.75em 0 0.65em;
        font-size: clamp(24px, 1.8vw, 29px);
        line-height: 1.18;
      }

      .service-gutenberg-content h3 {
        margin: 1.55em 0 0.55em;
        font-size: clamp(19px, 1.4vw, 23px);
        line-height: 1.25;
      }

      .service-gutenberg-content h4 {
        margin: 1.4em 0 0.5em;
        font-size: 17px;
        line-height: 1.3;
      }

      .service-gutenberg-content ul,
      .service-gutenberg-content ol {
        margin: 1.25em 0;
        padding-left: 1.35em;
      }

      .service-gutenberg-content li {
        margin: 0.48em 0;
        padding-left: 0.28em;
      }

      .service-gutenberg-content li::marker {
        color: #246ed0;
        font-weight: 700;
      }

      .service-gutenberg-content a:not(.wp-element-button) {
        color: #0b59bf;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }

      .service-gutenberg-content figure {
        margin-top: clamp(22px, 3vw, 34px);
        margin-bottom: clamp(22px, 3vw, 34px);
      }

      .service-gutenberg-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
      }

      .service-gutenberg-content figcaption {
        margin-top: 9px;
        color: rgba(32, 49, 79, 0.58);
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
      }

      .service-gutenberg-content .wp-block-columns {
        gap: clamp(22px, 3vw, 38px);
        margin-top: clamp(28px, 4vw, 48px);
        margin-bottom: clamp(28px, 4vw, 48px);
      }

      .service-gutenberg-content blockquote {
        margin: 2em 0;
        padding: 20px 24px;
        border-left: 4px solid #f0bc24;
        border-radius: 0 18px 18px 0;
        background: #f5f8fd;
        color: #17325f;
      }

      .service-gutenberg-content .wp-block-table {
        overflow-x: auto;
      }

      .service-gutenberg-content table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }

      .service-gutenberg-content th,
      .service-gutenberg-content td {
        padding: 12px 14px;
        border: 1px solid #dce5f1;
        text-align: left;
      }

      .service-gutenberg-content .wp-element-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 20px;
        border-radius: 999px;
        background: #071a44;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
      }

      /* Legacy Gutenberg exports on the accessories page wrap block comments in
       * empty paragraphs. Keep those editor artefacts from becoming visible gaps
       * in the published layout. */
      .service-gutenberg-content--isitme-cihazi-aksesuarlari p:empty {
        display: none;
      }

      /* Reusable native Gutenberg layouts for service content. */
      .service-gutenberg-content .icel-service-intro {
        position: relative;
        margin: 0 0 clamp(44px, 6vw, 72px);
        padding: 2px 0 2px clamp(22px, 3vw, 42px);
        border-left: 3px solid #246ed0;
      }

      .service-gutenberg-content .icel-service-intro::before {
        content: none;
      }

      .service-gutenberg-content .icel-service-intro p {
        max-width: 76ch;
        margin: 0;
        color: #19345f;
        font-size: clamp(16px, 1.15vw, 18px);
        line-height: 1.68;
      }

      .service-gutenberg-content .icel-service-body {
        width: 100%;
        max-width: none;
        margin-bottom: clamp(42px, 6vw, 72px);
      }

      .service-gutenberg-content .icel-service-body p {
        max-width: 78ch;
      }

      /* Tinnitus: an open frequency-spectrum composition built from Core blocks. */
      .service-gutenberg-content .icel-tinnitus-spectrum {
        position: relative;
        width: 100%;
        margin: 0;
        isolation: isolate;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum :where(h2, p) {
        margin-top: 0;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__intro {
        position: relative;
        min-height: 98px;
        margin: 0 0 clamp(34px, 4vw, 48px);
        padding: 10px clamp(148px, 18vw, 190px) 10px clamp(20px, 2.5vw, 32px);
        border-left: 3px solid #efb91e;
        overflow: hidden;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__intro::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        right: 4px;
        width: 168px;
        height: 86px;
        transform: translateY(-50%);
        opacity: 0.9;
        background:
          radial-gradient(circle at 86% 50%, #efb91e 0 4px, transparent 5px),
          repeating-radial-gradient(ellipse at 86% 50%, transparent 0 13px, rgba(36, 110, 208, 0.18) 14px 15px, transparent 16px 25px);
        pointer-events: none;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__intro p {
        max-width: 68ch;
        margin-bottom: 0;
        color: #19345f;
        font-size: clamp(15px, 1vw, 17px);
        line-height: 1.66;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__body > h2,
      .service-gutenberg-content .icel-tinnitus-spectrum__body > .wp-block-group__inner-container > h2 {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(60px, 1fr);
        gap: clamp(18px, 2.5vw, 30px);
        align-items: center;
        margin: 0 0 clamp(20px, 2.5vw, 28px);
        font-size: clamp(23px, 1.65vw, 27px);
        line-height: 1.2;
        white-space: normal;
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__body > h2::after,
      .service-gutenberg-content .icel-tinnitus-spectrum__body > .wp-block-group__inner-container > h2::after {
        content: "";
        height: 1px;
        background: linear-gradient(90deg, rgba(36, 110, 208, 0.4), rgba(36, 110, 208, 0));
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__bands {
        border-top: 1px solid rgba(36, 110, 208, 0.24);
        border-bottom: 1px solid rgba(36, 110, 208, 0.18);
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__bands > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__band {
        position: relative;
        min-width: 0;
        padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 34px) clamp(22px, 2.5vw, 28px) clamp(70px, 7vw, 82px);
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__band + .icel-tinnitus-spectrum__band {
        border-left: 1px solid rgba(36, 110, 208, 0.18);
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__band::before {
        content: "";
        position: absolute;
        top: clamp(27px, 3.2vw, 35px);
        left: clamp(16px, 2vw, 24px);
        width: 36px;
        height: 36px;
        border: 1px solid rgba(36, 110, 208, 0.32);
        border-radius: 50%;
        background:
          radial-gradient(circle, #efb91e 0 3px, transparent 4px),
          radial-gradient(circle, transparent 0 10px, rgba(36, 110, 208, 0.17) 11px 12px, transparent 13px);
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__band--level::before {
        background:
          linear-gradient(90deg, transparent 8px, rgba(36, 110, 208, 0.55) 8px 10px, transparent 10px 14px, rgba(36, 110, 208, 0.85) 14px 17px, transparent 17px 21px, rgba(36, 110, 208, 0.55) 21px 23px, transparent 23px) center / 30px 18px no-repeat,
          radial-gradient(circle, transparent 0 15px, rgba(36, 110, 208, 0.17) 16px 17px, transparent 18px);
      }

      .service-gutenberg-content .icel-tinnitus-spectrum__band p {
        max-width: 45ch;
        margin-bottom: 0;
        color: rgba(18, 35, 66, 0.74);
        font-size: clamp(14px, 0.92vw, 16px);
        line-height: 1.68;
      }

      @media (max-width: 760px) {
        .service-gutenberg-content .icel-tinnitus-spectrum__intro {
          min-height: 0;
          margin-bottom: 30px;
          padding: 4px 58px 4px 18px;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__intro::after {
          right: -58px;
          width: 112px;
          height: 70px;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__intro p {
          font-size: 14px;
          line-height: 1.62;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__body > h2,
        .service-gutenberg-content .icel-tinnitus-spectrum__body > .wp-block-group__inner-container > h2 {
          display: block;
          margin-bottom: 18px;
          font-size: clamp(21px, 6vw, 24px);
          line-height: 1.2;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__body > h2::after,
        .service-gutenberg-content .icel-tinnitus-spectrum__body > .wp-block-group__inner-container > h2::after {
          display: block;
          width: 54px;
          margin-top: 14px;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__bands > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__band {
          padding: 22px 0 22px 58px;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__band + .icel-tinnitus-spectrum__band {
          border-top: 1px solid rgba(36, 110, 208, 0.16);
          border-left: 0;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__band::before {
          top: 23px;
          left: 4px;
          width: 34px;
          height: 34px;
        }

        .service-gutenberg-content .icel-tinnitus-spectrum__band p {
          max-width: none;
          font-size: 14px;
          line-height: 1.62;
        }
      }

      /* Earmold: an editorial fit statement followed by an open making sequence. */
      .service-gutenberg-content .icel-earmold-blueprint {
        width: 100%;
        margin: 0;
        counter-reset: earmold-stage;
      }

      .service-gutenberg-content .icel-earmold-blueprint :where(h2, p) {
        margin-top: 0;
      }

      .service-gutenberg-content .icel-earmold-blueprint__intro > .wp-block-group__inner-container {
        display: block;
      }

      .service-gutenberg-content .icel-earmold-blueprint__lead {
        max-width: 38ch;
        margin-bottom: 0;
        color: #082657;
        font-size: clamp(20px, 1.55vw, 25px);
        font-weight: 700;
        line-height: 1.36;
        letter-spacing: -0.02em;
      }

      .service-gutenberg-content .icel-earmold-blueprint__lead::before {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-bottom: 18px;
        background: #efb91e;
      }

      .service-gutenberg-content .icel-earmold-blueprint__principles p {
        max-width: 48ch;
        margin-bottom: 0;
        padding: 15px 0;
        border-top: 1px solid rgba(36, 110, 208, 0.2);
        color: #56657e;
        font-size: clamp(14px, 0.92vw, 15.5px);
        line-height: 1.62;
      }

      .service-gutenberg-content .icel-earmold-blueprint__principles {
        margin-top: clamp(24px, 3vw, 34px);
      }

      .service-gutenberg-content .icel-earmold-blueprint__principles > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(28px, 5vw, 64px);
      }

      .service-gutenberg-content .icel-earmold-blueprint__process {
        margin-top: clamp(42px, 5vw, 58px);
      }

      .service-gutenberg-content .icel-earmold-blueprint__process > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
        gap: clamp(36px, 5vw, 64px);
        align-items: start;
      }

      .service-gutenberg-content .icel-earmold-blueprint__process > h2,
      .service-gutenberg-content .icel-earmold-blueprint__process > .wp-block-group__inner-container > h2 {
        max-width: 18ch;
        margin: 0;
        font-size: clamp(24px, 1.85vw, 29px);
        line-height: 1.18;
        letter-spacing: -0.025em;
      }

      .service-gutenberg-content .icel-earmold-blueprint__sequence > .wp-block-group__inner-container {
        display: block;
      }

      .service-gutenberg-content .icel-earmold-blueprint__stage {
        counter-increment: earmold-stage;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding: 18px 0 22px;
        border-top: 1px solid rgba(36, 110, 208, 0.24);
      }

      .service-gutenberg-content .icel-earmold-blueprint__stage::before {
        content: counter(earmold-stage, decimal-leading-zero);
        color: #246ed0;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.7;
        letter-spacing: 0.08em;
      }

      .service-gutenberg-content .icel-earmold-blueprint__stage p {
        max-width: 60ch;
        margin-bottom: 0;
        color: #3f506c;
        font-size: clamp(14px, 0.94vw, 16px);
        line-height: 1.62;
      }

      @media (max-width: 760px) {
        .service-gutenberg-content .icel-earmold-blueprint__intro > .wp-block-group__inner-container {
          display: block;
        }

        .service-gutenberg-content .icel-earmold-blueprint__lead {
          max-width: none;
          font-size: clamp(19px, 5.5vw, 22px);
        }

        .service-gutenberg-content .icel-earmold-blueprint__lead::before {
          margin-bottom: 14px;
        }

        .service-gutenberg-content .icel-earmold-blueprint__principles p,
        .service-gutenberg-content .icel-earmold-blueprint__stage p {
          max-width: none;
          font-size: 14px;
        }

        .service-gutenberg-content .icel-earmold-blueprint__principles {
          margin-top: 20px;
        }

        .service-gutenberg-content .icel-earmold-blueprint__principles > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .service-gutenberg-content .icel-earmold-blueprint__process {
          margin-top: 36px;
        }

        .service-gutenberg-content .icel-earmold-blueprint__process > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 20px;
        }

        .service-gutenberg-content .icel-earmold-blueprint__process > h2,
        .service-gutenberg-content .icel-earmold-blueprint__process > .wp-block-group__inner-container > h2 {
          margin-bottom: 0;
          font-size: clamp(22px, 6.2vw, 25px);
        }

        .service-gutenberg-content .icel-earmold-blueprint__sequence > .wp-block-group__inner-container {
          display: block;
        }

        .service-gutenberg-content .icel-earmold-blueprint__stage {
          grid-template-columns: 38px minmax(0, 1fr);
          gap: 10px;
          padding: 16px 0 19px;
        }
      }

      .service-gutenberg-content .icel-service-story > h2 {
        display: grid;
        grid-template-columns: auto minmax(48px, 1fr);
        gap: 20px;
        align-items: center;
        margin: clamp(44px, 6vw, 72px) 0 20px;
        font-size: clamp(24px, 1.75vw, 28px);
      }

      .service-gutenberg-content .icel-service-story > h2::after {
        content: "";
        height: 1px;
        background: linear-gradient(90deg, rgba(84, 127, 187, 0.32), transparent);
      }

      .service-gutenberg-content .icel-service-story > h2:first-child {
        margin-top: 0;
      }

      .service-gutenberg-content .icel-service-method {
        display: block;
        margin: 0;
        padding: 24px 0;
        border-top: 1px solid rgba(174, 195, 224, 0.72);
      }

      .service-gutenberg-content .icel-service-method > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
        gap: clamp(22px, 3vw, 40px);
        align-items: start;
      }

      .service-gutenberg-content .icel-service-method h3,
      .service-gutenberg-content .icel-service-method p {
        margin: 0;
      }

      .service-gutenberg-content .icel-service-method h3 {
        color: #0c5dbf;
        font-size: clamp(18px, 1.45vw, 22px);
      }

      .service-gutenberg-content--sgk-ile-cihaz-alimi .icel-service-story ul {
        columns: 2 260px;
        column-gap: clamp(32px, 5vw, 64px);
        padding-left: 0;
        list-style: none;
      }

      .service-gutenberg-content--sgk-ile-cihaz-alimi .icel-service-story ul li {
        position: relative;
        break-inside: avoid;
        margin: 0 0 14px;
        padding: 0 0 14px 28px;
        border-bottom: 1px solid rgba(174, 195, 224, 0.48);
      }

      .service-gutenberg-content--sgk-ile-cihaz-alimi .icel-service-story ul li::before {
        content: "\2713";
        position: absolute;
        left: 0;
        color: #246ed0;
        font-weight: 700;
      }

      .service-gutenberg-content .icel-service-body > :first-child,
      .service-gutenberg-content .icel-service-product :where(h2, h3, h4):first-child,
      .service-gutenberg-content .icel-service-note > :first-child {
        margin-top: 0;
      }

      .service-gutenberg-content .icel-service-product,
      .service-gutenberg-content .icel-service-card-grid {
        margin: 0;
        padding: clamp(44px, 6vw, 76px) 0;
        border-top: 1px solid rgba(174, 195, 224, 0.72);
        background: transparent;
      }

      .service-gutenberg-content .icel-service-product > .wp-block-columns,
      .service-gutenberg-content .icel-service-product > .wp-block-group__inner-container > .wp-block-columns,
      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns,
      .service-gutenberg-content .icel-service-card-grid > .wp-block-group__inner-container > .wp-block-columns {
        margin: 0;
      }

      .service-gutenberg-content .icel-service-product > .wp-block-columns,
      .service-gutenberg-content .icel-service-product > .wp-block-group__inner-container > .wp-block-columns {
        display: grid;
        grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
        gap: clamp(30px, 3.4vw, 48px);
        align-items: start !important;
      }

      .service-gutenberg-content .icel-service-product--alternate > .wp-block-columns,
      .service-gutenberg-content .icel-service-product--alternate > .wp-block-group__inner-container > .wp-block-columns {
        grid-template-columns: minmax(0, 1fr) minmax(230px, 270px);
      }

      .service-gutenberg-content .icel-service-product .wp-block-columns > .wp-block-column {
        min-width: 0;
        align-self: start;
      }

      .service-gutenberg-content .icel-service-product .wp-block-columns > .wp-block-column:not(:has(figure))::before {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-bottom: 18px;
        border-radius: 999px;
        background: linear-gradient(90deg, #246ed0, #74b5ff);
      }

      .service-gutenberg-content .icel-service-product figure {
        position: relative;
        isolation: isolate;
        display: grid;
        place-items: center;
        min-height: clamp(220px, 21vw, 290px);
        margin: 0;
        padding: clamp(12px, 2vw, 24px);
      }

      .service-gutenberg-content .icel-service-product figure::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: min(92%, 300px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(56, 126, 220, 0.12), rgba(56, 126, 220, 0) 70%);
      }

      .service-gutenberg-content .icel-service-card-grid figure {
        margin: 0 0 18px;
      }

      .service-gutenberg-content .icel-service-product img,
      .service-gutenberg-content .icel-service-card-grid img {
        display: block;
        width: 100%;
        max-height: 480px;
        object-fit: contain;
        background: transparent;
      }

      .service-gutenberg-content .icel-service-product img {
        max-height: 330px;
        border-radius: 0;
        filter: drop-shadow(0 20px 24px rgba(28, 53, 93, 0.13));
      }

      .service-gutenberg-content .icel-service-card-grid :where(h2, h3, h4) {
        margin-top: 1.2em;
      }

      .service-gutenberg-content .icel-service-product h2:first-child {
        max-width: none;
        margin: 0 0 14px;
        font-size: clamp(24px, 1.85vw, 29px) !important;
        line-height: 1.16;
      }

      .service-gutenberg-content .icel-service-product h3 {
        max-width: none;
        margin: 1.55em 0 0.55em;
        font-size: clamp(18px, 1.45vw, 21px);
        line-height: 1.25;
      }

      .service-gutenberg-content .icel-service-product--feature-rich h3 {
        margin-top: 1.7em;
        padding-top: 1.05em;
        border-top: 1px solid rgba(174, 195, 224, 0.56);
      }

      .service-gutenberg-content .icel-service-product h4 {
        margin-top: 1.4em;
      }

      .service-gutenberg-content .icel-service-product p,
      .service-gutenberg-content .icel-service-card-grid p {
        max-width: 72ch;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns,
      .service-gutenberg-content .icel-service-card-grid > .wp-block-group__inner-container > .wp-block-columns {
        align-items: stretch !important;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column {
        padding: 0 clamp(18px, 2.6vw, 38px);
        border-left: 1px solid rgba(174, 195, 224, 0.72);
        background: transparent;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column:first-child {
        padding-left: 0;
        border-left: 0;
      }

      .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column:last-child {
        padding-right: 0;
      }

      .service-gutenberg-content .icel-service-checklist,
      .service-gutenberg-content .icel-service-product ul,
      .service-gutenberg-content .icel-service-card-grid ul {
        padding-left: 0;
        list-style: none;
      }

      .service-gutenberg-content .icel-service-checklist li,
      .service-gutenberg-content .icel-service-product li,
      .service-gutenberg-content .icel-service-card-grid li {
        position: relative;
        padding-left: 28px;
      }

      .service-gutenberg-content .icel-service-checklist li::before,
      .service-gutenberg-content .icel-service-product li::before,
      .service-gutenberg-content .icel-service-card-grid li::before {
        content: "\2713";
        position: absolute;
        top: 0;
        left: 0;
        color: #246ed0;
        font-weight: 700;
      }

      .service-gutenberg-content .icel-service-note {
        margin: clamp(36px, 5vw, 60px) 0 0;
        padding: 4px 0 4px clamp(20px, 2.5vw, 34px);
        border-left: 3px solid #e0ad22;
        background: transparent;
      }

      .service-gutenberg-content .icel-service-note p:last-child {
        margin-bottom: 0;
      }

      .service-gutenberg-content .wp-block-spacer {
        display: none;
      }

      /* Compact, icon-free Gutenberg catalog for product-heavy services. */
      .service-gutenberg-content .icel-service-compact-catalog {
        counter-reset: service-catalog;
        margin: 0 0 clamp(36px, 5vw, 56px);
        padding: 0;
      }

      .service-gutenberg-content .icel-service-compact-catalog + .icel-service-compact-catalog {
        padding-top: clamp(34px, 4vw, 48px);
        border-top: 1px solid rgba(174, 195, 224, 0.72);
      }

      .service-gutenberg-content .icel-service-compact-catalog > h2,
      .service-gutenberg-content .icel-service-compact-catalog > .wp-block-group__inner-container > h2 {
        max-width: 680px;
        margin: 0 0 8px;
        font-size: clamp(24px, 1.8vw, 29px);
      }

      .service-gutenberg-content .icel-service-catalog-lead {
        max-width: 680px;
        margin: 0 0 24px;
        color: rgba(18, 35, 66, 0.64);
        font-size: 15px;
      }

      .service-gutenberg-content .icel-service-catalog-list > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(26px, 3vw, 42px);
      }

      .service-gutenberg-content .icel-service-catalog-item {
        counter-increment: service-catalog;
        position: relative;
        min-width: 0;
        margin: 0;
        padding: 20px 0;
        border-top: 1px solid rgba(174, 195, 224, 0.64);
      }

      .service-gutenberg-content .icel-service-catalog-item > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
      }

      .service-gutenberg-content .icel-service-catalog-item::after {
        content: counter(service-catalog, decimal-leading-zero);
        position: absolute;
        top: 22px;
        right: 0;
        color: rgba(14, 75, 151, 0.48);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
      }

      .service-gutenberg-content .icel-service-catalog-item figure {
        display: grid;
        place-items: center;
        width: 108px;
        height: 94px;
        margin: 0;
        padding: 8px;
        border-radius: 14px;
        background: #f3f7fd;
      }

      .service-gutenberg-content .icel-service-catalog-item img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
      }

      .service-gutenberg-content .icel-service-catalog-copy {
        min-width: 0;
        padding-right: 28px;
      }

      .service-gutenberg-content .icel-service-catalog-copy h3 {
        margin: 0 0 7px;
        font-size: clamp(17px, 1.2vw, 20px);
        line-height: 1.28;
      }

      .service-gutenberg-content .icel-service-catalog-copy p,
      .service-gutenberg-content .icel-service-catalog-copy ul {
        margin: 0;
        color: rgba(18, 35, 66, 0.68);
        font-size: 14px;
        line-height: 1.55;
      }

      .service-gutenberg-content .icel-service-catalog-copy ul {
        padding-left: 17px;
      }

      .service-gutenberg-content .icel-service-catalog-copy li {
        margin: 3px 0;
        padding-left: 1px;
      }

      .service-gutenberg-content .icel-service-catalog-item.icel-service-catalog-text > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr);
      }

      .service-gutenberg-content .icel-service-catalog-item.icel-service-catalog-text .icel-service-catalog-copy {
        padding-right: 36px;
      }

      /* İşitme Koruması: page-specific acoustic story, not a generic card grid. */
      .service-gutenberg-content .icel-protection-model-v2,
      .service-gutenberg-content .icel-protection-choice,
      .service-gutenberg-content .icel-protection-signal,
      .service-gutenberg-content .icel-protection-map {
        margin: 0 0 clamp(68px, 8vw, 104px);
      }

      .service-gutenberg-content .icel-protection-eyebrow {
        margin: 0 0 13px;
        color: #2165bf;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.13em;
        line-height: 1.3;
      }

      .service-gutenberg-content .icel-protection-model-v2 h2,
      .service-gutenberg-content .icel-protection-choice h2,
      .service-gutenberg-content .icel-protection-signal h2,
      .service-gutenberg-content .icel-protection-map h2 {
        max-width: 680px;
        margin: 0 0 14px;
        font-size: clamp(29px, 3vw, 43px);
        line-height: 1.08;
        letter-spacing: -0.035em;
      }

      .service-gutenberg-content .icel-protection-section-lead,
      .service-gutenberg-content .icel-protection-stage-lead {
        max-width: 650px;
        margin: 0;
        color: rgba(18, 35, 66, 0.68);
        font-size: clamp(15px, 1.25vw, 18px);
        line-height: 1.65;
      }

      .service-gutenberg-content .icel-protection-stage {
        position: relative;
        overflow: hidden;
        min-height: 470px;
        padding: clamp(42px, 5vw, 66px);
        border-radius: 4px 54px 4px 54px;
        background: linear-gradient(125deg, #071e48 0%, #0b326b 62%, #124c91 100%);
        color: #fff;
        isolation: isolate;
      }

      .service-gutenberg-content .icel-protection-stage::before {
        content: "";
        position: absolute;
        width: 410px;
        height: 410px;
        right: -90px;
        bottom: -170px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        box-shadow: 0 0 0 46px rgba(255, 255, 255, 0.035), 0 0 0 92px rgba(255, 255, 255, 0.025);
        z-index: -1;
      }

      .service-gutenberg-content .icel-protection-stage > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
        gap: clamp(24px, 4vw, 58px);
        align-items: center;
      }

      .service-gutenberg-content .icel-protection-stage .icel-protection-eyebrow {
        color: #f3c750;
      }

      .service-gutenberg-content .icel-protection-stage h2 {
        max-width: 520px;
        color: #fff;
        font-size: clamp(34px, 3.6vw, 52px);
      }

      .service-gutenberg-content .icel-protection-stage-lead {
        color: rgba(255, 255, 255, 0.73);
      }

      .service-gutenberg-content .icel-protection-stage-visual {
        position: relative;
        margin: 0 -32px -18px 0;
      }

      .service-gutenberg-content .icel-protection-stage-visual img {
        display: block;
        width: 100%;
        max-height: 330px;
        object-fit: contain;
        filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.26));
      }

      .service-gutenberg-content .icel-protection-range {
        margin-top: clamp(30px, 4vw, 46px);
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      }

      .service-gutenberg-content .icel-protection-range > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
      }

      .service-gutenberg-content .icel-protection-range-item p {
        margin: 0;
      }

      .service-gutenberg-content .icel-protection-range-value {
        color: #fff;
        font-size: clamp(24px, 2.6vw, 36px);
        font-weight: 800;
        line-height: 1;
      }

      .service-gutenberg-content .icel-protection-range-label {
        margin-top: 6px !important;
        color: rgba(255, 255, 255, 0.58);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .service-gutenberg-content .icel-protection-choice-track {
        margin-top: 34px;
      }

      .service-gutenberg-content .icel-protection-choice-track > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
        gap: clamp(20px, 3vw, 42px);
        align-items: stretch;
      }

      .service-gutenberg-content .icel-protection-choice-option {
        padding-top: 22px;
        border-top: 2px solid #0d3d7c;
      }

      .service-gutenberg-content .icel-protection-choice-option:nth-child(3) {
        border-top-color: #e3b631;
      }

      .service-gutenberg-content .icel-protection-option-kicker,
      .service-gutenberg-content .icel-protection-map-kicker {
        margin: 0;
        color: #2165bf;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .service-gutenberg-content .icel-protection-choice-option figure {
        height: 210px;
        margin: 18px 0 16px;
      }

      .service-gutenberg-content .icel-protection-choice-option img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .service-gutenberg-content .icel-protection-choice-option h3 {
        margin: 0 0 8px;
        font-size: clamp(20px, 1.9vw, 27px);
      }

      .service-gutenberg-content .icel-protection-choice-option p:last-child {
        margin: 0;
        color: rgba(18, 35, 66, 0.67);
        font-size: 14px;
        line-height: 1.65;
      }

      .service-gutenberg-content .icel-protection-choice-or {
        display: grid;
        place-items: center;
        align-self: center;
        width: 52px;
        height: 52px;
        margin: 0;
        border: 1px solid rgba(26, 85, 161, 0.2);
        border-radius: 50%;
        color: rgba(18, 35, 66, 0.55);
        font-size: 11px;
        font-weight: 700;
      }

      .service-gutenberg-content .icel-protection-signal {
        padding: clamp(36px, 5vw, 58px) 0;
        border-top: 1px solid rgba(174, 195, 224, 0.76);
        border-bottom: 1px solid rgba(174, 195, 224, 0.76);
      }

      .service-gutenberg-content .icel-protection-signal-track {
        position: relative;
        margin-top: 38px;
      }

      .service-gutenberg-content .icel-protection-signal-track::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 16px;
        right: 16px;
        height: 2px;
        background: linear-gradient(90deg, #e2b536, #2d75d4);
      }

      .service-gutenberg-content .icel-protection-signal-track > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 54px);
      }

      .service-gutenberg-content .icel-protection-signal-step {
        position: relative;
        padding-top: 58px;
      }

      .service-gutenberg-content .icel-protection-signal-number {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin: 0;
        border: 6px solid #f5f8fc;
        border-radius: 50%;
        background: #0f4e9c;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        z-index: 1;
      }

      .service-gutenberg-content .icel-protection-signal-step h3 {
        margin: 0 0 8px;
        font-size: 18px;
      }

      .service-gutenberg-content .icel-protection-signal-step p:last-child {
        margin: 0;
        color: rgba(18, 35, 66, 0.66);
        font-size: 13px;
        line-height: 1.62;
      }

      .service-gutenberg-content .icel-protection-map-grid {
        position: relative;
        margin-top: 38px;
      }

      .service-gutenberg-content .icel-protection-map-grid::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 50%;
        width: 1px;
        background: linear-gradient(180deg, transparent, #c4d5ec 8%, #c4d5ec 92%, transparent);
      }

      .service-gutenberg-content .icel-protection-map-grid > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(54px, 7vw, 90px);
        row-gap: 30px;
      }

      .service-gutenberg-content .icel-protection-map-item {
        position: relative;
        min-width: 0;
        padding: 18px 0;
      }

      .service-gutenberg-content .icel-protection-map-item::after {
        content: "";
        position: absolute;
        top: 39px;
        width: 9px;
        height: 9px;
        border: 3px solid #f5f8fc;
        border-radius: 50%;
        background: #e3b631;
        box-shadow: 0 0 0 1px #e3b631;
      }

      .service-gutenberg-content .icel-protection-map-item:nth-child(odd)::after {
        right: calc(clamp(54px, 7vw, 90px) / -2 - 5px);
      }

      .service-gutenberg-content .icel-protection-map-item:nth-child(even)::after {
        left: calc(clamp(54px, 7vw, 90px) / -2 - 5px);
        display: none;
      }

      .service-gutenberg-content .icel-protection-map-item > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 18px;
        align-items: center;
      }

      .service-gutenberg-content .icel-protection-map-item figure {
        width: 106px;
        height: 106px;
        margin: 0;
      }

      .service-gutenberg-content .icel-protection-map-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .service-gutenberg-content .icel-protection-map-copy h3 {
        margin: 5px 0 6px;
        font-size: clamp(18px, 1.5vw, 22px);
      }

      .service-gutenberg-content .icel-protection-map-copy p:last-child {
        margin: 0;
        color: rgba(18, 35, 66, 0.66);
        font-size: 13px;
        line-height: 1.58;
      }

      @media (max-width: 900px) {
        .service-gutenberg-content .icel-protection-stage > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content .icel-protection-stage-visual {
          max-width: 520px;
          margin: 0 auto -32px;
        }

        .service-gutenberg-content .icel-protection-choice-track > .wp-block-group__inner-container {
          grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
          gap: 18px;
        }

        .service-gutenberg-content .icel-protection-choice-or {
          width: 42px;
          height: 42px;
        }

        .service-gutenberg-content .icel-protection-map-item > .wp-block-group__inner-container {
          grid-template-columns: 82px minmax(0, 1fr);
        }

        .service-gutenberg-content .icel-protection-map-item figure {
          width: 82px;
          height: 82px;
        }
      }

      @media (max-width: 640px) {
        .service-gutenberg-content .icel-protection-model-v2,
        .service-gutenberg-content .icel-protection-choice,
        .service-gutenberg-content .icel-protection-signal,
        .service-gutenberg-content .icel-protection-map {
          margin-bottom: 60px;
        }

        .service-gutenberg-content .icel-protection-stage {
          min-height: 0;
          padding: 32px 24px;
          border-radius: 3px 34px 3px 34px;
        }

        .service-gutenberg-content .icel-protection-stage-visual {
          margin-bottom: -16px;
        }

        .service-gutenberg-content .icel-protection-choice-track > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content .icel-protection-choice-or {
          margin: -4px auto;
        }

        .service-gutenberg-content .icel-protection-choice-option figure {
          height: 180px;
        }

        .service-gutenberg-content .icel-protection-signal-track::before {
          top: 0;
          bottom: 0;
          left: 19px;
          right: auto;
          width: 2px;
          height: auto;
        }

        .service-gutenberg-content .icel-protection-signal-track > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .service-gutenberg-content .icel-protection-signal-step {
          padding: 0 0 0 60px;
        }

        .service-gutenberg-content .icel-protection-map-grid::before {
          left: 4px;
        }

        .service-gutenberg-content .icel-protection-map-grid > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 20px;
          padding-left: 25px;
        }

        .service-gutenberg-content .icel-protection-map-item:nth-child(n)::after {
          top: 39px;
          left: -25px;
          right: auto;
          display: block;
        }
      }

      .service-editorial-aside {
        position: sticky;
        top: 112px;
      }

      .service-appointment-card {
        display: block;
        padding: 30px;
        border: 1px solid rgba(210, 223, 241, 0.86);
        border-radius: 26px;
        background:
          radial-gradient(circle at 100% 0, rgba(73, 139, 228, 0.14), transparent 34%),
          #eef5ff;
        box-shadow: 0 20px 56px rgba(29, 52, 91, 0.09);
      }

      .service-appointment-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        margin: 0 0 20px;
        border-radius: 50%;
        background: #ffffff;
        color: #0d59bd;
        box-shadow: 0 10px 24px rgba(39, 85, 151, 0.12);
      }

      .service-appointment-icon i {
        font-size: 21px;
      }

      .service-appointment-label {
        margin: 0 0 8px;
        color: #2364b9;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .service-appointment-card h3 {
        margin: 0;
        color: #071a44;
        font-size: clamp(20px, 1.7vw, 25px);
        line-height: 1.2;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .service-appointment-card h3 + p {
        margin: 10px 0 0;
        color: rgba(20, 37, 68, 0.68);
        font-size: 13px;
        line-height: 1.58;
      }

      .service-appointment-card .service-overview-btn {
        width: 100%;
        margin: 22px 0 0;
      }

      .service-appointment-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 14px;
        color: #123d82;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
      }

      .service-test-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .service-editorial-tests {
        margin-top: clamp(34px, 5vw, 54px);
        padding-top: clamp(28px, 4vw, 40px);
        border-top: 1px solid rgba(210, 223, 241, 0.9);
      }

      .service-gutenberg-content .service-editorial-tests > h2 {
        margin: 0 0 22px;
      }

      .service-gutenberg-content .service-test-card h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.16;
      }

      .service-gutenberg-content .service-test-card p {
        margin: 8px 0 0;
        font-size: 13px;
        line-height: 1.55;
      }

      .service-test-card {
        min-height: 178px;
        padding: 20px;
        border: 1px solid rgba(216, 226, 240, 0.86);
        border-radius: 22px;
        background:
          radial-gradient(circle at 84% 12%, rgba(78, 143, 230, 0.1), transparent 28%),
          #ffffff;
        box-shadow: 0 18px 42px rgba(35, 55, 92, 0.08);
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .service-test-card:hover {
        transform: translateY(-2px);
        border-color: rgba(102, 157, 229, 0.52);
        box-shadow: 0 22px 50px rgba(35, 55, 92, 0.12);
      }

      .service-test-card > span {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
      }

      .service-test-card h3 {
        margin: 0;
        color: #10244c;
        font-size: 17px;
        line-height: 1.16;
        letter-spacing: 0;
      }

      .service-test-card p {
        margin: 8px 0 0;
        color: rgba(27, 45, 79, 0.66);
        font-size: 13px;
        line-height: 1.5;
      }

      .service-detail-page .hearing-steps {
        background: #ffffff;
      }

      .service-detail-page .services-showcase {
        padding-top: clamp(56px, 6vw, 82px);
      }

      .service-detail-page .hearing-steps-header h2 {
        font-size: clamp(28px, 2.5vw, 36px);
        line-height: 1.08;
      }

      .service-detail-page .hearing-steps-header > p:last-child {
        max-width: 600px;
        font-size: 14px;
        line-height: 1.58;
      }

      .service-detail-page .services-showcase-header h2 {
        font-size: clamp(28px, 2.7vw, 38px);
        line-height: 1.08;
      }

      .service-detail-page .services-showcase-header p {
        max-width: 760px;
        font-size: 14px;
        line-height: 1.5;
      }

      @media (max-width: 1100px) {
        .service-hero-layout,
        .service-overview-shell {
          grid-template-columns: 1fr;
        }

        .service-hero-copy {
          padding-bottom: 0;
        }

        .service-hero-visual {
          min-height: clamp(300px, 52vw, 460px);
        }

        .service-hero-image img {
          right: 50%;
          transform: translateX(50%);
          width: min(126%, 680px);
          height: 130%;
        }

        .service-highlight-strip {
          margin-top: 0;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .service-overview-copy {
          position: static;
        }

        .service-editorial-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: 52px;
        }
      }

      @media (max-width: 900px) {
        .service-editorial-layout {
          grid-template-columns: 1fr;
        }

        .service-editorial-aside {
          position: static;
        }

        .service-appointment-card {
          display: grid;
          grid-template-columns: auto minmax(0, 1fr) auto;
          gap: 8px 18px;
          align-items: center;
        }

        .service-appointment-icon {
          grid-row: 1 / 3;
          margin: 0;
        }

        .service-appointment-label,
        .service-appointment-card h3,
        .service-appointment-card h3 + p {
          grid-column: 2;
        }

        .service-appointment-card h3 + p {
          margin-top: 2px;
        }

        .service-appointment-card .service-overview-btn {
          grid-column: 3;
          grid-row: 1 / 3;
          width: auto;
          margin: 0;
        }

        .service-appointment-link {
          grid-column: 2 / 4;
          justify-content: flex-start;
          margin-top: 4px;
        }
      }

      @media (max-width: 720px) {
        .service-detail-shell,
        .service-overview-shell,
        .service-editorial-shell {
          width: min(calc(100% - (2 * var(--ds-gutter))), var(--ds-container));
        }

        .service-detail-hero {
          padding-top: 24px;
        }

        .service-breadcrumb {
          overflow-x: auto;
          padding-bottom: 2px;
          white-space: nowrap;
        }

        .service-hero-copy h1 {
          font-size: clamp(34px, 10vw, 44px);
        }

        .service-detail-lede {
          font-size: 14px;
          line-height: 1.52;
        }

        .service-hero-benefit {
          grid-template-columns: 38px minmax(0, 1fr);
          border-radius: 18px;
        }

        .service-hero-benefit > span {
          width: 38px;
          height: 38px;
        }

        .service-hero-actions {
          align-items: stretch;
          flex-direction: column;
          gap: 12px;
        }

        .service-primary-btn,
        .service-secondary-link,
        .service-overview-btn {
          width: 100%;
          justify-content: center;
        }

        .service-hero-visual {
          min-height: 320px;
        }

        .service-hero-image img {
          width: min(138%, 500px);
          height: 134%;
          object-position: center bottom;
        }

        .service-highlight-strip,
        .service-test-grid {
          grid-template-columns: 1fr;
        }

        .service-highlight-strip {
          border-radius: 18px;
        }

        .service-highlight-strip article {
          padding: 9px 8px;
          border-left: 0;
          border-top: 0;
        }

        .service-detail-overview {
          padding-top: 44px;
        }

        .service-test-card {
          min-height: 0;
          padding: 18px;
        }

        .service-editorial-header {
          margin-bottom: 24px;
        }

        .service-gutenberg-content {
          font-size: 16px;
          line-height: 1.7;
        }

        .service-gutenberg-content .wp-block-columns {
          gap: 12px;
        }

        .service-gutenberg-content .icel-service-product,
        .service-gutenberg-content .icel-service-card-grid {
          padding: 38px 0;
        }

        .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column,
        .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column:first-child,
        .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column:last-child {
          padding: 24px 0 0;
          border-top: 1px solid rgba(174, 195, 224, 0.72);
          border-left: 0;
        }

        .service-gutenberg-content .icel-service-card-grid > .wp-block-columns > .wp-block-column:first-child {
          padding-top: 0;
          border-top: 0;
        }

        .service-gutenberg-content .icel-service-product > .wp-block-columns,
        .service-gutenberg-content .icel-service-product > .wp-block-group__inner-container > .wp-block-columns,
        .service-gutenberg-content .icel-service-product--alternate > .wp-block-columns,
        .service-gutenberg-content .icel-service-product--alternate > .wp-block-group__inner-container > .wp-block-columns {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        .service-gutenberg-content .icel-service-product figure {
          min-height: 230px;
          padding: 8px;
        }

        .service-gutenberg-content .icel-service-story > h2 {
          display: block;
          margin-top: 42px;
        }

        .service-gutenberg-content .icel-service-story > h2::after {
          display: none;
        }

        .service-gutenberg-content .icel-service-method {
          padding: 20px 0;
        }

        .service-gutenberg-content .icel-service-method > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .service-gutenberg-content .icel-service-catalog-list > .wp-block-group__inner-container {
          grid-template-columns: 1fr;
        }

        .service-gutenberg-content .icel-service-catalog-item {
          padding: 18px 0;
        }

        .service-gutenberg-content .icel-service-catalog-item > .wp-block-group__inner-container {
          grid-template-columns: 88px minmax(0, 1fr);
          gap: 14px;
        }

        .service-gutenberg-content .icel-service-catalog-item figure {
          width: 88px;
          height: 78px;
          padding: 6px;
        }

        .service-gutenberg-content--sgk-ile-cihaz-alimi .icel-service-story ul {
          columns: auto;
        }

        .service-appointment-card {
          display: block;
          padding: 22px;
          border-radius: 22px;
        }

        .service-appointment-icon {
          margin-bottom: 18px;
        }

        .service-appointment-card h3 + p {
          margin-top: 10px;
        }

        .service-appointment-card .service-overview-btn {
          width: 100%;
          margin-top: 20px;
        }

        .service-appointment-link {
          justify-content: center;
          margin-top: 14px;
        }
      }

      .site-footer {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 42px 0 20px;
        border-radius: 0;
        background:
          radial-gradient(circle at 8% 24%, rgba(26, 100, 221, 0.14), transparent 28%),
          radial-gradient(circle at 84% 64%, rgba(19, 82, 190, 0.13), transparent 28%),
          linear-gradient(145deg, #03112f 0%, #061839 48%, #020d27 100%);
        color: #dce8fb;
      }

      .site-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(115deg, transparent 0 55%, rgba(58, 124, 230, 0.04) 55.2%, transparent 55.5%),
          radial-gradient(circle, rgba(70, 139, 242, 0.24) 1px, transparent 1.5px);
        background-size: auto, 24px 24px;
        mask-image: linear-gradient(90deg, transparent, #000 72%, transparent);
        opacity: 0.34;
        pointer-events: none;
      }

      .site-footer-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container-wide));
        margin: 0 auto;
      }

      .site-footer-main {
        display: grid;
        grid-template-columns: minmax(180px, 0.82fr) minmax(300px, 1.1fr) minmax(460px, 1.55fr);
        gap: clamp(24px, 3vw, 44px);
        align-items: stretch;
      }

      .site-footer-brand {
        padding-right: clamp(20px, 2.4vw, 34px);
        border-right: 1px solid rgba(104, 145, 207, 0.2);
      }

      .site-footer-logo {
        display: block;
        width: 142px;
        height: 70px;
      }

      .site-footer-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }

      .site-footer-brand > p {
        margin: 14px 0 0;
        color: rgba(231, 238, 250, 0.86);
        font-size: 13px;
        line-height: 1.55;
      }

      .site-footer-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
      }

      .site-footer-socials a {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid rgba(94, 143, 218, 0.3);
        border-radius: 10px;
        background: rgba(9, 32, 73, 0.54);
        color: #fff;
        font-size: 17px;
        text-decoration: none;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      }

      .site-footer-socials a:hover,
      .site-footer-socials a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(54, 145, 255, 0.86);
        background: rgba(20, 83, 181, 0.62);
      }

      .site-footer-nav {
        display: block;
      }

      .site-footer-links h2,
      .site-footer-branch h2 {
        margin: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.02em;
      }

      .site-footer-links ul {
        display: grid;
        gap: 14px;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
      }

      .site-footer-links--quick ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        column-gap: 30px;
      }

      .site-footer-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(224, 234, 249, 0.82);
        font-size: 13px;
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
      }

      .site-footer-links a i {
        width: 19px;
        color: #3299ff;
        font-size: 18px;
        text-align: center;
      }

      .site-footer-links a:hover,
      .site-footer-links a:focus-visible {
        color: #fff;
        transform: translateX(3px);
      }

      .site-footer-branches {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .site-footer-branch {
        display: flex;
        min-width: 0;
        flex-direction: column;
        padding: 19px;
        border: 1px solid rgba(91, 137, 207, 0.3);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(10, 35, 78, 0.72), rgba(4, 20, 52, 0.5));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .site-footer-branch header {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .site-footer-branch header > span {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        background: rgba(15, 83, 193, 0.48);
        color: #37a0ff;
        font-size: 17px;
      }

      .site-footer-branch address {
        min-height: 84px;
        margin-top: 18px;
        color: rgba(226, 235, 249, 0.84);
        font-size: 13px;
        font-style: normal;
        line-height: 1.55;
      }

      .site-footer-branch address a {
        color: inherit;
        text-decoration: none;
      }

      .site-footer-branch address a:hover,
      .site-footer-branch address a:focus-visible {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .site-footer-branch-contact {
        display: grid;
        gap: 10px;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid rgba(91, 137, 207, 0.22);
      }

      .site-footer-branch-contact a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(231, 239, 251, 0.88);
        font-size: 13px;
        text-decoration: none;
      }

      .site-footer-branch-contact a i {
        color: #329dff;
        font-size: 18px;
      }

      .site-footer-branch-contact a:hover,
      .site-footer-branch-contact a:focus-visible {
        color: #fff;
      }

      .site-footer-sitemap {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(18px, 2.4vw, 30px);
        margin-top: 34px;
        padding-top: 28px;
        border-top: 1px solid rgba(93, 137, 202, 0.24);
      }

      .site-footer-sitemap-group {
        min-width: 0;
      }

      .site-footer-sitemap-group h2 {
        margin: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
      }

      .site-footer-sitemap-group ul {
        display: grid;
        gap: 9px;
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
      }

      .site-footer-sitemap-group a {
        display: inline-flex;
        min-width: 0;
        color: rgba(224, 234, 249, 0.72);
        font-size: 12px;
        line-height: 1.32;
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
      }

      .site-footer-sitemap-group a:hover,
      .site-footer-sitemap-group a:focus-visible {
        color: #fff;
        transform: translateX(3px);
      }

      .site-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        margin-top: 28px;
        padding-top: 18px;
        border-top: 1px solid rgba(93, 137, 202, 0.24);
        color: rgba(216, 228, 246, 0.68);
        font-size: 11px;
      }

      .site-footer-bottom p {
        display: flex;
        align-items: center;
        margin: 0;
      }

      .site-footer-bottom-copy p a {
        color: inherit;
        text-decoration: none;
      }

      .site-footer-bottom-copy p a:hover,
      .site-footer-bottom-copy p a:focus-visible {
        color: #fff;
      }

      .site-footer-bottom-copy {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 12px;
      }

      .site-footer-bottom-logo {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        width: 72px;
        height: 24px;
      }

      .site-footer-bottom-logo__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }

      .site-footer-bottom nav {
        display: flex;
        align-items: center;
        gap: 18px;
      }

      .site-footer-bottom nav a {
        color: inherit;
        text-decoration: none;
      }

      .site-footer-bottom nav a + a {
        padding-left: 18px;
        border-left: 1px solid rgba(170, 196, 232, 0.3);
      }

      .site-footer-bottom nav a:hover,
      .site-footer-bottom nav a:focus-visible {
        color: #fff;
      }

      @media (max-width: 1180px) {
        .site-footer-main {
          grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
        }

        .site-footer-branches {
          grid-column: 1 / -1;
        }

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

        .site-footer-sitemap-group ul {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 720px) {
        .site-footer {
          padding: 34px 0 20px;
          border-radius: 0;
        }

        .site-footer-shell {
          width: min(100% - 32px, 1240px);
        }

        .site-footer-main,
        .site-footer-nav,
        .site-footer-branches {
          grid-template-columns: 1fr;
        }

        .site-footer-main {
          gap: 28px;
        }

        .site-footer-brand {
          padding: 0 0 24px;
          border-right: 0;
          border-bottom: 1px solid rgba(104, 145, 207, 0.2);
        }

        .site-footer-logo {
          width: 132px;
          height: 64px;
        }

        .site-footer-brand > p {
          margin-top: 14px;
          font-size: 13px;
        }

        .site-footer-socials {
          margin-top: 18px;
        }

        .site-footer-nav {
          gap: 26px;
        }

        .site-footer-links ul {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px 12px;
        }

        .site-footer-branch {
          padding: 18px;
        }

        .site-footer-branch address {
          min-height: 0;
        }

        .site-footer-sitemap {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 28px 18px;
          margin-top: 26px;
          padding-top: 24px;
        }

        .site-footer-sitemap-group ul {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .site-footer-bottom {
          align-items: flex-start;
          flex-direction: column;
          margin-top: 28px;
        }
      }

      @media (max-width: 480px) {
        .site-footer-sitemap-group ul {
          grid-template-columns: 1fr;
        }

        .site-footer-bottom {
          align-items: center;
          text-align: center;
        }

        .site-footer-bottom p {
          width: 100%;
          justify-content: center;
        }

        .site-footer-bottom-copy {
          justify-content: center;
          flex-wrap: wrap;
        }

        .site-footer-bottom nav {
          width: 100%;
          align-items: center;
          justify-content: center;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 14px;
        }

        .site-footer-bottom nav a + a {
          padding-left: 0;
          border-left: 0;
        }
      }

/* Hero CTA consistency: dynamic labels must not change the action layout. */
@media (min-width: 769px) {
  .hero-actions {
    flex-wrap: nowrap !important;
  }

  .hero-actions .hero-btn,
  .hero-actions .hero-link {
    flex: 0 0 auto;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
  }

  .hero-actions .hero-btn {
    min-width: 190px;
  }
}

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

      .partner-logos {
        position: relative;
        overflow: clip;
        padding: clamp(72px, 8vw, 112px) 0 clamp(86px, 8vw, 122px);
        background:
          radial-gradient(circle at 50% 12%, rgba(70, 132, 234, 0.24), transparent 26%),
          radial-gradient(circle at 16% 54%, rgba(33, 125, 255, 0.18), transparent 18%),
          radial-gradient(circle at 84% 54%, rgba(33, 125, 255, 0.18), transparent 17%),
          linear-gradient(180deg, #071734 0%, #0a2a58 58%, #f8f5ef 58%, #f8f5ef 100%);
      }

      .partner-logos::before {
        content: "";
        position: absolute;
        inset: auto -16% 33% -16%;
        height: 340px;
        background:
          radial-gradient(ellipse at center, rgba(27, 125, 255, 0.14), transparent 62%);
        pointer-events: none;
        filter: blur(10px);
      }

      .partner-logos::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 3.5%;
        width: 160%;
        height: 246px;
        border-top: 2px solid rgba(232, 190, 95, 0.88);
        border-radius: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.56);
      }

      .partner-logos-shell::before,
      .partner-logos-shell::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 0;
      }

      .partner-logos-shell::before {
        left: -6.8%;
        top: 106px;
        width: 316px;
        height: 404px;
        opacity: 0.84;
        background:
          radial-gradient(circle at 33% 45%, rgba(78, 164, 255, 0.24), transparent 34%),
          radial-gradient(circle at 34% 70%, rgba(58, 145, 255, 0.19), transparent 30%),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 404' fill='none'%3E%3Cg opacity='0.98'%3E%3Cpath d='M222.4 24.5c-46.6-14.2-99.7 7.6-129.9 46.5-31.4 40.6-39.7 95.5-30.8 149.5 9.1 55.5 36.7 112.7 72.5 147.7 26.7 26.1 60.5 40.9 80.2 27 18.7-13.2 18.4-44.7 2.7-73.2-16.9-30.6-26-63.7-18.8-96.5 7.5-34.3 34.1-55.8 48.2-91.9 11.1-28.5 4.2-75.8-54.1-109.1Z' stroke='%2378C8FF' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M200.8 59.6c-32.4-10.1-70.7 4.3-93.8 31.8-24.5 29.2-32.6 71.7-26.8 114.9 6.3 47.2 29.3 97 58.8 128.2 20.7 21.9 47.5 34 62.4 22.3 14.4-11.2 14.2-35.6 1.4-57-14.6-24.5-21.6-51.4-15.8-78.3 6-27.8 24-45.7 33.7-74.9 8-24.1 3.5-62.1-39.9-87Z' stroke='%238FD8FF' stroke-width='1.9' stroke-linecap='round' opacity='0.96'/%3E%3Cpath d='M182.8 94.8c-20.9-5.9-46.2 2.8-62.1 20.1-17.5 19.1-24.1 48.5-20.5 79.1 4.2 35 20.3 73.1 40.9 96.4 14.6 16.4 33.2 24.9 44 17.2 10.3-7.3 10.6-23.3 1.7-37.6-10-16.1-14-34.2-10.1-52.8 4.3-20 16.5-33.2 22.2-54.2 5.1-18.4 2.3-47-16.1-68.2Z' stroke='%23B8EAFF' stroke-width='1.4' stroke-linecap='round' opacity='0.94'/%3E%3Cpath d='M182.6 144.9c-10-1.8-22.6 2.7-30.7 10.8-9.6 9.7-13.8 25.2-11.6 41.4 2.7 19.2 11.9 40.7 24 54.7 8 9.3 18.2 14 24.7 10 6.6-4.1 7.2-14.3 1.8-24.9-5.9-11.6-8-24.9-5.1-38.3 2.8-13 10-21.8 13.7-35.2 4-14.7 1-35.1-16.8-52.1Z' stroke='%23E3F7FF' stroke-width='1.15' stroke-linecap='round' opacity='0.92'/%3E%3Cg fill='%2397E0FF' opacity='0.92'%3E%3Ccircle cx='113' cy='83' r='2.3'/%3E%3Ccircle cx='104' cy='110' r='2.2'/%3E%3Ccircle cx='92' cy='142' r='1.9'/%3E%3Ccircle cx='83' cy='181' r='1.8'/%3E%3Ccircle cx='88' cy='226' r='2.1'/%3E%3Ccircle cx='108' cy='271' r='2'/%3E%3Ccircle cx='130' cy='313' r='2.3'/%3E%3Ccircle cx='159' cy='346' r='2.1'/%3E%3Ccircle cx='141' cy='121' r='1.7'/%3E%3Ccircle cx='130' cy='163' r='1.7'/%3E%3Ccircle cx='132' cy='206' r='1.8'/%3E%3Ccircle cx='147' cy='249' r='1.7'/%3E%3Ccircle cx='170' cy='286' r='1.8'/%3E%3Ccircle cx='189' cy='150' r='1.6'/%3E%3Ccircle cx='200' cy='194' r='1.7'/%3E%3Ccircle cx='194' cy='235' r='1.7'/%3E%3Ccircle cx='223' cy='118' r='1.9'/%3E%3Ccircle cx='236' cy='160' r='1.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        filter: blur(0.2px) drop-shadow(0 0 20px rgba(66, 154, 255, 0.26));
      }

      .partner-logos-shell::after {
        right: -17%;
        top: 292px;
        width: 560px;
        height: 188px;
        opacity: 0.88;
        background:
          radial-gradient(ellipse at 76% 64%, rgba(96, 176, 255, 0.2), transparent 56%),
          linear-gradient(118deg, rgba(255, 255, 255, 0) 58%, rgba(255, 222, 157, 0.84) 68%, rgba(255, 255, 255, 0) 77%),
          repeating-radial-gradient(ellipse at 72% 120%, rgba(64, 154, 255, 0.48) 0 1px, transparent 2px 12px);
        border-radius: 50%;
        clip-path: inset(0 0 28% 26%);
        filter: drop-shadow(0 0 13px rgba(43, 129, 255, 0.18));
      }

      .partner-logos-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }

      .partner-logos-header {
        max-width: 1080px;
        margin: 0 auto clamp(34px, 3.8vw, 48px);
        color: #fff;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      .partner-logos-header h2 {
        margin: 0;
        display: grid;
        gap: 8px;
        font-size: clamp(42px, 5.15vw, 76px);
        line-height: 0.98;
        letter-spacing: -0.045em;
        text-wrap: balance;
      }

      .partner-logos-header h2 span,
      .partner-logos-header h2 strong {
        display: block;
      }

      .partner-logos-header h2 strong {
        font-weight: 800;
        background: linear-gradient(180deg, #ffd978 0%, #efc25d 48%, #da9f37 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .partner-logos-divider {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        margin: 24px 0 16px;
      }

      .partner-logos-divider span {
        width: clamp(68px, 10vw, 94px);
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(239, 194, 93, 0.12), rgba(239, 194, 93, 0.92), rgba(239, 194, 93, 0.12));
      }

      .partner-logos-divider i {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #efc25d;
        box-shadow: 0 0 0 6px rgba(239, 194, 93, 0.12);
      }

      .partner-logos-kicker {
        margin: 0;
        color: rgba(255, 255, 255, 0.94);
        font-size: clamp(18px, 1.95vw, 26px);
        font-weight: 700;
        letter-spacing: -0.02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }

      .partner-logos-kicker::before,
      .partner-logos-kicker::after {
        content: "";
        width: 28px;
        height: 26px;
        background:
          linear-gradient(#daaa49 0 0) left 3px bottom 5px / 3px 10px no-repeat,
          linear-gradient(#daaa49 0 0) left 10px center / 3px 18px no-repeat,
          linear-gradient(#daaa49 0 0) center center / 3px 26px no-repeat,
          linear-gradient(#daaa49 0 0) right 10px center / 3px 18px no-repeat,
          linear-gradient(#daaa49 0 0) right 3px bottom 5px / 3px 10px no-repeat;
        opacity: 0.95;
        filter: drop-shadow(0 0 6px rgba(218, 170, 73, 0.22));
      }

      .partner-logos .partner-logos-kicker {
        border-color: rgba(239, 194, 93, 0.34);
        background: rgba(239, 194, 93, 0.12);
        color: #f3c557;
      }

      .partner-logos-showcase {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: clamp(12px, 1.5vw, 20px);
        align-items: center;
        max-width: 1040px;
        margin: 18px auto 0;
        z-index: 1;
      }

      .partner-logo-card {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: clamp(202px, 15.8vw, 232px);
        padding: clamp(30px, 3.2vw, 44px);
        border: 1px solid rgba(232, 225, 214, 0.96);
        border-radius: clamp(32px, 3vw, 40px);
        background:
          radial-gradient(circle at 18% 18%, rgba(241, 222, 186, 0.28), transparent 24%),
          radial-gradient(circle at 84% 84%, rgba(226, 210, 184, 0.12), transparent 28%),
          linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
        box-shadow:
          0 22px 52px rgba(11, 24, 46, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.92);
        transform: translateY(-4px);
      }

      .partner-logo-wordmark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        position: relative;
        line-height: 1;
      }

      .partner-logos-badge {
        width: clamp(46px, 3.6vw, 56px);
        height: clamp(46px, 3.6vw, 56px);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: radial-gradient(circle at 50% 35%, #f7db90, #dfb455);
        box-shadow: 0 16px 26px rgba(7, 20, 40, 0.18);
        position: relative;
        z-index: 2;
      }

      .partner-logos-badge span {
        width: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
      }

      .partner-logos-badge span:nth-child(1),
      .partner-logos-badge span:nth-child(5) {
        height: 10px;
      }

      .partner-logos-badge span:nth-child(2),
      .partner-logos-badge span:nth-child(4) {
        height: 18px;
      }

      .partner-logos-badge span:nth-child(3) {
        height: 24px;
      }

      .partner-logo-wordmark-phonak {
        color: #232323;
        font-size: clamp(42px, 3.9vw, 60px);
        font-weight: 800;
        letter-spacing: 0.04em;
      }

      .partner-logo-phonak-text {
        position: relative;
      }

      .partner-logo-phonak-dot {
        position: absolute;
        left: 40%;
        top: 52%;
        width: clamp(14px, 1.12vw, 20px);
        height: clamp(14px, 1.12vw, 20px);
        border-radius: 50%;
        background: #7bbc2c;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 5px rgba(123, 188, 44, 0.16);
      }

      .partner-logo-wordmark-cochlear {
        gap: clamp(12px, 1.35vw, 17px);
        color: #14284a;
        font-size: clamp(32px, 3.15vw, 48px);
        font-weight: 700;
      }

      .partner-logo-cochlear-mark {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .partner-logo-cochlear-mark i {
        display: block;
        border: 4px solid #f3bc34;
        border-right: 0;
        border-radius: 999px 0 0 999px;
      }

      .partner-logo-cochlear-mark i:nth-child(1) {
        width: 20px;
        height: 48px;
      }

      .partner-logo-cochlear-mark i:nth-child(2) {
        width: 17px;
        height: 38px;
      }

      .partner-logo-cochlear-mark i:nth-child(3) {
        width: 14px;
        height: 30px;
      }

      .partner-logo-cochlear-text {
        letter-spacing: -0.045em;
      }

      @media (max-width: 1024px) {
        .partner-logos {
          padding-top: 58px;
        }

        .partner-logos::after {
          bottom: 6%;
          width: 168%;
          height: 212px;
        }

        .partner-logos-shell::before {
          left: -13%;
          top: 132px;
          width: 236px;
          height: 304px;
        }

        .partner-logos-shell::after {
          right: -24%;
          top: 306px;
          width: 300px;
          height: 124px;
        }

        .partner-logos-showcase {
          grid-template-columns: 1fr;
          gap: 18px;
          max-width: 680px;
        }

        .partner-logos-badge {
          margin: -10px auto;
        }

        .partner-logo-card {
          min-height: 224px;
        }
      }

      @media (max-width: 720px) {
        .partner-logos-header h2 {
          font-size: clamp(34px, 10vw, 54px);
        }

        .partner-logos-kicker {
          font-size: 18px;
        }
      }

      @media (max-width: 640px) {
        .partner-logos {
          padding: 54px 0 44px;
          background:
            radial-gradient(circle at 50% 10%, rgba(51, 118, 224, 0.16), transparent 30%),
            linear-gradient(180deg, #081a39 0%, #0c2a57 48%, #f7f4ef 48%, #f7f4ef 100%);
        }

        .partner-logos::before {
          inset: auto -16% 40% -16%;
          height: 180px;
        }

        .partner-logos::after {
          bottom: 22%;
          width: 148%;
          height: 132px;
        }

        .partner-logos-shell::before,
        .partner-logos-shell::after {
          display: none;
        }

        .partner-logos-header {
          margin-bottom: 28px;
        }

        .partner-logos-divider {
          margin: 16px 0 12px;
        }

        .partner-logos-divider span {
          width: 52px;
        }

        .partner-logos-kicker {
          font-size: 16px;
        }

        .partner-logo-card {
          min-height: 166px;
          padding: 30px 20px;
          border-radius: 28px;
        }

        .partner-logo-wordmark-phonak {
          font-size: clamp(28px, 8.4vw, 40px);
        }

        .partner-logo-wordmark-cochlear {
          gap: 10px;
          font-size: clamp(24px, 7.4vw, 34px);
        }

        .partner-logo-cochlear-mark i {
          border-width: 4px;
        }

        .partner-logo-cochlear-mark i:nth-child(1) {
          width: 18px;
          height: 42px;
        }

        .partner-logo-cochlear-mark i:nth-child(2) {
          width: 14px;
          height: 32px;
        }

        .partner-logo-cochlear-mark i:nth-child(3) {
          width: 11px;
          height: 24px;
        }
      }

      .partner-logos {
        min-height: clamp(650px, 56vw, 810px);
        padding: clamp(96px, 7.8vw, 132px) 0 clamp(118px, 9vw, 160px);
        border-radius: clamp(18px, 1.8vw, 28px);
        background:
          radial-gradient(circle at 50% 16%, rgba(58, 118, 211, 0.28), transparent 25%),
          radial-gradient(circle at 15% 48%, rgba(27, 138, 255, 0.2), transparent 20%),
          radial-gradient(circle at 86% 54%, rgba(28, 142, 255, 0.22), transparent 24%),
          linear-gradient(180deg, #03122b 0%, #071d42 66%, #fbf8f2 66%, #fbf8f2 100%);
      }

      .partner-logos::before {
        inset: auto -12% 23% -12%;
        height: clamp(210px, 18vw, 285px);
        background:
          radial-gradient(ellipse at 14% 62%, rgba(34, 145, 255, 0.22), transparent 28%),
          radial-gradient(ellipse at 86% 62%, rgba(34, 145, 255, 0.2), transparent 30%),
          repeating-radial-gradient(ellipse at 20% 112%, rgba(68, 166, 255, 0.42) 0 1px, transparent 2px 13px),
          repeating-radial-gradient(ellipse at 84% 116%, rgba(68, 166, 255, 0.42) 0 1px, transparent 2px 13px);
        opacity: 0.78;
        filter: drop-shadow(0 0 18px rgba(40, 137, 255, 0.2));
      }

      .partner-logos::after {
        bottom: 4%;
        width: 162%;
        height: clamp(230px, 21vw, 300px);
        background: #fbf8f2;
        box-shadow: 0 -18px 44px rgba(255, 243, 216, 0.28);
      }

      .partner-logos-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), 1220px);
      }

      .partner-logos-shell::before {
        left: -4.8%;
        top: clamp(105px, 9.8vw, 150px);
        width: clamp(210px, 19vw, 300px);
        height: clamp(280px, 25vw, 390px);
        opacity: 0.9;
        filter: blur(0.1px) drop-shadow(0 0 24px rgba(65, 163, 255, 0.36));
      }

      .partner-logos-shell::after {
        right: -16%;
        top: clamp(265px, 27vw, 365px);
        width: clamp(360px, 42vw, 620px);
        height: clamp(132px, 15vw, 206px);
        opacity: 0.9;
      }

      .partner-logos-header {
        max-width: 1100px;
        margin-bottom: clamp(42px, 4.2vw, 62px);
      }

      .partner-logos-header h2 {
        gap: clamp(8px, 1vw, 14px);
        font-size: clamp(58px, 6.25vw, 100px);
        line-height: 0.93;
        letter-spacing: -0.06em;
      }

      .partner-logos-header h2 span {
        font-weight: 800;
      }

      .partner-logos-header h2 strong {
        font-weight: 900;
      }

      .partner-logos-divider {
        margin: clamp(26px, 2.6vw, 38px) 0 clamp(24px, 2.3vw, 34px);
        gap: 14px;
      }

      .partner-logos-divider span {
        width: clamp(70px, 7vw, 96px);
        height: 1px;
      }

      .partner-logos-divider b {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #efc25d;
        box-shadow: 0 0 0 7px rgba(239, 194, 93, 0.16);
      }

      .partner-logos-divider i {
        display: none;
      }

      .partner-logos-kicker {
        gap: 28px;
        font-size: clamp(24px, 2.25vw, 34px);
        font-weight: 700;
      }

      .partner-logos-showcase {
        grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
        gap: clamp(24px, 2.4vw, 36px);
        max-width: 990px;
        margin-top: clamp(26px, 3vw, 44px);
      }

      .partner-logo-card {
        min-height: clamp(192px, 16vw, 244px);
        padding: clamp(34px, 3.2vw, 48px);
        border-color: rgba(235, 222, 197, 0.98);
        border-radius: clamp(34px, 3vw, 44px);
        box-shadow:
          0 24px 54px rgba(8, 20, 40, 0.13),
          0 0 0 1px rgba(255, 255, 255, 0.55) inset;
        transform: none;
      }

      .partner-logo-card-phonak {
        justify-content: center;
      }

      .partner-logo-card-cochlear {
        justify-content: center;
      }

      .partner-logos-badge {
        width: clamp(52px, 4.4vw, 66px);
        height: clamp(52px, 4.4vw, 66px);
        justify-self: center;
        margin: 0 calc(clamp(26px, 2.8vw, 42px) * -1);
        background:
          radial-gradient(circle at 48% 31%, #fff2b9 0 16%, #f2c45d 48%, #d9a239 100%);
        box-shadow:
          0 18px 30px rgba(7, 20, 40, 0.2),
          0 0 0 6px rgba(251, 248, 242, 0.9);
      }

      .partner-logo-wordmark-phonak {
        font-size: clamp(50px, 4.85vw, 76px);
        letter-spacing: 0.025em;
      }

      .partner-logo-phonak-dot {
        left: 40.2%;
        top: 52%;
        width: clamp(18px, 1.55vw, 25px);
        height: clamp(18px, 1.55vw, 25px);
      }

      .partner-logo-wordmark-cochlear {
        gap: clamp(14px, 1.5vw, 22px);
        font-size: clamp(40px, 3.8vw, 60px);
      }

      .partner-logo-cochlear-mark span {
        display: block;
        border: clamp(4px, 0.42vw, 6px) solid #f2b92d;
        border-right: 0;
        border-radius: 999px 0 0 999px;
      }

      .partner-logo-cochlear-mark span:nth-child(1) {
        width: clamp(24px, 2.2vw, 34px);
        height: clamp(58px, 4.9vw, 78px);
      }

      .partner-logo-cochlear-mark span:nth-child(2) {
        width: clamp(20px, 1.8vw, 28px);
        height: clamp(46px, 4vw, 62px);
      }

      .partner-logo-cochlear-mark span:nth-child(3) {
        width: clamp(16px, 1.45vw, 22px);
        height: clamp(35px, 3.1vw, 48px);
      }

      @media (max-width: 1024px) {
        .partner-logos {
          min-height: auto;
          padding-top: 72px;
          padding-bottom: 92px;
        }

        .partner-logos-showcase {
          grid-template-columns: 1fr;
          max-width: 680px;
          gap: 18px;
        }

        .partner-logos-badge {
          margin: -8px auto;
        }
      }

      @media (max-width: 640px) {
        .partner-logos {
          padding: 58px 0 58px;
          border-radius: 20px;
          background:
            radial-gradient(circle at 50% 10%, rgba(51, 118, 224, 0.18), transparent 30%),
            linear-gradient(180deg, #061733 0%, #0b2855 52%, #fbf8f2 52%, #fbf8f2 100%);
        }

        .partner-logos::after {
          bottom: 28%;
          width: 150%;
          height: 140px;
        }

        .partner-logos-header h2 {
          font-size: clamp(38px, 11vw, 58px);
        }

        .partner-logos-kicker {
          gap: 16px;
          font-size: 18px;
        }

        .partner-logo-card {
          min-height: 158px;
          padding: 28px 18px;
        }

        .partner-logo-wordmark-phonak {
          font-size: clamp(33px, 10vw, 46px);
        }

        .partner-logo-wordmark-cochlear {
          font-size: clamp(28px, 8vw, 38px);
        }
      }

      .partner-logos {
        min-height: clamp(430px, 40vw, 560px);
        padding: clamp(58px, 5.6vw, 82px) 0 clamp(72px, 6vw, 96px);
        scroll-margin-top: 92px;
        border-radius: 0;
        background: linear-gradient(180deg, #04142f 0%, #071d42 63%, #fbf8f2 63%, #fbf8f2 100%);
      }

      .partner-logos::before {
        content: none;
      }

      .partner-logos::after {
        bottom: 2%;
        width: 150%;
        height: clamp(140px, 14vw, 190px);
        background: #fbf8f2;
        box-shadow: 0 -1px 0 rgba(232, 190, 95, 0.58);
      }

      .partner-logos-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), 980px);
      }

      .partner-logos-shell::before,
      .partner-logos-shell::after {
        content: none;
      }

      .partner-logos-header {
        max-width: 820px;
        margin-bottom: clamp(24px, 2.8vw, 36px);
      }

      .partner-logos-header h2 {
        gap: clamp(5px, 0.7vw, 9px);
        font-size: clamp(38px, 4.4vw, 66px);
        line-height: 0.98;
        letter-spacing: -0.052em;
      }

      .partner-logos-header h2 span {
        background: linear-gradient(100deg, #ffffff 0%, #ffffff 27%, #8fd8ff 42%, #ffffff 54%, #ffffff 100%);
        background-size: 180% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: partner-title-shimmer 2.4s linear infinite;
      }

      .partner-logos-header h2 strong {
        background: linear-gradient(100deg, #efbc4d 0%, #efbc4d 25%, #fff5c9 42%, #ffffff 48%, #d99b2c 60%, #efbc4d 100%);
        background-size: 180% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: partner-title-shimmer 2.4s linear infinite reverse;
      }

      @keyframes partner-title-shimmer {
        0% {
          background-position: 0% 50%;
        }

        100% {
          background-position: 180% 50%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .partner-logos-header h2 span,
        .partner-logos-header h2 strong {
          animation: none;
        }
      }

      .partner-logos-divider {
        margin: clamp(16px, 1.7vw, 24px) 0 clamp(14px, 1.4vw, 20px);
        gap: 12px;
      }

      .partner-logos-divider span {
        width: clamp(48px, 5vw, 70px);
      }

      .partner-logos-divider b {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 5px rgba(239, 194, 93, 0.14);
      }

      .partner-logos-kicker {
        gap: 0;
        font-size: clamp(18px, 1.65vw, 24px);
      }

      .partner-logos-kicker::before,
      .partner-logos-kicker::after {
        content: none;
      }

      .partner-logos-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 2.4vw, 34px);
        max-width: 760px;
        margin-top: clamp(18px, 2vw, 28px);
      }

      .partner-logo-card {
        min-height: clamp(132px, 12vw, 166px);
        padding: clamp(24px, 2.5vw, 34px);
        border-radius: clamp(24px, 2.3vw, 34px);
        box-shadow:
          0 18px 42px rgba(8, 20, 40, 0.11),
          0 0 0 1px rgba(255, 255, 255, 0.55) inset;
      }

      .partner-logos-badge {
        display: none;
      }

      .partner-logo-image {
        display: block;
        width: 100%;
        height: 76px;
        object-fit: contain;
        object-position: center;
      }

      .partner-logo-image-phonak {
        max-width: 220px;
      }

      .partner-logo-image-cochlear {
        max-width: 252px;
      }

      .partner-logo-wordmark-phonak {
        font-size: clamp(34px, 3.45vw, 50px);
      }

      .partner-logo-phonak-dot {
        width: clamp(14px, 1.15vw, 18px);
        height: clamp(14px, 1.15vw, 18px);
      }

      .partner-logo-wordmark-cochlear {
        gap: clamp(10px, 1.15vw, 16px);
        font-size: clamp(30px, 2.95vw, 44px);
      }

      .partner-logo-cochlear-mark span {
        border-width: clamp(3px, 0.32vw, 5px);
      }

      .partner-logo-cochlear-mark span:nth-child(1) {
        width: clamp(19px, 1.8vw, 28px);
        height: clamp(45px, 4vw, 62px);
      }

      .partner-logo-cochlear-mark span:nth-child(2) {
        width: clamp(16px, 1.45vw, 23px);
        height: clamp(36px, 3.25vw, 50px);
      }

      .partner-logo-cochlear-mark span:nth-child(3) {
        width: clamp(13px, 1.15vw, 18px);
        height: clamp(28px, 2.55vw, 39px);
      }

      @media (max-width: 1024px) {
        .partner-logos {
          padding-top: 58px;
          padding-bottom: 76px;
        }

        .partner-logos-showcase {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          max-width: 720px;
        }
      }

      @media (max-width: 640px) {
        .partner-logos {
          min-height: auto;
          padding: 46px 0 54px;
          border-radius: 0;
          background: linear-gradient(180deg, #04142f 0%, #071d42 58%, #fbf8f2 58%, #fbf8f2 100%);
        }

        .partner-logos::after {
          bottom: 19%;
          height: 100px;
        }

        .partner-logos-header h2 {
          font-size: clamp(34px, 10vw, 48px);
        }

        .partner-logos-showcase {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          max-width: 380px;
          gap: 10px;
        }

        .partner-logo-card {
          min-height: 96px;
          padding: 14px 12px;
          border-radius: 18px;
        }

        .partner-logo-image {
          height: 48px;
        }
      }

      .hearing-steps {
        --steps-navy: #13284c;
        --steps-accent: #f0b61f;
        min-height: 300svh;
        padding: 0;
        background:
          radial-gradient(circle at 12% 36%, rgba(245, 201, 79, 0.1), transparent 24%),
          linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
        overflow: clip;
      }

      .hearing-steps-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        margin: 0 auto;
        min-height: 100svh;
        padding: clamp(36px, 6vh, 70px) 0;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .hearing-steps-header {
        max-width: 1080px;
        margin: 0 auto clamp(22px, 3vh, 34px);
        text-align: center;
      }

      .hearing-steps-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        margin: 0 0 14px;
        padding: 4px 16px;
        border: 1px solid rgba(240, 182, 31, 0.35);
        border-radius: 999px;
        color: rgba(19, 40, 76, 0.72);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hearing-steps-kicker span {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border-radius: 50%;
        background: rgba(245, 201, 79, 0.42);
        color: var(--steps-navy);
      }

      .hearing-steps-header h2 {
        margin: 0;
        color: var(--steps-navy);
        font-size: var(--ui-title-section);
        line-height: 1.03;
        letter-spacing: -0.055em;
      }

      .hearing-steps-header > p:last-child {
        max-width: 650px;
        margin: 12px auto 0;
        color: rgba(19, 40, 76, 0.68);
        font-size: var(--ui-text-md);
        line-height: 1.65;
      }

      .hearing-steps-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(4px, 0.7vw, 10px);
        align-items: start;
      }

      .hearing-steps-media {
        --media-frame: 10px;
        position: relative;
        isolation: isolate;
        align-self: start;
        justify-self: end;
        width: min(100%, 96%);
        min-height: 0;
        height: auto;
        aspect-ratio: 1.14 / 1;
        overflow: visible;
        perspective: 900px;
        perspective-origin: left center;
      }

      .hearing-steps-media-plane {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        padding: var(--media-frame);
        border: 1px solid rgba(211, 220, 233, 0.82);
        border-radius: 46px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow:
          0 22px 52px rgba(38, 55, 83, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
        transform: rotateY(8deg);
        transform-origin: left center;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }

      .hearing-steps-media-plane::after {
        content: "";
        position: absolute;
        inset: var(--media-frame);
        z-index: 6;
        border: 1px solid rgba(198, 210, 226, 0.72);
        border-radius: 36px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
        pointer-events: none;
      }

      .hearing-steps-atmosphere {
        position: absolute;
        inset: var(--media-frame);
        z-index: 0;
        overflow: hidden;
        border-radius: 36px;
        background:
          radial-gradient(circle at 78% 68%, rgba(221, 231, 248, 0.6), transparent 35%),
          radial-gradient(circle at 20% 82%, rgba(250, 211, 116, 0.28), transparent 34%),
          radial-gradient(circle at 48% 8%, rgba(255, 255, 255, 0.98), transparent 34%),
          linear-gradient(145deg, #eef4fc 0%, #ffffff 47%, #faf3e5 100%);
      }

      .hearing-steps-atmosphere::after {
        content: "";
        position: absolute;
        right: 5%;
        bottom: 13%;
        width: 25%;
        aspect-ratio: 1;
        opacity: 0.25;
        background-image: radial-gradient(circle, rgba(103, 143, 204, 0.38) 2px, transparent 2.5px);
        background-size: 15px 15px;
        mask-image: radial-gradient(circle, #000 0 52%, transparent 76%);
      }

      .hearing-steps-wave {
        position: absolute;
        inset: 6% -10% auto;
        width: 120%;
        height: 72%;
        color: rgba(104, 151, 224, 0.16);
      }

      .hearing-steps-wave path {
        stroke-width: 1.4;
      }

      .hearing-step-image {
        position: absolute;
        inset: var(--media-frame);
        z-index: 1;
        overflow: hidden;
        border-radius: 36px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px) scale(0.985);
        transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hearing-step-image.is-active {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .hearing-step-image img {
        position: absolute;
        display: block;
        width: auto;
        max-width: none;
        max-height: none;
        object-fit: contain;
      }

      .hearing-step-image[data-step-image="0"] img {
        left: -18%;
        bottom: -2%;
        height: 104%;
      }

      .hearing-step-image[data-step-image="1"] img {
        left: -3%;
        bottom: -2%;
        height: 104%;
      }

      .hearing-step-image[data-step-image="2"] img {
        left: -10%;
        bottom: -2%;
        height: 103%;
      }

      .hearing-steps-benefits {
        position: absolute;
        left: calc(var(--media-frame) + 18px);
        top: 58%;
        z-index: 7;
        display: grid;
        gap: 10px;
        transform: translateY(-50%);
      }

      .hearing-steps-benefits span {
        display: grid;
        width: clamp(64px, 11.5%, 80px);
        aspect-ratio: 0.88 / 1;
        min-height: 0;
        place-items: center;
        align-content: center;
        gap: 7px;
        padding: 9px 6px;
        border: 1px solid rgba(255, 255, 255, 0.84);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.66);
        color: var(--steps-navy);
        text-align: center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(14px);
      }

      .hearing-steps-benefits i {
        font-size: 24px;
      }

      .hearing-steps-benefits small {
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
      }

      .hearing-steps-media-badge {
        position: absolute;
        left: auto;
        top: auto;
        right: calc(var(--media-frame) + 18px);
        bottom: calc(var(--media-frame) + 18px);
        z-index: 8;
        display: flex;
        align-items: center;
        gap: 12px;
        width: min(42%, 260px);
        min-width: 0;
        padding: 11px 14px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
        color: var(--steps-navy);
        box-shadow:
          0 18px 34px rgba(19, 40, 76, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(16px);
        transform: translateZ(34px);
        transform-style: preserve-3d;
      }

      .hearing-steps-media-badge > i {
        flex: 0 0 auto;
        font-size: 25px;
      }

      .hearing-steps-media-badge span {
        display: grid;
        gap: 2px;
        font-size: 12px;
      }

      .hearing-steps-media-badge strong {
        white-space: nowrap;
        font-size: 12px;
      }

      .hearing-steps-content {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        transform: translateX(-2px);
      }

      .hearing-step-list {
        display: grid;
        gap: 0;
      }

      .hearing-step-chapter {
        display: flex;
        min-height: clamp(158px, 18svh, 180px);
        align-items: center;
        scroll-margin-top: 20vh;
      }

      .hearing-step-item {
        position: relative;
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr) 54px;
        gap: 18px;
        align-items: center;
        width: 100%;
        min-height: 132px;
        padding: 16px 20px;
        border: 1px solid rgba(19, 40, 76, 0.11);
        border-radius: var(--ui-radius-card);
        background: rgba(255, 255, 255, 0.68);
        color: var(--steps-navy);
        text-align: left;
        cursor: pointer;
        opacity: 0.42;
        box-shadow: 0 10px 28px rgba(19, 40, 76, 0.04);
        transition: opacity 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
        --step-offset: 201.1;
      }

      .hearing-step-item:hover,
      .hearing-step-item:focus-visible {
        opacity: 0.72;
        border-color: rgba(240, 182, 31, 0.5);
        outline: none;
      }

      .hearing-step-item.is-active {
        opacity: 1;
        transform: translateX(-6px);
        border-color: rgba(240, 182, 31, 0.28);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 38px rgba(19, 40, 76, 0.09);
      }

      .hearing-step-progress {
        position: relative;
        display: grid;
        width: 76px;
        height: 76px;
        place-items: center;
        color: var(--steps-accent);
        font-size: 34px;
        font-weight: 700;
      }

      .hearing-step-progress svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }

      .hearing-step-progress circle {
        fill: none;
        stroke-width: 2;
      }

      .hearing-step-track {
        stroke: rgba(240, 182, 31, 0.18);
      }

      .hearing-step-ring {
        stroke: var(--steps-accent);
        stroke-linecap: round;
        stroke-dasharray: 201.1;
        stroke-dashoffset: var(--step-offset);
        transition: stroke-dashoffset 0.08s linear;
      }

      .hearing-step-item.is-active .hearing-step-ring {
        animation: none;
      }

      .hearing-step-copy {
        position: relative;
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .hearing-step-copy::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 2px;
        bottom: 2px;
        border-left: 1px dashed rgba(240, 182, 31, 0.5);
      }

      .hearing-step-copy strong {
        font-size: 19px;
        line-height: 1.3;
        letter-spacing: -0.025em;
      }

      .hearing-step-copy > span {
        display: block;
        max-height: 0;
        overflow: hidden;
        color: rgba(19, 40, 76, 0.66);
        font-size: 14px;
        line-height: 1.55;
        opacity: 0;
        transform: translateY(5px);
        transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease;
      }

      .hearing-step-item.is-active .hearing-step-copy > span {
        max-height: 84px;
        opacity: 1;
        transform: translateY(0);
      }

      .hearing-step-icon {
        display: block;
        width: 34px;
        height: 34px;
        justify-self: center;
        color: currentColor;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
      }

	  img.hearing-step-icon--custom {
		object-fit: contain;
		object-position: center;
	  }

      .hearing-steps-actions {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        gap: 14px;
        margin-top: 0;
        padding-top: 12px;
      }

      .hearing-steps-actions a {
        display: inline-flex;
        min-height: var(--ui-control-lg);
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: var(--ui-radius-control);
        color: var(--steps-navy);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      }

      .hearing-steps-actions a i {
        display: inline-grid;
        place-items: center;
        will-change: transform;
      }

      .hearing-steps-primary:hover i {
        transform-origin: 50% 60%;
        animation: hearing-steps-phone-ring 1.6s ease-in-out infinite;
      }

      .hearing-steps-secondary:hover i {
        animation: hearing-steps-arrow-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      }

      @keyframes hearing-steps-phone-ring {
        0%, 8%, 100% { transform: translateX(0) rotate(0); }
        14% { transform: translateX(-1px) rotate(-14deg); }
        20% { transform: translateX(1px) rotate(12deg); }
        26% { transform: translateX(-1px) rotate(-10deg); }
        32% { transform: translateX(1px) rotate(7deg); }
        40% { transform: translateX(0) rotate(0); }
      }

      @keyframes hearing-steps-arrow-sweep {
        0%, 8% { transform: translateX(0); opacity: 1; }
        24% { transform: translateX(9px); opacity: 0; }
        25% { transform: translateX(-9px); opacity: 0; }
        42%, 100% { transform: translateX(0); opacity: 1; }
      }

      .hearing-steps-primary {
        border: 1px solid rgba(204, 148, 24, 0.7);
        background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
        box-shadow:
          0 8px 18px rgba(192, 140, 24, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          inset 0 -1px 0 rgba(204, 148, 24, 0.16);
      }

      .hearing-steps-secondary {
        border: 1px solid rgba(19, 40, 76, 0.12);
        background: rgba(255, 255, 255, 0.8);
      }

      @media (min-width: 821px) and (max-height: 940px) {
        .hearing-steps-shell {
          min-height: 100svh;
          padding: clamp(22px, 3.2vh, 34px) 0;
          box-sizing: border-box;
        }

        .hearing-steps-header {
          margin-bottom: clamp(14px, 2vh, 20px);
        }

        .hearing-steps-kicker {
          min-height: 32px;
          margin-bottom: 10px;
          padding: 3px 14px;
        }

        .hearing-steps-header h2 {
          font-size: clamp(34px, 4.2vw, 52px);
          letter-spacing: -0.045em;
        }

        .hearing-steps-header > p:last-child {
          margin-top: 8px;
          font-size: var(--ui-text-md);
          line-height: 1.45;
        }

        .hearing-steps-layout {
          align-items: center;
        }

        .hearing-steps-media {
          width: min(100%, 88%);
        }

        .hearing-step-chapter {
          min-height: clamp(112px, 14svh, 132px);
        }

        .hearing-step-item {
          min-height: 96px;
          padding: 12px 16px;
        }

        .hearing-steps-actions {
          padding-top: 10px;
        }
      }

      @media (max-width: 1050px) {
        .hearing-steps-shell {
          width: min(100% - 48px, 960px);
        }

        .hearing-steps-layout {
          grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
          gap: 6px;
          align-items: stretch;
        }

        .hearing-steps-content {
          transform: translateX(-4px);
          justify-content: space-between;
        }

        .hearing-steps-media {
          --media-frame: 8px;
          width: min(100%, 92%);
          aspect-ratio: 1.16 / 1;
        }

        .hearing-steps-media-plane,
        .hearing-steps-atmosphere {
          border-radius: 36px;
        }

        .hearing-steps-media-plane {
          transform: rotateY(5deg);
        }

        .hearing-steps-media-plane::after,
        .hearing-step-image {
          border-radius: 28px;
        }

        .hearing-steps-benefits {
          gap: 8px;
          left: calc(var(--media-frame) + 14px);
        }

        .hearing-steps-benefits span {
          width: 54px;
          border-radius: 14px;
        }

        .hearing-steps-benefits i {
          font-size: 20px;
        }

        .hearing-steps-benefits small {
          font-size: 9px;
        }

        .hearing-steps-media-badge {
          left: auto;
          top: auto;
          right: calc(var(--media-frame) + 14px);
          bottom: calc(var(--media-frame) + 14px);
          width: min(44%, 230px);
          min-width: 0;
          gap: 10px;
          padding: 10px 12px;
          border-radius: 18px;
        }

        .hearing-steps-media-badge > i {
          font-size: 23px;
        }

        .hearing-steps-media-badge strong {
          font-size: 11px;
        }

        .hearing-steps-media-badge span {
          font-size: 10px;
        }

        .hearing-step-item {
          grid-template-columns: 54px minmax(0, 1fr) 38px;
          min-height: 96px;
          gap: 10px;
          padding: 12px 14px;
        }

        .hearing-step-progress {
          width: 52px;
          height: 52px;
        }

        .hearing-step-chapter {
          min-height: clamp(112px, 12.5svh, 128px);
        }
      }

      @media (max-width: 820px) {
        .hearing-steps {
          min-height: auto;
          padding: 54px 0 62px;
          overflow: hidden;
        }

        .hearing-steps-shell {
          width: min(100% - 32px, 680px);
          min-height: auto;
          padding: 0;
          position: relative;
          top: 0;
          justify-content: flex-start;
        }

        .hearing-steps-header {
          margin-bottom: 28px;
          text-align: center;
        }

        .hearing-steps-kicker {
          margin-inline: auto;
        }

        .hearing-steps-header h2 {
          font-size: clamp(31px, 8vw, 44px);
        }

        .hearing-steps-header > p:last-child {
          margin-inline: auto;
          font-size: 14px;
        }

        .hearing-steps-layout {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .hearing-steps-media {
          z-index: 4;
          min-height: 0;
          width: 100%;
          height: auto;
          aspect-ratio: 1.2 / 1;
        }

        .hearing-steps-media-plane,
        .hearing-steps-atmosphere {
          border-radius: 32px;
        }

        .hearing-steps-media-plane {
          --media-frame: 8px;
          transform: rotateY(5deg);
        }

        .hearing-steps-media-plane::after,
        .hearing-step-image {
          border-radius: 24px;
        }

        .hearing-step-image[data-step-image="0"] img {
          left: -18%;
          width: auto;
          height: 104%;
        }

        .hearing-step-image[data-step-image="1"] img {
          left: -4%;
          width: auto;
          height: 104%;
        }

        .hearing-step-image[data-step-image="2"] img {
          left: -11%;
          width: auto;
          height: 103%;
        }

        .hearing-steps-benefits {
          left: calc(var(--media-frame) + 12px);
          gap: 7px;
        }

        .hearing-steps-benefits span {
          width: 64px;
          min-height: 68px;
          border-radius: 14px;
        }

        .hearing-steps-media-badge {
          left: auto;
          top: auto;
          right: calc(var(--media-frame) + 12px);
          bottom: calc(var(--media-frame) + 12px);
          width: min(44%, 230px);
          min-width: 0;
          padding: 11px 14px;
          border-radius: 20px;
        }

        .hearing-steps-media-badge > i {
          font-size: 25px;
        }

        .hearing-steps-media-badge strong {
          font-size: 12px;
        }

        .hearing-steps-media-badge span {
          font-size: 11px;
        }

        .hearing-step-item.is-active {
          transform: none;
        }

        .hearing-step-list {
          display: flex;
          width: calc(100% + 16px);
          margin-right: -16px;
          padding: 2px 16px 14px 0;
          gap: 12px;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-padding-inline: 0 16px;
          overscroll-behavior-inline: contain;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          touch-action: pan-x;
        }

        .hearing-step-list::-webkit-scrollbar {
          display: none;
        }

        .hearing-step-chapter {
          flex: 0 0 min(78vw, 390px);
          min-height: auto;
          align-items: flex-start;
          padding-top: 0;
          scroll-margin-top: 18px;
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .hearing-step-item {
          height: 100%;
          min-height: 132px;
          opacity: 1;
        }

        .hearing-steps-content {
          position: relative;
          z-index: 2;
          transform: none;
        }
      }

      @media (max-width: 520px) {
        .hearing-steps {
          min-height: auto;
          padding: 44px 0 50px;
        }

        .hearing-steps-shell {
          width: calc(100% - 28px);
          padding: 24px 0;
        }

        .hearing-steps-header h2 {
          font-size: 32px;
        }

        .hearing-steps-media {
          height: auto;
          min-height: 0;
          aspect-ratio: 1.24 / 1;
        }

        .hearing-steps-media-plane {
          --media-frame: 7px;
          border-radius: 28px;
          transform: rotateY(3deg);
        }

        .hearing-steps-media-plane::after,
        .hearing-steps-atmosphere,
        .hearing-step-image {
          border-radius: 21px;
        }

        .hearing-steps-media-badge {
          left: auto;
          top: auto;
          right: 14px;
          bottom: 14px;
          width: min(70%, 260px);
          min-width: 0;
          padding: 10px 12px;
          border-radius: 16px;
        }

        .hearing-steps-media-badge > i {
          font-size: 22px;
        }

        .hearing-steps-media-badge strong {
          font-size: 11px;
        }

        .hearing-steps-media-badge span {
          font-size: 10px;
        }

        .hearing-steps-benefits {
          display: none;
        }

        .hearing-step-item {
          grid-template-columns: 54px minmax(0, 1fr);
          min-height: 128px;
          gap: 10px;
          padding: 12px;
          border-radius: 17px;
        }

        .hearing-step-list {
          width: calc(100% + 14px);
          margin-right: -14px;
          padding-right: 14px;
          scroll-padding-right: 14px;
        }

        .hearing-step-chapter {
          flex-basis: min(82vw, 340px);
        }

        .hearing-step-progress {
          width: 52px;
          height: 52px;
          font-size: 22px;
        }

        .hearing-step-icon {
          display: none;
        }

        .hearing-step-copy strong {
          font-size: 15px;
        }

        .hearing-step-copy::before {
          left: -7px;
        }

        .hearing-step-chapter {
          min-height: auto;
          padding-top: 6px;
        }

        .hearing-step-copy > span {
          font-size: 12px;
          line-height: 1.45;
        }

        .hearing-step-item.is-active .hearing-step-copy > span {
          max-height: 110px;
        }

        .hearing-steps-actions {
          grid-template-columns: 1fr;
        }

        .hearing-steps-actions a {
          min-height: 52px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hearing-step-image,
        .hearing-step-item,
        .hearing-step-copy > span,
        .hearing-steps-actions a,
        .hearing-steps-actions a i {
          transition: none;
          animation: none;
        }

        .hearing-step-item.is-active .hearing-step-ring {
          animation: none;
        }

        .hearing-steps-media {
          position: relative;
          top: auto;
        }

        .hearing-step-chapter {
          min-height: auto;
          margin-bottom: 16px;
        }

        .hearing-step-copy > span,
        .hearing-step-item.is-active .hearing-step-copy > span {
          max-height: none;
          opacity: 1;
          transform: none;
        }
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: #ffffff;
        font-family: var(--ds-font-family);
        color: var(--text);
      }

      body {
        padding-top: 0;
      }

      body.menu-locked {
        overflow: hidden;
      }

      .page {
        width: 100%;
      }

      .header-shell {
        position: relative;
        z-index: 250;
        width: 100%;
        background: var(--bg);
        border-top: 0;
        overflow: visible;
      }

      .announcement-bar {
        position: relative;
        z-index: 1;
        width: 100%;
        overflow: hidden;
        color: #fff;
        background:
          radial-gradient(circle at 16% 50%, rgba(58, 169, 255, 0.18) 0, rgba(58, 169, 255, 0.08) 10%, rgba(58, 169, 255, 0) 24%),
          radial-gradient(circle at 50% 112%, rgba(18, 111, 255, 0.12) 0, rgba(18, 111, 255, 0.04) 19%, rgba(18, 111, 255, 0) 42%),
          linear-gradient(90deg, #050d1a 0%, #08152e 48%, #06101f 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          inset 0 -1px 0 rgba(255, 255, 255, 0.06);
      }

      .announcement-bar::before,
      .announcement-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .announcement-bar::before {
        background:
          radial-gradient(circle at 18% 48%, rgba(74, 205, 255, 0.12) 0, rgba(74, 205, 255, 0.06) 7%, rgba(74, 205, 255, 0) 18%),
          radial-gradient(circle at 52% 108%, rgba(20, 140, 255, 0.1) 0, rgba(20, 140, 255, 0.05) 18%, rgba(20, 140, 255, 0) 34%);
        mix-blend-mode: screen;
        opacity: 0.55;
      }

      .announcement-bar::after {
        background:
          linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 16%, transparent 32%, transparent 66%, rgba(255, 255, 255, 0.03) 84%, transparent 100%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.02));
        opacity: 0.24;
      }

      .announcement-inner {
        width: 100%;
        max-width: none;
        min-height: 48px;
        margin: 0 auto;
        padding: 6px var(--ui-gutter);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 1;
      }

      .announcement-visual {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
      }

      .announcement-visual i {
        display: block;
        font-size: 22px;
        line-height: 1;
        filter:
          drop-shadow(0 0 10px rgba(59, 167, 255, 0.32))
          drop-shadow(0 8px 16px rgba(8, 17, 34, 0.26));
      }

      .announcement-test-icon {
        width: 30px;
        height: 30px;
        display: block;
        color: #fff;
        filter:
          drop-shadow(0 0 10px rgba(59, 167, 255, 0.32))
          drop-shadow(0 8px 16px rgba(8, 17, 34, 0.26));
      }

      .announcement-test-icon path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .announcement-text {
        margin: 0;
        font-size: var(--ui-text-sm);
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.01em;
        text-shadow: 0 1px 10px rgba(22, 150, 255, 0.08);
      }

      .announcement-accent {
        color: #ffcb0f;
        font-size: 1.02em;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-shadow: 0 0 10px rgba(119, 204, 255, 0.12);
      }

      .announcement-text,
      .announcement-actions {
        position: relative;
        z-index: 1;
      }

      .announcement-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .announcement-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        min-height: var(--ds-control-sm);
        height: var(--ds-control-sm);
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(170, 221, 255, 0.34);
        background:
          linear-gradient(180deg, rgba(93, 159, 255, 0.22), rgba(24, 57, 131, 0.1)),
          rgba(255, 255, 255, 0.06);
        color: #fff;
        text-decoration: none;
        font-size: var(--ui-text-xs);
        font-weight: 500;
        letter-spacing: -0.01em;
        transition:
          background 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease;
        white-space: nowrap;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.05),
          0 12px 22px rgba(2, 11, 28, 0.28);
        backdrop-filter: blur(10px) saturate(1.15);
        gap: 8px;
      }

      .announcement-btn-icon {
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #c7e6ff;
        filter: drop-shadow(0 0 8px rgba(95, 181, 255, 0.25));
        flex: 0 0 16px;
      }

      .announcement-btn-icon i {
        display: block;
        font-size: 16px;
        line-height: 1;
      }

      .announcement-btn-text {
        display: inline-flex;
        align-items: center;
      }

      .announcement-btn:hover,
      .announcement-btn:focus-visible {
        background:
          linear-gradient(180deg, rgba(112, 184, 255, 0.28), rgba(31, 68, 154, 0.18)),
          rgba(255, 255, 255, 0.1);
        border-color: rgba(184, 230, 255, 0.58);
      }

      .header-shell.nav-open {
        z-index: 300;
      }

      .header {
        position: relative;
        top: 0;
        z-index: 250;
        width: 100%;
        max-width: none;
        height: 88px;
        margin: 0 auto;
        padding: 0 var(--ui-gutter);
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 20px;
        background: var(--bg);
        border-bottom: 0;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
      }

.header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Keep the header divider behind every open navigation layer. */
.header > .brand,
.header > .header-actions {
  position: relative;
  z-index: 1;
}

      .header-shell.is-scrolled .header {
        position: fixed;
        left: 0;
        right: 0;
        max-width: none;
        padding-left: max(var(--ui-gutter), calc((100% - var(--ui-container-wide)) / 2 + var(--ui-gutter)));
        padding-right: max(var(--ui-gutter), calc((100% - var(--ui-container-wide)) / 2 + var(--ui-gutter)));
      }

      .brand {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 108px;
        height: 48px;
        text-decoration: none;
      }

      .brand-mark {
        position: relative;
        width: 100px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .brand-mark img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      .nav {
        position: relative;
        justify-self: end;
        display: flex;
        align-items: center;
        z-index: 100;
      }

      .nav-main {
        display: flex;
        align-items: center;
        gap: 32px;
        white-space: nowrap;
        padding-right: 26px;
        transform: none;
      }

      .header-actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .menu-toggle {
        display: none;
        position: relative;
        cursor: pointer;
        user-select: none;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: #0b1020;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        transition: transform 0.2s ease;
      }

      .menu-toggle:hover {
        background: transparent;
      }

      .menu-toggle-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }

      .checkmark {
        position: relative;
        top: 0;
        left: 0;
        height: 24px;
        width: 24px;
      }

      .checkmark span {
        width: 24px;
        height: 2px;
        background-color: currentColor;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s ease-in-out;
        border-radius: 999px;
      }

      .checkmark span:nth-child(1) {
        top: 4px;
      }

      .checkmark span:nth-child(2) {
        top: 11px;
        transform: translateX(-50%);
      }

      .checkmark span:nth-child(3) {
        top: 18px;
      }

      .menu-toggle-input:checked + .checkmark span:nth-child(1) {
        top: 11px;
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .menu-toggle-input:checked + .checkmark span:nth-child(2) {
        top: 11px;
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      .menu-toggle-input:checked + .checkmark span:nth-child(3) {
        transform: translateX(calc(-50% - 50px));
        opacity: 0;
      }

      .nav-item {
        position: relative;
        display: flex;
        align-items: center;
      }

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

      .nav-link {
        color: var(--nav);
        text-decoration: none;
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: -0.02em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s ease;
        cursor: pointer;
        background: transparent;
        border: 0;
        padding: 0;
        font-family: inherit;
        appearance: none;
      }

      .nav-link:hover,
      .nav-item:focus-within > .nav-link {
        color: #000;
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        position: relative;
        color: #071a36;
        font-weight: 700;
      }

      .nav-link.is-active::after,
      .nav-link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -12px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, #f2b42f, #f8d768);
        box-shadow: 0 6px 14px rgba(242, 180, 47, 0.24);
      }

      .nav-item.dropdown.is-open > .nav-link .chevron {
        transform: translateY(1px) rotate(180deg);
      }

      .chevron {
        width: 14px;
        height: 14px;
        display: inline-block;
        transform: translateY(1px);
      }

      .chevron i {
        display: block;
        font-size: 14px;
        line-height: 1;
      }

      .mega-menu {
        position: absolute;
        top: calc(100% + 18px);
        left: 50%;
        width: min(760px, calc(100vw - 48px));
        padding: 26px 20px 26px 28px;
        border-radius: var(--ui-radius-card);
        background: #fff;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
        border: 1px solid rgba(15, 23, 42, 0.06);
        max-height: min(680px, calc(100svh - 142px));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(10px);
        pointer-events: none;
        z-index: 1000;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      }

      .mega-menu::-webkit-scrollbar {
        width: 10px;
      }

      .mega-menu::-webkit-scrollbar-track {
        background: rgba(7, 26, 60, 0.06);
        border-radius: 999px;
      }

      .mega-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(7, 26, 60, 0.34);
        border: 2px solid rgba(255, 255, 255, 0.78);
      }

      .mega-menu {
        scrollbar-color: rgba(7, 26, 60, 0.34) rgba(7, 26, 60, 0.06);
        scrollbar-width: thin;
      }

      .mobile-panel-back {
        display: none;
      }

      .cta.mobile-nav-cta {
        display: none;
      }

      .mobile-branches {
        display: none;
      }

      .services-menu {
        width: min(540px, calc(100vw - 48px));
      }

      .services-menu::before {
        left: 64px;
      }

      .nav-item.dropdown.is-open .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }

      .services-dropdown.is-open .services-menu {
        transform: translateX(-50%) translateY(0);
      }

      .mega-menu::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 18px;
        height: 18px;
        background: #fff;
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        border-left: 1px solid rgba(15, 23, 42, 0.06);
        border-top: 1px solid rgba(15, 23, 42, 0.06);
      }

      .mega-title {
        font-size: 20px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: #121826;
        margin: 0 0 20px;
      }

      .mega-divider {
        height: 1px;
        background: #eef1f5;
        margin-bottom: 22px;
      }

      .mega-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 54px;
      }

      .mega-links {
        display: grid;
        gap: 26px;
        align-content: start;
      }

      .mega-links a {
        font-size: 16px;
        line-height: 1.25;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #121826;
        text-decoration: none;
        transition: color 0.18s ease, transform 0.18s ease;
      }

      .mega-links a:hover {
        color: #000;
        transform: translateX(2px);
      }

      .devices-menu {
        width: min(760px, calc(100vw - 48px));
      }

      @media (min-width: 1025px) and (min-height: 700px) {
        .devices-menu {
          overflow-y: hidden;
        }
      }

      .guide-dropdown .mega-menu {
        left: 50%;
        right: auto;
        width: min(980px, calc(100vw - 48px));
        transform: translateX(-50%) translateY(10px);
      }

      .guide-dropdown .mega-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 18px 34px;
      }

      .guide-dropdown .mega-grid > .mega-links {
        grid-column: span 6;
      }

      .guide-dropdown .mega-cards {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        margin-top: 8px;
      }

      .guide-dropdown.is-open .mega-menu,
      .guide-dropdown:focus-within .mega-menu {
        transform: translateX(-50%) translateY(0);
      }

      .devices-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 54px;
        align-items: start;
      }

      .devices-column {
        display: grid;
        gap: 18px;
        align-content: start;
      }

      .devices-column a,
      .devices-group-title {
        color: #121826;
        font-size: 16px;
        line-height: 1.25;
        font-weight: 500;
        letter-spacing: -0.02em;
        text-decoration: none;
      }

      .devices-column a {
        transition: color 0.18s ease, transform 0.18s ease;
      }

      .devices-column a:hover {
        color: #000;
        transform: translateX(2px);
      }

      .devices-group {
        display: grid;
        gap: 14px;
      }

      .devices-sublist {
        display: grid;
        gap: 12px;
        padding-left: 18px;
        border-left: 1px solid #e8ebf0;
      }

      .devices-sublist a {
        color: rgba(18, 24, 38, 0.78);
        font-size: 15px;
      }

      .devices-promo {
        position: relative;
        min-height: 242px;
        border-radius: 24px;
        overflow: hidden;
        background-color: #eef2f7;
        background-image: var(--icel-v2-devices-promo-image, url("../images/hearing-trial-promo.png"));
        background-position: 68% center;
        background-size: cover;
        background-repeat: no-repeat;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 14px 30px rgba(15, 38, 73, 0.12);
      }

      .devices-promo-body {
        position: relative;
        z-index: 1;
        width: 48%;
        height: 100%;
        padding: 20px 12px 18px 20px;
        color: #071a3c;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
      }

      .devices-promo-badge {
        width: fit-content;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        background: #f0bf41;
        color: #071a3c;
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .devices-promo-title {
        font-size: 25px;
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0;
        max-width: 12ch;
      }

      .devices-promo-line {
        display: block;
        width: 40px;
        height: 3px;
        margin: 0;
        border-radius: 999px;
        background: #d4a72c;
      }

      .services-promo-line {
        display: block;
        width: 40px;
        height: 3px;
        margin: 0;
        border-radius: 999px;
        background: #d4a72c;
      }

      .devices-promo-copy {
        color: #1c2230;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        max-width: 27ch;
      }

      .devices-promo-btn {
        width: fit-content;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 13px;
        background: #071a3c;
        border: 1px solid rgba(212, 167, 44, 0.72);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 10px 20px rgba(7, 26, 60, 0.22);
      }

      .devices-promo-btn i {
        display: block;
        color: #f5c94f;
        font-size: 20px;
        line-height: 1;
      }

      .implant-menu {
        width: min(900px, calc(100vw - 48px));
      }

      .implant-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
        gap: 22px;
        align-items: stretch;
      }

      .implant-left {
        padding-right: 16px;
      }

      .implant-links {
        display: grid;
        gap: 18px;
        align-content: start;
      }

      .implant-links a {
        font-size: 16px;
        line-height: 1.25;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #121826;
        text-decoration: none;
        transition: color 0.18s ease, transform 0.18s ease;
      }

      .implant-links a:hover {
        color: #000;
        transform: translateX(2px);
      }

      .implant-visual {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        min-height: 400px;
        isolation: isolate;
        background-color: #eef1f5;
        background-image: var(--icel-v2-implant-promo-image, url("../images/bg_koklear.png"));
        background-position: right top;
        background-size: cover;
        background-repeat: no-repeat;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.58),
          0 14px 30px rgba(15, 23, 42, 0.12);
      }

      .implant-visual-label {
        position: absolute;
        left: 18px;
        right: 16px;
        bottom: 17px;
        z-index: 1;
        color: #071a3c;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .implant-visual-title {
        margin: 0;
        max-width: 12ch;
        font-family: inherit;
        font-size: 25px;
        line-height: 0.98;
        font-weight: 700;
        letter-spacing: -0.04em;
      }

      .implant-visual-line {
        display: block;
        width: 40px;
        height: 3px;
        margin: 0;
        border-radius: 999px;
        background: #d4a72c;
      }

      .implant-visual-copy {
        display: block;
        width: 100%;
        max-width: 27ch;
        margin: 0;
        color: #1c2230;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        white-space: normal;
        overflow-wrap: break-word;
      }

      .implant-visual-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        width: fit-content;
        gap: 14px;
        min-height: 42px;
        margin-top: 0;
        padding: 0 18px;
        border: 1px solid rgba(212, 167, 44, 0.72);
        border-radius: 13px;
        background: #071a3c;
        color: #fff;
        box-shadow: 0 10px 20px rgba(7, 26, 60, 0.22);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color 0.24s ease, box-shadow 0.24s ease;
      }

      .implant-visual-cta i {
        display: block;
        flex: 0 0 auto;
        color: #f5c94f;
        font-size: 20px;
        line-height: 1;
        transform: translateX(0);
        transition: transform 0.28s ease;
      }

      .implant-visual-cta:hover,
      .implant-visual-cta:focus-visible {
        border-color: rgba(245, 201, 79, 0.9);
        box-shadow: 0 14px 24px rgba(7, 26, 60, 0.3);
      }

      .implant-visual-cta:hover i,
      .implant-visual-cta:focus-visible i {
        transform: translateX(3px);
      }

      .mega-cards {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 8px;
      }

      .mega-card {
        position: relative;
        min-height: 190px;
        border-radius: 24px;
        overflow: hidden;
        isolation: isolate;
        color: #071a3c;
        text-decoration: none;
        background: #eef2f7;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 14px 30px rgba(15, 38, 73, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .mega-card:hover,
      .mega-card:focus-visible {
        transform: translateY(-2px);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.88),
          0 18px 34px rgba(15, 38, 73, 0.15);
      }

      .mega-card:focus-visible {
        outline: 3px solid rgba(245, 201, 79, 0.48);
        outline-offset: 3px;
      }

      .mega-card::before,
      .mega-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .mega-card::before {
        background:
          linear-gradient(90deg, rgba(246, 249, 253, 0.98) 0%, rgba(246, 249, 253, 0.9) 48%, rgba(246, 249, 253, 0.48) 72%, rgba(246, 249, 253, 0) 100%);
        z-index: 1;
      }

      .mega-card::after {
        z-index: 0;
        background: var(--mega-card-bg) center / cover no-repeat;
        transform: scale(1.01);
        transition: transform 0.28s ease;
      }

      .mega-card:hover::after,
      .mega-card:focus-visible::after {
        transform: scale(1.035);
      }

      .guide-card--children {
        --mega-card-bg: url("../images/bgcocuk.png");
      }

      .guide-card--children::before {
        background:
          linear-gradient(90deg, rgba(246, 249, 253, 0) 0%, rgba(246, 249, 253, 0.32) 32%, rgba(246, 249, 253, 0.92) 50%, rgba(246, 249, 253, 0.98) 100%);
      }

      .guide-card--children::after {
        background-position: left center;
      }

      .guide-card--blog {
        --mega-card-bg: url("../images/bgblog.png");
      }

      .guide-card--blog::after {
        background-position: center;
      }

      .mega-card-content {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        height: 100%;
        width: min(60%, 330px);
        min-height: 190px;
        padding: 24px 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        color: #071a3c;
      }

      .mega-card-content > * {
        max-width: 100%;
        min-width: 0;
      }

      .guide-card--children .mega-card-content {
        margin-left: auto;
        width: min(58%, 320px);
        padding-left: 16px;
      }

      .mega-card-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(7, 26, 60, 0.08);
        color: rgba(7, 26, 60, 0.78);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
      }

      .mega-card-kicker i {
        color: #d4a72c;
        font-size: 15px;
        line-height: 1;
      }

      .mega-card-title {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: 25px;
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: -0.035em;
        margin: 0;
        color: #071a3c;
        text-wrap: balance;
        overflow-wrap: anywhere;
      }

      .mega-card-line {
        display: block;
        width: 40px;
        height: 3px;
        margin: 0;
        border-radius: 999px;
        background: #d4a72c;
      }

      .mega-card-copy {
        display: block;
        max-width: 27ch;
        color: #1c2230;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        text-wrap: pretty;
      }

      .mega-card-link {
        width: fit-content;
        min-height: 42px;
        padding: 0 16px;
        border: 1px solid #071a3c;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.5);
        color: #071a3c;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }

      .mega-card-link i {
        display: block;
        font-size: 20px;
        line-height: 1;
      }

      .services-menu {
        padding: 26px 28px 26px;
      }

      .services-top {
        padding: 0 0 14px;
      }

      .services-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 18px;
      }

      .service-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: #121826;
        text-decoration: none;
        font-size: 16px;
        line-height: 1.15;
        font-weight: 500;
        letter-spacing: -0.02em;
        transition: transform 0.18s ease, color 0.18s ease;
      }

      .service-link:hover {
        color: #000;
        transform: translateX(2px);
      }

      .service-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px;
        border-radius: 7px;
        color: #fff;
        background: #12335d;
        box-sizing: border-box;
      }

      .service-icon i {
        display: block;
        font-size: 16px;
        line-height: 1;
      }

      .service-icon .service-art {
        width: 22px;
        height: 22px;
        display: block;
        object-fit: contain;
      }

      .service-icon .service-art--theme {
        overflow: hidden;
      }

      .services-promo {
        position: relative;
        display: block;
        min-height: 210px;
        border-radius: 24px;
        overflow: hidden;
        text-decoration: none;
        background:
          radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.96), transparent 31%),
          linear-gradient(135deg, #dce4f0 0%, #f9fafc 52%, #d7e0ed 100%);
        margin-top: 14px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 14px 30px rgba(15, 38, 73, 0.12);
      }

      .services-promo::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          repeating-radial-gradient(ellipse at 78% 88%, transparent 0 12px, rgba(255, 255, 255, 0.76) 13px 14px, transparent 15px 22px);
        transform: rotate(-4deg) scale(1.18);
        opacity: 0.72;
        pointer-events: none;
      }

      .services-promo::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 49%;
        right: 8px;
        width: 49%;
        height: 92%;
        background-image: var(--icel-v2-promo-image, url("../images/tvconnector.avif"));
        background-position: right center;
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateY(-50%);
        filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.22));
        pointer-events: none;
      }

      .services-promo-body {
        position: relative;
        z-index: 2;
        width: 62%;
        height: 100%;
        padding: 28px 14px 22px 22px;
        color: #071a3c;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
      }

      .services-kicker {
        font-size: 15px;
        line-height: 1.1;
        letter-spacing: -0.03em;
        opacity: 0.92;
      }

      .services-title,
      .devices-promo-title,
      .implant-visual-title {
        font-size: 25px;
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: -0.04em;
        font-family: inherit;
        margin: 0;
      }

      .services-copy,
      .devices-promo-copy,
      .implant-visual-copy {
        margin: 0;
        color: #1c2230;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        font-family: inherit;
        max-width: 27ch;
      }

      .services-cta {
        width: fit-content;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border-radius: 13px;
        padding: 0 16px;
        border: 1px solid #071a3c;
        color: #071a3c;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.48);
      }

      .services-cta i {
        display: block;
        font-size: 20px;
        line-height: 1;
      }

      /* All mega-menu card actions share one control geometry and icon rhythm. */
      .mega-menu .mega-menu-action {
        box-sizing: border-box;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 13px;
        gap: 12px;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .mega-menu .mega-menu-action i {
        display: block;
        flex: 0 0 auto;
        font-size: 20px;
        line-height: 1;
        transform: translateX(0);
        transition: transform 0.28s ease;
      }

      .mega-menu .mega-menu-action:hover i,
      .mega-menu .mega-menu-action:focus-visible i {
        transform: translateX(3px);
      }

      /* Keep mega-menu card shells fixed; only the CTA arrow should move. */
      .mega-menu a.services-promo,
      .mega-menu a.devices-promo,
      .mega-menu .implant-visual,
      .mega-menu .mega-card,
      .mega-menu a.services-promo:hover,
      .mega-menu a.devices-promo:hover,
      .mega-menu .implant-visual:hover,
      .mega-menu .mega-card:hover,
      .mega-menu a.services-promo:focus-visible,
      .mega-menu a.devices-promo:focus-visible,
      .mega-menu .implant-visual:focus-visible,
      .mega-menu .mega-card:focus-visible {
        transform: none;
      }

      .mega-menu .mega-card:hover::after,
      .mega-menu .mega-card:focus-visible::after {
        transform: scale(1.01);
      }

      .cta {
        justify-self: end;
        display: inline-flex;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 190px;
        height: var(--ui-control-md);
        padding: 0 22px;
        border: 0;
        border-radius: var(--ui-radius-control);
        background: linear-gradient(180deg, #0d1324 0%, #090e1b 100%);
        color: #fff;
        font-family: inherit;
        font-size: var(--ui-text-sm);
        font-weight: 600;
        letter-spacing: -0.03em;
        text-decoration: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          0 10px 20px rgba(11, 16, 32, 0.16);
        cursor: pointer;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
      }

      .cta::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: calc(var(--ui-radius-control) - 1px);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.08) 0%,
          rgba(255, 255, 255, 0.02) 38%,
          rgba(255, 255, 255, 0) 70%
        );
        opacity: 0.7;
        pointer-events: none;
        animation: none;
        z-index: 1;
      }

      .cta::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: calc(var(--ui-radius-control) - 1px);
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.32) 0%,
          rgba(218, 229, 255, 0.18) 30%,
          rgba(151, 181, 241, 0.07) 52%,
          rgba(255, 255, 255, 0) 74%
        );
        background-repeat: no-repeat;
        background-size: 78px 78px;
        background-position: 0% 0%;
        filter: blur(2px);
        opacity: 0.82;
        pointer-events: none;
        will-change: background-position;
        animation: icel-cta-inner-glow 8s linear infinite;
        z-index: 1;
      }

      .cta > * {
        position: relative;
        z-index: 2;
      }

      .cta i {
        font-size: 18px;
        line-height: 1;
        flex: 0 0 auto;
        opacity: 0.92;
      }

      .cta span,
      .cta i {
        color: #fff;
        background: none;
        -webkit-text-fill-color: currentColor;
        animation: none;
      }

      .cta span {
        opacity: 1;
      }

      .header-shell .cta.is-active span,
      .header-shell .cta.is-active i {
        color: #fff;
        opacity: 1;
      }

      .cta:hover {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 12px 24px rgba(11, 16, 32, 0.2);
      }

      .cta:hover::before {
        opacity: 1;
      }

      .cta:hover::after {
        background-image: radial-gradient(
          circle,
          rgba(21, 112, 214, 0.82) 0%,
          rgba(7, 74, 157, 0.54) 32%,
          rgba(3, 43, 102, 0.22) 55%,
          rgba(3, 37, 86, 0) 76%
        );
        opacity: 1;
      }

      .cta:hover span,
      .cta:hover i {
        opacity: 1;
      }

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

      .cta.mobile-nav-cta {
        display: none;
      }

      @keyframes icel-cta-background-sweep {
        0%, 14% {
          transform: translate3d(0, 0, 0);
        }

        86%, 100% {
          transform: translate3d(340%, 0, 0);
        }
      }

      @keyframes icel-cta-inner-glow {
        0%, 100% {
          background-position: 0% 0%;
        }

        39% {
          background-position: 100% 0%;
        }

        50% {
          background-position: 100% 100%;
        }

        89% {
          background-position: 0% 100%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .cta::before,
        .cta::after {
          animation: none;
        }

        .header-shell .cta.is-active span,
        .header-shell .cta.is-active i {
          color: #fff;
        }
      }

      .hero-slider {
        position: relative;
        overflow: clip;
        background:
          radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.96), transparent 28%),
          radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.7), transparent 22%),
          radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.54), transparent 22%),
          linear-gradient(180deg, #faf7f1 0%, #f6f1e8 100%);
      }

      .hero-slider::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 50% 56%, rgba(173, 141, 84, 0.1), transparent 34%),
          radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
          radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.7) 0 32%, transparent 33%),
          radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.5) 0 46%, transparent 47%),
          linear-gradient(115deg, transparent 0 24%, rgba(255, 255, 255, 0.22) 24% 24.4%, transparent 24.4% 100%),
          linear-gradient(332deg, transparent 0 40%, rgba(255, 255, 255, 0.22) 40% 40.4%, transparent 40.4% 100%);
        opacity: 0.9;
        pointer-events: none;
      }

      .hero-slider-inner {
        position: relative;
        max-width: 1512px;
        margin: 0 auto;
        padding: 20px 40px 28px;
      }

      .hero-slider-frame {
        position: relative;
        min-height: 660px;
      }

      .hero-controls {
        position: absolute;
        top: 8px;
        left: 10px;
        z-index: 3;
        display: flex;
        gap: 10px;
      }

      .hero-control {
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.8);
        color: #121826;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 10px 28px rgba(31, 34, 44, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: transform 0.18s ease, background 0.18s ease;
      }

      .hero-control:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.94);
      }

      .hero-control i {
        display: block;
        font-size: 22px;
        line-height: 1;
      }

      .hero-stage {
        position: relative;
        min-height: 660px;
      }

      .hero-slide {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 0.98fr) minmax(260px, 0.7fr);
        grid-template-rows: auto auto;
        align-items: center;
        gap: 26px;
        opacity: 0;
        pointer-events: none;
        transform: translateX(14px);
        transition: opacity 0.38s ease, transform 0.42s ease;
      }

      .hero-slide.is-active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }

      .hero-slide[data-theme="tv"] {
        --hero-accent: #c99f59;
      }

      .hero-slide[data-theme="trial"] {
        --hero-accent: #c99f59;
      }

      .hero-slide[data-theme="implant"] {
        --hero-accent: #c99f59;
      }

      .hero-slide[data-theme="tv"] .hero-title,
      .hero-slide[data-theme="trial"] .hero-title,
      .hero-slide[data-theme="implant"] .hero-title {
        max-width: 12.5ch;
      }

      .hero-copy {
        position: relative;
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: stretch;
        gap: 24px;
        padding-top: 86px;
      }

      .hero-copy-content {
        min-width: 0;
      }

      .hero-kicker {
        width: fit-content;
        min-height: 40px;
        padding: 0 24px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(246, 236, 219, 0.98), rgba(240, 227, 207, 0.94));
        box-shadow: 0 14px 24px rgba(154, 122, 66, 0.14);
        color: #18202d;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0.24em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .hero-kicker--new {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: linear-gradient(135deg, #06152f 0%, #0b2854 100%);
        border: 1px solid rgba(255, 201, 40, 0.32);
        box-shadow: 0 14px 28px rgba(5, 21, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: #ffc928;
      }

      .hero-kicker--new::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -70%;
        bottom: -70%;
        left: -55%;
        width: 42%;
        background: linear-gradient(90deg, transparent, rgba(255, 226, 112, 0.42), transparent);
        transform: skewX(-18deg) translateX(-220%);
        animation: hero-kicker-shine 2.8s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes hero-kicker-shine {
        0%, 18% { transform: skewX(-18deg) translateX(-220%); }
        58%, 100% { transform: skewX(-18deg) translateX(620%); }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-kicker--new::before { animation: none; }
      }

      .hero-title {
        margin: 22px 0 0;
        color: #0e1624;
        font-size: clamp(48px, 3.2vw, 58px);
        line-height: 1;
        font-weight: 500;
        letter-spacing: -0.06em;
        max-width: 11.5ch;
        text-wrap: balance;
      }

      .hero-actions {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-top: 26px;
        flex-wrap: wrap;
        grid-column: 1;
        grid-row: 2;
        align-self: start;
      }

      .hero-btn {
        min-width: 230px;
        height: 68px;
        border: 1px solid rgba(201, 159, 89, 0.42);
        border-radius: 18px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: transparent;
        color: rgba(201, 159, 89, 0.68);
        box-shadow: none;
        font-family: inherit;
        font-size: 19px;
        font-weight: 500;
        letter-spacing: -0.04em;
        text-decoration: none;
        transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .hero-btn:hover,
      .hero-btn:focus-visible {
        transform: translateY(-1px);
        border-color: #c99f59;
        background: transparent;
        color: #c99f59;
        box-shadow: none;
      }

      .hero-btn.hero-btn--outline {
        border: 1px solid #111827;
        background: linear-gradient(180deg, #111827 0%, #090e1b 100%);
        color: #fff;
        box-shadow: 0 18px 30px rgba(17, 24, 39, 0.18);
        transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .hero-btn.hero-btn--outline:hover,
      .hero-btn.hero-btn--outline:focus-visible {
        border-color: #171f31;
        background: linear-gradient(180deg, #171f31 0%, #0a1021 100%);
        color: #fff;
        box-shadow: 0 20px 34px rgba(17, 24, 39, 0.22);
      }

      .hero-btn i {
        display: block;
        font-size: 18px;
        line-height: 1;
        transition: transform 0.22s ease;
      }

      .hero-btn:hover .hero-action-arrow--horizontal,
      .hero-btn:focus-visible .hero-action-arrow--horizontal {
        transform: translateX(5px);
      }

      .hero-action-arrow {
        flex: 0 0 auto;
        will-change: transform, opacity;
      }

      .hero-action--appointment:hover .hero-action-arrow--diagonal,
      .hero-action--appointment:focus-visible .hero-action-arrow--diagonal {
        animation: pediatric-action-arrow-sweep 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      .hero-btn.hero-btn-compact {
        min-width: 0 !important;
        width: max-content !important;
        max-width: 100%;
        padding: 0 18px !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        align-self: flex-start;
      }

      .hero-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 19px;
        line-height: 1.1;
        font-weight: 500;
        color: #262d39;
        text-decoration: none;
        letter-spacing: -0.03em;
        padding-bottom: 6px;
      }

      .hero-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: #c99f59;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.28s ease;
      }

      .hero-link:hover::after,
      .hero-link:focus-visible::after {
        transform: scaleX(1);
      }

      .hero-link .hero-action-arrow {
        font-size: 17px;
        line-height: 1;
      }

      .hero-link:hover .hero-action-arrow--horizontal,
      .hero-link:focus-visible .hero-action-arrow--horizontal {
        animation: pediatric-action-arrow-slide 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-action--appointment:hover .hero-action-arrow--diagonal,
        .hero-action--appointment:focus-visible .hero-action-arrow--diagonal,
        .hero-link:hover .hero-action-arrow--horizontal,
        .hero-link:focus-visible .hero-action-arrow--horizontal {
          animation: none;
        }
      }

      /* Keep both hero actions on the same row on compact desktop screens. */
      @media (min-width: 1201px) and (max-width: 1400px) {
        .hero-actions {
          gap: 14px;
          flex-wrap: nowrap;
        }

        .hero-btn {
          min-width: 190px;
          padding-inline: 18px;
        }

        .hero-link {
          flex: 0 0 auto;
          white-space: nowrap;
        }
      }

      .hero-visual {
        position: relative;
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-device {
        position: relative;
        display: block;
        width: min(100%, 680px);
        aspect-ratio: 570 / 392;
        height: auto;
        overflow: hidden;
      }

      .hero-device-picture {
        display: block;
      }

      .hero-device-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .hero-device::before {
        content: none;
      }

      .hero-device-core,
      .hero-device-buttons,
      .hero-device-mark,
      .hero-device-glow {
        display: none;
      }

      .hero-sidecard {
        justify-self: end;
        grid-column: 3;
        grid-row: 1 / span 2;
        width: min(100%, 380px);
        min-height: 540px;
        padding: 18px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow:
          0 28px 70px rgba(28, 32, 43, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(14px);
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .hero-sidecard--media-only {
        gap: 0;
      }

      .hero-sidecard--media-only .hero-sidecard-media {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
      }

      .hero-sidecard-media {
        position: relative;
        min-height: 320px;
        border-radius: 20px;
        overflow: hidden;
        background:
          url("../images/sidecard-scene.avif") center center / cover no-repeat,
          linear-gradient(180deg, #d8d4cc 0%, #bdb8b0 36%, #83807a 100%);
      }

      .hero-sidecard-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(12, 15, 18, 0.05), rgba(12, 15, 18, 0.2));
      }

      .hero-sidecard-media::after {
        display: none;
      }

      .hero-sidecard-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center;
      }

      .hero-scene {
        display: none;
      }

      .hero-scene-window {
        position: absolute;
        top: 0;
        right: 0;
        width: 45%;
        height: 48%;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(233, 241, 248, 0.7)),
          linear-gradient(90deg, rgba(118, 165, 116, 0.42), rgba(194, 222, 185, 0.24));
      }

      .hero-scene-window::before,
      .hero-scene-window::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(36, 41, 51, 0.86);
      }

      .hero-scene-window::before {
        left: 54%;
      }

      .hero-scene-window::after {
        left: 70%;
      }

      .hero-scene-tv {
        position: absolute;
        left: 4%;
        top: 18%;
        width: 40%;
        aspect-ratio: 1.05;
        border-radius: 4px;
        background: #111;
        box-shadow:
          0 16px 22px rgba(0, 0, 0, 0.22),
          inset 0 0 0 2px rgba(255, 255, 255, 0.16);
      }

      .hero-scene-tv::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 2px;
        background:
          linear-gradient(180deg, #f8f9fb 0%, #eceff3 30%, #d5d8de 100%);
      }

      .hero-scene-tv::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 32px;
        height: 8px;
        background: #5e5e5e;
        transform: translateX(-50%);
        border-radius: 999px;
      }

      .hero-scene-host {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 14px;
        bottom: 22px;
        border-radius: 2px;
        background:
          radial-gradient(circle at 55% 24%, rgba(255, 255, 255, 0.96) 0 10%, transparent 11%),
          radial-gradient(circle at 52% 26%, rgba(255, 255, 255, 0.88) 0 18%, transparent 19%),
          linear-gradient(180deg, rgba(244, 246, 247, 0.96) 0%, rgba(231, 233, 236, 0.92) 100%);
      }

      .hero-scene-host::before {
        content: "";
        position: absolute;
        left: 18%;
        top: 12%;
        width: 26%;
        height: 68%;
        border-radius: 48% 48% 42% 42%;
        background: linear-gradient(180deg, #f8f8f8 0%, #ece7e0 100%);
        box-shadow: inset 0 -8px 10px rgba(0, 0, 0, 0.08);
      }

      .hero-scene-host::after {
        content: "";
        position: absolute;
        right: 12%;
        top: 28%;
        width: 20%;
        height: 28%;
        border-radius: 50%;
        background: rgba(242, 214, 188, 0.62);
        box-shadow:
          -8px -24px 0 2px rgba(255, 255, 255, 0.72),
          0 12px 0 0 rgba(33, 33, 38, 0.16);
      }

      .hero-scene-cabinet {
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 15%;
        height: 24%;
        border-radius: 3px;
        background:
          linear-gradient(180deg, #8f6a3d 0%, #6c4f2d 100%);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
      }

      .hero-scene-cabinet::before {
        content: "";
        position: absolute;
        left: 6%;
        right: 6%;
        top: 14%;
        height: 18%;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
      }

      .hero-scene-table {
        position: absolute;
        right: 12%;
        bottom: 18%;
        width: 16%;
        height: 10%;
        border-radius: 50%;
        background: linear-gradient(180deg, #b89262, #8b6437);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
      }

      .hero-scene-sofa {
        position: absolute;
        left: 46%;
        bottom: 10%;
        width: 46%;
        height: 24%;
        border-radius: 20px 20px 10px 10px;
        background:
          linear-gradient(180deg, #53637b 0%, #394659 100%);
        box-shadow: 0 16px 24px rgba(0, 0, 0, 0.18);
      }

      .hero-scene-sofa::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 10%;
        height: 18%;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
      }

      .hero-scene-person {
        position: absolute;
        right: 7%;
        bottom: 20%;
        width: 26%;
        height: 38%;
        border-radius: 46% 46% 16% 16%;
        background:
          radial-gradient(circle at 52% 12%, rgba(255, 221, 193, 0.88), transparent 22%),
          linear-gradient(180deg, #274d7e 0%, #1d3c62 100%);
        box-shadow: -8px 8px 16px rgba(0, 0, 0, 0.18);
        transform: rotate(1deg);
      }

      .hero-scene-person::before {
        content: "";
        position: absolute;
        left: 16%;
        top: -20%;
        width: 52%;
        height: 34%;
        border-radius: 50%;
        background: linear-gradient(180deg, #ead7c7, #c9b6a2);
        box-shadow:
          inset 0 -6px 0 rgba(0, 0, 0, 0.08),
          0 12px 18px rgba(0, 0, 0, 0.1);
      }

      .hero-scene-person::after {
        content: "";
        position: absolute;
        left: -24%;
        top: 28%;
        width: 70%;
        height: 44%;
        border-radius: 50% 50% 32% 32%;
        background: linear-gradient(180deg, #1b65b1 0%, #18487f 100%);
        box-shadow: 0 14px 22px rgba(0, 0, 0, 0.14);
      }

      .hero-scene-plant {
        position: absolute;
        left: 30%;
        top: 4%;
        width: 9%;
        height: 22%;
        border-radius: 10px;
        background:
          linear-gradient(180deg, #5e7d48 0%, #8ba25f 100%);
        box-shadow: 0 10px 16px rgba(0, 0, 0, 0.12);
      }

      .hero-scene-plant::before,
      .hero-scene-plant::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        width: 12px;
        border-radius: 999px;
        background: linear-gradient(180deg, #5f7a46, #9ab86e);
        transform-origin: bottom center;
      }

      .hero-scene-plant::before {
        height: 56px;
        transform: translateX(-50%) rotate(-16deg);
      }

      .hero-scene-plant::after {
        height: 44px;
        transform: translateX(-50%) rotate(18deg);
      }

      .hero-sidecard-body {
        display: grid;
        gap: 12px;
        padding: 0 6px 2px;
      }

      .hero-sidecard-mark {
        width: 26px;
        height: 2px;
        border-radius: 999px;
        background: var(--hero-accent);
      }

      .hero-sidecard-copy {
        font-size: 16px;
        line-height: 1.48;
        color: #2f3746;
        letter-spacing: -0.02em;
      }

      .hero-dots {
        position: absolute;
        left: 50%;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 24px;
        transform: translateX(-50%);
      }

      .hero-dot {
        display: grid;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        place-items: center;
        background: transparent;
        cursor: pointer;
      }

      .hero-dot::before {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #b4b7bf;
        content: "";
        transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      }

      .hero-dot.is-active::before {
        width: 10px;
        height: 10px;
        background: #c99f59;
        box-shadow: 0 0 0 3px rgba(201, 159, 89, 0.14);
      }

      .hero-dot:focus-visible {
        outline: 2px solid #0b244b;
        outline-offset: 4px;
      }

      .award-section {
        padding: 48px 0 0;
        background:
          radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.94), transparent 26%),
          radial-gradient(circle at 82% 18%, rgba(255, 244, 222, 0.6), transparent 28%),
          linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
      }

      .award-shell {
        max-width: var(--ui-container-wide);
        margin: 0 auto;
        padding: 0 var(--ui-gutter) 48px;
      }

      .award-card {
        position: relative;
        overflow: visible;
        display: grid;
        grid-template-columns: minmax(84px, 108px) minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 128px;
        padding: 12px 10px 12px 8px;
        border-radius: var(--ui-radius-card);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(252, 248, 240, 0.96)),
          linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(247, 240, 226, 0.48));
        box-shadow:
          0 28px 56px rgba(96, 75, 31, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.88);
      }

      .award-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 76% 16%, rgba(244, 218, 170, 0.24), transparent 26%),
          radial-gradient(circle at 88% 88%, rgba(255, 224, 156, 0.16), transparent 22%),
          linear-gradient(115deg, transparent 0 66%, rgba(245, 201, 79, 0.08) 66% 66.8%, transparent 66.8% 100%);
        pointer-events: none;
        border-radius: inherit;
      }

.award-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.68;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.78) 0%, rgba(255, 244, 211, 0.48) 24%, rgba(232, 187, 82, 0.22) 46%, rgba(232, 187, 82, 0) 74%);
  background-repeat: no-repeat;
  background-size: 360px 360px;
  background-position: -20% -100%;
  filter: blur(7px);
  animation: award-card-shine 12s linear infinite;
  will-change: background-position;
  border-radius: inherit;
}

@keyframes award-card-shine {
  0% {
    background-position: -20% -100%;
  }

  55% {
    background-position: 60% 60%;
  }

  100% {
    background-position: 120% 190%;
  }
}

      @media (prefers-reduced-motion: reduce) {
        .award-card::after {
          animation: none;
          opacity: 0;
        }
      }

      .award-visual {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: 1px solid rgba(201, 159, 89, 0.4);
        background:
          radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.86), transparent 26%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 239, 223, 0.84));
      }

      .award-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        max-height: 90px;
        filter: drop-shadow(0 14px 18px rgba(61, 45, 9, 0.12));
      }

      .award-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        min-width: 0;
        padding: 0;
      }

      .award-kicker {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        width: fit-content;
        margin: 0;
        min-height: 36px;
        padding: 4px 16px;
        border: 1px solid rgba(190, 136, 43, 0.34);
        border-radius: 999px;
        background: #fffaf0;
        box-shadow: 0 6px 14px rgba(111, 82, 29, 0.08);
        color: #a36d21;
        font-size: 12px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
      }

      .award-title {
        margin: 0;
        max-width: none;
        color: #0d2a57;
        font-size: clamp(18px, 1.65vw, 23px);
        line-height: 1.2;
        padding: 2px 0 4px;
        font-weight: 600;
        letter-spacing: -0.05em;
        text-wrap: balance;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .award-action {
        position: relative;
        z-index: 1;
        align-self: center;
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .award-btn {
        min-width: 0;
        height: var(--ui-control-sm);
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        border-radius: var(--ui-radius-control);
        border: 1px solid rgba(201, 159, 89, 0.42);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 242, 228, 0.98));
        color: #9b6f29;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.015em;
        white-space: nowrap;
        overflow: hidden;
        box-shadow: 0 10px 14px rgba(160, 122, 46, 0.1);
        transition: width 0.52s ease, gap 0.52s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      }

      .award-btn:hover {
        border-color: rgba(201, 159, 89, 0.72);
        box-shadow: 0 14px 20px rgba(160, 122, 46, 0.14);
      }

      .award-btn-text {
        position: relative;
        z-index: 1;
      }

      .award-btn-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0;
        height: 18px;
        flex: 0 0 auto;
        opacity: 0;
        overflow: hidden;
        transition: width 0.52s ease, opacity 0.52s ease;
      }

      .award-btn-icon i {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        transform: translateX(-5px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.2s ease;
      }

      .award-btn:hover .award-btn-icon i,
      .award-btn:focus-visible .award-btn-icon i {
        transform: translateX(0);
        opacity: 1;
      }

      .award-btn:hover,
      .award-btn:focus-visible {
        gap: 18px;
      }

      .award-btn:hover .award-btn-icon,
      .award-btn:focus-visible .award-btn-icon {
        width: 22px;
        opacity: 0.92;
      }

      .insight-section {
        padding: 86px 0 96px;
        background:
          radial-gradient(circle at 74% 30%, rgba(43, 121, 255, 0.3), transparent 36%),
          radial-gradient(circle at 16% 78%, rgba(11, 91, 209, 0.24), transparent 34%),
          linear-gradient(180deg, #020813 0%, #06132c 48%, #020813 100%);
        position: relative;
        overflow: hidden;
        isolation: isolate;
      }

      .insight-section::selection {
        background: rgba(91, 172, 255, 0.35);
      }

      .insight-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='1800' height='620' viewBox='0 0 1800 620' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231c78ff' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M-80 410 C160 220 300 590 520 400 S900 210 1120 345 1460 515 1880 210'/%3E%3Cpath d='M-80 438 C170 250 315 580 535 425 S920 245 1134 372 1470 525 1880 250' opacity='.6'/%3E%3Cpath d='M-80 466 C180 280 330 570 550 450 S940 280 1148 399 1480 535 1880 290' opacity='.35'/%3E%3Cpath d='M-80 494 C190 310 345 560 565 475 S960 315 1162 426 1490 545 1880 330' opacity='.24'/%3E%3C/g%3E%3Cg fill='%232c89ff' opacity='.42'%3E%3Ccircle cx='1520' cy='72' r='2'/%3E%3Ccircle cx='1560' cy='94' r='2'/%3E%3Ccircle cx='1600' cy='116' r='2'/%3E%3Ccircle cx='1640' cy='138' r='2'/%3E%3Ccircle cx='1680' cy='160' r='2'/%3E%3Ccircle cx='1720' cy='182' r='2'/%3E%3Ccircle cx='1760' cy='204' r='2'/%3E%3C/g%3E%3C/svg%3E");
        background-position: center 54%;
        background-repeat: no-repeat;
        background-size: min(1800px, 150vw) auto;
        opacity: 0.78;
        pointer-events: none;
        z-index: 0;
      }

      .insight-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='520' height='320' viewBox='0 0 520 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232e8bff' opacity='.34'%3E%3Ccircle cx='16' cy='18' r='1.4'/%3E%3Ccircle cx='56' cy='18' r='1.2'/%3E%3Ccircle cx='96' cy='18' r='1'/%3E%3Ccircle cx='136' cy='18' r='1.2'/%3E%3Ccircle cx='176' cy='18' r='1.4'/%3E%3Ccircle cx='216' cy='18' r='1'/%3E%3Ccircle cx='256' cy='18' r='1.2'/%3E%3Ccircle cx='296' cy='18' r='1.4'/%3E%3Ccircle cx='336' cy='18' r='1'/%3E%3Ccircle cx='376' cy='18' r='1.2'/%3E%3Ccircle cx='416' cy='18' r='1.4'/%3E%3Ccircle cx='456' cy='18' r='1'/%3E%3Ccircle cx='496' cy='18' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
        background-position: right -120px top -42px;
        background-repeat: repeat;
        background-size: 420px 258px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 44%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 44%, #000 100%);
        opacity: 0.52;
        pointer-events: none;
        z-index: 0;
      }

      .insight-shell {
        max-width: 1500px;
        margin: 0 auto;
        padding: 0 48px;
        position: relative;
        z-index: 1;
      }

      .insight-header {
        max-width: none;
        margin: 0 0 34px;
        display: grid;
        gap: 12px;
      }

      .insight-header .insight-kicker {
        width: fit-content;
        min-height: 30px;
        margin: 0;
        padding: 4px 14px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(104, 173, 255, 0.38);
        border-radius: var(--ds-radius-pill);
        background: rgba(66, 133, 232, 0.14);
        color: rgba(232, 242, 255, 0.9);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .insight-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      .insight-header h2 {
        margin: 0;
        color: #f4f8ff;
        font-size: 42px;
        line-height: 1.08;
        letter-spacing: 0;
        font-weight: 700;
        text-wrap: balance;
        max-width: 1220px;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.14),
          0 14px 34px rgba(29, 107, 255, 0.34);
      }

      .insight-header p {
        margin: 0;
        color: rgba(207, 224, 255, 0.82);
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0;
        max-width: 76ch;
      }

      .insight-nav {
        position: absolute;
        top: 0;
        right: 48px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        margin-top: 2px;
      }

      .insight-nav-btn {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid rgba(91, 162, 255, 0.52);
        background:
          radial-gradient(circle at 50% 0%, rgba(96, 171, 255, 0.18), transparent 58%),
          rgba(5, 20, 48, 0.72);
        color: #f6f9ff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 0 1px rgba(53, 124, 255, 0.24),
          0 12px 26px rgba(7, 28, 67, 0.42);
        transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
      }

      .insight-nav-btn i {
        font-size: 22px;
      }

      .insight-nav-btn:hover {
        background:
          radial-gradient(circle at 50% 0%, rgba(120, 195, 255, 0.34), transparent 62%),
          rgba(12, 42, 95, 0.94);
        border-color: rgba(134, 196, 255, 0.9);
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 0 22px rgba(52, 128, 255, 0.46),
          0 14px 28px rgba(7, 28, 67, 0.5);
      }

      .insight-nav-btn:disabled {
        opacity: 0.35;
        cursor: default;
      }

      .insight-grid {
        --insight-bleed: max(48px, calc((100vw - 1500px) / 2 + 48px));
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(520px, 38vw);
        gap: 18px;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        padding: 10px var(--insight-bleed) 18px var(--insight-bleed);
        margin-inline: calc(-1 * var(--insight-bleed));
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--insight-bleed);
        scrollbar-width: none;
      }

      .insight-grid::-webkit-scrollbar {
        display: none;
      }

      .insight-card {
        position: relative;
        min-height: 250px;
        padding: 26px 28px 24px;
        border-radius: 22px;
        border: 1px solid rgba(104, 169, 255, 0.4);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        row-gap: 12px;
        align-items: start;
        scroll-snap-align: start;
        background:
          radial-gradient(circle at 78% 18%, rgba(60, 132, 255, 0.22), transparent 42%),
          linear-gradient(135deg, rgba(9, 34, 78, 0.82) 0%, rgba(5, 21, 52, 0.72) 100%);
        backdrop-filter: blur(14px);
        box-shadow:
          inset 0 1px 0 rgba(214, 233, 255, 0.18),
          inset 0 -28px 48px rgba(10, 56, 133, 0.12),
          0 18px 40px rgba(2, 11, 32, 0.46);
        transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
      }

      .insight-card::before {
        border-radius: inherit;
      }

      .insight-card::after {
        border-radius: inherit;
      }

      .insight-card::before,
      .insight-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .insight-card::before {
        background-image: url("data:image/svg+xml,%3Csvg width='620' height='250' viewBox='0 0 620 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%234aa3ff' stroke-width='1.1' opacity='.35'%3E%3Cpath d='M-30 190 C75 120 145 230 245 180 S390 90 505 150 645 200 690 150'/%3E%3Cpath d='M-30 210 C82 140 152 235 252 198 S400 120 515 172 650 214 690 175' opacity='.42'/%3E%3C/g%3E%3C/svg%3E");
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
        opacity: 0.62;
      }

      .insight-card::after {
        background: linear-gradient(90deg, rgba(186, 219, 255, 0.12), transparent 46%, rgba(77, 156, 255, 0.16));
        mix-blend-mode: screen;
        opacity: 0.62;
      }

      .insight-card:hover {
        transform: translateY(-1px);
        border-color: rgba(139, 199, 255, 0.78);
        box-shadow:
          inset 0 1px 0 rgba(235, 245, 255, 0.24),
          inset 0 -28px 48px rgba(13, 76, 170, 0.16),
          0 0 22px rgba(48, 128, 255, 0.18),
          0 16px 34px rgba(2, 11, 32, 0.5);
      }

      .insight-card-light,
      .insight-card-blue,
      .insight-card-dark,
      .insight-card-black {
        color: #eef5ff;
      }

      .insight-card-dark {
        background:
          linear-gradient(90deg, rgba(4, 15, 38, 0.82) 0%, rgba(5, 22, 54, 0.46) 38%, rgba(5, 22, 54, 0) 66%),
          url("../images/cihaz_card.jpg") right center / auto 100% no-repeat,
          linear-gradient(135deg, rgba(9, 34, 78, 0.82) 0%, rgba(5, 21, 52, 0.72) 100%);
      }

      .insight-card-blue {
        background:
          linear-gradient(90deg, rgba(4, 15, 38, 0.84) 0%, rgba(5, 22, 54, 0.5) 40%, rgba(5, 22, 54, 0.06) 72%, rgba(5, 22, 54, 0) 100%),
          url("../images/cinlama.jpg") right center / auto 100% no-repeat,
          linear-gradient(135deg, rgba(9, 34, 78, 0.82) 0%, rgba(5, 21, 52, 0.72) 100%);
      }

      .insight-card-light {
        background:
          linear-gradient(90deg, rgba(4, 15, 38, 0.84) 0%, rgba(5, 22, 54, 0.52) 42%, rgba(5, 22, 54, 0.08) 74%, rgba(5, 22, 54, 0) 100%),
          url("../images/duyuyorum_ama-anlamiyorum.jpg") right center / auto 100% no-repeat,
          linear-gradient(135deg, rgba(9, 34, 78, 0.82) 0%, rgba(5, 21, 52, 0.72) 100%);
      }

      .insight-card-black {
        background:
          linear-gradient(90deg, rgba(4, 15, 38, 0.82) 0%, rgba(5, 22, 54, 0.46) 38%, rgba(5, 22, 54, 0) 66%),
          url("../images/koklear_card.jpg") right center / auto 100% no-repeat,
          linear-gradient(135deg, rgba(9, 34, 78, 0.82) 0%, rgba(5, 21, 52, 0.72) 100%);
      }

      .insight-card-title {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: 0;
        font-weight: 700;
        max-width: 12ch;
      }

      .insight-card-copy {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: 14px;
        line-height: 1.48;
        letter-spacing: 0;
        max-width: 34ch;
        color: rgba(229, 239, 255, 0.86);
      }

      .insight-card-btn {
        margin-top: auto;
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 0;
        min-height: 42px;
        padding: 0 16px 0 18px;
        width: fit-content;
        border-radius: 999px;
        border: 1px solid rgba(91, 172, 255, 0.5);
        background: rgba(7, 25, 58, 0.58);
        color: #ffffff;
        text-decoration: none;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0;
        font-weight: 500;
        min-width: 0;
        transform-origin: left center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition:
          gap 0.4s ease,
          background 0.2s ease,
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }

      .insight-card-btn i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0;
        height: 18px;
        flex: 0 0 auto;
        overflow: hidden;
        font-size: 18px;
        line-height: 1;
        transform: translateX(-5px);
        opacity: 0;
        transition: width 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
      }

      .insight-card-btn:hover {
        border-color: rgba(151, 210, 255, 0.86);
        background: rgba(14, 48, 108, 0.82);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 22px rgba(48, 135, 255, 0.22);
      }

      .insight-card-btn:hover,
      .insight-card-btn:focus-visible {
        gap: 12px;
      }

      .insight-card-btn:hover i,
      .insight-card-btn:focus-visible i {
        width: 22px;
        transform: translateX(0);
        opacity: 1;
      }

      .insight-card-btn-light,
      .insight-card-blue .insight-card-btn,
      .insight-card-dark .insight-card-btn,
      .insight-card-black .insight-card-btn {
        background: rgba(8, 26, 58, 0.58);
        border-color: rgba(112, 174, 255, 0.46);
        color: #eef5ff;
      }

      .insight-card-btn-light:hover,
      .insight-card-blue .insight-card-btn:hover,
      .insight-card-dark .insight-card-btn:hover,
      .insight-card-black .insight-card-btn:hover {
        background: rgba(15, 44, 98, 0.82);
        border-color: rgba(152, 207, 255, 0.78);
      }

      .pediatric-section {
        padding: var(--ui-section-space) 0;
        background:
          radial-gradient(circle at 16% 18%, rgba(245, 201, 79, 0.12), transparent 18%),
          linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%);
        overflow: hidden;
      }

      .pediatric-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        margin: 0 auto;
        padding: 0;
      }

      .pediatric-stage {
        position: relative;
        display: grid;
        min-height: clamp(430px, 38vw, 540px);
        border-radius: var(--ui-radius-panel);
        overflow: hidden;
        box-shadow:
          0 28px 60px rgba(39, 49, 72, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.88);
        background: #faf7f0;
      }

      .pediatric-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 2% 82%, rgba(245, 201, 79, 0.22), transparent 10%),
          linear-gradient(90deg, rgba(252, 249, 243, 0.98) 0%, rgba(252, 249, 243, 0.92) 24%, rgba(252, 249, 243, 0) 56%);
        pointer-events: none;
        z-index: 1;
      }

      .pediatric-stage::after {
        content: none;
      }

      .pediatric-visual {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .pediatric-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 74% center;
      }

      .pediatric-copy {
        position: absolute;
        left: clamp(20px, 3.5vw, 56px);
        top: clamp(22px, 4vw, 56px);
        width: min(42%, 500px);
        z-index: 2;
        border-radius: var(--ui-radius-card);
        padding: clamp(24px, 2.4vw, 34px);
        background: rgba(255, 255, 255, 0.84);
        backdrop-filter: blur(14px);
        box-shadow:
          0 18px 44px rgba(39, 49, 72, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.88);
      }

      .pediatric-copy::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 60px;
        height: 60px;
        transform: translate(-52%, -50%);
        background-image:
          radial-gradient(circle, rgba(245, 201, 79, 0.16) 2px, transparent 2.5px);
        background-size: 16px 16px;
        opacity: 0.6;
        pointer-events: none;
      }

      .pediatric-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 4px 16px;
        border-radius: 999px;
        border: 1px solid rgba(240, 182, 31, 0.35);
        background: rgba(255, 255, 255, 0.72);
        color: rgba(19, 40, 76, 0.72);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .pediatric-copy h2 {
        margin: 18px 0 12px;
        max-width: 100%;
        color: #13284c;
        font-size: clamp(30px, 2.7vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.04em;
        font-weight: 700;
      }

      .pediatric-divider {
        width: 42px;
        height: 3px;
        border-radius: 999px;
        background: #f0b61f;
        margin: 4px 0 20px;
      }

      .pediatric-copy p {
        margin: 0;
        max-width: 42ch;
        color: rgba(32, 41, 57, 0.74);
        font-size: var(--ui-text-md);
        line-height: 1.56;
        letter-spacing: -0.01em;
      }

      .pediatric-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 14px;
        margin-top: 24px;
      }

      .pediatric-btn {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: var(--ui-control-lg);
        padding: 0 12px;
        border-radius: 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      }

      .pediatric-btn i {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.34);
        transition: none;
      }

      .pediatric-btn .pediatric-action-arrow,
      .pediatric-link .pediatric-action-arrow {
        display: inline-grid;
        place-items: center;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        /* Keep the direction cue attached to its label, not the button edge. */
        margin-left: 0 !important;
        border-radius: 0;
        background: transparent;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        transform: none;
        will-change: transform, opacity;
      }

      .pediatric-btn:hover {
        transform: none;
      }

      .pediatric-btn-primary {
        min-height: 64px;
        padding: 0 16px 0 12px;
        border: 1px solid rgba(204, 148, 24, 0.7);
        background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
        color: #13284c;
        box-shadow:
          0 8px 18px rgba(192, 140, 24, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          inset 0 -1px 0 rgba(204, 148, 24, 0.16);
      }

      .pediatric-btn-primary > i:first-child {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        font-size: 22px;
        background: rgba(255, 250, 229, 0.68);
      }

      .pediatric-btn-primary > span {
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
      }

      .pediatric-btn-primary .pediatric-action-arrow {
        color: #13284c;
      }

      .pediatric-link {
        min-height: 64px;
        padding: 0 16px 0 12px;
        display: inline-flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #13284c;
        border: 1.5px solid #13284c;
        border-radius: 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        transition: color 0.22s ease, transform 0.22s ease;
      }

      .pediatric-link i {
        font-size: 18px;
        color: #13284c;
        transition: transform 0.22s ease;
      }

      .pediatric-link .pediatric-action-icon {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 50%;
        background: rgba(245, 201, 79, 0.15);
      }

      .pediatric-link .pediatric-action-arrow {
        color: #f0b61f;
      }

      .pediatric-link:hover {
        transform: none;
      }

      .pediatric-link:hover i {
        transform: none;
      }

      /* Keep both pediatric CTAs on one shared geometry. The global button
         normalization is declared later and otherwise shortens only .pediatric-btn. */
      .pediatric-actions > .pediatric-btn,
      .pediatric-actions > .pediatric-link {
        box-sizing: border-box;
        width: 100%;
        min-height: 64px;
        padding: 0 12px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 1;
      }

      @keyframes pediatric-action-arrow-sweep {
        0% {
          opacity: 0;
          transform: translate(-6px, 6px);
        }

        22% {
          opacity: 1;
        }

        70% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          transform: translate(6px, -6px);
        }
      }

      @keyframes pediatric-action-arrow-slide {
        0% {
          opacity: 0;
          transform: translateX(-7px);
        }

        22% {
          opacity: 1;
        }

        70% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          transform: translateX(7px);
        }
      }

      .pediatric-btn:hover .pediatric-action-arrow,
      .pediatric-btn:focus-visible .pediatric-action-arrow {
        animation: pediatric-action-arrow-sweep 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      .pediatric-link:hover .pediatric-action-arrow,
      .pediatric-link:focus-visible .pediatric-action-arrow {
        animation: pediatric-action-arrow-slide 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        .pediatric-btn:hover .pediatric-action-arrow,
        .pediatric-btn:focus-visible .pediatric-action-arrow,
        .pediatric-link:hover .pediatric-action-arrow,
        .pediatric-link:focus-visible .pediatric-action-arrow {
          animation: none;
        }
      }

      .services-showcase {
        position: relative;
        padding: 52px 0 50px;
        overflow: hidden;
        background:
          radial-gradient(circle at 18% 16%, rgba(56, 145, 255, 0.18), transparent 24%),
          radial-gradient(circle at 82% 18%, rgba(82, 170, 255, 0.12), transparent 22%),
          linear-gradient(180deg, #07122c 0%, #081630 44%, #06101f 100%);
        color: #eef5ff;
      }

      .services-showcase::before,
      .services-showcase::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .services-showcase::before {
        background:
          radial-gradient(circle at 10% 6%, rgba(64, 141, 255, 0.4), transparent 18%),
          radial-gradient(circle at 92% 12%, rgba(52, 118, 255, 0.24), transparent 16%),
          linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.05) 42% 43%, transparent 43% 100%);
        opacity: 0.7;
      }

      .services-showcase::after {
        background-image:
          url("data:image/svg+xml,%3Csvg width='800' height='220' viewBox='0 0 800 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233c93ff' stroke-width='1.2' opacity='.34'%3E%3Cpath d='M-20 48 C75 10 118 94 208 58 S360 18 456 48 S620 90 820 20'/%3E%3Cpath d='M-20 66 C70 28 122 112 208 76 S360 36 456 66 S620 108 820 38'/%3E%3Cpath d='M-20 84 C70 46 122 130 208 94 S360 54 456 84 S620 126 820 56'/%3E%3Cpath d='M-20 102 C70 64 122 148 208 112 S360 72 456 102 S620 144 820 74'/%3E%3Cpath d='M-20 120 C70 82 122 166 208 130 S360 90 456 120 S620 162 820 92'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.06), transparent 13%),
          radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.06), transparent 13%);
        background-repeat: no-repeat;
        background-position: left top, left top, left top;
        background-size: 100% 220px, 100% 100%, 100% 100%;
        opacity: 0.8;
        mix-blend-mode: screen;
      }

      .services-showcase-shell {
        position: relative;
        z-index: 1;
        max-width: 1408px;
        margin: 0 auto;
        padding: 0 32px;
      }

      .services-showcase-header {
        max-width: 940px;
        margin: 0 auto 22px;
        text-align: center;
        animation: services-fade-up 700ms ease both;
      }

      .services-showcase-header .services-showcase-kicker {
        display: flex;
        width: fit-content;
        align-items: center;
        min-height: 36px;
        margin: 0 auto 18px;
        padding: 4px 16px;
        border: 1px solid rgba(78, 162, 255, 0.48);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(238, 245, 255, 0.78);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1;
        text-transform: uppercase;
      }

      .services-showcase-header .services-showcase-kicker span {
        display: none;
      }

      .services-showcase-header h2 {
        margin: 0;
        color: #f3f7ff;
        font-size: clamp(30px, 3.4vw, 48px);
        line-height: 1.02;
        letter-spacing: -0.05em;
        text-wrap: balance;
      }

      .services-showcase-header p {
        max-width: 860px;
        margin: 10px auto 0;
        color: rgba(225, 236, 255, 0.84);
        font-size: clamp(14px, 1vw, 16px);
        line-height: 1.52;
        text-wrap: pretty;
      }

      .services-showcase-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .services-showcase-card {
        position: relative;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) 46px;
        align-items: center;
        min-height: 168px;
        padding: 18px 18px 18px 18px;
        border-radius: 22px;
        border: 1px solid rgba(112, 170, 255, 0.28);
        background:
          radial-gradient(circle at 84% 20%, rgba(88, 160, 255, 0.24), transparent 28%),
          linear-gradient(135deg, rgba(9, 36, 84, 0.94), rgba(6, 24, 60, 0.86));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -24px 40px rgba(12, 52, 115, 0.24),
          0 22px 54px rgba(1, 7, 24, 0.46);
        backdrop-filter: blur(14px);
        overflow: hidden;
        transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
        animation: services-fade-up 700ms ease both;
      }

      .services-showcase-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 32%),
          radial-gradient(circle at 84% 80%, rgba(245, 201, 79, 0.12), transparent 18%);
        pointer-events: none;
      }

      .services-showcase-card:hover {
        transform: translateY(-2px);
        border-color: rgba(138, 193, 255, 0.52);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          inset 0 -24px 40px rgba(12, 52, 115, 0.3),
          0 0 24px rgba(54, 127, 255, 0.16),
          0 24px 56px rgba(1, 7, 24, 0.5);
      }

      .services-showcase-icon {
        position: relative;
        z-index: 1;
        width: 80px;
        height: 80px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(83, 160, 255, 0.54);
        background:
          radial-gradient(circle at 50% 42%, rgba(71, 144, 255, 0.24), transparent 56%),
          rgba(8, 28, 68, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.05),
          0 0 0 12px rgba(47, 119, 231, 0.08);
        color: #eef5ff;
      }

      .services-showcase-icon i {
        font-size: 36px;
        line-height: 1;
      }

      .services-showcase-custom-icon {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
        object-position: center;
      }

      .services-showcase-card-copy {
        position: relative;
        z-index: 1;
        min-width: 0;
        padding-left: 4px;
      }

      .services-showcase-card-rule {
        width: 42px;
        height: 3px;
        margin-bottom: 14px;
        border-radius: 999px;
        background: linear-gradient(90deg, #4ea2ff, rgba(78, 162, 255, 0.24));
      }

      .services-showcase-card h3 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(19px, 1.55vw, 24px);
        line-height: 1.06;
        letter-spacing: -0.04em;
      }

      .services-showcase-card p {
        max-width: 30ch;
        margin: 8px 0 0;
        color: rgba(225, 236, 255, 0.82);
        font-size: 13px;
        line-height: 1.45;
      }

      .services-showcase-action {
        position: relative;
        z-index: 1;
        justify-self: end;
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(79, 154, 255, 0.48);
        background: radial-gradient(circle at 50% 20%, rgba(93, 165, 255, 0.22), rgba(12, 34, 74, 0.86));
        color: #fff;
        text-decoration: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 18px rgba(48, 123, 255, 0.2);
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      }

      .services-showcase-action span {
        font-size: 28px;
        line-height: 1;
        transform: translateX(1px);
      }

      .services-showcase-action:hover {
        transform: translateY(-1px);
        border-color: rgba(151, 204, 255, 0.8);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 0 26px rgba(62, 141, 255, 0.28);
      }

      .services-showcase-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
      }

      .services-showcase-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-height: 50px;
        padding: 0 20px;
        border-radius: 999px;
        background:
          radial-gradient(circle at 50% 0%, rgba(101, 173, 255, 0.28), transparent 60%),
          linear-gradient(180deg, rgba(33, 89, 177, 0.96), rgba(12, 43, 98, 0.98));
        color: #f7fbff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 14px 34px rgba(9, 32, 72, 0.42);
        transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
      }

      .services-showcase-cta i {
        font-size: 16px;
        transition: transform 0.22s ease;
      }

      .services-showcase-cta:hover {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 18px 40px rgba(9, 32, 72, 0.5);
      }

      .services-showcase-cta:hover i {
        transform: translateX(4px);
      }

      .services-page {
        background: #f7faff;
        color: var(--ds-ink);
      }

      .services-page-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: clamp(34px, 4vw, 58px) 0 clamp(64px, 7vw, 104px);
        background:
          radial-gradient(circle at 86% 18%, rgba(67, 140, 234, 0.13), transparent 24%),
          radial-gradient(circle at 12% 76%, rgba(245, 201, 79, 0.11), transparent 20%),
          linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      }

      .services-page-hero::before,
      .services-page-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .services-page-hero::before {
        background-image:
          linear-gradient(rgba(115, 149, 194, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(115, 149, 194, 0.08) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 78%);
      }

      .services-page-hero::after {
        display: none;
      }

      .services-page-shell {
        position: relative;
        z-index: 1;
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container-wide));
        margin: 0 auto;
      }

.services-page-breadcrumb {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  color: rgba(38, 56, 88, 0.58);
  text-align: left;
}

/* Match the breadcrumb rail and hero offset used by service detail pages. */
.services-page .services-page-hero {
  padding-top: clamp(30px, 4vw, 54px);
}

.services-page-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.services-page-breadcrumb i,
.services-page-breadcrumb span {
  color: inherit;
}

      .services-page-breadcrumb a:hover,
      .services-page-breadcrumb a:focus-visible {
        color: #0b4fb4;
      }

      .services-page-intro {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
        align-items: end;
        gap: clamp(42px, 7vw, 104px);
        padding: clamp(18px, 3vw, 38px) 0 clamp(52px, 6vw, 82px);
      }

      .services-page-header {
        max-width: 820px;
        margin: 0;
        text-align: left;
      }

      .services-page-kicker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        margin: 0 0 12px;
        padding: 4px 14px;
        border: 1px solid rgba(40, 95, 196, 0.12);
        border-radius: 999px;
        background: rgba(66, 120, 213, 0.1);
        color: #285fc4;
        font-family: "Poppins", sans-serif;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .services-page-header h1 {
        margin: 0;
        padding-bottom: clamp(22px, 2.2vw, 30px);
        border-bottom: 1px solid rgba(115, 149, 194, 0.22);
        color: #13284c;
        font-family: "Poppins", sans-serif;
        font-size: clamp(40px, 4.4vw, 66px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -0.045em;
        text-wrap: balance;
      }

      .services-page-header > p:not(.services-page-kicker) {
        max-width: 720px;
        margin: 22px 0 0;
        color: rgba(19, 40, 76, 0.68);
        font-family: "Poppins", sans-serif;
        font-size: clamp(16px, 1.4vw, 19px);
        font-weight: 400;
        line-height: 1.65;
        letter-spacing: 0;
        text-wrap: pretty;
      }

      .services-page-support {
        position: relative;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 16px;
        padding: 24px;
        border: 1px solid rgba(174, 195, 224, 0.7);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 20px 50px rgba(28, 68, 125, 0.1);
        backdrop-filter: blur(12px);
      }

      .services-page-support-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: var(--ds-accent);
        color: var(--ds-ink);
        font-size: 24px;
      }

      .services-page-support p {
        margin: 1px 0 5px;
        color: rgba(20, 37, 68, 0.62);
        font-size: 12px;
        line-height: 1.45;
      }

      .services-page-support strong {
        display: block;
        color: #071a44;
        font-size: 16px;
        line-height: 1.35;
      }

      .services-page-support a {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        margin-top: 4px;
        padding: 0 17px;
        border-radius: 14px;
        background: #0b1020;
        color: #ffffff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        transition: background-color var(--ds-transition), transform var(--ds-transition);
      }

      .services-page-support a:is(:hover, :focus-visible) {
        background: #202a3d;
        transform: translateY(-1px);
      }

      .services-page-list {
        padding-top: clamp(44px, 5vw, 72px);
      }

      .services-page-list-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 26px;
      }

      .services-page-list-head span {
        display: block;
        margin-bottom: 5px;
        color: #0b4fb4;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .services-page-list-head h2 {
        margin: 0;
        color: #071a44;
        font-size: clamp(28px, 3vw, 40px);
        line-height: 1.1;
        letter-spacing: -0.035em;
      }

      .services-page-list-head > p {
        margin: 0 0 4px;
        color: rgba(20, 37, 68, 0.62);
        font-size: 13px;
      }

      .services-page-list-head > p strong {
        color: #071a44;
        font-size: 20px;
      }

      .services-page-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .services-page .services-page-card,
      body.home .services-showcase .services-page-card,
      .service-related .services-page-card {
        position: relative;
        min-height: 168px;
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 18px;
        padding: 26px;
        border: 1px solid rgba(112, 170, 255, 0.28);
        border-radius: 24px;
        background:
          radial-gradient(circle at 84% 20%, rgba(88, 160, 255, 0.24), transparent 28%),
          linear-gradient(135deg, rgba(9, 36, 84, 0.96), rgba(6, 24, 60, 0.9));
        color: #ffffff;
        text-decoration: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -24px 40px rgba(12, 52, 115, 0.24),
          0 18px 42px rgba(1, 7, 24, 0.2);
        overflow: hidden;
        transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
      }

      .services-page .services-page-card::before,
      body.home .services-showcase .services-page-card::before,
      .service-related .services-page-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--ds-accent);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform var(--ds-transition);
        pointer-events: none;
      }

      .services-page .services-page-card:hover,
      .services-page .services-page-card:focus-visible,
      body.home .services-showcase .services-page-card:hover,
      body.home .services-showcase .services-page-card:focus-visible,
      .service-related .services-page-card:hover,
      .service-related .services-page-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(138, 193, 255, 0.52);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          inset 0 -24px 40px rgba(12, 52, 115, 0.3),
          0 0 24px rgba(54, 127, 255, 0.14),
          0 22px 48px rgba(1, 7, 24, 0.26);
        outline: none;
      }

      .services-page .services-page-card:is(:hover, :focus-visible)::before,
      body.home .services-showcase .services-page-card:is(:hover, :focus-visible)::before,
      .service-related .services-page-card:is(:hover, :focus-visible)::before {
        transform: scaleY(1);
      }

      .services-page-index {
        position: absolute;
        top: 15px;
        right: 18px;
        color: rgba(225, 236, 255, 0.44);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
      }

      .services-page-icon,
      .services-page-action,
      .services-page-copy {
        position: relative;
        z-index: 1;
      }

      .services-page-icon {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        border-radius: 18px;
        border: 1px solid rgba(119, 178, 255, 0.3);
        background: rgba(12, 37, 81, 0.66);
        color: #eef5ff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }

      .services-page-icon i {
        font-size: 29px;
        line-height: 1;
      }

      .services-page-icon img {
        width: 38px;
        height: 38px;
        display: block;
        object-fit: contain;
      }

      .services-page-icon .service-art--theme {
        width: 40px;
        height: 40px;
        display: block;
        overflow: visible;
      }

      .services-page-copy {
        min-width: 0;
        display: grid;
      }

      .services-page-rule {
        width: 42px;
        height: 3px;
        margin-bottom: 14px;
        border-radius: 999px;
        background: linear-gradient(90deg, #4ea2ff, rgba(78, 162, 255, 0.24));
      }

      .services-page-copy strong {
        color: #ffffff;
        font-size: clamp(18px, 1.3vw, 21px);
        line-height: 1.2;
        letter-spacing: -0.025em;
      }

      .services-page-copy span:last-child {
        max-width: 48ch;
        margin-top: 8px;
        color: rgba(225, 236, 255, 0.82);
        font-size: 13px;
        line-height: 1.55;
      }

      .services-page-action {
        position: relative;
        justify-self: end;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(79, 154, 255, 0.48);
        background: radial-gradient(circle at 50% 20%, rgba(93, 165, 255, 0.22), rgba(12, 34, 74, 0.86));
        color: #ffffff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 18px rgba(48, 123, 255, 0.2);
        overflow: hidden;
      }

      .services-page-action i {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 20px;
        line-height: 1;
        transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.72s ease;
      }

      .services-page-action i:last-child {
        opacity: 0;
        transform: translate(-16px, 16px);
      }

      .services-page-card:hover .services-page-action i:first-child,
      .services-page-card:focus-visible .services-page-action i:first-child {
        opacity: 0;
        transform: translate(16px, -16px);
      }

      .services-page-card:hover .services-page-action i:last-child,
      .services-page-card:focus-visible .services-page-action i:last-child {
        opacity: 1;
        transform: translate(0, 0);
      }

      @media (prefers-reduced-motion: reduce) {
        .services-page-action i {
          transition: none;
        }

        .services-page-action i:last-child {
          display: none;
        }

        .services-page-card:hover .services-page-action i:first-child,
        .services-page-card:focus-visible .services-page-action i:first-child {
          opacity: 1;
          transform: none;
        }
      }

      .services-page-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 18px;
      }

      .services-page-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-height: 50px;
        padding: 0 22px;
        border-radius: 999px;
        background:
          radial-gradient(circle at 50% 0%, rgba(101, 173, 255, 0.28), transparent 60%),
          linear-gradient(180deg, rgba(33, 89, 177, 0.96), rgba(12, 43, 98, 0.98));
        color: #f7fbff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.02em;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 14px 34px rgba(9, 32, 72, 0.42);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
      }

      .services-page-cta:hover,
      .services-page-cta:focus-visible {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 18px 40px rgba(9, 32, 72, 0.5);
      }

      @media (max-width: 1200px) {
        .services-page-intro {
          gap: 48px;
        }
      }

      @media (max-width: 1100px) {
        .services-page-intro {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .services-page-support {
          max-width: 520px;
        }

        .services-page .services-page-card,
        .service-related .services-page-card {
          grid-template-columns: 60px minmax(0, 1fr) 42px;
          padding: 22px;
        }
      }

      @media (max-width: 720px) {
        .services-page-hero {
          padding: 28px 0 62px;
        }

        .services-page-shell {
          width: min(calc(100% - 32px), var(--ui-container));
        }

        .services-page-breadcrumb {
          justify-content: flex-start;
          margin-bottom: 20px;
          overflow-x: auto;
          white-space: nowrap;
        }

        .services-page-header {
          text-align: left;
        }

        .services-page-kicker {
          font-size: 10px;
        }

        .services-page-header h1 {
          padding-bottom: 18px;
          font-size: clamp(34px, 10.5vw, 45px);
          line-height: 1.08;
        }

        .services-page-header > p:not(.services-page-kicker) {
          margin-top: 18px;
          font-size: 15px;
          line-height: 1.55;
        }

        .services-page-intro {
          gap: 26px;
          padding: 12px 0 48px;
        }

        .services-page-support {
          grid-template-columns: 46px minmax(0, 1fr);
          gap: 13px;
          padding: 18px;
          border-radius: 20px;
        }

        .services-page-support-icon {
          width: 46px;
          height: 46px;
          border-radius: 14px;
          font-size: 21px;
        }

        .services-page-list {
          padding-top: 38px;
        }

        .services-page-list-head {
          align-items: flex-start;
          margin-bottom: 20px;
        }

        .services-page-list-head > p {
          flex: 0 0 auto;
        }

        .services-page-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .services-page .services-page-card,
        .service-related .services-page-card {
          grid-template-columns: 52px minmax(0, 1fr) 38px;
          gap: 12px;
          min-height: 138px;
          padding: 18px 15px;
          border-radius: 18px;
        }

        .services-page-icon {
          width: 52px;
          height: 52px;
          border-radius: 15px;
        }

        .services-page-icon i {
          font-size: 24px;
        }

        .services-page-icon img,
        .services-page-icon .service-art--theme {
          width: 34px;
          height: 34px;
        }

        .services-page-rule {
          width: 34px;
          height: 2px;
          margin-bottom: 10px;
        }

        .services-page-copy strong {
          font-size: 18px;
          line-height: 1.1;
        }

        .services-page-copy span:last-child {
          margin-top: 6px;
          font-size: 12px;
          line-height: 1.42;
        }

        .services-page-action {
          width: 38px;
          height: 38px;
        }

        .services-page-footer {
          justify-content: stretch;
          margin-top: 16px;
        }

        .services-page-cta {
          width: 100%;
          justify-content: center;
        }
      }

      .devices-page {
        background: #f8fbff;
      }

      .device-detail-page {
        background:
          radial-gradient(circle at 10% 8%, rgba(255, 236, 196, 0.34), transparent 18%),
          radial-gradient(circle at 92% 14%, rgba(246, 212, 144, 0.18), transparent 18%),
          linear-gradient(180deg, #f7f9fd 0%, #fbfdff 36%, #f3f7fb 100%);
      }

      .device-detail-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container-wide));
        margin: 0 auto;
      }

      .device-detail-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: clamp(18px, 2.6vw, 34px) 0 24px;
        background:
          radial-gradient(circle at 74% 18%, rgba(255, 236, 198, 0.5), transparent 22%),
          radial-gradient(circle at 18% 72%, rgba(255, 245, 223, 0.82), transparent 26%),
          linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
      }

      .device-detail-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 14px;
        color: rgba(74, 84, 102, 0.76);
        font-size: 12px;
        font-weight: 600;
      }

      .device-detail-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(74, 84, 102, 0.82);
        text-decoration: none;
      }

      .device-detail-hero-card {
        position: relative;
        margin-top: 0;
        padding: clamp(8px, 1vw, 12px) 0 0;
        display: grid;
        grid-template-columns: minmax(0, 620px) minmax(380px, 1fr);
        gap: clamp(12px, 2vw, 36px);
        align-items: start;
      }

      .device-detail-hero-copy {
        align-self: start;
        padding: clamp(10px, 1.2vw, 18px) 0 0;
      }

      .device-detail-kicker,
      .device-story-kicker,
      .device-detail-bottom-copy > span {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        background: #fff2d4;
        color: #a77010;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .device-detail-hero-copy h1 {
        max-width: none;
        margin: 0;
        color: #13284c;
        font-family: "Poppins", sans-serif;
        font-size: clamp(40px, 4.4vw, 66px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -0.045em;
        text-wrap: balance;
      }

      .device-detail-hero-copy > p:not(.device-detail-kicker) {
        max-width: 500px;
        margin: 22px 0 0;
        color: rgba(19, 40, 76, 0.68);
        font-family: "Poppins", sans-serif;
        font-size: clamp(16px, 1.4vw, 19px);
        font-weight: 400;
        line-height: 1.65;
        letter-spacing: 0;
        text-wrap: pretty;
      }

      .device-detail-hero-actions,
      .device-detail-bottom-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
      }

      .device-detail-primary,
      .device-detail-secondary {
        min-height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 28px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }

      .device-detail-primary {
        background: linear-gradient(180deg, #ffc550, #efb038);
        color: #16233c;
        box-shadow: 0 18px 34px rgba(221, 160, 41, 0.26);
      }

      .device-detail-hero-actions .device-detail-primary {
        background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
        color: #13284c;
        box-shadow:
          0 8px 18px rgba(192, 140, 24, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          inset 0 -1px 0 rgba(204, 148, 24, 0.16);
        transition: background 180ms ease, box-shadow 180ms ease;
      }

      .device-detail-hero-actions .device-detail-primary i {
        transition: transform 180ms ease;
      }

      .device-detail-hero-actions .device-detail-secondary {
        border-color: #13284c;
        background: #13284c;
        color: #ffffff;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .device-detail-secondary {
        border: 1px solid rgba(205, 213, 225, 0.96);
        background: rgba(255, 255, 255, 0.72);
        color: #26364f;
      }

      .device-detail-primary:hover,
      .device-detail-primary:focus-visible,
      .device-detail-secondary:hover,
      .device-detail-secondary:focus-visible {
        transform: translateY(-1px);
        outline: none;
      }

      .device-detail-hero-actions .device-detail-primary:hover,
      .device-detail-hero-actions .device-detail-primary:focus-visible {
        background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
        box-shadow: 0 22px 48px rgba(246, 188, 47, 0.36);
        transform: none;
      }

      .device-detail-hero-actions .device-detail-primary:hover i,
      .device-detail-hero-actions .device-detail-primary:focus-visible i {
        transform: translateX(3px);
      }

      .device-detail-hero-actions .device-detail-secondary:hover,
      .device-detail-hero-actions .device-detail-secondary:focus-visible {
        border-color: #13284c;
        background: #13284c;
        color: #facb45;
        box-shadow: 0 16px 32px rgba(19, 40, 76, 0.18);
        transform: none;
      }

      .device-detail-hero-visual {
        position: relative;
        min-height: 400px;
      }

      .device-detail-product-stage {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        isolation: isolate;
      }

      .device-detail-product-stage::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 6px;
        left: 50%;
        width: 356px;
        aspect-ratio: 1;
        transform: translateX(-50%);
        border-radius: 50%;
        background: rgba(255, 249, 235, 0.58);
        border: 1px solid rgba(226, 190, 110, 0.16);
        box-shadow:
          0 0 0 24px rgba(255, 249, 235, 0.34),
          0 0 0 52px rgba(255, 249, 235, 0.18);
        pointer-events: none;
      }

      .device-detail-product-stage img {
        position: relative;
        z-index: 3;
        width: 340px;
        margin: -18px 0 0;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 20px 24px rgba(34, 43, 57, 0.18));
      }

      .device-detail-color-options {
        position: absolute;
        z-index: 4;
        left: 50%;
        bottom: 6px;
        display: grid;
        grid-template-columns: auto minmax(0, max-content);
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: fit-content;
        max-width: calc(100% - 24px);
        min-height: 48px;
        box-sizing: border-box;
        padding: 9px 14px 9px 17px;
        transform: translateX(-50%);
        border: 1px solid rgba(196, 207, 222, 0.82);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 14px 34px rgba(35, 50, 75, 0.1);
        backdrop-filter: blur(12px);
      }

      .device-detail-color-title {
        color: #53627a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.09em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .device-detail-color-options ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /* Keep fuller palettes legible without making three-colour products wide. */
      .device-detail-color-options:has(li:nth-child(n + 5)) {
        grid-template-columns: auto minmax(0, 1fr);
        width: min(calc(100% - 24px), 480px);
      }

      .device-detail-color-options li {
        display: grid;
        place-items: center;
      }

      .device-detail-color-swatch {
        display: block;
        width: 22px;
        height: 22px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--device-color, #d9dde4);
        box-shadow:
          0 0 0 1px rgba(20, 38, 67, 0.18),
          0 3px 8px rgba(20, 38, 67, 0.12);
      }

      .device-detail-feature-strip {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-top: 22px;
        width: 100%;
        border-top: 1px solid rgba(203, 214, 228, 0.92);
      }

      .device-detail-feature-strip span {
        min-height: 78px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 10px;
        padding: 13px 14px;
        color: #37475f;
      }

      .device-detail-feature-strip span + span {
        border-left: 1px solid rgba(203, 214, 228, 0.82);
      }

      .device-detail-feature-strip b,
      .device-detail-feature-strip small {
        grid-column: 2;
      }

      .device-detail-feature-strip b {
        color: #142645;
        font-size: 12px;
        line-height: 1.25;
      }

      .device-detail-feature-strip small {
        margin-top: 3px;
        color: #778397;
        font-size: 10px;
        line-height: 1.35;
      }

      .device-detail-feature-strip i {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #fff3d6;
        color: #af7a18;
        font-size: 16px;
      }

      .device-detail-story {
        padding: 6px 0 0;
      }

      .device-story-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
        gap: clamp(24px, 3.8vw, 48px);
        align-items: center;
      }

      .device-story-media {
        position: relative;
        min-height: 360px;
        overflow: hidden;
        border: 1px solid #e9d9b8;
        border-radius: 26px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 244, 236, 0.94));
        box-shadow: 0 22px 44px rgba(45, 36, 16, 0.08);
      }

      .device-story-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .device-story-play {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 22px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(8, 25, 58, 0.78), rgba(7, 23, 53, 0.92));
        color: #f7fbff;
        backdrop-filter: blur(10px);
      }

      .device-story-play-btn {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: linear-gradient(180deg, #ffd05d, #efb947);
        color: #12233d;
        font-size: 24px;
        flex: 0 0 auto;
      }

      .device-story-play strong {
        display: block;
        font-size: 15px;
      }

      .device-story-play span {
        display: block;
        margin-top: 4px;
        color: rgba(231, 238, 248, 0.78);
        font-size: 12px;
      }

      .device-story-copy h2 {
        max-width: 12ch;
        margin: 16px 0 0;
        color: #06183a;
        font-size: clamp(30px, 2.7vw, 44px);
        line-height: 1.07;
      }

      .device-story-copy p {
        margin: 16px 0 0;
        color: #5c6b7d;
        font-size: 15px;
        line-height: 1.72;
      }

      .device-story-points {
        display: grid;
        gap: 12px;
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
      }

      .device-story-points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #34455d;
        font-size: 14px;
        line-height: 1.6;
      }

      .device-story-points i {
        color: #cc952d;
        font-size: 18px;
        flex: 0 0 auto;
      }

      .device-detail-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 28px;
        padding: 26px clamp(24px, 3vw, 38px);
        border: 1px solid #eadabd;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 236, 0.92));
        box-shadow: 0 20px 40px rgba(50, 35, 11, 0.06);
      }

      .device-detail-stats article {
        padding: 6px 20px;
        text-align: center;
      }

      .device-detail-stats article + article {
        border-left: 1px solid rgba(228, 213, 182, 0.82);
      }

      .device-detail-stats strong {
        display: block;
        color: #d2921f;
        font-size: clamp(28px, 2.6vw, 46px);
        line-height: 1;
      }

      .device-detail-stats span {
        display: block;
        margin-top: 10px;
        color: #5c6b7d;
        font-size: 14px;
        line-height: 1.55;
      }

      .device-detail-panels {
        padding: clamp(68px, 8vw, 108px) 0;
        background: #f7faff;
      }

      .device-detail-panels > .device-detail-shell {
        display: grid;
        grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.55fr);
        gap: clamp(42px, 6vw, 84px);
        align-items: start;
      }

      .device-detail-panels-head {
        display: grid;
        gap: 10px;
        margin: 0;
      }

      .device-detail-panels-head > span {
        color: #b27a16;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .device-detail-panels-head h2 {
        max-width: 13ch;
        margin: 0;
        color: #06183a;
        font-size: clamp(28px, 2.4vw, 38px);
        line-height: 1.08;
      }

      .device-detail-panel-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border-top: 1px solid #d6e1ee;
      }

      .device-detail-panel {
        position: relative;
        min-height: 210px;
        padding: 28px 34px 30px 0;
        border-bottom: 1px solid #d6e1ee;
        background: transparent;
      }

      .device-detail-panel + .device-detail-panel {
        border-left: 0;
      }

      .device-detail-panel:nth-child(even) {
        padding-right: 0;
        padding-left: 34px;
        border-left: 1px solid #d6e1ee;
      }

      .device-detail-panel-index {
        position: absolute;
        top: 26px;
        right: 22px;
        color: #aab4c3;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.1em;
      }

      .device-detail-panel i {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(40, 95, 196, 0.12);
        border-radius: 50%;
        background: #edf3fc;
        color: #285fc4;
        font-size: 20px;
      }

      .device-detail-panel h3 {
        margin: 24px 0 0;
        color: #06183a;
        font-size: 20px;
        line-height: 1.15;
      }

      .device-detail-panel p {
        margin: 12px 0 0;
        color: #5d6c7f;
        font-size: 14px;
        line-height: 1.65;
      }

      .device-detail-bottom-cta {
        padding: 24px 0 40px;
      }

      .device-detail-bottom-card {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
        grid-template-rows: minmax(220px, auto) auto;
        column-gap: clamp(44px, 5vw, 84px);
        row-gap: 18px;
        align-items: center;
        min-height: 380px;
        padding: clamp(34px, 3.4vw, 52px) clamp(36px, 4.5vw, 68px);
        border: 1px solid #eadab5;
        border-radius: 28px;
        background:
          radial-gradient(circle at 0% 100%, rgba(255, 229, 181, 0.3), transparent 24%),
          radial-gradient(circle at 80% 15%, rgba(255, 238, 203, 0.54), transparent 24%),
          linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 247, 232, 0.94));
        box-shadow: 0 20px 42px rgba(49, 37, 15, 0.06);
        overflow: hidden;
      }

      .device-detail-bottom-copy {
        display: grid;
        align-content: center;
        gap: 13px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        min-width: 0;
      }

      .device-detail-bottom-copy > span {
        width: max-content;
        min-height: 44px;
        padding: 0 22px;
        border-radius: 999px;
        background: #0a224f;
        color: #fff4dc;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
        gap: 12px;
      }

      .device-detail-page .device-detail-bottom-copy > .device-detail-section-pill {
        margin: 0;
      }

      .device-detail-bottom-copy h2 {
        max-width: 30ch;
        margin: 0;
        color: #06183a;
        font-size: clamp(30px, 2.05vw, 38px);
        line-height: 1.08;
        text-wrap: balance;
      }

      .device-detail-bottom-copy p {
        max-width: 58ch;
        margin: 0;
        color: #65748b;
        font-size: 15px;
        line-height: 1.52;
      }

      .device-detail-bottom-points {
        display: grid;
        gap: 14px;
        margin-top: 20px;
      }

      .device-detail-bottom-points span {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        padding: 0;
        position: relative;
        color: #223453;
        font-size: 14px;
        font-weight: 700;
      }

      .device-detail-bottom-points i {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff4dc;
        color: #b47c16;
        font-size: 19px;
        flex: 0 0 auto;
      }

      .device-detail-bottom-visual {
        position: relative;
        z-index: 1;
        min-width: 0;
        min-height: 238px;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: end;
      }

      .device-detail-bottom-stage {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .device-detail-bottom-rings {
        position: absolute;
        z-index: 0;
      }

      .device-detail-bottom-rings {
        left: 50%;
        top: 50%;
        width: min(270px, 72%);
        transform: translate(-50%, -50%);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow:
          0 0 0 18px rgba(255, 255, 255, 0.28),
          0 0 0 40px rgba(255, 255, 255, 0.16);
      }

      .device-detail-bottom-stage img {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        width: clamp(220px, 20vw, 280px);
        max-height: 250px;
        transform: translate(-50%, -50%);
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 18px 28px rgba(35, 46, 66, 0.18));
      }

      .device-detail-bottom-actions {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        position: relative;
        z-index: 5;
        justify-content: center;
        align-self: start;
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 0;
      }

      .device-detail-bottom-actions .device-detail-primary,
      .device-detail-bottom-actions .device-detail-secondary {
        flex: 1 1 0;
        min-width: 0;
        max-width: 220px;
        min-height: 52px;
        border: 1px solid transparent;
        border-radius: 14px;
        font-size: 14px;
        padding: 0 18px;
        transition: transform 180ms ease, background-color 180ms ease,
          border-color 180ms ease, box-shadow 180ms ease;
      }

      .device-detail-bottom-actions .device-detail-primary {
        border-color: rgba(204, 148, 24, 0.7);
        background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
        color: #13284c;
        box-shadow:
          0 8px 18px rgba(192, 140, 24, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.7),
          inset 0 -1px 0 rgba(204, 148, 24, 0.16);
      }

      .device-detail-bottom-actions .device-detail-secondary {
        border-color: #13284c;
        background: #13284c;
        color: #ffffff;
      }

      .device-detail-bottom-actions .device-detail-primary:hover,
      .device-detail-bottom-actions .device-detail-primary:focus-visible {
        border-color: rgba(204, 148, 24, 0.7);
        background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
        color: #13284c;
        box-shadow: 0 13px 28px rgba(3, 16, 39, 0.3);
        transform: translateY(-2px);
      }

      .device-detail-bottom-actions .device-detail-secondary:hover,
      .device-detail-bottom-actions .device-detail-secondary:focus-visible {
        border-color: #1b3766;
        background: #1b3766;
        color: #ffffff;
        box-shadow: 0 13px 28px rgba(3, 16, 39, 0.24);
        transform: translateY(-2px);
      }

      .device-detail-bottom-actions .device-detail-primary:focus-visible,
      .device-detail-bottom-actions .device-detail-secondary:focus-visible {
        outline: 3px solid #facb45;
        outline-offset: 3px;
      }

      .device-detail-bottom-actions .device-detail-primary:active,
      .device-detail-bottom-actions .device-detail-secondary:active {
        transform: translateY(0) scale(0.98);
      }

      .device-detail-bottom-actions .device-detail-primary i {
        transition: transform 180ms ease;
      }

      .device-detail-bottom-actions .device-detail-primary:hover i,
      .device-detail-bottom-actions .device-detail-primary:focus-visible i {
        transform: translateX(6px);
      }

      @media (prefers-reduced-motion: reduce) {
        .device-detail-bottom-actions .device-detail-primary,
        .device-detail-bottom-actions .device-detail-secondary,
        .device-detail-bottom-actions .device-detail-primary i {
          transition: none;
        }

        .device-detail-bottom-actions .device-detail-primary:hover,
        .device-detail-bottom-actions .device-detail-primary:focus-visible,
        .device-detail-bottom-actions .device-detail-secondary:hover,
        .device-detail-bottom-actions .device-detail-secondary:focus-visible,
        .device-detail-bottom-actions .device-detail-primary:active,
        .device-detail-bottom-actions .device-detail-secondary:active,
        .device-detail-bottom-actions .device-detail-primary:hover i,
        .device-detail-bottom-actions .device-detail-primary:focus-visible i {
          transform: none;
        }
      }

      .devices-page-hero {
        position: relative;
        overflow: hidden;
        padding: clamp(28px, 4vw, 54px) 0 clamp(42px, 6vw, 76px);
        background:
          linear-gradient(180deg, #f9fbff 0%, #ffffff 46%, #f7fbff 100%);
        color: #06183a;
      }

      .devices-page-shell {
        width: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container-wide));
        margin: 0 auto;
      }

      .devices-page-breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
      }

      .devices-page-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #43536c;
        text-decoration: none;
        transition: color 0.2s ease;
      }

      .devices-page-breadcrumb a:hover,
      .devices-page-breadcrumb a:focus-visible {
        color: #06183a;
      }

      .devices-hero-panel {
        position: relative;
        min-height: 410px;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
        align-items: center;
        gap: 20px;
        padding: clamp(34px, 4vw, 58px);
        border: 1px solid rgba(214, 224, 238, 0.9);
        border-radius: 28px;
        overflow: hidden;
        background:
          radial-gradient(circle at 80% 34%, rgba(255, 244, 221, 0.92), transparent 34%),
          linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 248, 236, 0.86) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.96),
          0 24px 70px rgba(38, 57, 91, 0.1);
      }

      .devices-hero-panel::before,
      .devices-hero-panel::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .devices-hero-panel::before {
        width: 370px;
        height: 370px;
        right: 104px;
        top: 34px;
        border: 2px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        box-shadow:
          0 0 0 58px rgba(255, 255, 255, 0.18),
          0 0 0 110px rgba(255, 255, 255, 0.1);
      }

      .devices-hero-panel::after {
        right: -30px;
        top: 80px;
        width: 360px;
        height: 220px;
        background-image:
          radial-gradient(circle, rgba(230, 166, 54, 0.18) 1px, transparent 1.4px);
        background-size: 12px 12px;
        mask-image: radial-gradient(circle at 50% 50%, #000 0 38%, transparent 68%);
        opacity: 0.66;
      }

      .devices-hero-copy {
        position: relative;
        z-index: 1;
        max-width: none;
      }

      .devices-hero-copy h1 {
        max-width: 17ch;
        margin: 0;
        color: #06183a;
        font-size: clamp(30px, 3vw, 46px);
        line-height: 1.1;
        letter-spacing: 0;
        font-weight: 700;
        text-wrap: balance;
      }

      .devices-hero-copy > p:not(.cochlear-kicker) {
        max-width: 560px;
        margin: 16px 0 0;
        color: #526174;
        font-size: clamp(13px, 0.92vw, 15px);
        line-height: 1.58;
        letter-spacing: 0;
      }

      .devices-hero-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(12px, 1.5vw, 22px);
        margin-top: 42px;
      }

      .devices-hero-benefits span {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        min-width: 0;
        align-items: center;
      }

      .devices-hero-benefits i {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #a47012;
        background: #fff4dd;
        font-size: 21px;
      }

      .devices-hero-benefits strong {
        color: #06183a;
        font-size: 13px;
        line-height: 1.25;
      }

      .devices-hero-benefits small {
        color: #6b7280;
        font-size: 12px;
        line-height: 1.35;
      }

      .devices-hero-visual {
        position: relative;
        z-index: 1;
        min-height: 330px;
      }

      .devices-hero-device {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
      }

      .devices-hero-device::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 14px;
        width: min(420px, 92%);
        height: 102px;
        border-radius: 50%;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 231, 237, 0.9));
        border: 1px solid rgba(219, 224, 232, 0.84);
        box-shadow:
          inset 0 4px 14px rgba(255, 255, 255, 0.94),
          inset 0 -7px 14px rgba(172, 181, 193, 0.22),
          0 20px 42px rgba(56, 70, 92, 0.16);
        transform: translateX(-50%);
      }

      .devices-hero-device::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 64px;
        width: min(410px, 90%);
        height: 7px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(231, 161, 45, 0.88), transparent);
        transform: translateX(-50%);
        box-shadow: 0 0 18px rgba(226, 157, 43, 0.34);
      }

      .devices-hero-device img {
        position: relative;
        z-index: 1;
        width: min(315px, 76%);
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 28px 26px rgba(32, 42, 58, 0.18));
      }

      .devices-filter-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 38px 0 30px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .devices-filter-bar::-webkit-scrollbar {
        display: none;
      }

      .devices-filter {
        flex: 0 0 auto;
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0 22px;
        border: 1px solid #dce4f0;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        color: #26364d;
        font-family: inherit;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 12px 30px rgba(23, 38, 64, 0.06);
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
      }

      .devices-filter i {
        font-size: 18px;
      }

      .devices-filter-new {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 0 7px;
        border-radius: 999px;
        background: #fff1d6;
        color: #9a650c;
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .devices-filter:hover,
      .devices-filter:focus-visible,
      .devices-filter.is-active {
        transform: translateY(-1px);
        border-color: var(--series-color, #082455);
        background: var(--series-color, #082455);
        color: var(--series-contrast, #ffffff);
        outline: none;
      }

      .devices-filter:hover .devices-filter-new,
      .devices-filter:focus-visible .devices-filter-new,
      .devices-filter.is-active .devices-filter-new {
        background: var(--series-contrast, #ffffff);
        color: var(--series-color, #082455);
      }

      .device-series-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        scroll-margin-top: 120px;
      }

      .device-series-card {
        position: relative;
        min-height: 450px;
        display: flex;
        flex-direction: column;
        padding: 24px 22px 22px;
        border: 1px solid #e4ebf5;
        border-radius: 20px;
        background: #ffffff;
        color: #06183a;
        text-decoration: none;
        overflow: hidden;
        box-shadow: 0 20px 54px rgba(29, 45, 78, 0.08);
        transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
      }

      .device-series-card[hidden] {
        display: none !important;
      }

      .device-series-card:hover,
      .device-series-card:focus-visible,
      .device-series-card:focus-within {
        transform: translateY(-4px);
        border-color: rgba(18, 68, 150, 0.28);
        box-shadow: 0 28px 70px rgba(25, 48, 86, 0.14);
        outline: none;
      }

      .device-series-product-link {
        min-height: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        color: inherit;
        text-decoration: none;
      }

      .device-series-product-link:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--series-color, #2b68ba) 70%, #0d3474);
        outline-offset: 4px;
      }

      .device-series-badge {
        position: absolute;
        top: 40px;
        left: 34px;
        z-index: 2;
        min-height: 29px;
        display: inline-flex;
        align-items: center;
        padding: 0 13px;
        border-radius: 999px;
        background: var(--series-color, #f8ebcc);
        color: var(--series-contrast, #17324d);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.01em;
        text-transform: none;
        text-decoration: none;
      }

      a.device-series-badge:hover,
      a.device-series-badge:focus-visible {
        filter: brightness(0.96);
      }

      a.device-series-badge:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--series-color, #2b68ba) 70%, #0d3474);
        outline-offset: 3px;
      }

      .device-series-card--blue {
        --series-color: #e5efff;
        --series-contrast: #17324d;
      }

      .device-series-card--gold {
        --series-color: #def6e8;
        --series-contrast: #17324d;
      }

      .device-series-media {
        position: relative;
        height: 224px;
        margin: 0 -10px 12px;
        border-radius: 16px;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.86) 48%, rgba(241, 244, 249, 0.92) 100%);
      }

      .device-series-media::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 24px;
        width: 116px;
        height: 20px;
        border-radius: 50%;
        background: rgba(40, 54, 76, 0.13);
        filter: blur(8px);
        transform: translateX(-50%);
      }

      .device-series-device {
        position: absolute;
        inset: 16px 0 24px;
        z-index: 1;
        display: grid;
        place-items: center;
      }

      .device-series-device img {
        width: auto;
        height: 72%;
        max-width: 72%;
        object-fit: contain;
        transform: translate(-4%, -19%) scale(1.02);
        transform-origin: center;
        filter: drop-shadow(0 20px 18px rgba(29, 42, 62, 0.16));
      }

      .device-series-card--dark .device-series-device img,
      .device-series-card--blue .device-series-device img {
        transform: translate(-4%, -19%) scale(1.02);
      }

      .device-series-colors {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
      }

      .device-series-swatches {
        display: flex;
        gap: 9px;
      }

      .device-series-swatches i {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--device-color, #d8d4cc);
        box-shadow: inset 0 0 0 1px rgba(4, 18, 42, 0.08);
      }

      .device-series-swatches i:nth-child(2) {
        background: var(--device-color, #b7b1a5);
      }

      .device-series-swatches i:nth-child(3) {
        background: var(--device-color, #1c2733);
      }

      .device-series-card--blue .device-series-swatches i:nth-child(1) {
        background: var(--device-color, #d9dde4);
      }

      .device-series-card--blue .device-series-swatches i:nth-child(2) {
        background: var(--device-color, #6b7ed8);
      }

      .device-series-card--blue .device-series-swatches i:nth-child(3) {
        background: var(--device-color, #173679);
      }

      .device-series-color-count {
        color: #52627a;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .device-series-card strong {
        display: block;
        max-width: 14ch;
        color: #06183a;
        font-size: clamp(19px, 1.45vw, 23px);
        line-height: 1.14;
        letter-spacing: 0;
      }

.device-series-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
        gap: 14px;
        margin-top: auto;
        padding-top: 20px;
        color: #06183a;
  font-size: 13px;
  font-weight: 700;
}

.device-series-link > span {
  display: inline-block;
  color: #072557;
  background: linear-gradient(90deg, #072557 0%, #072557 32%, #2581d8 50%, #072557 68%, #072557 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: device-series-cta-color 2.6s ease-in-out infinite;
}

.device-series-link i {
  width: 46px;
  height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #072557;
  color: #ffffff;
  font-size: 19px;
  transition: transform 0.22s ease, background 0.22s ease;
}

      .device-series-card:hover .device-series-link i,
.device-series-card:focus-visible .device-series-link i,
.device-series-card:focus-within .device-series-link i {
  transform: translateX(3px);
  background: #0d3474;
}

@keyframes device-series-cta-color {
  0%,
  12% {
    background-position: 100% 0;
  }

  78%,
  100% {
    background-position: 0 0;
  }
}

      .devices-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 30px 0 16px;
      }

      .devices-page-link {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d8e3f2;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
        color: #24344c;
        text-decoration: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(21, 38, 68, 0.06);
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
      }

      .devices-page-link:hover,
      .devices-page-link:focus-visible {
        transform: translateY(-1px);
        border-color: #082455;
        outline: none;
      }

      .devices-page-link.is-active {
        border-color: #082455;
        background: #082455;
        color: #ffffff;
      }

      .devices-warranty-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 30px 0 40px;
        color: #758296;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
      }

      .devices-warranty-note i {
        color: #c58a25;
        font-size: 18px;
      }

      .devices-why-band {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 30px;
        align-items: stretch;
        padding: clamp(30px, 4vw, 48px);
        border-radius: 24px;
        overflow: hidden;
        background:
          radial-gradient(circle at 74% 30%, rgba(43, 121, 255, 0.3), transparent 36%),
          radial-gradient(circle at 16% 78%, rgba(11, 91, 209, 0.24), transparent 34%),
          linear-gradient(180deg, #020813 0%, #06132c 48%, #020813 100%);
        color: #eff6ff;
        box-shadow: 0 28px 70px rgba(5, 24, 58, 0.22);
      }

      .devices-why-band::before,
      .devices-why-band::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
      }

      .devices-why-band::before {
        background-image: url("data:image/svg+xml,%3Csvg width='1800' height='620' viewBox='0 0 1800 620' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231c78ff' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M-80 410 C160 220 300 590 520 400 S900 210 1120 345 1460 515 1880 210'/%3E%3Cpath d='M-80 438 C170 250 315 580 535 425 S920 245 1134 372 1470 525 1880 250' opacity='.6'/%3E%3Cpath d='M-80 466 C180 280 330 570 550 450 S940 280 1148 399 1480 535 1880 290' opacity='.35'/%3E%3Cpath d='M-80 494 C190 310 345 560 565 475 S960 315 1162 426 1490 545 1880 330' opacity='.24'/%3E%3C/g%3E%3Cg fill='%232c89ff' opacity='.42'%3E%3Ccircle cx='1520' cy='72' r='2'/%3E%3Ccircle cx='1560' cy='94' r='2'/%3E%3Ccircle cx='1600' cy='116' r='2'/%3E%3Ccircle cx='1640' cy='138' r='2'/%3E%3Ccircle cx='1680' cy='160' r='2'/%3E%3Ccircle cx='1720' cy='182' r='2'/%3E%3Ccircle cx='1760' cy='204' r='2'/%3E%3C/g%3E%3C/svg%3E");
        background-position: center 56%;
        background-repeat: no-repeat;
        background-size: min(1800px, 150vw) auto;
        opacity: 0.78;
      }

      .devices-why-band::after {
        background-image: url("data:image/svg+xml,%3Csvg width='520' height='320' viewBox='0 0 520 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232e8bff' opacity='.34'%3E%3Ccircle cx='16' cy='18' r='1.4'/%3E%3Ccircle cx='56' cy='18' r='1.2'/%3E%3Ccircle cx='96' cy='18' r='1'/%3E%3Ccircle cx='136' cy='18' r='1.2'/%3E%3Ccircle cx='176' cy='18' r='1.4'/%3E%3Ccircle cx='216' cy='18' r='1'/%3E%3Ccircle cx='256' cy='18' r='1.2'/%3E%3Ccircle cx='296' cy='18' r='1.4'/%3E%3Ccircle cx='336' cy='18' r='1'/%3E%3Ccircle cx='376' cy='18' r='1.2'/%3E%3Ccircle cx='416' cy='18' r='1.4'/%3E%3Ccircle cx='456' cy='18' r='1'/%3E%3Ccircle cx='496' cy='18' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
        background-position: right -120px top -42px;
        background-repeat: repeat;
        background-size: 420px 258px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 44%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 44%, #000 100%);
        opacity: 0.52;
      }

      .devices-why-intro {
        display: flex;
        align-items: center;
      }

      .devices-why-intro h2 {
        max-width: 15ch;
        margin: 0;
        color: #ffffff;
        font-size: clamp(22px, 1.85vw, 29px);
        line-height: 1.12;
        letter-spacing: 0;
      }

      .devices-why-items {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .devices-why-items article {
        min-height: 188px;
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 0 28px;
        border-left: 1px dashed rgba(111, 171, 255, 0.42);
      }

      .devices-why-items article > span {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(58, 123, 225, 0.28);
        color: #dceaff;
        font-size: 26px;
      }

      .devices-why-items h3 {
        margin: 8px 0 0;
        color: #fff4d7;
        font-size: 14px;
        line-height: 1.35;
        letter-spacing: 0;
      }

      .devices-why-items p {
        margin: 0;
        color: rgba(236, 244, 255, 0.8);
        font-size: 12px;
        line-height: 1.62;
      }

      .devices-consult-cta {
        position: relative;
        display: grid;
        grid-template-columns: minmax(370px, 0.48fr) minmax(420px, 1fr) 260px;
        gap: clamp(42px, 5vw, 82px);
        align-items: center;
        width: min(100%, 1320px);
        margin: 44px auto 0;
        min-height: 272px;
        padding: 0 clamp(32px, 4vw, 64px) 0 0;
        border: 1px solid #f0dfbd;
        border-radius: 22px;
        overflow: hidden;
        background:
          radial-gradient(circle at 14% 48%, rgba(255, 236, 199, 0.66), transparent 21%),
          radial-gradient(circle at 2% 100%, rgba(232, 183, 86, 0.12), transparent 19%),
          linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 235, 0.94));
        box-shadow: 0 20px 52px rgba(78, 54, 18, 0.07);
      }

      .devices-consult-visual {
        position: relative;
        align-self: stretch;
        min-height: 272px;
        border-radius: 0;
        overflow: hidden;
        background:
          radial-gradient(circle at 43% 54%, rgba(255, 255, 255, 0.9), rgba(255, 244, 222, 0.64) 42%, transparent 43%),
          linear-gradient(90deg, rgba(255, 242, 220, 0.6), rgba(255, 250, 241, 0));
      }

      .devices-consult-visual::before {
        content: "";
        position: absolute;
        left: 26%;
        top: 20px;
        width: 232px;
        height: 232px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.78);
        box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.22);
      }

      .devices-consult-visual::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 180px;
        height: 110px;
        background-image: radial-gradient(circle, rgba(216, 154, 48, 0.16) 1px, transparent 1.4px);
        background-size: 10px 10px;
        mask-image: radial-gradient(circle at 0% 100%, #000 0 45%, transparent 72%);
      }

      .devices-consult-visual img {
        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: 1;
        width: 404px;
        max-width: none;
        height: auto;
        filter: drop-shadow(0 18px 18px rgba(42, 35, 28, 0.14));
      }

      .devices-consult-copy,
      .devices-consult-actions {
        position: relative;
        z-index: 1;
      }

      .devices-consult-copy {
        align-self: center;
        padding-block: 34px;
      }

      .devices-consult-copy span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 13px;
        border-radius: 999px;
        background: #edf2fb;
        color: #33476b;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .devices-consult-copy h2 {
        max-width: 25ch;
        margin: 12px 0 0;
        color: #06183a;
        font-size: clamp(24px, 1.85vw, 30px);
        line-height: 1.14;
        letter-spacing: 0;
      }

      .devices-consult-copy p {
        max-width: 600px;
        margin: 14px 0 0;
        color: #667386;
        font-size: 13px;
        line-height: 1.56;
      }

      .devices-consult-actions {
        display: grid;
        gap: 14px;
        align-self: center;
      }

      .devices-primary-btn,
      .devices-secondary-btn {
        min-height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 0 20px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      }

      .devices-primary-btn {
        background: #082455;
        color: #ffffff;
        box-shadow: 0 18px 34px rgba(8, 36, 85, 0.2);
      }

      .devices-secondary-btn {
        border: 1px solid #d8e0ec;
        background: rgba(255, 255, 255, 0.7);
        color: #25364f;
      }

      .devices-primary-btn:hover,
      .devices-primary-btn:focus-visible,
      .devices-secondary-btn:hover,
      .devices-secondary-btn:focus-visible {
        transform: translateY(-2px);
        outline: none;
      }

      .devices-secondary-btn:hover,
      .devices-secondary-btn:focus-visible {
        border-color: #b8c5d6;
        box-shadow: 0 16px 30px rgba(31, 49, 78, 0.08);
      }

      @media (max-width: 1180px) {
        .device-detail-hero-card,
        .device-story-grid,
        .device-detail-bottom-card {
          grid-template-columns: 1fr;
        }

        .device-detail-bottom-card {
          grid-template-rows: auto;
          min-height: 0;
          row-gap: 20px;
          padding: 34px clamp(28px, 5vw, 46px) 38px;
        }

        .device-detail-bottom-copy {
          grid-column: auto;
          grid-row: auto;
        }

        .device-detail-hero-visual {
          min-height: 440px;
        }

        .device-detail-product-stage::before {
          top: 22px;
          width: 320px;
          transform: translateX(-50%);
        }

        .device-detail-product-stage img {
          width: 320px;
          margin: 4px 0 0;
        }

        .device-detail-color-options {
          bottom: 14px;
          transform: translateX(-50%);
        }

        .device-detail-feature-strip,
        .device-detail-panel-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .device-detail-feature-strip span:nth-child(3) {
          border-left: 0;
        }

        .device-detail-feature-strip span:nth-child(n + 3) {
          border-top: 1px solid rgba(203, 214, 228, 0.92);
        }

        .device-detail-bottom-actions {
          grid-column: auto;
          grid-row: auto;
          width: min(100%, 480px);
          margin-inline: auto;
          justify-content: center;
          flex-wrap: nowrap;
          align-self: auto;
        }

        .device-detail-bottom-visual {
          grid-column: auto;
          grid-row: auto;
          width: min(100%, 520px);
          min-height: 270px;
          margin-inline: auto;
          align-self: auto;
        }

        .device-detail-bottom-rings {
          left: 50%;
          right: auto;
          top: 50%;
          width: 244px;
          transform: translate(-50%, -50%);
        }

        .device-detail-bottom-stage img {
          left: 50%;
          right: auto;
          top: 50%;
          width: 250px;
          max-height: 250px;
          transform: translate(-50%, -50%);
        }

        .device-detail-bottom-actions .device-detail-primary,
        .device-detail-bottom-actions .device-detail-secondary {
          min-width: 0;
          min-height: 54px;
          font-size: 15px;
        }
      }

      @media (max-width: 720px) {
        .device-detail-shell {
          width: min(calc(100% - 32px), var(--ui-container));
        }

        .device-detail-breadcrumb {
          white-space: nowrap;
          overflow-x: auto;
        }

        .device-detail-hero-card,
        .device-detail-story,
        .device-detail-bottom-card {
          border-radius: 22px;
        }

        .device-detail-hero-card {
          row-gap: 24px;
          padding: 24px 0 48px;
        }

        .device-detail-hero-copy h1 {
          font-size: clamp(34px, 10.5vw, 45px);
          line-height: 1.08;
        }

        .device-detail-hero-copy > p:not(.device-detail-kicker),
        .device-story-copy p,
        .device-detail-bottom-copy p {
          font-size: 14px;
          line-height: 1.62;
        }

        .device-detail-hero-copy > p:not(.device-detail-kicker) {
          margin-top: 18px;
          font-size: 15px;
          line-height: 1.55;
        }

        .device-detail-hero-visual {
          min-height: 360px;
          overflow: hidden;
          border-radius: 0 0 24px 24px;
        }

        .device-detail-product-stage::before {
          top: 38px;
          width: min(286px, 76%);
        }

        .device-detail-product-stage img {
          width: min(270px, 78%);
          margin: 6px 0 0;
        }

        .device-detail-color-options {
          bottom: 18px;
          display: grid;
          grid-template-columns: 1fr;
          justify-items: center;
          width: min(calc(100% - 24px), 340px);
          max-width: none;
          min-height: 0;
          gap: 9px;
          box-sizing: border-box;
          padding: 11px 16px 12px;
          border-radius: 24px;
        }

        .device-detail-color-title {
          font-size: 9.5px;
          text-align: center;
        }

        .device-detail-color-options ul {
          width: 100%;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px 10px;
          overflow: visible;
          padding: 2px;
        }

        .device-detail-color-swatch {
          width: 22px;
          height: 22px;
        }

        .device-detail-feature-strip,
        .device-detail-panel-grid,
        .device-detail-stats {
          grid-template-columns: 1fr;
        }

        .device-detail-feature-strip {
          gap: 0;
        }

        .device-detail-feature-strip span + span,
        .device-detail-feature-strip span:nth-child(3) {
          border-left: 0;
        }

        .device-detail-feature-strip span + span {
          border-top: 1px solid rgba(203, 214, 228, 0.92);
        }

        .device-detail-panel,
        .device-detail-panel:nth-child(even) {
          padding: 24px 0 26px;
          border-left: 0;
        }

        .device-detail-panel + .device-detail-panel {
          border-top: 0;
        }

        .device-detail-panel-index {
          top: 24px;
          right: 0;
        }

        .device-story-media {
          min-height: 300px;
        }

        .device-story-play {
          left: 16px;
          right: 16px;
          bottom: 16px;
          padding: 14px;
        }

        .device-story-play-btn {
          width: 48px;
          height: 48px;
          font-size: 20px;
        }

        .device-story-copy h2,
        .device-detail-panels-head h2,
        .device-detail-bottom-copy h2 {
          font-size: 28px;
          line-height: 1.1;
        }

        .device-detail-stats article {
          padding: 18px 0;
        }

        .device-detail-stats article + article {
          border-left: 0;
          border-top: 1px solid rgba(228, 213, 182, 0.82);
        }

        .device-detail-panel {
          min-height: 0;
        }

        .device-detail-bottom-actions,
        .device-detail-hero-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .device-detail-bottom-card {
          padding: 26px 20px 22px;
          gap: 18px;
        }

        .device-detail-bottom-copy > span {
          min-height: 38px;
          padding: 0 16px;
          font-size: 12px;
        }

        .device-detail-bottom-copy h2 {
          max-width: none;
          font-size: 28px;
          line-height: 1.08;
          text-wrap: pretty;
        }

        .device-detail-bottom-copy p {
          max-width: none;
          font-size: 14px;
          line-height: 1.6;
        }

        .device-detail-bottom-points {
          display: grid;
          gap: 8px;
          margin-top: 10px;
        }

        .device-detail-bottom-points span {
          padding: 0;
          font-size: 14px;
          min-height: 34px;
        }

        .device-detail-bottom-points i {
          width: 34px;
          height: 34px;
          font-size: 18px;
        }

        .device-detail-bottom-points span + span::before {
          content: none;
        }

        .device-detail-bottom-visual {
          min-height: 224px;
        }

        .device-detail-bottom-rings {
          width: 204px;
          top: 50%;
          box-shadow:
            0 0 0 18px rgba(255, 255, 255, 0.26),
            0 0 0 36px rgba(255, 255, 255, 0.14);
        }

        .device-detail-bottom-stage img {
          width: 210px;
          max-height: 210px;
          top: 50%;
        }

        .device-detail-bottom-actions {
          gap: 10px;
        }

        .device-detail-bottom-actions .device-detail-primary,
        .device-detail-bottom-actions .device-detail-secondary {
          min-width: 0;
          width: 100%;
          max-width: none;
          min-height: 54px;
          border-radius: 14px;
          font-size: 15px;
          padding: 0 20px;
        }
      }

      @media (max-width: 1180px) {
        .devices-hero-panel {
          grid-template-columns: minmax(0, 1fr);
          min-height: auto;
        }

        .devices-hero-copy {
          max-width: 760px;
        }

        .devices-hero-copy h1 {
          max-width: 15ch;
        }

        .devices-hero-visual {
          min-height: 250px;
        }

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

        .devices-why-band,
        .devices-consult-cta {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .devices-why-intro h2 {
          max-width: 22ch;
        }

        .devices-why-items {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 26px 0;
        }

        .devices-consult-visual {
          max-width: 520px;
        }
      }

      @media (max-width: 720px) {
        .devices-page-hero {
          padding: 26px 0 46px;
        }

        .devices-page-shell {
          width: min(calc(100% - 32px), var(--ui-container));
        }

        .devices-page-breadcrumb {
          overflow-x: auto;
          white-space: nowrap;
        }

        .devices-hero-panel {
          padding: 22px;
          border-radius: 22px;
          background:
            radial-gradient(circle at 74% 70%, rgba(255, 244, 221, 0.92), transparent 40%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 237, 0.84));
        }

        .devices-hero-copy h1 {
          max-width: 14ch;
          font-size: clamp(27px, 7.1vw, 32px);
          line-height: 1.1;
        }

        .devices-hero-copy > p:not(.cochlear-kicker) {
          margin-top: 16px;
          font-size: 13px;
          line-height: 1.55;
        }

        .devices-hero-benefits {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
          margin-top: 22px;
        }

        .devices-hero-benefits span {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 0;
          text-align: center;
        }

        .devices-hero-benefits i {
          width: 38px;
          height: 38px;
          margin-bottom: 9px;
          font-size: 17px;
        }

        .devices-hero-benefits strong {
          display: block;
          width: 100%;
          font-size: 11px;
          line-height: 1.25;
          white-space: normal;
          overflow-wrap: anywhere;
        }

        .devices-hero-benefits small {
          display: block;
          width: 100%;
          margin-top: 4px;
          font-size: 9.5px;
          line-height: 1.3;
          white-space: normal;
          overflow-wrap: anywhere;
        }

        .devices-hero-visual {
          min-height: 250px;
          margin-top: 0;
        }

        .devices-hero-device::before {
          bottom: 10px;
          width: min(300px, 88%);
          height: 80px;
        }

        .devices-hero-device::after {
          bottom: 52px;
          width: min(280px, 84%);
        }

    .devices-hero-device img {
        width: min(220px, 68%);
        transform: translateY(-20px);
    }

        .devices-filter-bar {
          gap: 10px;
          margin: 24px 0 20px;
          padding-bottom: 4px;
        }

        .devices-filter {
          min-height: 46px;
          padding: 0 15px;
          font-size: 12px;
        }

        .devices-filter-new {
          min-height: 18px;
          padding-inline: 6px;
          font-size: 8px;
        }

        .device-series-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .device-series-card {
          min-height: 350px;
          padding: 16px;
          border-radius: 18px;
        }

        .device-series-media {
          height: 176px;
          margin: 0 -6px 10px;
        }

        .device-series-card .device-series-device {
          inset: 8px 8px 18px;
        }

        .device-series-card .device-series-device img {
          width: clamp(130px, 38vw, 150px) !important;
          height: clamp(130px, 38vw, 150px) !important;
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          transform: translate(-4%, 0) scale(1.02);
          transform-origin: center;
        }

        .device-series-colors {
          margin-bottom: 12px;
        }

        .device-series-card strong {
          max-width: 19ch;
          font-size: clamp(14px, 3.9vw, 15px);
          line-height: 1.17;
        }

        .device-series-link {
          padding-top: 12px;
        }

        .device-series-link i {
          width: 42px;
          height: 42px;
        }

        .device-series-card > span:not(.device-series-badge, .device-series-media, .device-series-colors, .device-series-link) {
          font-size: 13px;
          line-height: 1.55;
        }

        .devices-pagination {
          margin: 24px 0 14px;
        }

        .devices-warranty-note {
          margin: 22px 0 28px;
          align-items: flex-start;
          gap: 10px;
          padding-inline: 12px;
          text-align: left;
        }

        .devices-warranty-note i {
          flex: 0 0 auto;
          margin-top: 2px;
        }

        .devices-warranty-note span {
          width: auto;
          max-width: 32ch;
        }

        .devices-why-band {
          gap: 22px;
          padding: 22px 18px 20px;
          border-radius: 20px;
        }

        .devices-why-intro {
          justify-content: flex-start;
          padding: 4px 10px 0;
          text-align: left;
        }

        .devices-why-intro h2 {
          width: 100%;
          max-width: none;
          font-size: 22px;
          line-height: 1.08;
          text-wrap: pretty;
        }

        .devices-why-items {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }

        .devices-why-items article {
          min-width: 0;
          min-height: 136px;
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: 38px auto 1fr;
          gap: 8px;
          align-content: start;
          padding: 13px 12px;
          border: 1px solid rgba(118, 174, 255, 0.17);
          border-radius: 14px;
          background:
            linear-gradient(145deg, rgba(27, 72, 137, 0.34), rgba(4, 20, 48, 0.7));
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .devices-why-items article:last-child {
          padding-bottom: 13px;
          border-bottom: 1px solid rgba(118, 174, 255, 0.17);
        }

        .devices-why-items article > span {
          width: 38px;
          height: 38px;
          font-size: 18px;
        }

        .devices-why-items h3 {
          max-width: 100%;
          margin: 0;
          font-size: 12px;
          line-height: 1.25;
          text-wrap: balance;
          overflow-wrap: anywhere;
        }

        .devices-why-items p {
          max-width: 100%;
          font-size: 10.5px;
          line-height: 1.45;
          text-wrap: pretty;
          overflow-wrap: anywhere;
        }

        .devices-consult-cta {
          gap: 22px;
          margin-top: 28px;
          padding: 0 0 24px;
          border-radius: 20px;
        }

        .devices-consult-visual {
          order: 3;
          min-height: 250px;
          width: 100%;
          max-width: none;
          margin-bottom: -24px;
        }

        .devices-consult-visual img {
          left: 50%;
          bottom: -1px;
          display: block;
          width: min(390px, 104vw);
          max-width: none;
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%);
        }

        .devices-consult-copy {
          order: 1;
          width: 100%;
          max-width: none;
          padding: 24px 22px 0;
          text-align: left;
        }

        .devices-consult-copy h2 {
          width: 100%;
          max-width: none;
          font-size: 24px;
          line-height: 1.16;
          text-wrap: pretty;
        }

        .devices-consult-copy p {
          width: 100%;
          max-width: none;
          text-wrap: pretty;
        }

        .devices-consult-actions {
          order: 2;
          gap: 12px;
          margin-inline: 22px;
        }

        .devices-primary-btn,
        .devices-secondary-btn {
          min-height: 52px;
          width: 100%;
        }
      }

      .blog-section {
        position: relative;
        padding: 50px 0 56px;
        overflow: hidden;
        background:
          radial-gradient(circle at 12% 18%, rgba(91, 153, 233, 0.09), transparent 18%),
          radial-gradient(circle at 88% 10%, rgba(135, 179, 241, 0.1), transparent 16%),
          radial-gradient(circle at 8% 84%, rgba(245, 201, 79, 0.06), transparent 16%),
          linear-gradient(180deg, #f8fbff 0%, #f4f8fd 46%, #ffffff 100%);
      }

      .blog-section::before,
      .blog-section::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .blog-section::before {
        background:
          radial-gradient(circle at 4% 16%, rgba(158, 190, 244, 0.42), transparent 12%),
          radial-gradient(circle at 94% 14%, rgba(158, 190, 244, 0.36), transparent 11%),
          radial-gradient(circle at 88% 76%, rgba(158, 190, 244, 0.3), transparent 10%);
        opacity: 0.5;
      }

      .blog-section::after {
        background-image:
          url("data:image/svg+xml,%3Csvg width='640' height='180' viewBox='0 0 640 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%239bbcf2' stroke-width='1.1' opacity='.24'%3E%3Cpath d='M0 104 C54 44 92 164 150 104 S260 44 320 104 S430 164 490 104 S590 44 640 104'/%3E%3Cpath d='M0 120 C54 60 92 180 150 120 S260 60 320 120 S430 180 490 120 S590 60 640 120'/%3E%3Cpath d='M0 136 C54 76 92 196 150 136 S260 76 320 136 S430 196 490 136 S590 76 640 136'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(circle, rgba(137, 172, 224, 0.66) 1px, transparent 1.45px);
        background-repeat: no-repeat, repeat;
        background-position: left 4% top 10%, right 4% bottom 12%;
        background-size: 640px 180px, 18px 18px;
        opacity: 0.32;
      }

      .blog-shell {
        position: relative;
        z-index: 1;
        width: min(100% - 96px, 1200px);
        margin: 0 auto;
      }

      .blog-header {
        max-width: 860px;
        margin: 0 auto 22px;
        text-align: center;
      }

      .blog-header .blog-kicker {
        display: flex;
        width: fit-content;
        min-height: 36px;
        align-items: center;
        margin: 0 auto 18px;
        padding: 4px 16px;
        border: 1px solid rgba(19, 40, 76, 0.42);
        border-radius: 999px;
        color: rgba(19, 40, 76, 0.72);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1;
        text-transform: uppercase;
      }

      .blog-header h2 {
        margin: 0;
        color: #13284c;
        font-size: clamp(34px, 3.2vw, 50px);
        line-height: 1.02;
        letter-spacing: -0.055em;
        text-wrap: balance;
      }

      .blog-header p {
        max-width: 860px;
        margin: 12px auto 0;
        color: rgba(32, 41, 57, 0.72);
        font-size: clamp(14px, 1.05vw, 16px);
        line-height: 1.55;
        text-wrap: balance;
      }

      .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
      }

      .blog-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(19, 40, 76, 0.09);
        border-radius: 22px;
        background:
          radial-gradient(circle at 50% 0%, rgba(93, 141, 217, 0.08), transparent 42%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
        color: inherit;
        text-decoration: none;
        box-shadow:
          0 18px 42px rgba(25, 48, 85, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.92);
        transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
      }

      .blog-card:hover,
      .blog-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(94, 136, 216, 0.22);
        box-shadow:
          0 20px 46px rgba(25, 48, 85, 0.11),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
        outline: none;
      }

      .blog-card:focus-visible {
        box-shadow:
          0 0 0 3px rgba(245, 201, 79, 0.24),
          0 20px 46px rgba(25, 48, 85, 0.11),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      .blog-card-media {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1.48 / 1;
        background:
          radial-gradient(circle at 22% 20%, rgba(95, 149, 230, 0.1), transparent 26%),
          linear-gradient(135deg, #edf4fd 0%, #ffffff 54%, #f6f8fd 100%);
      }

      .blog-card-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(14, 35, 74, 0.08) 100%);
        pointer-events: none;
      }

      .blog-card-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .blog-card[data-blog-card="0"] .blog-card-media img {
        object-position: 44% 36%;
      }

      .blog-card[data-blog-card="1"] .blog-card-media img {
        object-position: 58% 28%;
      }

      .blog-card[data-blog-card="2"] .blog-card-media img {
        object-position: 60% 30%;
      }

      .blog-card-category {
        position: absolute;
        left: 14px;
        top: 14px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 0 13px;
        border-radius: 999px;
        border: 1px solid #dce6f2;
        background: #f5f8fc;
        color: #071a3b;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.02em;
        box-shadow:
          0 8px 18px rgba(7, 26, 59, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
      }

      .blog-card-category::before {
        width: 4px;
        height: 16px;
        flex: 0 0 4px;
        border-radius: 999px;
        background: var(--category-color, #2563eb);
        content: "";
      }

      .blog-card-body {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        padding: 18px 18px 16px;
      }

      .blog-card-title {
        margin: 0;
        color: #13284c;
        font-size: clamp(20px, 1.9vw, 23px);
        line-height: 1.14;
        letter-spacing: -0.045em;
        text-wrap: balance;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
      }

      .blog-card-copy {
        margin: 10px 0 0;
        color: rgba(32, 41, 57, 0.72);
        font-size: 14px;
        line-height: 1.56;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
      }

      .blog-card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: auto;
        padding-top: 18px;
      }

      .blog-card-date {
        display: inline-flex;
        align-items: center;
        gap: 0;
        color: rgba(45, 58, 84, 0.74);
        font-size: 14px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
      }

      .blog-card-arrow {
        display: grid;
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 44%),
          linear-gradient(180deg, #4e86eb 0%, #2459cf 100%);
        color: #ffffff;
        box-shadow:
          0 12px 24px rgba(47, 88, 183, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transition: transform 0.24s ease, box-shadow 0.24s ease;
      }

      .blog-card-arrow i {
        font-size: 18px;
        transition: transform 0.24s ease;
      }

      .blog-card:hover .blog-card-arrow,
      .blog-card:focus-visible .blog-card-arrow {
        transform: translateX(2px);
      }

      .blog-card:hover .blog-card-arrow i,
      .blog-card:focus-visible .blog-card-arrow i {
        transform: translateX(1px);
      }

      .blog-section .blog-card-meta {
        border-top: 0;
      }

      .blog-page .blog-card-meta {
        border-top: 0;
      }

      .blog-section .blog-card-date {
        gap: 7px;
      }

      .blog-page .blog-card-date {
        gap: 7px;
      }

      .blog-section .blog-card-date i {
        color: #4675c8;
        font-size: 15px;
      }

      .blog-page .blog-card-date i {
        color: #4675c8;
        font-size: 15px;
      }

      .blog-card-action {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 7px;
        min-height: 36px;
        margin: -7px -6px -7px 0;
        padding: 0 8px;
        border-radius: 10px;
        color: #2459a8;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .blog-card-action i {
        font-size: 16px;
        transition: transform 0.2s ease;
      }

      .blog-card:hover .blog-card-action,
      .blog-card:focus-visible .blog-card-action {
        background: rgba(63, 125, 228, 0.09);
        color: #174b9c;
      }

      .blog-card:hover .blog-card-action i,
      .blog-card:focus-visible .blog-card-action i {
        transform: translateX(3px);
      }

      .blog-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: center;
        margin-top: 24px;
      }

      .blog-footer-line {
        position: relative;
        height: 24px;
        min-width: 0;
      }

      .blog-footer-line::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(140, 170, 226, 0), rgba(140, 170, 226, 0.42), rgba(140, 170, 226, 0));
      }

      .blog-footer-line::after {
        content: none;
      }

      .blog-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 52px;
        padding: 0 22px;
        border-radius: 16px;
        background:
          radial-gradient(circle at 50% 0%, rgba(101, 173, 255, 0.28), transparent 60%),
          linear-gradient(180deg, rgba(47, 93, 198, 0.98), rgba(22, 60, 150, 0.98));
        color: #f7fbff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 14px 34px rgba(22, 60, 150, 0.24);
        transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
      }

      .blog-cta i {
        font-size: 17px;
        transition: transform 0.24s ease;
      }

      .blog-cta:hover {
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 18px 38px rgba(22, 60, 150, 0.3);
      }

      .blog-cta:focus-visible {
        outline: 2px solid rgba(245, 201, 79, 0.9);
        outline-offset: 3px;
      }

      .blog-cta:hover i {
        transform: translateX(4px);
      }

      .faq-section {
        position: relative;
        padding: 38px 0 54px;
        overflow: hidden;
        background:
          radial-gradient(circle at 12% 20%, rgba(78, 162, 255, 0.08), transparent 18%),
          radial-gradient(circle at 88% 14%, rgba(78, 162, 255, 0.12), transparent 16%),
          linear-gradient(180deg, #f7f9fd 0%, #ffffff 100%);
      }

      .faq-section::before,
      .faq-section::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .faq-section::before {
        background:
          radial-gradient(circle at 7% 50%, rgba(141, 190, 255, 0.26), transparent 10%),
          radial-gradient(circle at 93% 22%, rgba(141, 190, 255, 0.28), transparent 12%);
        opacity: 0.5;
      }

      .faq-section::after {
        background-image:
          url("data:image/svg+xml,%3Csvg width='560' height='180' viewBox='0 0 560 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%239cc3ff' stroke-width='1.1' opacity='.22'%3E%3Cpath d='M0 92 C40 36 72 148 114 92 S194 36 240 92 S320 148 362 92 S442 36 488 92 S520 148 560 92'/%3E%3Cpath d='M0 106 C40 50 72 162 114 106 S194 50 240 106 S320 162 362 106 S442 50 488 106 S520 162 560 106'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 560px 180px;
        opacity: 0.55;
      }

      .faq-shell {
        position: relative;
        z-index: 1;
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 28px;
      }

      .faq-header {
        max-width: 860px;
        margin: 0 auto 18px;
        text-align: center;
      }

      .faq-header h2 {
        margin: 0;
        color: #13284c;
        font-size: clamp(28px, 3vw, 42px);
        line-height: 1.04;
        letter-spacing: -0.055em;
      }

      .faq-header p {
        max-width: 920px;
        margin: 10px auto 0;
        color: rgba(32, 41, 57, 0.72);
        font-size: clamp(14px, 1.05vw, 16px);
        line-height: 1.52;
      }

      .faq-panel {
        position: relative;
        padding: 14px 18px 10px;
        border-radius: 18px;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .faq-panel::before {
        display: none;
      }

      .faq-item {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid rgba(20, 53, 104, 0.14);
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(20, 53, 104, 0.06);
        transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      }

      .faq-item + .faq-item {
        margin-top: 8px;
      }

      .faq-question {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 30px;
        align-items: center;
        gap: 10px;
        padding: 11px 12px 11px 14px;
        list-style: none;
        cursor: pointer;
        color: #143568;
        transition: color 0.22s ease;
      }

      .faq-question::-webkit-details-marker {
        display: none;
      }

      .faq-question-text {
        font-size: clamp(14px, 1.25vw, 18px);
        line-height: 1.2;
        font-weight: 650;
        letter-spacing: -0.025em;
      }

      .faq-question-toggle {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(20, 53, 104, 0.24);
        background: #ffffff;
        color: #143568;
        box-shadow: none;
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      }

      .faq-question-toggle i {
        width: 100%;
        height: 100%;
        position: relative;
        display: block;
        font-size: 0;
        font-style: normal;
        line-height: 1;
      }

      .faq-question-toggle i::before {
        content: "+";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        font-family: inherit;
        font-size: 17px;
        font-weight: 400;
        line-height: 1;
        transform: translate(-50%, -50%);
      }

      .faq-item[open] .faq-question-toggle i::before {
        content: "−";
        transform: translate(-50%, -50%) translateY(-3px);
      }

      .faq-answer {
        padding: 0 12px 13px 14px;
      }

      .faq-answer p {
        margin: 0;
        width: 100%;
        max-width: none;
        color: rgba(32, 41, 57, 0.78);
        font-size: 14px;
        line-height: 1.55;
      }

      .faq-question:focus-visible {
        outline: 2px solid rgba(245, 201, 79, 0.9);
        outline-offset: -2px;
      }

      @keyframes services-fade-up {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .services-showcase-header,
        .services-showcase-card {
          animation: none;
        }

        .services-showcase-card,
        .services-showcase-action,
        .services-showcase-cta,
        .services-showcase-action span,
        .services-showcase-cta i {
          transition: none;
        }

        .blog-card,
        .blog-card-arrow,
        .blog-card-arrow i,
        .blog-cta,
        .blog-cta i {
          transition: none;
        }

        .blog-card:hover,
        .blog-card:focus-visible,
        .blog-card:hover .blog-card-arrow,
        .blog-card:focus-visible .blog-card-arrow,
        .blog-card:hover .blog-card-arrow i,
        .blog-card:focus-visible .blog-card-arrow i,
        .blog-cta:hover {
          transform: none;
        }

        .faq-question-toggle {
          transition: none;
        }
      }

      @media (max-width: 1200px) {
        .pediatric-section {
          padding: 42px 0 52px;
        }

        .pediatric-shell {
          padding: 0 24px;
        }

        .pediatric-stage {
          min-height: 460px;
          border-radius: 30px;
        }

        .pediatric-copy {
          width: min(46%, 500px);
          left: 20px;
          top: 20px;
          padding: 26px 26px 22px;
          border-radius: 26px;
        }

        .pediatric-copy h2 {
          font-size: clamp(24px, 2.7vw, 36px);
          margin: 16px 0 10px;
        }

        .pediatric-divider {
          margin-bottom: 16px;
        }

        .pediatric-copy p {
          font-size: 14px;
          max-width: 100%;
        }

        .pediatric-actions {
          margin-top: 18px;
          gap: 10px;
        }

      .pediatric-btn {
        min-height: 48px;
        padding: 0 14px 0 10px;
        gap: 6px;
        font-size: 13px;
      }

      .pediatric-link {
        min-height: 48px;
        padding: 0 14px 0 10px;
        gap: 6px;
        font-size: 13px;
      }

      .pediatric-btn-primary > i:first-child,
      .pediatric-link .pediatric-action-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
      }

      .pediatric-btn-primary > span {
        font-size: 12px;
      }

      .pediatric-btn .pediatric-action-arrow,
      .pediatric-link .pediatric-action-arrow {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        font-size: 15px;
      }

        .services-showcase {
          padding: 46px 0 46px;
        }

        .services-showcase-shell {
          padding: 0 24px;
        }

        .services-showcase-header {
          margin-bottom: 18px;
        }

        .services-showcase-header h2 {
          font-size: clamp(28px, 3.8vw, 38px);
        }

        .services-showcase-header p {
          font-size: 14px;
        }

        .services-showcase-grid {
          gap: 14px;
        }

        .services-showcase-card {
          grid-template-columns: 84px minmax(0, 1fr) 42px;
          min-height: 154px;
          padding: 16px 16px 16px 16px;
          border-radius: 22px;
        }

        .services-showcase-icon {
          width: 70px;
          height: 70px;
        }

        .services-showcase-icon i {
          font-size: 32px;
        }

        .services-showcase-card-rule {
          margin-bottom: 12px;
        }

        .services-showcase-card h3 {
          font-size: 18px;
        }

        .services-showcase-card p {
          font-size: 12px;
        }

        .services-showcase-action {
          width: 42px;
          height: 42px;
        }

        .services-showcase-action span {
          font-size: 26px;
        }

        .services-showcase-footer {
          margin-top: 14px;
        }

        .services-showcase-cta {
          min-height: 46px;
          padding: 0 18px;
          font-size: 14px;
        }

        .blog-section {
          padding: 44px 0 48px;
        }

        .blog-shell {
          width: min(100% - 48px, 1200px);
        }

        .blog-header {
          margin-bottom: 18px;
        }

        .blog-header h2 {
          font-size: clamp(30px, 3vw, 40px);
        }

        .blog-header p {
          font-size: 14px;
        }

        .blog-grid {
          gap: 14px;
        }

        .blog-card {
          border-radius: 20px;
        }

        .blog-card-media {
          aspect-ratio: 1.46 / 1;
        }

        .blog-card-body {
          padding: 16px 16px 14px;
        }

        .blog-card-title {
          font-size: 20px;
        }

        .blog-card-copy {
          font-size: 13px;
        }

        .blog-card-meta {
          padding-top: 16px;
        }

        .blog-card-date {
          font-size: 13px;
        }

        .blog-card-arrow {
          width: 44px;
          height: 44px;
        }

        .blog-card-arrow i {
          font-size: 17px;
        }

        .blog-footer {
          margin-top: 20px;
        }

        .blog-cta {
          min-height: 48px;
          padding: 0 18px;
          font-size: 14px;
        }

        .faq-section {
          padding: 34px 0 48px;
        }

        .faq-shell {
          padding: 0 22px;
        }

        .faq-header {
          margin-bottom: 16px;
        }

        .faq-header h2 {
          font-size: clamp(26px, 2.8vw, 36px);
        }

        .faq-panel {
          padding: 14px 16px 10px;
          border-radius: 18px;
        }

        .faq-question {
          grid-template-columns: minmax(0, 1fr) 30px;
          padding: 10px 12px 10px 14px;
        }

        .faq-question-text {
          font-size: 16px;
        }

        .faq-answer {
          padding: 0 12px 14px 14px;
        }

        .faq-answer p {
          font-size: 15px;
        }
      }

      @media (max-width: 900px) {
        .pediatric-stage {
          min-height: 560px;
        }

        .pediatric-copy {
          left: 24px;
          right: 24px;
          top: 24px;
          width: auto;
          max-width: 560px;
        }

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

        .services-showcase-card:last-child {
          grid-column: 1 / -1;
        }

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

        .blog-card:last-child {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 720px) {
        .pediatric-section {
          padding: 34px 0 42px;
        }

        .pediatric-shell {
          width: min(100% - 32px, var(--ui-container));
          padding: 0;
        }

        .pediatric-stage {
          min-height: 0;
          padding: 300px 12px 16px;
          border-radius: 24px;
        }

        .pediatric-stage::before {
          background:
            linear-gradient(180deg, rgba(252, 249, 243, 0) 0%, rgba(252, 249, 243, 0.08) 34%, rgba(252, 249, 243, 0.84) 62%, rgba(252, 249, 243, 0.96) 100%);
        }

        .pediatric-visual {
          inset: 0 0 auto;
          height: 360px;
          border-radius: 24px;
          overflow: hidden;
        }

        .pediatric-copy {
          position: relative;
          left: auto;
          top: auto;
          right: auto;
          width: 100%;
          max-width: none;
          padding: 20px 18px 18px;
          border-radius: 22px;
          background: rgba(255, 255, 255, 0.9);
        }

        .pediatric-kicker {
          min-height: 34px;
          padding: 4px 14px;
          font-size: 12px;
        }

        .pediatric-copy h2 {
          max-width: 12ch;
          margin: 14px 0 10px;
          font-size: clamp(26px, 7.5vw, 34px);
          line-height: 1.08;
        }

        .pediatric-copy p {
          font-size: 13px;
          line-height: 1.44;
          max-width: 100%;
        }

        .pediatric-actions {
          margin-top: 16px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 8px;
          align-items: stretch;
        }

        .pediatric-btn {
          min-height: 48px;
          width: 100%;
          min-width: 0;
          padding: 0 10px;
          gap: 5px;
          font-size: 11px;
          border-radius: 12px;
        }

        .pediatric-btn-primary {
          min-height: 48px;
          padding: 0 12px 0 10px;
        }

        .pediatric-btn-primary > i:first-child {
          width: 26px;
          height: 26px;
          flex-basis: 26px;
          font-size: 18px;
        }

        .pediatric-btn-primary > span {
          font-size: 11px;
          white-space: nowrap;
        }

        .pediatric-btn .pediatric-action-arrow,
        .pediatric-link .pediatric-action-arrow {
          width: 20px;
          height: 20px;
          flex-basis: 20px;
          font-size: 14px;
        }

      .pediatric-link {
        min-height: 48px;
        min-width: 0;
        padding: 0 12px 0 10px;
        justify-content: center;
        width: 100%;
        border-width: 1.5px;
        border-radius: 12px;
        gap: 5px;
        font-size: 11px;
        white-space: nowrap;
      }

        .pediatric-link .pediatric-action-icon {
          width: 26px;
          height: 26px;
          flex-basis: 26px;
          font-size: 16px;
        }

        .pediatric-actions > .pediatric-btn,
        .pediatric-actions > .pediatric-link {
          min-height: 48px;
          height: 48px;
          padding: 0 10px;
          border-radius: 12px;
          font-size: 11px;
        }

        .pediatric-visual img {
          object-position: 86% top;
        }

        .services-showcase {
          padding: 40px 0 42px;
        }

        .services-showcase-shell {
          padding: 0 16px;
        }

        .services-showcase-header {
          margin-bottom: 18px;
          text-align: left;
        }

        .service-related .services-showcase-header {
          text-align: center;
        }

        .services-showcase-header .services-showcase-kicker {
          margin: 0 0 18px;
          font-size: 12px;
        }

        .service-related .services-showcase-header .services-showcase-kicker {
          margin-right: auto;
          margin-left: auto;
        }

        .services-showcase-header h2 {
          font-size: 24px;
          line-height: 1.08;
        }

        .services-showcase-header p {
          margin-top: 10px;
          font-size: 13px;
          line-height: 1.46;
        }

        .services-showcase-grid {
          grid-template-columns: 1fr;
          gap: 14px;
        }

        .services-showcase-card,
        .services-showcase-card:last-child {
          grid-column: auto;
          grid-template-columns: 68px minmax(0, 1fr) 38px;
          min-height: 142px;
          padding: 14px 14px;
          border-radius: 18px;
        }

        .services-showcase-icon {
          width: 58px;
          height: 58px;
          box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
            0 0 0 8px rgba(47, 119, 231, 0.08);
        }

        .services-showcase-icon i {
          font-size: 28px;
        }

        .services-showcase-card-rule {
          margin-bottom: 10px;
        }

        .services-showcase-card h3 {
          font-size: 17px;
        }

        .services-showcase-card p {
          margin-top: 6px;
          font-size: 12px;
          line-height: 1.45;
        }

        .services-showcase-action {
          width: 38px;
          height: 38px;
        }

        .services-showcase-action span {
          font-size: 24px;
        }

        .services-showcase-footer {
          margin-top: 16px;
          justify-content: stretch;
        }

        .services-showcase-cta {
          width: 100%;
          justify-content: center;
          min-height: 44px;
          font-size: 13px;
        }

        .blog-section {
          padding: 38px 0 42px;
        }

        .blog-shell {
          width: min(100% - 32px, 1200px);
        }

        .blog-header {
          margin-bottom: 16px;
          text-align: left;
        }

        .blog-header .blog-kicker {
          margin: 0 0 18px;
        }

        .blog-header h2 {
          font-size: 24px;
          line-height: 1.06;
        }

        .blog-header p {
          margin-top: 10px;
          font-size: 13px;
          line-height: 1.48;
          max-width: 640px;
        }

        .blog-grid {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 86%;
          grid-template-columns: none;
          gap: 14px;
          overflow-x: auto;
          padding-bottom: 8px;
          scroll-snap-type: x mandatory;
          scroll-padding-left: 0;
          overscroll-behavior-x: contain;
          scrollbar-width: none;
        }

        .blog-grid::-webkit-scrollbar {
          display: none;
        }

        .blog-card,
        .blog-card:last-child {
          grid-column: auto;
          min-height: 100%;
          scroll-snap-align: start;
        }

        .blog-card-media {
          aspect-ratio: 1.42 / 1;
        }

        .blog-card-body {
          padding: 15px 14px 13px;
        }

        .blog-card-title {
          font-size: 18px;
        }

        .blog-card-copy {
          font-size: 12px;
          line-height: 1.44;
        }

        .blog-card-meta {
          padding-top: 14px;
        }

        .blog-card-date {
          font-size: 12px;
        }

        .blog-card-arrow {
          width: 40px;
          height: 40px;
        }

        .blog-card-arrow i {
          font-size: 16px;
        }

        .blog-footer {
          grid-template-columns: 1fr;
          gap: 12px;
          margin-top: 18px;
        }

        .blog-footer-line {
          order: 2;
          height: 22px;
        }

        .blog-footer-line::after {
          width: 66px;
        }

        .blog-cta {
          order: 1;
          width: 100%;
          justify-content: center;
          min-height: 44px;
          border-radius: 14px;
          font-size: 13px;
        }

        .faq-section {
          padding: 30px 0 42px;
        }

        .faq-shell {
          padding: 0 14px;
        }

.faq-header {
    margin-bottom: 14px;
    text-align: center;
}

        .faq-header h2 {
          font-size: 22px;
          line-height: 1.06;
        }

.faq-header p {
    margin: 10px auto 0;
    font-size: 12px;
          line-height: 1.42;
        }

        .faq-panel {
          padding: 16px 12px 10px;
          border-radius: 20px;
        }

        .faq-item + .faq-item {
          margin-top: 10px;
        }

        .faq-question {
          grid-template-columns: minmax(0, 1fr) 30px;
          gap: 8px;
          padding: 12px 10px 12px 12px;
        }

        .faq-question-text {
          font-size: 15px;
          line-height: 1.14;
        }

        .faq-question-toggle {
          width: 28px;
          height: 28px;
        }

        .faq-question-toggle i {
          font-size: 15px;
        }

        .faq-question-toggle i::before {
          font-size: 17px;
        }

        .faq-answer {
          padding: 0 10px 12px 12px;
        }

        .faq-answer p {
          font-size: 14px;
          line-height: 1.55;
        }
      }

      @media (max-width: 480px) {
        .pediatric-shell {
          width: min(100% - 28px, var(--ui-container));
          padding: 0;
        }

        .pediatric-stage {
          padding: 282px 10px 14px;
        }

        .pediatric-stage::before {
          background:
            linear-gradient(180deg, rgba(252, 249, 243, 0) 0%, rgba(252, 249, 243, 0.08) 30%, rgba(252, 249, 243, 0.82) 60%, rgba(252, 249, 243, 0.96) 100%);
        }

        .pediatric-visual {
          height: 338px;
        }

        .pediatric-copy {
          left: auto;
          top: auto;
          right: auto;
          width: auto;
          padding: 18px 16px 16px;
        }

        .pediatric-copy h2 {
          font-size: clamp(24px, 7.8vw, 31px);
        }

        .pediatric-copy p {
          font-size: 12px;
          line-height: 1.38;
        }

        .pediatric-visual img {
          object-position: 88% top;
        }

        .services-showcase {
          padding: 36px 0 38px;
        }

        .services-showcase-shell {
          padding: 0 14px;
        }

        .services-showcase-header h2 {
          font-size: 22px;
        }

        .services-showcase-card {
          min-height: 136px;
        }

        .services-showcase-card h3 {
          font-size: 16px;
        }

        .services-showcase-cta {
          min-height: 42px;
          font-size: 12px;
        }

        .blog-section {
          padding: 34px 0 38px;
        }

        .blog-shell {
          width: min(100% - 28px, 1200px);
        }

        .blog-header h2 {
          font-size: 22px;
        }

        .blog-grid {
          grid-auto-columns: 86%;
          gap: 12px;
        }

        .blog-card {
          border-radius: 18px;
        }

        .blog-card-media {
          aspect-ratio: 1.38 / 1;
        }

        .blog-card-body {
          padding: 14px 13px 12px;
        }

        .blog-card-title {
          font-size: 17px;
        }

        .blog-card-copy {
          margin-top: 8px;
        }

        .blog-card-meta {
          padding-top: 12px;
        }

        .blog-footer {
          margin-top: 16px;
        }

        .faq-section {
          padding: 26px 0 36px;
        }

        .faq-shell {
          padding: 0 14px;
        }

        .faq-header h2 {
          font-size: 20px;
        }

        .faq-panel {
          padding: 14px 10px 8px;
          border-radius: 20px;
        }

        .faq-question {
          grid-template-columns: minmax(0, 1fr) 28px;
          gap: 6px;
          padding: 10px 8px 10px 10px;
        }

        .faq-question-text {
          font-size: 15px;
        }

        .faq-question-toggle {
          width: 26px;
          height: 26px;
        }

        .faq-question-toggle i::before {
          font-size: 15px;
        }

        .faq-answer {
          padding: 0 8px 10px 10px;
        }

        .faq-answer p {
          font-size: 14px;
          line-height: 1.55;
        }
      }

      @media (max-width: 1200px) {
        .insight-shell {
          padding: 0 24px;
        }

        .insight-nav {
          right: 24px;
        }

        .insight-grid {
          --insight-bleed: 24px;
        }

        .insight-header {
          margin-bottom: 22px;
        }

        .insight-header h2 {
          font-size: 32px;
          max-width: calc(100% - 140px);
        }

        .insight-header p {
          font-size: 16px;
        }

        .insight-card {
          min-height: 230px;
          padding: 22px 22px 20px;
          border-radius: 22px;
        }

        .insight-card-title {
          font-size: 26px;
          max-width: 12ch;
        }

        .insight-card-copy {
          font-size: 13px;
        }
      }

      @media (max-width: 720px) {
        .insight-section {
          padding: 58px 0 54px;
        }

        .insight-shell {
          padding: 0 16px;
        }

        .insight-grid {
          --insight-bleed: 16px;
          grid-auto-columns: 86vw;
          gap: 12px;
        }

        .insight-header {
          margin-bottom: 18px;
          gap: 10px;
        }

        .insight-header .insight-kicker {
          min-height: 26px;
          padding: 3px 10px;
          font-size: 10px;
        }

        .insight-header h2 {
          font-size: 26px;
          line-height: 1.2;
          max-width: none;
        }

        .insight-header p {
          font-size: 14px;
          line-height: 1.4;
        }

        .insight-card {
          min-height: 212px;
          padding: 18px 18px 16px;
          row-gap: 10px;
          border-radius: 18px;
        }

        .insight-header-top {
          align-items: stretch;
        }

        .insight-nav {
          position: static;
          width: fit-content;
          margin: 16px auto 0;
        }

        .insight-nav-btn {
          width: 46px;
          height: 46px;
        }

        .insight-nav-btn i {
          font-size: 18px;
        }

        .insight-card-title {
          font-size: 22px;
          line-height: 1.12;
          max-width: 14ch;
        }

        .insight-card-copy {
          font-size: 12px;
          line-height: 1.4;
        }

        .insight-card-btn {
          min-height: 36px;
          gap: 10px;
          padding: 0 14px;
          font-size: 12px;
        }
      }

      @media (max-width: 480px) {
        .insight-shell {
          padding: 0 14px;
        }

        .insight-grid {
          --insight-bleed: 14px;
        }

        .insight-header {
          margin-bottom: 14px;
          gap: 8px;
        }

        .insight-header h2 {
          font-size: 23px;
          line-height: 1.14;
        }

        .insight-header p {
          font-size: 13px;
          line-height: 1.38;
        }

        .insight-card {
          min-height: 198px;
          padding: 15px 15px 14px;
          row-gap: 8px;
        }

        .insight-card-title {
          font-size: 19px;
        }

        .insight-card-copy {
          font-size: 11px;
          max-width: 30ch;
        }

        .insight-card-btn {
          min-height: 32px;
          gap: 8px;
          font-size: 11px;
        }
      }

      @media (min-width: 1201px) {
        .award-shell {
          width: min(1040px, calc(100vw - 80px));
          max-width: 1040px;
          padding: 0 0 64px;
        }

        .award-card {
          gap: 8px;
        }
      }

      @media (max-width: 1200px) {
        :root {
          --mobile-nav-top: 162px;
        }

        .announcement-inner {
          height: auto;
          min-height: 56px;
          padding: 6px 16px;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 10px;
          justify-items: start;
          overflow: hidden;
        }

        .announcement-visual {
          display: none;
        }

        .announcement-text {
          font-size: 11px;
          line-height: 1.1;
          max-width: none;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .announcement-actions {
          width: auto;
          justify-content: flex-end;
          gap: 5px;
          flex-wrap: nowrap;
          white-space: nowrap;
        }

        .announcement-btn {
          min-width: 0;
          flex: 0 0 auto;
          max-width: 112px;
          min-height: var(--ds-control-sm);
          height: var(--ds-control-sm);
          font-size: 10px;
          padding: 0 10px;
          gap: 6px;
        }

        .announcement-btn-icon {
          width: 14px;
          height: 14px;
          flex-basis: 14px;
          transform: none;
        }

        .header-shell {
          border-top: 0;
        }

        .hero-slider-inner {
          padding: 18px 22px 24px;
        }

        .hero-slider-frame {
          min-height: 0;
        }

        .hero-controls {
          position: static;
          margin-bottom: 14px;
        }

        .hero-stage {
          min-height: 0;
        }

        .hero-slide {
          position: relative;
          inset: auto;
          grid-template-columns: minmax(280px, 1.02fr) minmax(300px, 0.98fr);
          grid-template-rows: auto auto auto;
          grid-template-areas:
            "copy sidecard"
            "visual sidecard"
            "actions sidecard";
          align-items: start;
          gap: 18px 26px;
          opacity: 0;
          transform: none;
          display: none;
        }

        .hero-slide.is-active {
          display: grid;
          opacity: 1;
          pointer-events: auto;
        }

        .hero-copy {
          grid-area: copy;
          padding-top: 6px;
        }

        .hero-kicker {
          min-height: 36px;
          font-size: 12px;
        }

        .hero-title {
          font-size: clamp(38px, 4.2vw, 46px);
          max-width: 11.5ch;
          letter-spacing: -0.04em;
        }

        .hero-slide[data-theme="tv"] .hero-title,
        .hero-slide[data-theme="trial"] .hero-title,
        .hero-slide[data-theme="implant"] .hero-title {
          max-width: 12.5ch;
        }

        .hero-actions {
          grid-area: actions;
          gap: 14px;
          margin-top: 0;
          align-items: flex-start;
        }

        .hero-btn {
          min-width: 210px;
          height: 60px;
          font-size: 16px;
        }

        .hero-link {
          font-size: 16px;
        }

        .hero-visual {
          grid-area: visual;
          min-height: 260px;
          justify-self: start;
          align-self: center;
        }

        .hero-device {
          width: min(100%, 390px);
          height: auto;
        }

        .hero-device-core {
          width: 310px;
          height: 120px;
          top: 82px;
        }

        .hero-device-buttons {
          top: 118px;
          width: 180px;
          gap: 28px;
        }

        .hero-device-mark {
          top: 142px;
        }

        .hero-sidecard {
          grid-area: sidecard;
          grid-row: 1 / span 3;
          justify-self: end;
          width: min(100%, 460px);
          min-height: 0;
          padding: 16px 18px;
          border-radius: 20px;
          display: grid;
          grid-template-columns: 180px minmax(0, 1fr);
          align-items: center;
          gap: 18px;
        }

        .hero-sidecard-media {
          min-height: 132px;
          border-radius: 16px;
        }

        .hero-sidecard-copy {
          font-size: 15px;
          line-height: 1.42;
        }

        .hero-dots {
          position: static;
          transform: none;
          margin-top: 18px;
          justify-content: center;
        }

        .award-shell {
          padding: 0 22px 48px;
        }

        .award-card {
          grid-template-columns: minmax(76px, 82px) minmax(0, 1fr) auto;
          gap: 10px;
          height: 112px;
          padding: 8px 10px 8px 8px;
          border-radius: 22px;
        }

        .award-visual {
          min-height: 0;
          border-radius: 16px;
        }

        .award-visual img {
          max-height: 82px;
        }

        .award-title {
          font-size: clamp(13px, 1.8vw, 17px);
          white-space: normal;
        }

        .award-btn {
          min-width: 132px;
          height: 36px;
          font-size: 11px;
          padding: 0 14px 0 12px;
          gap: 12px;
          border-radius: 11px;
        }

        .header {
          grid-template-columns: auto 1fr auto;
          height: auto;
          padding: 16px 20px;
          gap: 14px 16px;
        }

        .nav {
          position: fixed;
          top: var(--mobile-nav-top);
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          justify-self: stretch;
          justify-content: flex-start;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          transform: none;
          box-sizing: border-box;
          padding: 14px 16px 12px;
          display: none;
          border-top: 0;
          border-bottom: 1px solid #eef1f5;
          border-radius: 0 0 22px 22px;
          background: #fff;
          box-shadow: 0 24px 50px rgba(17, 24, 39, 0.08);
          max-height: none;
          overflow-y: auto;
          overscroll-behavior: contain;
          z-index: 120;
        }

        .header-shell.nav-open::before {
          content: "";
          position: fixed;
          top: var(--mobile-nav-top);
          left: 0;
          right: 0;
          bottom: 0;
          background: #fff;
          z-index: 109;
        }

        .nav-main {
          width: 100%;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          padding-right: 0;
        }

        .header-shell.nav-open .nav {
          display: flex;
        }

        .header-actions {
          gap: 10px;
        }

        .header-actions .cta {
          display: inline-flex;
          order: 1;
        }

        .header-shell.nav-open .header-actions .cta {
          display: none;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-main {
          gap: 0;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-main > * {
          display: none;
        }

        .menu-toggle {
          display: inline-flex;
          order: 2;
          position: relative;
          z-index: 410;
          border: 0;
          box-shadow: none;
          background: transparent;
          width: var(--ds-control-sm);
          min-width: var(--ds-control-sm);
          height: var(--ds-control-sm);
          border-radius: 0;
          color: #0b1020;
        }

        .header-shell.nav-open .header {
          z-index: 400;
        }

        .header-shell.nav-open .header-actions {
          position: relative;
          z-index: 410;
        }

        .header-shell.nav-open .menu-toggle {
          display: inline-flex;
          visibility: visible;
          opacity: 1;
          color: #0b1020;
          pointer-events: auto;
        }

        .checkmark {
          width: 24px;
          height: 24px;
        }

        .cta {
          min-width: 200px;
          height: 58px;
          font-size: 15px;
        }

        .cta::after {
          animation-duration: 13s;
        }

        .mega-menu {
          position: static;
          width: 100%;
          max-height: none;
          overflow: visible;
          scrollbar-gutter: auto;
          transform: none;
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          display: none;
          margin-top: 0;
          padding: 0;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          background: transparent;
          transition: none;
        }

        .mobile-panel-back {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          min-height: 36px;
          margin: 0 0 18px;
          padding: 7px 14px 7px 10px;
          border-radius: 999px;
          background: #eef1f5;
          border: 1px solid #e1e6ee;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
          color: #1c2230;
          font-family: inherit;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: -0.02em;
          cursor: pointer;
        }

        .mobile-panel-back-icon {
          width: 24px;
          height: 24px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 24px;
          border-radius: 999px;
          background: #fff;
          color: #1c2230;
        }

        .mobile-panel-back-icon i {
          font-size: 16px;
          line-height: 1;
        }

        .mobile-panel-back-text {
          line-height: 1;
          transform: translateY(0.5px);
        }

        .nav-item {
          width: 100%;
          padding: 0;
        }

        .nav-item.dropdown > .nav-link {
          width: 100%;
          justify-content: space-between;
          padding: 16px 0;
          font-size: 15px;
          line-height: 1.2;
          border: 0;
        }

        .nav-item.dropdown > .nav-link .chevron {
          transform: translateY(1px) rotate(-90deg);
        }

        .nav-item.dropdown.is-open > .nav-link .chevron {
          transform: translateY(1px) rotate(-90deg);
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-item.dropdown {
          width: 100%;
          padding: 0;
          border-bottom: 0;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-item.dropdown > .nav-link {
          display: none;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-item.dropdown .mega-menu {
          margin-top: 0;
        }

        .cta.mobile-nav-cta {
          display: none;
          width: 100%;
          min-width: 0;
          height: 46px;
          margin-top: 14px;
          padding: 0 16px;
          justify-content: center;
          border-radius: 14px;
          border: 0;
          background: linear-gradient(180deg, #0d1324 0%, #090e1b 100%);
          color: #fff;
          font-family: inherit;
          font-size: 15px;
          font-weight: 600;
          letter-spacing: -0.03em;
          cursor: pointer;
          box-shadow: 0 10px 20px rgba(11, 16, 32, 0.12);
          position: sticky;
          bottom: 10px;
          z-index: 3;
        }

        .mobile-branches {
          display: none;
          width: 100%;
          margin-top: 8px;
          margin-bottom: 6px;
          padding: 0 2px;
        }

        .mobile-branches-heading {
          display: flex;
          align-items: center;
          gap: 8px;
          margin: 0 0 8px;
          color: #1c2230;
        }

        .mobile-branches-heading::before,
        .mobile-branches-heading::after {
          content: "";
          flex: 1 1 auto;
          height: 1px;
          background: linear-gradient(90deg, rgba(245, 201, 79, 0.15), rgba(245, 201, 79, 0.82));
        }

        .mobile-branches-heading::after {
          background: linear-gradient(90deg, rgba(245, 201, 79, 0.82), rgba(245, 201, 79, 0.15));
        }

        .mobile-branches-heading-icon {
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          flex: 0 0 32px;
          border-radius: 999px;
          background: rgba(245, 201, 79, 0.14);
          color: #f0b62a;
          box-shadow: inset 0 0 0 1px rgba(245, 201, 79, 0.22);
        }

        .mobile-branches-heading-icon i {
          font-size: 14px;
          line-height: 1;
        }

        .mobile-branches-heading h2 {
          margin: 0;
          color: #1c2230;
          font-size: 15px;
          line-height: 1.15;
          font-weight: 700;
          letter-spacing: -0.03em;
          white-space: nowrap;
        }

        .mobile-branches-list {
          display: grid;
          gap: 6px;
        }

        .mobile-branch-card {
          display: grid;
          grid-template-columns: 44px minmax(0, 1fr) 36px;
          align-items: center;
          gap: 8px;
          min-height: 58px;
          padding: 8px 10px 8px 8px;
          border-radius: 16px;
          border: 1px solid #e8dcc3;
          background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
          box-shadow: 0 6px 14px rgba(19, 40, 76, 0.04);
          text-decoration: none;
        }

        .mobile-branch-icon {
          width: 44px;
          height: 44px;
          display: grid;
          place-items: center;
          border-radius: 50%;
          background: #fff8ed;
          color: #f0b62a;
        }

        .mobile-branch-icon i {
          font-size: 20px;
          line-height: 1;
        }

        .mobile-branch-copy {
          display: flex;
          flex-direction: column;
          gap: 4px;
          min-width: 0;
        }

        .mobile-branch-copy strong {
          color: #1c2230;
          font-size: 14px;
          line-height: 1.15;
          font-weight: 700;
          letter-spacing: -0.03em;
        }

        .mobile-branch-copy span {
          color: #525866;
          font-size: 12px;
          line-height: 1.25;
          font-weight: 500;
          letter-spacing: -0.02em;
        }

        .mobile-branch-call {
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          justify-self: end;
          border-radius: 50%;
          background: #121a33;
          color: #fff;
          box-shadow: 0 6px 14px rgba(18, 26, 51, 0.22);
        }

        .mobile-branch-call i {
          font-size: 14px;
          line-height: 1;
        }

        .mobile-branch-card:hover,
        .mobile-branch-card:focus-visible {
          border-color: rgba(245, 201, 79, 0.78);
          box-shadow: 0 12px 28px rgba(19, 40, 76, 0.08);
          outline: none;
        }

        .nav-main > .nav-link {
          width: 100%;
          justify-content: flex-start;
          padding: 16px 0;
          font-size: 15px;
          line-height: 1.2;
          border-bottom: 1px solid #eef1f5;
        }

        .nav-main .nav-link.is-active::after,
        .nav-main .nav-link[aria-current="page"]::after {
          left: 0;
          right: auto;
          bottom: 8px;
          width: 34px;
        }

        .nav-main > .nav-link:last-child {
          border-bottom: 0;
        }

        .nav-main > .nav-item:not(:last-child) {
          border-bottom: 1px solid #eef1f5;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-main > * {
          display: none;
        }

        .header-shell.nav-open .cta.mobile-nav-cta {
          display: inline-flex;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .cta.mobile-nav-cta {
          display: inline-flex;
        }

        .header-shell.nav-open[data-mobile-panel=""] .mobile-branches {
          display: block;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown {
          display: flex;
          border-bottom: 0;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown > .nav-link,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown > .nav-link,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown > .nav-link,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown > .nav-link {
          display: none;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .mega-menu {
          display: block !important;
          width: 100%;
          max-width: none;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown.is-open .mega-menu,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown.is-open .mega-menu,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown.is-open .mega-menu,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown.is-open .mega-menu {
          display: block !important;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .mega-menu {
          padding-top: 0;
        }

        .header-shell.nav-open[data-mobile-panel="services"] .services-dropdown,
        .header-shell.nav-open[data-mobile-panel="devices"] .devices-dropdown,
        .header-shell.nav-open[data-mobile-panel="implant"] .implant-dropdown,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown {
          width: 100%;
          display: block !important;
          align-items: stretch;
          gap: 0;
        }

        .mega-menu::before {
          display: none;
        }

        .nav-item.dropdown.is-open .mega-menu {
          opacity: 1;
          visibility: visible;
          transform: none;
          pointer-events: auto;
        }

        .services-menu {
          width: 100%;
          padding: 0;
        }

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

        .service-link {
          font-size: 15px;
        }

        .services-promo {
          min-height: 180px;
          border-radius: 18px;
        }

        .services-title,
        .devices-promo-title,
        .implant-visual-title {
          font-size: 22px;
        }

        .implant-layout {
          grid-template-columns: 1fr;
        }

        .implant-visual {
          min-height: 400px;
          border-radius: 18px;
        }

        .implant-visual-copy {
          max-width: 28ch;
        }

        .mega-grid,
        .mega-cards,
        .devices-grid,
        .implant-layout {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .guide-dropdown .mega-cards {
          grid-column: auto;
          grid-row: auto;
          margin-top: 8px;
        }

        .guide-dropdown .mega-grid {
          grid-template-columns: 1fr;
        }

        .guide-dropdown .mega-grid > .mega-links {
          grid-column: auto;
        }

        .mega-title {
          font-size: 22px;
          margin-bottom: 16px;
        }

        .mega-divider {
          margin-bottom: 18px;
        }

        .mega-links,
        .devices-column,
        .implant-links {
          gap: 16px;
        }

        .mega-links a,
        .devices-column a,
        .devices-group-title,
        .implant-links a {
          font-size: 15px;
          line-height: 1.35;
        }

        .devices-sublist {
          gap: 12px;
        }

        .devices-promo {
          min-height: 190px;
          border-radius: 18px;
        }

        .mega-card {
          border-radius: 18px;
          min-height: 116px;
        }

        .guide-card,
        .guide-card .mega-card-content {
          min-height: 190px;
        }
      }

      /* Keep guide promos stacked whenever the mobile panel is open,
       * including wider tablet-sized mobile navigation viewports. */
      @media (max-width: 1200px) {
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .mega-cards {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          grid-auto-flow: row;
          gap: 16px;
          width: 100%;
          min-width: 0;
        }

        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .mega-card,
        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .guide-card .mega-card-content {
          width: 100%;
          min-width: 0;
        }

        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .guide-card--children .mega-card-content {
          width: min(58%, 300px);
          margin-left: auto;
          padding-left: 16px;
          padding-right: 18px;
        }

        .header-shell.nav-open[data-mobile-panel="guide"] .guide-dropdown .guide-card--blog .mega-card-content {
          width: min(64%, 320px);
          margin-left: 0;
          padding-left: 18px;
          padding-right: 18px;
        }
      }

      @media (min-width: 721px) and (max-width: 1200px) {
        .hero-slider {
          overflow: hidden;
        }

        .hero-slider-inner {
          padding: 16px 22px 20px;
        }

        .hero-controls {
          margin-bottom: 16px;
        }

        .hero-control {
          width: 48px;
          height: 48px;
          border-radius: 14px;
        }

        .hero-slide {
          grid-template-columns: minmax(280px, 40%) 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
            "copy ."
            "visual ."
            "actions .";
          column-gap: 28px;
          row-gap: 14px;
          align-items: start;
          align-content: start;
          min-height: clamp(360px, 42vw, 470px);
        }

        .hero-copy {
          padding-top: 2px;
        }

        .hero-kicker {
          min-height: 30px;
          padding: 0 26px;
          font-size: 11px;
          letter-spacing: 0.26em;
        }

        .hero-title {
          max-width: 11.5ch;
          margin-top: 14px;
          font-size: clamp(36px, 3.8vw, 42px);
          line-height: 1;
        }

        .hero-slide[data-theme="tv"] .hero-title,
        .hero-slide[data-theme="trial"] .hero-title,
        .hero-slide[data-theme="implant"] .hero-title {
          max-width: 12.5ch;
        }

        .hero-visual {
          min-height: 160px;
          width: 100%;
          justify-self: start;
          align-self: start;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0;
          padding: 0;
        }

        .hero-device {
          width: min(100%, 280px);
          max-height: 186px;
          margin: 0 auto;
        }

        .hero-actions {
          display: flex;
          align-items: center;
          gap: 14px;
          margin-top: 0;
          flex-wrap: nowrap;
        }

        .hero-btn {
          min-width: 170px;
          height: 50px;
          border-radius: 14px;
          font-size: 14px;
        }

        .hero-link {
          min-height: 36px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
        }

        .hero-sidecard {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          width: clamp(300px, 32vw, 350px);
          margin-top: 0;
          padding: clamp(13px, 1.35vw, 16px);
          border-radius: clamp(22px, 2.3vw, 28px);
          display: flex;
          flex-direction: column;
          gap: clamp(10px, 1.4vw, 16px);
        }

        .hero-sidecard-media {
          flex: 0 0 clamp(170px, 23vw, 226px);
          min-height: clamp(170px, 23vw, 226px);
          height: auto;
          aspect-ratio: 1.28 / 1;
          border-radius: clamp(16px, 1.8vw, 20px);
          background:
            url("../images/sidecard-scene.avif") center center / cover no-repeat,
            linear-gradient(180deg, #d8d4cc 0%, #bdb8b0 36%, #83807a 100%);
        }

        .hero-sidecard-body {
          gap: 12px;
          padding: 0 6px 2px;
          align-content: start;
        }

        .hero-sidecard-mark {
          width: 26px;
        }

        .hero-sidecard-copy {
          max-width: none;
          font-size: clamp(12px, 1.25vw, 14px);
          line-height: 1.4;
        }

        .hero-dots {
          margin-top: clamp(2px, 0.8vw, 6px);
        }
      }

      @media (min-width: 721px) and (max-width: 900px) {
        .hero-slider-inner {
          padding: 14px 18px 18px;
        }

        .hero-controls {
          margin-bottom: 14px;
        }

        .hero-slide {
          grid-template-columns: minmax(248px, 38%) 1fr;
          column-gap: 22px;
          row-gap: 12px;
          min-height: clamp(350px, 44vw, 430px);
        }

        .hero-title {
          margin-top: 12px;
          font-size: clamp(31px, 3.8vw, 34px);
          max-width: 12ch;
        }

        .hero-slide[data-theme="tv"] .hero-title,
        .hero-slide[data-theme="trial"] .hero-title,
        .hero-slide[data-theme="implant"] .hero-title {
          max-width: 13ch;
        }

        .hero-visual {
          min-height: 140px;
          margin-top: 0;
        }

        .hero-device {
          width: min(100%, 245px);
          max-height: 166px;
        }

        .hero-actions {
          gap: 12px;
          margin-top: 0;
          flex-wrap: nowrap;
        }

        .hero-btn {
          min-width: 160px;
          height: 48px;
        }

        .hero-sidecard {
          width: clamp(290px, 38vw, 330px);
          margin-top: 0;
          padding: 13px;
          gap: 10px;
        }

        .hero-sidecard-media {
          flex-basis: clamp(160px, 25vw, 208px);
          min-height: clamp(160px, 25vw, 208px);
          aspect-ratio: 1.24 / 1;
        }

        .hero-sidecard-copy {
          font-size: 12px;
          line-height: 1.38;
        }

        .hero-dots {
          margin-top: 6px;
        }
      }

      @media (hover: none) and (pointer: coarse) {
        .announcement-inner {
          height: auto;
          min-height: 56px;
          padding: 6px 14px;
          gap: 8px;
        }

        .announcement-text {
          font-size: 10px;
        }

        .announcement-actions {
          gap: 4px;
        }

        .announcement-btn {
          min-height: var(--ds-control-sm);
          height: var(--ds-control-sm);
          max-width: 94px;
          padding: 0 6px;
          font-size: 9px;
          gap: 5px;
        }

        .announcement-btn-icon {
          display: none;
        }
      }

      @media (max-width: 720px) {
        :root {
          --mobile-nav-top: 162px;
        }

        .announcement-inner {
          height: auto;
          min-height: 56px;
          padding: 6px 10px;
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-rows: 1fr;
          gap: 8px;
          align-items: center;
          justify-items: stretch;
          overflow: hidden;
        }

        .announcement-visual {
          display: none;
        }

        .announcement-text {
          width: 100%;
          max-width: none;
          font-size: clamp(8.5px, 2.4vw, 10px);
          line-height: 1.25;
          text-align: left;
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          text-wrap: pretty;
        }

        .announcement-actions {
          grid-column: 2;
          width: auto;
          justify-content: flex-end;
          flex-wrap: nowrap;
          gap: 4px;
          overflow: visible;
          scrollbar-width: none;
        }

        .announcement-actions::-webkit-scrollbar {
          display: none;
        }

        .announcement-btn {
          flex: 0 0 auto;
          max-width: none;
          min-height: var(--ds-control-sm);
          height: var(--ds-control-sm);
          font-size: clamp(9px, 2.3vw, 10px);
          padding: 0 clamp(5px, 1.8vw, 7px);
        }

        .header-shell {
          border-top: 0;
        }

        body {
          padding-top: 0;
        }

        .hero-slider-inner {
          padding: 10px 14px 14px;
        }

        .hero-slider-frame {
          min-height: 0;
        }

        .hero-controls {
          position: static;
          transform: none;
          width: 100%;
          justify-content: center;
          margin: 0 0 8px;
          gap: 8px;
        }

        .hero-control {
          width: 40px;
          height: 40px;
          border-radius: 12px;
        }

        .hero-slide[data-theme="tv"] .hero-title,
        .hero-slide[data-theme="trial"] .hero-title,
        .hero-slide[data-theme="implant"] .hero-title {
          font-size: clamp(27px, 8vw, 32px);
          max-width: 13ch;
          letter-spacing: -0.035em;
        }

        .hero-title {
          line-height: 1;
        }

        .hero-slide {
          display: none;
          grid-template-columns: 1fr;
          grid-template-areas:
            "copy"
            "visual"
            "actions"
            "sidecard";
          align-items: start;
          align-content: start;
          gap: 16px;
          min-height: 0;
          padding-bottom: 0;
        }

        .hero-slide.is-active {
          display: grid;
        }

        .hero-copy {
          grid-area: copy;
          display: flex;
          flex-direction: row;
          align-items: stretch;
          gap: 16px;
          padding-top: 0;
        }

        .hero-copy-content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }

        .hero-title {
          margin: 0;
        }

        .hero-visual {
          grid-area: visual;
          min-height: 0;
          width: 100%;
          justify-self: center;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        .hero-actions {
          grid-area: actions;
          flex-direction: column;
          align-items: center;
          gap: 16px;
          margin-top: 16px;
        }

        .hero-btn {
          width: 100%;
          min-width: 0;
          height: 50px;
          font-size: 16px;
          gap: 12px;
        }

        .hero-btn.hero-btn-compact {
          width: max-content !important;
          max-width: 100%;
          min-width: 0 !important;
          padding: 0 18px !important;
          align-self: center;
        }

        .hero-link {
          font-size: 14px;
          width: fit-content;
          align-self: center;
        }

        .hero-device {
          display: block;
          width: min(100%, 302px);
          aspect-ratio: 570 / 392;
          min-height: 210px;
          margin: 0 auto;
        }

        .hero-device-picture {
          width: 100%;
          height: 100%;
        }

        .hero-device-core {
          width: 178px;
          height: 68px;
          top: 42px;
        }

        .hero-device-buttons {
          top: 62px;
          width: 104px;
          gap: 14px;
        }

        .hero-device-buttons span {
          width: 18px;
          height: 18px;
        }

        .hero-device-mark {
          top: 82px;
          width: 42px;
        }

        .hero-dots {
          margin-top: 16px;
          margin-left: auto;
          margin-right: auto;
        }

        .award-section {
          padding-top: 28px;
        }

        .award-shell {
          padding: 0 14px 44px;
        }

        .award-card {
          grid-template-columns: 68px minmax(0, 1fr) auto;
          gap: 8px;
          height: 96px;
          padding: 8px 10px 8px 8px;
          border-radius: 20px;
        }

        .award-visual {
          min-height: 0;
          padding: 4px;
          border-radius: 14px;
        }

        .award-visual img {
          max-height: 72px;
        }

        .award-content {
          gap: 4px;
          padding: 0;
        }

        .award-kicker {
          min-height: 22px;
          padding: 2px 10px;
          font-size: 8px;
          letter-spacing: 0.16em;
        }

        .award-title {
          max-width: none;
          font-size: 12px;
          line-height: 1.2;
          white-space: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .award-action {
          justify-self: center;
          align-self: center;
          width: 100%;
          justify-content: center;
        }

        .award-btn {
          width: max-content;
          min-width: 94px;
          height: 30px;
          border-radius: 10px;
          font-size: 10px;
          padding: 0 10px;
          gap: 8px;
          margin: 0 auto;
        }

        .hero-sidecard {
          grid-area: sidecard;
          display: grid;
          grid-template-columns: minmax(118px, 42%) minmax(0, 1fr);
          grid-template-rows: auto;
          grid-template-areas: "media body";
          align-items: center;
          column-gap: 12px;
          width: 100%;
          min-height: 0;
          padding: 12px;
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.68);
          box-shadow:
            0 14px 30px rgba(28, 32, 43, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.86);
        }

        .hero-sidecard-media {
          grid-area: media;
          display: block;
          min-height: 128px;
          aspect-ratio: 1 / 1;
          border-radius: 14px;
        }

        .hero-sidecard-body {
          grid-area: body;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
          padding-top: 0;
          min-width: 0;
        }

        .hero-sidecard-mark {
          width: 22px;
        }

        .hero-sidecard-copy {
          font-size: 12px;
          line-height: 1.4;
          letter-spacing: 0;
        }

        .hero-sidecard.hero-sidecard--media-only {
          display: block;
        }

        .hero-sidecard--media-only .hero-sidecard-media {
          width: 100%;
          min-height: 190px;
          aspect-ratio: 16 / 9;
        }

        .header {
          grid-template-columns: 1fr auto;
          justify-items: stretch;
          text-align: left;
          gap: 12px 10px;
          padding: 14px 14px 12px;
        }

        .brand {
          width: auto;
          height: 42px;
        }

        .brand-mark {
          width: 90px;
          height: 40px;
        }

        .nav {
          position: fixed;
          top: var(--mobile-nav-top);
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          padding: 12px 14px 12px;
          border-radius: 0 0 20px 20px;
          max-height: none;
        }

        .header-shell.nav-open .nav {
          padding-bottom: 14px;
        }

        .nav-link {
          font-size: 14px;
        }

        .header-actions .cta {
          min-width: 0;
          flex: 1 1 150px;
          max-width: 182px;
          height: 42px;
          font-size: 12px;
          padding: 0 12px;
        }

        .header-shell.nav-open .header-actions .cta {
          display: none;
        }

        .header-shell.nav-open::before {
          top: var(--mobile-nav-top);
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav {
          padding-top: 10px;
        }

        .mega-links {
          gap: 16px;
        }

        .devices-menu {
          width: 100%;
        }

        .devices-grid {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .mega-card {
          min-height: 112px;
        }

        .guide-card,
        .guide-card .mega-card-content {
          min-height: 190px;
        }

        .services-actions {
          flex-direction: column;
        }

        .services-btn {
          width: 100%;
          min-width: 0;
        }

        .header-actions {
          gap: 6px;
        }

        .menu-toggle {
          width: var(--ds-control-sm);
          min-width: var(--ds-control-sm);
          height: var(--ds-control-sm);
        }

        .checkmark {
          width: 24px;
          height: 24px;
        }

        .cta.mobile-nav-cta {
          height: 50px;
          max-width: none;
          font-size: 14px;
        }

        .services-promo,
        .devices-promo {
          min-height: 172px;
        }

        .implant-visual {
          min-height: 350px;
        }

        .implant-visual-label {
          left: 16px;
          right: 16px;
          bottom: 16px;
        }

        .implant-visual-title {
          font-size: 22px;
        }

        .implant-visual-copy {
          margin-top: 10px;
          font-size: 12px;
        }

        .implant-visual-cta {
          min-height: 42px;
          margin-top: 10px;
          padding: 0 18px;
          font-size: 14px;
          gap: 12px;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .nav-item.dropdown .mega-menu {
          padding-left: 0;
          padding-right: 0;
        }

        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .services-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .devices-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .implant-dropdown .mega-menu,
        .header-shell.nav-open[data-mobile-panel]:not([data-mobile-panel=""]) .guide-dropdown .mega-menu {
          padding-top: 0;
        }
      }

      /* Cross-page consistency layer */
      :root {
        --ui-page-shell: min(calc(100% - (var(--ui-gutter) * 2)), var(--ui-container));
        --ui-page-shell-mobile: min(calc(100% - 32px), var(--ui-container));
        --ui-breadcrumb-color: rgba(72, 86, 110, 0.7);
        --ui-breadcrumb-link: rgba(43, 58, 87, 0.86);
        --ui-breadcrumb-active: #071a36;
        --ui-control-bg: rgba(255, 255, 255, 0.92);
        --ui-control-border: rgba(30, 54, 95, 0.12);
        --ui-control-shadow: 0 14px 30px rgba(18, 37, 72, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .legal-shell,
      .blog-page-shell,
      .about-shell,
      .contact-page-shell,
      .services-page-shell,
      .devices-page-shell,
      .service-detail-shell,
      .service-overview-shell,
      .device-detail-shell,
      .callback-shell,
      .cochlear-shell,
      .callback-page .callback-shell {
        width: var(--ui-page-shell);
        margin-left: auto;
        margin-right: auto;
      }

      .legal-breadcrumb,
      .blog-page-breadcrumb,
      .about-breadcrumb,
      .contact-page-breadcrumb,
      .services-page-breadcrumb,
      .devices-page-breadcrumb,
      .service-breadcrumb,
      .device-detail-breadcrumb,
      .callback-breadcrumb,
      .cochlear-breadcrumb,
      .callback-page .callback-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        min-height: 34px;
        margin: 0 0 22px;
        padding: 0;
        text-align: left;
        color: var(--ui-breadcrumb-color);
        font-size: 13px;
        line-height: 1.25;
        font-weight: 650;
        letter-spacing: -0.01em;
      }

      .legal-breadcrumb a,
      .blog-page-breadcrumb a,
      .about-breadcrumb a,
      .contact-page-breadcrumb a,
      .services-page-breadcrumb a,
      .devices-page-breadcrumb a,
      .service-breadcrumb a,
      .device-detail-breadcrumb a,
      .callback-breadcrumb a,
      .cochlear-breadcrumb a,
      .callback-page .callback-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--ui-breadcrumb-link);
        text-decoration: none;
        transition: color var(--ui-transition), opacity var(--ui-transition);
      }

      .legal-breadcrumb a:hover,
      .legal-breadcrumb a:focus-visible,
      .blog-page-breadcrumb a:hover,
      .blog-page-breadcrumb a:focus-visible,
      .about-breadcrumb a:hover,
      .about-breadcrumb a:focus-visible,
      .contact-page-breadcrumb a:hover,
      .contact-page-breadcrumb a:focus-visible,
      .services-page-breadcrumb a:hover,
      .services-page-breadcrumb a:focus-visible,
      .devices-page-breadcrumb a:hover,
      .devices-page-breadcrumb a:focus-visible,
      .service-breadcrumb a:hover,
      .service-breadcrumb a:focus-visible,
      .device-detail-breadcrumb a:hover,
      .device-detail-breadcrumb a:focus-visible,
      .callback-breadcrumb a:hover,
      .callback-breadcrumb a:focus-visible,
      .cochlear-breadcrumb a:hover,
      .cochlear-breadcrumb a:focus-visible,
      .callback-page .callback-breadcrumb a:hover,
      .callback-page .callback-breadcrumb a:focus-visible {
        color: var(--ui-breadcrumb-active);
      }

      .legal-breadcrumb span,
      .blog-page-breadcrumb span,
      .about-breadcrumb span,
      .contact-page-breadcrumb span,
      .services-page-breadcrumb span,
      .devices-page-breadcrumb span,
      .service-breadcrumb span,
      .device-detail-breadcrumb span,
      .callback-breadcrumb span,
      .cochlear-breadcrumb span,
      .callback-page .callback-breadcrumb span {
        color: var(--ui-breadcrumb-active);
      }

      .services-page-breadcrumb {
        color: rgba(226, 238, 255, 0.72);
      }

      .services-page-breadcrumb a {
        color: rgba(240, 247, 255, 0.82);
      }

      .services-page-breadcrumb a:hover,
      .services-page-breadcrumb a:focus-visible,
      .services-page-breadcrumb span {
        color: #ffffff;
      }

      .hero-control,
      .insight-nav-btn,
      .blog-card-arrow {
        width: var(--ui-control-md);
        height: var(--ui-control-md);
        min-width: var(--ui-control-md);
        border-radius: var(--ui-radius-control);
        border: 1px solid var(--ui-control-border);
        background: var(--ui-control-bg);
        color: #10213d;
        box-shadow: var(--ui-control-shadow);
        transition:
          transform var(--ui-transition),
          background var(--ui-transition),
          border-color var(--ui-transition),
          box-shadow var(--ui-transition),
          color var(--ui-transition),
          opacity var(--ui-transition);
      }

      .hero-control:hover,
      .insight-nav-btn:hover,
      .blog-card:hover .blog-card-arrow,
      .blog-card:focus-visible .blog-card-arrow {
        transform: translateX(2px);
        background: #ffffff;
        border-color: rgba(30, 54, 95, 0.2);
        box-shadow: 0 16px 34px rgba(18, 37, 72, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      }

      .hero-control i,
      .insight-nav-btn i,
      .blog-card-arrow i {
        font-size: 18px;
        line-height: 1;
        transition: transform var(--ui-transition);
      }

      .hero-control:hover i,
      .insight-nav-btn:hover i,
      .blog-card:hover .blog-card-arrow i,
      .blog-card:focus-visible .blog-card-arrow i {
        transform: translateX(2px);
      }

      .insight-nav-btn:disabled {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
      }

      .blog-pagination,
      .devices-pagination {
        justify-content: center;
        gap: 10px;
      }

      .blog-pagination a,
      .blog-pagination span,
      .devices-page-link {
        min-width: 42px;
        min-height: 42px;
        border: 1px solid #d8e3f2;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
        color: #24344c;
        font-size: 14px;
        font-weight: 800;
        box-shadow: 0 12px 24px rgba(21, 38, 68, 0.06);
        transition:
          transform var(--ui-transition),
          border-color var(--ui-transition),
          background var(--ui-transition),
          color var(--ui-transition),
          box-shadow var(--ui-transition);
      }

      .blog-pagination a:hover,
      .blog-pagination a:focus-visible,
      .devices-page-link:hover,
      .devices-page-link:focus-visible {
        transform: translateY(-1px);
        border-color: #082455;
        background: #ffffff;
        color: #082455;
        box-shadow: 0 14px 28px rgba(21, 38, 68, 0.1);
        outline: none;
      }

      .blog-pagination a.is-active,
      .blog-pagination span,
      .devices-page-link.is-active {
        border-color: #082455;
        background: #082455;
        color: #ffffff;
        box-shadow: 0 16px 30px rgba(8, 36, 85, 0.18);
      }

      .blog-pagination-next {
        width: 42px;
        padding: 0;
      }

      .blog-listing-hero,
      .blog-article-hero,
      .about-hero,
      .legal-hero,
      .contact-page-hero,
      .services-page-hero,
      .devices-page-hero,
      .service-detail-hero,
      .device-detail-hero,
      .callback-hero,
      .callback-page .callback-hero,
      .cochlear-hero {
        padding-top: clamp(26px, 3.6vw, 54px);
      }

      .services-page-hero {
        min-height: auto;
      }

      @media (min-width: 1201px) {
        .header {
          width: 100%;
          max-width: none;
          grid-template-columns: 116px minmax(0, 1fr) auto;
          gap: clamp(18px, 2vw, 28px);
        }

        .nav {
          justify-self: end;
        }

        .nav-main {
          gap: clamp(20px, 2.1vw, 30px);
          padding-right: clamp(18px, 2vw, 26px);
        }
      }

      @media (max-width: 720px) {
        .legal-shell,
        .blog-page-shell,
        .about-shell,
        .contact-page-shell,
        .services-page-shell,
        .devices-page-shell,
        .service-detail-shell,
        .service-overview-shell,
        .device-detail-shell,
        .callback-shell,
        .cochlear-shell,
        .callback-page .callback-shell {
          width: var(--ui-page-shell-mobile);
        }

        .legal-breadcrumb,
        .blog-page-breadcrumb,
        .about-breadcrumb,
        .contact-page-breadcrumb,
        .services-page-breadcrumb,
        .devices-page-breadcrumb,
        .service-breadcrumb,
        .device-detail-breadcrumb,
        .callback-breadcrumb,
        .cochlear-breadcrumb,
        .callback-page .callback-breadcrumb {
          flex-wrap: nowrap;
          gap: 8px;
          min-height: 30px;
          margin-bottom: 18px;
          overflow-x: auto;
          white-space: nowrap;
          font-size: 12px;
          scrollbar-width: none;
        }

        .legal-breadcrumb::-webkit-scrollbar,
        .blog-page-breadcrumb::-webkit-scrollbar,
        .about-breadcrumb::-webkit-scrollbar,
        .contact-page-breadcrumb::-webkit-scrollbar,
        .services-page-breadcrumb::-webkit-scrollbar,
        .devices-page-breadcrumb::-webkit-scrollbar,
        .service-breadcrumb::-webkit-scrollbar,
        .device-detail-breadcrumb::-webkit-scrollbar,
        .callback-breadcrumb::-webkit-scrollbar,
        .cochlear-breadcrumb::-webkit-scrollbar,
        .callback-page .callback-breadcrumb::-webkit-scrollbar {
          display: none;
        }
      }

      /* Shared component enforcement: intentionally last in the cascade. */

      /* Site-wide breadcrumb: compact surface, quiet hierarchy and chevron separators. */
      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) {
        width: auto;
        max-width: 100%;
        min-height: 34px;
        gap: 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > a {
        min-height: 34px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > a:hover,
      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > a:focus-visible {
        background: transparent;
      }

      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > span {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      :where(.ui-breadcrumb, .legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > span[aria-hidden="true"] {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        overflow: hidden;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        color: rgba(72, 86, 110, 0.42);
        font-size: 0;
        transform: rotate(45deg);
      }

      :where(.legal-breadcrumb, .blog-page-breadcrumb, .about-breadcrumb,
        .contact-page-breadcrumb, .services-page-breadcrumb, .devices-page-breadcrumb,
        .service-breadcrumb, .device-detail-breadcrumb, .callback-breadcrumb,
        .cochlear-breadcrumb, .callback-page .callback-breadcrumb) > span:last-child {
        overflow: hidden;
        max-width: min(52vw, 420px);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 750;
      }

      .services-page-breadcrumb {
        background: transparent;
      }

      .services-page-breadcrumb > a {
        background: transparent;
        box-shadow: none;
      }

      :root {
        /* Header, announcement and page content share one visual axis. */
        --ui-container-wide: var(--ds-container-wide);
        --ds-control-radius: var(--ds-radius-control);
      }

      .hero-slider-inner,
      .award-shell {
        max-width: var(--ui-container);
      }

      .header,
      .announcement-inner {
        max-width: var(--ui-container-wide);
      }

      /* Keep desktop navigation aligned to the same readable content measure. */
      @media (min-width: 1201px) {
        .header,
        .announcement-inner {
          width: 100%;
          max-width: var(--ui-container-wide);
        }
      }

      @media (max-width: 1200px) {
        .header-shell.is-scrolled .header {
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      @media (max-width: 720px) {
        .header-shell.is-scrolled .header {
          padding-left: 14px;
          padding-right: 14px;
        }
      }

      .legal-shell,
      .blog-page-shell,
      .about-shell,
      .contact-page-shell,
      .services-page-shell,
      .devices-page-shell,
      .service-detail-shell,
      .service-overview-shell,
      .device-detail-shell,
      .callback-shell,
      .cochlear-shell {
        width: min(calc(100% - (2 * var(--ds-gutter))), var(--ds-container));
        margin-inline: auto;
      }

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

      .ui-container--wide {
        max-width: var(--ds-container-wide);
      }

      .ui-container--article {
        max-width: var(--ds-container-article);
      }

      .ui-section {
        padding-block: var(--ds-section-space);
      }

      .ui-section--compact {
        padding-block: clamp(44px, 5vw, 64px);
      }

      .ui-section-heading {
        max-width: 1080px;
        margin-inline: auto;
        text-align: center;
      }

      .ui-section-title {
        margin-top: 0;
        color: var(--ds-color-brand-ink);
        font-family: var(--ds-font-family);
        font-weight: var(--ds-font-weight-bold);
        text-wrap: balance;
      }

      .ui-section-description {
        max-width: 650px;
        margin: 12px auto 0;
        color: var(--ds-color-brand-ink-muted);
        font-family: var(--ds-font-family);
        text-wrap: pretty;
      }

      .cta,
      .hero-btn,
      .devices-primary-btn,
      .devices-secondary-btn,
      .services-page-cta,
      .service-primary-btn,
      .pediatric-btn,
      .about-cta-button,
      .callback-submit,
      .contact-message-submit,
      .blog-newsletter-cta,
      .service-overview-btn,
      .insight-card-btn {
        min-height: var(--ds-control-md);
        border-radius: var(--ds-control-radius);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        transition: color var(--ds-transition), background-color var(--ds-transition),
          border-color var(--ds-transition), box-shadow var(--ds-transition),
        transform var(--ds-transition);
      }

      .ui-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: var(--ds-control-md);
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: var(--ds-control-radius);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        transition: color var(--ds-transition), background-color var(--ds-transition),
          border-color var(--ds-transition), box-shadow var(--ds-transition),
          transform var(--ds-transition);
      }

      .ui-button--primary {
        background: var(--ds-color-navy-strong);
        color: var(--ds-color-surface);
      }

      .ui-button--secondary {
        border-color: var(--ds-color-border);
        background: var(--ds-color-surface);
        color: var(--ds-color-brand-ink);
      }

      :is(
          .cta,
          .hero-btn,
          .devices-primary-btn,
          .devices-secondary-btn,
          .services-page-cta,
          .service-primary-btn,
          .pediatric-btn,
          .about-cta-button,
          .callback-submit,
          .contact-message-submit,
          .blog-newsletter-cta,
          .service-overview-btn,
          .insight-card-btn,
          .implant-visual-cta,
          .award-btn,
          .hearing-steps-primary,
          .hearing-steps-secondary,
          .services-showcase-cta,
          .blog-cta,
          .contact-branch-btn,
          .device-detail-primary,
          .device-detail-secondary,
          .cochlear-primary,
          .blog-related-all,
          .announcement-btn
        ):focus-visible {
        outline: 0;
        box-shadow: var(--ds-focus-ring);
      }

      :is(button, [role="button"], input[type="submit"]):disabled,
      :is(.cta, .hero-btn, .callback-submit, .contact-message-submit)[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.52;
        transform: none;
      }

      /* All full-size actions use the same control geometry. Icon-only controls stay circular. */
      .implant-visual-cta,
      .award-btn,
      .hearing-steps-primary,
      .hearing-steps-secondary,
      .services-showcase-cta,
      .blog-cta,
      .contact-branch-btn,
      .device-detail-primary,
      .device-detail-secondary,
      .cochlear-primary,
      .blog-related-all {
        min-height: var(--ds-control-md);
        border-radius: var(--ds-control-radius);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        transition: color var(--ds-transition), background-color var(--ds-transition),
          border-color var(--ds-transition), box-shadow var(--ds-transition),
          transform var(--ds-transition);
      }

      /* Repeated section labels share one typographic and surface treatment. */
      .ui-pill,
      .ui-preset-pill-blue,
      .legal-kicker,
      .blog-page-kicker,
      .about-kicker,
      .contact-page-kicker,
      .callback-kicker,
      .cochlear-kicker,
      .services-page-kicker,
      .service-detail-kicker,
      .device-story-kicker,
      .hearing-steps-kicker,
      .faq-kicker,
      .services-showcase-kicker,
      .partner-logos-kicker,
      .blog-kicker,
      .hearing-section-kicker,
      .hearing-knowledge-pill,
      .hearing-knowledge-eyebrow,
      .cochlear-related-kicker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 30px;
        margin-top: 0;
        margin-bottom: 12px;
        padding: 4px 14px;
        border: 1px solid var(--ui-pill-border);
        border-radius: var(--ds-control-radius);
        background: var(--ui-pill-background);
        color: var(--ui-pill-color);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      /* Keep full-size actions on one geometry; compact filter chips remain pills. */
      .callback-form .callback-submit,
      .cochlear-actions .cochlear-primary,
      .cochlear-actions .cochlear-secondary,
      .cochlear-consult-actions .cochlear-primary,
      .devices-filter {
        border-radius: var(--ds-control-radius);
      }

      /* Hakkımızda hero etiketi, görsel üzerindeki koyu gradyan üzerinde net kalsın. */
      .about-hero .about-kicker {
        border-color: rgba(255, 255, 255, 0.78);
        background: #ffffff;
        color: var(--ds-color-brand-blue);
        box-shadow: 0 6px 16px rgba(7, 25, 50, 0.14);
      }

      /* Announcement controls are intentionally compact; keep their responsive sizing. */
      .announcement-btn {
        border-radius: var(--ds-control-radius);
      }

      @media (max-width: 720px) {
        :root {
          --ds-control-md: 44px;
        }

        .legal-shell,
        .blog-page-shell,
        .about-shell,
        .contact-page-shell,
        .services-page-shell,
        .devices-page-shell,
        .service-detail-shell,
        .service-overview-shell,
        .device-detail-shell,
        .callback-shell,
        .cochlear-shell {
          width: min(calc(100% - 36px), var(--ds-container));
        }

        :is(
            .cta,
            .hero-btn,
            .devices-primary-btn,
            .devices-secondary-btn,
            .services-page-cta,
            .service-primary-btn,
            .pediatric-btn,
            .about-cta-button,
            .callback-submit,
            .contact-message-submit,
            .blog-newsletter-cta,
            .service-overview-btn,
            .insight-card-btn,
            .implant-visual-cta,
            .award-btn,
            .hearing-steps-primary,
            .hearing-steps-secondary,
            .services-showcase-cta,
            .blog-cta,
            .contact-branch-btn,
            .device-detail-primary,
            .device-detail-secondary,
            .cochlear-primary,
            .blog-related-all
          ) {
          min-height: var(--ds-control-md);
          font-size: 13px;
        }

        .award-section .award-btn {
          min-width: 110px;
          min-height: var(--ds-control-sm);
          height: var(--ds-control-sm);
          padding: 0 10px;
          border-radius: var(--ds-control-radius);
          font-size: 10px;
          gap: 8px;
        }

        .callback-form .callback-submit {
          height: auto;
          min-height: var(--ds-control-md);
          font-size: 13px;
        }

        :is(
            .ui-pill,
            .ui-preset-pill-blue,
            .legal-kicker,
            .blog-page-kicker,
            .about-kicker,
            .contact-page-kicker,
            .callback-kicker,
            .cochlear-kicker,
            .services-page-kicker,
            .service-detail-kicker,
            .device-story-kicker,
            .hearing-steps-kicker,
            .faq-kicker,
            .services-showcase-kicker,
            .partner-logos-kicker,
            .blog-kicker,
            .hearing-section-kicker,
            .hearing-knowledge-pill,
            .hearing-knowledge-eyebrow,
            .cochlear-related-kicker
          ) {
          min-height: 26px;
          margin-bottom: 10px;
          padding: 3px 10px;
          font-size: 10px;
        }

        .services-showcase-header .services-showcase-kicker,
        .blog-header .blog-kicker {
          min-height: 26px;
          padding: 3px 10px;
          font-size: 10px;
        }

        :is(.hero-control, .insight-nav-btn) {
          width: 44px;
          height: 44px;
          min-height: 44px;
        }

        /* Keep listing-page hierarchy aligned with the other internal pages. */
        #devices-page-title {
          font-size: clamp(32px, 8.5vw, 36px);
          line-height: 1.05;
          text-wrap: balance;
        }

        /* Long sitemap groups stay scannable without making the footer dominate. */
        .site-footer-sitemap {
          gap: 20px;
        }

        .site-footer-sitemap-group ul {
          gap: 10px 14px;
        }
      }

      @media (max-width: 480px) {
        .site-footer-sitemap-group ul {
          grid-template-columns: 1fr;
        }

        .site-footer-sitemap-group a {
          font-size: 12px;
          line-height: 1.45;
        }
      }
/* Gutenberg-managed cochlear implant guide pages */
.cochlear-detail-page .cochlear-body {
  padding-top: clamp(46px, 6vw, 84px);
}

@media (prefers-reduced-motion: reduce) {
  .device-series-link > span {
    animation: none;
    color: #072557;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.cochlear-detail-page .cochlear-hero h1 {
  max-width: 580px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}

.cochlear-detail-page .cochlear-lede {
  max-width: 600px;
  font-size: 13px;
  line-height: 1.68;
}

.cochlear-editor-content {
  min-width: 0;
}

.cochlear-editor-content > .cochlear-content-section {
  margin: 0 0 clamp(34px, 5vw, 54px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cochlear-editor-content > .cochlear-content-section:last-child {
  margin-bottom: 0;
}

.cochlear-editor-content .cochlear-content-section h2 {
  margin: 0 0 14px;
  color: #0a204d;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
}

.cochlear-editor-content .cochlear-content-section h3 {
  margin: 22px 0 10px;
  color: #0c5dbf;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
}

.cochlear-editor-content .cochlear-content-section p,
.cochlear-editor-content .cochlear-content-section li {
  color: rgba(18, 35, 66, 0.78);
  font-size: 0.94rem;
  line-height: 1.72;
}

.cochlear-editor-content .cochlear-content-section ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.cochlear-content-cards {
  gap: clamp(22px, 3vw, 40px);
  margin: 22px 0 0;
}

.cochlear-content-cards > .wp-block-column {
  padding: 18px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cochlear-content-cards > .wp-block-column h3 {
  margin-top: 0;
}

.cochlear-content-cards > .wp-block-column p {
  margin-bottom: 0;
  color: rgba(18, 35, 66, 0.72);
  line-height: 1.65;
}

.cochlear-content-note {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 20px 24px;
  border: 0;
  border-left: 4px solid #f0bc24;
  border-radius: 0 18px 18px 0;
  background: #f5f8fd;
  color: #17325f;
  box-shadow: none;
}

.cochlear-content-note p {
  margin: 0;
}

.cochlear-content-action {
  margin: clamp(24px, 3vw, 34px) 0 0;
}

.cochlear-content-action .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffc947 0%, #f5aa1c 100%);
  color: #071a44;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 14px 26px rgba(219, 153, 20, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cochlear-content-action .wp-block-button__link:hover,
.cochlear-content-action .wp-block-button__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(219, 153, 20, 0.28);
}

.cochlear-application-card {
  margin-top: clamp(38px, 5vw, 62px);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(216, 226, 240, 0.92);
  border-radius: 22px;
  background: #f5f8fd;
  box-shadow: 0 18px 42px rgba(35, 55, 92, 0.08);
  scroll-margin-top: 112px;
}

.cochlear-application-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 5% 12%, rgba(103, 162, 232, 0.12), transparent 30%),
    #f6f9fd;
}

.cochlear-application-page .cochlear-application-shell {
  width: var(--ui-page-shell);
  margin: 0 auto 16px;
}

.cochlear-application-page .cochlear-breadcrumb {
  margin-bottom: 0;
}

.cochlear-application-screen {
  padding: clamp(28px, 3.4vw, 48px) 24px clamp(42px, 6vw, 86px);
}

.cochlear-application-screen-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  width: min(1240px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(28, 51, 91, 0.12);
}

.cochlear-application-person {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: #eaf2fc;
}

.cochlear-application-person::after {
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(7, 26, 68, 0.18));
  content: "";
  pointer-events: none;
}

.cochlear-application-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% center;
}

.cochlear-application-panel {
  align-self: center;
  padding: clamp(36px, 3.4vw, 44px);
  scroll-margin-top: 110px;
}

.cochlear-application-panel .cochlear-application-head {
  max-width: 600px;
}

.cochlear-application-panel .cochlear-application-head h1 {
  margin: 6px 0 10px;
  color: #071a44;
  font-size: clamp(2rem, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cochlear-application-head {
  margin-bottom: 22px;
}

.cochlear-application-head h2 {
  margin: 6px 0 8px;
  color: #0a204d;
  font-size: clamp(1.28rem, 2vw, 1.75rem);
  line-height: 1.1;
}

.cochlear-application-head > p:last-child {
  margin: 0;
  color: rgba(18, 35, 66, 0.68);
  font-size: 1rem;
  line-height: 1.6;
}

.cochlear-application-form {
  display: grid;
  gap: 18px;
}

.cochlear-application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.cochlear-application-form label {
  display: grid;
  gap: 8px;
}

.cochlear-application-form label > span {
  color: #10244c;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.cochlear-application-form input,
.cochlear-application-form select,
.cochlear-application-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid rgba(183, 199, 221, 0.9);
  border-radius: 12px;
  background: #ffffff;
  color: #10244c;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  outline: none;
}

.cochlear-application-form textarea {
  box-sizing: border-box;
  height: 116px;
  min-height: 116px;
  resize: vertical;
}

.cochlear-application-form input:focus,
.cochlear-application-form select:focus,
.cochlear-application-form textarea:focus {
  border-color: #246ed0;
  box-shadow: 0 0 0 3px rgba(36, 110, 208, 0.12);
}

.cochlear-application-form .cochlear-application-consent {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 4px;
}

.cochlear-application-consent input {
  min-height: 0;
  margin-top: 2px;
}

.cochlear-application-consent span {
  font-weight: 600 !important;
  line-height: 1.5;
  font-size: 0.875rem;
}

.cochlear-application-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: #071a44;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(7, 26, 68, 0.18);
  margin-top: 2px;
}

.cochlear-application-status {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
}

.cochlear-application-status.is-success {
  background: #e9f8ef;
  color: #17663a;
}

.cochlear-application-status.is-error {
  background: #fff0ee;
  color: #a33428;
}

.cochlear-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .cochlear-detail-page .cochlear-hero h1 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .cochlear-detail-page .cochlear-lede {
    font-size: 12.5px;
  }

  .cochlear-editor-content > .cochlear-content-section {
    margin-bottom: 34px;
  }

  .cochlear-editor-content .cochlear-content-section h2 {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
  }

  .cochlear-editor-content .cochlear-content-section p,
  .cochlear-editor-content .cochlear-content-section li {
    font-size: 0.91rem;
  }

  .cochlear-content-cards {
    display: grid;
  }

  .cochlear-application-grid {
    grid-template-columns: 1fr;
  }

  .cochlear-application-form button {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .cochlear-application-page .cochlear-application-shell {
    width: var(--ui-page-shell-mobile);
  }

  .cochlear-application-screen {
    padding: 24px 16px 48px;
  }

  .cochlear-application-screen-inner {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .cochlear-application-person {
    min-height: 300px;
    max-height: 360px;
  }

  .cochlear-application-person img {
    object-position: center 30%;
  }

  .cochlear-application-panel {
    padding: 32px;
  }
}

@media (max-width: 760px) {
  .cochlear-application-screen {
    padding: 18px 14px 40px;
  }

  .cochlear-application-person {
    min-height: 280px;
    max-height: 320px;
  }

  .cochlear-application-panel {
    padding: 26px 20px 30px;
  }

  .cochlear-application-panel .cochlear-application-head h1 {
    margin-bottom: 12px;
    font-size: clamp(1.9rem, 8.6vw, 2.2rem);
    line-height: 1.08;
  }

  .cochlear-application-head {
    margin-bottom: 22px;
  }

  .cochlear-application-head > p:last-child {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .cochlear-application-form {
    gap: 18px;
  }

  .cochlear-application-grid {
    gap: 16px;
  }

  .cochlear-application-form label {
    gap: 7px;
  }

  .cochlear-application-form label > span {
    font-size: 0.875rem;
  }

  .cochlear-application-consent span {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .cochlear-application-form input,
  .cochlear-application-form select,
  .cochlear-application-form textarea,
  .cochlear-application-form button {
    font-size: 16px;
  }

  .cochlear-application-form input,
  .cochlear-application-form select,
  .cochlear-application-form textarea,
  .cochlear-application-form button {
    min-height: 48px;
  }

  .cochlear-application-form textarea {
    min-height: 116px;
    height: 116px;
  }

  .cochlear-application-form .cochlear-application-consent {
    gap: 12px;
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .cochlear-application-consent input {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 390px) {
  .cochlear-application-person {
    min-height: 250px;
  }

  .cochlear-application-panel {
    padding: 24px 16px 28px;
  }
}

/* Dynamic hearing devices system */
.hearing-guide-shell {
  width: min(calc(100% - (var(--ui-gutter, 24px) * 2)), var(--ui-container-wide, 1240px));
  margin-inline: auto;
}

.hearing-section-kicker {
  display: block;
  margin: 0 0 10px;
  color: #c58a18;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.device-detail-page .device-detail-section-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin: 0 0 12px;
  padding: 4px 14px;
  gap: 8px;
  border: 1px solid var(--ui-pill-border);
  border-radius: var(--ds-control-radius);
  background: var(--ui-pill-background);
  color: var(--ui-pill-color);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.device-detail-page a.device-detail-section-pill:hover,
.device-detail-page a.device-detail-section-pill:focus-visible {
  border-color: color-mix(in srgb, var(--ui-pill-color) 34%, var(--ui-pill-border));
}

.device-detail-page a.device-detail-section-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-pill-color) 42%, transparent);
  outline-offset: 3px;
}

.device-detail-page .device-detail-section-pill i {
  color: currentColor;
  font-size: 14px;
}

@media (max-width: 768px) {
  .device-detail-page .device-detail-section-pill {
    min-height: 26px;
    margin-bottom: 10px;
    padding: 3px 10px;
    font-size: 10px;
  }
}

.hearing-catalog-heading {
  max-width: 760px;
  margin: 48px auto 34px;
  text-align: center;
}

.hearing-catalog-heading h2,
.hearing-guide-directory-intro h2,
.hearing-benefits-section .hearing-section-heading h2,
.hearing-related-heading h2 {
  margin: 0;
  color: #071a3d;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hearing-catalog-heading p,
.hearing-guide-directory-intro > p:not(.cochlear-kicker),
.hearing-benefits-section .hearing-section-heading p,
.hearing-related-heading p {
  margin: 14px 0 0;
  color: #617086;
  font-size: 15px;
  line-height: 1.7;
}

.hearing-section-heading {
  max-width: 720px;
  margin-bottom: 42px;
}

.hearing-section-heading h2 {
  margin: 0;
  color: #071a3d;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hearing-section-heading--row {
  display: flex;
  max-width: none;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.hearing-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9f6b0a;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.hearing-text-link:hover,
.hearing-text-link:focus-visible {
  color: #071a3d;
  outline: none;
}

.hearing-guide-directory,
.hearing-benefits-section,
.hearing-related-products {
  padding: clamp(72px, 8vw, 112px) 0;
}

.hearing-guide-directory {
  background: #fff;
}

.hearing-catalog-guide-directory {
  margin: 0 0 clamp(36px, 5vw, 60px);
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(214, 224, 238, 0.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 244, 221, 0.72), transparent 30%),
    #ffffff;
  box-shadow: 0 22px 58px rgba(29, 45, 78, 0.07);
}

.hearing-catalog-guide-directory .hearing-guide-directory-grid {
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 82px);
}

.hearing-guide-directory-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr);
  gap: clamp(46px, 7vw, 104px);
  align-items: start;
}

.hearing-guide-directory-intro {
  position: sticky;
  top: 120px;
}

.hearing-guide-directory-groups {
  display: grid;
  gap: clamp(26px, 3vw, 38px);
}

.hearing-guide-directory-group h3 {
  margin: 0 0 9px;
  color: #7b879a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hearing-guide-directory-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 62px);
  row-gap: 7px;
}

.hearing-guide-directory-links a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 13px;
  align-items: center;
  min-height: 58px;
  padding: 8px 0;
  color: #17233a;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hearing-guide-directory-links a > i:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9f6b0a;
  background: #fff4dc;
  font-size: 16px;
}

.hearing-guide-directory-links a span {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.hearing-guide-directory-links a > i:last-child {
  color: #9aa5b5;
  font-size: 18px;
  transition: transform 0.2s ease;
}

.hearing-guide-directory-links a:hover,
.hearing-guide-directory-links a:focus-visible {
  color: #b77b0e;
  outline: none;
  transform: translateX(3px);
}

.hearing-guide-directory-links a:hover > i:last-child,
.hearing-guide-directory-links a:focus-visible > i:last-child {
  transform: translateX(3px);
}

.hearing-benefits-section {
  background: #f7faff;
}

.hearing-benefits-section .hearing-section-heading {
  max-width: 650px;
  margin-bottom: 46px;
}

.hearing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
}

.hearing-benefits-grid article {
  min-width: 0;
}

.hearing-benefits-grid article > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #a16c09;
  background: #fff0d0;
  font-size: 21px;
}

.hearing-benefits-grid h3 {
  margin: 0;
  color: #10213e;
  font-size: 18px;
  line-height: 1.35;
}

.hearing-benefits-grid p {
  margin: 10px 0 0;
  color: #66758a;
  font-size: 14px;
  line-height: 1.7;
}

.hearing-guide-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px) 0 clamp(54px, 7vw, 88px);
  background:
    radial-gradient(circle at 78% 18%, rgba(45, 112, 207, 0.13), transparent 27%),
    radial-gradient(circle at 14% 86%, rgba(229, 168, 44, 0.12), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}

.hearing-guide-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111, 147, 195, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 147, 195, 0.06) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 78%);
  content: "";
  pointer-events: none;
}

.hearing-guide-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 36px);
  color: #8994a5;
  font-size: 12px;
  font-weight: 650;
}

.hearing-guide-breadcrumb a {
  color: #5f6e83;
  text-decoration: none;
}

.hearing-guide-breadcrumb a:hover,
.hearing-guide-breadcrumb a:focus-visible {
  color: #9f6b0a;
  outline: none;
}

.hearing-guide-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.76fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.hearing-guide-hero-copy {
  min-width: 0;
  padding: clamp(8px, 2vw, 24px) 0;
}

.hearing-guide-hero-copy h1 {
  max-width: 17ch;
  margin: 0;
  color: #071a3d;
  font-size: clamp(34px, 3.7vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hearing-guide-hero-copy > .hearing-guide-lede {
  max-width: 650px;
  margin: 16px 0 0;
  color: #58677d;
  font-size: 15px;
  line-height: 1.68;
}

.hearing-guide-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.hearing-guide-quick-item {
  min-width: 0;
  padding: 15px 13px;
  border: 1px solid rgba(205, 219, 238, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(32, 58, 96, 0.06);
}

.hearing-guide-quick-item span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: #13529f;
  background: rgba(242, 190, 66, 0.22);
  font-size: 19px;
}

.hearing-guide-quick-item strong,
.hearing-guide-quick-item small {
  display: block;
}

.hearing-guide-quick-item strong {
  color: #10213e;
  font-size: 13px;
  line-height: 1.35;
}

.hearing-guide-quick-item small {
  margin-top: 5px;
  color: #718096;
  font-size: 11px;
  line-height: 1.45;
}

.hearing-guide-hero-visual {
  display: grid;
  place-items: center;
  min-height: 390px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(205, 219, 238, 0.88);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 70px rgba(32, 58, 96, 0.1);
}

.hearing-guide-hero-visual img {
  width: min(100%, 390px);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(13, 38, 75, 0.12));
}

.hearing-guide-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(55px, 8vw, 110px);
  align-items: start;
  padding-top: clamp(66px, 8vw, 110px);
  padding-bottom: clamp(76px, 9vw, 128px);
}

.hearing-guide-editor {
  min-width: 0;
  color: #3f4d62;
  font-size: 16px;
  line-height: 1.78;
}

.hearing-guide-editor > *:first-child {
  margin-top: 0;
}

.hearing-guide-editor h2 {
  margin: 64px 0 18px;
  color: #0a1c3e;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.hearing-guide-editor h3 {
  margin: 34px 0 12px;
  color: #152540;
  font-size: 20px;
  line-height: 1.35;
}

.hearing-guide-editor p,
.hearing-guide-editor ul,
.hearing-guide-editor ol {
  margin-top: 0;
  margin-bottom: 20px;
}

.hearing-guide-editor ul,
.hearing-guide-editor ol {
  padding-left: 1.25em;
}

.hearing-guide-editor li + li {
  margin-top: 8px;
}

.hearing-guide-editor a {
  color: #9f6b0a;
  text-underline-offset: 3px;
}

.hearing-guide-editor .wp-block-columns {
  gap: clamp(28px, 5vw, 58px);
  margin: 30px 0 48px;
}

.hearing-guide-editor .wp-block-column {
  min-width: 0;
}

.hearing-guide-editor .wp-block-quote {
  margin: 38px 0;
  padding: 0;
  border: 0;
  color: #16243d;
  font-size: 19px;
  line-height: 1.6;
}

.hearing-guide-editor .wp-block-quote::before {
  content: "\201C";
  display: block;
  height: 28px;
  color: #d99c27;
  font-size: 52px;
  font-family: Georgia, serif;
  line-height: 1;
}

.hearing-guide-content-section {
  margin: 0 0 52px;
}

.hearing-guide-content-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 42px;
  margin: 30px 0 48px;
}

.hearing-guide-content-points > * {
  margin: 0;
}

.hearing-guide-content-note {
  margin: 38px 0;
  padding: 24px 28px;
  border: 0;
  border-radius: 18px;
  background: #f7faff;
  color: #25344c;
}

.hearing-guide-side {
  position: sticky;
  top: 118px;
}

.hearing-guide-side-card {
  padding: 24px;
  border: 1px solid #e0e8f3;
  border-radius: 22px;
  background: #f8fbff;
}

.hearing-guide-side h2 {
  margin: 0 0 18px;
  color: #0b1d3e;
  font-size: 19px;
  line-height: 1.3;
}

.hearing-guide-side nav {
  display: grid;
  gap: 3px;
}

.hearing-guide-side nav a {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 8px;
  border-radius: 10px;
  color: #697589;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hearing-guide-side nav a i {
  margin-top: 1px;
  color: #b3bdca;
  font-size: 16px;
}

.hearing-guide-side nav a:hover,
.hearing-guide-side nav a:focus-visible {
  background: #eef4fd;
  color: #9f6b0a;
  outline: none;
  transform: translateX(2px);
}

.hearing-guide-side nav a.is-active {
  background: #e9f1fd;
  color: #071a3d;
  font-weight: 800;
}

.hearing-guide-side nav a.is-active i {
  color: #d89a22;
}

.hearing-guide-side-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 4px 12px;
  align-items: center;
  margin-top: 24px;
  color: #0a2450;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.hearing-guide-side-cta span {
  grid-column: 1;
  color: #a16c09;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hearing-guide-side-cta strong {
  grid-column: 1;
  line-height: 1.45;
}

.hearing-guide-side-cta i {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.hearing-guide-side-cta:hover,
.hearing-guide-side-cta:focus-visible {
  color: #a16c09;
  outline: none;
}

.hearing-related-products.hearing-knowledge-products .ui-pill {
  border-color: rgba(149, 194, 255, 0.34);
  background: rgba(84, 146, 231, 0.16);
  color: #9cc7ff;
}

.hearing-product-content {
  padding: clamp(68px, 8vw, 112px) 0;
  background: #fff;
}

.hearing-product-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: clamp(44px, 6vw, 82px);
  align-items: start;
}

.hearing-product-editor {
  min-width: 0;
  color: #47566b;
  font-size: 16px;
  line-height: 1.78;
}

.hearing-product-editor h2 {
  margin: 0 0 20px;
  color: #091c3f;
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.2;
}

.hearing-product-editor > h2 {
  max-width: 720px;
  margin-bottom: 28px;
  font-size: clamp(30px, 3.3vw, 45px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.hearing-product-editor-copy {
  max-width: 760px;
}

.hearing-product-editor-copy > :first-child,
.hearing-product-rich-copy > :first-child {
  margin-top: 0;
}

.hearing-product-editor-copy > :last-child,
.hearing-product-rich-copy > :last-child {
  margin-bottom: 0;
}

.hearing-product-editor > .wp-block-columns {
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
  margin: 0 0 34px;
}

.hearing-product-editor .wp-block-image {
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  background: #f3f6fa;
}

.hearing-product-editor .wp-block-image img {
  width: 100%;
  display: block;
}

.hearing-product-editor .wp-block-column > :first-child {
  margin-top: 0;
}

.hearing-product-editor p {
  color: #55657a;
}

.hearing-product-editor h3 {
  margin: 34px 0 12px;
  color: #152540;
  font-size: 20px;
}

.hearing-product-facts {
  position: sticky;
  top: 112px;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 112, 202, 0.42), transparent 44%),
    linear-gradient(145deg, #071a3d 0%, #0f326b 100%);
  color: #fff;
  box-shadow: 0 24px 54px rgba(6, 26, 61, 0.16);
}

.hearing-product-facts-head {
  padding: 32px 32px 25px;
}

.hearing-product-facts-head span {
  color: #ffca46;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hearing-product-facts-head h2 {
  margin: 9px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.16;
}

.hearing-product-facts-head p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.6;
}

.hearing-product-facts dl {
  margin: 0;
  padding: 4px 32px 20px;
}

.hearing-product-facts dl > div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hearing-product-facts dl dt {
  color: #92bdf4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hearing-product-facts dl dd {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 750;
}

.hearing-product-gallery {
  padding: clamp(68px, 8vw, 108px) 0;
  background: #f4f7fb;
}

.hearing-product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.hearing-product-gallery-grid figure {
  display: grid;
  place-items: center;
  min-height: 300px;
  margin: 0;
  padding: 24px;
  border-radius: 20px;
  background: #f7faff;
}

.hearing-product-gallery-grid img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
}

.hearing-product-modules {
  overflow: clip;
}

.hearing-product-module {
  padding: clamp(72px, 8vw, 112px) 0;
}

.hearing-product-module-heading {
  max-width: 820px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.hearing-product-module-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.65fr);
  gap: clamp(30px, 6vw, 88px);
  max-width: none;
  align-items: end;
}

.hearing-product-module-heading h2 {
  max-width: 820px;
  margin: 0;
  color: #071a3d;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.hearing-product-module-heading > p,
.hearing-product-module-heading--split > p {
  margin: 0;
  color: #5d6c81;
  font-size: 15px;
  line-height: 1.7;
}

.hearing-product-module--features {
  background: #f4f7fb;
}

.hearing-product-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #cbd8e9;
  border-bottom: 1px solid #cbd8e9;
}

.hearing-product-feature {
  position: relative;
  min-width: 0;
  padding: 32px clamp(20px, 2.3vw, 34px) 34px;
  border-right: 1px solid #cbd8e9;
}

.hearing-product-feature:last-child {
    border-right: 0;
}

.hearing-product-feature:nth-child(4n) {
    border-right: 0;
}

.hearing-product-feature:nth-child(n + 5) {
    border-top: 1px solid rgba(13, 43, 87, 0.12);
}

.hearing-product-feature-index {
  position: absolute;
  top: 24px;
  right: 22px;
  color: #a4b0c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hearing-product-feature > i {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 36px;
  place-items: center;
  border-radius: 13px;
  background: #fff3d5;
  color: #b67a08;
  font-size: 20px;
}

.hearing-product-feature h3 {
  margin: 0 0 10px;
  color: #0a1d40;
  font-size: 18px;
  line-height: 1.2;
}

.hearing-product-feature p {
  margin: 0;
  color: #617086;
  font-size: 13px;
  line-height: 1.62;
}

.hearing-product-module--split,
.hearing-product-module--rich {
  background: #fff;
}

.hearing-product-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
}

.hearing-product-split--image-right .hearing-product-split-media {
  grid-column: 2;
}

.hearing-product-split--image-right .hearing-product-split-copy {
  grid-column: 1;
  grid-row: 1;
}

.hearing-product-split-media {
  overflow: hidden;
  min-height: clamp(360px, 42vw, 560px);
  margin: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%),
    #edf3fb;
}

.hearing-product-split-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.hearing-product-split-copy h2,
.hearing-product-rich h2 {
  margin: 0 0 24px;
  color: #071a3d;
  font-size: clamp(30px, 3.4vw, 47px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.hearing-product-rich-copy {
  color: #59697f;
  font-size: 15px;
  line-height: 1.75;
}

.hearing-product-highlights {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hearing-product-highlights li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.hearing-product-highlights i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #fff0c7;
  color: #a66d00;
}

.hearing-product-highlights strong,
.hearing-product-highlights small {
  display: block;
}

.hearing-product-highlights strong {
  color: #0b2148;
  font-size: 14px;
}

.hearing-product-highlights small {
  margin-top: 3px;
  color: #748197;
  font-size: 12px;
  line-height: 1.5;
}

.hearing-product-module--specs {
  background:
    radial-gradient(circle at 88% 10%, rgba(52, 105, 193, 0.42), transparent 34%),
    #071a3d;
}

.hearing-product-specs {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
  gap: clamp(50px, 8vw, 126px);
  align-items: start;
}

.hearing-product-module--specs .hearing-product-module-heading h2 {
  color: #fff;
}

.hearing-product-module--specs .hearing-product-module-heading > p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.hearing-product-spec-list {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hearing-product-spec-list > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1fr);
  gap: 28px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hearing-product-spec-list dt {
  color: #91bdf6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hearing-product-spec-list dd {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}

.hearing-product-module--rich {
  border-top: 1px solid #e5ebf3;
}

.hearing-product-rich {
  max-width: 780px;
}

.hearing-product-rich--wide {
  max-width: 1040px;
}

.hearing-product-rich-copy h3 {
  margin: 32px 0 12px;
  color: #13294d;
  font-size: 22px;
}

.hearing-product-rich-copy ul,
.hearing-product-rich-copy ol {
  padding-left: 1.25em;
}

.hearing-product-module--faq {
  background: #f4f7fb;
}

.hearing-product-faq {
  display: grid;
  grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1fr);
  gap: clamp(50px, 8vw, 126px);
  align-items: start;
}

.hearing-product-faq-list {
  border-top: 1px solid #cbd8e9;
}

.hearing-product-faq-list details {
  border-bottom: 1px solid #cbd8e9;
}

.hearing-product-faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  color: #0a2048;
  font-size: 16px;
  font-weight: 780;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.hearing-product-faq-list summary::-webkit-details-marker {
  display: none;
}

.hearing-product-faq-list summary i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #163c76;
  transition: transform 180ms ease, background-color 180ms ease;
}

.hearing-product-faq-list details[open] summary i {
  transform: rotate(45deg);
  background: #ffca46;
}

.hearing-product-faq-list details > div {
  max-width: 720px;
  padding: 0 56px 22px 0;
  color: #5b6b81;
  font-size: 14px;
  line-height: 1.7;
}

.hearing-product-faq-list details > div > :first-child {
  margin-top: 0;
}

.hearing-product-faq-list details > div > :last-child {
  margin-bottom: 0;
}

.hearing-trial-cta,
.hearing-guide-bottom-cta {
  padding: clamp(50px, 7vw, 92px) 0;
  background: #eef4ff;
}

.hearing-trial-cta-inner {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.hearing-trial-visual {
  display: grid;
  place-items: center;
  min-height: 220px;
}

.hearing-trial-visual img {
  width: min(100%, 310px);
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(13, 38, 75, 0.12));
}

.hearing-trial-copy h2,
.hearing-guide-bottom-cta h2 {
  margin: 0;
  color: #071a3d;
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.hearing-trial-copy > p:last-child,
.hearing-guide-bottom-cta p:last-child {
  max-width: 620px;
  margin: 16px 0 0;
  color: #5d6c81;
  font-size: 15px;
  line-height: 1.7;
}

.hearing-guide-bottom-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 80px);
}

.hearing-guide-bottom-cta-inner > div {
  max-width: 720px;
}

@media (max-width: 980px) {
  .device-detail-panels > .device-detail-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .device-detail-panels-head h2 {
    max-width: 18ch;
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .hearing-guide-directory-grid,
  .hearing-guide-hero-grid,
  .hearing-guide-body-grid,
  .hearing-product-content-grid,
  .hearing-product-module-heading--split,
  .hearing-product-specs,
  .hearing-product-faq {
    grid-template-columns: 1fr;
  }

  .hearing-product-facts {
    position: static;
    max-width: 680px;
  }

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

  .hearing-product-feature:nth-child(2n) {
    border-right: 0;
  }

  .hearing-product-feature:nth-child(n + 3) {
    border-top: 1px solid #cbd8e9;
  }

  .hearing-product-split {
    grid-template-columns: 1fr;
  }

  .hearing-product-split--image-right .hearing-product-split-media,
  .hearing-product-split--image-right .hearing-product-split-copy {
    grid-column: auto;
    grid-row: auto;
  }

  .hearing-product-split--image-right .hearing-product-split-copy {
    grid-row: 1;
  }

  .hearing-product-module-heading--split,
  .hearing-product-specs,
  .hearing-product-faq {
    gap: 30px;
  }

  .hearing-guide-directory-intro,
  .hearing-guide-side {
    position: static;
  }

  .hearing-guide-side {
    padding-top: 12px;
  }

  .hearing-guide-quick-grid {
    max-width: 720px;
  }

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

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

  .hearing-trial-cta-inner {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .hearing-trial-cta-inner > .devices-primary-btn {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .hearing-product-content,
  .hearing-product-module,
  .hearing-product-gallery {
    padding: 58px 0;
  }

  .hearing-product-content-grid {
    gap: 38px;
  }

  .hearing-product-editor > h2,
  .hearing-product-module-heading h2,
  .hearing-product-split-copy h2,
  .hearing-product-rich h2 {
    font-size: clamp(28px, 9vw, 36px);
  }

  .hearing-product-facts-head {
    padding: 28px 24px 22px;
  }

  .hearing-product-facts dl {
    padding: 2px 24px 16px;
  }

  .hearing-product-gallery-grid {
    grid-template-columns: 1fr;
  }

  .hearing-product-gallery-grid figure {
    min-height: 240px;
  }

  .hearing-product-feature-grid {
    grid-template-columns: 1fr;
  }

  .hearing-product-feature,
  .hearing-product-feature:nth-child(2n) {
    border-top: 1px solid #cbd8e9;
    border-right: 0;
  }

  .hearing-product-feature:first-child {
    border-top: 0;
  }

  .hearing-product-feature > i {
    margin-bottom: 24px;
  }

  .hearing-product-split {
    gap: 34px;
  }

  .hearing-product-split-media {
    min-height: 300px;
    border-radius: 22px;
  }

  .hearing-product-spec-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hearing-product-faq-list details > div {
    padding-right: 0;
  }

  .hearing-catalog-guide-directory {
    margin-bottom: 28px;
    padding: 20px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 36px rgba(29, 45, 78, 0.06);
    overflow: hidden;
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-grid {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-intro,
  .hearing-catalog-guide-directory .hearing-guide-directory-groups {
    width: 100%;
    min-width: 0;
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-intro {
    padding: 2px 0 20px;
    border-bottom: 1px solid rgba(214, 224, 238, 0.82);
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-intro h2 {
    max-width: none;
    font-size: clamp(24px, 6.8vw, 27px);
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .hearing-catalog-guide-directory .hearing-guide-directory-intro > p:last-child {
    max-width: 36ch;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.58;
  }

  .hearing-guide-directory-groups {
    gap: 24px;
  }

  .hearing-guide-directory-links,
  .hearing-benefits-grid,
  .hearing-related-grid,
  .hearing-product-gallery-grid,
  .hearing-guide-content-points {
    grid-template-columns: 1fr;
  }

  .hearing-guide-directory-links a {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    min-height: 56px;
    gap: 11px;
  }

  .hearing-guide-directory-links a span {
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .hearing-guide-hero-visual {
    min-height: 250px;
    padding: 20px;
    border-radius: 22px;
  }

  .hearing-guide-hero-grid {
    gap: 28px;
  }

  .hearing-guide-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 42px);
    overflow-wrap: break-word;
  }

  .hearing-related-grid .device-series-card {
    min-height: 360px;
  }

  .hearing-guide-quick-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hearing-guide-quick-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px;
  }

  .hearing-guide-quick-item span {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .hearing-guide-quick-item strong,
  .hearing-guide-quick-item small {
    grid-column: 2;
  }

  .hearing-guide-side-card {
    padding: 20px;
  }

  .hearing-guide-body-grid {
    gap: 44px;
  }

  .hearing-guide-editor {
    font-size: 15px;
  }

  .hearing-section-heading--row,
  .hearing-guide-bottom-cta-inner {
    display: grid;
    align-items: start;
  }

  .hearing-trial-cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hearing-trial-visual {
    min-height: 180px;
  }

  .hearing-trial-cta-inner > .devices-primary-btn {
    grid-column: auto;
    justify-self: center;
  }
}

/* Hearing knowledge pages — shared editorial system */
.page-template-page-hearing-guide {
	overflow-x: clip;
}

.hearing-knowledge-page {
  --hk-navy: #071b40;
  --hk-blue: #0d3470;
  --hk-gold: #c98b19;
  --hk-cream: #fbf7ee;
  --hk-mist: #f2f5f9;
  --hk-line: #dbe3ee;
  --hk-muted: #61718a;
  background: #fff;
  color: var(--hk-navy);
  overflow: clip;
}
.hearing-knowledge-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.hearing-knowledge-hero { padding: 32px 0 64px; background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%); }
.hearing-knowledge-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; color: #6e7e94; font-size: 13px; font-weight: 600; }
.hearing-knowledge-breadcrumb a { color: inherit; text-decoration: none; }
.hearing-knowledge-breadcrumb a:hover { color: var(--hk-blue); }
.hearing-knowledge-breadcrumb span:last-child { min-width: 0; overflow: hidden; color: var(--hk-navy); text-overflow: ellipsis; white-space: nowrap; }
.hearing-knowledge-hero-card { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); min-height: 570px; overflow: hidden; border: 1px solid #eadab9; border-radius: 30px; background: var(--hk-cream); box-shadow: 0 24px 70px rgba(7, 27, 64, .08); }
.hearing-knowledge-hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(46px, 6vw, 84px); }
.hearing-knowledge-pill { align-self: flex-start; display: inline-flex; align-items: center; width: fit-content; margin: 0 0 20px; padding: 7px 13px; border: 1px solid #cbd9ef; border-radius: 999px; background: #edf3fc; color: #2d5ea5; font-size: 11px; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.hearing-knowledge-hero h1 { max-width: 660px; margin: 0; color: var(--hk-navy); font-size: clamp(42px, 4.8vw, 70px); font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.hearing-knowledge-lede { max-width: 600px; margin: 24px 0 0; color: var(--hk-muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
.hearing-knowledge-hero-media { position: relative; min-width: 0; min-height: 100%; margin: 0; background: #e8e2d7; }
.hearing-knowledge-hero-media::after { position: absolute; inset: 0; content: ''; box-shadow: inset 28px 0 50px rgba(251, 247, 238, .18); pointer-events: none; }
.hearing-knowledge-hero-media img { display: block; width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: center; }
.hearing-knowledge-mobile-guide { display: none; }
.hearing-knowledge-main { padding: 96px 0; }
.hearing-knowledge-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(52px, 7vw, 96px); align-items: start; }
.hearing-knowledge-content { min-width: 0; }
.hearing-knowledge-context { margin-bottom: 76px; padding: clamp(32px, 4vw, 52px); border-radius: 24px; background: var(--hk-navy); color: #fff; }
.hearing-knowledge-context header { max-width: 700px; margin-bottom: 32px; }
.hearing-knowledge-eyebrow { margin: 0 0 10px; color: var(--hk-gold); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hearing-knowledge-context h2, .hearing-knowledge-section-head h2 { margin: 0; font-size: clamp(30px, 3vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.hearing-knowledge-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.hearing-knowledge-context-grid li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; min-width: 0; padding: 25px 26px 25px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.hearing-knowledge-context-grid li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
.hearing-knowledge-context-grid li:nth-child(even) { padding-left: 26px; }
.hearing-knowledge-context-grid li > span { color: #d6a745; font-size: 12px; font-weight: 800; }
.hearing-knowledge-context-grid h3 { margin: 0 0 7px; color: #fff; font-size: 17px; line-height: 1.3; }
.hearing-knowledge-context-grid p { margin: 0; color: #bbc8da; font-size: 14px; line-height: 1.55; }
.hearing-knowledge-current-note { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; color: #dce5f3; font-size: 13px; line-height: 1.55; }
.hearing-knowledge-accordion { border-top: 1px solid rgba(255,255,255,.2); }
.hearing-knowledge-accordion details { border-bottom: 1px solid rgba(255,255,255,.2); }
.hearing-knowledge-accordion summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; color: #fff; font-size: 17px; font-weight: 700; list-style: none; }
.hearing-knowledge-accordion summary::-webkit-details-marker { display: none; }
.hearing-knowledge-accordion details[open] summary i { transform: rotate(45deg); }
.hearing-knowledge-accordion summary i { flex: 0 0 auto; transition: transform .2s ease; }
.hearing-knowledge-accordion details > div { padding: 0 40px 22px 0; color: #c4cede; line-height: 1.7; }
.hearing-knowledge-editor { color: #354963; }
.hearing-knowledge-editor .hearing-guide-content-section { margin: 0 0 72px; }
.hearing-knowledge-editor .hearing-guide-content-section:last-child { margin-bottom: 0; }
.hearing-knowledge-editor h2 { max-width: 720px; margin: 0 0 22px; color: var(--hk-navy); font-size: clamp(29px, 3vw, 43px); letter-spacing: -.035em; line-height: 1.12; }
.hearing-knowledge-editor h3 { margin-top: 28px; color: var(--hk-navy); font-size: 20px; }
.hearing-knowledge-editor p, .hearing-knowledge-editor li { font-size: 17px; line-height: 1.78; }
.hearing-knowledge-editor .hearing-guide-content-points { gap: 12px; margin-top: 32px; }
.hearing-knowledge-editor .hearing-guide-content-points > .wp-block-column { padding: 24px; border: 1px solid var(--hk-line); border-radius: 16px; background: #f8fafc; }
.hearing-knowledge-editor .hearing-guide-content-points h3 { margin: 0 0 8px; font-size: 17px; }
.hearing-knowledge-editor .hearing-guide-content-points p { margin: 0; font-size: 14px; line-height: 1.6; }
.hearing-knowledge-editor .hearing-guide-content-note { margin: 30px 0 0; padding: 20px 22px; border: 0; border-left: 3px solid var(--hk-gold); border-radius: 0 12px 12px 0; background: var(--hk-cream); }
.hearing-knowledge-editor .hearing-guide-content-note p { margin: 0; font-size: 14px; }
.hearing-knowledge-side { position: sticky; top: 112px; }
.hearing-knowledge-side-card { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgba(7,27,64,.06); }
.hearing-knowledge-side-head { padding: 17px 18px 14px; border-bottom: 1px solid #edf0f5; background: #fff; }
.hearing-knowledge-side-head span, .hearing-knowledge-side-head strong { display: block; }
.hearing-knowledge-side-head span { margin-bottom: 3px; color: #8a98aa; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hearing-knowledge-side-head strong { color: var(--hk-navy); font-size: 17px; letter-spacing: -.018em; line-height: 1.25; }
.hearing-knowledge-guide-menu { padding: 10px; }
.hearing-knowledge-side-card .hearing-knowledge-guide-menu { max-height: calc(100vh - 245px); overflow-y: auto; scrollbar-color: #c5d0df transparent; scrollbar-width: thin; }
.hearing-knowledge-guide-menu a { display: flex; gap: 10px; align-items: center; min-width: 0; color: #52647c; font-size: 12px; font-weight: 650; line-height: 1.28; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.hearing-knowledge-guide-menu a span { min-width: 0; flex: 1; }
.hearing-knowledge-guide-menu a i { flex: 0 0 auto; color: #94a2b5; font-size: 14px; }
.hearing-knowledge-guide-home { margin-bottom: 10px; padding: 12px 11px; border-radius: 10px; background: var(--hk-navy); color: #fff !important; }
.hearing-knowledge-guide-home i { color: #d6a745 !important; font-size: 16px !important; }
.hearing-knowledge-guide-home i:last-child { color: #fff !important; font-size: 13px !important; }
.hearing-knowledge-guide-group + .hearing-knowledge-guide-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e8edf4; }
.hearing-knowledge-guide-group > p { margin: 0 0 5px; padding: 0 8px; color: #8a98aa; font-size: 9.5px; font-weight: 800; letter-spacing: .095em; line-height: 1.4; text-transform: uppercase; }
.hearing-knowledge-guide-group > a { position: relative; justify-content: space-between; padding: 8px 9px; border-radius: 8px; }
.hearing-knowledge-guide-group > a:hover { transform: translateX(2px); background: #f3f6fa; color: var(--hk-blue); }
.hearing-knowledge-guide-group > a.is-current { background: #edf3fc; color: var(--hk-blue); font-weight: 780; }
.hearing-knowledge-guide-group > a.is-current::before { position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 3px; background: var(--hk-gold); content: ''; }
.hearing-knowledge-guide-group > a.is-current i { color: var(--hk-blue); }
.hearing-knowledge-guide-menu a:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 2px; }
.hearing-knowledge-products, .hearing-knowledge-related { padding: 94px 0; background: var(--hk-mist); }
.hearing-knowledge-products--compact { background: var(--hk-cream); }
.hearing-knowledge-section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; }
.hearing-knowledge-section-head > a { flex: 0 0 auto; color: var(--hk-blue); font-size: 14px; font-weight: 750; text-decoration: none; }
.hearing-knowledge-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hearing-knowledge-related { background: #fff; }
.hearing-knowledge-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.hearing-knowledge-related-grid a { display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 112px; padding: 24px; border: 1px solid var(--hk-line); border-radius: 16px; color: var(--hk-navy); font-size: 17px; font-weight: 750; line-height: 1.3; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.hearing-knowledge-related-grid a:hover { transform: translateY(-3px); border-color: #b7c7dd; box-shadow: 0 12px 30px rgba(7,27,64,.07); }
.hearing-knowledge-related-grid i { flex: 0 0 auto; color: var(--hk-gold); }
.hearing-knowledge-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; overflow: hidden; border: 1px solid var(--hk-line); border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(7,27,64,.06); }
.hearing-knowledge-pagination-link { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 15px; align-items: center; min-width: 0; min-height: 112px; padding: 22px 24px; color: var(--hk-navy); text-decoration: none; transition: background-color .22s ease, color .22s ease; }
.hearing-knowledge-pagination-link + .hearing-knowledge-pagination-link { border-left: 1px solid var(--hk-line); }
.hearing-knowledge-pagination-link > span { display: grid; gap: 6px; min-width: 0; }
.hearing-knowledge-pagination-link small { color: #7b8a9f; font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.hearing-knowledge-pagination-link strong { font-size: 16px; font-weight: 760; letter-spacing: -.015em; line-height: 1.3; }
.hearing-knowledge-pagination-link i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f3f6fa; color: var(--hk-blue); font-size: 16px; transition: transform .22s ease, background-color .22s ease, color .22s ease; }
.hearing-knowledge-pagination-link.is-next { grid-template-columns: minmax(0,1fr) 38px; text-align: right; }
.hearing-knowledge-pagination-link:hover { background: #f8fafc; }
.hearing-knowledge-pagination-link:hover i { transform: translateX(-3px); background: var(--hk-blue); color: #fff; }
.hearing-knowledge-pagination-link.is-next:hover i { transform: translateX(3px); }
.hearing-knowledge-pagination-link:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--hk-gold); outline-offset: -3px; }
.hearing-knowledge-cta { padding: 28px 0 110px; }
.hearing-knowledge-cta-card { overflow: hidden; padding: clamp(38px, 6vw, 74px); border-radius: 28px; background: linear-gradient(125deg, #071a3b, #0c326d); color: #fff; }
.hearing-knowledge-cta-card.has-image { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.72fr); gap: 54px; padding: 0; }
.hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy { padding: clamp(38px, 6vw, 74px); padding-right: 0; }
.hearing-knowledge-cta-copy { max-width: 760px; }
.hearing-knowledge-cta-copy .hearing-knowledge-pill { margin-bottom: 22px; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #e5edf9; }
.hearing-knowledge-cta h2 { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.hearing-knowledge-cta-copy > p:not(.hearing-knowledge-pill) { max-width: 660px; margin: 20px 0 30px; color: #c1cde0; font-size: 17px; line-height: 1.65; }
.hearing-knowledge-cta-copy > div { display: flex; flex-wrap: wrap; gap: 10px; }
.hearing-knowledge-button { display: inline-flex; justify-content: center; gap: 10px; align-items: center; min-height: 50px; padding: 0 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; }
.hearing-knowledge-button--primary { border-color: #fff; background: #fff; color: var(--hk-navy); }
.hearing-knowledge-cta-card figure { min-height: 100%; margin: 0; }
.hearing-knowledge-cta-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .hearing-knowledge-shell { width: min(100% - 32px, 760px); }
  .hearing-knowledge-hero { padding: 20px 0 44px; }
  .hearing-knowledge-hero-card { grid-template-columns: 1fr; min-height: 0; }
  .hearing-knowledge-hero-copy { padding: 48px; }
  .hearing-knowledge-hero-media { min-height: 440px; }
  .hearing-knowledge-hero-media img { min-height: 440px; max-height: 560px; }
  .hearing-knowledge-layout { grid-template-columns: 1fr; }
  .hearing-knowledge-side { display: none; }
  .hearing-knowledge-mobile-guide { display: block; margin-top: 22px; }
  .hearing-knowledge-mobile-guide details { overflow: hidden; border: 1px solid var(--hk-line); border-radius: 14px; background: #fff; }
  .hearing-knowledge-mobile-guide summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; cursor: pointer; color: var(--hk-navy); font-size: 14px; font-weight: 750; list-style: none; }
  .hearing-knowledge-mobile-guide summary::-webkit-details-marker { display: none; }
  .hearing-knowledge-mobile-guide summary span { display: flex; gap: 9px; align-items: center; }
  .hearing-knowledge-mobile-guide details[open] summary > i { transform: rotate(180deg); }
  .hearing-knowledge-mobile-guide nav { display: block; max-height: 58vh; padding: 8px; border-top: 1px solid var(--hk-line); overflow-y: auto; }
  .hearing-knowledge-mobile-guide .hearing-knowledge-guide-home { margin-bottom: 12px; padding: 12px; }
  .hearing-knowledge-mobile-guide .hearing-knowledge-guide-group > a { padding: 10px; font-size: 12.5px; }
  .hearing-knowledge-main { padding: 72px 0; }
  .hearing-knowledge-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hearing-knowledge-cta-card.has-image { grid-template-columns: 1fr; gap: 0; }
  .hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy { padding: 52px 48px; }
  .hearing-knowledge-cta-card figure { order: 2; height: 360px; }
}

@media (max-width: 640px) {
  .hearing-knowledge-shell { width: calc(100% - 24px); }
  .hearing-knowledge-hero { padding-top: 14px; }
  .hearing-knowledge-breadcrumb { margin-bottom: 15px; font-size: 11px; }
  .hearing-knowledge-hero-card { border-radius: 22px; }
  .hearing-knowledge-hero-copy { padding: 32px 22px 28px; }
  .hearing-knowledge-pill { margin-bottom: 16px; padding: 6px 11px; font-size: 10px; }
  .hearing-knowledge-hero h1 { max-width: none; font-size: clamp(36px, 11.2vw, 48px); line-height: 1.01; overflow-wrap: anywhere; }
  .hearing-knowledge-lede { margin-top: 18px; font-size: 16px; line-height: 1.6; }
  .hearing-knowledge-hero-media { min-height: 0; aspect-ratio: 4 / 3; }
  .hearing-knowledge-hero-media::after { display: none; }
  .hearing-knowledge-hero-media img { width: 100%; height: 100%; min-height: 0; max-height: none; object-position: center; }
  .hearing-knowledge-main { padding: 54px 0; }
  .hearing-knowledge-context { margin-bottom: 54px; padding: 30px 20px; border-radius: 20px; }
  .hearing-knowledge-context header { margin-bottom: 24px; }
  .hearing-knowledge-context h2, .hearing-knowledge-section-head h2 { font-size: 30px; }
  .hearing-knowledge-context-grid { grid-template-columns: 1fr; }
  .hearing-knowledge-context-grid li, .hearing-knowledge-context-grid li:nth-child(even) { padding: 19px 0; border-right: 0; }
  .hearing-knowledge-context-grid p { font-size: 13px; }
  .hearing-knowledge-accordion summary { font-size: 15px; }
  .hearing-knowledge-editor .hearing-guide-content-section { margin-bottom: 52px; }
  .hearing-knowledge-editor h2 { font-size: 29px; }
  .hearing-knowledge-editor p, .hearing-knowledge-editor li { font-size: 16px; line-height: 1.7; }
  .hearing-knowledge-products, .hearing-knowledge-related { padding: 64px 0; }
  .hearing-knowledge-section-head { display: block; margin-bottom: 28px; }
  .hearing-knowledge-section-head > a { display: inline-flex; margin-top: 17px; }
  .hearing-knowledge-product-grid, .hearing-knowledge-related-grid { grid-template-columns: 1fr; }
  .hearing-knowledge-related-grid a { min-height: 88px; padding: 20px; font-size: 15px; }
  .hearing-knowledge-pagination { grid-template-columns: minmax(0,1fr); margin-top: 38px; border-radius: 16px; }
  .hearing-knowledge-pagination-link { min-height: 94px; padding: 18px; }
  .hearing-knowledge-pagination-link + .hearing-knowledge-pagination-link { border-top: 1px solid var(--hk-line); border-left: 0; }
  .hearing-knowledge-pagination-link strong { font-size: 15px; }
  .hearing-knowledge-cta { padding: 10px 0 76px; }
  .hearing-knowledge-cta-card, .hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy { padding: 34px 22px; }
  .hearing-knowledge-cta h2 { font-size: 34px; }
  .hearing-knowledge-cta-copy > p:not(.hearing-knowledge-pill) { font-size: 15px; }
  .hearing-knowledge-cta-copy > div { display: grid; }
  .hearing-knowledge-button { width: 100%; }
  .hearing-knowledge-cta-card figure { height: 280px; margin: 0 -22px -34px; }
}

@media (prefers-reduced-motion: reduce) {
  .hearing-knowledge-page *, .hearing-knowledge-page *::before, .hearing-knowledge-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Hearing knowledge pages — editorial refinement */
.hearing-knowledge-hero { padding: 24px 0 48px; }
.hearing-knowledge-breadcrumb { width: auto; min-height: 34px; margin-bottom: 20px; font-size: 12px; }
.hearing-knowledge-hero-card { grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr); min-height: 480px; border-radius: 28px; box-shadow: 0 22px 60px rgba(7,27,64,.07); }
.hearing-knowledge-hero-copy { padding: clamp(38px, 4.6vw, 64px); }
.hearing-knowledge-hero h1 { max-width: 620px; font-size: clamp(38px, 3.8vw, 56px); line-height: 1.03; }
.hearing-knowledge-lede { max-width: 590px; margin-top: 20px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.hearing-knowledge-hero-media img { min-height: 480px; }
.hearing-knowledge-main { padding: 72px 0; }
.hearing-knowledge-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(44px, 5vw, 70px); }
.hearing-knowledge-context { margin-bottom: 56px; padding: clamp(30px, 3vw, 40px); border-radius: 22px; }
.hearing-knowledge-context header { margin-bottom: 26px; }
.hearing-knowledge-context h2,
.hearing-knowledge-section-head h2 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.12; }
.hearing-knowledge-context-grid li { grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 20px 22px 20px 0; }
.hearing-knowledge-context-grid li:nth-child(even) { padding-left: 22px; }
.hearing-knowledge-context-grid h3 { margin-bottom: 6px; font-size: 16px; }
.hearing-knowledge-context-grid p { font-size: 13.5px; }
.hearing-knowledge-editor .hearing-guide-content-section { margin-bottom: 56px; }
.hearing-knowledge-editor h2 { margin-bottom: 18px; font-size: clamp(27px, 2.4vw, 35px); line-height: 1.15; }
.hearing-knowledge-editor h3 { margin-top: 26px; font-size: 18px; }
.hearing-knowledge-editor p,
.hearing-knowledge-editor li { font-size: 16px; line-height: 1.72; }
.hearing-knowledge-context,
.hearing-knowledge-editor,
.hearing-knowledge-products,
.hearing-knowledge-related { scroll-margin-top: 110px; }
.hearing-knowledge-side-card .hearing-knowledge-guide-menu { max-height: calc(100vh - 245px); padding: 10px; overflow-y: auto; }
.hearing-knowledge-products,
.hearing-knowledge-related { padding: 72px 0; }
.hearing-knowledge-related-grid a { min-height: 96px; padding: 21px; font-size: 15.5px; }
.hearing-knowledge-cta h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; }
.hearing-knowledge-cta-copy > p:not(.hearing-knowledge-pill) { margin: 18px 0 28px; font-size: 16px; }

@media (max-width: 991px) {
  .hearing-knowledge-hero-card { grid-template-columns: 1fr; min-height: 0; }
  .hearing-knowledge-hero-copy { padding: 40px; }
  .hearing-knowledge-hero-media { min-height: 400px; }
  .hearing-knowledge-hero-media img { min-height: 400px; max-height: 520px; }
  .hearing-knowledge-main { padding: 56px 0; }
  .hearing-knowledge-mobile-guide nav a { display: flex; gap: 9px; align-items: center; }
  .hearing-knowledge-mobile-guide nav a i { color: #8796aa; }
}

@media (max-width: 640px) {
  .hearing-knowledge-breadcrumb { min-height: 30px; margin-bottom: 14px; font-size: 11px; }
  .hearing-knowledge-hero-copy { padding: 28px 20px 24px; }
  .hearing-knowledge-hero h1 { font-size: clamp(31px, 9.2vw, 38px); line-height: 1.05; overflow-wrap: normal; }
  .hearing-knowledge-lede { margin-top: 16px; font-size: 15.5px; line-height: 1.55; }
  .hearing-knowledge-hero-media { min-height: 0; }
  .hearing-knowledge-hero-media img { min-height: 0; max-height: none; }
  .hearing-knowledge-main { padding: 44px 0; }
  .hearing-knowledge-context { margin-bottom: 44px; padding: 26px 18px; }
  .hearing-knowledge-context h2,
  .hearing-knowledge-section-head h2 { font-size: 27px; }
  .hearing-knowledge-editor .hearing-guide-content-section { margin-bottom: 44px; }
  .hearing-knowledge-editor h2 { font-size: 26px; }
  .hearing-knowledge-editor h3 { font-size: 17px; }
  .hearing-knowledge-editor p,
  .hearing-knowledge-editor li { font-size: 15.5px; line-height: 1.68; }
  .hearing-knowledge-products,
  .hearing-knowledge-related { padding: 52px 0; }
  .hearing-knowledge-cta h2 { font-size: 30px; }
}

/* Hearing device pages — mobile hardening */
body.page-template-page-isitme-cihazlari .header::after,
body.page-template-page-hearing-guide .header::after {
  right: 0;
  left: 0;
  width: 100%;
  transform: none;
}

.hearing-knowledge-page :where(img, video, iframe, svg),
.devices-page :where(img, video, iframe, svg) {
  max-width: 100%;
}

.hearing-knowledge-editor :where(.wp-block-columns, .wp-block-column, .wp-block-group, .wp-block-group__inner-container, figure),
.hearing-catalog-guide-directory :where(.hearing-guide-directory-grid, .hearing-guide-directory-groups, .hearing-guide-directory-links) {
  min-width: 0;
}

.hearing-knowledge-editor table {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 991px) {
  .hearing-knowledge-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .hearing-knowledge-hero h1 {
    overflow-wrap: anywhere;
  }

  .hearing-knowledge-editor .wp-block-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .hearing-knowledge-editor .wp-block-column {
    flex-basis: auto !important;
  }

  .hearing-knowledge-editor :where(figure, .wp-block-image) {
    margin-right: 0;
    margin-left: 0;
  }

  .hearing-knowledge-editor table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .devices-page-shell {
    width: calc(100% - 24px);
  }

  .devices-hero-panel {
    padding: 22px 18px;
  }

  .devices-hero-copy h1 {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .devices-hero-benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .devices-hero-benefits span {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(13, 52, 112, 0.1);
    border-radius: 12px;
    text-align: left;
  }

  .devices-hero-benefits i {
    grid-row: 1 / 3;
    margin: 0;
  }

  .devices-hero-benefits strong,
  .devices-hero-benefits small {
    text-align: left;
  }

  .devices-hero-benefits strong {
    font-size: 12px;
  }

  .devices-hero-benefits small {
    margin-top: 1px;
    font-size: 10.5px;
  }

  .devices-why-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .devices-why-items article {
    min-height: 0;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
  }

  .devices-why-items article > span {
    grid-row: 1 / 3;
  }

  .devices-why-items h3,
  .devices-why-items p {
    grid-column: 2;
  }

  .devices-why-items h3 {
    font-size: 13px;
  }

  .devices-why-items p {
    font-size: 11.5px;
  }
}

/* Keep carousel layout authoritative after legacy hearing-guide rules. */
.hearing-knowledge-products,
.hearing-knowledge-products--compact {
  padding-block: 72px 76px;
  border-color: rgba(142, 181, 235, 0.18);
  background:
    radial-gradient(circle at 8% 12%, rgba(60, 127, 218, 0.28), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(31, 93, 180, 0.34), transparent 32%),
    linear-gradient(135deg, #061a3d 0%, #0a2c62 56%, #123f7d 100%);
}

.hearing-knowledge-products::before {
  opacity: 0.22;
  background-image: radial-gradient(rgba(190, 215, 249, 0.25) 0.75px, transparent 0.75px);
  background-size: 22px 22px;
}

.hearing-knowledge-section-head.hearing-products-head {
  display: block;
  margin-bottom: 28px;
}

.hearing-products-copy {
  max-width: 720px;
}

.hearing-products-copy .section-eyebrow {
  margin-bottom: 8px;
  color: #b9780b;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.hearing-knowledge-section-head.hearing-products-head h2 {
  color: #ffffff;
  font-size: clamp(32px, 2.7vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hearing-products-copy > p:last-child {
  max-width: 62ch;
  margin-top: 11px;
  color: #c3d2e8;
  font-size: 15px;
  line-height: 1.6;
}

.hearing-products-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
}

.hearing-products-actions > a {
  order: 2;
  color: #d8e8ff;
  font-size: 14px;
}

.hearing-products-actions > a:hover {
  color: #ffffff;
}

.hearing-products-nav {
  gap: 8px;
}

.hearing-products-nav button {
  width: 52px;
  height: 52px;
  border-color: rgba(184, 211, 248, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(1, 14, 39, 0.2);
  backdrop-filter: blur(8px);
}

.hearing-products-nav button i {
  font-size: 22px;
}

.hearing-products-nav button:hover:not(:disabled),
.hearing-products-nav button:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
  color: #0d3470;
  box-shadow: 0 12px 26px rgba(1, 14, 39, 0.24);
}

.hearing-knowledge-product-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  padding-bottom: 12px;
}

.hearing-knowledge-product-grid .device-series-card {
  min-height: 390px;
  padding: 17px 17px 16px;
  border-color: rgba(150, 185, 230, 0.28);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(1, 14, 39, 0.26);
}

.hearing-knowledge-product-grid .device-series-card:hover {
  border-color: rgba(117, 174, 247, 0.82);
  box-shadow: 0 24px 54px rgba(1, 14, 39, 0.34);
}

.hearing-knowledge-product-grid .device-series-media {
  height: 204px;
  margin: 0 0 11px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 44%, #fff 0%, #f3f7fc 64%, #e8f0fa 100%);
}

.hearing-knowledge-product-grid .device-series-badge,
.hearing-knowledge-product-grid .device-series-card--blue .device-series-badge,
.hearing-knowledge-product-grid .device-series-card--gold .device-series-badge {
  top: 29px;
  left: 29px;
  min-height: 27px;
  padding-inline: 11px;
  border-radius: 9px;
  background: #e8f1ff;
  color: #1e5ca8;
  font-size: 10.5px;
}

.single-isitme-cihazlari .hearing-related-grid .device-series-badge,
.single-isitme-cihazlari .hearing-related-grid .device-series-card--blue .device-series-badge,
.single-isitme-cihazlari .hearing-related-grid .device-series-card--gold .device-series-badge {
  border: 1px solid color-mix(in srgb, var(--series-color, #1e5ca8) 72%, #ffffff);
  background: var(--series-color, #1e5ca8);
  color: var(--series-contrast, #ffffff);
}

.hearing-knowledge-product-grid .device-series-colors {
  margin-bottom: 12px;
}

.hearing-knowledge-product-grid .device-series-card > strong,
.hearing-knowledge-product-grid .device-series-product-link > strong {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.13;
}

.hearing-knowledge-product-grid .device-series-link {
  padding-top: 14px;
  font-size: 12px;
}

.hearing-knowledge-product-grid .device-series-cta {
  width: 40px;
  height: 40px;
}

@media (max-width: 1100px) {
  .hearing-knowledge-section-head.hearing-products-head {
    display: block;
  }

  .hearing-knowledge-product-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 22px) / 2);
  }
}

@media (max-width: 700px) {
  .hearing-knowledge-products,
  .hearing-knowledge-products--compact {
    padding-block: 44px 48px;
  }

  .hearing-knowledge-section-head.hearing-products-head {
    display: block;
    margin-bottom: 22px;
  }

  .hearing-knowledge-section-head.hearing-products-head h2 {
    font-size: clamp(29px, 9vw, 36px);
  }

  .hearing-products-copy > p:last-child {
    font-size: 14px;
    line-height: 1.55;
  }

  .hearing-products-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
  }

  .hearing-products-nav {
    justify-content: flex-end;
  }

  .hearing-products-nav button {
    width: 46px;
    height: 46px;
  }

  .hearing-products-nav button i {
    font-size: 20px;
  }

  .hearing-knowledge-product-grid,
  .hearing-knowledge-product-grid.device-series-grid {
    grid-template-columns: none;
    grid-auto-columns: min(82vw, 300px);
    gap: 14px;
  }

  .hearing-knowledge-product-grid .device-series-card {
    min-height: 348px;
    padding: 14px;
  }

  .hearing-knowledge-product-grid .device-series-media {
    height: 172px;
    margin-bottom: 9px;
  }

  .hearing-knowledge-product-grid .device-series-badge,
  .hearing-knowledge-product-grid .device-series-card--blue .device-series-badge,
  .hearing-knowledge-product-grid .device-series-card--gold .device-series-badge {
    top: 24px;
    left: 24px;
  }

  .hearing-knowledge-product-grid .device-series-card > strong,
  .hearing-knowledge-product-grid .device-series-product-link > strong {
    font-size: 17px;
  }

  .hearing-knowledge-product-grid .device-series-cta {
    width: 36px;
    height: 36px;
  }
}

/* Koklear guide hierarchy remains authoritative after legacy page rules. */
.cochlear-detail-page .cochlear-hero h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.cochlear-detail-page .cochlear-lede {
  max-width: 62ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section h2 {
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section h3 {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.22;
}

.cochlear-detail-page .cochlear-editor-content .cochlear-content-section p,
.cochlear-detail-page .cochlear-editor-content .cochlear-content-section li {
  color: #34445c;
  font-size: 16.5px;
  line-height: 1.75;
}

@media (max-width: 760px) {
  .cochlear-detail-page .cochlear-hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.04;
  }

  .cochlear-detail-page .cochlear-lede {
    font-size: 16px;
  }

  .cochlear-detail-page .cochlear-editor-content .cochlear-content-section p,
  .cochlear-detail-page .cochlear-editor-content .cochlear-content-section li {
    font-size: 16px;
    line-height: 1.72;
  }
}

/* Keep the compact consultation CTA authoritative after legacy guide rules. */
.hearing-knowledge-cta {
  padding: 20px 0 76px;
}

.hearing-knowledge-cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 14%, rgba(80, 135, 218, 0.2), transparent 29%),
    linear-gradient(116deg, #071a3a 0%, #0a2859 58%, #0b3474 100%);
  box-shadow: 0 24px 60px rgba(7, 26, 59, 0.14);
}

.hearing-knowledge-cta-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
  max-width: none;
}

.hearing-knowledge-cta-message {
  display: block;
  max-width: 660px;
}

.hearing-knowledge-cta-copy .hearing-knowledge-pill {
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e0b75d;
}

.hearing-knowledge-cta h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
}

.hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 610px;
  margin: 13px 0 0;
  color: #c8d4e6;
  font-size: 15.5px;
  line-height: 1.6;
}

.hearing-knowledge-cta-card.has-image {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 0;
  padding: 0;
}

.hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: clamp(34px, 4vw, 48px);
}

@media (max-width: 991px) {
  .hearing-knowledge-cta-copy {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
    gap: 28px;
  }
}

@media (max-width: 760px) {
  .hearing-knowledge-cta {
    padding: 8px 0 58px;
  }

  .hearing-knowledge-cta-card,
  .hearing-knowledge-cta-card.has-image .hearing-knowledge-cta-copy {
    padding: 26px 20px 18px;
  }

  .hearing-knowledge-cta-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hearing-knowledge-cta-message {
    display: block;
  }

  .hearing-knowledge-cta h2 {
    font-size: clamp(27px, 8vw, 31px);
    line-height: 1.02;
  }

  .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
    font-size: 14.5px;
  }

  .hearing-knowledge-cta-panel {
    padding: 18px;
  }

  .hearing-knowledge-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hearing-knowledge-cta .hearing-knowledge-button--primary {
    width: 100%;
  }

  .hearing-knowledge-cta-link {
    justify-content: center;
    min-height: 36px;
  }
}

/* Hearing guide table of contents, responsive article and complete guide carousel. */
.hearing-knowledge-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.hearing-knowledge-layout--without-toc {
  grid-template-columns: minmax(0, 1fr);
}

.hearing-knowledge-content {
  min-width: 0;
  width: 100%;
}

.hearing-knowledge-editor {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hearing-knowledge-editor img,
.hearing-knowledge-editor video,
.hearing-knowledge-editor iframe,
.hearing-knowledge-editor figure {
  max-width: 100%;
}

.hearing-knowledge-editor img,
.hearing-knowledge-editor video {
  height: auto;
}

.hearing-knowledge-editor iframe {
  width: 100%;
}

.hearing-knowledge-editor table {
  width: 100%;
}

.hearing-knowledge-editor .wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hearing-knowledge-toc {
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 240px);
  padding: 10px 11px 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #c5d0df transparent;
  scrollbar-width: thin;
}

.hearing-knowledge-toc a {
  display: block;
  position: relative;
  align-items: center;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #52647c;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.hearing-knowledge-toc a:hover,
.hearing-knowledge-toc a:focus-visible {
  background: #f7f8fa;
  color: var(--hk-blue);
}

.hearing-knowledge-toc a:focus-visible {
  outline: 2px solid var(--hk-gold);
  outline-offset: 1px;
}

.hearing-knowledge-toc a.is-active {
  background: #fff8e8;
  color: var(--hk-navy);
  font-weight: 740;
  box-shadow: inset 3px 0 0 var(--hk-gold);
}

.hearing-knowledge-toc a.is-article-heading {
  min-height: 40px;
  color: #52647c;
  font-size: 12.5px;
  font-weight: 680;
}

.hearing-knowledge-toc a.is-level-3 {
  margin-left: 16px;
  padding: 8px 10px 8px 18px;
  border-radius: 0 8px 8px 0;
  color: #718197;
  font-size: 12px;
  font-weight: 580;
}

.hearing-knowledge-toc a.is-level-3::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: #e0e6ee;
  content: '';
}

.hearing-knowledge-toc a.is-level-3.is-active::before {
  width: 2px;
  background: var(--hk-gold);
}

.hearing-knowledge-section-head.hearing-related-head {
  display: block;
}

.hearing-knowledge-related-carousel {
  min-width: 0;
  overflow: hidden;
}

.hearing-knowledge-related-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.hearing-knowledge-related-grid::-webkit-scrollbar {
  display: none;
}

.hearing-knowledge-related-grid a {
  scroll-snap-align: start;
}

.hearing-knowledge-related-grid a.is-current {
  border-color: #d9ad4c;
  background: #fffaf0;
}

.hearing-related-scrollbar {
  position: relative;
  height: 20px;
  margin-top: 24px;
  cursor: pointer;
  touch-action: none;
}

.hearing-related-scrollbar::before {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: #e7ebf1;
  content: '';
}

.hearing-related-scrollbar span {
  position: absolute;
  top: 6px;
  left: 0;
  min-width: 64px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, #c78b09 0%, #e0ae35 100%);
  box-shadow: 0 4px 12px rgba(199, 139, 9, .2);
  cursor: grab;
  will-change: transform;
  transition: transform .12s ease-out, box-shadow .2s ease;
}

.hearing-related-scrollbar.is-dragging span {
  cursor: grabbing;
  box-shadow: 0 5px 16px rgba(199, 139, 9, .32);
  transition: box-shadow .2s ease;
}

.hearing-related-scrollbar.is-static {
  opacity: .4;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hearing-knowledge-related-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

@media (max-width: 991px) {
  .hearing-knowledge-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .hearing-knowledge-side {
    display: none;
  }

  .hearing-knowledge-content,
  .hearing-knowledge-context,
  .hearing-knowledge-editor {
    max-width: 100%;
  }

  .hearing-knowledge-mobile-guide .hearing-knowledge-toc {
    max-height: 58vh;
    padding: 8px;
  }
}

@media (max-width: 640px) {
	.hearing-knowledge-editor .wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.hearing-knowledge-editor .wp-block-column {
		min-width: 0;
	}

  .hearing-knowledge-related-grid {
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 320px);
  }

  .hearing-related-scrollbar {
    margin-top: 18px;
  }
}

/* Rehber carousel'lerinde hover ve kart gölgeleri için güvenli taşma alanı. */
.hearing-products-carousel,
.hearing-knowledge-related-carousel {
  overflow: visible;
}

.hearing-knowledge-product-grid,
.hearing-knowledge-related-grid {
  box-sizing: border-box;
  width: calc(100% + 64px);
  margin-inline: -32px;
  padding-inline: 32px;
  scroll-padding-inline: 32px;
}

.hearing-knowledge-product-grid {
  margin-block: -28px -28px;
  padding-block: 32px 50px;
}

.hearing-knowledge-related-grid {
  margin-block: -20px -30px;
  padding-block: 24px 40px;
}

.hearing-knowledge-product-grid .device-series-card,
.hearing-knowledge-related-grid a {
  position: relative;
  isolation: isolate;
}

.hearing-knowledge-product-grid .device-series-card:hover,
.hearing-knowledge-product-grid .device-series-card:focus-visible,
.hearing-knowledge-related-grid a:hover,
.hearing-knowledge-related-grid a:focus-visible {
  z-index: 2;
}

.hearing-knowledge-product-grid .device-series-card:hover,
.hearing-knowledge-product-grid .device-series-card:focus-visible {
  border-color: rgba(117, 174, 247, 0.82);
}

.hearing-knowledge-related-grid a:hover,
.hearing-knowledge-related-grid a:focus-visible {
  border-color: #c98b19;
}

/* Ürün bölümü başlığının geniş ekranlarda kullanılabilir alanı değerlendirmesi. */
@media (min-width: 1101px) {
  .hearing-products-copy {
    width: min(100%, 1180px);
    max-width: none;
  }

  .hearing-products-copy > p:last-child {
    max-width: 980px;
  }
}

/* Rehber hero ile ana içerik arasındaki çift yönlü boşluğu tek ritme indir. */
.page-template-page-hearing-guide .hearing-knowledge-hero {
  padding-bottom: 24px;
}

.page-template-page-hearing-guide .hearing-knowledge-main {
  padding-top: 36px;
}

@media (max-width: 991px) {
  .page-template-page-hearing-guide .hearing-knowledge-hero {
    padding-bottom: 20px;
  }

  .page-template-page-hearing-guide .hearing-knowledge-mobile-guide {
    margin-top: 0;
  }

  .page-template-page-hearing-guide .hearing-knowledge-main {
    padding-top: 32px;
  }
}

@media (max-width: 640px) {
  .page-template-page-hearing-guide .hearing-knowledge-hero {
    padding-bottom: 16px;
  }

  .page-template-page-hearing-guide .hearing-knowledge-main {
    padding-top: 24px;
  }
}

/* Rehber sonu CTA: sayfanın lacivert-altın sistemiyle uyumlu, ayrışan aksiyonlar. */
.page-template-page-hearing-guide .hearing-knowledge-cta-card {
  padding: clamp(42px, 5vw, 68px);
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 10%, rgba(49, 99, 177, 0.3), transparent 30%),
    linear-gradient(116deg, #071a3a 0%, #0a2859 58%, #0b3474 100%);
  box-shadow: 0 24px 60px rgba(7, 26, 59, 0.18);
}

.page-template-page-hearing-guide .hearing-knowledge-cta-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.page-template-page-hearing-guide .hearing-knowledge-cta-panel-label {
  color: #fff;
}

.page-template-page-hearing-guide .hearing-knowledge-cta-panel ul {
  margin-bottom: 20px;
}

.page-template-page-hearing-guide .hearing-knowledge-cta-panel {
  border-color: transparent;
}

.page-template-page-hearing-guide .hearing-knowledge-cta-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary,
.page-template-page-hearing-guide .hearing-knowledge-cta-link {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  justify-content: center;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary {
  min-height: 50px;
  padding-inline: 22px;
  border-color: rgba(204, 148, 24, 0.7);
  border-radius: 12px;
  color: #13284c;
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:hover {
  color: #13284c;
  border-color: rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
  box-shadow: 0 13px 28px rgba(3, 16, 39, 0.3);
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary {
  min-height: 50px;
  margin-top: 17px;
  padding: 0 22px;
  border-color: rgba(204, 148, 24, 0.7);
  border-radius: 12px;
  color: #13284c;
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary:hover {
  color: #13284c;
  border-color: rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
  box-shadow: 0 18px 38px rgba(246, 188, 47, 0.3);
  transform: none;
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary:active {
  transform: none;
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary:focus-visible {
  outline: 3px solid rgba(242, 212, 143, 0.72);
  outline-offset: 3px;
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary i {
  transition: transform 180ms ease;
}

.hearing-knowledge-side-cta a.hearing-knowledge-button--primary:hover i,
.hearing-knowledge-side-cta a.hearing-knowledge-button--primary:focus-visible i {
  transform: translateX(6px);
}

.page-template-page-hearing-guide .hearing-knowledge-cta-link {
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 12px;
  color: #f8fbff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(7, 27, 64, 0.24);
}

.page-template-page-hearing-guide .hearing-knowledge-cta-link:hover {
  color: #f2d48f;
  border-color: rgba(224, 183, 93, 0.72);
  background: rgba(224, 183, 93, 0.12);
  transform: translateY(-2px);
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:focus-visible,
.page-template-page-hearing-guide .hearing-knowledge-cta-link:focus-visible {
  outline: 3px solid rgba(242, 212, 143, 0.72);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .page-template-page-hearing-guide .hearing-knowledge-cta-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary,
  .page-template-page-hearing-guide .hearing-knowledge-cta-link {
    width: 100%;
    min-height: 48px;
  }
}

/* Aynı rehber CTA görünümünü İşitme Hakkında alt sayfalarına da uygula. */
body.single-isitme-hakkinda .hearing-knowledge-cta-card {
  padding: clamp(42px, 5vw, 68px);
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 10%, rgba(49, 99, 177, 0.3), transparent 30%),
    linear-gradient(116deg, #071a3a 0%, #0a2859 58%, #0b3474 100%);
  box-shadow: 0 24px 60px rgba(7, 26, 59, 0.18);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary,
body.single-isitme-hakkinda .hearing-knowledge-cta-link {
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 12px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary {
  border-color: rgba(204, 148, 24, 0.7);
  color: #13284c;
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
}

body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:hover {
  color: #13284c;
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link {
  color: #f8fbff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(7, 27, 64, 0.24);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link:hover {
  color: #f2d48f;
  border-color: rgba(224, 183, 93, 0.72);
  background: rgba(224, 183, 93, 0.12);
}

/* Koklear rehber: sayfalar arası menü yerine içerik başlıkları. */
body.single-koklear .cochlear-article-toc {
  padding: 0;
  border-color: var(--cochlear-line);
  background: #fff;
}

body.single-koklear .cochlear-article-toc-head {
  padding: 20px 20px 17px;
  border-bottom: 1px solid var(--cochlear-line);
}

.single-koklear .cochlear-article-toc-head > span {
  display: block;
  margin-bottom: 3px;
  color: #7b8aa0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.single-koklear .cochlear-article-toc-head h2 {
  margin: 0;
  padding: 0;
  color: var(--cochlear-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.018em;
  text-transform: none;
}

body.single-koklear .cochlear-article-toc-links {
  display: grid;
  gap: 3px;
  padding: 10px;
}

body.single-koklear .cochlear-article-toc-links a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #50617a;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body.single-koklear .cochlear-article-toc-links a > i {
  flex: 0 0 auto;
  color: #8da0b8;
  font-size: 15px;
}

body.single-koklear .cochlear-article-toc-links a:hover,
body.single-koklear .cochlear-article-toc-links a:focus-visible {
  background: var(--cochlear-surface);
  color: var(--cochlear-blue-dark);
}

body.single-koklear .cochlear-article-toc-links a.is-active {
  background: #eaf3fc;
  color: var(--cochlear-blue-dark);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--cochlear-blue);
}

body.single-koklear .cochlear-article-toc-links a.is-active > i,
body.single-koklear .cochlear-article-toc-links a:hover > i,
body.single-koklear .cochlear-article-toc-links a:focus-visible > i {
  color: var(--cochlear-blue-dark);
}

body.single-koklear .cochlear-editor-content h2,
body.single-koklear .cochlear-editor-content h3 {
  scroll-margin-top: 132px;
}

/* Koklear CPT mobil içindekiler kartı: başlık ve liste arasında nefes alanı. */
@media (max-width: 1180px) {
  body.single-koklear .cochlear-mobile-guide summary {
    min-height: 94px;
    padding: 20px 17px 24px;
  }

  body.single-koklear .cochlear-mobile-guide summary .cochlear-mobile-guide-label {
    align-items: flex-start;
    gap: 0;
  }

  body.single-koklear .cochlear-mobile-guide .cochlear-mobile-guide-label > span {
    gap: 10px;
  }

  body.single-koklear .cochlear-mobile-guide .cochlear-guide-menu {
    gap: 8px;
    padding: 16px 12px 18px;
  }

  body.single-koklear .cochlear-mobile-guide .cochlear-guide-menu a {
    min-height: 52px;
    padding: 12px 12px;
  }
}

@media (min-width: 1181px) {
  body.single-koklear .cochlear-article-toc-head {
    padding: 24px 24px 20px;
  }

  body.single-koklear .cochlear-article-toc-links {
    gap: 8px;
    padding: 16px 14px 18px;
  }

  body.single-koklear .cochlear-article-toc-links a {
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 12px;
  }
}

@media (max-width: 1180px) {
  body.single-koklear .cochlear-mobile-guide .cochlear-article-toc-links {
    padding: 8px;
    border-top: 1px solid var(--cochlear-line);
  }
}

/* Koklear rehber: sağ kolon uzman CTA'sında net marka kontrastı. */
.page-template-page-koklear .cochlear-side-cta {
  overflow: hidden;
  position: relative;
  padding: 22px;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 119, 203, 0.34), transparent 48%),
    linear-gradient(145deg, #0a2149 0%, #103d78 100%);
  color: #fff;
  box-shadow: 0 18px 38px rgba(7, 27, 64, 0.18);
}

.page-template-page-koklear .cochlear-side-cta h2 {
  position: relative;
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.18;
}

.page-template-page-koklear .cochlear-side-cta p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 1.55;
}

.page-template-page-koklear .cochlear-side-cta a {
  position: relative;
  min-height: 46px;
  margin-top: 17px;
  border: 1px solid #efb432;
  border-radius: 11px;
  background: #efb432;
  color: #071b40;
  box-shadow: 0 10px 22px rgba(3, 16, 39, 0.22);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-template-page-koklear .cochlear-side-cta a:hover {
  border-color: #f5c55a;
  background: #f5c55a;
  color: #071b40;
  box-shadow: 0 13px 26px rgba(3, 16, 39, 0.3);
  transform: translateY(-2px);
}

.page-template-page-koklear .cochlear-side-cta a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

/* Koklear rehber: önceki/sonraki gezinmesini işitme cihazı rehberiyle eşleştir. */
.page-template-page-koklear .cochlear-pagination {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 48px;
  padding-top: 0;
  overflow: hidden;
  border: 1px solid var(--cochlear-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(7, 27, 64, 0.06);
}

.page-template-page-koklear .cochlear-pagination-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-width: 0;
  min-height: 112px;
  padding: 22px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cochlear-ink) !important;
  text-decoration: none !important;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.page-template-page-koklear .cochlear-pagination-link + .cochlear-pagination-link {
  border-left: 1px solid var(--cochlear-line);
}

.page-template-page-koklear .cochlear-pagination-link > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.page-template-page-koklear .cochlear-pagination-link small {
  color: #7b8a9f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-template-page-koklear .cochlear-pagination-link strong {
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.page-template-page-koklear .cochlear-pagination-link > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f3f6fa;
  color: var(--cochlear-blue);
  font-size: 16px;
  transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.page-template-page-koklear .cochlear-pagination-link.is-next {
  grid-template-columns: minmax(0, 1fr) 38px;
  justify-content: normal;
  text-align: right;
}

.page-template-page-koklear .cochlear-pagination-link:hover {
  border-color: transparent;
  background: #f8fafc;
  box-shadow: none;
  transform: none;
}

.page-template-page-koklear .cochlear-pagination-link:hover > i {
  background: var(--cochlear-blue);
  color: #fff;
  transform: translateX(-3px);
}

.page-template-page-koklear .cochlear-pagination-link.is-next:hover > i {
  transform: translateX(3px);
}

.page-template-page-koklear .cochlear-pagination-link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #c98b19;
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .page-template-page-koklear .cochlear-pagination {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 38px;
    border-radius: 16px;
  }

  .page-template-page-koklear .cochlear-pagination-link {
    min-height: 94px;
    padding: 18px;
  }

  .page-template-page-koklear .cochlear-pagination-link + .cochlear-pagination-link {
    border-top: 1px solid var(--cochlear-line);
    border-left: 0;
  }

  .page-template-page-koklear .cochlear-pagination-link strong {
    font-size: 15px;
  }

  .page-template-page-koklear .cochlear-pagination-link.is-next {
    grid-template-columns: minmax(0, 1fr) 38px;
    text-align: right;
  }

  .page-template-page-koklear .cochlear-pagination-link.is-next span,
  .page-template-page-koklear .cochlear-pagination-link.is-next i {
    order: initial;
  }

  .page-template-page-koklear .cochlear-pagination-link.is-next i {
    transform: none;
  }
}

/* Koklear ilgili konular: işitme rehberi carousel'inin mavi renk varyantı. */
[data-hearing-guides-carousel].cochlear-related {
  padding: 72px 0;
  border-top: 0;
  background: var(--cochlear-surface);
}

[data-hearing-guides-carousel] .cochlear-related-head {
  margin-bottom: 38px;
}

[data-hearing-guides-carousel] .cochlear-related-kicker {
  margin: 0 0 10px;
  color: var(--cochlear-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

[data-hearing-guides-carousel] .cochlear-related-head h2 {
  margin: 0;
  color: var(--cochlear-ink);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

[data-hearing-guides-carousel] .cochlear-related-carousel {
  min-width: 0;
  overflow: visible;
}

[data-hearing-guides-carousel] .cochlear-related-grid {
  display: grid;
  box-sizing: border-box;
  width: calc(100% + 64px);
  margin: -20px -32px -30px;
  padding: 24px 32px 40px;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 32px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

[data-hearing-guides-carousel] .cochlear-related-grid::-webkit-scrollbar {
  display: none;
}

[data-hearing-guides-carousel] .cochlear-related-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 96px;
  padding: 21px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--cochlear-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cochlear-ink);
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-hearing-guides-carousel] .cochlear-related-card > i {
  flex: 0 0 auto;
  color: var(--cochlear-blue);
  font-size: 18px;
}

[data-hearing-guides-carousel] .cochlear-related-card.is-current {
  border-color: var(--cochlear-blue);
  background: var(--cochlear-surface);
}

[data-hearing-guides-carousel] .cochlear-related-card:hover,
[data-hearing-guides-carousel] .cochlear-related-card:focus-visible {
  z-index: 2;
  border-color: var(--cochlear-blue);
  box-shadow: 0 12px 30px rgba(11, 94, 174, 0.12);
  transform: translateY(-3px);
}

[data-hearing-guides-carousel] .cochlear-related-card:focus-visible {
  outline: 2px solid rgba(11, 94, 174, 0.3);
  outline-offset: 3px;
}

[data-hearing-guides-carousel] .cochlear-related-scrollbar {
  position: relative;
  height: 20px;
  margin-top: 24px;
  cursor: pointer;
  touch-action: none;
}

[data-hearing-guides-carousel] .cochlear-related-scrollbar::before {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: #d8e5f1;
  content: '';
}

[data-hearing-guides-carousel] .cochlear-related-scrollbar span {
  position: absolute;
  top: 6px;
  left: 0;
  min-width: 64px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cochlear-blue-dark), var(--cochlear-blue));
  box-shadow: 0 4px 12px rgba(11, 94, 174, 0.22);
  cursor: grab;
  will-change: transform;
  transition: transform 0.12s ease-out, box-shadow 0.2s ease;
}

[data-hearing-guides-carousel] .cochlear-related-scrollbar.is-dragging span {
  cursor: grabbing;
  box-shadow: 0 5px 16px rgba(11, 94, 174, 0.34);
}

[data-hearing-guides-carousel] .cochlear-related-scrollbar.is-static {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 900px) {
  [data-hearing-guides-carousel] .cochlear-related-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

@media (max-width: 640px) {
  [data-hearing-guides-carousel].cochlear-related {
    padding: 64px 0;
  }

  [data-hearing-guides-carousel] .cochlear-related-head {
    margin-bottom: 30px;
  }

  [data-hearing-guides-carousel] .cochlear-related-grid {
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 320px);
  }

  [data-hearing-guides-carousel] .cochlear-related-card {
    min-height: 88px;
    padding: 20px;
    font-size: 15px;
  }

  [data-hearing-guides-carousel] .cochlear-related-scrollbar {
    margin-top: 18px;
  }
}

/* Keep the mobile cochlear hero image and copy visually connected. */
@media (max-width: 760px) {
  .page-template-page-koklear .cochlear-detail-page .cochlear-layout {
    gap: 0;
  }

  .page-template-page-koklear .cochlear-detail-page .cochlear-hero-visual {
    min-height: 0;
    height: clamp(300px, 76vw, 320px);
    aspect-ratio: auto;
  }

  .page-template-page-koklear .cochlear-detail-page .cochlear-hero-card {
    padding-top: 18px;
  }
}

/* İşitme cihazı rehberi: içindekiler kartının altındaki kompakt uzman CTA'sı. */
.hearing-knowledge-side {
  display: grid;
  gap: 18px;
}

.hearing-knowledge-side-cta {
  overflow: hidden;
  position: relative;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(41, 87, 161, .42), transparent 50%),
    linear-gradient(145deg, var(--hk-navy) 0%, var(--hk-blue) 100%);
  color: #fff;
  box-shadow: 0 18px 38px rgba(7, 27, 64, .18);
}

.hearing-knowledge-side-cta h2 {
  position: relative;
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
}

.hearing-knowledge-side-cta p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 13.5px;
  line-height: 1.55;
}

.hearing-knowledge-side-cta a {
  display: flex;
  position: relative;
  justify-content: center;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  margin-top: 17px;
  padding: 10px 14px;
  border: 1px solid #efb432;
  border-radius: 11px;
  background: #efb432;
  color: var(--hk-navy);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(3, 16, 39, .22);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hearing-knowledge-side-cta a:hover {
  border-color: #f5c55a;
  background: #f5c55a;
  color: var(--hk-navy);
  box-shadow: 0 13px 26px rgba(3, 16, 39, .3);
  transform: translateY(-2px);
}

.hearing-knowledge-side-cta a:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .72);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .hearing-knowledge-side {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hearing-knowledge-side-cta::before {
    animation: none;
  }
}
/* İşitme hakkında: cihaz ve koklear implant rehberleriyle ortak marka dili. */
.hearing-about-page .hearing-knowledge-hero-card {
  border-color: #ead7aa;
  background: linear-gradient(135deg, #fffaf0 0%, #f7f9fc 100%);
}

.hearing-about-page .hearing-knowledge-hero-copy {
  background:
    radial-gradient(circle at 8% 8%, rgba(224, 174, 53, .12), transparent 36%),
    linear-gradient(145deg, #fffaf1 0%, #fff 100%);
}

.hearing-about-page .hearing-knowledge-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hearing-about-page .hearing-knowledge-editor > h2 { margin-top: 58px; }
.hearing-about-page .hearing-knowledge-editor > h2:first-child { margin-top: 0; }
.hearing-about-page .hearing-knowledge-editor .hearing-guide-content-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hearing-about-medical-note {
  display: flex;
  gap: 14px;
  margin: 40px 0;
  padding: 19px 21px;
  border: 1px solid #d8e3f1;
  border-left: 4px solid var(--hk-blue);
  border-radius: 0 12px 12px 0;
  background: #eff4fa;
  color: #314b6d;
}

.hearing-about-medical-note i { color: var(--hk-blue); font-size: 22px; }
.hearing-about-medical-note p { margin: 0; }

.hearing-about-page .hearing-knowledge-related { background: #f4f7fb; }
.hearing-about-page .hearing-knowledge-related-grid a { background: #fff; }
.hearing-about-page .hearing-knowledge-related-grid a.is-current { border-color: #d9ad4c; background: #fff8e8; }

@media (max-width: 767px) {
  .hearing-about-page { max-width: 100%; overflow-x: clip; }
  .hearing-about-page .hearing-knowledge-shell,
  .hearing-about-page .hearing-knowledge-layout,
  .hearing-about-page .hearing-knowledge-content,
  .hearing-about-page .hearing-knowledge-editor { min-width: 0; max-width: 100%; }
  .hearing-about-page .hearing-knowledge-hero-card,
  .hearing-about-page .hearing-knowledge-hero-copy { min-width: 0; max-width: 100%; }
  .hearing-about-page .hearing-knowledge-hero-card { grid-template-columns: minmax(0, 1fr); }
  .hearing-about-page .hearing-knowledge-hero h1 { width: 100%; white-space: normal; overflow-wrap: break-word; text-wrap: wrap; }
  .hearing-about-page .hearing-knowledge-hero-media { min-height: 260px; }
  .hearing-about-page .hearing-knowledge-editor .hearing-guide-content-points { grid-template-columns: 1fr; }
  .hearing-about-page .hearing-knowledge-editor > h2 { margin-top: 44px; }
  .hearing-about-medical-note { padding: 17px; }
  .hearing-about-page .hearing-knowledge-related-carousel { overflow: hidden; }
  .hearing-about-page .hearing-knowledge-related-grid {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

/* Visual consistency closeout: keep shared navigation rules last in the cascade. */
.header::after {
  content: "";
}

.header-shell::after {
  content: none;
}

.header-shell.is-scrolled .header::after {
  content: "";
  right: 0;
  left: 0;
  width: 100%;
  transform: none;
}

/* Keep hero navigation aligned with the other homepage carousels. */
.hero-slider-frame .hero-controls {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 24px;
  left: 50%;
  z-index: 4;
  width: auto;
  margin: 0;
  justify-content: center;
  transform: translateX(-50%);
}

/* Desktop: anchor slider navigation below the primary Details action. */
@media (min-width: 1201px) {
  .hero-slider-frame .hero-controls {
    right: auto;
    left: 0;
    transform: none;
  }

  .hero-slider-frame .hero-dots {
    right: auto;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.hero-slider-frame .hero-control {
  color: #c99f59;
}

.hero-slider-frame .hero-control:disabled {
  color: #b4b7bf;
  opacity: 1;
}

.hero-slider-frame .hero-control:hover:not(:disabled) {
  color: #b4863e;
}

/* Keep the dark-section carousel controls legible against the navy surface. */
.insight-section .insight-nav-btn {
  border-color: #175cd3;
  background: #175cd3;
  color: #fff;
}

.insight-section .insight-nav-btn:hover:not(:disabled),
.insight-section .insight-nav-btn:focus-visible {
  border-color: #0f4eBD;
  background: #0f4eBD;
  color: #fff;
}

.insight-section .insight-nav-btn:disabled {
  border-color: #175cd3;
  background: #175cd3;
  color: #fff;
  opacity: 0.58;
}

.hero-mobile-navigation {
  display: none;
}

@media (max-width: 720px) {
  .hero-slider-inner {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .hero-copy-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .hero-stage {
    padding-bottom: 0;
  }

  .hero-slide {
    grid-template-areas:
      "copy"
      "visual"
      "navigation"
      "actions"
      "sidecard";
  }

  .hero-mobile-navigation {
    grid-area: navigation;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
  }

  .hero-mobile-navigation .hero-controls {
    position: static;
    width: auto;
    margin: 0;
    transform: none;
  }

  .hero-mobile-navigation .hero-dots {
    position: static;
    margin: 0;
    transform: none;
  }

  .hero-actions {
    margin-top: 0;
  }

  .insight-header {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .insight-header .insight-kicker {
    margin-inline: auto;
  }

  .insight-header-top {
    width: 100%;
    justify-content: center;
  }

  .insight-header h2,
  .insight-header p {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }

  .insight-section .insight-nav {
    right: auto;
    left: auto;
    display: flex;
    width: 100%;
    margin-inline: auto;
    justify-content: center;
  }
}

:is(
  .legal-breadcrumb,
  .blog-page-breadcrumb,
  .about-breadcrumb,
  .contact-page-breadcrumb,
  .services-page-breadcrumb,
  .devices-page-breadcrumb,
  .service-breadcrumb,
  .device-detail-breadcrumb,
  .callback-breadcrumb,
  .cochlear-breadcrumb,
  .hearing-guide-breadcrumb,
  .hearing-knowledge-breadcrumb,
  .callback-page .callback-breadcrumb
) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
  max-width: 100%;
  min-height: 34px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-breadcrumb-color);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  box-shadow: none;
}

:is(
  .legal-breadcrumb,
  .blog-page-breadcrumb,
  .about-breadcrumb,
  .contact-page-breadcrumb,
  .services-page-breadcrumb,
  .devices-page-breadcrumb,
  .service-breadcrumb,
  .device-detail-breadcrumb,
  .callback-breadcrumb,
  .cochlear-breadcrumb,
  .hearing-guide-breadcrumb,
  .hearing-knowledge-breadcrumb,
  .callback-page .callback-breadcrumb
) > a {
  min-height: 34px;
  color: var(--ui-breadcrumb-link);
}

:is(
  .legal-breadcrumb,
  .blog-page-breadcrumb,
  .about-breadcrumb,
  .contact-page-breadcrumb,
  .services-page-breadcrumb,
  .devices-page-breadcrumb,
  .service-breadcrumb,
  .device-detail-breadcrumb,
  .callback-breadcrumb,
  .cochlear-breadcrumb,
  .hearing-guide-breadcrumb,
  .hearing-knowledge-breadcrumb,
  .callback-page .callback-breadcrumb
) > span:last-child {
  color: var(--ui-breadcrumb-active);
  font-weight: 750;
}

/* The carousel owns its horizontal scroll; its bleed must not widen the page. */
.about-team {
  max-width: 100%;
  overflow-x: clip;
}

/* Keep the carousel's intentional inner bleed from widening the document by a rounding pixel. */
[data-hearing-guides-carousel].cochlear-related {
  overflow-x: clip;
}

@media (max-width: 720px) {
  :is(
    .legal-breadcrumb,
    .blog-page-breadcrumb,
    .about-breadcrumb,
    .contact-page-breadcrumb,
    .services-page-breadcrumb,
    .devices-page-breadcrumb,
    .service-breadcrumb,
    .device-detail-breadcrumb,
    .callback-breadcrumb,
    .cochlear-breadcrumb,
    .hearing-guide-breadcrumb,
    .hearing-knowledge-breadcrumb,
    .callback-page .callback-breadcrumb
  ) {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 18px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
    scrollbar-width: none;
  }

  :is(
    .legal-breadcrumb,
    .blog-page-breadcrumb,
    .about-breadcrumb,
    .contact-page-breadcrumb,
    .services-page-breadcrumb,
    .devices-page-breadcrumb,
    .service-breadcrumb,
    .device-detail-breadcrumb,
    .callback-breadcrumb,
    .cochlear-breadcrumb,
    .hearing-guide-breadcrumb,
    .hearing-knowledge-breadcrumb,
    .callback-page .callback-breadcrumb
  ) > a {
    min-height: 30px;
  }
}

/* Services archive uses the shared breadcrumb treatment on its light surface. */
.services-page .services-page-breadcrumb {
  width: auto;
  justify-content: flex-start;
  color: var(--ui-breadcrumb-color);
  text-align: left;
}

.services-page .services-page-breadcrumb > a,
.services-page .services-page-breadcrumb > i,
.services-page .services-page-breadcrumb > span:last-child {
  color: inherit;
}

/* Shared card and form primitives: page variants keep their own content and colour themes. */
:is(
  .services-page-card,
  .device-series-card,
  .blog-card,
  .about-team-card,
  .contact-branch-card,
  .partner-logo-card,
  .about-stat-card,
  .about-value-card,
  .callback-trust-card
) {
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-card-shadow);
  transition: transform var(--ds-transition), border-color var(--ds-transition), box-shadow var(--ds-transition);
}

:is(
  .services-page-card,
  .device-series-card,
  .blog-card,
  .about-team-card,
  .contact-branch-card,
  .partner-logo-card
):is(:hover, :focus-visible, :focus-within) {
  transform: translateY(-2px);
  box-shadow: var(--ds-card-shadow-hover);
}

:is(
  .hero-sidecard,
  .award-card,
  .insight-card,
  .blog-featured-card,
  .blog-newsletter-card,
  .about-cta-card,
  .callback-form-card,
  .hearing-knowledge-hero-card,
  .hearing-knowledge-cta-card
) {
  border-radius: var(--ds-radius-panel);
}

:is(.callback-form, .contact-message-form, .cochlear-application-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ds-control-md);
  border-color: var(--ds-color-border);
  border-radius: var(--ds-radius-control);
  font-family: inherit;
  font-size: 16px;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background-color var(--ds-transition);
}

:is(.callback-form, .contact-message-form, .cochlear-application-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus-visible {
  outline: 0;
  border-color: var(--ds-color-navy);
  box-shadow: var(--ds-focus-ring);
}

:is(.callback-form, .contact-message-form, .cochlear-application-form) textarea {
  min-height: 120px;
  resize: vertical;
}

@media (min-width: 761px) {
  .cochlear-application-form
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
    min-height: 48px;
    font-size: 16px;
  }

  .cochlear-application-form textarea {
    min-height: 116px;
    font-size: 16px;
  }

  .cochlear-application-form button {
    min-height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  .cochlear-application-form
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
  .cochlear-application-form button {
    min-height: 50px;
    font-size: 16px;
  }
}

:is(.blog-search, .blog-sort, .blog-newsletter-input) {
  min-height: var(--ds-control-sm);
  border-color: var(--ds-color-border);
  border-radius: var(--ds-radius-control);
}

:is(.blog-search, .blog-newsletter-input):focus-within,
.blog-sort:focus-visible {
  outline: 0;
  border-color: var(--ds-color-navy);
  box-shadow: var(--ds-focus-ring);
}

:is(.blog-search, .blog-newsletter-input) input,
.blog-sort {
  font-family: inherit;
  font-size: 16px;
}

/* Remaining cross-page alignment: semantic type, readable accents and compact mobile chrome. */
:is(
  .services-page-title,
  .devices-page-title,
  .about-title,
  .contact-page-title,
  .callback-title,
  .legal-title,
  .blog-page-title
) {
  font-size: var(--ds-title-page);
}

.generic-page-article > h1 {
  font-size: var(--ds-title-article);
}

.hearing-knowledge-eyebrow,
.hearing-section-kicker {
  color: var(--ds-color-accent-ink);
}

:is(.menu-toggle, .hero-control, .insight-nav-btn, .blog-card-arrow) i {
  font-size: var(--ds-icon-sm);
}

.callback-page .callback-form-card {
  border-radius: var(--ds-radius-panel);
}

@media (max-width: 480px) {
  .site-footer-main,
  .site-footer-nav {
    gap: var(--ds-space-6);
  }

  .site-footer-sitemap {
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
    margin-top: var(--ds-space-6);
  }

  .site-footer-sitemap-group ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-2) var(--ds-space-3);
    margin-top: var(--ds-space-3);
  }

  .site-footer-sitemap-group a {
    font-size: 11px;
    line-height: 1.35;
  }

  .site-footer-bottom {
    margin-top: var(--ds-space-6);
  }

  /* Complianz remains functional; the policy copy scrolls instead of covering half the viewport. */
  .cmplz-cookiebanner.cmplz-show {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px) !important;
    max-height: min(36dvh, 324px) !important;
    right: 8px !important;
    left: 8px !important;
    padding: var(--ds-space-4) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .cmplz-cookiebanner .cmplz-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ds-space-2) !important;
  }

  .cmplz-cookiebanner .cmplz-btn {
    min-height: var(--ds-control-sm) !important;
    margin: 0 !important;
    border-radius: var(--ds-radius-control) !important;
    font-size: 13px !important;
  }
}

/* Center the hearing-needs intro and keep its controls beneath the card rail. */
body.home .insight-header {
  width: 100%;
  align-items: center;
  text-align: center;
}

body.home .insight-header .insight-kicker {
  margin-inline: auto;
}

body.home .insight-header-top {
  width: 100%;
  justify-content: center;
}

body.home .insight-header h2 {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

body.home .insight-header > p:last-child {
  width: 100%;
  max-width: 80ch;
  margin-inline: auto;
}

body.home .insight-section .insight-nav {
  position: static;
  display: flex;
  width: 100%;
  margin: 16px auto 0;
  justify-content: center;
}

/* Homepage services intro stays centered on compact layouts. */
@media (max-width: 720px) {
  body.home .services-showcase-header {
    text-align: center;
  }

  body.home .services-showcase-header .services-showcase-kicker {
    margin-right: auto;
    margin-left: auto;
  }
}

/* Homepage blog cards use one semantic link with a clear keyboard focus state. */
body.home .blog-section .blog-card:focus-visible {
  outline: 3px solid #2f6dcc;
  outline-offset: 3px;
}

/* Blog archive cards keep the full-card link while exposing a clear text action. */
.blog-page .blog-card:focus-visible {
  outline: 3px solid #2f6dcc;
  outline-offset: 3px;
}

/* Match homepage section intro type to the insights section without changing layout. */
body.home :is(
  .pediatric-kicker,
  .hearing-steps-kicker,
  .services-showcase-kicker,
  .blog-kicker,
  .faq-kicker
) {
  font-family: var(--ds-font-family);
  font-size: 11px;
}

body.home :is(
  .pediatric-copy h2,
  .hearing-steps-header h2,
  .services-showcase-header h2,
  .blog-header h2,
  .faq-header h2
) {
  font-family: var(--ds-font-family);
  font-size: 42px;
}

body.home :is(
  .pediatric-copy > p,
  .hearing-steps-header > p:last-child,
  .services-showcase-header > p:last-child,
  .blog-header > p:last-child,
  .faq-header > p:last-child
) {
  font-family: var(--ds-font-family);
  font-size: 18px;
}

/* Keep the pill-to-title spacing scoped to the homepage pediatric section. */
body.home .pediatric-copy > .pediatric-kicker { margin-bottom: 0; }
body.home .pediatric-copy > h2 { margin-top: 10px; }

@media (max-width: 1200px) {
  body.home :is(
    .pediatric-copy h2,
    .hearing-steps-header h2,
    .services-showcase-header h2,
    .blog-header h2,
    .faq-header h2
  ) {
    font-size: 32px;
  }

  body.home :is(
    .pediatric-copy > p,
    .hearing-steps-header > p:last-child,
    .services-showcase-header > p:last-child,
    .blog-header > p:last-child,
    .faq-header > p:last-child
  ) {
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  body.home :is(
    .pediatric-kicker,
    .hearing-steps-kicker,
    .services-showcase-kicker,
    .blog-kicker,
    .faq-kicker
  ) {
    font-size: 10px;
  }

  body.home :is(
    .pediatric-copy h2,
    .hearing-steps-header h2,
    .services-showcase-header h2,
    .blog-header h2,
    .faq-header h2
  ) {
    font-size: 26px;
  }

  body.home :is(
    .pediatric-copy > p,
    .hearing-steps-header > p:last-child,
    .services-showcase-header > p:last-child,
    .blog-header > p:last-child,
    .faq-header > p:last-child
  ) {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body.home :is(
    .pediatric-copy h2,
    .hearing-steps-header h2,
    .services-showcase-header h2,
    .blog-header h2,
    .faq-header h2
  ) {
    font-size: 23px;
  }

  body.home :is(
    .pediatric-copy > p,
    .hearing-steps-header > p:last-child,
    .services-showcase-header > p:last-child,
    .blog-header > p:last-child,
    .faq-header > p:last-child
  ) {
    font-size: 13px;
  }
}

/* PRESET 02 — Services archive and service detail breadcrumbs. */
:is(.ui-breadcrumb, .ui-preset-breadcrumb) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
  max-width: 100%;
  min-height: 34px;
  margin: 0 0 22px;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: var(--ui-breadcrumb-color, rgba(72, 86, 110, 0.7));
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
}

:is(.ui-breadcrumb, .ui-preset-breadcrumb) > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;

  color: var(--ui-breadcrumb-link, rgba(43, 58, 87, 0.86));
  text-decoration: none;
  transition: color var(--ui-transition, 0.2s ease),
    opacity var(--ui-transition, 0.2s ease);
}

:is(.ui-breadcrumb, .ui-preset-breadcrumb) > a:hover,
:is(.ui-breadcrumb, .ui-preset-breadcrumb) > a:focus-visible {
  color: var(--ui-breadcrumb-active, #071a36);
}

:is(.ui-breadcrumb, .ui-preset-breadcrumb) > span[aria-hidden="true"] {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  overflow: hidden;

  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: rgba(72, 86, 110, 0.42);
  font-size: 0;
  transform: rotate(45deg);
}

:is(.ui-breadcrumb, .ui-preset-breadcrumb) > span:last-child {
  overflow: hidden;
  max-width: min(52vw, 420px);

  color: var(--ui-breadcrumb-active, #071a36);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the preset authoritative over legacy page-specific breadcrumb colours. */
.services-page :is(.ui-breadcrumb, .ui-preset-breadcrumb) > a {
  color: var(--ui-breadcrumb-link, rgba(43, 58, 87, 0.86));
}

.services-page :is(.ui-breadcrumb, .ui-preset-breadcrumb) > span:last-child {
  color: var(--ui-breadcrumb-active, #071a36);
}

@media (max-width: 720px) {
  :is(.ui-breadcrumb, .ui-preset-breadcrumb) {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 18px;
    overflow-x: auto;

    font-size: 12px;
    white-space: nowrap;
    scrollbar-width: none;
  }

  :is(.ui-breadcrumb, .ui-preset-breadcrumb)::-webkit-scrollbar {
    display: none;
  }

  :is(.ui-breadcrumb, .ui-preset-breadcrumb) > a {
    min-height: 30px;
  }
}

@media (max-width: 720px) {
  .services-page .services-page-hero {
    padding-top: 24px;
  }

  .services-page,
  .services-page-intro,
  .services-page-header {
    min-width: 0;
  }

  .services-page-header {
    width: 100%;
  }

  .services-page-header h1 {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: wrap;
  }
}

/* Keep device detail pages on the catalog page's shell and breadcrumb rail. */
.devices-page .devices-page-shell,
.device-detail-page .device-detail-shell {
  width: var(--ui-page-shell);
  margin-right: auto;
  margin-left: auto;
}

.devices-page-hero,
.device-detail-hero,
.hearing-series-hero {
  padding-top: clamp(28px, 4vw, 54px);
}

@media (max-width: 720px) {
  .devices-page-hero,
  .device-detail-hero,
  .hearing-series-hero {
    padding-top: 26px;
  }
}

/* Keep hearing-guide child pages on the hearing-device catalog's content rail. */
.hearing-knowledge-page .hearing-knowledge-shell {
  width: var(--ui-page-shell);
  margin-right: auto;
  margin-left: auto;
}

/* Keep the shared hero image aligned to the right-side catalog column. */
@media (min-width: 992px) {
  .hearing-knowledge-page .hearing-knowledge-hero-card {
    grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr);
  }

  .hearing-knowledge-page .hearing-knowledge-hero-media img {
    object-position: 72% center;
  }
}

.hearing-knowledge-page .hearing-knowledge-hero {
  padding-top: clamp(28px, 4vw, 54px);
}

@media (max-width: 720px) {
  .hearing-knowledge-page .hearing-knowledge-shell {
    width: var(--ui-page-shell-mobile);
  }

  .hearing-knowledge-page .hearing-knowledge-hero {
    padding-top: 26px;
  }
}

/* Keep cochlear-implant guide pages on the same catalog content rail. */
.cochlear-detail-page .cochlear-shell {
  width: var(--ui-page-shell);
  margin-right: auto;
  margin-left: auto;
}

.cochlear-detail-page .cochlear-hero {
  padding-top: clamp(28px, 4vw, 54px);
}

@media (max-width: 720px) {
  .cochlear-detail-page .cochlear-shell {
    width: var(--ui-page-shell-mobile);
  }

  .cochlear-detail-page .cochlear-hero {
    padding-top: 26px;
  }
}

/* Keep the blog archive and every article on one shared breadcrumb/content rail. */
.blog-page .blog-page-shell,
.blog-detail-page .blog-page-shell {
  width: var(--ui-page-shell);
  margin-right: auto;
  margin-left: auto;
}

.blog-page .blog-listing-hero,
.blog-detail-page .blog-article-hero {
  padding-top: clamp(28px, 4vw, 54px);
}

.blog-page .blog-page-breadcrumb,
.blog-detail-page .blog-page-breadcrumb {
  gap: 12px;
}

.blog-page .blog-page-breadcrumb > span:not(:last-child),
.blog-detail-page .blog-page-breadcrumb > span:not(:last-child) {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  overflow: hidden;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: rgba(72, 86, 110, 0.42);
  font-size: 0;
  transform: rotate(45deg);
}

@media (max-width: 720px) {
  .blog-page .blog-page-shell,
  .blog-detail-page .blog-page-shell {
    width: var(--ui-page-shell-mobile);
  }

  .blog-page .blog-listing-hero,
  .blog-detail-page .blog-article-hero {
    padding-top: 26px;
  }
}

/* Make headings inside blog article content clearly readable. */
.blog-detail-page .blog-article-block h2 {
  font-size: clamp(29px, 2.55vw, 36px);
}

.blog-detail-page .blog-article-block h3 {
  font-size: clamp(24px, 2.05vw, 30px);
}

.blog-detail-page .blog-article-block h4 {
  font-size: 26px;
}

.blog-detail-page .blog-article-block h5,
.blog-detail-page .blog-article-block h6 {
  font-size: 19px;
}

/* Compact the blog archive controls without changing other form controls. */
.blog-page .blog-search,
.blog-page .blog-sort {
  min-height: 36px;
  height: 36px;
  border-radius: 12px;
}

.blog-page .blog-search {
  width: 220px;
  padding-right: 11px;
  padding-left: 11px;
}

.blog-page .blog-search i {
  font-size: 16px;
}

.blog-page .blog-search input,
.blog-page .blog-sort {
  font-size: 13px;
}

.blog-page .blog-filter {
  min-height: 32px;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 11.5px;
}

@media (max-width: 720px) {
  .blog-detail-page .blog-article-block h2 {
    font-size: 27px;
  }

  .blog-detail-page .blog-article-block h3 {
    font-size: 23px;
  }

  .blog-detail-page .blog-article-block h4 {
    font-size: 24px;
  }

  .blog-detail-page .blog-article-block h5,
  .blog-detail-page .blog-article-block h6 {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .blog-page .blog-search,
  .blog-page .blog-sort {
    width: 100%;
  }
}

/* Keep article recommendations on the exact same card preset as the blog archive. */
.blog-detail-page .blog-related-track {
  grid-auto-columns: calc((100% - 40px) / 3);
  align-items: stretch;
}

.blog-detail-page .blog-related-track .blog-related-list-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(19, 40, 76, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(93, 141, 217, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
  box-shadow: 0 18px 42px rgba(25, 48, 85, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.blog-detail-page .blog-related-track .blog-card-media {
  aspect-ratio: 1.48 / 1;
}

.blog-detail-page .blog-related-track .blog-card-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 16px;
}

.blog-detail-page .blog-related-track .blog-card-title {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 23px);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.blog-detail-page .blog-related-track .blog-card-meta {
  margin-top: auto;
  padding-top: 18px;
}

.blog-detail-page .blog-related-track .blog-card-date {
  gap: 7px;
  color: rgba(45, 58, 84, 0.74);
  font-size: 14px;
  font-weight: 500;
}

.blog-detail-page .blog-related-track .blog-card-date i {
  color: #4675c8;
  font-size: 15px;
}

/* Keep archive and related-article card titles compact and consistent. */
.blog-page .blog-list-grid .blog-card-title,
.blog-detail-page .blog-related-track .blog-card-title {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.18;
}

@media (max-width: 1020px) {
  .blog-detail-page .blog-related-track {
    grid-auto-columns: minmax(260px, 46%);
  }
}

@media (max-width: 640px) {
  .blog-page .blog-list-grid .blog-card-title,
  .blog-detail-page .blog-related-track .blog-card-title {
    font-size: 17px;
  }

  .blog-detail-page .blog-related-track {
    grid-auto-columns: 82%;
  }
}

/* Hakkımızda hero: use the Hizmetler page's content rail and breadcrumb rhythm. */
@media (min-width: 1081px) {
  body.page-template-page-hakkimizda .about-hero-grid {
    --about-services-rail-x: max(
      var(--ui-gutter, 48px),
      calc((100% - var(--ui-container, 1240px)) / 2)
    );
    --about-services-hero-top: clamp(30px, 4vw, 54px);
  }

  body.page-template-page-hakkimizda .about-hero-grid > .about-breadcrumb {
    top: var(--about-services-hero-top);
    left: var(--about-services-rail-x);
    padding-top: 0;
  }

  body.page-template-page-hakkimizda .about-hero-copy {
    top: calc(var(--about-services-hero-top) + 94px);
    left: var(--about-services-rail-x);
    transform: none;
  }

  body.page-template-page-hakkimizda .about-hero-copy > p:not(.about-kicker) {
    max-width: 720px;
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.65;
  }
}

/* İletişim hero: match the Hakkımızda description size on desktop. */
@media (min-width: 1081px) {
  body.page-template-page-iletisim .contact-page-header > p,
  body.page-template-page-iletisim .contact-message-header > p {
    font-size: 18px;
  }
}

/* Hakkımızda mobile hero: match the Hizmetler page's mobile content rail. */
@media (max-width: 720px) {
  body.page-template-page-hakkimizda .about-hero-grid > .about-breadcrumb {
    top: 28px;
    right: 18px;
    left: 18px;
    width: auto;
    padding-top: 0;
  }

  body.page-template-page-hakkimizda .about-hero-copy {
    top: 90px;
    right: 18px;
    left: 18px;
    width: auto;
    transform: none;
  }
}

/* İletişim formu: daha dengeli ölçüler ve ana sayfadaki CTA renk dili. */
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-field-label {
  font-size: 12px !important;
  line-height: 1.25;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-field-label em {
  font-size: 10px !important;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form input,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form select,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form textarea {
  font-family: "Poppins", sans-serif;
  font-size: 13px !important;
  font-weight: 500;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form input,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form select {
  font-size: 13px !important;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form input::placeholder,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-form textarea::placeholder {
  font-size: 13px !important;
}

body.page-template-page-sizi-arayalim .callback-form.contact-message-form textarea {
  min-height: 104px;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-consent {
  font-size: 12px !important;
  line-height: 1.4;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-consent span,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-consent a {
  font-size: inherit !important;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-consent > span {
  margin-bottom: 0;
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-submit,
body.page-template-page-iletisim .contact-branch-btn.primary {
  border-color: rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  color: #13284c;
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
}

:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-submit:hover,
:is(body.page-template-page-iletisim, body.page-template-page-sizi-arayalim) .contact-message-submit:focus-visible,
body.page-template-page-iletisim .contact-branch-btn.primary:hover,
body.page-template-page-iletisim .contact-branch-btn.primary:focus-visible {
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
}

/* Hakkımızda primary CTA: reuse the İletişim route-button colors. */
body.page-template-page-hakkimizda .about-cta-button:not(.about-cta-button--secondary) {
  border-color: rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  color: #13284c;
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
}

body.page-template-page-hakkimizda .about-cta-button:not(.about-cta-button--secondary):hover,
body.page-template-page-hakkimizda .about-cta-button:not(.about-cta-button--secondary):focus-visible {
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
}

/* Hakkımızda telefon CTA: subtle ringing motion. */
@keyframes about-phone-ring {
  0%, 100% { rotate: 0deg; }
  10% { rotate: -14deg; }
  20% { rotate: 14deg; }
  30% { rotate: -10deg; }
  40% { rotate: 0deg; }
}

body.page-template-page-hakkimizda .about-cta-button--secondary .ph-phone-call {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: about-phone-ring 2.8s ease-in-out infinite;
}

body.page-template-page-hakkimizda .about-cta-button--secondary:hover .ph-phone-call,
body.page-template-page-hakkimizda .about-cta-button--secondary:focus-visible .ph-phone-call {
  animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-page-hakkimizda .about-cta-button--secondary .ph-phone-call {
    animation: none;
  }
}

body.page-template-page-iletisim .contact-message-submit i {
  display: inline-block;
  transition: transform 0.22s ease;
}

body.page-template-page-iletisim .contact-message-submit:hover i,
body.page-template-page-iletisim .contact-message-submit:focus-visible i {
  transform: translateX(6px);
}

/* Hakkımızda CTA arka planı: İşitme rehberi CTA ile aynı koyu mavi yüzey. */
body.page-template-page-hakkimizda .about-cta-card {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 10%, rgba(49, 99, 177, 0.3), transparent 30%),
    linear-gradient(116deg, #071a3a 0%, #0a2859 58%, #0b3474 100%);
  box-shadow: 0 24px 60px rgba(7, 26, 59, 0.18);
}

body.page-template-page-hakkimizda .about-cta-card::before {
  position: absolute;
  z-index: -1;
  top: -190px;
  right: -110px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(136, 181, 240, 0.11);
  border-radius: 50%;
  box-shadow:
    0 0 0 74px rgba(136, 181, 240, 0.035),
    0 0 0 150px rgba(136, 181, 240, 0.025);
  content: "";
  pointer-events: none;
}

/* İşitme rehberi CTA: örnekteki kapsül etiket, çerçeveli sağ panel ve iki CTA. */
body.single-isitme-hakkinda .hearing-knowledge-cta-copy .hearing-knowledge-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 13px;
  padding: 0 12px;
  border: 1px solid rgba(73, 139, 224, 0.48);
  border-radius: 999px;
  background: rgba(32, 87, 158, 0.26);
  color: #78adf0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

body.single-isitme-hakkinda .hearing-knowledge-cta h2 {
  max-width: 640px;
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 700px;
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-card {
  padding: clamp(30px, 3.4vw, 44px) clamp(30px, 4.2vw, 58px);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-message h2 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(32px, 3.25vw, 45px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 610px;
  margin: 13px 0 0;
  color: rgba(225, 237, 255, 0.72);
  font-size: 15px;
  line-height: 1.55;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel {
  align-self: center;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel {
  padding: 20px;
  border: 1px solid rgba(155, 185, 224, 0.34);
  border-radius: 16px;
  background: rgba(5, 25, 56, 0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-actions > a {
  min-height: 54px;
  justify-content: center;
  padding-inline: 25px;
  border-radius: 14px;
  white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-actions > a:hover,
body.single-isitme-hakkinda .hearing-knowledge-cta-actions > a:focus-visible {
  transform: none;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(174, 198, 230, 0.72);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link:hover,
body.single-isitme-hakkinda .hearing-knowledge-cta-link:focus-visible {
  border-color: #fff;
  background: rgba(255,255,255,.1);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 18px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-label i {
  color: #ffcf4c;
  font-size: 21px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel ul {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6e2f5;
  font-size: 15px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel li i {
  color: #ffca3a;
  font-size: 17px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-meta {
  display: none !important;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-meta {
  display: none !important;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(180, 204, 236, 0.18);
  color: #9eb9dc;
  font-size: 12px;
  font-weight: 700;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-panel-meta i {
  color: #ffca3a;
  font-size: 15px;
}

/* CTA butonları Hakkımızda bölümündeki hareket ve ölçüleriyle eşleştirildi. */
body.single-isitme-hakkinda .hearing-knowledge-cta-actions > a {
  min-height: 52px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

body.single-isitme-hakkinda .hearing-knowledge-button--primary {
  border: 1px solid rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  color: #13284c;
  box-shadow: 0 8px 18px rgba(192, 140, 24, 0.12), inset 0 1px 0 rgba(255,255,255,.7);
}

body.single-isitme-hakkinda .hearing-knowledge-button--primary:hover,
body.single-isitme-hakkinda .hearing-knowledge-button--primary:focus-visible {
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
  box-shadow: 0 18px 38px rgba(246, 188, 47, 0.3);
  transform: none;
}

body.single-isitme-hakkinda .hearing-knowledge-button--primary i {
  transition: transform 180ms ease;
}

body.single-isitme-hakkinda .hearing-knowledge-button--primary:hover i,
body.single-isitme-hakkinda .hearing-knowledge-button--primary:focus-visible i {
  transform: translateX(6px);
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link .ph-phone-call {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: about-phone-ring 2.8s ease-in-out infinite;
}

body.single-isitme-hakkinda .hearing-knowledge-cta-link:hover .ph-phone-call,
body.single-isitme-hakkinda .hearing-knowledge-cta-link:focus-visible .ph-phone-call {
  animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  body.single-isitme-hakkinda .hearing-knowledge-cta-link .ph-phone-call { animation: none; }
}

@media (max-width: 760px) {
  body.single-isitme-hakkinda .hearing-knowledge-cta-actions {
    grid-template-columns: 1fr;
  }
}

/* Rehber CTA: Hakkımızda CTA'sındaki metin aralıklarını koru; içerik değişmez. */
body.page-template-page-hearing-guide .hearing-knowledge-cta-message,
body.single-isitme-hakkinda .hearing-knowledge-cta-message {
  display: block;
}

body.page-template-page-hearing-guide .hearing-knowledge-cta-copy .hearing-knowledge-pill,
body.single-isitme-hakkinda .hearing-knowledge-cta-copy .hearing-knowledge-pill {
  min-height: 28px;
  margin: 0 0 13px !important;
  padding: 0 12px;
  border: 1px solid #cbd9ef;
  border-radius: 999px;
  background: #edf3fc;
  color: #2d5ea5;
}

body.page-template-page-hearing-guide .hearing-knowledge-cta-message h2,
body.single-isitme-hakkinda .hearing-knowledge-cta-message h2 {
  max-width: 690px;
  margin: 0 !important;
  font-size: clamp(32px, 3.25vw, 45px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

body.page-template-page-hearing-guide .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill),
body.single-isitme-hakkinda .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 610px;
  margin: 13px 0 0 !important;
  font-size: 15px;
  line-height: 1.55;
}

/* Tüm işitme cihazı rehberi alt sayfası pill'leri ortak mavi görünümü kullanır. */
body.page-template-page-hearing-guide .hearing-knowledge-shell .ui-pill {
  border-color: var(--ui-pill-border) !important;
  background: var(--ui-pill-background) !important;
  color: var(--ui-pill-color) !important;
}

body.page-template-page-hearing-guide .hearing-knowledge-products .ui-pill {
  border-color: rgba(149, 194, 255, 0.34) !important;
  background: rgba(84, 146, 231, 0.16) !important;
  color: #9cc7ff !important;
}

/* Rehber alt sayfalarındaki tüm bölüm etiketleri, "Size özel değerlendirme"
 * etiketindeki kapsül/pill diliyle aynı görsel sistemi kullanır. */
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-shell :is(.hearing-knowledge-pill, .hearing-knowledge-eyebrow) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin: 0 0 13px;
  padding: 0 12px;
  border: 1px solid #cbd9ef !important;
  border-radius: 999px;
  background: #edf3fc !important;
  color: #2d5ea5 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-context :is(.hearing-knowledge-pill, .hearing-knowledge-eyebrow) {
  margin-bottom: 14px;
}

/* Alt sayfa CTA'sının sol metin ritmi, İşitme Rehberi referansıyla aynıdır. */
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-card {
  padding: clamp(30px, 3.4vw, 44px) clamp(30px, 4.2vw, 58px);
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-message h2 {
  max-width: 690px;
  margin: 0 !important;
  font-size: clamp(32px, 3.25vw, 45px);
  line-height: 1.14;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
  max-width: 610px;
  margin: 13px 0 0 !important;
  color: rgba(225, 237, 255, 0.72);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-shell :is(.hearing-knowledge-pill, .hearing-knowledge-eyebrow) {
    min-height: 26px;
    margin-bottom: 10px;
    padding-inline: 10px;
    font-size: 10px;
  }
}

/* Alt rehber CTA'sı, İşitme Rehberi CTA'sının panel düzenini kullanır;
 * sol taraftaki alt sayfa metni aynen korunur. */
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel-label,
body.single-isitme-hakkinda .hearing-knowledge-page .hearing-knowledge-cta-panel-label {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel-label i,
body.single-isitme-hakkinda .hearing-knowledge-page .hearing-knowledge-cta-panel-label i {
  display: none;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel {
  padding: 20px;
  border: 1px solid rgba(155, 185, 224, 0.34);
  border-radius: 16px;
  background: rgba(5, 25, 56, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions > a {
  min-height: 54px;
  justify-content: center;
  padding-inline: 25px;
  border-radius: 14px;
  white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel ul {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6e2f5;
  font-size: 15px;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-panel li i {
  color: #ffca3a;
  font-size: 17px;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions > a:hover,
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions > a:focus-visible {
  transform: none;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(174, 198, 230, 0.72);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link:hover,
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-button--primary:hover,
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-button--primary:focus-visible {
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
  box-shadow: 0 18px 38px rgba(246, 188, 47, 0.3);
  transform: none;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-button--primary i {
  transition: transform 180ms ease;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-button--primary:hover i,
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-button--primary:focus-visible i {
  transform: translateX(6px);
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link .ph-phone-call {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: about-phone-ring 2.8s ease-in-out infinite;
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link:hover .ph-phone-call,
body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link:focus-visible .ph-phone-call {
  animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link .ph-phone-call {
    animation: none;
  }
}

@media (max-width: 760px) {
  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-card {
    padding: 26px 20px 18px;
  }

  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-message h2 {
    font-size: clamp(27px, 8vw, 31px);
    line-height: 1.08;
  }

  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-message > p:not(.hearing-knowledge-pill) {
    font-size: 14.5px;
  }

  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions {
    grid-template-columns: 1fr;
  }

  body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-actions > a {
    width: 100%;
    min-height: 48px;
  }
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta .hearing-knowledge-button--primary,
body.single-isitme-hakkinda .hearing-knowledge-page .hearing-knowledge-cta .hearing-knowledge-button--primary {
  min-height: 52px;
  padding-inline: 22px;
  border: 1px solid rgba(204, 148, 24, 0.7);
  border-radius: 12px;
  color: #13284c;
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
}

body.single-cihaz-rehberi .hearing-knowledge-page .hearing-knowledge-cta-link,
body.single-isitme-hakkinda .hearing-knowledge-page .hearing-knowledge-cta-link {
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(200, 213, 234, 0.75);
  border-radius: 12px;
  color: #fff;
}

/* Alt rehber CTA'sı, İşitme Cihazı Rehberi primary butonuyla birebir aynı. */
.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary {
  min-height: 50px;
  padding-inline: 22px;
  border: 1px solid rgba(204, 148, 24, 0.7);
  border-radius: 12px;
  color: #13284c;
  background: linear-gradient(180deg, #ffe59b 0%, #facb45 100%);
  box-shadow:
    0 8px 18px rgba(192, 140, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(204, 148, 24, 0.16);
  transition: transform 180ms ease, background-color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease;
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:hover,
.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:focus-visible,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:hover,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:focus-visible,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary:hover,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary:focus-visible {
  color: #13284c;
  border-color: rgba(204, 148, 24, 0.7);
  background: linear-gradient(180deg, #ffeba9 0%, #ffd45a 100%);
  box-shadow: 0 13px 28px rgba(3, 16, 39, 0.3);
  transform: translateY(-2px);
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:active,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:active,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary:active {
  transform: translateY(0) scale(0.98);
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary i,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary i,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary i {
  transition: transform 180ms ease;
}

.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:hover i,
.page-template-page-hearing-guide .hearing-knowledge-cta .hearing-knowledge-button--primary:focus-visible i,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:hover i,
body.single-isitme-hakkinda .hearing-knowledge-cta .hearing-knowledge-button--primary:focus-visible i,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary:hover i,
body.single-isitme-hakkinda .hearing-knowledge-side-cta a.hearing-knowledge-button--primary:focus-visible i {
  transform: translateX(6px);
}

/* Hearing aid product: Gutenberg editorial content */
.single-isitme-cihazlari .hearing-product-content {
  overflow: hidden;
  padding: clamp(80px, 8vw, 124px) 0;
  background: #fff;
}

.single-isitme-cihazlari .hearing-product-content-head {
  max-width: 850px;
  margin: 0 0 clamp(68px, 8vw, 108px);
}

.single-isitme-cihazlari .hearing-product-content-head .ui-pill {
  margin: 0 0 18px;
}

.single-isitme-cihazlari .hearing-product-content-head h2 {
  max-width: 20ch;
  margin: 0;
  color: #091c3f;
  font-size: clamp(40px, 4.3vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.single-isitme-cihazlari .hearing-product-gutenberg {
  --product-content-ink: #091c3f;
  --product-content-copy: #4f6079;
  --product-content-blue: #2b64b1;
  --product-content-gold: #e0ac31;
  --product-content-surface: #f2f6fb;
  --product-content-cream: #fff8e8;
  --product-content-line: #dbe5f0;
  color: var(--product-content-copy);
  font-size: 16px;
  line-height: 1.72;
}

.single-isitme-cihazlari .hearing-product-gutenberg h2,
.single-isitme-cihazlari .hearing-product-gutenberg h3,
.single-isitme-cihazlari .hearing-product-gutenberg h4 {
  color: var(--product-content-ink);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.single-isitme-cihazlari .hearing-product-gutenberg h2 {
  max-width: 19ch;
  margin: 0 0 20px;
  font-size: clamp(30px, 3vw, 42px) !important;
}

.single-isitme-cihazlari .hearing-product-gutenberg h3 {
  max-width: 20ch;
  margin: 0 0 18px;
  font-size: clamp(29px, 2.8vw, 40px);
}

.single-isitme-cihazlari .hearing-product-gutenberg h4 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.single-isitme-cihazlari .hearing-product-gutenberg p,
.single-isitme-cihazlari .hearing-product-gutenberg li {
  max-width: 66ch;
}

.single-isitme-cihazlari .hearing-product-gutenberg p {
  margin-top: 0;
  margin-bottom: 18px;
}

.single-isitme-cihazlari .hearing-product-gutenberg ul,
.single-isitme-cihazlari .hearing-product-gutenberg ol {
  margin: 22px 0 0;
  padding-left: 1.3em;
}

.single-isitme-cihazlari .hearing-product-gutenberg li {
  margin-bottom: 11px;
  padding-left: 7px;
}

.single-isitme-cihazlari .hearing-product-gutenberg li::marker {
  color: var(--product-content-gold);
  font-weight: 800;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-module {
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-module + .icel-product-content-module {
  margin-top: clamp(80px, 8vw, 112px);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-eyebrow,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-eyebrow {
  display: block;
  width: fit-content;
  min-height: 0;
  margin: 0 0 16px;
  padding: 8px 13px;
  border: 1px solid #cedcf0;
  border-radius: 999px;
  background: #edf4fd;
  color: var(--product-content-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story > .wp-block-columns,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story > .wp-block-group__inner-container > .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: clamp(54px, 7vw, 104px);
  align-items: start !important;
  margin: 0;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story--reverse > .wp-block-columns,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story--reverse > .wp-block-group__inner-container > .wp-block-columns {
  grid-template-columns: minmax(360px, .96fr) minmax(0, 1.04fr);
}

.single-isitme-cihazlari .hearing-product-gutenberg .wp-block-column {
  min-width: 0;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story .wp-block-column {
  align-self: start !important;
}

.single-isitme-cihazlari .hearing-product-gutenberg .wp-block-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 300px;
  margin: 0;
  border-radius: 24px;
  background: var(--product-content-surface);
  box-shadow: none;
}

.single-isitme-cihazlari .hearing-product-gutenberg .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  border-radius: 0 !important;
  object-fit: contain;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story .wp-block-column:last-child > h2 ~ h2,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story .wp-block-column:last-child > h3 ~ h3 {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--product-content-line);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story--reverse .wp-block-column:first-child > h2 ~ h2,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story--reverse .wp-block-column:first-child > h3 ~ h3 {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--product-content-line);
}

.single-isitme-cihazlari .hearing-product-gutenberg iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 24px;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits {
  padding: clamp(48px, 6vw, 76px);
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 18%, rgba(53, 102, 174, .34), transparent 30%),
    #0b244d;
  color: #c9d5e6;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits h2,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits h3,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits h4 {
  color: #fff;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .icel-product-content-eyebrow,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .icel-product-eyebrow,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .icel-product-content-index,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .icel-product-card-index {
  color: #ffd255;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models {
  padding: clamp(48px, 6vw, 76px);
  border: 1px solid var(--product-content-line);
  border-radius: 28px;
  background: var(--product-content-surface);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits > .wp-block-columns,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits > .wp-block-group__inner-container > .wp-block-columns,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models > .wp-block-columns,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models > .wp-block-group__inner-container > .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  align-items: stretch;
  margin: 34px 0 0;
  border-top: 1px solid var(--product-content-line);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .wp-block-column,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models .wp-block-column {
  box-sizing: border-box;
  height: 100%;
  padding: clamp(24px, 3vw, 36px);
  border: 0;
  border-left: 1px solid var(--product-content-line);
  border-radius: 0;
  background: transparent;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .wp-block-column {
  border-color: rgba(255, 255, 255, .18);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .wp-block-column:first-child,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models .wp-block-column:first-child {
  padding-left: 0;
  border-left: 0;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models .wp-block-image {
  min-height: 150px;
  margin: 0 0 24px;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models .wp-block-image img {
  max-height: 220px;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-index,
.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-card-index {
  margin-bottom: 22px;
  color: var(--product-content-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-note {
  padding: clamp(28px, 3.5vw, 42px) clamp(30px, 4vw, 56px);
  border: 1px solid #f1dfb6;
  border-left: 5px solid var(--product-content-gold);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, var(--product-content-cream), #fffdfa);
}

.single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-note h3 {
  max-width: 24ch;
  font-size: clamp(25px, 2.4vw, 34px);
}

/* Safe fallback for old, ungrouped Gutenberg blocks. */
.single-isitme-cihazlari .hearing-product-gutenberg > :not(.icel-product-content-module) {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.single-isitme-cihazlari .hearing-product-gutenberg > .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 6vw, 82px);
  align-items: center !important;
  max-width: none;
  padding: 48px 0;
  border-top: 1px solid var(--product-content-line);
}

.single-isitme-cihazlari .hearing-product-gutenberg > .wp-block-spacer {
  height: 20px !important;
}

@media (max-width: 781px) {
  .single-isitme-cihazlari .hearing-product-content {
    padding: 56px 0 70px;
  }

  .single-isitme-cihazlari .hearing-product-content-head {
    margin-bottom: 44px;
  }

  .single-isitme-cihazlari .hearing-product-content-head .ui-pill {
    margin: 0 0 14px;
  }

  .single-isitme-cihazlari .hearing-product-content-head h2 {
    max-width: 20ch;
    font-size: clamp(32px, 9vw, 42px);
  }

  .single-isitme-cihazlari .hearing-product-gutenberg {
    font-size: 16px;
    line-height: 1.68;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg h3 {
    font-size: 27px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-module + .icel-product-content-module {
    margin-top: 60px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story > .wp-block-columns,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-story > .wp-block-group__inner-container > .wp-block-columns,
  .single-isitme-cihazlari .hearing-product-gutenberg > .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models {
    padding: 34px 24px;
    border-radius: 20px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits > .wp-block-columns,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits > .wp-block-group__inner-container > .wp-block-columns,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models > .wp-block-columns,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models > .wp-block-group__inner-container > .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .wp-block-column,
  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-models .wp-block-column {
    padding: 24px 0;
    border-top: 1px solid var(--product-content-line);
    border-left: 0;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-benefits .wp-block-column {
    border-color: rgba(255, 255, 255, .18);
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .wp-block-image {
    min-height: 220px;
    border-radius: 18px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .wp-block-image img {
    max-height: 380px;
  }

  .single-isitme-cihazlari .hearing-product-gutenberg .icel-product-content-note {
    padding: 26px 22px;
    border-radius: 0 16px 16px 0;
  }
}

/* Homepage guide introduction stays centered independently of carousel controls. */
body.home .blog-section .blog-header {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

body.home .blog-section .blog-header-top {
  justify-content: center;
}

body.home .blog-section .blog-header-top > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.home .blog-section .blog-header .blog-kicker,
body.home .blog-section .blog-header > p {
  margin-right: auto;
  margin-left: auto;
}

body.home .blog-section .blog-header > p {
  max-width: 960px;
}

/* Homepage hero CTAs: static filled/outline pair without hover colour animation. */
body.home .hero-btn.hero-btn--outline,
body.home .hero-btn.hero-btn--outline:hover,
body.home .hero-btn.hero-btn--outline:focus-visible {
  border-color: #0F1523;
  background: transparent;
  color: #0F1523;
  box-shadow: none;
  transform: none;
  transition: none;
}

body.home .hero-btn.hero-btn--secondary,
body.home .hero-btn.hero-btn--secondary:hover,
body.home .hero-btn.hero-btn--secondary:focus-visible {
  border-color: #0F1523;
  background: #0F1523;
  color: #fff;
  box-shadow: 0 18px 30px rgba(15, 21, 35, 0.16);
  transform: none;
  transition: none;
}

body.home .hero-btn.hero-btn--secondary::before,
body.home .hero-btn.hero-btn--secondary::after {
  display: none;
  content: none;
}

/* KVKK checkbox: keep the control aligned with the first consent-text line. */
body.page-template-page-iletisim .contact-message-consent,
body.page-template-page-sizi-arayalim .contact-message-consent {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  margin-top: 14px !important;
}

body.page-template-page-iletisim .contact-message-consent > input[type="checkbox"],
body.page-template-page-sizi-arayalim .contact-message-consent > input[type="checkbox"] {
  align-self: flex-start;
  margin: 0 !important;
  transform: translateY(-8px);
}

/* The callback form uses a larger, multi-line consent block. */
body.page-template-page-sizi-arayalim .contact-message-consent > input[type="checkbox"] {
  transform: translateY(2px);
}

/* About section headings need enough leading when the editor content wraps. */
body.page-template-page-hakkimizda .about-section-heading h2,
body.page-template-page-hakkimizda .about-cta-card h2 {
  line-height: 1.15;
}

/* Site-wide managed popup. Keep the surface aligned with the shared design tokens. */
body.icel-site-popup-open {
  overflow: hidden;
}

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

.icel-site-popup {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-family: var(--ds-font-family);
}

.icel-site-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, .68);
  backdrop-filter: blur(5px);
}

.icel-site-popup__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(280px, 1.06fr);
  width: 100%;
  max-width: min(92vw, 860px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--ds-color-brand-blue-border);
  border-radius: var(--ds-radius-panel);
  background: var(--ds-color-surface);
  box-shadow: 0 28px 80px rgba(11, 16, 32, .28);
}

.icel-site-popup__dialog--media-only {
  grid-template-columns: 1fr;
  max-width: min(92vw, 760px);
}

.icel-site-popup__dialog--media-only .icel-site-popup__media,
.icel-site-popup__dialog--media-only .icel-site-popup__image {
  min-height: 0;
  max-height: min(70dvh, 560px);
}

.icel-site-popup__dialog--media-only .icel-site-popup__content {
  justify-content: flex-start;
  padding: 14px 24px 18px;
}

.icel-site-popup__dialog--media-only .icel-site-popup__dont-show {
  margin-top: 0;
}

.icel-site-popup__media {
  display: grid;
  min-height: 300px;
  background: var(--ds-color-surface-soft);
}

.icel-site-popup__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 560px;
  object-fit: contain;
}

.icel-site-popup__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
  color: var(--ds-color-brand-ink);
}

.icel-site-popup__content h2 {
  margin: 0 0 16px;
  color: var(--ds-color-brand-ink);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.icel-site-popup__text {
  max-width: 42ch;
  color: var(--ds-color-brand-ink-muted);
  font-size: var(--ds-text-md);
  line-height: 1.65;
}

.icel-site-popup__text p {
  margin: 0 0 12px;
}

.icel-site-popup__text p:last-child {
  margin-bottom: 0;
}

.icel-site-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--ds-control-md);
  margin-top: 26px;
  padding: 0 20px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-brand-blue);
  color: #fff;
  font-weight: var(--ds-font-weight-bold);
  text-decoration: none;
  transition: background var(--ds-transition), transform var(--ds-transition);
}

.icel-site-popup__cta:hover,
.icel-site-popup__cta:focus-visible {
  background: var(--ds-color-navy-hover);
  color: #fff;
  transform: translateY(-1px);
}

.icel-site-popup__dont-show {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: var(--ds-color-ink-muted);
  font-size: var(--ds-text-sm);
  cursor: pointer;
}

.icel-site-popup__dont-show input {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--ds-color-brand-ink-muted);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.icel-site-popup__dont-show input:checked {
  border-color: var(--ds-color-brand-blue);
  background: var(--ds-color-brand-blue);
}

.icel-site-popup__dont-show input:checked::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: '';
  transform: rotate(45deg);
}

.icel-site-popup__dont-show input:focus-visible {
  outline: 3px solid rgba(40, 95, 196, .28);
  outline-offset: 2px;
}

.icel-site-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid var(--ds-color-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--ds-color-brand-ink);
  box-shadow: 0 6px 18px rgba(11, 16, 32, .28);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition), transform var(--ds-transition);
}

.icel-site-popup__close:hover,
.icel-site-popup__close:focus-visible {
  border-color: var(--ds-color-accent-hover);
  background: var(--ds-color-brand-blue);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 680px) {
  .icel-site-popup {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .icel-site-popup__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 38dvh) auto;
    max-width: min(94vw, 560px);
    max-height: calc(100dvh - 24px);
    border-radius: 22px;
  }

  .icel-site-popup__media {
    min-height: 0;
    height: 38dvh;
    overflow: hidden;
    max-height: 38dvh;
  }

  .icel-site-popup__image {
    height: 100%;
    min-height: 0;
    max-height: 38dvh;
  }

  .icel-site-popup__content {
    min-height: 0;
    padding: 28px 24px 24px;
  }

  .icel-site-popup__cta {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .icel-site-popup__dialog--media-only {
    grid-template-rows: minmax(0, 58dvh) auto;
    max-width: min(94vw, 560px);
  }

  .icel-site-popup__dialog--media-only .icel-site-popup__media,
  .icel-site-popup__dialog--media-only .icel-site-popup__image {
    height: 58dvh;
    max-height: 58dvh;
  }

  .icel-site-popup__dialog--media-only .icel-site-popup__content {
    padding: 12px 18px 16px;
  }

  .icel-site-popup__content h2 {
    padding-right: 32px;
    font-size: clamp(25px, 8vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icel-site-popup__cta {
    transition: none;
  }
}

/* Category archive pages */
.category-archive-page {
  background: inherit;
  color: inherit;
}

/* Quiet category child pages: keep the Blog family, reduce the landing-page drama. */
.category-archive-intro {
  padding: 24px 0 clamp(54px, 7vw, 88px);
  border-bottom: 1px solid rgba(7, 26, 54, 0.08);
  background: #f8fbff;
}

.category-archive-intro .blog-page-breadcrumb {
  margin-bottom: clamp(42px, 6vw, 72px);
}

.category-archive-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  align-items: end;
  gap: clamp(28px, 8vw, 132px);
}

.category-archive-intro-copy {
  max-width: 740px;
  padding-left: 20px;
  border-left: 3px solid var(--category-color, #285fc4);
}

.category-archive-kicker,
.category-archive-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--category-color, #285fc4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.category-archive-kicker i {
  font-size: 16px;
}

.category-archive-intro-copy h1 {
  max-width: 740px;
  margin: 14px 0 16px;
  color: #071a36;
  font-size: clamp(42px, 6vw, 76px);
  letter-spacing: -.06em;
  line-height: .98;
}

.category-archive-intro-copy p {
  max-width: 630px;
  margin: 0;
  color: #5e6d84;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.68;
}

.category-archive-count {
  padding: 0 0 5px 24px;
  border-left: 1px solid rgba(7, 26, 54, .16);
}

.category-archive-count strong {
  display: block;
  color: #071a36;
  font-size: clamp(42px, 5vw, 64px);
  letter-spacing: -.06em;
  line-height: 1;
}

.category-archive-count span {
  display: block;
  max-width: 110px;
  margin-top: 9px;
  color: #6a778b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.category-archive-content {
  padding: clamp(52px, 7vw, 90px) 0 104px;
  background: #fff;
}

.category-archive-content-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(7, 26, 54, .12);
}

.category-archive-content-head h2 {
  margin: 8px 0 0;
  color: #071a36;
  font-size: clamp(28px, 3.3vw, 44px);
  letter-spacing: -.045em;
  line-height: 1.05;
}

.category-archive-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: #5e6d84;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.category-archive-back:hover,
.category-archive-back:focus-visible {
  color: var(--category-color, #285fc4);
}

.category-archive-filter-nav {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  margin: 24px 0 38px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(7, 26, 54, .08);
  scrollbar-width: thin;
}

.category-archive-filter-nav .blog-filter {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 28px;
  align-items: flex-start;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6a778b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.category-archive-filter-nav .blog-filter::after {
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}

.category-archive-filter-nav .blog-filter:hover,
.category-archive-filter-nav .blog-filter:focus-visible,
.category-archive-filter-nav .blog-filter.is-active {
  border: 0;
  background: transparent;
  color: var(--category-color, #285fc4);
  transform: none;
}

.category-archive-filter-nav .blog-filter.is-active::after {
  background: var(--category-color, #285fc4);
}

.category-archive-content #blog-results .blog-list-grid {
  gap: 18px;
}

@media (max-width: 680px) {
  .category-archive-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .category-archive-count {
    padding: 18px 0 0;
    border-top: 1px solid rgba(7, 26, 54, .16);
    border-left: 0;
  }

  .category-archive-count span {
    max-width: none;
  }

  .category-archive-content-head {
    display: block;
  }

  .category-archive-back {
    margin-top: 18px;
  }

  .category-archive-filter-nav {
    gap: 18px;
  }
}

.category-archive-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 76px;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--category-color) 14%, transparent), transparent 30%),
    linear-gradient(135deg, #eef5ff 0%, #f8fbff 58%, #edf4ff 100%);
}

.category-archive-hero::after {
  position: absolute;
  right: -8%;
  bottom: -52%;
  width: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(40, 95, 196, .08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.category-archive-breadcrumb {
  margin-bottom: 58px;
}

.category-archive-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: center;
  gap: clamp(36px, 7vw, 104px);
}

.category-archive-hero-copy {
  max-width: 650px;
}

.category-archive-kicker,
.category-archive-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--category-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.category-archive-kicker i {
  font-size: 17px;
}

.category-archive-hero-copy h1 {
  max-width: 720px;
  margin: 14px 0 17px;
  color: var(--ds-color-brand-ink, #071a36);
  font-size: clamp(42px, 6vw, 76px);
  letter-spacing: -.06em;
  line-height: .98;
}

.category-archive-hero-copy > p {
  max-width: 590px;
  margin: 0;
  color: var(--ds-color-muted, #5e6d84);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.72;
}

.category-archive-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  color: var(--ds-color-muted, #5e6d84);
  font-size: 13px;
}

.category-archive-summary strong {
  margin-right: 4px;
  color: var(--ds-color-brand-ink, #071a36);
  font-size: 22px;
}

.category-archive-summary a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ds-color-brand-blue, #285fc4);
  font-weight: 800;
  text-decoration: none;
}

.category-archive-summary a:hover,
.category-archive-summary a:focus-visible {
  color: var(--category-color);
}

.category-archive-hero-art {
  position: relative;
  display: grid;
  min-height: 340px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 46% 18% 46% 18%;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--category-color) 84%, #071a36), color-mix(in srgb, var(--category-color) 58%, #dceaff));
  box-shadow: 0 28px 60px rgba(33, 70, 129, .16), inset 0 1px 0 rgba(255, 255, 255, .42);
  isolation: isolate;
}

.category-archive-hero-art::before,
.category-archive-hero-art::after {
  position: absolute;
  width: 78%;
  height: 78%;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  content: "";
}

.category-archive-hero-art::before { transform: rotate(28deg) scaleX(1.5); }
.category-archive-hero-art::after { transform: rotate(-25deg) scaleX(1.5); }

.category-archive-art-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}

.category-archive-art-orbit--one { width: 75%; height: 33%; transform: rotate(35deg); }
.category-archive-art-orbit--two { width: 85%; height: 43%; transform: rotate(-35deg); }

.category-archive-art-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 110px;
  height: 110px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 52px;
  box-shadow: 0 0 0 16px rgba(255, 255, 255, .06), 0 16px 35px rgba(7, 26, 54, .16);
}

.category-archive-art-label {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.category-archive-directory {
  position: relative;
  z-index: 2;
  margin-top: -25px;
}

.category-archive-navigation {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid rgba(40, 95, 196, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(25, 48, 85, .1);
  scrollbar-width: thin;
}

.category-archive-nav-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--ds-color-muted, #5e6d84);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.category-archive-nav-link:hover,
.category-archive-nav-link:focus-visible {
  color: var(--category-color);
  transform: translateY(-1px);
}

.category-archive-nav-link.is-active {
  background: color-mix(in srgb, var(--category-color) 11%, #fff);
  color: var(--category-color);
}

.category-archive-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--category-color);
}

.category-archive-results {
  padding: 76px 0 104px;
}

.category-archive-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.category-archive-section-heading h2 {
  margin: 9px 0 0;
  color: var(--ds-color-brand-ink, #071a36);
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: -.04em;
}

.category-archive-result-count {
  padding-bottom: 5px;
  color: var(--ds-color-muted, #5e6d84);
  font-size: 13px;
  font-weight: 700;
}

.category-archive-featured {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
  min-height: 350px;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid rgba(19, 40, 76, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(25, 48, 85, .08);
}

.category-archive-featured-media,
.category-archive-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .88), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--category-color) 17%, #eef5ff), #dce9ff);
}

.category-archive-featured-media img,
.category-archive-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.category-archive-featured:hover img,
.category-archive-card:hover img { transform: scale(1.035); }

.category-archive-featured-media.is-empty::after,
.category-archive-card-media.is-empty::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: color-mix(in srgb, var(--category-color) 62%, #fff);
  content: "✦";
  font-size: 48px;
  transform: translate(-50%, -50%);
}

.category-archive-featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 99px;
  background: rgba(7, 26, 54, .58);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.category-archive-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vw, 62px);
}

.category-archive-card-meta {
  color: var(--ds-color-muted, #5e6d84);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.category-archive-featured-copy h3 {
  max-width: 570px;
  margin: 13px 0 14px;
  font-size: clamp(25px, 3.2vw, 42px);
  letter-spacing: -.045em;
  line-height: 1.08;
}

.category-archive-featured-copy h3 a,
.category-archive-card h3 a {
  color: var(--ds-color-brand-ink, #071a36);
  text-decoration: none;
}

.category-archive-featured-copy h3 a:hover,
.category-archive-featured-copy h3 a:focus-visible,
.category-archive-card h3 a:hover,
.category-archive-card h3 a:focus-visible { color: var(--category-color); }

.category-archive-featured-copy p,
.category-archive-card p {
  margin: 0;
  color: var(--ds-color-muted, #5e6d84);
  font-size: 14px;
  line-height: 1.75;
}

.category-archive-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--category-color);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.category-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.category-archive-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(19, 40, 76, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(25, 48, 85, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.category-archive-card:hover,
.category-archive-card:focus-within {
  border-color: color-mix(in srgb, var(--category-color) 24%, #fff);
  box-shadow: 0 19px 40px rgba(25, 48, 85, .11);
  transform: translateY(-3px);
}

.category-archive-card-media { aspect-ratio: 1.55 / 1; }
.category-archive-card-body { position: relative; padding: 20px 22px 24px; }
.category-archive-card h3 { margin: 9px 30px 10px 0; font-size: 19px; letter-spacing: -.025em; line-height: 1.25; }
.category-archive-card-link { position: absolute; right: 20px; bottom: 23px; color: var(--category-color); font-size: 18px; }

.category-archive-empty {
  padding: 70px 20px;
  border: 1px dashed rgba(40, 95, 196, .2);
  border-radius: 22px;
  background: rgba(255, 255, 255, .7);
  text-align: center;
}

.category-archive-empty > i { color: var(--category-color); font-size: 38px; }
.category-archive-empty h3 { margin: 15px 0 7px; color: var(--ds-color-brand-ink, #071a36); }
.category-archive-empty p { margin: 0; color: var(--ds-color-muted, #5e6d84); }

.category-archive-pagination { margin-top: 34px; }
.category-archive-pagination .page-numbers { display: flex; justify-content: center; gap: 8px; padding: 0; list-style: none; }
.category-archive-pagination a,
.category-archive-pagination span { display: inline-flex; min-width: 38px; min-height: 38px; align-items: center; justify-content: center; border-radius: 10px; color: var(--ds-color-muted, #5e6d84); font-size: 12px; font-weight: 800; text-decoration: none; }
.category-archive-pagination .current { background: var(--category-color); color: #fff; }
.category-archive-pagination a:hover,
.category-archive-pagination a:focus-visible { background: rgba(40, 95, 196, .08); color: var(--category-color); }

@media (max-width: 900px) {
  .category-archive-hero-grid,
  .category-archive-featured { grid-template-columns: 1fr; }
  .category-archive-hero-art { min-height: 280px; }
  .category-archive-featured-media { min-height: 260px; }
  .category-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .category-archive-hero { padding: 18px 0 56px; }
  .category-archive-breadcrumb { margin-bottom: 38px; }
  .category-archive-hero-copy h1 { font-size: clamp(38px, 12vw, 56px); }
  .category-archive-hero-art { min-height: 230px; border-radius: 36% 14% 36% 14%; }
  .category-archive-art-icon { width: 82px; height: 82px; font-size: 38px; }
  .category-archive-art-label { right: 18px; bottom: 17px; font-size: 9px; }
  .category-archive-navigation { margin-right: -14px; margin-left: -14px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: 0 12px 28px rgba(25, 48, 85, .07); }
  .category-archive-results { padding: 58px 0 78px; }
  .category-archive-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .category-archive-featured { border-radius: 20px; }
  .category-archive-featured-media { min-height: 205px; }
  .category-archive-featured-copy { padding: 25px 22px 28px; }
  .category-archive-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .category-archive-page *,
  .category-archive-page *::before,
  .category-archive-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}