/* Detail pages (render.mjs renderDetail): a service, a country … as a
   static page. Loads after site.css and reuses its tokens, type, buttons,
   brand and footer; everything here is prefixed d-. No WebGL, no JS. */
html:has(.d-body){ background:#08090b }
.d-body{
  background:#08090b radial-gradient(90% 900px at 85% 0, rgba(var(--gold-rgb),.09), transparent 70%) no-repeat;
}
.d-body [data-rv]{ opacity:1; transform:none }
:root{ --d-max:1180px }

/* ---- nav */
.d-nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:22px; padding:0 var(--pad);
  background:rgba(8,9,11,.78); border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.d-back{
  margin-left:auto; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .3s var(--ease);
}
.d-back:hover{ color:var(--gold) }

/* ---- hero */
.d-hero{ position:relative; min-height:min(78vh,720px); display:flex; align-items:flex-end; overflow:hidden }
.d-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.62) }
.d-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,11,.2) 0%, rgba(8,9,11,.35) 45%, #08090b 100%);
}
.d-hero-in{ position:relative; z-index:1; width:100%; max-width:var(--d-max); margin:0 auto; padding:clamp(80px,14vh,140px) var(--pad) clamp(40px,7vh,72px) }
.d-hero .eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 18px }
.d-hero .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold) }
.d-h1{ font-size:clamp(36px,6vw,84px); max-width:16ch }
.d-sub{ max-width:56ch; margin:18px 0 0 }

/* ---- stats */
.d-stats{
  max-width:var(--d-max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px;
}
.d-stats div{ border-top:1px solid rgba(var(--gold-rgb),.4); padding-top:16px; display:flex; flex-direction:column; gap:6px }
.d-stats span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim) }

