/* dcb design system. Base rules → components → responsive layouts.
   Keep a single definition per component; page variants use explicit classes. */
:root {
  --cyan:#1b9cd0; --text-navy:#183a63; --ink:var(--text-navy);
  --muted:var(--text-navy); --line:#e5edf0; --surface:#edf6fa;
  --type-h1:clamp(2rem,4vw,2.75rem); --type-h2:clamp(1.625rem,3vw,2rem);
  --type-h3:clamp(1.3125rem,2vw,1.5rem); --type-h4:1.125rem;
  --type-body:1.0625rem; --type-caption:.9375rem;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-6:3rem; --space-8:4rem; --surface-alpha:.7; --edge-fade:12px;
  font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#fff; font-synthesis:none;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:40px }
body { margin:0; overflow-x:hidden; color:var(--ink); font-weight:400 }
a { color:inherit; text-decoration:none }
button,input,textarea,select { font:inherit; color:inherit }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--cyan); outline-offset:5px }
[hidden] { display:none!important }
h1,h2,h3,h4,h5,h6 { font-weight:400; letter-spacing:-.02em; margin:0 }
h1 { font-size:var(--type-h1); line-height:1.15; margin:24px 0 32px }
h2 { font-size:var(--type-h2); line-height:1.25; margin:0 0 24px }
h3 { font-size:var(--type-h3); line-height:1.3; letter-spacing:-.015em; margin:0 0 16px }
h4 { font-size:var(--type-h4); line-height:1.4; letter-spacing:0; margin:0 0 16px }
p,li { font-size:var(--type-body); line-height:1.65 }
strong,b { font-weight:600 }
button { background:#fff; border:1px solid #b8dce9; border-radius:6px; padding:13px 18px; cursor:pointer; margin-top:24px; transition:background .2s }
button:hover { background:#eff9fc }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:12px; line-height:1.6; margin:0 0 16px; font-weight:600 }
/* Intro animation is controlled by app.js, without competing CSS animations. */
.welcome { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:96px 24px 64px }
.brand { position:relative; width:min(360px,72vw); aspect-ratio:1024/302; margin-top:8px; flex-shrink:0 }
.letters { position:relative; width:100%; aspect-ratio:1024/302; overflow:hidden; opacity:0; visibility:hidden }
.letters .base { display:none }
.logo-writing { position:absolute; inset:0; width:100%; height:100%; display:block }
.logo-stroke { stroke-dasharray:1; stroke-dashoffset:1 }
.wordmark { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:max-content; max-width:90vw; display:flex; align-items:center; justify-content:center; padding-top:12px; font-size:clamp(18px,2.2vw,26px); line-height:1.3; letter-spacing:-.035em; white-space:nowrap; opacity:0; visibility:hidden }
nav { display:flex; justify-content:center; align-items:flex-start; gap:36px }
.welcome nav { position:absolute; top:24px; left:24px; right:24px; visibility:hidden }
nav a { font-size:15px; line-height:1.4; letter-spacing:.02em; padding:10px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s }
.welcome nav a { opacity:0 }
nav a:hover { border-color:currentColor }
.content { display:none; max-width:1120px; padding:0 40px; margin:auto; opacity:0; visibility:hidden }
body.intro-complete .content { display:block }
body.intro-running { overflow:hidden }
.illustrations { padding:40px 0 56px }
.illustration-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:28px 32px; max-width:860px; margin:auto; align-items:start }
.illustration-grid>* { grid-column:span 2; opacity:0; visibility:hidden }
.illustration { margin:0; min-width:0; container-type:inline-size }
.illustration-image { position:relative; width:100%; aspect-ratio:1!important; overflow:hidden; border-radius:10px; background:#fff; margin-inline:auto }
.illustration-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:.94 }
.illustration figcaption { text-align:center; font-size:clamp(20px,8.4cqi,25px); line-height:1.3; letter-spacing:-.02em; margin:16px 0 0; min-height:2.6em; text-wrap:balance; overflow-wrap:normal }
.illustration figcaption span { font-size:inherit; white-space:normal }
.topic-link { display:block; border-radius:10px }
.topic-link:hover figcaption { text-decoration:underline; text-underline-offset:5px }
.content>section:not(.illustrations),.content>footer { opacity:0; visibility:hidden }
html:not(.js) .content { display:block; opacity:1; visibility:visible }
html:not(.js) :is(.letters,.wordmark,nav,.welcome nav a,.illustration-grid>*,.content>section,.content>footer) { opacity:1; visibility:visible }
.search-intro,.search-summary,.doctor-intro,.practice-questions,.contact { padding:56px 0; border-top:1px solid var(--line); min-width:0 }
.search-intro h1 { margin-top:0 }
.search-intro p,.search-summary p,.doctor-intro p { max-width:760px; margin:0 0 20px }
.search-intro a,.search-summary a,.doctor-intro a,.practice-profile p a,.practice-questions p a,.practice-contact a,.appointment-info a,.legal-section a,.education-sources a { text-decoration:underline; text-underline-offset:3px }
summary { cursor:pointer; list-style:none }
summary::-webkit-details-marker { display:none }
.practice-questions details { border-top:1px solid var(--line) }
.practice-questions summary { font-size:20px; line-height:1.4; padding:20px 28px 20px 0; position:relative }
.practice-questions summary::after { content:'+'; position:absolute; right:4px; top:20px }
.practice-questions details[open] summary::after { content:'−' }
.practice-questions details p { margin:0 0 24px; max-width:760px }
.contact>p:not(.eyebrow) { font-size:var(--type-body); line-height:1.65; margin-top:24px }
.practice-contact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,auto); grid-auto-flow:column; gap:16px 24px; margin:24px 0; max-width:640px }
.practice-contact p { margin:0; overflow-wrap:anywhere }
.transit-info { margin:32px 0; padding:24px 0; border-block:1px solid var(--line) }
.transit-info p { margin:16px 0 }
.transit-info dl { display:grid; gap:12px; margin:20px 0 }
.transit-info dl>div { display:grid; grid-template-columns:90px 1fr; gap:16px }
.transit-info dt { font-weight:600 }
.transit-info dd { margin:0; line-height:1.6 }
.transit-info a,.parking-info a,.map-route { font-size:var(--type-caption); text-decoration:underline; text-underline-offset:3px }
.parking-sign { display:inline-flex; align-items:center; justify-content:center; width:34px; height:36px; border:3px solid #fff; border-radius:4px; background:#1263bf; color:#fff; font:700 25px Arial,sans-serif; box-shadow:0 0 0 1px #1263bf; flex-shrink:0 }
.parking-info { display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px 20px; margin:24px 0 }
.parking-info p { margin:8px 0 12px; font-size:16px }
.parking-info .parking-walk { grid-column:2; margin:0; max-width:700px }
.appointment-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:32px }
.schedule-table table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.65 }
.schedule-table caption { text-align:left; font-weight:600; margin-bottom:16px }
.schedule-table th { text-align:left; font-weight:400; vertical-align:top; padding:12px 20px 12px 0 }
.schedule-table td { padding:12px 0; vertical-align:top }
.schedule-table tr+tr { border-top:1px solid var(--line) }
.appointment-info { min-width:0 }
.appointment-info p { overflow-wrap:anywhere }
.appointment-info .appointment-link { display:inline-block; border:1px solid #b8dce9; border-radius:6px; padding:13px 18px; text-decoration:none; margin:8px 0; max-width:100%; text-align:center }
.appointment-link:hover { background:#eff9fc }
footer { border-top:1px solid var(--line); padding:28px 0 36px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; font-size:14px; line-height:1.5 }
.footer-links { display:flex; flex-wrap:wrap; gap:24px }
.footer-links a:hover { text-decoration:underline }
.fragment-alias { display:block; scroll-margin-top:40px }
/* Shared detail pages and educational components. */
.detail-header { max-width:1200px; margin:auto; padding:24px 40px; display:flex; justify-content:space-between; align-items:center; gap:32px; border-bottom:1px solid var(--line) }
.detail-brand { position:relative; display:block; width:105px; height:31px; overflow:hidden; flex-shrink:0 }
.detail-brand img { width:100%; height:auto; display:block }
.detail-header nav { flex-wrap:wrap; gap:28px }
.detail-main { max-width:1200px; margin:auto; padding:32px 40px; min-width:0 }
.related-topics { display:block; border-top:1px solid var(--line); margin:32px 0 0; padding:24px 0 0 }
.related-topics p { margin:0 0 12px; line-height:1.7 }
.related-topics a { display:inline; padding:0; text-decoration:underline; text-underline-offset:3px }
.detail-footer { max-width:1120px; margin:auto }
.back-link { font-size:15px }
.back-link:hover { text-decoration:underline }
.education-content { margin-top:32px; min-width:0 }
.education-content>h1 { margin-top:0 }
.lesson-section { margin-block:64px }
.lesson-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:stretch }
.lesson-card { position:relative; isolation:isolate; min-width:0; padding:24px; border:1px solid #e0edf3; border-radius:16px; background:var(--surface); display:flex; flex-direction:column; gap:16px }
.lesson-card>h3 { margin:0; min-height:2.6em; text-wrap:balance }
.lesson-copy { position:relative; isolation:isolate; padding:16px; min-width:0 }
.lesson-copy::before { content:''; position:absolute; inset:0; z-index:-1; background:rgb(255 255 255 / var(--surface-alpha)); border-radius:12px; filter:blur(6px); pointer-events:none }
.lesson-copy p,.lesson-comparison p { font-size:var(--type-body); line-height:1.65; letter-spacing:0; margin:0 0 16px; overflow-wrap:break-word; hyphens:auto }
.lesson-copy p:last-child { margin-bottom:0 }
.lesson-copy ul { margin:0; padding-left:1.2em }
.lesson-copy li+li { margin-top:16px }
.lesson-art { margin:0; min-width:0; align-self:stretch; text-align:center }
.lesson-art picture { display:block }
.lesson-art img { display:block; width:auto; max-width:100%; height:auto; max-height:300px; margin-inline:auto; object-fit:contain; border-radius:10px; mask-image:linear-gradient(to right,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent),linear-gradient(to bottom,transparent,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent); mask-composite:intersect }
.lesson-art figcaption { font-size:var(--type-caption); line-height:1.5; margin:16px 0 0; text-wrap:balance }
.closed-loop-illustrations { display:grid; grid-template-columns:minmax(0,251fr) minmax(0,254fr); gap:16px; align-items:start }
.closed-loop-illustrations .lesson-art img { width:100%; max-width:254px; height:auto }
.closed-loop-illustrations .lesson-art figcaption { margin-top:10px }
.lesson-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start }
.lesson-comparison h4 { min-height:2.8em }
.lesson-comparison .lesson-art { margin-bottom:16px }
.lesson-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:32px; padding:24px; border-radius:16px; background:var(--surface) }
.lesson-intro .lesson-art img { max-height:300px }
.lesson-symptoms .lesson-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
/* Full-width insulin explanation: matching columns, image baseline and type scale. */
.type1-page .lesson-intro { grid-template-columns:minmax(0,2fr) minmax(0,1fr) }
.type1-page .lesson-intro .lesson-art img { max-height:220px }
.type1-foundations>.lesson-grid { grid-template-columns:minmax(0,1fr) }
.type1-foundations .lesson-card:first-child { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center }
.type1-foundations .lesson-card:first-child>h3 { grid-column:1 / -1; min-height:0 }
.insulin-legend { text-align:center; margin-bottom:24px!important }
.insulin-comparison--balanced { gap:24px 32px; align-items:stretch }
.insulin-comparison--balanced>div { display:grid; grid-template-rows:auto 205px 1fr; gap:16px; min-width:0 }
.insulin-comparison--balanced h4 { min-height:0; text-align:center; margin:0; text-wrap:balance }
.insulin-comparison--balanced .lesson-art { display:flex; align-items:center; justify-content:center; margin:0 }
.insulin-comparison--balanced .lesson-art img { max-height:205px }
.insulin-comparison--balanced p { margin:0; text-wrap:pretty }
/* Neutral before/after presentation, identical image area and label treatment. */
.weight-comparison { max-width:840px; margin-inline:auto }
.weight-comparison .lesson-grid { gap:24px }
.weight-comparison .lesson-card { background:#f5f9fb; text-align:center }
.weight-comparison .lesson-card>h3 { min-height:0; font-size:var(--type-h4) }
.weight-comparison .lesson-art { height:300px; display:flex; align-items:center; justify-content:center }
.weight-comparison .lesson-art img { max-height:280px; max-width:100% }
.comparison-note { font-size:var(--type-caption); line-height:1.6; max-width:720px; margin:20px auto 0 }
.weight-treatment h4 { font-size:var(--type-h3); margin:20px 0 10px }
.weight-treatment .lesson-art img { max-width:130px; max-height:138px }
.medical-context { max-width:850px; font-size:15px; line-height:1.7; margin:24px 0 }
.education-sources { font-size:15px; line-height:1.6 }
.sport-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:center; margin:32px 0 56px }
.sport-hero h1 { margin-top:8px }
.sport-hero picture,.sport-hero img { display:block; width:100%; height:auto; border-radius:16px }
.sport-hero p { max-width:620px }
.sport-page .lesson-card>h3 { min-height:0 }
.sport-page .lesson-card p { margin:0 }
.sport-page .lesson-card a,.sport-page .sport-cta a { text-decoration:underline; text-underline-offset:3px }
.sport-note { padding:24px; margin-top:24px; border-left:3px solid var(--cyan); background:#f4f9fc; border-radius:0 10px 10px 0 }
.sport-note h3 { font-size:var(--type-h4) }
.sport-note p { margin:0 }
.sport-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px }
.sport-table { width:100%; border-collapse:collapse; font-size:var(--type-body); line-height:1.6; text-align:left }
.sport-table th,.sport-table td { padding:16px 24px; vertical-align:top }
.sport-table th { font-weight:600; background:var(--surface) }
.sport-table tr+tr { border-top:1px solid var(--line) }
.sport-cta { padding:32px; border-radius:16px; background:var(--surface); margin:48px 0 }
.sport-cta p:last-child { margin-bottom:0 }
.sport-page .education-sources li { font-size:var(--type-caption) }
.practice-profile { max-width:860px; margin-inline:auto }
.practice-profile h2 { margin-top:32px }
.practice-profile section { margin-top:48px }
.practice-topics { padding-left:24px; margin:24px 0 }
.practice-topics li { padding-left:8px; margin-bottom:24px }
.practice-topics li>a { text-decoration:underline; text-underline-offset:3px }
.practice-topics li p { margin:8px 0 0 }
.practice-profile p { margin:0 0 20px }
.practice-profile .profile-lead { font-size:22px; line-height:1.5 }
.practice-profile :is(.education-sources,.medical-context) { font-size:14px }
.legal-section h2 { margin-bottom:24px }
.legal-section h3 { margin-top:32px }
.legal-section h4 { margin-top:24px }
.legal-section p,.legal-copy,.legal-section ul { max-width:850px; font-size:16px; line-height:1.75; overflow-wrap:anywhere }
.legal-section ul { padding-left:24px }
.legal-section li+li { margin-top:10px }
.legal-main .legal-section:first-of-type { border-top:0; padding-top:24px }
/* Retained educational-board fallback. */
.education-images { display:grid; gap:32px; margin:32px 0 40px }
.education-images a,.education-images picture { display:block }
.education-images img { display:block; width:100%; height:auto }
.education-figure { position:relative; display:block }
.education-figure>.education-vector { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
/* Tablet and phone layouts. */
@media(max-width:760px) {
  .detail-header { padding:20px; gap:16px; flex-direction:column; align-items:flex-start }
  .detail-header nav { width:100%; justify-content:space-between; gap:12px }
  .detail-header nav a { font-size:14px; letter-spacing:0 }
  .detail-main { padding:28px 20px }
  .sport-hero { grid-template-columns:minmax(0,1fr); gap:24px; margin-block:24px 40px }
  .sport-hero picture { max-width:380px; margin:auto }
  .sport-table th,.sport-table td { padding:12px; font-size:15px }
  .sport-cta { padding:24px }
  .detail-footer { margin-inline:20px }
  .lesson-grid,.lesson-symptoms .lesson-grid,.lesson-intro,.type1-page .lesson-intro { grid-template-columns:minmax(0,1fr) }
  .lesson-section { margin-block:48px }
  .lesson-card,.lesson-intro { padding:16px }
  .lesson-card>h3 { min-height:0 }
  .lesson-intro .lesson-art { max-width:300px; width:100%; margin-inline:auto }
  .lesson-comparison { grid-template-columns:minmax(0,1fr); gap:32px }
  .lesson-comparison h4 { min-height:0 }
  .lesson-comparison .lesson-art { max-width:420px; width:100%; margin-inline:auto }
  .type1-foundations .lesson-card:first-child { grid-template-columns:minmax(0,1fr) }
  .insulin-comparison--balanced>div { grid-template-rows:auto auto auto }
  .insulin-comparison--balanced h4 { text-align:left }
  .weight-comparison .lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .weight-comparison .lesson-card { padding:12px 8px }
  .weight-comparison .lesson-art { height:220px }
  .weight-comparison .lesson-art img { max-height:210px }
  .appointment-grid { grid-template-columns:1fr; gap:24px }
  .practice-contact { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; font-size:15px }
}
@media(max-width:700px) {
  .welcome { padding:88px 20px 56px }
  .brand { width:min(300px,72vw) }
  .wordmark { font-size:clamp(17px,4.4vw,23px) }
  .welcome nav { top:16px; left:16px; right:16px; justify-content:space-between; gap:12px }
  .welcome nav a { font-size:14px; letter-spacing:0; padding:12px 0; flex-shrink:0 }
  .content { padding-inline:20px }
  .illustrations { padding:32px 0 40px }
  .illustration-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:520px; gap:24px 16px }
  .illustration-grid>:nth-child(n) { grid-column:span 2 }
  .illustration-image { width:82% }
  .illustration figcaption { font-size:clamp(16px,4.3vw,21px); margin-top:12px; overflow-wrap:break-word }
  .search-intro,.search-summary,.doctor-intro,.practice-questions,.contact { padding-block:40px }
  .parking-info { gap:16px }
  .schedule-table th { padding-right:12px }
}
@media(max-width:360px) {
  .welcome nav a,.detail-header nav a { font-size:12px }
  .welcome nav,.detail-header nav { gap:8px }
  .weight-comparison .lesson-art { height:180px }
  .weight-comparison .lesson-art img { max-height:170px }
}
@media(orientation:landscape) and (max-height:550px) and (max-width:1000px) and (pointer:coarse) {
  .welcome { padding:80px 24px 48px }
  .brand { width:280px }
  .illustrations { padding-top:24px }
  .content,.detail-header { padding-inline:max(20px,env(safe-area-inset-left),env(safe-area-inset-right)) }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
}

/* Own responsive arrival illustration. */
.custom-arrival-map { margin:24px auto; max-width:780px }
.custom-arrival-map img { display:block; width:100%; height:auto; border:1px solid #e0e6e4; border-radius:14px }
.custom-arrival-map figcaption { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; font-size:14px; color:#526374 }
.walking-route-key { width:32px; border-top:4px dotted #d93737 }