/* =====================================================================
   Homepage sections - loaded on the front page only.
   ===================================================================== */

.dkx-section{ padding:var(--section-y) 0; }
.dkx-section--tight{ padding:calc(var(--section-y) * .72) 0; }
.dkx-section__head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3.25rem); display:grid; gap:.9rem; }
.dkx-section__head--center{ margin-inline:auto; text-align:center; }
.dkx-section__head p{ color:var(--c-muted); font-size:1.08rem; }

/* ---------------------------------------------------------------
   1. Hero
   Two columns that carry equal weight: an editorial statement on the
   left, a practice panel on the right holding the photograph together
   with the hours and address. The panel exists so the small archive
   photograph sits inside something purposeful instead of floating in
   empty space.
--------------------------------------------------------------- */
.dkx-hero{
  position:relative;
  background:var(--c-white);
  padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(3rem,5vw,4.75rem);
  overflow:hidden;
}
/* A calm tinted field anchors the right-hand panel and runs off the
   edge of the viewport, so the composition has a horizon. */
.dkx-hero::before{
  content:""; position:absolute; inset:0 0 0 auto; width:0;
  background:linear-gradient(180deg,var(--c-blue-light) 0%, #F4FBFD 100%);
  pointer-events:none;
}
@media (min-width:1000px){
  .dkx-hero::before{ width:41%; top:clamp(1.25rem,2.5vw,2.25rem); border-radius:44px 0 0 44px; }
}
@media (max-width:999px){
  .dkx-hero{ background:linear-gradient(180deg,var(--c-blue-light) 0%, var(--c-white) 62%); }
}

.dkx-hero__grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(2.5rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1fr); align-items:center;
}
@media (min-width:1000px){
  .dkx-hero__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
}

.dkx-hero__copy{ display:grid; gap:1.45rem; justify-items:start; max-width:36rem; }

.dkx-eyebrow--rule{ display:inline-flex; align-items:center; gap:.7rem; }
.dkx-eyebrow--rule::before{
  content:""; width:32px; height:2px; background:var(--c-teal); border-radius:2px;
}

.dkx-hero h1{
  max-width:14ch;
  font-size:clamp(2.5rem,1.7rem + 3vw,4.15rem);
  letter-spacing:-.038em; line-height:1.03; font-weight:800;
}
.dkx-hero h1 .dkx-accent{ color:var(--c-coral-ink); font-style:italic; font-weight:700; }

.dkx-hero__lede{
  font-size:clamp(1.05rem,1rem + .3vw,1.16rem);
  line-height:1.74; color:var(--c-muted); max-width:46ch;
}

.dkx-hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.15rem; }
.dkx-hero__cta .dkx-btn--secondary{ background:transparent; border-color:rgba(22,50,79,.16); }
.dkx-hero__cta .dkx-btn--secondary:hover{ background:var(--c-white); }

.dkx-hero__reassure{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.35rem; padding-top:1.35rem;
  border-top:1px solid rgba(22,50,79,.12);
  font-size:.9rem; color:var(--c-muted); width:100%;
}
.dkx-hero__reassure svg{ width:17px; height:17px; color:var(--c-teal-ink); flex:none; }

/* --- practice panel ------------------------------------------------- */
.dkx-hero__media{ display:flex; justify-content:center; }
@media (min-width:1000px){ .dkx-hero__media{ justify-content:flex-end; } }

.dkx-panel{
  width:min(100%,440px);
  background:var(--c-white);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,42,67,.05), 0 30px 70px -30px rgba(16,42,67,.42);
}
.dkx-panel__figure{ margin:0; position:relative; background:var(--c-teal-light); }
/* Shown at its native 1:1 so nothing is cropped out of the frame. */
.dkx-panel__figure img{
  display:block; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:cover; object-position:center;
}
/* Sits inside the image, clear of every edge, so it never collides
   with the frame or the panel body below. */
.dkx-panel__tag{
  position:absolute; left:14px; top:14px;
  background:rgba(255,255,255,.94); color:var(--c-navy);
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:7px;
  backdrop-filter:saturate(1.2) blur(2px);
}

