/* ==========================================================================
   Dial In Doctor — public marketing website design system (self-contained).
   Scoped with the `dd-` prefix so it never collides with the app shell / Bootstrap.
   Brand: primary #EF494A · white + very-light-grey sections · dark ink type · Poppins.
   ========================================================================== */
:root {
  --dd-primary: #EF494A;      /* brand colour: accents, icons, rules, focus ring */
  --dd-primary-600: #d83c3d;  /* min. shade that clears 4.5:1 with white text (4.53:1) */
  --dd-primary-700: #b93031;
  --dd-primary-800: #a82a2b;
  --dd-primary-050: #fdeded;
  --dd-primary-100: #fbdcdc;

  --dd-ink: #14212c;
  --dd-ink-soft: #33454f;
  --dd-muted: #5d6d78;

  --dd-bg: #ffffff;
  --dd-bg-soft: #f6f8fb;      /* very light grey section */
  --dd-bg-tint: #fbf5f4;      /* faint warm tint */
  --dd-line: #e7edf3;
  --dd-teal: #0e9488;         /* soft calm accent, used sparingly */
  --dd-teal-050: #e6f5f3;

  --dd-r: 16px;
  --dd-r-lg: 24px;
  --dd-r-xl: 32px;
  --dd-pill: 999px;

  --dd-shadow-sm: 0 1px 2px rgba(20,33,44,.06), 0 1px 3px rgba(20,33,44,.05);
  --dd-shadow: 0 10px 30px -12px rgba(20,33,44,.18);
  --dd-shadow-lg: 0 24px 60px -24px rgba(20,33,44,.28);

  --dd-container: 1180px;
  --dd-nav-h: 64px;

  /* One page gutter for every public shell. Header, hero, sections and footer
     all read this, so no part of the page can drift to its own inset. */
  --dd-gutter: 1.25rem;

  /* Hero rhythm. Named steps rather than per-page inline styles, so a centred
     hero has the same vertical spacing wherever it appears. */
  --dd-hero-pad: clamp(2.5rem, 6vw, 4.5rem);   /* hero top and bottom */
  --dd-hero-gap-eyebrow: 1rem;                 /* eyebrow -> heading */
  --dd-hero-gap-heading: 1.1rem;               /* heading -> supporting copy */
  --dd-hero-gap-lead: 1.9rem;                  /* supporting copy -> CTA group */

  /* Measures. The heading is deliberately tighter than the body copy: a display
     line allowed to run as long as a paragraph stops reading as a headline. */
  --dd-hero-measure: 760px;
  /* In ch, so the measure tracks the font as it clamps down: the number of
     characters per line stays roughly constant instead of the heading getting
     narrower in proportion to nothing. 24ch puts the current headings on two
     lines rather than stranding a single word on a third. */
  --dd-hero-heading-measure: 24ch;

  /* brand logo: one height drives header, drawer and footer so the mark stays
     visually consistent everywhere. width is always auto (SVG keeps its ratio). */
  --dd-logo-h: 40px;
}

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

.dd {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dd-ink);
  background: var(--dd-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
.dd img { max-width: 100%; height: auto; }
.dd a { color: inherit; text-decoration: none; }

.dd-skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  /* same white-on-brand shortfall as the primary button: use the AA-safe shade */
  background: var(--dd-primary-600); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--dd-r) 0;
}
.dd-skip:focus { left: 0; }

/* ------- layout helpers ------- */
.dd-container { width: 100%; max-width: var(--dd-container); margin: 0 auto; padding: 0 var(--dd-gutter); }
.dd-section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.dd-section--soft { background: var(--dd-bg-soft); }
.dd-section--tint { background: linear-gradient(180deg, #fff 0%, var(--dd-bg-tint) 100%); }
.dd-narrow { max-width: 760px; margin-inline: auto; }

.dd-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dd-primary-700); background: var(--dd-primary-050);
  padding: .35rem .8rem; border-radius: var(--dd-pill); margin-bottom: 1rem;
}
.dd-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .75rem; }
.dd-h3 { font-size: 1.15rem; font-weight: 650; margin: 0 0 .4rem; }
.dd-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--dd-muted); margin: 0 auto; max-width: 60ch; }
.dd-center { text-align: center; }
.dd-accent { color: var(--dd-primary); }

/* ------- buttons ------- */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: 1rem; line-height: 1; text-align: center;
  padding: .95rem 1.6rem; border-radius: var(--dd-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  min-height: 52px;
}
.dd-btn i { font-size: 1.05em; }
/* White text needs 4.5:1 at this size (16px/600 is "normal" text per WCAG, not large),
   so the fill starts at -600 and darkens through the states. The brand #EF494A stays
   in the shadow glow and on every non-interactive accent. */
.dd-btn--primary { background: var(--dd-primary-600); color: #fff; box-shadow: 0 10px 24px -10px rgba(239,73,74,.6); }
.dd-btn--primary:hover { background: var(--dd-primary-700); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(239,73,74,.65); }
.dd-btn--primary:active { background: var(--dd-primary-800); transform: translateY(0); box-shadow: 0 6px 16px -10px rgba(239,73,74,.6); }
.dd-btn[aria-disabled="true"], .dd-btn:disabled { background: var(--dd-line); color: var(--dd-muted); border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none; }
.dd-btn--ghost { background: #fff; color: var(--dd-ink); border-color: var(--dd-line); }
.dd-btn--ghost:hover { border-color: var(--dd-primary); color: var(--dd-primary); transform: translateY(-2px); }
.dd-btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.dd-btn--light:hover { background: #fff; color: var(--dd-primary); transform: translateY(-2px); }
.dd-btn--wa { background: #1fab54; color: #fff; }
.dd-btn--wa:hover { background: #178f45; transform: translateY(-2px); }
.dd-btn--sm { padding: .65rem 1.1rem; min-height: 44px; font-size: .92rem; }

/* ------- navigation ------- */
.dd-nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.dd-nav.is-stuck { box-shadow: var(--dd-shadow-sm); border-color: var(--dd-line); background: rgba(255,255,255,.96); }
.dd-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--dd-nav-h); gap: 1.5rem; }
.dd-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.dd-brand img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; }
.dd-navlinks { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.dd-navlinks a { position: relative; padding: .5rem .85rem; border-radius: var(--dd-pill); font-weight: 500; color: var(--dd-ink-soft); font-size: .95rem; transition: color .15s ease, background .15s ease; }
.dd-navlinks a:hover, .dd-navlinks a:focus-visible { color: var(--dd-primary); background: var(--dd-primary-050); }
.dd-navlinks a[aria-current="page"] { color: var(--dd-primary); font-weight: 600; }
.dd-navlinks a[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .18rem; height: 2px; border-radius: 2px; background: var(--dd-primary); }
.dd-nav__cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.dd-navlogin { font-weight: 600; color: var(--dd-ink-soft); padding: .5rem .35rem; font-size: .95rem; transition: color .15s ease; }
.dd-navlogin:hover, .dd-navlogin:focus-visible { color: var(--dd-primary); }
.dd-nav__cta .dd-btn--primary { box-shadow: 0 6px 16px -9px rgba(239,73,74,.55); padding: .5rem 1.05rem; font-size: .9rem; }
.dd-nav__cta .dd-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(239,73,74,.6); }
.dd-burger { display: none; background: none; border: 1px solid var(--dd-line); border-radius: 10px; width: 42px; height: 42px; font-size: 1.4rem; color: var(--dd-ink); cursor: pointer; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.dd-burger:hover, .dd-burger:focus-visible { border-color: var(--dd-primary); color: var(--dd-primary); }

/* mobile drawer */
.dd-drawer { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: #fff; box-shadow: var(--dd-shadow-lg); transform: translateX(105%); transition: transform .28s ease; z-index: 130; padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.dd-drawer.is-open { transform: translateX(0); }
.dd-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .75rem; }
.dd-drawer__head img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; }
.dd-drawer a { padding: .85rem .75rem; border-radius: var(--dd-r); font-weight: 500; color: var(--dd-ink); display: flex; align-items: center; gap: .75rem; transition: background .15s ease, color .15s ease; }
.dd-drawer a i { color: var(--dd-muted); font-size: 1.1rem; width: 1.2rem; text-align: center; }
.dd-drawer a:hover, .dd-drawer a:focus-visible { background: var(--dd-bg-soft); color: var(--dd-primary); }
.dd-drawer a:hover i, .dd-drawer a:focus-visible i { color: var(--dd-primary); }
.dd-drawer a[aria-current="page"] { background: var(--dd-primary-050); color: var(--dd-primary); font-weight: 600; }
.dd-drawer a[aria-current="page"] i { color: var(--dd-primary); }
.dd-drawer .dd-btn { margin-top: .75rem; width: 100%; justify-content: center; }
.dd-drawer__close { background: none; border: none; font-size: 1.6rem; color: var(--dd-muted); cursor: pointer; line-height: 1; }
.dd-scrim { position: fixed; inset: 0; background: rgba(15,23,32,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 120; }
.dd-scrim.is-open { opacity: 1; visibility: visible; }

/* ------- hero ------- */
.dd-hero { position: relative; overflow: hidden; background:
  radial-gradient(1200px 500px at 85% -10%, var(--dd-primary-050) 0%, rgba(253,237,237,0) 60%),
  linear-gradient(180deg, #fff 0%, var(--dd-bg-soft) 100%); }
/* There are two deliberate hero archetypes, and they used to share one set of
   rules written for only one of them.

   SPLIT (home): a text column beside artwork, everything ranged left.
   CENTRED (How It Works, Book Appointment, and any later centred hero): one
   vertical axis with every child centred on it.

   The bug this replaces: `.dd-hero p` set `max-width: 34rem; margin: 0 0 1.75rem`
   for both. Zero side margins is correct for the split hero, where the paragraph
   should sit flush with the left edge of its column. On a centred hero it pinned
   the paragraph box to the left of the container while `text-align: center`
   centred the words inside that box - so the copy read visibly left of the
   eyebrow, heading and buttons. It also outranked `.dd-lead { margin: 0 auto }`
   on specificity (0,1,1 against 0,1,0), so the shared primitive silently lost.

   Box rules are now scoped to the archetype that wants them. Typography stays
   shared, because both archetypes want the same hero-scale copy. */
.dd-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
/* margin-block, not the margin shorthand. The shorthand also sets the side
   margins to zero, and at (0,1,1) it outranks the `margin-inline: auto` the
   centred hero relies on - which pins a heading that has its own max-width to
   the left edge of the hero. This is the same trap the paragraph fell into. */
.dd-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-block: 0 var(--dd-hero-gap-heading); }
.dd-hero p { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--dd-ink-soft); }

/* Split hero: paragraph ranged left inside its column. */
.dd-hero__grid p { max-width: 34rem; margin: 0 0 1.75rem; }
.dd-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.75rem; }

/* Centred hero: one axis, and every child centres on it.
   `margin-inline: auto` on the direct children is what guarantees that - a child
   with its own max-width centres its BOX rather than relying on inherited
   text-align, which only ever centred the glyphs inside a box that was itself
   off to one side. */
.dd-hero__content {
  max-width: var(--dd-hero-measure);
  margin-inline: auto;
  padding-block: var(--dd-hero-pad);
  text-align: center;
}
.dd-hero__content > * { margin-inline: auto; }
/* text-wrap: balance evens the line lengths of a short display heading, which
   is what stops a single trailing word sitting alone on its own line. Browsers
   without it simply wrap normally inside the same measure - nothing depends on
   it, and no forced <br> is needed in the markup. */
.dd-hero__content h1 { max-width: var(--dd-hero-heading-measure); text-wrap: balance; }
.dd-hero__content p { max-width: 60ch; margin-bottom: 0; text-wrap: pretty; }

/* The eyebrow is a pill, so .dd-eyebrow makes it inline-flex - and an
   inline-level box ignores vertical margins. The gap below it was therefore
   whatever the line box happened to produce, which differed by element: pages
   writing <span class="dd-eyebrow"> got 16px and pages writing <p> got none.
   Block-level with a fitted width keeps the pill exactly as it looks while
   making the space below it real, equal and tokenised. */
.dd-hero__content .dd-eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: var(--dd-hero-gap-eyebrow);
}

/* One CTA-group pattern for every hero. Pages previously borrowed a class from
   an unrelated section further down the same page - the How It Works hero used
   the bottom call-to-action band's class, Book Appointment used the help
   panel's - which is why the two stacked at different widths on mobile. */
.dd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  align-items: center;
  margin-top: var(--dd-hero-gap-lead);
}

