/* =========================================================
   Diamond Dental design system
   Palette: Modern Boutique. Pink is an accent only.
   ========================================================= */

:root {
  --dd-base:   #F8F7F4;   /* primary base */
  --dd-ink:    #1E242A;   /* dark neutral */
  --dd-stone:  #E8E4DF;   /* secondary neutral */
  --dd-accent: #CC4372;   /* logo pink, used sparingly */
  --dd-muted:  #6A6E73;   /* body grey */
  --dd-line:   #DEDAD3;
  --dd-white:  #FFFFFF;

  --dd-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --dd-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --dd-radius: 20px;
  --dd-pill:   9999px;
  --dd-wrap:   1180px;
  --dd-gutter: 24px;
}

/* ---------- base ---------- */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--dd-base);
  color: var(--dd-ink);
  font-family: var(--dd-sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body p { color: var(--dd-muted); }

h1, h2, h3, h4 {
  font-family: var(--dd-serif);
  font-weight: 400;
  color: var(--dd-ink);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.15rem; line-height: 1.3; }

h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Uppercase micro-label above a heading */
.dd-eyebrow {
  font-family: var(--dd-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-accent);
  margin: 0 0 1rem;
}

.dd-lead { font-size: 1.18rem; line-height: 1.6; color: var(--dd-muted); }

/* Hello Elementor resets that fight the design */
.site-header, .site-footer { display: none; }

/* ---------- Elementor kit overrides ----------
   Elementor's default kit sets its own heading typography and colour on
   .elementor-heading-title and its text-editor colour, which otherwise wins
   over the element selectors above. */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--dd-serif);
  font-weight: 400;
  color: var(--dd-ink);
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.6rem, 6vw, 4.5rem); }
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2rem, 4vw, 3rem); }
.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
.elementor-widget-heading .elementor-heading-title em { font-style: italic; font-weight: 400; }

.dd-hero .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.7rem, 6.2vw, 4.75rem);
  line-height: 1.02;
}
.dd-pagehead .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p { color: var(--dd-muted); font-family: var(--dd-sans); }
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-html h2,
.elementor-widget-html h3 { font-family: var(--dd-serif); color: var(--dd-ink); font-weight: 400; }

.dd-band-ink .elementor-widget-heading .elementor-heading-title { color: var(--dd-base); }
.dd-band-ink .elementor-widget-text-editor,
.dd-band-ink .elementor-widget-text-editor p { color: rgba(248, 247, 244, .78); }

/* Elementor injects its own widget spacing; keep the rhythm ours.
   Elementor zeroes the margin on .elementor-heading-title itself, so the gap
   after a heading has to come from the widget wrapper.

   Specificity note: Elementor's rule is `.elementor-widget:not(:last-child)`,
   which is (0,2,0) because :not() contributes its argument's specificity, and
   it sets the logical `margin-block-end`. Every rule below therefore matches
   at (0,3,0) and sets `margin-bottom`, so it wins on both specificity and
   cascade order. A bare `.elementor-widget-heading` (0,1,0) silently loses. */

.elementor-widget.elementor-widget-heading:not(:last-child) { margin-bottom: 1.5rem; }
.elementor-widget.elementor-widget-text-editor:not(:last-child) { margin-bottom: 1.75rem; }
.elementor-widget.elementor-widget-html:not(:last-child) { margin-bottom: 1.75rem; }
.elementor-widget.elementor-widget-image:not(:last-child) { margin-bottom: 1.75rem; }

/* An eyebrow sits tight to the heading it introduces. */
.elementor-widget.elementor-widget-html:not(:last-child):has(.dd-eyebrow) { margin-bottom: 0; }
.dd-eyebrow { margin-bottom: .85rem; }

.dd-hero .elementor-widget.elementor-widget-heading:not(:last-child) { margin-bottom: 1.75rem; }
.dd-hero .elementor-widget.elementor-widget-text-editor:not(:last-child) { margin-bottom: 2.25rem; }
.dd-pagehead .elementor-widget.elementor-widget-heading:not(:last-child) { margin-bottom: 1.5rem; }

/* Card and quote grids need clear air under the heading block above them. */
.elementor-widget.elementor-widget-html:has(.dd-grid) { margin-top: .5rem; }

/* ---------- layout ---------- */

.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--dd-wrap); }