.dkx-panel__body{ padding:1.35rem 1.5rem 1.5rem; display:grid; gap:1.05rem; }
.dkx-panel__row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; align-items:start; }
.dkx-panel__row + .dkx-panel__row{ padding-top:1.05rem; border-top:1px solid var(--c-border); }
.dkx-panel__icon{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--c-teal-light); color:var(--c-teal-ink);
  display:grid; place-items:center;
}
.dkx-panel__icon svg{ width:19px; height:19px; }
.dkx-panel__label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--c-muted); margin-bottom:.15rem;
}
.dkx-panel__value{
  display:block; font-size:.99rem; font-weight:700; color:var(--c-navy); line-height:1.45;
}
.dkx-panel__value a{ color:var(--c-navy); text-decoration:none; }
.dkx-panel__value a:hover,.dkx-panel__value a:focus-visible{ color:var(--c-teal-ink); text-decoration:underline; }
.dkx-panel__value small{ display:block; font-size:.85rem; font-weight:500; color:var(--c-muted); margin-top:.1rem; }

/* ---------------------------------------------------------------
   2. Credentials rule
   An editorial row of four statements under hairline rules. No cards,
   no icon circles, no oversized words pretending to be statistics.
--------------------------------------------------------------- */
.dkx-creds{ background:var(--c-navy); color:#fff; padding:clamp(2.75rem,5vw,4rem) 0; }
.dkx-creds__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 2rem; padding-bottom:clamp(1.75rem,3vw,2.4rem);
}
.dkx-creds h2{
  color:#fff; margin:0;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem); letter-spacing:-.028em;
}
.dkx-creds__note{
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.dkx-creds__grid{
  display:grid; gap:2.25rem 2.5rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none; margin:0; padding:0;
}
@media (max-width:900px){ .dkx-creds__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .dkx-creds__grid{ grid-template-columns:minmax(0,1fr); gap:1.75rem; } }

.dkx-cred{ padding-top:1.15rem; border-top:1px solid rgba(255,255,255,.24); }
.dkx-cred__label{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--c-teal); margin-bottom:.5rem;
}
.dkx-cred h3{
  color:#fff; font-size:1.12rem; font-weight:700; letter-spacing:-.015em;
  margin:0 0 .45rem; line-height:1.3;
}
.dkx-cred p{ font-size:.93rem; line-height:1.62; color:rgba(255,255,255,.72); }

/* ---------------------------------------------------------------
   3. Split sections (intro, why-us, doctor)
--------------------------------------------------------------- */
.dkx-split{ display:grid; gap:clamp(2.25rem,5vw,4rem); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:980px){
  .dkx-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .dkx-split--media-right .dkx-split__media{ order:2; }
}
.dkx-split__copy{ display:grid; gap:1.15rem; justify-items:start; }
.dkx-split__copy p{ color:var(--c-muted); }
.dkx-split__media{ position:relative; }
.dkx-figure{
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); border:6px solid var(--c-white); background:var(--c-teal-light);
}
.dkx-figure img{ display:block; width:100%; height:auto; }
.dkx-figure figcaption{
  padding:.7rem .95rem; font-size:.85rem; color:var(--c-muted);
  background:var(--c-white); text-align:center;
}

.dkx-facts{
  display:grid; gap:1px; background:var(--c-border);
  border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); width:100%;
}
.dkx-facts div{ background:var(--c-white); padding:1rem 1.1rem; }
.dkx-facts b{ display:block; color:var(--c-navy); font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }
.dkx-facts span{ font-size:.88rem; color:var(--c-muted); }

.dkx-checks{ display:grid; gap:1.25rem; margin:0; padding:0; list-style:none; width:100%; }
.dkx-checks li{ display:grid; grid-template-columns:auto 1fr; gap:.95rem; align-items:start; }
.dkx-checks__icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:var(--c-teal-light); color:var(--c-teal-ink);
}
.dkx-checks__icon svg{ width:22px; height:22px; }
.dkx-checks h3{ font-size:1.08rem; margin-bottom:.2rem; }
.dkx-checks p{ color:var(--c-muted); font-size:.96rem; }

