/* ==========================================================================
   Dental Express — Premium theme v2
   Deep petrol + teal, with a restrained champagne-brass accent on a pearl base.
   Override layer: existing routes, class names, JS hooks and admin styles are
   preserved. Load this file AFTER the base stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand */
  --dx-navy: #072a30;          /* deep petrol — dark sections, footer */
  --dx-navy-2: #0f414a;
  --dx-blue: #0a7480;          /* primary teal */
  --dx-blue-2: #075a63;        /* primary hover / links on light */
  --dx-cyan: #8fdcd3;          /* mint highlight on dark */
  --dx-gold: #b08748;          /* champagne brass — used sparingly */
  --dx-gold-2: #e0bd84;        /* brass on dark */
  --dx-gold-soft: #f6ecd8;

  /* Neutrals */
  --dx-ink: #13333a;
  --dx-muted: #55707a;
  --dx-soft: #f5f9f8;          /* pearl */
  --dx-soft-2: #e9f3f1;
  --dx-line: #dbe6e6;

  /* Depth */
  --dx-shadow-sm: 0 1px 2px rgb(7 42 48 / 6%), 0 8px 22px -14px rgb(7 42 48 / 18%);
  --dx-shadow: 0 2px 4px rgb(7 42 48 / 5%), 0 22px 44px -22px rgb(7 42 48 / 24%);
  --dx-shadow-lg: 0 4px 10px rgb(7 42 48 / 6%), 0 36px 72px -30px rgb(7 42 48 / 34%);

  /* Icon tones (soft tile + strong glyph) */
  --t-teal: #0a7480;   --t-teal-bg: #dff1ef;
  --t-blue: #2b6cb0;   --t-blue-bg: #e1ecf8;
  --t-green: #178a5f;  --t-green-bg: #dbf1e7;
  --t-gold: #a4732a;   --t-gold-bg: #f7ebd3;
  --t-violet: #6353ad; --t-violet-bg: #eae7f8;
  --t-rose: #bb4d64;   --t-rose-bg: #f9e4e9;

  /* Type */
  --dx-font-body: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dx-font-display: "Fraunces", "Noto Serif Bengali", "Hind Siliguri", Georgia, serif;

  /* Legacy variable names used by the base stylesheet */
  --color-surface-subtle: var(--dx-soft);
  --color-border: var(--dx-line);
  --color-accent-light: var(--dx-soft-2);
  --container: 1200px;
  --dx-ease: cubic-bezier(.22, 1, .36, 1);
  --dx-motion: 420ms;

  /* Line icons used through CSS masks (stroke icons, tinted by background-color) */
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ic-train: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 11h14M9 21l1.5-4M15 21l-1.5-4'/%3E%3Ccircle cx='9' cy='14' r='.6'/%3E%3Ccircle cx='15' cy='14' r='.6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: 112px; }
body {
  font-family: var(--dx-font-body);
  color: var(--dx-ink);
  background: #fff;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
button, input, select, textarea { font-family: inherit; }
::selection { background: #bfe6e1; color: var(--dx-navy); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #1a9aa5;
  outline-offset: 4px;
  border-radius:var(--ux-radius-control);
}
:where(.dx-care, .dx-footer-v2, .dx-utility, .appointment-hero, .campaign-proof) :where(a, button):focus-visible { outline-color: var(--dx-gold-2); }
input, select, textarea { accent-color: var(--dx-blue); }
:where(h1, h2, h3) { text-wrap: balance; }
html:lang(bn) :where(h1, h2, h3, h4) { line-height: 1.45; letter-spacing: 0; }
html:lang(bn) :where(.dx-label, .dx-kicker, .campaign-section-label) { letter-spacing: 0; }

.container, .campaign-container { width: min(calc(100% - 64px), var(--container)); }
.section, .dx-section { padding-block: 104px; }
.dx-icon { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }

/* Headline voice: a warm serif for display type, clean sans for everything else. */
.dx-hero h1,
.dx-section-head h2, .dx-care h2, .dx-book h2,
.dx-safety-card h3,
.appointment-page .appointment-hero h1,
.treatment-directory-hero h1, .treatment-premium-copy h1,
.doctor-profile-hero h1, .contact-hero h1,
.campaign-copy h1, .dxc-title {
  font-family: var(--dx-font-display);
  color: var(--dx-navy);
  letter-spacing: -.01em;
}
html:lang(bn) :where(.dx-hero h1, .dx-section-head h2, .dx-care h2, .dx-book h2, .dx-safety-card h3, .contact-hero h1, .dxc-title) { letter-spacing: 0; }
.dx-care h2, .appointment-page .appointment-hero h1 { color:#ffffff; }

/* Section headings */
.dx-label, .dx-kicker, .campaign-section-label {
  font-size:0.875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--dx-blue-2);
}
.dx-section-head { align-items: end; gap: 56px; margin-bottom: 48px; }
.dx-section-head h2, .dx-care h2, .dx-book h2 { font-size:3rem; font-weight: 600; max-width: 730px; }
.dx-section-head > p { max-width: 400px; margin-bottom: 6px; color: var(--dx-muted); }
.dx-text-link {
  font-size:0.875rem;
  font-weight: 600;
  color: var(--dx-blue-2);
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--dx-gold);
  white-space: normal;
  transition: color 200ms ease, border-color 200ms ease;
}
.dx-text-link:hover { color: var(--dx-navy); border-color: var(--dx-blue); }

/* --------------------------------------------------------------------------
   3. Buttons — one consistent control language
   -------------------------------------------------------------------------- */
