/* ==========================================================================
   ADSC service-page design system — Phase 3 (2026-10-13). VISUAL ONLY: no text is added, removed or changed.
   Loaded after adsc-ll-site.css on service pages only (body.adsc-svc; inc/service-ds.php).
     1. Tokens (colour, spacing scale, radii, shadows, type scale)
     2. Hero: deep navy/slate stage, two columns (copy | department photo), Three.js line layer
     3. Content rhythm: sections, containers, headings, kickers, prose
     4. Components: cards, steps, FAQ, CTAs, tables, callouts, bridge
     5. Motion (CSS scroll-driven, progressive) + reduced motion
     6. Responsive
   ========================================================================== */

/* 1. Tokens */
body.adsc-svc{
  --ds-navy:#172852;--ds-navy-deep:#0E1A38;--ds-slate:#1B2742;--ds-ink:#14203A;--ds-muted:#4A5468;
  --ds-gold:#D4AF6F;--ds-gold-soft:#E7C98F;--ds-gold-text:#7A6837;--ds-line:#E6E1D6;--ds-line-soft:#EFEBE2;
  --ds-paper:#FFFFFF;--ds-off:#FAF8F4;--ds-cream:#F5F0E5;
  --ds-s1:.5rem;--ds-s2:.75rem;--ds-s3:1rem;--ds-s4:1.5rem;--ds-s5:2rem;--ds-s6:3rem;--ds-s7:4.5rem;
  --ds-sec:clamp(4rem,2.8rem + 4.4vw,6.75rem);
  --ds-wrap:1120px;
  --ds-r-sm:10px;--ds-r:16px;--ds-r-lg:24px;
  --ds-sh-1:0 1px 2px rgba(14,26,56,.04),0 6px 18px rgba(14,26,56,.05);
  --ds-sh-2:0 2px 6px rgba(14,26,56,.05),0 22px 48px rgba(14,26,56,.10);
  --ds-fs-h2:clamp(1.75rem,1.25rem + 1.9vw,2.5rem);--ds-fs-h3:clamp(1.12rem,1.05rem + .3vw,1.3rem);
  --ds-fs-body:1.0625rem;--ds-fs-lead:clamp(1.06rem,1rem + .3vw,1.2rem);--ds-fs-small:.92rem;
  --ds-ease:cubic-bezier(.2,.7,.2,1);
}

/* 2. Hero */
body.adsc-svc .ll-hero{
  background:
    radial-gradient(560px 380px at 86% 18%,rgba(212,175,111,.13),transparent 66%),
    radial-gradient(820px 560px at -8% 110%,rgba(40,62,112,.55),transparent 70%),
    linear-gradient(158deg,#182a54 0%,#13213f 46%,#0c1630 100%);
}
body.adsc-svc .ll-hero.has-three .ll-hero-art,body.adsc-svc .ll-hero.has-three .ll-hero-art *{opacity:0!important;transition:opacity 1.2s ease}
body.adsc-svc .adsc-svc-three{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.4) 45%,#000 75%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.4) 45%,#000 75%)}
body.adsc-svc .adsc-svc-three.is-on{opacity:.8}
body.adsc-svc .adsc-svc-three canvas{display:block;width:100%!important;height:100%!important}
@media(min-width:980px){body.adsc-svc .ll-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}body.adsc-svc .ll-hero-aside{margin-top:clamp(2.5rem,1rem + 3vw,4.5rem);position:sticky;top:120px}}
body.adsc-svc .ll-hero-aside{max-width:500px}
body.adsc-svc .ll-hero-aside::before{inset:-12px;border-radius:30px;border-color:rgba(231,201,143,.26)}
body.adsc-svc .adsc-svc-hero-media{position:relative;margin:0;border-radius:var(--ds-r-lg);overflow:hidden;aspect-ratio:1/1;background:#1d2b4d;box-shadow:0 34px 70px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.18)}
body.adsc-svc .adsc-svc-hero-media--scan{aspect-ratio:4/3}
body.adsc-svc .adsc-svc-hero-media--r16x9{aspect-ratio:16/9!important}
body.adsc-svc .adsc-svc-hero-media--r4x3{aspect-ratio:4/3}
body.adsc-svc .adsc-svc-hero-media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important;box-shadow:none!important}
body.adsc-svc .adsc-svc-hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(12,22,48,.28) 100%);box-shadow:inset 0 0 0 1px rgba(231,201,143,.22)}
body.adsc-svc .ll-hero .ll-h1{text-wrap:balance}
body.adsc-svc .ll-hero .ll-trust{border-top:1px solid rgba(231,201,143,.18)}