/* Stack once two buttons no longer sit comfortably side by side. One breakpoint
   for every hero: the borrowed classes used 767px on one page and 640px on the
   other, so the same pair of buttons changed shape at different widths. */
@media (max-width: 640px) {
  .dd-hero__actions { flex-direction: column; align-items: stretch; }
  .dd-hero__actions .dd-btn { width: 100%; justify-content: center; }
}
.dd-hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; color: var(--dd-muted); font-size: .92rem; }
.dd-hero__meta span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.dd-hero__meta i { color: var(--dd-teal); font-size: 1.1rem; }
.dd-hero__art { position: relative; }
.dd-hero__card { position: absolute; background: #fff; border-radius: var(--dd-r); box-shadow: var(--dd-shadow-lg); padding: .8rem 1rem; display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: .9rem; }
.dd-hero__card i { font-size: 1.35rem; }
.dd-hero__card--a { top: 8%; left: -6%; color: var(--dd-teal); }
.dd-hero__card--b { bottom: 7%; right: -4%; color: var(--dd-primary); }
.dd-hero__stats { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.dd-hero__stat b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--dd-primary); line-height: 1; }
.dd-hero__stat span { font-size: .82rem; color: var(--dd-muted); }

/* ------- generic grids/cards ------- */
.dd-grid { display: grid; gap: 1.25rem; }
.dd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dd-grid--2 { grid-template-columns: repeat(2, 1fr); }

.dd-card { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 1.6rem; box-shadow: var(--dd-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%; }
.dd-card:hover { transform: translateY(-4px); box-shadow: var(--dd-shadow); border-color: var(--dd-primary-100); }
.dd-card p { color: var(--dd-muted); margin: 0; font-size: .95rem; }

.dd-ico { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; background: var(--dd-primary-050); color: var(--dd-primary); }
.dd-ico--teal { background: var(--dd-teal-050); color: var(--dd-teal); }
.dd-ico img { width: 30px; height: 30px; }

/* ------- steps timeline ------- */
.dd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: step; }
.dd-step { position: relative; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 2.4rem 1.4rem 1.4rem; box-shadow: var(--dd-shadow-sm); }
.dd-step__num { position: absolute; top: -22px; left: 1.4rem; width: 44px; height: 44px; border-radius: var(--dd-pill); background: var(--dd-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -8px rgba(239,73,74,.6); }
.dd-step i { font-size: 1.5rem; color: var(--dd-primary); }
.dd-step p { color: var(--dd-muted); font-size: .92rem; margin: .35rem 0 0; }

/* ------- service cards ------- */
.dd-svc { display: flex; flex-direction: column; gap: .5rem; }
.dd-svc .dd-ico { margin-bottom: .5rem; }
.dd-svc__tag { align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--dd-teal); background: var(--dd-teal-050); padding: .15rem .55rem; border-radius: var(--dd-pill); margin-top: .35rem; }