/* ---- sections */
.d-sec{
  max-width:var(--d-max); margin:0 auto; padding:clamp(56px,9vh,104px) var(--pad) 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:14px clamp(24px,5vw,80px);
}
.d-sec > .chapno{ grid-column:1; padding-top:14px }
.d-h2{ font-size:clamp(26px,3.2vw,46px); grid-column:1; grid-row:2 }
.d-body-in{ grid-column:2; grid-row:1 / span 3; min-width:0 }
.d-text{ color:#c2c0b8; line-height:1.74; margin:0 0 22px; max-width:70ch }
.d-lead{ font-family:var(--serif); font-size:clamp(20px,1.9vw,27px); line-height:1.5; color:var(--bone); margin:0 0 26px }
.d-note{ font-size:13px; color:var(--muted); margin:18px 0 0 }

.d-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.d-ticks.is-wide{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px 28px }
.d-ticks li{ position:relative; padding-left:22px; font-size:14px; line-height:1.6; color:#b9b7af }
.d-ticks li::before{ content:''; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--gold) }

.d-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px }
.d-item{
  position:relative; padding:24px 22px 22px; border:1px solid var(--line);
  background:rgba(255,255,255,.018); display:flex; flex-direction:column; gap:10px;
  transition:border-color .4s var(--ease);
}
.d-item:hover{ border-color:rgba(var(--gold-rgb),.45) }
.d-item.is-featured{ border-color:rgba(var(--gold-rgb),.6); background:rgba(var(--gold-rgb),.05) }
.d-item h3{ font-family:var(--serif); font-size:clamp(19px,1.6vw,24px); text-transform:uppercase; line-height:1.15 }
.d-item .d-text{ font-size:14px; margin:0 }
.d-no{ font-family:var(--serif); font-size:30px; font-weight:400; color:var(--gold); line-height:1 }
.d-meta{ font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.d-grid.is-steps{ counter-reset:step }

.d-table{ border-top:1px solid var(--line) }
.d-table [role="row"]{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr); gap:12px 24px; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:14px; color:#b9b7af }
.d-table [role="row"]:has(> :nth-child(2):last-child){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.d-th{ color:var(--bone); font-weight:400 }
.d-table [role="cell"]:nth-child(2){ color:var(--gold); font-variant-numeric:tabular-nums }

.d-quote{ margin:0; padding:26px 24px; border-left:1px solid var(--gold); background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:12px }
.d-quote p{ margin:0; font-family:var(--serif); font-size:clamp(17px,1.4vw,21px); line-height:1.5; color:var(--bone) }
.d-quote footer{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }

.d-faq details{ border-top:1px solid var(--line); padding:18px 0 }
.d-faq details:last-child{ border-bottom:1px solid var(--line) }
.d-faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; font-size:16px; color:var(--bone) }
.d-faq summary::-webkit-details-marker{ display:none }
.d-faq summary::after{ content:'+'; color:var(--gold); font-size:20px; line-height:1; transition:transform .3s var(--ease) }
.d-faq details[open] summary::after{ transform:rotate(45deg) }
.d-faq p{ margin:12px 0 0; color:#b9b7af; line-height:1.7; max-width:70ch }

/* ---- related pages */
.d-related{ max-width:var(--d-max); margin:0 auto; padding:clamp(64px,10vh,110px) var(--pad) 0 }
.d-related h2{ margin:0 0 18px }
.d-related div{ display:flex; flex-wrap:wrap; gap:10px }
.d-related a,.d-related span{ padding:10px 16px; border:1px solid var(--line); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); transition:border-color .3s, color .3s }
.d-related a:hover{ border-color:var(--gold); color:var(--gold) }
.d-related span{ border-color:rgba(var(--gold-rgb),.6); color:var(--gold) }

/* ---- footer */
.d-foot{ margin-top:clamp(80px,12vh,150px); padding:0 var(--pad); border-top:1px solid var(--line-soft) }
.d-foot-in{ max-width:var(--d-max); margin:0 auto; padding-top:clamp(56px,9vh,100px) }
.d-foot-in > .d-h2{ margin:0 0 clamp(28px,5vh,56px) }

@media (max-width:860px){
  .d-sec{ grid-template-columns:1fr }
  .d-sec > .chapno,.d-h2,.d-body-in{ grid-column:1; grid-row:auto }
  .d-table [role="row"]{ grid-template-columns:1fr 1fr }
  .d-table [role="cell"]:nth-child(3){ grid-column:1 / -1; font-size:13px; color:var(--muted) }
}
@media (max-width:760px){
  .d-back{ display:none }
  .d-nav .nav-cta{ display:inline-flex; margin-left:auto; padding:9px 12px; font-size:9px; letter-spacing:.12em }
  .d-nav .brand-tx i{ display:none }
  .d-hero{ min-height:64vh }
}

/* ---- link lists, blog lists, articles (dental book-now / blog / branches) */
.d-linkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:18px }
.d-linkgrid > a,.d-linkgrid > span{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); transition:border-color .3s, background .3s }
.d-linkgrid > a:hover{ border-color:var(--gold); background:rgba(var(--gold-rgb),.05) }
.d-linkgrid b{ font-weight:400; font-size:14px; color:var(--bone) }
.d-linkgrid > a b::after{ content:' →'; color:var(--gold) }
.d-linkgrid span span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.d-sec.is-solo{ grid-template-columns:1fr }
.d-sec.is-solo .d-body-in{ grid-column:1; grid-row:auto }
.d-sec.d-article .d-body-in{ max-width:760px; margin:0 auto; width:100% }
.d-posts{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.d-prose{ color:#c9c7bf; font-size:17px; line-height:1.8 }
.d-prose > :first-child{ margin-top:0 }
.d-prose h2,.d-prose h3{ font-family:var(--serif); color:var(--bone); line-height:1.2; margin:1.8em 0 .5em; text-transform:none; letter-spacing:0 }
.d-prose h2{ font-size:clamp(24px,2.4vw,32px) }
.d-prose h3{ font-size:clamp(20px,1.8vw,24px) }
.d-prose p,.d-prose ul,.d-prose ol{ margin:0 0 1.1em }
.d-prose ul,.d-prose ol{ padding-left:1.3em }
.d-prose li{ margin:.35em 0 }
.d-prose li::marker{ color:var(--gold) }
.d-prose a{ color:var(--gold); border-bottom:1px solid rgba(var(--gold-rgb),.4) }
.d-prose strong{ color:var(--bone); font-weight:500 }
.d-prose img{ margin:1.4em 0; border:1px solid var(--line) }
.d-prose blockquote{ margin:1.4em 0; padding:4px 0 4px 20px; border-left:1px solid var(--gold); font-family:var(--serif); font-size:20px; color:var(--bone) }
.d-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0 }
.d-tags span{ padding:6px 12px; border:1px solid var(--line); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.d-form .enq-wrap{ margin-top:0; margin-bottom:clamp(40px,7vh,72px) }
.d-foot .visit-grid{ margin-top:0 }
.d-hero:not(:has(.d-hero-img)){ min-height:auto }
.d-hero:not(:has(.d-hero-img))::after{ display:none }