/* 3. Content rhythm (legacy in-content sections carry inline styles → !important where needed) */
body.adsc-svc .ll-content{font-size:var(--ds-fs-body);color:var(--ds-ink)}
body.adsc-svc .ll-content .adsc-section{padding-block:var(--ds-sec)!important}
body.adsc-svc .ll-content .adsc-section+.adsc-section{border-top:1px solid var(--ds-line-soft)!important}
body.adsc-svc .ll-content .adsc-section[style*="gray-light"],body.adsc-svc .ll-content .adsc-section-alt{background:var(--ds-off)!important}
body.adsc-svc .ll-content .adsc-container{max-width:var(--ds-wrap)!important}
/* bare <section> blocks without a container (seen on hub pages) → align to the content column */
body.adsc-svc .ll-content>section:not([class]){max-width:var(--ds-wrap);margin-inline:auto;padding:var(--ds-sec) 20px 0;box-sizing:border-box}
body.adsc-svc .ll-content .adsc-container>div[style*="max-width: 900px"],body.adsc-svc .ll-content .adsc-container>div[style*="max-width:900px"]{max-width:46rem!important}
body.adsc-svc .ll-content h2{font-size:var(--ds-fs-h2)!important;line-height:1.14!important;letter-spacing:-.022em!important;color:var(--ds-ink)!important;margin:0 0 var(--ds-s4)!important;text-wrap:balance}
body.adsc-svc .ll-content h3{font-size:var(--ds-fs-h3)!important;line-height:1.3!important;letter-spacing:-.01em!important;color:var(--ds-ink)!important;margin:0 0 var(--ds-s2)!important}
body.adsc-svc .ll-content p,body.adsc-svc .ll-content li{line-height:1.72;color:var(--ds-muted)}
body.adsc-svc .ll-content p{margin:0 0 var(--ds-s3)}
body.adsc-svc .ll-content p strong,body.adsc-svc .ll-content li strong{color:var(--ds-ink)}
/* gold inline kickers above H2s (span with gold colour + uppercase) */
body.adsc-svc .ll-content span[style*="color: var(--gold)"][style*="uppercase"],body.adsc-svc .ll-content span[style*="color:var(--gold)"][style*="uppercase"]{display:flex!important;align-items:center;gap:.7rem;font-size:.76rem!important;font-weight:700!important;letter-spacing:.17em!important;color:var(--ds-gold-text)!important;margin-bottom:.4rem}
body.adsc-svc .ll-content span[style*="color: var(--gold)"][style*="uppercase"]::before,body.adsc-svc .ll-content span[style*="color:var(--gold)"][style*="uppercase"]::before{content:"";width:28px;height:1px;background:var(--ds-gold);flex:none}
body.adsc-svc .ll-content ul:not([class]) li::marker{color:var(--ds-gold)}
body.adsc-svc .ll-content ul:not([class]),body.adsc-svc .ll-content ol:not([class]){padding-left:1.25rem}
body.adsc-svc .ll-content ul:not([class]) li,body.adsc-svc .ll-content ol:not([class]) li{margin-bottom:.45rem;padding-left:.2rem}
body.adsc-svc .ll-content .adsc-grid-mobile{gap:clamp(2rem,1.5rem + 2vw,3.5rem)!important}