/* ------- comparison ------- */
.dd-compare { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); overflow: hidden; box-shadow: var(--dd-shadow-sm); background: #fff; }
.dd-compare__head { padding: 1.1rem 1.25rem; font-weight: 700; border-bottom: 1px solid var(--dd-line); }
.dd-compare__head--us { background: var(--dd-primary); color: #fff; }
.dd-compare__head--old { background: var(--dd-bg-soft); color: var(--dd-muted); }
.dd-compare__row { display: contents; }
.dd-compare__cell { padding: 1rem 1.25rem; border-bottom: 1px solid var(--dd-line); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.dd-compare__label { font-weight: 600; color: var(--dd-ink); }
.dd-compare__cell--us { color: var(--dd-ink); background: var(--dd-primary-050); }
.dd-compare__cell--us i { color: #1fab54; }
.dd-compare__cell--old { color: var(--dd-muted); }
.dd-compare__cell--old i { color: #c14b4b; }
.dd-compare > :nth-last-child(-n+3) .dd-compare__cell,
.dd-compare > *:nth-last-child(-n+3) { border-bottom: none; }

/* ------- ecosystem flow ------- */
.dd-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .5rem; }
.dd-flow__node { flex: 1 1 150px; max-width: 190px; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 1.1rem .9rem; text-align: center; box-shadow: var(--dd-shadow-sm); }
.dd-flow__node i { font-size: 1.5rem; color: var(--dd-primary); }
.dd-flow__node b { display: block; margin-top: .4rem; font-size: .95rem; }
.dd-flow__arrow { display: flex; align-items: center; color: var(--dd-primary-100); font-size: 1.4rem; }

/* ------- doctors ------- */
.dd-doc { display: flex; align-items: center; gap: 1rem; }
.dd-doc img { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: var(--dd-shadow-sm); }
.dd-doc h3 { margin: 0; font-size: 1.05rem; }
.dd-doc span { color: var(--dd-muted); font-size: .9rem; }
.dd-doc__badge { margin-left: auto; color: var(--dd-teal); font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

/* ------- doctor directory (/Doctors) -------
   The homepage strip above is a teaser: a row of names to show real doctors
   exist. This is the page someone reads properly, so each card carries what the
   doctor is consulted for and the cards are tall enough to hold it.

   auto-fit rather than fixed columns, because the roster is short and will
   change: four doctors must not leave a hole where a fifth column would be, and
   adding a fifth must not need a media query. minmax with a 17rem floor keeps a
   card wide enough for a full name like "Dr. Muhammad Haris Sarwar" without
   truncation at any width. */
.dd-docdir { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
             grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.dd-docdir__card { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem;
                   background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
                   padding: 1.5rem; box-shadow: var(--dd-shadow-sm); height: 100%; }

/* Fixed box with object-fit, so portraits shot at different crops and aspect
   ratios present identically without anyone re-cutting the originals.
   object-position favours the upper part of the frame: on a portrait, centring
   a square crop tends to cut the top of the head. */
.dd-docdir__card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
                       object-position: 50% 25%; border: 3px solid #fff;
                       box-shadow: var(--dd-shadow-sm); }

.dd-docdir__body { display: flex; flex-direction: column; gap: .3rem; }
.dd-docdir__name { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.dd-docdir__title { margin: 0; color: var(--dd-primary-600); font-weight: 600; font-size: .92rem; }
.dd-docdir__focus { margin: 0; color: var(--dd-muted); font-size: .92rem; line-height: 1.5; }

/* Pushed to the bottom so the mark sits on the same line across a row of cards
   whose supporting copy differs in length. */
.dd-docdir__verified { margin: auto 0 0; color: var(--dd-teal); font-size: .82rem; font-weight: 600;
                       display: inline-flex; align-items: center; gap: .35rem; }

.dd-docdir__cta { margin-top: 2.5rem; text-align: center; display: flex; flex-direction: column;
                  align-items: center; gap: 1.1rem; }

/* ------- testimonials ------- */
.dd-quote { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 1.75rem; box-shadow: var(--dd-shadow-sm); height: 100%; display: flex; flex-direction: column; }
.dd-quote__stars { color: #f5a623; margin-bottom: .75rem; letter-spacing: 2px; }
.dd-quote blockquote { margin: 0 0 1rem; font-size: 1.02rem; color: var(--dd-ink-soft); }
.dd-quote figcaption { margin-top: auto; font-weight: 600; }
.dd-quote figcaption span { display: block; color: var(--dd-muted); font-weight: 400; font-size: .85rem; }

/* ------- FAQ ------- */
.dd-faq { max-width: 820px; margin-inline: auto; }
.dd-faq details { border: 1px solid var(--dd-line); border-radius: var(--dd-r); background: #fff; margin-bottom: .75rem; box-shadow: var(--dd-shadow-sm); overflow: hidden; }
.dd-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dd-faq summary::-webkit-details-marker { display: none; }
.dd-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; color: var(--dd-primary); transition: transform .2s ease; font-weight: normal; }
.dd-faq details[open] summary::after { transform: rotate(180deg); }
.dd-faq p { padding: 0 1.25rem 1.15rem; margin: 0; color: var(--dd-muted); }

/* ------- band / final CTA ------- */
.dd-band { background: linear-gradient(135deg, var(--dd-primary) 0%, var(--dd-primary-700) 100%); color: #fff; border-radius: var(--dd-r-xl); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; box-shadow: var(--dd-shadow-lg); position: relative; overflow: hidden; }
.dd-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 240px at 15% 0%, rgba(255,255,255,.18), transparent 60%); }
.dd-band > * { position: relative; }
.dd-band h2 { color: #fff; }
.dd-band p { color: rgba(255,255,255,.9); max-width: 44rem; margin: 0 auto 1.75rem; }
.dd-band__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.dd-band__note { margin-top: 1.4rem; font-size: .82rem; color: rgba(255,255,255,.8); }

/* metric strip */
.dd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.dd-metric b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--dd-primary); }
.dd-metric span { color: var(--dd-muted); font-size: .9rem; }

/* ------- footer ------- */
.dd-footer { background: #101c26; color: #c8d3dc; padding: clamp(3rem, 5vw, 4.5rem) 0 0; }
.dd-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.5rem 3rem; }
/* footer column headings are h2 so the document outline does not jump h2 -> h4;
   h4 kept in the selector so any legacy markup still renders identically */
.dd-footer h2, .dd-footer h4 { color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1.15rem; }
.dd-footer a { color: #a7b4bf; display: block; padding: .3rem 0; font-size: .92rem; width: fit-content; transition: color .15s ease; }
.dd-footer nav a:hover, .dd-footer nav a:focus-visible { color: #fff; }
.dd-footer p { color: #93a3ae; font-size: .92rem; line-height: 1.65; }
.dd-footer__brand p { max-width: 34ch; margin-top: .25rem; }
.dd-footer__brand img { height: var(--dd-logo-h); width: auto; max-width: 100%; display: block; object-fit: contain; margin-bottom: 1.25rem; filter: brightness(0) invert(1); }
.dd-footer__contact p { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; }
.dd-footer__contact p i { color: var(--dd-primary); font-size: 1rem; flex-shrink: 0; }
.dd-footer__contact p a { display: inline; padding: 0; color: #c8d3dc; }
.dd-footer__contact p a:hover, .dd-footer__contact p a:focus-visible { color: #fff; }
.dd-footer__contact nav a:hover, .dd-footer__contact nav a:focus-visible { color: #fff; }
.dd-footer__social { display: flex; gap: .55rem; margin-top: 1.25rem; }
.dd-footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; padding: 0; color: #c8d3dc; transition: background .15s ease, color .15s ease, transform .15s ease; }
.dd-footer__social a:hover, .dd-footer__social a:focus-visible { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; transform: translateY(-2px); }
.dd-footer__bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.35rem 0; text-align: center; font-size: .84rem; color: #8494a0; }

/* floating whatsapp */
.dd-wa { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #1fab54; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: var(--dd-shadow-lg); z-index: 90; }
.dd-wa:hover { transform: scale(1.06); }

/* ------- reveal on scroll ------- */
.dd-reveal { opacity: 0; transform: translateY(18px); }
.dd-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* ------- responsive ------- */
/* The header needs more room than the rest of the layout does.
   Brand (169px) + links (500px) + the CTA group (372px) plus the flex gaps come
   to roughly 1090px, but the desktop bar was kept until 991px - so between 992px
   and about 1150px the row could not fit and pushed the page into a horizontal
   scroll. Measured at 1024px: 1117px of content in a 1024px viewport, on every
   marketing page.

   Scoped to the header alone rather than moving the 991px breakpoint, because
   that breakpoint also governs the hero, grids, steps and footer, and those are
   all comfortable at these widths. Only the bar swaps to the drawer early.

   The upper bound is the measured width at which the bar actually fits on one
   line, not a round number: with six links plus both calls to action the row
   needs 1200px, and at 1150-1199px the links wrap to a second line and the
   header grows from 40px to 65px. Below 1200px the drawer is used instead. */
@media (min-width: 992px) and (max-width: 1199px) {
  .dd-navlinks, .dd-nav__cta .dd-btn, .dd-navlogin { display: none; }
  .dd-burger { display: inline-flex; }
}

@media (max-width: 991px) {
  :root { --dd-logo-h: 36px; }
  .dd-navlinks, .dd-nav__cta .dd-btn, .dd-navlogin { display: none; }
  .dd-burger { display: inline-flex; }
  .dd-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .dd-hero p, .dd-hero__cta, .dd-hero__meta, .dd-hero__stats { margin-inline: auto; justify-content: center; }
  .dd-hero__art { max-width: 460px; margin: 0 auto; }
  .dd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dd-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .dd-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --dd-logo-h: 32px; }
  .dd-grid--4, .dd-grid--3, .dd-grid--2, .dd-steps, .dd-metrics { grid-template-columns: 1fr; }
  .dd-compare { grid-template-columns: 1fr; }
  .dd-compare__head--old, .dd-compare__cell--old { display: none; } /* keep the Dial In Doctor column on tiny screens */
  .dd-flow__arrow { transform: rotate(90deg); }
  .dd-footer__grid { grid-template-columns: 1fr; }
  .dd-hero__card { display: none; }
  .dd-btn { width: 100%; }
  .dd-hero__cta .dd-btn, .dd-band__cta .dd-btn { width: auto; }
}

/* ------- accessibility ------- */
.dd a:focus-visible, .dd button:focus-visible, .dd summary:focus-visible, .dd input:focus-visible, .dd select:focus-visible, .dd textarea:focus-visible {
  outline: 3px solid var(--dd-primary); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .dd, .dd * { scroll-behavior: auto !important; }
  .dd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dd-btn:hover, .dd-card:hover, .dd-wa:hover { transform: none !important; }
}
.dd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==========================================================================
   About page — editorial + executive blocks. Namespaced `dd-ab-`.
   Everything else on that page reuses the shared tokens, buttons, grids,
   cards and .dd-flow defined above, so it stays visually identical to Home.
   ========================================================================== */

/* hero art: the asset is a transparent PNG, so it gets no frame or shadow */
.dd-ab-art img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   About hero motion. Two restrained, transform-only animations and nothing
   else: the illustration breathes vertically, and a single soft halo drifts
   behind it. No JS, no scroll trigger, no opacity on the content itself —
   the page is complete and correct with animation entirely switched off.
   `isolation: isolate` keeps the z-index:-1 halo inside this wrapper so it
   can never paint over the hero copy or escape the column.
   -------------------------------------------------------------------------- */
.dd-ab-hero-art { position: relative; isolation: isolate; }

.dd-ab-hero-art::before {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 76%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  background: radial-gradient(circle at 50% 50%,
              rgba(44,142,203,.13) 0%,
              rgba(239,73,74,.07) 45%,
              rgba(239,73,74,0) 70%);
  pointer-events: none;
  animation: dd-ab-halo 14s ease-in-out infinite alternate;
}

.dd-ab-hero-art img { animation: dd-ab-float 11s ease-in-out infinite alternate; will-change: transform; }

@keyframes dd-ab-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -5px, 0); }
}
@keyframes dd-ab-halo {
  from { transform: translate3d(-50%, -50%, 0) scale(1); }
  to   { transform: translate3d(-50%, -50%, 0) scale(1.045); }
}

/* editorial two-column: narrative beside a supporting panel */
.dd-ab-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-ab-prose p { color: var(--dd-ink-soft); font-size: 1.03rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-ab-prose p:last-child { margin-bottom: 0; }

/* quiet list of real-world problems — no cards, keeps the section calm */
.dd-ab-list { list-style: none; margin: 0; padding: 0; }
.dd-ab-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; border-bottom: 1px solid var(--dd-line); color: var(--dd-ink-soft); font-size: .97rem; }
.dd-ab-list li:last-child { border-bottom: none; }
.dd-ab-list i { color: var(--dd-primary); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* mission / vision — one large sentence each, set as a statement */
.dd-ab-statement { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.7rem, 3vw, 2.5rem); box-shadow: var(--dd-shadow-sm); height: 100%; }
.dd-ab-statement h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 .9rem; }
.dd-ab-statement p { font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--dd-ink); font-weight: 500; margin: 0; }

/* leadership — full-width executive rows, deliberately not team cards */
.dd-ab-execs { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 980px; margin-inline: auto; }
.dd-ab-exec { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-ab-exec__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--dd-r); overflow: hidden; background: var(--dd-bg-soft); border: 1px solid var(--dd-line); }
/* Portraits are supplied at differing ratios (4:5 and 3:4); the container normalises them.
   The 12% vertical bias keeps the face high in frame, so any overflow is taken off the
   bottom of the shot rather than the head. */
.dd-ab-exec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
/* Momin's replacement portrait frames the head lower than Bilal's, so the shared 12% would
   push his eye-line ~7pt further down the card. 85% takes the 6.25% overflow off the top
   instead, landing both eye-lines within ~3pt of each other. Aspect ratio is untouched. */
.dd-ab-exec__photo--momin img { object-position: 50% 85%; }
.dd-ab-exec__name { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; margin: 0 0 .45rem; }
.dd-ab-exec__roles { margin: 0 0 1rem; }
.dd-ab-exec__roles b { display: block; color: var(--dd-primary-700); font-weight: 600; font-size: .92rem; }
.dd-ab-exec__roles span { display: block; color: var(--dd-muted); font-size: .92rem; }
.dd-ab-exec__bio { color: var(--dd-muted); font-size: .96rem; margin: 0; max-width: 62ch; }
/* LinkedIn profile link. Scoped to .dd-ab-exec so it cannot reach footer or nav anchors.
   44px min target, LinkedIn blue at 5.69:1 on white, and it must never read as disabled. */
.dd-ab-exec__li {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.15rem; min-height: 44px; padding: .55rem 1.05rem;
  font-size: .88rem; font-weight: 600; color: #0a66c2; max-width: 100%;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-pill);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.dd-ab-exec__li i { font-size: 1.05rem; line-height: 1; }
.dd-ab-exec__li:hover { background: #f0f6fc; border-color: #0a66c2; color: #094f96; transform: translateY(-1px); }
.dd-ab-exec__li:active { background: #e4eef8; border-color: #094f96; color: #094f96; transform: translateY(0); }
/* keep the global 3px ring + 2px offset; only restore the pill shape it would square off */
.dd-ab-exec__li:focus-visible { border-radius: var(--dd-pill); border-color: #0a66c2; }

/* future vision pillars — plain rows, no card weight */
.dd-ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; text-align: center; }
.dd-ab-pillar i { font-size: 1.6rem; color: var(--dd-primary); }
.dd-ab-pillar h3 { font-size: 1.02rem; font-weight: 650; margin: .7rem 0 .3rem; }
.dd-ab-pillar p { color: var(--dd-muted); font-size: .93rem; margin: 0; }

/* final CTA — white, large, uncluttered */
.dd-ab-cta { max-width: 720px; margin-inline: auto; text-align: center; }
.dd-ab-cta h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-ab-cta p { color: var(--dd-muted); font-size: 1.04rem; margin: 0 auto 2rem; max-width: 52ch; }

@media (max-width: 991px) {
  .dd-ab-split { grid-template-columns: 1fr; }
  .dd-ab-pillars { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.25rem; }
  .dd-ab-art { max-width: 560px; margin-inline: auto; }
  .dd-ab-list, .dd-ab-prose p { text-align: left; }   /* hero centring must not leak in */
}
@media (max-width: 640px) {
  .dd-ab-exec { grid-template-columns: 1fr; gap: 1.25rem; }
  .dd-ab-exec__photo { max-width: 176px; }
  /* the illustration is centred and small here — ambient drift reads as instability,
     so movement stops and the halo simply holds its resting position */
  .dd-ab-hero-art img { animation: none; transform: none; will-change: auto; }
  .dd-ab-hero-art::before { animation: none; transform: translate3d(-50%, -50%, 0); }
}

/* About-scoped reduced-motion. Deliberately separate from the shared block above so it
   touches nothing outside this page. Everything stays visible and in the same place —
   only movement is removed. */
@media (prefers-reduced-motion: reduce) {
  .dd-ab-hero-art img { animation: none !important; transform: none !important; will-change: auto; }
  .dd-ab-hero-art::before { animation: none !important; transform: translate3d(-50%, -50%, 0) !important; }
  .dd-ab-exec__li { transition: none; }
  .dd-ab-exec__li:hover, .dd-ab-exec__li:active { transform: none; }
}

/* ==========================================================================
   Services page. Namespaced `dd-svc-` (distinct from the older `.dd-svc`
   service-card helper above — different class token, no overlap).
   Everything else reuses the shared hero, sections, grids, cards, icon
   blocks and buttons. No animation, no keyframes, no JS dependency.
   ========================================================================== */

/* hero: no suitable repository artwork exists, so the second column is a
   composed panel built from the design system rather than a stock image */
.dd-svc-hero__panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--dd-shadow); text-align: left; }
.dd-svc-hero__label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-muted); margin: 0 0 1.15rem; }
.dd-svc-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-svc-hero__list li { display: flex; align-items: center; gap: .8rem; font-weight: 500; font-size: .97rem; color: var(--dd-ink); }
.dd-svc-hero__list i { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--dd-primary-050); color: var(--dd-primary-700); font-size: 1.05rem; flex-shrink: 0; }

/* detail sections: narrative beside a supporting panel, consistent left-to-right
   so DOM order always matches reading order (no `order` reversal) */
.dd-svc-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-svc-detail__panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-svc-detail__panel h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 1.1rem; }
.dd-svc-detail p { color: var(--dd-ink-soft); font-size: 1.02rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-svc-detail p:last-of-type { margin-bottom: 0; }

.dd-svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-svc-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-svc-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* notes: readable body size, left accent bar, icon + bold label so the meaning
   never rests on colour alone. Red = safety, teal = compliance. */
/* white, not bg-soft: both notes sit inside `dd-section--soft`, so a soft fill
   would be the same colour as the section and the panel would read as flat */
.dd-svc-note { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-top: 1.75rem; }
.dd-svc-note i { color: var(--dd-primary-700); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-svc-note strong { display: block; color: var(--dd-ink); font-size: .93rem; margin-bottom: .25rem; }
.dd-svc-note p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; max-width: none; }
.dd-svc-note--compliance { border-left-color: var(--dd-teal); }
.dd-svc-note--compliance i { color: var(--dd-teal); }

/* Connected care journey. Deterministic grid, not wrapping flex: a wrapping row
   could not guarantee the sequence stayed intact, and six capped cards plus five
   arrow elements overflowed the container, orphaning step 6 onto its own row.
   The <ol> carries the order for assistive tech; the visible numeral duplicates
   it and is aria-hidden. Column count is explicit at every breakpoint. */
.dd-svc-journey {
  --dd-svc-gap: clamp(.875rem, 1.4vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dd-svc-gap);
  align-items: stretch;
}
.dd-svc-journey__step {
  position: relative; width: 100%; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: 1.25rem .85rem; text-align: center; box-shadow: var(--dd-shadow-sm);
  overflow-wrap: break-word;
}
.dd-svc-journey__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; margin-bottom: .65rem; flex-shrink: 0; }
.dd-svc-journey__step b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.35; }

