/* ==========================================================================
   demo-dental.css — "Brightside Dental"
   Clinical calm. White ground, one trustworthy blue, a lot of whitespace,
   soft rounded shapes. Everything on this site is trying to lower a pulse.
   ========================================================================== */

:root {
  --d-bg:         #FFFFFF;
  --d-ink:        #0F2438;
  --d-muted:      #56718B;
  --d-accent:     #1273CE;
  --d-accent-ink: #FFFFFF;
  --d-surface:    #EFF6FD;
  --d-line:       rgba(15, 36, 56, .11);
  --d-line-strong:rgba(15, 36, 56, .24);

  --d-sans:    "Work Sans", system-ui, sans-serif;
  --d-display: "Work Sans", system-ui, sans-serif;
  --d-radius:  18px;
  --d-max:     1100px;
}

body { font-size: 17px; }

.dnav__brand { letter-spacing: -.025em; }
.dh2, .dhero__title { letter-spacing: -.03em; }

.dkicker { color: var(--d-accent); }

/* Rounded, low-contrast panels — nothing hard-edged. */
.dcard { border-color: transparent; background: var(--d-surface); }

/* Trust row: the three reassurances above the fold. */
.dtrust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.dtrust__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
}
.dtrust__tick {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--d-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
@media (max-width: 700px) { .dtrust { grid-template-columns: 1fr; gap: 11px; } }

/* Phone number treated as a first-class control — on a clinic site it is
   the single most-tapped thing on the page. */
.dcall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--d-accent);
}
.dcall small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--d-muted);
}

/* Service list rows. */
.dsvc { border-top: 1px solid var(--d-line); padding: 22px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: start; }
.dsvc:last-child { border-bottom: 1px solid var(--d-line); }
.dsvc__p { grid-column: 1; color: var(--d-muted); font-size: 15.5px; }
.dsvc__price { grid-row: 1 / span 2; font-weight: 700; color: var(--d-accent); white-space: nowrap; }
@media (max-width: 560px) { .dsvc { grid-template-columns: 1fr; } .dsvc__price { grid-row: auto; } }

.dband { background: var(--d-surface); color: var(--d-ink); }
.dband .dbtn { background: var(--d-accent); color: #fff; }

/* The one portrait on the site is black and white — it keeps the page calm
   and stops a stock photo from dating the design. */
.dportrait { border-radius: var(--d-radius); overflow: hidden; aspect-ratio: 4 / 5; }
.dportrait img { width: 100%; height: 100%; object-fit: cover; }