.dd-section { padding: clamp(64px, 8vw, 112px) 0; }
.dd-section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.dd-band-stone { background: var(--dd-stone); }
.dd-band-ink   { background: var(--dd-ink); }
.dd-band-ink, .dd-band-ink h1, .dd-band-ink h2, .dd-band-ink h3 { color: var(--dd-base); }
.dd-band-ink p { color: rgba(248, 247, 244, .78); }
.dd-band-white { background: var(--dd-white); }

/* ---------- buttons: Dentologie pill pair ---------- */

/* Specificity note: the Elementor kit emits `.elementor-kit-N a{color:...}`
   (0,1,1) from a stylesheet that loads after this one, so every button rule
   below is written at 0,2,1 or higher to stay in control. */

a.dd-btn,
.dd-btns a.dd-btn,
.elementor-button.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--dd-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 1.05rem 2rem;
  border-radius: var(--dd-pill);
  border: 1px solid var(--dd-ink);
  background: var(--dd-ink);
  color: var(--dd-base);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.dd-btns a.dd-btn:hover, a.dd-btn:hover, .elementor-button.dd-btn:hover { background: #2C343C; border-color: #2C343C; color: var(--dd-base); }

.dd-btns a.dd-btn--ghost, a.dd-btn--ghost, .elementor-button.dd-btn--ghost {
  background: transparent;
  color: var(--dd-ink);
  border-color: var(--dd-ink);
}
.dd-btns a.dd-btn--ghost:hover, a.dd-btn--ghost:hover, .elementor-button.dd-btn--ghost:hover { background: var(--dd-ink); color: var(--dd-base); }

.dd-btns a.dd-btn--accent, a.dd-btn--accent, .elementor-button.dd-btn--accent {
  background: var(--dd-accent);
  border-color: var(--dd-accent);
  color: #fff;
}
.dd-btns a.dd-btn--accent:hover, a.dd-btn--accent:hover, .elementor-button.dd-btn--accent:hover { background: #B63A64; border-color: #B63A64; }

.dd-btns a.dd-btn--light, a.dd-btn--light, .elementor-button.dd-btn--light {
  background: var(--dd-base); color: var(--dd-ink); border-color: var(--dd-base);
}

.dd-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.dd-btns--center { justify-content: center; }

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

.dd-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--dd-base);
  border-bottom: 1px solid var(--dd-line);
}

.dd-header-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px var(--dd-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo big at the top — the client's first requirement. */
.dd-logo { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; color: var(--dd-ink); }
.dd-logo img { display: block; height: 92px; width: auto; }
.dd-logo .dd-mark { display: block; height: 62px; width: auto; flex-shrink: 0; }

.dd-logo-text { display: flex; flex-direction: column; gap: 4px; }
.dd-logo-name {
  font-family: var(--dd-serif);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--dd-ink);
}
.dd-logo-sub {
  font-family: var(--dd-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--dd-accent);
}

.dd-nav { display: flex; align-items: center; gap: 4px; }

.dd-nav ul,
.dd-nav .dd-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dd-nav li { margin: 0; list-style: none; }
.dd-nav li::marker { content: none; }

.dd-nav a, .dd-nav li a {
  font-size: 1.0625rem;   /* larger than typical: the practice serves older patients */
  font-weight: 500;
  color: var(--dd-ink);
  text-decoration: none;
  padding: .7rem 1rem;
  border-radius: var(--dd-pill);
  white-space: nowrap;
  transition: background .16s ease;
}
.dd-nav a:hover, .dd-nav a:focus-visible { background: var(--dd-stone); }
.dd-nav .current-menu-item > a { background: var(--dd-stone); }

.dd-header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dd-header-cta a.dd-btn { padding: .8rem 1.4rem; font-size: .95rem; }

.dd-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-pill);
  padding: .6rem 1rem;
  font: 500 1rem/1 var(--dd-sans);
  color: var(--dd-ink);
  cursor: pointer;
}

/* ---------- hero (Dentologie structure) ---------- */

.dd-hero { padding: clamp(56px, 7vw, 96px) var(--dd-gutter) 0; text-align: center; }
.dd-hero-inner { max-width: 940px; margin: 0 auto; }

.dd-hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.75rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
}

.dd-hero .dd-lead { max-width: 620px; margin: 0 auto 2rem; }
.dd-hero .dd-btns { justify-content: center; }