.btn, .dx-btn, .campaign-btn, .campaign-mini-cta, .dx-header-cta, .campaign-submit {
  min-height: 54px;
  padding-inline: 26px;
  border-radius:var(--ux-radius-card);
  font-size:1.0rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: transform 240ms var(--dx-ease), box-shadow 240ms ease, background 240ms ease, border-color 240ms ease, color 240ms ease;
}
.btn-primary, .dx-btn-primary, .campaign-btn-primary, .campaign-submit, .dx-header-cta {
  color:#ffffff;
  background: linear-gradient(180deg, #0f8792 0%, #096a74 100%);
  border-color: #096a74;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 12px 24px -12px rgb(9 106 116 / 65%);
}
.btn-primary:hover, .dx-btn-primary:hover, .campaign-btn-primary:hover, .campaign-submit:hover, .dx-header-cta:hover {
  color:#ffffff;
  background: linear-gradient(180deg, #0c7b86 0%, #075a63 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 16px 30px -12px rgb(9 106 116 / 70%);
  transform: translateY(-1px);
}
.btn-secondary, .btn-outline, .dx-btn-glass, .campaign-btn-soft {
  background: #fff;
  border: 1px solid #c8dcdc;
  color: var(--dx-navy);
  box-shadow: 0 1px 2px rgb(7 42 48 / 5%);
}
.btn-secondary:hover, .btn-outline:hover, .dx-btn-glass:hover, .campaign-btn-soft:hover {
  background: #eef7f6;
  border-color: #8dbcbc;
  color: var(--dx-navy);
  transform: translateY(-1px);
}
.btn-sm { min-height: 44px; font-size:0.875rem; padding-inline: 16px; border-radius:var(--ux-radius-card); }
.dx-btn > b, .dx-header-cta > b, .dx-problem-grid a > span { transition: transform 240ms var(--dx-ease); }
.dx-btn:hover > b, .dx-header-cta:hover > b, .dx-problem-grid a:hover > span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Utility bar, header, navigation
   -------------------------------------------------------------------------- */
.dx-utility { background: linear-gradient(90deg, #06242a, #0b3a42 55%, #06242a); color:#c5d5e5; }
.dx-utility-inner { min-height: 40px; font-size:0.875rem; }
.dx-utility-dot { display: none; }
.dx-utility a[href^="tel:"] { color: var(--dx-gold-2); font-weight: 600; }
.dx-utility a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--ic-phone) center / contain no-repeat;
          mask: var(--ic-phone) center / contain no-repeat;
}

.site-header {
  background: rgb(255 255 255 / 88%);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
          backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid rgb(7 42 48 / 7%);
  box-shadow: none;
  transition: box-shadow 260ms ease, background-color 260ms ease;
}
.site-header.is-scrolled { background: rgb(255 255 255 / 94%); box-shadow: 0 12px 32px -22px rgb(7 42 48 / 45%); }
.header-inner, .dx-header-inner { height: auto; min-height: 92px; gap: 22px; padding-block: 12px; transition: min-height 260ms var(--dx-ease); }
.is-scrolled .dx-header-inner { min-height: 76px; }
.dx-brand-v2 { gap: 12px; flex-shrink: 0; }
.dx-brand-v2 > img { width: 46px; height: 56px; padding: 0; background: transparent; box-shadow: none; border-radius:0; }
.dx-brand-copy b { font-family: var(--dx-font-display); font-size:1.25rem; font-weight: 600; letter-spacing: .05em; color: var(--dx-navy); }
.dx-brand-copy em { font-style: normal; color: var(--dx-blue); }
.dx-brand-copy small { font-size:0.875rem; margin-top: 5px; line-height: 1.3; letter-spacing: .02em; text-transform: none; color: var(--dx-muted); }

.desktop-nav, .dx-desktop-nav { gap: 4px; }
.nav-link { padding: 12px 12px; font-size:0.875rem; font-weight: 500; color: var(--dx-ink); border-radius:0; }
.nav-link:hover, .nav-link.is-active { background: transparent; color: var(--dx-blue-2); }
.nav-link.is-active { font-weight: 600; }
.nav-link:before { left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius:var(--ux-radius-control); background: linear-gradient(90deg, var(--dx-blue), var(--dx-gold)); transform-origin: left; }

.dx-header-actions { gap: 12px; }
.dx-header-cta {
  min-height: 48px;
  padding-inline: 20px;
  font-size:0.875rem;
  border-radius:999px;
  background: linear-gradient(180deg, #0d3f48, #072a30);
  border-color: #072a30;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 12px 24px -14px rgb(7 42 48 / 70%);
}
.dx-header-cta:hover { background: linear-gradient(180deg, #0f8792, #096a74); border-color: #096a74; }
.dx-header-cta > b { color: var(--dx-gold-2); }
.lang-switch { min-height: 46px; width: 80px; flex-shrink: 0; font-size:0.875rem; font-weight: 600; border-color: var(--dx-line); background: var(--dx-soft); box-shadow: none; }
.lang-switch span { width: 33px; height: 33px; left: 5px; background: linear-gradient(180deg, #0d3f48, #072a30); box-shadow: 0 4px 10px -4px rgb(7 42 48 / 55%); }
.lang-switch.is-english span { transform: translateX(35px); }
.mobile-toggle, .dx-mobile-toggle { box-shadow: none; border-radius:var(--ux-radius-card); border-color: var(--dx-line); background: #fff; }

.mobile-nav-drawer { visibility: hidden; background: linear-gradient(180deg, #fff 0%, #f4f9f8 100%); transition: transform 380ms var(--dx-ease), visibility 380ms; padding: 24px; }
.mobile-nav-drawer.is-open { visibility: visible; }
.mobile-nav-links { list-style: none; padding: 0; }
.mobile-nav-link { font-size:1.0rem; font-weight: 500; min-height: 54px; border-radius:var(--ux-radius-card); }
.mobile-nav-link.is-active { background: var(--t-teal-bg); color: var(--dx-blue-2); font-weight: 600; }
.mobile-nav-header .brand { display: grid; gap: 4px; }
.brand-name { font-family: var(--dx-font-display); font-size:1.0rem; font-weight: 600; letter-spacing: .04em; color: var(--dx-navy); }
.brand-tagline { font-size:0.875rem; color: var(--dx-muted); }
.mobile-nav-footer { display: grid; gap: 12px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   5. Hero — an arched clinic card is the one memorable shape on the page
   -------------------------------------------------------------------------- */
.dx-hero {
  overflow: hidden;
  padding: 72px 0 0;
  background:
    radial-gradient(60% 70% at 92% 8%, rgb(10 116 128 / 11%), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgb(176 135 72 / 9%), transparent 65%),
    linear-gradient(180deg, #f8fbfb 0%, #fff 100%);
}
.dx-orb { display: none; }
.dx-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 72px; min-height: 520px; padding-bottom: 60px; }
.dx-kicker { color: var(--dx-blue-2); display: inline-flex; align-items: center; gap: 12px; }
.dx-kicker > span { background: var(--dx-gold); width: 28px; height: 2px; border-radius:var(--ux-radius-control); }
.dx-hero h1 { font-size:3rem; margin: 22px 0 22px; line-height: 1.16; font-weight: 600; letter-spacing: -.02em; }
.dx-hero h1 span { display: block; }
.dx-hero h1 .dx-hero-accent { color: var(--dx-blue); }
.dx-hero-copy > p { font-size:1.0rem; line-height: 1.95; max-width: 540px; color: var(--dx-muted); }
.dx-hero-actions { margin: 32px 0 24px; gap: 14px; }

.dx-hero-meta { display: grid; gap: 12px; font-size:0.875rem; color: var(--dx-muted); }
.dx-hero-meta > span { display: flex; align-items: center; gap: 12px; }
.dx-hero-meta .dx-icon {
  width: 32px; height: 32px; padding: 7px;
  border-radius:50%;
  color: var(--t-teal);
  background: var(--t-teal-bg);
}
.dx-hero-meta > span:nth-child(2) .dx-icon { color: var(--t-gold); background: var(--t-gold-bg); }
.dx-hero-meta > span:nth-child(3) .dx-icon { color: var(--t-blue); background: var(--t-blue-bg); }
.dx-hero-meta > span:nth-child(4) .dx-icon { color: var(--t-green); background: var(--t-green-bg); }

.dx-trust-row { gap: 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--dx-line); max-width: 420px; }
.dx-trust-row > div { flex: 1; }
.dx-trust-row strong { font-family: var(--dx-font-display); font-size:1.125rem; font-weight: 600; color: var(--dx-navy); }
.dx-trust-row span { font-size:0.875rem; color: var(--dx-muted); }

.dx-clinic-card {
  padding: 0;
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(143 220 211 / 18%), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgb(224 189 132 / 10%), transparent 65%),
    linear-gradient(165deg, #0e4049 0%, #072a30 72%);
  border: 0;
  border-radius:var(--ux-radius-card);
  box-shadow: inset 0 0 0 1px rgb(224 189 132 / 20%), var(--dx-shadow-lg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow: hidden;
}
.dx-clinic-card:after { display: none; }
.dx-clinic-top { padding: 34px 30px 0 70px; color:#c5d5e5; font-size:0.875rem; letter-spacing: .08em; }
.dx-clinic-top span:first-child { color: var(--dx-gold-2); }
.dx-brand-stage { position: relative; min-height: 340px; padding: 28px 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.dx-brand-stage > p { color:#c5d5e5; margin: 0 0 16px; font-size:0.875rem; }
.dx-signature { font-family: var(--dx-font-display); color:#ffffff; font-size:3rem; line-height: 1.06; letter-spacing: -.035em; font-weight: 500; }
.dx-signature span { display: block; }
.dx-signature span:nth-child(2) { color: var(--dx-gold-2); }
.dx-signature span:last-child { color:#c5d5e5; }
.dx-brand-seal { position: absolute; right: 32px; bottom: 36px; width: 84px; height: 108px; object-fit: contain; border-radius:var(--ux-radius-card); background: #fff; padding: 5px; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 55%); }
.dx-clinic-note { margin: 0; padding: 24px 30px; border: 0; border-top: 1px solid rgb(224 189 132 / 22%); background: rgb(255 255 255 / 5%); border-radius:0; gap: 16px; }
.dx-note-icon { width: 46px; height: 46px; border-radius:var(--ux-radius-card); background: linear-gradient(145deg, rgb(224 189 132 / 26%), rgb(224 189 132 / 8%)); color: var(--dx-gold-2); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgb(224 189 132 / 30%); }
.dx-clinic-note strong { color:#ffffff; font-weight: 500; font-size:1.0rem; line-height: 1.5; }
.dx-clinic-note small { color:#c5d5e5; font-size:0.875rem; margin-top: 5px; line-height: 1.7; }
.dx-logo-stage.has-custom-image { margin: 20px 20px 0; min-height: 360px; border-radius:var(--ux-radius-card); background: var(--dx-soft-2); }
.dx-logo-stage img.dx-home-hero-image { width: 100%; height: 360px; border-radius:var(--ux-radius-card); object-fit: cover; }

/* Trust strip: a floating pearl bar with brass checkmarks */
.dx-proof-strip {
  transform: none;
  background: #fff;
  color: var(--dx-navy);
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  box-shadow: var(--dx-shadow);
  padding-block: 20px;
  margin-bottom: 44px;
}
.dx-proof-strip > div { padding: 8px 26px; border-right: 1px solid var(--dx-line); text-align: left; }
.dx-proof-strip > div:first-child { padding-left: 26px; }
.dx-proof-strip > div:last-child { border-right: 0; }
.dx-proof-strip strong { font-size:1.0rem; font-weight: 600; }
.dx-proof-strip strong::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 9px;
  vertical-align: -4px;
  border-radius:50%;
  background-color: var(--dx-gold);
  -webkit-mask: var(--ic-check) center / 78% no-repeat;
          mask: var(--ic-check) center / 78% no-repeat;
}
.dx-proof-strip span { color: var(--dx-muted); font-size:0.875rem; margin-top: 5px; }

/* --------------------------------------------------------------------------
   6. Common concerns — colour-coded tiles
   -------------------------------------------------------------------------- */
.dx-problems { padding-top: 96px; }
.dx-problem-grid { gap: 16px; border: 0; border-radius:0; overflow: visible; }
.dx-problem-grid a,
.dx-problem-grid a:nth-child(3n),
.dx-problem-grid a:nth-child(n+4) {
  --tone: var(--t-teal); --tone-bg: var(--t-teal-bg);
  min-height: 92px;
  padding: 20px 22px;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  background: #fff;
  box-shadow: none;
  transition: border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
}
.dx-problem-grid a:nth-child(6n+2) { --tone: var(--t-blue);   --tone-bg: var(--t-blue-bg); }
.dx-problem-grid a:nth-child(6n+3) { --tone: var(--t-gold);   --tone-bg: var(--t-gold-bg); }
.dx-problem-grid a:nth-child(6n+4) { --tone: var(--t-green);  --tone-bg: var(--t-green-bg); }
.dx-problem-grid a:nth-child(6n+5) { --tone: var(--t-violet); --tone-bg: var(--t-violet-bg); }
.dx-problem-grid a:nth-child(6n+6) { --tone: var(--t-rose);   --tone-bg: var(--t-rose-bg); }
.dx-problem-grid a:hover { background: #fff; border-color: color-mix(in srgb, var(--tone) 45%, #fff); box-shadow: var(--dx-shadow-sm); transform: none; }
.dx-problem-grid i {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius:var(--ux-radius-card);
  font-style: normal;
  font-size:0.875rem;
  font-weight: 700;
  color: var(--tone);
  background: var(--tone-bg);
}
.dx-problem-grid b { font-size:1.0rem; font-weight: 600; color: var(--dx-ink); }
.dx-problem-grid a > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius:50%; color: var(--tone); background: var(--tone-bg); }

/* --------------------------------------------------------------------------
   7. Services
   -------------------------------------------------------------------------- */
.dx-services, .dx-cases { background: linear-gradient(180deg, var(--dx-soft) 0%, #edf5f4 100%); }
.dx-service-grid { gap: 24px; }
.dx-service-card {
  --tone: var(--t-teal); --tone-bg: var(--t-teal-bg);
  position: relative;
  min-height: 292px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  box-shadow: var(--dx-shadow-sm);
  overflow: hidden;
  transition: transform var(--dx-motion) var(--dx-ease), box-shadow var(--dx-motion) var(--dx-ease), border-color var(--dx-motion) ease;
}
.dx-service-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--tone), transparent);
  opacity: .9;
}
.dx-service-card:nth-child(6n+2) { --tone: var(--t-blue);   --tone-bg: var(--t-blue-bg); }
.dx-service-card:nth-child(6n+3) { --tone: var(--t-gold);   --tone-bg: var(--t-gold-bg); }
.dx-service-card:nth-child(6n+4) { --tone: var(--t-green);  --tone-bg: var(--t-green-bg); }
.dx-service-card:nth-child(6n+5) { --tone: var(--t-violet); --tone-bg: var(--t-violet-bg); }
.dx-service-card:nth-child(6n+6) { --tone: var(--t-rose);   --tone-bg: var(--t-rose-bg); }
.dx-service-number {
  position: static; align-self: flex-start;
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: 12px;
  border-radius:var(--ux-radius-card);
  font-size:0.875rem; font-weight: 700; letter-spacing: .03em;
  color: var(--tone); background: var(--tone-bg);
  border: 0;
}
.dx-service-card h3 { font-size:1.25rem; font-weight: 600; margin: 24px 0 12px; color: var(--dx-navy); }
.dx-service-card p { font-size:1.0rem; line-height: 1.85; color: var(--dx-muted); }
.dx-service-card > div:last-child { margin-top: auto; border-top: 1px solid var(--dx-line); padding-top: 18px; font-size:0.875rem; font-weight: 600; color: var(--tone); flex-wrap: wrap; }
.dx-service-card > a { font-size:0.875rem; font-weight: 600; margin-top: auto; color: var(--tone); }

/* --------------------------------------------------------------------------
   8. Care process (dark) and safety card
   -------------------------------------------------------------------------- */
.dx-care {
  position: relative;
  color:#ffffff;
  background:
    radial-gradient(60% 80% at 92% 0%, rgb(20 130 142 / 34%), transparent 62%),
    radial-gradient(45% 60% at 0% 100%, rgb(224 189 132 / 10%), transparent 65%),
    #072a30;
}
.dx-care-grid { gap: 84px; align-items: center; }
.dx-care .dx-label { color: var(--dx-gold-2); }
.dx-care-copy > p { color:#c5d5e5; font-size:1.0rem; line-height: 1.95; }
.dx-steps { gap: 0 32px; margin-top: 32px; }
.dx-steps > div { padding: 24px 0; border: 0; border-top: 1px solid rgb(224 189 132 / 26%); border-radius:0; background: transparent; gap: 16px; }
.dx-steps b { font-family: var(--dx-font-display); color: var(--dx-gold-2); font-size:1.0rem; padding-top: 2px; font-weight: 600; }
.dx-steps strong { font-size:1.0rem; font-weight: 600; color:#ffffff; }
.dx-steps small { color:#c5d5e5; font-size:0.875rem; margin-top: 6px; }

.dx-safety-card {
  position: relative;
  padding: 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f8f7 100%);
  border-radius:var(--ux-radius-card);
  box-shadow: inset 0 3px 0 var(--dx-gold), var(--dx-shadow-lg);
}
.dx-safety-card .dx-label { color: var(--dx-blue-2); }
.dx-shield { height: 56px; width: 56px; border-radius:var(--ux-radius-card); background: linear-gradient(145deg, var(--t-gold-bg), #fff); color: var(--t-gold); margin-bottom: 26px; box-shadow: inset 0 0 0 1px rgb(164 115 42 / 22%); }
.dx-safety-card h3 { font-size:1.5rem; font-weight: 600; margin: 12px 0 20px; }
.dx-safety-card li { padding-block: 17px; font-size:1.0rem; border-color: #d6e4e3; color: var(--dx-ink); }
.dx-safety-card li:last-child { border: 0; }
.dx-safety-card li:before { font-size:0.875rem; color: var(--t-green); }

/* --------------------------------------------------------------------------
   9. Doctors, cases, reviews
   -------------------------------------------------------------------------- */
.dx-doctor-grid { gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dx-doctor-card { border: 0; border-radius:var(--ux-radius-card); box-shadow: none; background: transparent; }
.dx-doctor-photo {
  aspect-ratio: 1 / 1.08;
  border-radius:var(--ux-radius-card);
  background: linear-gradient(160deg, #e6f1f0, #d6e8e6);
  overflow: hidden;
  box-shadow: var(--dx-shadow-sm);
}
.dx-doctor-photo img, .dx-case-card img, .treatment-directory-media img { transition: transform 650ms var(--dx-ease); }
.dx-doctor-card > div:last-child { padding: 22px 4px 8px; }
.dx-doctor-card h3 { font-size:1.125rem; font-weight: 600; color: var(--dx-navy); }
.dx-doctor-card p { font-size:0.875rem; font-weight: 600; color: var(--dx-blue-2); }
.dx-doctor-card small { font-size:0.875rem; line-height: 1.7; color: var(--dx-muted); }
.dx-doctor-card a { font-size:0.875rem; font-weight: 600; color: var(--dx-blue-2); border-bottom: 1.5px solid var(--dx-gold); padding-bottom: 4px; }

.dx-case-grid, .dx-review-grid { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.dx-case-card { border: 1px solid var(--dx-line); padding: 12px; border-radius:var(--ux-radius-card); background: #fff; box-shadow: var(--dx-shadow-sm); }
.dx-case-card img { border-radius:var(--ux-radius-card); }
.dx-case-card h3 { font-size:1.125rem; line-height: 1.65; padding: 18px 10px 0; color: var(--dx-navy); }
.dx-case-card > span { padding: 3px 10px 12px; font-size:0.875rem; color: var(--dx-muted); }

.dx-review-card {
  position: relative;
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  padding: 34px 30px 30px;
  background: #fff;
  box-shadow: var(--dx-shadow-sm);
}
.dx-review-card::before {
  content: "\201C";
  position: absolute; top: 14px; right: 26px;
  font-family: var(--dx-font-display);
  font-size:3.0rem; line-height: 1;
  color:#c5d5e5;
  pointer-events: none;
}
.dx-review-card blockquote { font-size:1.0rem; line-height: 1.95; margin: 20px 0 26px; color: var(--dx-ink); }
.dx-review-card strong, .dx-review-card small { display: block; }
.dx-review-card strong { color: var(--dx-navy); }
.dx-review-card small { font-size:0.875rem; margin-top: 5px; color: var(--dx-muted); }
.dx-stars { color:#b42318; letter-spacing: 3px; }
.dx-empty-note { padding: 24px 0; border-top: 1px solid var(--dx-line); font-size:1.0rem; color: var(--dx-muted); }

/* --------------------------------------------------------------------------
   10. Booking section + forms
   -------------------------------------------------------------------------- */
.dx-book {
  background:
    radial-gradient(50% 60% at 100% 0%, rgb(10 116 128 / 10%), transparent 65%),
    linear-gradient(180deg, #f3f9f8 0%, #e5f1ef 100%);
  border-top: 1px solid #d8e8e6;
}
.dx-book-grid { gap: 80px; align-items: start; }
.dx-book-copy { padding-top: 22px; }
.dx-book-copy > p { font-size:1.0rem; line-height: 1.95; color: var(--dx-muted); }

.dx-contact-line { --tone: var(--t-teal); --tone-bg: var(--t-teal-bg); gap: 18px; margin-top: 24px; }
.dx-contact-line:nth-child(3n+2) { --tone: var(--t-blue); --tone-bg: var(--t-blue-bg); }
.dx-contact-line:nth-child(3n+3) { --tone: var(--t-gold); --tone-bg: var(--t-gold-bg); }
.dx-contact-line > span {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius:var(--ux-radius-card);
  color: var(--tone);
  background: linear-gradient(145deg, #fff, var(--tone-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--tone) 60%, transparent);
  flex-shrink: 0;
}
.dx-contact-line strong { font-size:1.0rem; font-weight: 600; color: var(--dx-navy); }
.dx-contact-line small { font-size:0.875rem; margin-top: 3px; color: var(--dx-muted); }

.dx-book-form { padding: 38px; gap: 22px 18px; background: #fff; border: 1px solid #d9e8e6; border-radius:var(--ux-radius-card); box-shadow: var(--dx-shadow-lg); }
.dx-book-form label { font-size:0.875rem; font-weight: 600; gap: 9px; color: var(--dx-navy); }
.dx-book-form input, .dx-book-form select, .dx-book-form textarea, .form-control {
  font-size:1.0rem; min-height: 54px;
  color: var(--dx-ink);
  background: #f8fbfb;
  border: 1px solid #cfdfdf;
  border-radius:var(--ux-radius-card);
  padding: 12px 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.dx-book-form input::placeholder, .dx-book-form textarea::placeholder, .form-control::placeholder { color:#c5d5e5; }
.dx-book-form input:focus, .dx-book-form select:focus, .dx-book-form textarea:focus, .form-control:focus {
  background: #fff; border-color: var(--dx-blue); outline: 0;
  box-shadow: 0 0 0 4px rgb(10 116 128 / 13%);
}
.dx-book-form .dx-btn { width: 100%; }
.dx-form-footnote { font-size:0.875rem; line-height: 1.7; margin: -8px 0 0; text-align: center; color: var(--dx-muted); }

/* Appointment page */
.appointment-page .appointment-hero {
  background:
    radial-gradient(60% 90% at 90% 0%, rgb(20 130 142 / 34%), transparent 62%),
    radial-gradient(40% 60% at 0% 100%, rgb(224 189 132 / 10%), transparent 65%),
    #072a30;
  padding: 68px 0 104px;
  text-align: center;
}
.appointment-page .appointment-hero .dx-label { color: var(--dx-gold-2); }
.appointment-page .appointment-hero h1 { font-size:3rem; font-weight: 600; margin-block: 16px; }
.appointment-page .appointment-hero p { color:#c5d5e5; }
.booking-card-container { position: relative; max-width: 800px; margin: -48px auto 80px; padding: 44px; background: #fff; border: 1px solid var(--dx-line); border-radius:var(--ux-radius-card); box-shadow: var(--dx-shadow-lg); }
.appointment-page #publicAppointmentForm :is(input:not([type="hidden"]), select, textarea) {
  width: 100%; min-height: 54px; padding: 12px 16px;
  font-size:1.0rem; line-height: 1.65; color: var(--dx-ink);
  background: #f8fbfb; border: 1px solid #cfdfdf; border-radius:var(--ux-radius-card);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.appointment-page #publicAppointmentForm :is(input, select, textarea):focus { background: #fff; border-color: var(--dx-blue); box-shadow: 0 0 0 4px rgb(10 116 128 / 13%); outline: 0; }
.appointment-page #publicAppointmentForm h3:not(:first-of-type) { padding-top: 28px; border-top: 1px solid var(--dx-line); }
.confirmation-receipt-box { padding: 30px; background: #eef8f2; border: 1px solid #bfe0cd; border-radius:var(--ux-radius-card); text-align: center; }
.appointment-success-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius:50%; background: linear-gradient(145deg, #e5f6ec, #cdebda); color:#15803d; margin: 0 auto 20px; box-shadow: 0 10px 22px -12px rgb(20 116 79 / 55%); }
.appointment-success-icon .dx-icon { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   11. Inner pages: treatments, doctors, blog, FAQ
   -------------------------------------------------------------------------- */
.treatment-directory-hero, .treatment-premium-hero, .doctor-profile-hero, .contact-hero {
  position: relative;
  padding-block: 76px;
  background:
    radial-gradient(50% 90% at 100% 0%, rgb(10 116 128 / 12%), transparent 65%),
    radial-gradient(40% 70% at 0% 100%, rgb(176 135 72 / 10%), transparent 65%),
    linear-gradient(180deg, #f3f9f8, #e9f3f1);
  border-bottom: 1px solid var(--dx-line);
}
.treatment-directory-hero::after, .treatment-premium-hero::after, .doctor-profile-hero::after, .contact-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dx-gold), transparent);
  opacity: .7; pointer-events: none;
}
.treatment-directory-hero h1, .treatment-premium-copy h1, .contact-hero h1 { font-weight: 600; font-size:3rem; }
.contact-hero p { color: var(--dx-muted); max-width: 640px; }
.treatment-directory-grid { gap: 26px; }
.treatment-directory-card, .doctor-public-card, .contact-info-card, .doctor-content-block, .treatment-content-section {
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  box-shadow: var(--dx-shadow-sm);
  transition: transform var(--dx-motion) var(--dx-ease), box-shadow var(--dx-motion) ease, border-color var(--dx-motion) ease;
}
.treatment-directory-body { padding: 28px; }
.treatment-directory-body p, .treatment-content-main p, .treatment-long-copy { font-size:1.0rem; line-height: 1.95; }
.treatment-directory-meta, .booking-card-meta, .treatment-price-disclaimer { font-size:0.875rem; }
.treatment-search-card { border-radius:var(--ux-radius-card); border: 1px solid var(--dx-line); box-shadow: var(--dx-shadow); }
.treatment-search-card input, .treatment-search-card select { min-height: 52px; font-size:1.0rem; border-radius:var(--ux-radius-card); }
.treatment-booking-card, .doctor-sticky-cta {
  background: radial-gradient(70% 80% at 100% 0%, rgb(20 130 142 / 30%), transparent 65%), #072a30;
  border-radius:var(--ux-radius-card);
  box-shadow: inset 0 0 0 1px rgb(224 189 132 / 20%), var(--dx-shadow-lg);
}
.treatment-booking-card .btn-secondary, .doctor-sticky-cta .btn-secondary { color: var(--dx-navy); }
.treatment-faq-list details { background: #fff; border-color: var(--dx-line); border-radius:var(--ux-radius-card); transition: background-color 240ms, border-color 240ms; }
.treatment-faq-list details[open] { background: #eef7f6; border-color: #b8d8d5; }
.treatment-faq-list summary { min-height: 60px; padding: 18px 22px; font-size:1.0rem; font-weight: 600; line-height: 1.65; color: var(--dx-navy); }
.treatment-faq-list summary span { transition: transform 240ms var(--dx-ease); color: var(--dx-gold); }
.treatment-faq-list details[open] summary span { transform: rotate(45deg); }
.treatment-faq-list details p { padding: 0 22px 22px; }
.process-number { background: var(--t-teal-bg); color: var(--dx-blue-2); border-radius:50%; font-weight: 700; }
.process-title-row span { font-size:0.875rem; }
.doctor-public-card .doctor-card-footer { flex-wrap: wrap; gap: 12px; }
.doctor-public-card .doctor-card-footer > a { min-height: 46px; }
.blog-article-content { font-size:1.0rem; line-height: 2; }

/* --------------------------------------------------------------------------
   12. Contact page
   12a. Works with the existing markup (contact-hero / contact-info-card).
   12b. .dxc-* is the new, drop-in component (see contact-section.html).
   -------------------------------------------------------------------------- */
.contact-info-card { --tone: var(--t-teal); --tone-bg: var(--t-teal-bg); padding: 22px 24px; }
.contact-info-card:nth-child(5n+2) { --tone: var(--t-blue);   --tone-bg: var(--t-blue-bg); }
.contact-info-card:nth-child(5n+3) { --tone: var(--t-green);  --tone-bg: var(--t-green-bg); }
.contact-info-card:nth-child(5n+4) { --tone: var(--t-gold);   --tone-bg: var(--t-gold-bg); }
.contact-info-card:nth-child(5n+5) { --tone: var(--t-violet); --tone-bg: var(--t-violet-bg); }
.contact-info-card :is(span, div, i)[class*="icon"]:not(.dx-icon) {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: 0 0 auto;
  border-radius:var(--ux-radius-card);
  font-size:1.25rem; line-height: 1;
  color: var(--tone);
  background: linear-gradient(145deg, #fff, var(--tone-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
}
.contact-info-card .dx-icon { width: 24px; height: 24px; }
.contact-info-card h3, .contact-info-card h4, .contact-info-card strong { color: var(--dx-navy); font-weight: 600; }
.contact-info-card p, .contact-info-card small { color: var(--dx-muted); }

/* 12b — component */
.dxc-panel { display: grid; gap: 16px; }
.dxc-title { font-size:3rem; font-weight: 600; margin: 0 0 6px; }
.dxc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dxc-item {
  --tone: var(--t-teal); --tone-bg: var(--t-teal-bg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius:var(--ux-radius-card);
  box-shadow: var(--dx-shadow-sm);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.dxc-item:hover { border-color: color-mix(in srgb, var(--tone) 40%, #fff); box-shadow: var(--dx-shadow); }
.dxc-blue   { --tone: var(--t-blue);   --tone-bg: var(--t-blue-bg); }
.dxc-green  { --tone: var(--t-green);  --tone-bg: var(--t-green-bg); }
.dxc-gold   { --tone: var(--t-gold);   --tone-bg: var(--t-gold-bg); }
.dxc-violet { --tone: var(--t-violet); --tone-bg: var(--t-violet-bg); }
.dxc-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius:var(--ux-radius-card);
  color: var(--tone);
  background: linear-gradient(145deg, #fff 0%, var(--tone-bg) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--tone) 70%, transparent);
}
.dxc-icon svg { width: 27px; height: 27px; display: block; }
.dxc-body { min-width: 0; }
.dxc-body small { display: block; font-size:0.875rem; font-weight: 600; color: var(--tone); }
.dxc-body strong { display: block; margin-top: 2px; font-size:1.0rem; font-weight: 600; line-height: 1.6; color: var(--dx-ink); }
.dxc-body em { display: block; margin-top: 2px; font-style: normal; font-size:0.875rem; line-height: 1.7; color: var(--dx-muted); }
.dxc-phone {
  display: inline-block; margin-top: 2px;
  font-family: var(--dx-font-display);
  font-size:1.5rem; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--dx-navy);
}
.dxc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 4px 12px;
  font-size:0.875rem; font-weight: 600;
  color:#15803d; background: var(--t-green-bg);
  border-radius:999px;
}
.dxc-badge::before { content: ""; width: 7px; height: 7px; border-radius:50%; background: #1fa971; box-shadow: 0 0 0 3px rgb(31 169 113 / 20%); }
.dxc-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  font-size:0.875rem; font-weight: 600; white-space: nowrap;
  color: var(--tone); background: var(--tone-bg);
  border-radius:999px;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms var(--dx-ease);
}
.dxc-action:hover { color:#ffffff; background: var(--tone); transform: translateY(-1px); }
.dxc-route {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 24px;
  color:#c5d5e5;
  background: radial-gradient(80% 100% at 100% 0%, rgb(20 130 142 / 32%), transparent 65%), #072a30;
  border-radius:var(--ux-radius-card);
  box-shadow: inset 0 0 0 1px rgb(224 189 132 / 22%);
}
.dxc-route .dxc-icon { color: var(--dx-gold-2); background: linear-gradient(145deg, rgb(224 189 132 / 26%), rgb(224 189 132 / 8%)); box-shadow: inset 0 0 0 1px rgb(224 189 132 / 30%); }
.dxc-route h3 { margin: 2px 0 6px; font-size:1.125rem; font-weight: 600; color:#ffffff; }
.dxc-route p { margin: 0; font-size:0.875rem; line-height: 1.85; }

/* --------------------------------------------------------------------------
   13. Campaign pages
   -------------------------------------------------------------------------- */
.campaign-page { background: #fff; }
.campaign-header { background: #fff; border-bottom: 1px solid var(--dx-line); }
.campaign-hero { background: radial-gradient(50% 80% at 100% 0%, rgb(10 116 128 / 12%), transparent 65%), #f1f8f7; }
.campaign-copy h1 { font-weight: 600; letter-spacing: -.015em; }
.campaign-offer-card { border-radius:var(--ux-radius-card); box-shadow: var(--dx-shadow-lg); border-color: #d5e5e3; }
.campaign-proof { background: radial-gradient(60% 90% at 100% 0%, rgb(20 130 142 / 30%), transparent 62%), #072a30; }
.campaign-book { background: linear-gradient(180deg, #f3f9f8, #e5f1ef); }
.campaign-form { border-radius:var(--ux-radius-card); border-color: #d7e6e4; box-shadow: var(--dx-shadow); }
.campaign-form label, .campaign-privacy, .campaign-micro-trust { font-size:0.875rem; }
.campaign-form input, .campaign-form select, .campaign-form textarea { min-height: 52px; font-size:1.0rem; border-radius:var(--ux-radius-card); background: #f8fbfb; border-color: #cfdfdf; }
.campaign-form input:focus, .campaign-form select:focus, .campaign-form textarea:focus { border-color: var(--dx-blue); box-shadow: 0 0 0 4px rgb(10 116 128 / 13%); outline: 0; }

/* --------------------------------------------------------------------------
   14. Footer and touch action bar
   -------------------------------------------------------------------------- */
.dx-footer-v2 {
  position: relative;
  padding-top: 64px;
  background:
    radial-gradient(50% 70% at 100% 0%, rgb(20 130 142 / 24%), transparent 62%),
    #061f24;
}
.dx-footer-v2::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--dx-gold) 50%, transparent 100%);
  opacity: .85;
}
.dx-footer-top { grid-template-columns: .9fr 1.1fr; gap: 60px; padding-bottom: 44px; }
.dx-footer-logo { gap: 14px; }
.dx-footer-logo img { width: 52px; height: 64px; border-radius:var(--ux-radius-control); padding: 3px; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 60%); }
.dx-footer-logo b { font-family: var(--dx-font-display); font-size:1.25rem; letter-spacing: .05em; color:#ffffff; }
.dx-footer-logo small { font-size:0.875rem; line-height: 1.5; color: var(--dx-gold-2); }
.dx-footer-intro p { font-size:1.0rem; line-height: 1.95; margin-block: 24px; color:#c5d5e5; }
.dx-footer-links { gap: 28px; }
.dx-footer-links h3 { font-size:1.0rem; font-weight: 600; margin-bottom: 18px; color:#ffffff; }
.dx-footer-links a, .dx-footer-links span { font-size:0.875rem; line-height: 1.85; color:#c5d5e5; }
.dx-footer-links a { transition: color 200ms ease; }
.dx-footer-links a:hover { color: var(--dx-cyan); }

/* Coloured line icons in the address column */
.dx-footer-links > div:nth-child(2) span,
.dx-footer-links > div:nth-child(2) a[href^="tel:"] { display: block; position: relative; padding-left: 32px; margin-bottom: 6px; }
.dx-footer-links > div:nth-child(2) span::before,
.dx-footer-links > div:nth-child(2) a[href^="tel:"]::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px;
  background-color: var(--dx-gold-2);
  -webkit-mask: var(--ic-pin) center / contain no-repeat;
          mask: var(--ic-pin) center / contain no-repeat;
}
.dx-footer-links > div:nth-child(2) span:nth-of-type(2)::before { background-color: #b8a6f0; -webkit-mask-image: var(--ic-train); mask-image: var(--ic-train); }
.dx-footer-links > div:nth-child(2) span:nth-of-type(3)::before { background-color: #86d7b4; -webkit-mask-image: var(--ic-clock); mask-image: var(--ic-clock); }
.dx-footer-links > div:nth-child(2) a[href^="tel:"]::before { background-color: var(--dx-cyan); -webkit-mask-image: var(--ic-phone); mask-image: var(--ic-phone); }
.dx-footer-links > div:nth-child(2) a[href^="tel:"] { color:#ffffff; font-weight: 600; font-size:1.0rem; }

.dx-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dx-footer-actions a { font-size:0.875rem; font-weight: 600; border-radius:999px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(224 189 132 / 34%); color:#ffffff; transition: background-color 220ms ease, border-color 220ms ease; }
.dx-footer-actions a:hover { background: rgb(224 189 132 / 14%); border-color: var(--dx-gold-2); }
.dx-footer-badges { grid-column: 1 / -1; gap: 14px 28px; }
.dx-footer-badges span { display: inline-flex; align-items: center; gap: 9px; padding: 0; font-size:0.875rem; border: 0; background: transparent; color:#c5d5e5; }
.dx-footer-badges span::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 auto;
  background-color: var(--dx-gold-2);
  -webkit-mask: var(--ic-check) center / contain no-repeat;
          mask: var(--ic-check) center / contain no-repeat;
}
.dx-footer-bottom { font-size:0.875rem; padding-block: 24px; border-color: rgb(255 255 255 / 10%); }
.dx-footer-bottom span { color:#c5d5e5; }

.bottom-action-bar {
  background: rgb(255 255 255 / 94%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid #d3e3e3;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 30px -18px rgb(7 42 48 / 35%);
}
.bottom-action-item { font-size:0.875rem; font-weight: 600; min-height: 66px; gap: 5px; color: var(--dx-navy); }
.bottom-action-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius:var(--ux-radius-card); color: var(--t-teal); background: var(--t-teal-bg); }
.bottom-action-item:nth-child(2) .bottom-action-icon { color: var(--t-green); background: var(--t-green-bg); }
.bottom-action-item.highlight { background: linear-gradient(180deg, #0f8792, #096a74); color:#ffffff; }
.bottom-action-item.highlight .bottom-action-icon { color:#ffffff; background: rgb(255 255 255 / 18%); }
.bottom-action-item.highlight .dx-icon { color:#ffffff; }

/* --------------------------------------------------------------------------
   15. Phone links: no stray underline / border / highlight anywhere
   -------------------------------------------------------------------------- */
a[href^="tel:"],
a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[x-apple-data-detectors],
a[x-apple-data-detectors]:hover {
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* Plain text phone links only — real buttons keep their own borders and shadows. */
a[href^="tel:"]:not([class*="btn"], [class*="cta"], [class*="action"], [class*="bottom"]) {
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   16. Motion (reveal hooks are unchanged)
   -------------------------------------------------------------------------- */
.reveal, .js-enhanced .reveal { animation: none; }
.reveal[data-reveal-ready] { transition: opacity 620ms var(--dx-ease), transform 620ms var(--dx-ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal[data-reveal-ready]:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.reveal[data-reveal-ready].is-visible { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .dx-service-card:hover, .treatment-directory-card:hover, .doctor-public-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone, var(--dx-blue)) 40%, #fff); box-shadow: var(--dx-shadow); }
  .dx-doctor-card:hover { transform: none; box-shadow: none; }
  .dx-doctor-card:hover img, .dx-case-card:hover img, .treatment-directory-card:hover .treatment-directory-media img { transform: scale(1.035); }
  .dx-case-card { transition: box-shadow var(--dx-motion) ease; }
  .dx-case-card:hover { box-shadow: var(--dx-shadow); }
}
@media (hover: none) {
  .btn:hover, .dx-btn:hover, .dx-header-cta:hover, .dx-service-card:hover, .dx-doctor-card:hover, .doctor-public-card:hover, .treatment-directory-card:hover, .dxc-action:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .desktop-nav, .dx-desktop-nav { display: none; }
  .mobile-toggle, .dx-mobile-toggle { display: grid; place-items: center; }
  .dx-hero-grid { gap: 44px; }
  .dx-care-grid, .dx-book-grid { gap: 44px; }
  .dx-footer-top { grid-template-columns: 1fr; gap: 36px; }
  .dx-footer-intro { max-width: 620px; }
}
@media (max-width: 900px) {
  .section, .dx-section { padding-block: 76px; }
  .dx-hero { padding-top: 46px; }
  .dx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .dx-hero-copy { max-width: 660px; }
  .dx-hero h1 { font-size:3rem; }
  .dx-hero-visual { width: 100%; max-width: 600px; justify-self: center; }
  .dx-brand-stage { min-height: 300px; }
  .dx-signature { font-size:3.0rem; }
  .dx-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .dx-proof-strip > div:nth-child(2n) { border-right: 0; }
  .dx-proof-strip > div:nth-child(3) { padding-left: 26px; }
  .dx-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-care-grid, .dx-book-grid { grid-template-columns: 1fr; }
  .dx-safety-card { max-width: 620px; }
  .dx-book-copy { padding-top: 0; }
  .dx-section-head { flex-direction: column; align-items: start; gap: 16px; }
  .dx-section-head > p { max-width: 580px; }
  .dx-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dxc-item { grid-template-columns: auto minmax(0, 1fr); }
  .dxc-item .dxc-action { grid-column: 1 / -1; width: 100%; min-height: 48px; }
}
@media (max-width: 600px) {
  .container, .campaign-container { width: min(calc(100% - 40px), var(--container)); }
  .section, .dx-section { padding-block: 60px; }
  .dx-utility { display: none; }
  .dx-header-inner, .is-scrolled .dx-header-inner { min-height: 76px; padding-block: 10px; gap: 10px; }
  .dx-brand-copy b { font-size:1.0rem; }
  .dx-brand-copy small { font-size:0.875rem; letter-spacing: 0; }
  .dx-brand-v2 { gap: 8px; }
  .dx-brand-v2 > img { width: 34px; height: 46px; }
  .dx-header-cta { display: none; }
  .dx-header-actions { gap: 8px; }
  .lang-switch { width: 76px; }
  .lang-switch span { width: 31px; height: 31px; }
  .lang-switch.is-english span { transform: translateX(32px); }
  .dx-mobile-toggle { width: 44px; min-height: 44px; }
  .dx-hero { padding-top: 32px; }
  .dx-hero h1 { font-size:3rem; margin-top: 20px; }
  .dx-hero-copy > p { font-size:1.0rem; }
  .dx-hero-grid { padding-bottom: 34px; gap: 32px; }
  .dx-hero-actions { display: grid; grid-template-columns: 1.1fr 1fr; }
  .dx-hero-actions .dx-btn { padding-inline: 12px; font-size:0.875rem; }
  .dx-hero-meta { font-size:0.875rem; }
  .dx-trust-row { gap: 15px; margin-top: 24px; }
  .dx-clinic-card { border-radius:var(--ux-radius-card); }
  .dx-clinic-top { padding: 26px 24px 0 44px; }
  .dx-brand-stage { min-height: 280px; padding: 22px 28px; }
  .dx-signature { font-size:3.0rem; }
  .dx-brand-seal { width: 72px; height: 95px; right: 28px; bottom: 28px; }
  .dx-clinic-note { padding: 20px; }
  .dx-clinic-note strong { font-size:0.875rem; }
  .dx-clinic-note small { font-size:0.875rem; }
  .dx-logo-stage.has-custom-image { min-height: 290px; margin-inline: 12px; border-radius:var(--ux-radius-card); }
  .dx-logo-stage img.dx-home-hero-image { height: 290px; border-radius:var(--ux-radius-card); }
  .dx-proof-strip { padding-block: 22px; gap: 20px 0; border-radius:var(--ux-radius-card); }
  .dx-proof-strip > div, .dx-proof-strip > div:first-child, .dx-proof-strip > div:nth-child(3) { padding: 0 16px; }
  .dx-proof-strip strong, .dx-proof-strip span { font-size:0.875rem; }
  .dx-section-head { margin-bottom: 30px; }
  .dx-section-head h2, .dx-care h2, .dx-book h2 { font-size:2.0rem; }
  .dx-problem-grid { grid-template-columns: 1fr; gap: 12px; }
  .dx-problem-grid a, .dx-problem-grid a:nth-child(3n), .dx-problem-grid a:nth-child(n+4) { grid-template-columns: 40px 1fr auto; padding: 16px 18px; min-height: 80px; gap: 12px; }
  .dx-problem-grid i { display: grid; }
  .dx-problem-grid b { font-size:1.0rem; }
  .dx-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .dx-service-card { min-height: 240px; padding: 28px; }
  .dx-steps { gap: 0 20px; }
  .dx-steps > div { gap: 9px; }
  .dx-steps strong { font-size:0.875rem; }
  .dx-steps small { font-size:0.875rem; }
  .dx-safety-card { padding: 30px 26px; }
  .dx-doctor-grid { grid-template-columns: 1fr; gap: 34px; }
  .dx-doctor-photo { aspect-ratio: 1 / .95; }
  .dx-review-card { padding: 28px 24px; }
  .dx-book-form { grid-template-columns: 1fr; padding: 26px 20px; gap: 20px; border-radius:var(--ux-radius-card); }
  .booking-card-container { padding: 28px 20px; border-radius:var(--ux-radius-card); }
  .appointment-page .appointment-hero { padding: 44px 0 80px; }
  .confirmation-receipt-box { padding: 22px 14px; }
  .dx-form-footnote { margin-top: 0; }
  .dx-footer-v2 { padding-top: 44px; }
  .dx-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .dx-footer-links > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .dx-footer-badges { gap: 12px 22px; }
  .dx-footer-bottom { flex-direction: column; align-items: start; gap: 8px; }
  .treatment-directory-hero, .treatment-premium-hero, .doctor-profile-hero, .contact-hero { padding-block: 44px; }
  .dxc-item { padding: 16px; gap: 14px; }
  .dxc-icon { width: 52px; height: 52px; border-radius:var(--ux-radius-card); }
  .dxc-phone { font-size:1.25rem; }
  .dxc-route { grid-template-columns: 1fr; padding: 22px; }
}
@media (max-width: 380px) {
  .container, .campaign-container { width: calc(100% - 28px); }
  .dx-brand-v2 > img { display: none; }
  .dx-brand-copy b { font-size:0.875rem; }
  .dx-brand-copy small { font-size:0.875rem; }
  .dx-proof-strip { grid-template-columns: 1fr; }
  .dx-proof-strip > div { padding: 0 16px; border: 0; }
  .dx-steps { grid-template-columns: 1fr; }
  .dx-hero-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal[data-reveal-ready]:not(.is-visible) { opacity: 1; transform: none; }
}
@media print {
  .site-header, .dx-utility, .mobile-nav-drawer, .mobile-nav-overlay, .bottom-action-bar { display: none !important; }
  .reveal[data-reveal-ready]:not(.is-visible) { opacity: 1; transform: none; }
  .dx-clinic-card, .dx-service-card, .dx-book-form { box-shadow: none; }
}