/* ---------------------------------------------------------------
   4. Services
--------------------------------------------------------------- */
.dkx-services{ position:relative; background:var(--c-white); }
.dkx-services__grid{
  display:grid; gap:2.25rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.dkx-service{ display:grid; gap:.6rem; align-content:start; }
.dkx-service__icon{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
}
.dkx-service__icon svg{ width:26px; height:26px; }
.dkx-service--teal   .dkx-service__icon{ background:var(--c-teal-light);  color:var(--c-teal-ink); }
.dkx-service--sky    .dkx-service__icon{ background:var(--c-blue-light);  color:#1F5C82; }
.dkx-service--cream  .dkx-service__icon{ background:var(--c-cream);       color:#9A6B12; }
.dkx-service--coral  .dkx-service__icon{ background:#FFEEEB;              color:var(--c-coral-ink); }
.dkx-service h3 a{ color:var(--c-navy); text-decoration:none; }
.dkx-service h3 a:hover,.dkx-service h3 a:focus-visible{ color:var(--c-teal-ink); text-decoration:underline; }
.dkx-service p{ color:var(--c-muted); font-size:.97rem; }
.dkx-services__foot{ margin-top:2.75rem; display:flex; justify-content:center; }

/* ---------------------------------------------------------------
   5. Gallery
--------------------------------------------------------------- */
.dkx-gallery{ background:var(--c-cream); }
.dkx-gallery__grid{ display:grid; gap:1.15rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .dkx-gallery__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.dkx-gallery figure{
  margin:0; border-radius:var(--radius-md); overflow:hidden; background:var(--c-white);
  box-shadow:var(--shadow-soft); display:grid; grid-template-rows:auto auto;
}
.dkx-gallery img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.dkx-gallery figcaption{ padding:.7rem .85rem; font-size:.88rem; font-weight:600; color:var(--c-navy); text-align:center; }
@media (max-width:560px){
  .dkx-gallery__grid{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem;
    scrollbar-width:thin;
  }
  .dkx-gallery figure{ scroll-snap-align:center; }
}

/* ---------------------------------------------------------------
   6. First-visit steps
--------------------------------------------------------------- */
.dkx-steps{ background:var(--c-white); }
.dkx-steps__grid{ display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); counter-reset:step; list-style:none; margin:0; padding:0; }
@media (min-width:820px){ .dkx-steps__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.dkx-step{
  position:relative; background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--radius-md); padding:1.6rem 1.5rem; display:grid; gap:.55rem; align-content:start;
}
.dkx-step__num{
  font-size:.82rem; font-weight:800; letter-spacing:.12em;
  color:var(--c-teal-ink); font-variant-numeric:tabular-nums;
}
.dkx-step h3{ font-size:1.14rem; }
.dkx-step p{ color:var(--c-muted); font-size:.97rem; }
.dkx-steps__cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.4rem; }

/* ---------------------------------------------------------------
   7. Testimonial
--------------------------------------------------------------- */
.dkx-quote{ background:var(--c-teal-light); }
.dkx-quote__inner{ max-width:760px; margin-inline:auto; text-align:center; display:grid; gap:1.25rem; justify-items:center; }
.dkx-quote svg{ width:40px; height:40px; color:var(--c-teal); }
.dkx-quote blockquote{ margin:0; }
.dkx-quote blockquote p{
  font-size:clamp(1.3rem,1.1rem + 1.1vw,1.85rem); font-weight:700;
  color:var(--c-navy); line-height:1.35; letter-spacing:-.015em;
}
.dkx-quote cite{ font-style:normal; font-weight:600; color:var(--c-muted); font-size:.98rem; }

/* ---------------------------------------------------------------
   8. Heritage timeline
--------------------------------------------------------------- */
.dkx-heritage{ background:var(--c-blue-light); }
.dkx-timeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:900px){ .dkx-timeline{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.dkx-timeline li{ position:relative; padding:2rem 1.4rem 0 0; }
@media (max-width:899px){
  .dkx-timeline li{ padding:0 0 1.9rem 1.75rem; border-left:2px solid rgba(57,183,179,.35); }
  .dkx-timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
}
@media (min-width:900px){ .dkx-timeline li{ border-top:2px solid rgba(57,183,179,.35); } }
.dkx-timeline li::before{
  content:""; position:absolute; width:13px; height:13px; border-radius:50%;
  background:var(--c-white); border:3px solid var(--c-teal);
}
@media (min-width:900px){ .dkx-timeline li::before{ top:-7.5px; left:0; } }
@media (max-width:899px){ .dkx-timeline li::before{ left:-7.5px; top:2px; } }
.dkx-timeline b{ display:block; color:var(--c-navy); font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.dkx-timeline p{ color:var(--c-muted); font-size:.96rem; margin-top:.3rem; max-width:30ch; }

/* ---------------------------------------------------------------
   9. Quick links
--------------------------------------------------------------- */
.dkx-quick__grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.dkx-quick__item{
  display:flex; align-items:center; gap:.9rem;
  padding:1.1rem 1.2rem; border:1px solid var(--c-border); border-radius:var(--radius-md);
  background:var(--c-white); text-decoration:none; color:var(--c-navy); font-weight:700;
  transition:border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.dkx-quick__item:hover,.dkx-quick__item:focus-visible{
  border-color:var(--c-teal); transform:translateY(-2px); box-shadow:var(--shadow-soft); color:var(--c-navy);
}
.dkx-quick__item svg{ width:22px; height:22px; color:var(--c-teal-ink); flex:none; }
.dkx-quick__item span{ display:block; font-weight:400; font-size:.85rem; color:var(--c-muted); margin-top:.1rem; }
@media (prefers-reduced-motion:reduce){ .dkx-quick__item:hover{ transform:none; } }

/* ---------------------------------------------------------------
   10. FAQ
--------------------------------------------------------------- */
.dkx-faq{ background:var(--c-white); }
.dkx-faq__list{ max-width:860px; margin-inline:auto; display:grid; gap:.75rem; }
.dkx-faq details{
  border:1px solid var(--c-border); border-radius:var(--radius-md);
  background:var(--c-white); overflow:hidden;
}
.dkx-faq details[open]{ border-color:var(--c-teal); box-shadow:var(--shadow-soft); }
.dkx-faq summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem;
  font-weight:700; font-size:1.03rem; color:var(--c-navy);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.dkx-faq summary::-webkit-details-marker{ display:none; }
.dkx-faq summary:hover{ background:var(--c-blue-light); }
.dkx-faq summary svg{ width:18px; height:18px; flex:none; color:var(--c-teal-ink); transition:transform var(--t-fast); }
.dkx-faq details[open] summary svg{ transform:rotate(45deg); }
.dkx-faq__body{ padding:0 1.3rem 1.25rem; color:var(--c-muted); }
.dkx-faq__body p + p{ margin-top:.7rem; }
.dkx-faq__foot{ text-align:center; margin-top:2rem; color:var(--c-muted); font-size:.95rem; }

/* ---------------------------------------------------------------
   11. Final CTA
--------------------------------------------------------------- */
.dkx-cta{ position:relative; overflow:hidden; background:var(--c-navy); color:var(--c-white); }
.dkx-cta::before,.dkx-cta::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.dkx-cta::before{ width:34rem; height:34rem; right:-9rem; top:-13rem; background:rgba(57,183,179,.16); }
.dkx-cta::after{ width:22rem; height:22rem; left:-7rem; bottom:-11rem; background:rgba(255,128,111,.13); }
.dkx-cta__inner{ position:relative; z-index:2; text-align:center; display:grid; gap:1.3rem; justify-items:center; max-width:720px; margin-inline:auto; }
.dkx-cta h2{ color:var(--c-white); }
.dkx-cta p{ color:#CFE0EC; font-size:1.08rem; max-width:52ch; }
.dkx-cta__buttons{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.dkx-cta__note{ font-size:.9rem; color:#A9C2D5; }

/* Long unbroken strings (URLs, long clinical terms) wrap instead of
   widening their grid track. */
.dkx-hero__lede,.dkx-split__copy p,.dkx-service p,.dkx-checks p,
.dkx-step p,.dkx-faq__body,.dkx-cred p,.dkx-timeline p{
  overflow-wrap:break-word;
}