/* full-bleed rounded image under the hero */
.dd-hero-media {
  max-width: 1360px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 0 var(--dd-gutter);
}
.dd-hero-media img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 560px);
  object-fit: cover;
  border-radius: var(--dd-radius) var(--dd-radius) 0 0;
}

/* Non-depictive brand panel. Stands in for a real photograph that has not been
   supplied yet, without implying a place or a result. */
.dd-brandpanel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--dd-stone) 55%, #DCD6CE 100%);
  border-radius: var(--dd-radius) var(--dd-radius) 0 0;
  overflow: hidden;
}
.dd-brandpanel::before,
.dd-brandpanel::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(204,67,114,.10), rgba(204,67,114,.03));
  transform: rotate(45deg);
  border-radius: 12%;
}
.dd-brandpanel::before { left: -14%; bottom: -26%; }
.dd-brandpanel::after  { right: -16%; top: -30%; }

.dd-brandpanel-mark { position: relative; z-index: 1; opacity: .92; }
.dd-brandpanel-mark .dd-mark { height: clamp(84px, 12vw, 140px); width: auto; display: block; }

.dd-brandpanel--tall   { height: clamp(280px, 42vw, 560px); }
.dd-brandpanel--square { aspect-ratio: 4 / 3; border-radius: var(--dd-radius); }

.dd-stars { font-size: .98rem; color: var(--dd-muted); margin: 1.5rem 0 0; }
.dd-stars-glyph { color: var(--dd-accent); letter-spacing: .12em; }

/* Inner-page hero */
.dd-pagehead { padding: clamp(52px, 6vw, 84px) var(--dd-gutter) clamp(32px, 4vw, 48px); text-align: center; }
.dd-pagehead-inner { max-width: 820px; margin: 0 auto; }
.dd-pagehead h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }

/* ---------- diamond bullets ---------- */

.dd-diamonds { list-style: none; margin: 1.5rem 0; padding: 0; }
.dd-diamonds li {
  position: relative;
  padding: 0 0 0 2rem;
  margin: 0 0 .85rem;
  color: var(--dd-muted);
}
.dd-diamonds li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 10px;
  height: 10px;
  background: var(--dd-accent);
  transform: rotate(45deg);
  border-radius: 2px;
}
.dd-band-ink .dd-diamonds li { color: rgba(248, 247, 244, .82); }

/* ---------- cards ---------- */

.dd-grid { display: grid; gap: 24px; }
.dd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dd-grid--4 { grid-template-columns: repeat(4, 1fr); }

.dd-card {
  background: var(--dd-white);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dd-card h3 { margin-bottom: .6rem; }
.dd-card p { margin: 0 0 1.25rem; font-size: 1rem; }
.dd-card a.dd-card-link {
  margin-top: auto;
  font-family: var(--dd-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--dd-accent);
  padding-bottom: 2px;
  align-self: flex-start;
}
.dd-card a.dd-card-link:hover { color: var(--dd-accent); }

.dd-card--media { padding: 0; overflow: hidden; }
.dd-card--media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.dd-card--media .dd-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }

/* ---------- scrolling photo band ---------- */

.dd-marquee {
  --dd-marquee-speed: 60s;
  display: flex;
  gap: 18px;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dd-marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dd-scroll var(--dd-marquee-speed) linear infinite;
}

.dd-marquee:hover .dd-marquee-track { animation-play-state: paused; }

.dd-marquee li { flex: 0 0 auto; }
.dd-marquee img {
  display: block;
  height: clamp(220px, 26vw, 340px);
  width: auto;
  border-radius: var(--dd-radius);
  object-fit: cover;
}

@keyframes dd-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - 18px)); }
}

@media (prefers-reduced-motion: reduce) {
  .dd-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .dd-marquee-track { animation: none; }
  .dd-marquee-track[aria-hidden="true"] { display: none; }
}

/* ---------- map section (Terra Dental) ---------- */

.dd-visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dd-map { position: relative; aspect-ratio: 1 / 1; border-radius: var(--dd-radius); overflow: hidden; background: var(--dd-stone); }
.dd-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dd-addr { display: block; font-size: 1.2rem; line-height: 1.5; color: var(--dd-ink); margin-bottom: 1.25rem; }
.dd-addr span { display: block; }

.dd-dirs { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin: 1.25rem 0 1.75rem; }
.dd-dirs a, p.dd-dirs a { color: var(--dd-ink); text-decoration: underline; text-underline-offset: 4px; }
.dd-dirs a:hover { color: var(--dd-accent); }