/* Arrows exist only where all six cards share one row. Drawn as an empty
   pseudo-element (content:"" — nothing for a screen reader to announce), sized
   to the grid gap so it can never widen a column or cause overflow. The rotate
   is a one-off shape transform, not motion. */
@media (min-width: 1200px) {
  .dd-svc-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + var(--dd-svc-gap) / 2);
    width: 9px; height: 9px;
    border-top: 2px solid var(--dd-primary-100);
    border-right: 2px solid var(--dd-primary-100);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }
}

/* availability: an information panel, deliberately calm rather than a warning box */
.dd-svc-availability { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--dd-shadow-sm); max-width: 920px; margin-inline: auto; }
.dd-svc-availability > p { color: var(--dd-muted); margin: 0 0 1.5rem; font-size: 1rem; }
.dd-svc-availability .dd-svc-list { grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; }

/* final CTA on plain white */
.dd-svc-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-svc-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-svc-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-svc-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* journey column counts — explicit at every breakpoint, row-major order preserved */
@media (max-width: 1199px) {
  .dd-svc-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 1,2,3 / 4,5,6 */
}
@media (max-width: 767px) {
  .dd-svc-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 1,2 / 3,4 / 5,6 */
}
@media (max-width: 640px) {
  .dd-svc-journey { grid-template-columns: 1fr; }                        /* stacked 1..6 */
}

@media (max-width: 991px) {
  .dd-svc-detail { grid-template-columns: 1fr; }
  /* the hero centres its text at this width; the panel must stay left-aligned */
  .dd-svc-hero__panel { max-width: 560px; margin-inline: auto; }
  .dd-svc-detail p, .dd-svc-list li { text-align: left; }
}
@media (max-width: 640px) {
  .dd-svc-availability .dd-svc-list { grid-template-columns: 1fr; }
  .dd-svc-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   Contact page. Namespaced `dd-contact-`. Reuses the shared hero, sections,
   grids, cards, icon blocks and buttons. No animation, no keyframes, no JS
   dependency — every channel is a plain link that works without script.
   ========================================================================== */

/* channel cards are real links, so they need hover/focus treatment on top of
   .dd-card, which is otherwise a static container */
.dd-contact-card { display: flex; flex-direction: column; height: 100%; }
.dd-contact-card:hover { border-color: var(--dd-primary-100); }
.dd-contact-card__meta {
  margin-top: auto; padding-top: .9rem; font-weight: 600; font-size: .95rem;
  color: var(--dd-primary-700);
  /* phone and email strings must never widen the card on a 320px screen */
  overflow-wrap: anywhere; word-break: break-word;
}
.dd-contact-card__meta i { font-size: .8rem; margin-left: .35rem; }
/* the global focus ring squares the corners off; keep the card radius */
.dd-contact-card:focus-visible { border-radius: var(--dd-r-lg); }

/* guidance panel: what to include, and what not to send */
.dd-contact-guidance { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.6rem, 3.5vw, 2.5rem); box-shadow: var(--dd-shadow-sm); max-width: 880px; margin-inline: auto; }
.dd-contact-guidance > p { color: var(--dd-muted); margin: 0 0 1.5rem; }
.dd-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-contact-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-contact-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* expectations panel */
.dd-contact-expect { max-width: 880px; margin-inline: auto; }
.dd-contact-expect .dd-contact-list { grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; }

/* emergency notice: white so it separates from the soft section behind it;
   icon plus bold label, so meaning never rests on colour alone */
.dd-contact-emergency {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line);
  border-left: 4px solid var(--dd-primary);
  border-radius: var(--dd-r); padding: 1.25rem 1.4rem;
  max-width: 880px; margin-inline: auto;
}
.dd-contact-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
/* privacy variant: teal accent distinguishes guidance from the safety notice,
   but both carry an icon and a bold label so colour is never the only signal */
.dd-contact-emergency--privacy { border-left-color: var(--dd-teal); margin-top: 1.75rem; max-width: none; }
.dd-contact-emergency--privacy i { color: var(--dd-teal); }
.dd-contact-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-contact-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* final CTA on plain white */
.dd-contact-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-contact-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-contact-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-contact-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