/* 4. Components */
/* cards = white boxes with inline shadow/radius in the legacy markup */
body.adsc-svc .ll-content div[style*="box-shadow"],body.adsc-svc .ll-content :is(.adsc-card,.adsc-feature-card,.adsc-step-card,.adsc-treatment-card){background:#fff!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-r)!important;box-shadow:var(--ds-sh-1)!important;padding:clamp(1.4rem,1.1rem + 1vw,2rem)!important;transition:transform .35s var(--ds-ease),box-shadow .35s var(--ds-ease),border-color .35s}
@media(hover:hover){body.adsc-svc .ll-content div[style*="box-shadow"]:hover,body.adsc-svc .ll-content :is(.adsc-card,.adsc-feature-card,.adsc-step-card,.adsc-treatment-card):hover{transform:translateY(-2px);box-shadow:var(--ds-sh-2)!important;border-color:rgba(212,175,111,.55)!important}}
/* step lists (Consultation / Treatment Plan / Treatment / Follow-up) */
body.adsc-svc .ll-content ol li strong:first-child{color:var(--ds-ink)}
/* note / quote boxes with a gold left rule */
body.adsc-svc .ll-content div[style*="border-left: 4px solid var(--gold)"],body.adsc-svc .ll-content div[style*="border-left:4px solid var(--gold)"]{background:var(--ds-off)!important;border:1px solid var(--ds-line)!important;border-left:3px solid var(--ds-gold)!important;border-radius:0 var(--ds-r) var(--ds-r) 0!important}
/* FAQ */
body.adsc-svc .ll-content :is(.adsc-faq-question,.adsc-faq-q){font-size:clamp(1.05rem,1rem + .25vw,1.18rem)!important;padding-block:1.2rem!important}
/* navy CTA bands inside content */
body.adsc-svc .ll-content section[style*="background: var(--navy)"],body.adsc-svc .ll-content section[style*="background:var(--navy)"]{background:radial-gradient(600px 300px at 90% 0%,rgba(212,175,111,.12),transparent 70%),linear-gradient(160deg,#172852,#0E1A38)!important}
/* buttons: one pill style everywhere */
body.adsc-svc .ll-content a.adsc-btn,body.adsc-svc .ll-content a[class*="adsc-btn-"]{border-radius:999px!important;min-height:50px;padding:.8rem 1.5rem!important;font-weight:600!important;letter-spacing:.005em;transition:transform .2s var(--ds-ease),background-color .2s,border-color .2s,color .2s}
/* tables */
body.adsc-svc .ll-content table{border-radius:var(--ds-r)!important;box-shadow:var(--ds-sh-1)}
/* images inside content */
body.adsc-svc .ll-content img{border-radius:var(--ds-r)}
/* department bridge */
body.adsc-svc .adsc-child-hub-bridge{border-radius:var(--ds-r)!important;border-left-width:3px!important;box-shadow:var(--ds-sh-1)!important}

/* 5. Motion — light: hover lifts and the hero line layer only (no scroll-hidden content, so nothing is ever invisible). */
@media (prefers-reduced-motion: reduce){
  body.adsc-svc .adsc-svc-three{transition:none}
  body.adsc-svc .ll-content *{transition:none!important;animation:none!important}
}

/* 6. Responsive — hero stacks text first, then image */
@media(max-width:979.98px){
  body.adsc-svc .ll-hero-aside{max-width:520px;justify-self:start;width:100%}
  body.adsc-svc .adsc-svc-hero-media{aspect-ratio:16/10}
  body.adsc-svc .adsc-svc-three{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.15) 100%)}
  body.adsc-svc .adsc-svc-three.is-on{opacity:.38}
}
@media(max-width:600px){
  body.adsc-svc .ll-content .adsc-section{padding-block:clamp(3rem,2.4rem + 3vw,4rem)!important}
  body.adsc-svc .ll-content .adsc-grid-mobile{display:grid!important;grid-template-columns:1fr!important}
}

/* ==================== IMPLANT JOURNEY (2026-10-14, /dental-implants/ only; markup inc/implant-journey.php) ==================== */
body.adsc-svc .ll-content>section.adsc-ij{--ij-fig:96px;--ij-gap:1.25rem;max-width:var(--ds-wrap);margin-inline:auto;padding:var(--ds-sec) 20px 0;box-sizing:border-box}
body.adsc-svc .adsc-ij .adsc-ij-steps{list-style:none!important;margin:var(--ds-s5) 0 0!important;padding:0!important;display:grid;grid-template-columns:1fr;gap:var(--ij-gap)}
body.adsc-svc .adsc-ij .adsc-ij-step{position:relative;display:grid;grid-template-columns:var(--ij-fig) 1fr;align-items:center;gap:1rem;margin:0!important;padding:0!important}
body.adsc-svc .adsc-ij .adsc-ij-step::marker{content:none}
body.adsc-svc .adsc-ij .adsc-ij-fig{margin:0;width:var(--ij-fig);aspect-ratio:1/1;border-radius:var(--ds-r);overflow:hidden;background:#fff;border:1px solid var(--ds-line);box-shadow:var(--ds-sh-1);position:relative;z-index:1}
body.adsc-svc .adsc-ij .adsc-ij-fig img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important;box-shadow:none!important}
body.adsc-svc .adsc-ij .adsc-ij-body{display:flex;align-items:center;gap:.75rem;min-width:0}
body.adsc-svc .adsc-ij .adsc-ij-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--ds-gold);color:var(--ds-gold-text);font-size:.78rem;font-weight:700;letter-spacing:.04em;background:#fff;font-variant-numeric:tabular-nums}
body.adsc-svc .ll-content .adsc-ij h3.adsc-ij-title{font-size:1.02rem!important;line-height:1.3!important;margin:0!important;color:var(--ds-ink)!important}
/* mobile: thin gold line linking the stages vertically */
body.adsc-svc .adsc-ij .adsc-ij-step:not(:last-child)::after{content:"";position:absolute;left:calc(var(--ij-fig) / 2);top:var(--ij-fig);height:var(--ij-gap);width:1px;background:linear-gradient(var(--ds-gold),rgba(212,175,111,.35))}
body.adsc-svc .adsc-ij .adsc-ij-more{margin:var(--ds-s5) 0 0!important;text-align:center}
body.adsc-svc .adsc-ij .adsc-ij-more a{color:var(--ds-gold-text);font-weight:600;text-decoration:underline;text-decoration-color:rgba(122,104,55,.45);text-underline-offset:4px}
body.adsc-svc .adsc-ij .adsc-ij-more a:hover,body.adsc-svc .adsc-ij .adsc-ij-more a:focus-visible{color:var(--ds-ink);text-decoration-color:var(--ds-gold)}
body.adsc-svc .adsc-ij .adsc-ij-more a:focus-visible{outline:2px solid var(--ds-gold);outline-offset:3px;border-radius:4px}
/* tablet: 3 x 2 grid, horizontal hairlines between stages in a row */
@media (min-width:700px){
  body.adsc-svc .ll-content>section.adsc-ij{--ij-fig:132px;--ij-gap:1.5rem}
  body.adsc-svc .adsc-ij .adsc-ij-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.25rem}
  body.adsc-svc .adsc-ij .adsc-ij-step{grid-template-columns:1fr;justify-items:center;text-align:center;align-items:start;gap:.85rem}
  body.adsc-svc .adsc-ij .adsc-ij-body{flex-direction:column;gap:.6rem}
  body.adsc-svc .adsc-ij .adsc-ij-step:not(:last-child)::after{left:calc(50% + var(--ij-fig) / 2 + 8px);top:calc(var(--ij-fig) / 2);height:1px;width:calc(100% + var(--ij-gap) - var(--ij-fig) - 16px);background:linear-gradient(90deg,var(--ds-gold),rgba(212,175,111,.35))}
  body.adsc-svc .adsc-ij .adsc-ij-step:nth-child(3n)::after{display:none}
}
/* desktop: one horizontal timeline of six */
@media (min-width:1080px){
  body.adsc-svc .ll-content>section.adsc-ij{--ij-fig:128px;--ij-gap:1.25rem}
  body.adsc-svc .adsc-ij .adsc-ij-steps{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.adsc-svc .adsc-ij .adsc-ij-step:nth-child(3n):not(:last-child)::after{display:block}
}
/* subtle reveal (added by JS only when motion is allowed) */
body.adsc-svc .adsc-ij--anim .adsc-ij-step{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ds-ease),transform .6s var(--ds-ease)}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step{opacity:1;transform:none}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step:nth-child(2){transition-delay:.06s}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step:nth-child(3){transition-delay:.12s}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step:nth-child(4){transition-delay:.18s}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step:nth-child(5){transition-delay:.24s}
body.adsc-svc .adsc-ij--anim.is-in .adsc-ij-step:nth-child(6){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){body.adsc-svc .adsc-ij .adsc-ij-step{opacity:1!important;transform:none!important;transition:none!important}}
body.adsc-svc .ll-content figure.adsc-ij-photo{margin:var(--ds-s5) 0 0;max-width:760px;aspect-ratio:16/9;border-radius:var(--ds-r-lg);overflow:hidden;box-shadow:var(--ds-sh-2);border:1px solid var(--ds-line)}
body.adsc-svc .ll-content figure.adsc-ij-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important;box-shadow:none!important}
/* 2026-10-14 Step 2: two-up photo row (Technology we use on /dental-implants/, CBCT page). Equal columns, no gap beside a lone image. */
body.adsc-svc .ll-content .adsc-ij-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--ds-s4,1.25rem);margin:var(--ds-s5,2rem) 0 0;max-width:none}
body.adsc-svc .ll-content .adsc-ij-photos figure.adsc-ij-photo{margin:0;max-width:none;aspect-ratio:auto;display:flex;flex-direction:column;background:#fff}
body.adsc-svc .ll-content .adsc-ij-photos figure.adsc-ij-photo img{aspect-ratio:4/3;height:auto}
body.adsc-svc .ll-content .adsc-ij-photos figcaption{padding:.75rem 1rem;font-size:.9rem;line-height:1.45;color:#4a5468;border-top:2px solid #d4af6f}
/* 2026-10-14 Step 3: navy/gold panel hero (no photo) — same look as the Media Slot empty state. */
body.adsc-svc .adsc-svc-hero-panel .adsc-ms-panel{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 85% 10%,rgba(212,175,111,.10) 0%,rgba(212,175,111,0) 55%),radial-gradient(90% 80% at 10% 100%,rgba(80,110,170,.22) 0%,rgba(80,110,170,0) 60%),linear-gradient(155deg,#22355f 0%,#172852 48%,#0f1c3d 100%);border:1px solid rgba(212,175,111,.35);border-radius:inherit}
body.adsc-svc .adsc-svc-hero-panel .adsc-ms-motif{width:min(56%,300px);height:auto;color:#d4af6f;opacity:.85}
body.adsc-svc .adsc-svc-hero-panel .adsc-ms-motif-main{stroke-width:1.4}
/* 2026-10-14 Part 11B — ONE hero image scale on all service pages, matched to /dental-implants/ (square frame as wide as
   the aside column, ≈ the height of a typical hero text block). Applies from 980px; phones/tablets keep the existing
   16:10 frame so the hero never gets too tall. Square photos/panels: 1:1. 16:9 photos: 6:5 (keeps both edges' faces).
   4:3 photos: 1:1. Illustrations flagged "contain" sit on navy without cropping labels. Image files are unchanged. */
body.adsc-svc .adsc-svc-hero-media img{object-position:var(--hero-pos,50% 50%)}
body.adsc-svc .adsc-svc-hero-media--contain{background:#0f1c3d}
body.adsc-svc .adsc-svc-hero-media--contain img{object-fit:contain!important}
@media (min-width:980px){
  body.adsc-svc .adsc-svc-hero-media{aspect-ratio:1/1}
  body.adsc-svc .adsc-svc-hero-media.adsc-svc-hero-media--r16x9{aspect-ratio:6/5!important}
  body.adsc-svc .adsc-svc-hero-media.adsc-svc-hero-media--r4x3,body.adsc-svc .adsc-svc-hero-media--scan{aspect-ratio:1/1!important}
  body.adsc-svc .ll-hero-aside{align-self:center}
}