/* ---------- hours ---------- */

.dd-hours { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.dd-hours th, .dd-hours td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--dd-line); font-weight: 400; }
.dd-hours td { text-align: right; color: var(--dd-muted); }
.dd-hours tr.is-closed td { color: #9A9A9A; }
.dd-band-ink .dd-hours th, .dd-band-ink .dd-hours td { border-color: rgba(248,247,244,.18); }
.dd-band-ink .dd-hours td { color: rgba(248,247,244,.72); }

/* ---------- testimonials ---------- */

.dd-quote {
  background: var(--dd-white);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-radius);
  padding: 2rem 1.85rem;
  height: 100%;
}
.dd-quote blockquote { margin: 0 0 1rem; font-family: var(--dd-serif); font-size: 1.2rem; line-height: 1.45; color: var(--dd-ink); }
.dd-quote cite { font-style: normal; font-size: .95rem; font-weight: 600; color: var(--dd-muted); }
.dd-quote .dd-quote-stars { color: var(--dd-accent); letter-spacing: .1em; margin-bottom: .85rem; display: block; }

/* ---------- FAQ ---------- */

.dd-faq { max-width: 860px; margin: 0 auto; }
.dd-faq-item { border-bottom: 1px solid var(--dd-line); padding: 1.6rem 0; }
.dd-faq-item h3 { font-size: 1.3rem; margin-bottom: .65rem; }
.dd-faq-item p { margin: 0 0 .75rem; }
.dd-faq-item p:last-child { margin-bottom: 0; }

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

.dd-footer { background: var(--dd-ink); color: var(--dd-base); padding: clamp(56px, 6vw, 84px) var(--dd-gutter) 0; }
.dd-footer-inner { max-width: var(--dd-wrap); margin: 0 auto; }
.dd-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.dd-footer h4 {
  font-family: var(--dd-sans); font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(248,247,244,.6); margin-bottom: 1.1rem;
}
.dd-footer a, .dd-footer li a, .dd-footer p a { color: var(--dd-base); text-decoration: none; }
.dd-footer a:hover { color: var(--dd-accent); }
.dd-footer ul { list-style: none; margin: 0; padding: 0; }
.dd-footer li { margin-bottom: .6rem; }
.dd-footer p { color: rgba(248,247,244,.78); }
/* .dd-addr is ink by default, which is invisible on the ink footer. */
.dd-footer .dd-addr, .dd-footer .dd-addr span { color: rgba(248,247,244,.86); }
.dd-footer .dd-logo img { height: 84px; }
.dd-footer .dd-logo .dd-mark { height: 54px; }
.dd-footer .dd-logo-name { color: var(--dd-base); font-size: 1.8rem; }
.dd-footer .dd-logo-sub { color: rgba(248,247,244,.55); }
.dd-footer-bottom {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(248,247,244,.16);
  padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .9rem; color: rgba(248,247,244,.6);
}
.dd-footer-bottom a { color: rgba(248,247,244,.6); }

/* ---------- utilities ---------- */

.dd-center { text-align: center; }
.dd-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.dd-prose h2 { margin-top: 2.5rem; }
.dd-prose h3 { margin-top: 2rem; }
.dd-prose > :first-child { margin-top: 0; }
.dd-prose p { margin: 0 0 1.15rem; }
.dd-prose ul:not(.dd-diamonds) { color: var(--dd-muted); padding-left: 1.3rem; margin: 0 0 1.15rem; }
.dd-prose li { margin-bottom: .5rem; }
.dd-prose a { color: var(--dd-ink); text-decoration: underline; text-decoration-color: var(--dd-accent); }

.dd-rounded img { border-radius: var(--dd-radius); }