@media (max-width: 640px) {
  .dd-contact-expect .dd-contact-list { grid-template-columns: 1fr; }
  .dd-contact-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   How It Works page. Namespaced `dd-hiw-`. Reuses the shared hero, sections,
   grids, cards, icon blocks, buttons and the existing .dd-faq details/summary
   styling. No animation, no keyframes, no JS dependency.
   ========================================================================== */

/* Care journey: explicit grid, never wrapping flex, so the six steps cannot
   reorder or orphan. Arrows are pseudo-elements sized to the gap. */
.dd-hiw-journey {
  --dd-hiw-gap: clamp(.875rem, 1.4vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dd-hiw-gap);
  align-items: stretch;
}
.dd-hiw-step {
  position: relative; width: 100%; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: 1.35rem .9rem; text-align: center; box-shadow: var(--dd-shadow-sm);
  overflow-wrap: break-word;
}
.dd-hiw-step__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.dd-hiw-step i { font-size: 1.35rem; color: var(--dd-primary); margin: .7rem 0 .55rem; }
.dd-hiw-step b { display: block; font-size: .93rem; font-weight: 650; line-height: 1.35; }
.dd-hiw-step p { color: var(--dd-muted); font-size: .86rem; line-height: 1.45; margin: .4rem 0 0; }

/* arrows only where all six share one row; content:"" so nothing is announced */
@media (min-width: 1200px) {
  .dd-hiw-step:not(:last-child)::after {
    content: "";
    position: absolute; top: 2.05rem;
    left: calc(100% + var(--dd-hiw-gap) / 2);
    width: 9px; height: 9px;
    border-top: 2px solid var(--dd-primary-100);
    border-right: 2px solid var(--dd-primary-100);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
  }
}

/* narrative beside a supporting panel; DOM order always matches reading order */
.dd-hiw-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dd-hiw-split p { color: var(--dd-ink-soft); font-size: 1.02rem; margin: 0 0 1.05rem; max-width: 62ch; }
.dd-hiw-split p:last-of-type { margin-bottom: 0; }
.dd-hiw-panel { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-hiw-panel h3 { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 1.1rem; }

.dd-hiw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dd-hiw-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .97rem; }
.dd-hiw-list i { color: var(--dd-teal); font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }

/* notes: body-size text, icon plus bold label, so meaning never rests on colour */
.dd-hiw-note { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-top: 1.75rem; }
.dd-hiw-note i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-hiw-note strong { display: block; color: var(--dd-ink); font-size: .93rem; margin-bottom: .25rem; }
.dd-hiw-note p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; max-width: none; }
.dd-hiw-note--clinical { border-left-color: var(--dd-primary); }
.dd-hiw-note--clinical i { color: var(--dd-primary-700); }

/* suitability comparison: two balanced columns, each self-labelling */
.dd-hiw-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.dd-hiw-compare__col { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm); }
.dd-hiw-compare__head { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.15rem; font-size: 1.05rem; font-weight: 650; color: var(--dd-ink); }
.dd-hiw-compare__head i { font-size: 1.25rem; flex-shrink: 0; }
.dd-hiw-compare__col--online .dd-hiw-compare__head i { color: var(--dd-teal); }
.dd-hiw-compare__col--inperson .dd-hiw-compare__head i { color: var(--dd-primary-700); }
.dd-hiw-compare__col--inperson .dd-hiw-list i { color: var(--dd-primary-700); }

/* emergency panel */
.dd-hiw-emergency { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.25rem 1.4rem; max-width: 880px; margin-inline: auto; }
.dd-hiw-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
.dd-hiw-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-hiw-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* final CTA */
.dd-hiw-cta { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-hiw-cta h2 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-hiw-cta p { color: var(--dd-muted); font-size: 1.03rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-hiw-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* journey column counts — explicit at every breakpoint, row-major order kept */
@media (max-width: 1199px) {
  .dd-hiw-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 1,2,3 / 4,5,6 */
}
@media (max-width: 767px) {
  .dd-hiw-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 1,2 / 3,4 / 5,6 */
}
@media (max-width: 991px) {
  .dd-hiw-split { grid-template-columns: 1fr; }
  .dd-hiw-split p, .dd-hiw-list li { text-align: left; }
}
@media (max-width: 640px) {
  .dd-hiw-journey { grid-template-columns: 1fr; }                          /* stacked 1..6 */
  .dd-hiw-compare { grid-template-columns: 1fr; }
  .dd-hiw-cta__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   Book Appointment page. Namespaced `dd-book-`. Reuses the shared sections,
   grids, cards, icon blocks and buttons. No animation, no keyframes, no
   JS-dependent visibility — the form renders and submits without script.
   ========================================================================== */

/* form beside its support panel */
.dd-book-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.dd-book-form { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--dd-shadow-sm); }
.dd-book-form fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.dd-book-form fieldset:last-of-type { margin-bottom: 1.25rem; }
.dd-book-form legend { padding: 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin-bottom: 1rem; }

.dd-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.dd-book-field { display: flex; flex-direction: column; min-width: 0; }
.dd-book-field--full { grid-column: 1 / -1; }

.dd-book-label { font-size: .9rem; font-weight: 600; color: var(--dd-ink); margin-bottom: .4rem; }
/* asterisk is decorative; the native `required` attribute is what AT announces,
   so the requirement never depends on colour or on the glyph alone */
.dd-book-required { color: var(--dd-primary-700); margin-left: .15rem; }
.dd-book-legend-note { font-size: .85rem; color: var(--dd-muted); margin: 0 0 1.5rem; }

.dd-book-input {
  width: 100%; min-width: 0; font: inherit; font-size: .97rem; color: var(--dd-ink);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: .7rem .85rem; min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd-book-input::placeholder { color: var(--dd-muted); }
.dd-book-input:hover { border-color: var(--dd-muted); }
.dd-book-input:focus { border-color: var(--dd-primary-600); box-shadow: 0 0 0 3px var(--dd-primary-050); }
textarea.dd-book-input { min-height: 118px; resize: vertical; line-height: 1.55; }
select.dd-book-input { appearance: auto; cursor: pointer; }

.dd-book-hint { font-size: .85rem; color: var(--dd-muted); margin: .4rem 0 0; }

/* validation — dark red for AA contrast, and always paired with text */
.dd-book-validation { display: block; font-size: .85rem; font-weight: 500; color: var(--dd-primary-800); margin-top: .35rem; }
.dd-book-validation:empty { display: none; }
.dd-book-summary { border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); background: #fff; border-radius: var(--dd-r); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.dd-book-summary ul { margin: 0; padding-left: 1.15rem; color: var(--dd-primary-800); font-size: .92rem; }
.dd-book-summary ul:empty { display: none; }
.dd-book-summary p { margin: 0 0 .4rem; font-weight: 650; color: var(--dd-ink); font-size: .93rem; }
/* the framework stamps validation-summary-valid while ModelState is clean; scoped
   under .dd-book-form so this can never affect a form on another page */
.dd-book-form .dd-book-summary.validation-summary-valid { display: none; }

/* submitted-request confirmation, rendered server-side (no toast, no script) */
.dd-book-status { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal); border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-bottom: 1.75rem; }
.dd-book-status i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-book-status strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .25rem; }
.dd-book-status p { color: var(--dd-ink-soft); font-size: .95rem; margin: 0; }

/* support panel */
.dd-book-support { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--dd-shadow-sm); position: sticky; top: calc(var(--dd-nav-h) + 1.25rem); }
.dd-book-support h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 1rem; }
.dd-book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-book-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .94rem; }
.dd-book-list i { color: var(--dd-teal); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.dd-book-support__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--dd-primary-700); text-decoration: underline; }

/* what happens next — numbered sequence */
.dd-book-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); counter-reset: none; }
.dd-book-next li { position: relative; min-width: 0; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 1.3rem 1rem; text-align: center; box-shadow: var(--dd-shadow-sm); }
.dd-book-next__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700); font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.dd-book-next b { display: block; font-size: .95rem; font-weight: 650; }
.dd-book-next p { color: var(--dd-muted); font-size: .87rem; margin: .35rem 0 0; line-height: 1.45; }

/* availability + privacy panels */
.dd-book-availability, .dd-book-privacy { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm); max-width: 900px; margin-inline: auto; }
.dd-book-availability > p, .dd-book-privacy > p { color: var(--dd-muted); margin: 0 0 1.4rem; }
.dd-book-availability .dd-book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; }

/* emergency panel */
.dd-book-emergency { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary); border-radius: var(--dd-r); padding: 1.25rem 1.4rem; max-width: 900px; margin-inline: auto; }
.dd-book-emergency i { color: var(--dd-primary-700); font-size: 1.35rem; line-height: 1.4; flex-shrink: 0; }
/* billing-guidance variant: teal accent so it reads as information, not as the
   red safety warning. Icon + bold label carry the meaning, never colour alone. */
.dd-book-emergency--billing { border-left-color: var(--dd-teal); }
.dd-book-emergency--billing i { color: var(--dd-teal); }
.dd-book-emergency strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .3rem; }
.dd-book-emergency p { color: var(--dd-ink-soft); font-size: .97rem; margin: 0; }

/* alternative support CTA */
.dd-book-help { max-width: 680px; margin-inline: auto; text-align: center; }
.dd-book-help h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1rem; }
.dd-book-help p { color: var(--dd-muted); font-size: 1.02rem; margin: 0 auto 2rem; max-width: 52ch; }
.dd-book-help__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

@media (max-width: 991px) {
  .dd-book-layout { grid-template-columns: 1fr; }
  .dd-book-support { position: static; }
  .dd-book-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-book-grid { grid-template-columns: 1fr; }
  .dd-book-next { grid-template-columns: 1fr; }
  .dd-book-availability .dd-book-list { grid-template-columns: 1fr; }
  .dd-book-help__actions .dd-btn { width: 100%; }
}

/* ==========================================================================
   FEEDBACK PAGE (dd-feedback-*)
   ========================================================================== */

/* --- hero --- */
/* The feedback hero's own action class is gone: that hero now uses the shared
   .dd-hero__actions like every other one. */

/* --- purpose --- */
.dd-feedback-purpose__grid { margin-top: clamp(2rem, 4vw, 3rem); }
.dd-feedback-purpose__note {
  display: flex; gap: .85rem; align-items: flex-start;
  max-width: 820px; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.15rem 1.35rem;
  color: var(--dd-ink-soft); font-size: .95rem;
}
.dd-feedback-purpose__note i { color: var(--dd-teal); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }

/* --- form layout --- */
.dd-feedback-layout {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.dd-feedback-form {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--dd-shadow-sm);
}
.dd-feedback-form fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.dd-feedback-form legend {
  padding: 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dd-primary-700); margin-bottom: 1rem;
}

/* --- fields --- */
.dd-feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.dd-feedback-field { display: flex; flex-direction: column; min-width: 0; }
.dd-feedback-label { font-size: .9rem; font-weight: 600; color: var(--dd-ink); margin-bottom: .4rem; }
.dd-feedback-required { color: var(--dd-primary-700); margin-left: .15rem; }
.dd-feedback-input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--dd-ink);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  padding: .7rem .85rem; min-height: 44px;
}
.dd-feedback-input:hover { border-color: var(--dd-muted); }
.dd-feedback-input:focus { border-color: var(--dd-primary-600); box-shadow: 0 0 0 3px var(--dd-primary-050); }
.dd-feedback-textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.dd-feedback-hint { font-size: .85rem; color: var(--dd-muted); margin: .4rem 0 0; line-height: 1.5; }

/* --- rating group --- */
.dd-feedback-rating .dd-feedback-hint { margin: -.5rem 0 .9rem; }
.dd-feedback-rating__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.dd-feedback-rating__option { min-width: 0; }
.dd-feedback-rating__option input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dd-feedback-rating__option label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; min-height: 66px; height: 100%; padding: .55rem .3rem; cursor: pointer;
  text-align: center; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  background: #fff; color: var(--dd-ink-soft); font-size: .76rem; line-height: 1.25;
}
.dd-feedback-rating__option label span:first-child { font-size: 1.15rem; font-weight: 700; color: var(--dd-ink); }
.dd-feedback-rating__option label:hover { border-color: var(--dd-muted); }
.dd-feedback-rating__option input:checked + label {
  border-color: var(--dd-primary-600); border-width: 2px; padding: calc(.55rem - 1px) calc(.3rem - 1px);
  background: var(--dd-primary-050); color: var(--dd-primary-800); font-weight: 600;
}
.dd-feedback-rating__option input:checked + label span:first-child { color: var(--dd-primary-800); }
.dd-feedback-rating__option input:focus-visible + label { outline: 3px solid var(--dd-primary); outline-offset: 2px; }

/* --- validation --- */
.dd-feedback-validation { display: block; font-size: .85rem; font-weight: 500; color: var(--dd-primary-800); margin-top: .35rem; }
.dd-feedback-validation:empty { display: none; }
.dd-feedback-summary {
  border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-primary);
  background: #fff; border-radius: var(--dd-r); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.dd-feedback-summary p { margin: 0 0 .4rem; font-weight: 650; color: var(--dd-ink); font-size: .93rem; }
.dd-feedback-summary ul { margin: 0; padding-left: 1.15rem; color: var(--dd-primary-800); font-size: .92rem; }
.dd-feedback-summary ul:empty { display: none; }
.dd-feedback-form .dd-feedback-summary.validation-summary-valid { display: none; }

/* --- success status --- */
.dd-feedback-status {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.15rem 1.35rem; margin-bottom: 1.75rem;
}
.dd-feedback-status i { color: var(--dd-teal); font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; }
.dd-feedback-status strong { display: block; color: var(--dd-ink); font-size: .95rem; margin-bottom: .25rem; }
.dd-feedback-status p { color: var(--dd-ink-soft); font-size: .95rem; margin: 0; }

/* --- submit --- */
.dd-feedback-submit { border-top: 1px solid var(--dd-line); padding-top: 1.35rem; }
.dd-feedback-submit .dd-btn { width: 100%; justify-content: center; }
.dd-feedback-submit .dd-feedback-hint { text-align: center; margin-top: .75rem; }

/* --- aside --- */
.dd-feedback-aside {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--dd-shadow-sm);
  position: sticky; top: calc(var(--dd-nav-h) + 1.25rem);
}
.dd-feedback-aside h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 1rem; }
.dd-feedback-aside h2.dd-feedback-aside__second { margin-top: 1.75rem; }
.dd-feedback-aside__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  font-size: .9rem; font-weight: 600; color: var(--dd-primary-700); text-decoration: underline;
}
.dd-feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dd-feedback-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--dd-ink-soft); font-size: .94rem; }
.dd-feedback-list i { color: var(--dd-teal); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.dd-feedback-list--avoid i { color: var(--dd-primary-700); }

/* --- privacy --- */
.dd-feedback-privacy {
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-privacy > p { color: var(--dd-muted); margin: 0 0 1.4rem; }
.dd-feedback-privacy .dd-h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.dd-feedback-privacy__note {
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--dd-line);
  color: var(--dd-muted); font-size: .92rem;
}

/* --- what happens next --- */
.dd-feedback-next {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}
.dd-feedback-next li {
  position: relative; min-width: 0; background: #fff; border: 1px solid var(--dd-line);
  border-radius: var(--dd-r); padding: 1.3rem 1rem; text-align: center; box-shadow: var(--dd-shadow-sm);
}
.dd-feedback-next__num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--dd-pill); background: var(--dd-primary-050); color: var(--dd-primary-700);
  font-weight: 700; font-size: .85rem; margin-bottom: .6rem;
}
.dd-feedback-next b { display: block; font-size: .95rem; font-weight: 650; }
.dd-feedback-next p { color: var(--dd-muted); font-size: .87rem; margin: .35rem 0 0; line-height: 1.45; }

/* --- clinical panel --- */
.dd-feedback-clinical {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-clinical .dd-h3 { margin: 0 0 .5rem; }
.dd-feedback-clinical p { color: var(--dd-ink-soft); margin: 0 0 1.15rem; }
.dd-feedback-clinical__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- support --- */
.dd-feedback-support {
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem); box-shadow: var(--dd-shadow-sm);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-support h2 { margin: 0 0 .5rem; }
.dd-feedback-support p { color: var(--dd-ink-soft); margin: 0; max-width: 52ch; }

/* --- emergency --- */
.dd-feedback-emergency {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 5px solid var(--dd-primary-700);
  border-radius: var(--dd-r-lg); padding: clamp(1.4rem, 3vw, 1.9rem);
  max-width: 900px; margin-inline: auto;
}
.dd-feedback-emergency i { color: var(--dd-primary-700); font-size: 1.5rem; line-height: 1.3; flex-shrink: 0; }
.dd-feedback-emergency .dd-h3 { margin: 0 0 .45rem; }
.dd-feedback-emergency p { color: var(--dd-ink-soft); margin: 0; }

/* --- final CTA --- */
.dd-feedback-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* --- responsive --- */
@media (max-width: 991px) {
  .dd-feedback-layout { grid-template-columns: 1fr; }
  .dd-feedback-aside { position: static; }
  .dd-feedback-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dd-feedback-rating__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-feedback-grid { grid-template-columns: 1fr; }
  .dd-feedback-next { grid-template-columns: 1fr; }
  .dd-feedback-rating__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-feedback-cta .dd-btn,
  .dd-feedback-clinical__actions .dd-btn,
  .dd-feedback-support > .dd-btn { width: 100%; justify-content: center; }
  .dd-feedback-support { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   PRIVACY PAGE (dd-privacy-*)
   ========================================================================== */

/* --- layout --- */
.dd-privacy-body { padding-top: clamp(2rem, 4vw, 3rem); }
.dd-privacy-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start;
}

/* --- in-page navigation --- */
.dd-privacy-nav {
  position: sticky; top: calc(var(--dd-nav-h) + 1.25rem);
  background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
  padding: 1.35rem 1.4rem; box-shadow: var(--dd-shadow-sm);
}
.dd-privacy-nav h2 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dd-primary-700); margin: 0 0 .9rem; }
.dd-privacy-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dd-privacy-nav a { display: block; font-size: .9rem; line-height: 1.4; color: var(--dd-ink-soft); text-decoration: none; }
.dd-privacy-nav a:hover { color: var(--dd-primary-700); text-decoration: underline; }
.dd-privacy-nav a:focus-visible { outline: 3px solid var(--dd-primary); outline-offset: 2px; border-radius: 3px; }

/* --- content --- */
.dd-privacy-content { min-width: 0; }
.dd-privacy-section { scroll-margin-top: calc(var(--dd-nav-h) + 1.5rem); }
.dd-privacy-section + .dd-privacy-section { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--dd-line); }
.dd-privacy-section .dd-h2 { margin: 0 0 1rem; }
.dd-privacy-section .dd-h3 { margin: 1.6rem 0 .5rem; font-size: 1.02rem; }
.dd-privacy-section .dd-h3:first-of-type { margin-top: 1.1rem; }
.dd-privacy-section p { color: var(--dd-ink-soft); margin: 0 0 1rem; max-width: 68ch; }
.dd-privacy-section a { color: var(--dd-primary-700); text-decoration: underline; }

/* --- lists --- */
.dd-privacy-list { margin: 0 0 1.25rem; padding-left: 1.3rem; color: var(--dd-ink-soft); max-width: 68ch; }
.dd-privacy-list li { margin-bottom: .55rem; line-height: 1.6; }
.dd-privacy-list li:last-child { margin-bottom: 0; }
.dd-privacy-list strong { color: var(--dd-ink); }

/* --- inline note --- */
.dd-privacy-note {
  background: var(--dd-primary-050); border-left: 4px solid var(--dd-primary-600);
  border-radius: var(--dd-r); padding: .9rem 1.15rem;
  font-size: .93rem; color: var(--dd-ink-soft); margin: 1.25rem 0 0; max-width: 68ch;
}

