/* Homepage update (Simon, 9 Nov 2026): static consultation photo, reading cards C,
   film-led video section. Scoped to the three homepages. */

/* Why choose: one static photograph (consult-4), same framing as the former carousel. */
#why-choose .cp-still{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:18px;border:1px solid rgba(24,61,96,.14);background:var(--fg-surface,rgba(250,248,242,.62))}
#why-choose .cp-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0;max-width:none}

/* Where should I start reading? Larger picture on top, tight text, navy arrow on the title line. */
html body #main #start-reading .sr-list.sr-cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0 0;padding:0}
html body #main #start-reading .sr-cards>li{margin:0;padding:0;min-width:0;border:1px solid rgba(24,61,105,.16);border-radius:16px;background:rgba(255,253,248,.8);overflow:hidden;transition:border-color .2s,box-shadow .2s}
html body #main #start-reading .sr-cards>li:hover{border-color:rgba(24,61,105,.32);box-shadow:0 8px 22px rgba(24,61,105,.08)}
html body #main #start-reading .sr-list.sr-cards a{display:flex;flex-direction:column;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#183d69;text-decoration:none}
html body #main #start-reading .sr-list.sr-cards a:focus-visible{outline:3px solid #8c7444;outline-offset:-3px;border-radius:16px}
html body #main #start-reading .sr-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:0;border-radius:0;margin:0}
html body #main #start-reading .sr-copy{display:block;padding:14px 18px 18px}
html body #main #start-reading .sr-cards .sr-k{display:block;margin:0 0 6px;font-size:13px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#40597a}
html body #main #start-reading .sr-cards .sr-t{display:block;margin:0;font-size:19px;line-height:1.38;font-weight:600;color:#183d69}
html body #main #start-reading .sr-nowrap{white-space:nowrap}
/* Circle and arrow are one inline SVG (see build.py), so the arrow is centred by geometry. */
html body #main #start-reading svg.sr-go{display:inline-block;width:26px;height:26px;margin-left:9px;vertical-align:-6px;overflow:visible}
html body #main #start-reading svg.sr-go circle{fill:#183d69;transition:fill .2s}
html body #main #start-reading svg.sr-go path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #main #start-reading .sr-cards a:hover .sr-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
html body #main #start-reading .sr-cards a:hover svg.sr-go circle,html body #main #start-reading .sr-cards a:focus-visible svg.sr-go circle{fill:#0e2846}
html body #main #start-reading .sr-all{margin-top:22px}

/* Watch Dr Chen's videos: animated lens film first; operation videos as a clear choice. */
html body #main #watch .hr-home-watch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center}
html body #main #watch .hr-home-watch h2{margin:0 0 24px}
html body #main #watch .hr-home-watch p{font-size:18px;line-height:1.6;margin:0 0 24px}
html body #main #watch .hr-home-watch .yt-link{display:inline-flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:12px;white-space:nowrap;justify-content:flex-start;text-align:left;width:auto;max-width:100%}
html body #main #watch .hr-home-watch .yt-link>span{display:inline!important;min-width:0}
html body #main #watch .yt-glyph{width:24px;height:18px;flex:none}
html body #main #watch .hr-home-surgery-choice{margin-top:24px;padding-top:22px;border-top:1px solid rgba(15,39,64,.18)}
html body #main #watch .hr-home-surgery-choice p{font-size:16px;margin-bottom:12px}
html body #main #watch .hr-home-op{display:inline-flex!important;align-items:center;gap:12px;min-height:48px;padding:10px 22px!important;border:1.5px solid #183d69!important;border-radius:999px!important;background:rgba(255,253,248,.85)!important;color:#183d69!important;font:600 16px/1.3 Manrope,system-ui,sans-serif!important;text-decoration:none!important;box-shadow:0 4px 14px rgba(24,61,105,.08)}
html body #main #watch .hr-home-op:hover,html body #main #watch .hr-home-op:focus-visible{background:#183d69!important;color:#fff!important}
html body #main #watch .hr-home-op:hover *,html body #main #watch .hr-home-op:focus-visible *{color:#fff!important}
html body #main #watch .hr-home-op:focus-visible{outline:3px solid #8c7444;outline-offset:3px}
html body #main #watch .hr-home-video-card{overflow:hidden;border-radius:18px;border:1px solid rgba(24,61,105,.16);background:rgba(255,253,248,.6)}
html body #main #watch .hr-home-play{position:relative;display:block;border:0;padding:0;margin:0;width:100%;aspect-ratio:16/9;background:#0d283f;cursor:pointer;overflow:hidden}
html body #main #watch .hr-home-play img{display:block;width:100%;height:100%;object-fit:cover}
html body #main #watch .hr-home-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(11,35,55,.86)}
/* Play triangle drawn as a shape, nudged 2 px right so it looks optically centred. */
html body #main #watch .hr-home-play-icon::before{content:"";display:block;width:20px;height:22px;margin-left:4px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
html body #main #watch .hr-home-play:hover .hr-home-play-icon{background:#102a40}
html body #main #watch .hr-home-play:focus-visible{outline:3px solid #ad8c47;outline-offset:-4px}
html body #main #watch .hr-home-video-copy{padding:18px 22px}
html body #main #watch .hr-home-video-copy .hr-home-film-label{font-size:15px;margin:0 0 6px;color:#40597a}
html body #main #watch .hr-home-video-copy h3{font-size:22px;line-height:1.35;margin:0}
html body #main #watch .yt-live{position:relative;aspect-ratio:16/9;background:#102a40}
html body #main #watch .yt-live iframe{width:100%;height:100%;display:block;border:0}

@media (max-width:1100px){
html body #main #start-reading .sr-list.sr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
html body #main #start-reading .sr-img{aspect-ratio:2/1}
html body #main #watch .hr-home-watch{gap:36px}
html body #main #watch .hr-home-watch .yt-link{white-space:normal}
}
@media (max-width:760px){
html body #main #start-reading .sr-list.sr-cards{grid-template-columns:1fr;gap:12px}
html body #main #start-reading .sr-list.sr-cards a{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:stretch}
html body #main #start-reading .sr-img{height:100%;min-height:96px;aspect-ratio:auto}
html body #main #start-reading .sr-copy{padding:12px 14px;align-self:center}
html body #main #start-reading .sr-cards .sr-k{font-size:12px;margin-bottom:4px}
html body #main #start-reading .sr-cards .sr-t{font-size:17px}
html body #main #watch .hr-home-watch{grid-template-columns:minmax(0,1fr);gap:32px}
html body #main #watch .hr-home-video-copy h3{font-size:20px}
}