/* skip link */
.dd-skip {
  position: absolute; left: 0; top: 0; z-index: 999;
  background: var(--dd-ink); color: var(--dd-base); padding: 1rem 1.5rem; border-radius: 0 0 12px 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dd-skip:focus { clip-path: none; }

:focus-visible { outline: 3px solid var(--dd-accent); outline-offset: 3px; }

/* ---------- responsive ---------- */

/* The header steps down in four stages. The full lockup (big logo with its
   sub-label, seven nav items and two CTA pills) needs roughly 1500px, so the
   phone pill is the first thing to go, then the logo scales, then the nav
   collapses to the toggle. The logo stays as large as the space allows,
   because prominence of the logo is a client requirement. */

@media (max-width: 1500px) {
  /* Drop the phone pill. The number is still one tap away in the footer,
     on the contact page, and in every closing CTA on every page. */
  .dd-header-cta a.dd-btn--ghost { display: none; }
}

@media (max-width: 1300px) {
  .dd-nav a, .dd-nav li a { font-size: .97rem; padding: .6rem .6rem; }
  .dd-logo img { height: 76px; }
  .dd-logo .dd-mark { height: 52px; }
  .dd-logo-name { font-size: 1.7rem; }
  .dd-logo-sub { font-size: .6rem; letter-spacing: .17em; }
  .dd-header-inner { gap: 16px; }
}

@media (max-width: 1180px) {
  .dd-nav a, .dd-nav li a { font-size: .93rem; padding: .55rem .45rem; }
  .dd-logo { gap: 10px; }
  .dd-logo img { height: 62px; }
  .dd-logo .dd-mark { height: 46px; }
  .dd-logo-name { font-size: 1.42rem; }
  .dd-logo-sub { display: none; }
  .dd-header-cta a.dd-btn { padding: .7rem 1.1rem; font-size: .9rem; }
}

@media (max-width: 1100px) {
  .dd-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 980px) {
  .dd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dd-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .dd-visit { grid-template-columns: 1fr; }
  .dd-map { aspect-ratio: 4 / 3; }
}

@media (max-width: 1040px) {
  .dd-nav-toggle { display: inline-flex; align-items: center; gap: .5rem; }

  .dd-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dd-base);
    border-bottom: 1px solid var(--dd-line);
    padding: 12px var(--dd-gutter) 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .dd-header.is-open .dd-nav { display: flex; }
  .dd-nav a, .dd-nav li a { padding: .95rem .5rem; border-radius: 10px; font-size: 1.1rem; border-bottom: 1px solid var(--dd-line); }
  .dd-nav li:last-child a { border-bottom: 0; }

  .dd-header-inner { position: relative; flex-wrap: wrap; }
  .dd-header-cta .dd-btn--ghost { display: none; }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .dd-grid--2, .dd-grid--3, .dd-grid--4 { grid-template-columns: 1fr; }
  .dd-footer-grid { grid-template-columns: 1fr; }
  .dd-logo img { height: 52px; }
  .dd-logo .dd-mark { height: 44px; }
  .dd-logo-name { font-size: 1.45rem; }
  .dd-logo-sub { font-size: .55rem; letter-spacing: .14em; }
  .dd-hero-media img { border-radius: 14px 14px 0 0; }
  .dd-btns .dd-btn { width: 100%; }
}

/* =========================================================
   Steps + pricing
   Ported from the first Diamond Dental build's "Getting Started
   Is Easy" and "New Patient Specials" sections. Structure and
   proportions are kept (68px numbered circles joined by connector
   rules; three cards with an elevated middle one, 42px price,
   tick list, claim button). Colour and type are translated into
   this site's system, so navy/maroon become ink and the buttons
   become pills.
   ========================================================= */

/* ---------- three-step timeline ---------- */

.dd-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  margin-top: 2.5rem;
}

.dd-step { text-align: center; position: relative; }

/* The connector sits behind the circle, drawn from each step to the next. */
.dd-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(50% + 46px);
  width: calc(100% - 92px + 24px);
  height: 2px;
  background: linear-gradient(90deg, var(--dd-ink), #3A424A);
}
.dd-step:nth-child(2)::after { background: linear-gradient(90deg, #3A424A, var(--dd-muted)); }

.dd-step-num {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dd-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  background: var(--dd-ink);
  color: var(--dd-base);
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}
.dd-step:nth-child(2) .dd-step-num { background: #3A424A; }
.dd-step:nth-child(3) .dd-step-num { background: var(--dd-muted); }

.dd-step h3 {
  font-family: var(--dd-serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--dd-ink);
  margin: 0 0 .5rem;
}
.dd-step p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* ---------- pricing cards ---------- */

.dd-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;   /* side cards match height; the featured one is taller by its own padding */
  margin-top: 3rem;
}

.dd-price-card {
  background: var(--dd-white);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-radius);
  padding: 36px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px -18px rgba(30, 36, 42, .28);
}

/* The middle card lifts out of the row, as in the source design. */
.dd-price-card--featured {
  background: var(--dd-ink);
  border-color: var(--dd-ink);
  padding: 46px 30px;
  transform: translateY(-14px);
  box-shadow: 0 26px 50px -20px rgba(30, 36, 42, .55);
}

.dd-price-card h3 {
  font-family: var(--dd-sans);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dd-ink);
  margin: 0 0 .75rem;
}
.dd-price-card--featured h3 { color: var(--dd-base); }