/* --- security notice --- */
.dd-privacy-notice {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
  border-radius: var(--dd-r); padding: 1.05rem 1.25rem; margin-top: 1.25rem; max-width: 68ch;
}
.dd-privacy-notice i { color: var(--dd-teal); font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.dd-privacy-notice p { margin: 0; font-size: .94rem; }

/* --- emergency panel --- */
.dd-privacy-emergency {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--dd-line); border-left: 5px solid var(--dd-primary-700);
  border-radius: var(--dd-r-lg); padding: clamp(1.3rem, 3vw, 1.8rem); max-width: 68ch;
}
.dd-privacy-emergency i { color: var(--dd-primary-700); font-size: 1.45rem; line-height: 1.3; flex-shrink: 0; }
.dd-privacy-emergency .dd-h3 { margin: 0 0 .45rem; }
.dd-privacy-emergency p { margin: 0; }

/* --- final CTA --- */
.dd-privacy-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* --- responsive --- */
@media (max-width: 991px) {
  .dd-privacy-layout { grid-template-columns: 1fr; }
  .dd-privacy-nav { position: static; }
  .dd-privacy-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; }
}
@media (max-width: 640px) {
  .dd-privacy-nav ul { grid-template-columns: 1fr; }
  .dd-privacy-cta .dd-btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   Teleclinic positioning
   ===========================================================================

   Components added for the digital-teleclinic homepage. Everything below reuses
   the existing tokens - no new palette, no second framework, no gradients
   beyond the section tint already in use. */

/* ---------- Consult. Coordinate. Continue Care. ---------- */
.dd-tagline {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--dd-ink);
}

.dd-tagline span { position: relative; }

/* A short rule under each word rather than a bullet between them: it reads as
   three steps without adding a character a screen reader has to announce. */
.dd-tagline span::after {
    content: "";
    display: block;
    height: 2px;
    width: 1.6rem;
    margin-top: .3rem;
    border-radius: 2px;
    background: var(--dd-primary);
    opacity: .65;
}

.dd-tagline--center { justify-content: center; margin: 1.25rem 0 1.75rem; }

/* ---------- three pillars ---------- */
.dd-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.dd-pillar {
    position: relative;
    background: #fff;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r-lg);
    padding: 1.9rem 1.6rem 1.6rem;
    box-shadow: var(--dd-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dd-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--dd-shadow);
    border-color: var(--dd-primary-100);
}

.dd-pillar__step {
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--dd-line);
}

.dd-pillar > i {
    font-size: 1.6rem;
    color: var(--dd-primary);
    display: block;
    margin-bottom: .75rem;
}

.dd-pillar h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--dd-ink);
    margin: 0 0 .5rem;
}

.dd-pillar p { margin: 0; color: var(--dd-muted); line-height: 1.65; }

/* ---------- care journey ----------
   A numbered list rendered as a connected path. The connector is drawn on the
   list item rather than inserted as markup, so nothing decorative reaches the
   accessibility tree and the order survives with CSS off. */
.dd-journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.dd-journey__step {
    position: relative;
    padding: 0 .75rem;
    text-align: center;
}

.dd-journey__step::before {
    content: "";
    position: absolute;
    top: 27px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--dd-line);
    z-index: 0;
}

.dd-journey__step:first-child::before { display: none; }

.dd-journey__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--dd-line);
    box-shadow: var(--dd-shadow-sm);
    color: var(--dd-primary);
    font-size: 1.15rem;
}

.dd-journey h3 {
    font-size: .92rem;
    margin: 0 0 .35rem;
    color: var(--dd-ink);
    line-height: 1.35;
}

.dd-journey p { margin: 0; font-size: .85rem; color: var(--dd-muted); line-height: 1.55; }

/* ---------- split section ---------- */
.dd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* ---------- patient portal representation ----------
   Built from the portal's real navigation labels rather than a screenshot or a
   stock photograph. It is decorative (aria-hidden); the prose beside it carries
   the meaning. */
.dd-portal-ui {
    background: #fff;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r-lg);
    box-shadow: var(--dd-shadow);
    overflow: hidden;
}

.dd-portal-ui__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1rem;
    background: var(--dd-bg-soft);
    border-bottom: 1px solid var(--dd-line);
}

.dd-portal-ui__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--dd-line);
}

.dd-portal-ui__title {
    margin-left: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--dd-muted);
}

.dd-portal-ui__body { display: grid; grid-template-columns: 150px 1fr; }

.dd-portal-ui__nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem .75rem;
    border-right: 1px solid var(--dd-line);
    background: #fff;
}

.dd-portal-ui__nav span {
    font-size: .78rem;
    color: var(--dd-muted);
    padding: .38rem .55rem;
    border-radius: 8px;
    white-space: nowrap;
}

.dd-portal-ui__nav .is-active {
    background: var(--dd-primary-050);
    color: var(--dd-primary-700);
    font-weight: 600;
}

.dd-portal-ui__panel { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; }

.dd-portal-ui__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r);
    background: var(--dd-bg-soft);
}

.dd-portal-ui__label { font-size: .76rem; color: var(--dd-muted); }
.dd-portal-ui__value { font-size: .82rem; font-weight: 600; color: var(--dd-ink); text-align: right; }

/* ---------- closing call to action ---------- */
.dd-section--cta {
    background: linear-gradient(180deg, var(--dd-bg-soft) 0%, var(--dd-primary-050) 100%);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .dd-pillars { grid-template-columns: 1fr; }
    .dd-split { grid-template-columns: 1fr; }

    /* Two rows of three keeps the sequence readable on a tablet without the
       connector line implying a wrap that is not there. */
    .dd-journey { grid-template-columns: repeat(3, 1fr); row-gap: 2.25rem; }
    .dd-journey__step:nth-child(3n+1)::before { display: none; }
}

@media (max-width: 720px) {
    /* Stacked: dot on the left, text on the right, connector running vertically
       between them. No horizontal scrolling and no shrunken text. */
    .dd-journey { grid-template-columns: 1fr; row-gap: 0; }

    .dd-journey__step {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 1rem;
        text-align: left;
        padding: 0 0 1.6rem;
    }

    .dd-journey__step::before {
        top: 54px;
        left: 26px;
        width: 2px;
        height: calc(100% - 54px);
    }

    .dd-journey__step:last-child::before { display: none; }
    .dd-journey__step:first-child::before { display: block; }
    .dd-journey__dot { margin: 0; }

    .dd-portal-ui__body { grid-template-columns: 1fr; }

    .dd-portal-ui__nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--dd-line);
    }
}

/* Anchored sections must clear the fixed header.
   The "For Doctors" navigation item links to /#for-doctors, and without this the
   section heading lands underneath the nav bar instead of below it. */
#services,
#portal,
#for-doctors,
.dd-section [id] {
    scroll-margin-top: calc(var(--dd-nav-h) + 12px);
}

/* ============================================================================
   BRAND AUTHORITY — breadcrumbs, doctor profiles, Health Library, press,
   partners.

   Built from the tokens and the existing primitives above (.dd-section,
   .dd-container, .dd-card, .dd-grid, .dd-narrow) so these pages inherit the
   site's spacing, type scale and colour rather than restating it.

   Every grid here uses auto-fit/minmax rather than a fixed column count, so
   nothing needs a breakpoint to stop overflowing at 390px - the track count
   falls on its own. The two media queries at the end handle the things minmax
   cannot: a stacked definition list and a smaller portrait.
   ========================================================================= */

/* ---------------------------------------------------------- breadcrumbs ---- */

.dd-crumbs { padding: 1rem 0 0; font-size: .86rem; }

.dd-crumbs ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem;
}

/* The separator is a pseudo-element, so a screen reader reads
   "Home, Doctors, Dr Hamna Irfan" rather than a chevron between each step. */
.dd-crumbs li + li::before {
    content: "/"; margin-right: .5rem; color: var(--dd-line); font-weight: 600;
}

.dd-crumbs a { color: var(--dd-muted); text-decoration: none; }
.dd-crumbs a:hover, .dd-crumbs a:focus-visible { color: var(--dd-primary-700); text-decoration: underline; }
.dd-crumbs [aria-current="page"] { color: var(--dd-ink); font-weight: 600; }

/* ------------------------------------------------- doctor directory links -- */

/* The card name became a link. Inherit the ink colour rather than turn blue:
   the card already reads as one unit, and the hover colour is the signal. */
.dd-docdir__name a { color: inherit; text-decoration: none; }
.dd-docdir__name a:hover, .dd-docdir__name a:focus-visible {
    color: var(--dd-primary-700); text-decoration: underline;
}

/* ---------------------------------------------------- doctor profile page -- */

.dd-docp-head { padding-top: clamp(1.75rem, 4vw, 3rem); }

.dd-docp-head__grid {
    display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

/* Fixed box plus object-fit, matching the directory card: portraits are shot at
   different crops, and width/height on the element reserves the space before
   the file arrives so the heading beside it does not jump. */
.dd-docp-portrait {
    width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
    object-position: 50% 25%; border: 4px solid #fff; box-shadow: var(--dd-shadow);
}

.dd-docp-title { margin: .25rem 0 0; color: var(--dd-primary-600); font-weight: 650; font-size: 1.05rem; }

.dd-docp-verified {
    display: inline-flex; align-items: center; gap: .4rem; margin: .85rem 0 0;
    padding: .3rem .7rem; border-radius: var(--dd-pill);
    background: var(--dd-teal-050); color: #0b6b62;
    font-size: .84rem; font-weight: 600;
}
.dd-docp-verified i { color: var(--dd-teal); }

.dd-docp-focus { margin: 1rem 0 0; color: var(--dd-ink-soft); max-width: 52ch; }

.dd-docp-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

.dd-docp-lead { margin: 0 0 1.5rem; max-width: 60ch; }
.dd-docp-subhead { margin-top: 2rem; }

/* Professional facts. A definition list because that is what it is: each row is
   a term and its value. */
.dd-docp-facts { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.dd-docp-facts > div {
    display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--dd-line);
}
.dd-docp-facts dt { color: var(--dd-muted); font-size: .9rem; font-weight: 600; }
.dd-docp-facts dd { margin: 0; color: var(--dd-ink); }
.dd-docp-facts__note { display: block; color: var(--dd-muted); font-size: .86rem; margin-top: .15rem; }

.dd-docp-tags { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dd-docp-tags li {
    padding: .35rem .8rem; border-radius: var(--dd-pill);
    background: var(--dd-bg-soft); border: 1px solid var(--dd-line);
    font-size: .88rem; color: var(--dd-ink-soft);
}

.dd-docp-bio { color: var(--dd-ink-soft); max-width: 68ch; }

.dd-docp-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.dd-docp-steps li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); }
.dd-docp-steps i { color: var(--dd-primary); font-size: 1.05rem; flex-shrink: 0; margin-top: .15rem; }

.dd-docp-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.dd-docp-articles > li { padding-bottom: 1.25rem; border-bottom: 1px solid var(--dd-line); }
.dd-docp-articles > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dd-docp-articles a { font-weight: 650; color: var(--dd-ink); }
.dd-docp-articles a:hover, .dd-docp-articles a:focus-visible { color: var(--dd-primary-700); }
.dd-docp-articles p { margin: .35rem 0 0; color: var(--dd-muted); font-size: .95rem; }
.dd-docp-articles__meta { font-size: .85rem; color: var(--dd-muted); }

/* ---------------------------------------------------------- health library -- */

.dd-hl-lead { margin: 0 0 2rem; }

.dd-hl-standard { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.dd-hl-standard > li { display: flex; gap: 1rem; align-items: flex-start; }
.dd-hl-standard i {
    color: var(--dd-primary); font-size: 1.35rem; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--dd-primary-050);
    display: flex; align-items: center; justify-content: center;
}
.dd-hl-standard p { margin: .25rem 0 0; color: var(--dd-muted); max-width: 62ch; }

.dd-hl-articles {
    list-style: none; margin: 1.75rem 0 0; padding: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.dd-hl-articles .dd-h3 { margin-bottom: .5rem; }
.dd-hl-articles .dd-h3 a { color: var(--dd-ink); text-decoration: none; }
.dd-hl-articles .dd-h3 a:hover, .dd-hl-articles .dd-h3 a:focus-visible {
    color: var(--dd-primary-700); text-decoration: underline;
}
.dd-hl-articles__cat {
    margin: 0 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dd-primary-600);
}
.dd-hl-articles__meta { margin-top: .75rem !important; font-size: .85rem; }

.dd-hl-topics {
    list-style: none; margin: 1.75rem 0 0; padding: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.dd-hl-topic {
    background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg);
    padding: 1.4rem; box-shadow: var(--dd-shadow-sm);
    display: flex; flex-direction: column;
}
.dd-hl-topic p { color: var(--dd-muted); margin: 0; font-size: .93rem; line-height: 1.6; }
.dd-hl-topic .dd-h3 a { color: var(--dd-ink); text-decoration: none; }
.dd-hl-topic .dd-h3 a:hover, .dd-hl-topic .dd-h3 a:focus-visible {
    color: var(--dd-primary-700); text-decoration: underline;
}
.dd-hl-topic__count {
    margin-top: auto !important; padding-top: .9rem;
    font-size: .82rem; font-weight: 600; color: var(--dd-primary-600) !important;
}

/* A topic with nothing published in it. Visibly quieter, because it is not a
   link and dressing it as one wastes a reader's tap. */
.dd-hl-topic--pending { background: var(--dd-bg-soft); box-shadow: none; }
.dd-hl-topic--pending .dd-h3 { color: var(--dd-ink-soft); }
.dd-hl-topic--pending .dd-hl-topic__count { color: var(--dd-muted) !important; font-weight: 500; }

.dd-hl-back { margin: 1.5rem 0 0; }

/* ------------------------------------------------------ medical disclaimer -- */

.dd-med-note {
    border: 1px solid var(--dd-line); border-left: 4px solid var(--dd-teal);
    border-radius: var(--dd-r); background: var(--dd-teal-050);
    padding: 1.15rem 1.35rem; margin: 0;
}
.dd-med-note p {
    display: flex; gap: .7rem; align-items: flex-start; margin: 0;
    color: var(--dd-ink-soft); font-size: .93rem; line-height: 1.65;
}
.dd-med-note p + p { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(14,148,136,.18); }
.dd-med-note i { flex-shrink: 0; margin-top: .2rem; color: var(--dd-teal); }
.dd-med-note a { color: var(--dd-primary-700); font-weight: 600; text-decoration: underline; }
.dd-med-note__urgent i { color: var(--dd-primary-700); }

/* ------------------------------------------------------------------ article -- */

.dd-article__head { padding-bottom: 0; }
.dd-article__head h1 {
    font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.12;
    letter-spacing: -.02em; margin: .4rem 0 .85rem;
}
.dd-article__summary { margin: 0; max-width: 64ch; }
.dd-article .dd-eyebrow a { color: inherit; text-decoration: none; }
.dd-article .dd-eyebrow a:hover, .dd-article .dd-eyebrow a:focus-visible { text-decoration: underline; }

.dd-article__review {
    display: flex; gap: 1rem; align-items: center; margin-top: 1.75rem;
    padding: 1rem 1.15rem; border: 1px solid var(--dd-line);
    border-radius: var(--dd-r); background: var(--dd-bg-soft);
}
.dd-article__review img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    object-position: 50% 25%; flex-shrink: 0;
}
.dd-article__review-by { margin: 0; font-size: .95rem; font-weight: 600; color: var(--dd-ink); }
.dd-article__review-by a { color: var(--dd-primary-700); }
.dd-article__review-when { margin: .2rem 0 0; font-size: .85rem; color: var(--dd-muted); }
.dd-article__dot { margin: 0 .35rem; }

.dd-article__body .dd-h2 { margin-top: 2.5rem; }
.dd-article__body > .dd-container > p { color: var(--dd-ink-soft); line-height: 1.75; max-width: 68ch; }
.dd-article__body .dd-med-note { margin-bottom: 1rem; }

.dd-article__refs { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--dd-muted); font-size: .92rem; }
.dd-article__refs li { margin-bottom: .45rem; }

.dd-article__next { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: .85rem; }
.dd-article__next li { display: flex; gap: .75rem; align-items: flex-start; color: var(--dd-ink-soft); }
.dd-article__next i { color: var(--dd-primary); flex-shrink: 0; margin-top: .2rem; }
.dd-article__next a { color: var(--dd-primary-700); font-weight: 600; }

/* -------------------------------------------------------------------- press -- */

.dd-press-facts { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.dd-press-facts > div {
    display: grid; grid-template-columns: 13rem 1fr; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--dd-line);
}
.dd-press-facts dt { color: var(--dd-muted); font-size: .9rem; font-weight: 600; }
.dd-press-facts dd { margin: 0; color: var(--dd-ink); }

.dd-press-note { color: var(--dd-muted); font-size: .93rem; max-width: 66ch; }
.dd-press-subhead { margin-top: 2rem; }

.dd-press-boiler { margin: 1.5rem 0 0; }
.dd-press-boiler p + p { margin-top: .85rem; }

.dd-press-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.dd-press-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--dd-ink-soft); line-height: 1.6; }
.dd-press-list i { color: var(--dd-primary); flex-shrink: 0; margin-top: .25rem; }

.dd-press-asset {
    margin-top: 1.5rem; padding: 1.75rem; text-align: center;
    border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: #fff;
}
.dd-press-asset img { max-width: 100%; height: auto; }
.dd-press-asset p { margin: 1.25rem 0 0; }
.dd-press-asset a { color: var(--dd-primary-700); font-weight: 600; }

/* ----------------------------------------------------------------- partners -- */

.dd-pt-grid { margin-top: 1.75rem; }
.dd-pt-card__link { margin-top: .85rem !important; }
.dd-pt-card__link a { color: var(--dd-primary-700); font-weight: 600; font-size: .92rem; }

.dd-pt-steps { margin: 1.75rem 0 0; padding-left: 1.5rem; display: grid; gap: 1.5rem; }
.dd-pt-steps li { padding-left: .5rem; }
.dd-pt-steps li::marker { color: var(--dd-primary); font-weight: 700; }
.dd-pt-steps p { margin: .3rem 0 0; color: var(--dd-muted); max-width: 62ch; }

/* -------------------------------------------------------- about: more links -- */

.dd-ab-more { margin-top: 1.75rem; }
.dd-ab-more a.dd-card { text-decoration: none; display: block; }
.dd-ab-more a.dd-card .dd-h3 { color: var(--dd-ink); }
.dd-ab-more a.dd-card:hover .dd-h3, .dd-ab-more a.dd-card:focus-visible .dd-h3 { color: var(--dd-primary-700); }

/* ------------------------------------------------------------ narrow screens -- */

@media (max-width: 767px) {
    /* Portrait above the name rather than beside it: a 200px column plus a
       heading does not fit a 390px viewport without the heading wrapping to one
       word per line. */
    .dd-docp-head__grid { grid-template-columns: 1fr; justify-items: start; }
    .dd-docp-portrait { width: 148px; height: 148px; }

    /* Stacked, so a 13rem term column cannot push the value off the side. This
       is the only horizontal-overflow risk on these pages - every other grid
       above is auto-fit and loses tracks on its own. */
    .dd-docp-facts > div,
    .dd-press-facts > div { grid-template-columns: 1fr; gap: .25rem; }

    .dd-article__review { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .dd-crumbs { font-size: .8rem; }
    .dd-docp-cta .dd-btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------- availability vs verification ----

   The doctor badge used to be a single teal "Verified provider" mark on every
   card, every profile and every homepage tile. It is now two different
   statements, and they must not look the same.

   Teal, the trust colour used elsewhere on this site for safeguards, stays
   reserved for a credential check that has actually been recorded. The neutral
   variant is what a doctor without one gets: a plain statement that they are
   available to consult, in muted ink, carrying no implication of having been
   checked. Same position and same size, so a row of cards still lines up.

   The distinction is not left to colour alone - the wording differs, which is
   what a screen reader and a colour-blind reader actually get. */

.dd-docdir__verified--neutral,
.dd-docp-verified--neutral {
    color: var(--dd-muted);
    background: var(--dd-bg-soft);
}

.dd-docdir__verified--neutral i,
.dd-docp-verified--neutral i { color: var(--dd-muted); }

.dd-doc__badge--neutral { color: var(--dd-muted); font-weight: 500; }