.dd-price {
  font-family: var(--dd-sans);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dd-accent);
  display: block;
}
.dd-price--word { font-size: 30px; }
.dd-price-card--featured .dd-price { color: var(--dd-base); }

.dd-price-note {
  font-size: .78rem;
  color: var(--dd-muted);
  margin: .4rem 0 0;
}
.dd-price-card--featured .dd-price-note { color: rgba(248, 247, 244, .62); }

.dd-price-list {
  list-style: none;
  margin: 1.75rem 0 2rem;
  padding: 0;
  text-align: left;
}
.dd-price-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .7rem;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--dd-muted);
}
.dd-price-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--dd-accent);
  font-weight: 700;
}
.dd-price-card--featured .dd-price-list li { color: rgba(248, 247, 244, .86); }
.dd-price-card--featured .dd-price-list li::before { color: var(--dd-accent); }

.dd-price-card a.dd-btn { margin-top: auto; width: 100%; }

.dd-price-foot {
  margin: 2.25rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: .98rem;
}

@media (max-width: 900px) {
  .dd-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .dd-step:not(:last-child)::after { display: none; }
  .dd-step-num { margin-bottom: 1rem; }

  .dd-pricing { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .dd-price-card--featured { transform: none; padding: 36px 30px; }
}

/* =========================================================
   Review scroller
   Three cards visible, the rest reachable by scrolling. A plain
   overflow container, so every quote ships in the HTML and is
   readable without JavaScript.
   ========================================================= */

.dd-scroller {
  position: relative;
  margin-top: 2.5rem;
}

.dd-scroller-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 2px;
  padding: 6px 2px 20px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--dd-line) transparent;
}

.dd-scroller-track::-webkit-scrollbar { height: 6px; }
.dd-scroller-track::-webkit-scrollbar-track { background: transparent; }
.dd-scroller-track::-webkit-scrollbar-thumb {
  background: var(--dd-line);
  border-radius: 999px;
}
.dd-band-stone .dd-scroller-track::-webkit-scrollbar-thumb { background: #CFC9C0; }

.dd-scroller-track > .dd-quote {
  flex: 0 0 calc((100% - 48px) / 3);   /* three across, matching the 24px gap */
  scroll-snap-align: start;
  height: auto;
}

.dd-scroller-track:focus-visible {
  outline: 3px solid var(--dd-accent);
  outline-offset: 4px;
  border-radius: var(--dd-radius);
}

/* Arrow buttons. Hidden until the script confirms the track overflows. */
.dd-scroll-btn {
  position: absolute;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--dd-line);
  background: var(--dd-white);
  color: var(--dd-ink);
  font-size: 26px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(30, 36, 42, .3);
  transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.dd-scroll-btn span { display: block; margin-top: -4px; }
.dd-scroll-btn:hover { background: var(--dd-ink); color: var(--dd-base); border-color: var(--dd-ink); }
.dd-scroll-btn:disabled { opacity: .3; cursor: default; }
.dd-scroll-btn:disabled:hover { background: var(--dd-white); color: var(--dd-ink); border-color: var(--dd-line); }

.dd-scroller.is-scrollable .dd-scroll-btn { display: flex; }
.dd-scroll-btn--prev { left: -22px; }
.dd-scroll-btn--next { right: -22px; }

/* Below the boxed container's comfortable width the arrows sit inside the
   track instead of hanging off it, otherwise the prev button pokes past the
   viewport and adds 8px of horizontal scroll to the whole page. */
@media (max-width: 1280px) {
  .dd-scroll-btn--prev { left: 6px; }
  .dd-scroll-btn--next { right: 6px; }
}

@media (max-width: 980px) {
  .dd-scroller-track > .dd-quote { flex: 0 0 calc((100% - 24px) / 2); }
}

@media (max-width: 700px) {
  .dd-scroller-track > .dd-quote { flex: 0 0 86%; }
  .dd-scroll-btn { display: none !important; }   /* swipe is the natural gesture here */
}

@media (prefers-reduced-motion: reduce) {
  .dd-scroller-track { scroll-behavior: auto; }
}