@charset "UTF-8";
/*!
 * Shantam Diabetes & Medical Centre — site styles, 2026-10 redesign.
 *
 * Colours are the clinic's own logo: royal blue (#0050A0) and leaf green
 * (#80C030), on white and a cool light grey, with a deep navy for the hero,
 * the doctor band and the footer. One family — Poppins, self-hosted (400–700).
 *
 * House rules
 *   - Headings are bold (800) and tight; labels are plain uppercase text.
 *   - Cards: white, 14px radius, 1px light border, lift on hover.
 *   - Icon tiles are solid. No gradient text, no glow blobs, no pill chips.
 *   - Compact: sections are 72px padding on desktop, 48px on phones.
 *
 *   01 font/tokens  02 base  03 layout  04 buttons  05 header  06 drawer
 *   07 hero  08 sections  09 services  10 doctor  11 steps  12 stories
 *   13 gallery  14 faq  15 forms  16 contact  17 inner pages  18 footer
 *   19 float  20 overlays  21 motion/print
 */
/* ═════════════════════════════ 01 font / tokens ═════════════════════════ */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
:root {
  --blue:      #0A55A8;   /* logo blue — buttons, links, icon tiles */
  --blue-700:  #084584;
  --navy:      #0B2545;   /* hero panel, doctor band, footer */
  --navy-900:  #071A33;
  --blue-50:   #EEF4FC;
  --blue-100:  #DCE8F8;

  --green:     #7CB82F;   /* logo green — marks and highlights on dark */
  --green-600: #477A15;   /* white text on it: 5.2:1 (AA, with margin) */
  --green-700: #3F7012;   /* the only green used for text on white */
  --green-50:  #F2F8E9;
  --green-100: #E1F0CC;

  --wa:        #0F7A3C;   /* white text on it: 5.4:1 (AA) */

  --text:      #0F1B2D;
  --text-2:    #344458;
  --muted:     #5B6B80;
  --border:    #E3E9F1;
  --border-2:  #CBD6E3;
  --surface:   #F5F8FC;
  --white:     #FFFFFF;

  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.0625rem;
  --h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --h2: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  --h3: clamp(1.1rem, 1.03rem + .35vw, 1.3rem);

  --wrap: 1346px;          /* content width: + 2 × 32px gutter = 1410px container */
  --gutter: clamp(16px, 3.4vw, 32px);
  --side: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --sec: clamp(3rem, 2.1rem + 3vw, 4.5rem);

  --r: 14px;
  --r-sm: 10px;
  --sh-1: 0 1px 2px rgba(11,37,69,.06);
  --sh-2: 0 12px 30px -14px rgba(11,37,69,.25), 0 2px 6px rgba(11,37,69,.05);
  --ease: cubic-bezier(.2,.7,.3,1);
}
/* ═══════════════════════════════════ 02 base ════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.65; color: var(--text-2);
  background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--text); font-weight: 700; line-height: 1.22; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -.012em; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--blue-100); color: var(--navy); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-weight: 700; }
.skip:focus { top: 1rem; color: #fff; }
/* ═════════════════════════════════ 03 layout ════════════════════════════ */
/*
 * Layout is Bootstrap 5.3 grid (assets/css/bootstrap-grid.min.css, loaded first):
 * section > .container > .row > .col-*. Only the grid build is used, so
 * Bootstrap never restyles the site's own buttons, menu or type.
 * The container keeps the site's measure: 1240px of content plus the gutter.
 */
.container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec--grey { background: var(--surface); }
.sec--navy { background: var(--navy); color: rgba(255,255,255,.78); }
.sec--navy h2, .sec--navy h3 { color: #fff; }
/* two white sections touching would double the gap */
.sec--white + .sec--white { padding-top: 0; }
.label {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue);
}
.sec--navy .label, .hero .label, .ph .label { color: var(--green); }
.shead { margin-bottom: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.shead h2 { margin-top: .5rem; max-width: 22ch; }
.shead p { max-width: 56ch; color: var(--muted); font-size: var(--fs-lg); }
.sec--navy .shead p { color: rgba(255,255,255,.72); }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--fs-sm); }
.more svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.more:hover svg { transform: translateX(3px); }
.sec--navy .more { color: var(--green); }
.tile {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 11px;
  background: var(--blue); color: #fff;
}
.tile svg { width: 22px; height: 22px; }
.tile--soft { background: var(--blue-50); color: var(--blue); }
.tile--green { background: var(--green-600); }
.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; }
.ticks li::before, .prose ul li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: .2rem; border-radius: 6px;
  background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* ════════════════════════════════ 04 buttons ════════════════════════════ */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.3rem; border-radius: var(--r-sm); border: 2px solid var(--blue);
  background: var(--blue); color: #fff; font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-align: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; transform: translateY(-1px); }
.btn svg { flex: none; width: 18px; height: 18px; }
/* icons never shrink when a row runs short of room */
.btn--line { background: transparent; color: var(--blue); }
.btn--line:hover { background: var(--blue); color: #fff; }
.btn--white { background: #fff; border-color: #fff; color: var(--navy); }
.btn--white:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--navy); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
.btn--wa { background: var(--wa); border-color: var(--wa); }
.btn--wa:hover { background: #0B6431; border-color: #0B6431; }
.btn--sm { min-height: 44px; padding: .5rem 1rem; }
.btn--block { width: 100%; }
.acts { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 480px) {
.acts--stack > .btn { flex: 1 1 100%; }
}
/* ════════════════════════════════ 05 header ═════════════════════════════ */
.tb {
  position: relative; color: rgba(255,255,255,.78); font-size: var(--fs-xs);
  background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy) 100%);
}
.tb__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; }
/* left: where and when · right: email + social. Phone and WhatsApp live in the header and the floating rail. */
.tb__l, .tb__r { display: flex; align-items: center; }
.tb__l > * + *, .tb__r > * + * { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.12); }
.tb a, .tb .tb__bit { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; white-space: nowrap; color: rgba(255,255,255,.8); transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.tb a:hover { color: #fff; }
.tb a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.tb svg { flex: none; width: 15px; height: 15px; color: var(--green); }
.tb__tag {
  display: inline-flex; align-items: center; min-height: 20px; margin-left: .35rem; padding: 0 .55rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.7);
}
.tb__soc { display: flex; align-items: center; gap: .4rem; }
.tb__soc a { justify-content: center; width: 28px; min-height: 28px !important; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); }
.tb__soc svg { width: 13px; height: 13px; color: rgba(255,255,255,.85); }
.tb__soc a:hover { background: var(--green); border-color: var(--green); }
.tb__soc a:hover svg { color: var(--navy-900); }
.tb__soc a:focus-visible { border-radius: 50%; }
@media (max-width: 1100px) {
.tb__loc { display: none !important; }
.tb__hours { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
}
@media (max-width: 860px) {
.tb__mail { display: none !important; }
.tb__soc { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
}
@media (max-width: 640px) {
.tb__in { justify-content: center; }
.tb__r { display: none !important; }
}
@media (max-width: 400px) {
.tb__tag { display: none; }
}
.hd { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border); transition: box-shadow .2s var(--ease); }
/* stuck: a light, even lift — a heavy low shadow made the bar look pressed into the page */
.hd[data-stuck="true"] { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(11,37,69,.06), 0 4px 16px rgba(11,37,69,.06); }
/*
 * Layout: brand on the left; navigation and actions grouped on the right,
 * split by a hairline rule. One right-hand cluster reads as a single system
 * instead of three floating islands.
 */
.hd__in { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.hd__logo { flex: none; display: block; border-radius: var(--r-sm); }
.hd__logo img { width: clamp(165px, 6vw + 120px, 230px); height: auto; }
/* the flex item is the <nav> wrapper, not the list — push it (and the actions) right */
.hd__in > nav { margin-left: auto; padding-left: clamp(1.5rem, 3vw, 3rem); }
.nav { display: none; align-items: center; }
.nav > li { position: relative; }
.nav > li > a {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 76px; padding: 0 .8rem; white-space: nowrap;
  font-weight: 600; font-size: .9375rem; letter-spacing: -.005em; color: var(--text); transition: color .2s var(--ease);
}
/* indicator sits on the header's bottom edge, like a tab; grows from the centre on hover */
.nav > li > a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--blue); transform: scaleX(0); transition: transform .25s var(--ease);
}
.nav > li > a:hover::after, .nav > li:focus-within > a::after, .nav > li[data-on="true"] > a::after { transform: scaleX(1); }
.nav > li > a svg { flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.nav > li > a:hover, .nav > li:focus-within > a, .nav > li[data-on="true"] > a { color: var(--blue); }
.nav > li > a:hover svg, .nav > li:focus-within > a svg, .nav > li[data-on="true"] > a svg { color: var(--blue); }
.nav > li:hover > a svg, .nav > li:focus-within > a svg { transform: rotate(180deg); }
.hd__end { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.hd__call { display: none; align-items: center; gap: .7rem; color: var(--text); white-space: nowrap; }
.hd__call:hover { color: var(--blue); }
.hd__call .tile {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green-50); color: var(--green-700);
  box-shadow: 0 0 0 4px rgba(124,184,47,.08); transition: background .2s var(--ease), color .2s var(--ease);
}
.hd__call:hover .tile { background: var(--green-700); color: #fff; }
.hd__call .tile svg { width: 19px; height: 19px; }
.hd__call small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hd__call b { display: block; margin-top: 1px; font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.hd__book { display: none !important; }
/*
 * Primary CTA. A light sweep crosses it every few seconds to draw the eye
 * without nagging; hover lifts it and nudges the calendar icon.
 * The global prefers-reduced-motion rule switches all of this off.
 */
.hd__book.btn {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 50px; padding-inline: 1.45rem; border-radius: 12px; font-size: .9375rem;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  box-shadow: 0 10px 20px -12px rgba(10,85,168,.65), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.hd__book.btn::after {
  content: ""; position: absolute; inset: -2px auto -2px 0; z-index: -1; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: book-shine 5s var(--ease) 1.5s infinite;
}
.hd__book.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(10,85,168,.75), 0 0 0 4px rgba(10,85,168,.12), inset 0 1px 0 rgba(255,255,255,.18);
}
.hd__book.btn:hover::after { animation: book-shine .9s var(--ease); }
.hd__book.btn:hover svg { animation: book-ring .6s var(--ease); }
.hd__book.btn:active { transform: translateY(0) scale(.98); box-shadow: 0 6px 14px -10px rgba(10,85,168,.7); }
.hd__book.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@keyframes book-shine {
  0%       { transform: translateX(-160%) skewX(-18deg); }
  30%, 100% { transform: translateX(260%) skewX(-18deg); }
}
@keyframes book-ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg) scale(1.1); }
  50% { transform: rotate(10deg) scale(1.1); }
  75% { transform: rotate(-5deg); }
}
@media (min-width: 1120px) {
.hd__in, .nav > li > a { min-height: 88px; }
.nav { display: flex; }
.hd__end { margin-left: 0; padding-left: 1.5rem; border-left: 1px solid var(--border); min-height: 44px; }
.hd__book { display: inline-flex !important; }
.burger { display: none !important; }
}
@media (min-width: 1400px) {
.hd__call { display: flex; }
}
/* seven menu items (Blog added): slightly tighter items so the header row
   never runs past its container, with or without the call block */
@media (min-width: 1120px) and (max-width: 1299.98px) {
.nav > li > a { padding: 0 .5rem; }
.hd__in > nav { padding-left: .75rem; }
.hd__end { padding-left: 1rem; }
}
@media (min-width: 1120px) and (max-width: 1199.98px) {
.nav > li > a { font-size: .9rem; padding: 0 .42rem; }
}
@media (min-width: 1400px) {
.nav > li > a { padding: 0 .55rem; }
.hd__in > nav { padding-left: 1.25rem; }
.hd__end { gap: 1.25rem; padding-left: 1.25rem; }
}
/* dropdowns */
.dd {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 250px; padding: .5rem; border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.nav > li:hover > .dd, .nav > li:focus-within > .dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd a { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--text); font-weight: 500; font-size: var(--fs-sm); }
.dd a:hover { background: var(--blue-50); color: var(--blue); }
.dd a svg { width: 18px; height: 18px; color: var(--blue); }
/* services mega menu */
.mega { width: 860px; left: -220px; padding: 0; overflow: hidden; }
.mega__in { display: grid; grid-template-columns: 1fr 250px; }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; padding: .8rem; }
.mega__list a { align-items: flex-start; padding: .7rem; }
.mega__list .tile { width: 38px; height: 38px; border-radius: 9px; }
.mega__list .tile svg { width: 18px; height: 18px; color: #fff; }
.mega__list b { display: block; font-size: var(--fs-sm); }
.mega__list span span { display: block; margin-top: .1rem; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); line-height: 1.45; }
.mega__side { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; background: var(--navy); color: rgba(255,255,255,.75); font-size: var(--fs-sm); }
.mega__side .label { color: var(--green); }
.mega__side h3 { color: #fff; font-size: 1.1rem; }
.mega__side .btn { margin-top: auto; justify-content: center; color: #fff; font-weight: 600; }
.mega__side .btn:hover { background: var(--blue-700); color: #fff; }
.mega__side .btn svg { color: inherit; }
.burger { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text); }
.burger svg { width: 22px; height: 22px; }
.burger .ic-close { display: none; }
.burger[aria-expanded="true"] .ic-open { display: none; }
.burger[aria-expanded="true"] .ic-close { display: block; }
@media (max-width: 400px) {
.hd__end .btn--call-m { display: none; }
}
/* ════════════════════════════════ 06 drawer ═════════════════════════════ */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(7,26,51,.55); opacity: 0; transition: opacity .3s var(--ease); }
.scrim[data-open="true"] { opacity: 1; }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 61; display: flex; flex-direction: column;
  width: min(380px, 90vw); background: #fff; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .35s var(--ease);
}
.drawer[data-open="true"] { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.drawer__top > * { min-width: 0; }
.drawer__top img { width: 175px; }
.drawer__x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); border: 1px solid var(--border); }
.drawer__x svg { width: 20px; height: 20px; }
.dnav { padding: .25rem 1.25rem; }
.dnav > li { border-bottom: 1px solid var(--border); }
.dnav > li > a, .dnav__t {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  font-weight: 600; color: var(--text); text-align: left;
}
.dnav > li > a[aria-current] { color: var(--blue); }
.dnav__t svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); }
.dnav__t[aria-expanded="true"] svg { transform: rotate(180deg); }
.dsub { display: none; padding-bottom: .6rem; }
.dsub[data-open="true"] { display: block; }
.dsub a { display: flex; align-items: center; gap: .6rem; min-height: 42px; padding-left: .25rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.dsub a svg { width: 17px; height: 17px; color: var(--blue); }
.drawer__foot { display: grid; gap: .6rem; margin-top: auto; padding: 1.25rem; background: var(--surface); }
/* ═════════════════════════════════ 07 hero ══════════════════════════════ */
/* Full-bleed hero: each photograph fills the band and a navy gradient from the
   left keeps the copy readable. Slides share one grid cell — no height jumps. */
.hero { position: relative; overflow: hidden; background: var(--navy-900); color: rgba(255,255,255,.8); }
.hero__deck { display: grid; grid-template-columns: minmax(0, 1fr); }
.slide {
  position: relative; grid-area: 1 / 1; display: flex; align-items: center;
  min-height: 500px; opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.slide[data-on="true"] { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }
.slide__pic { position: absolute; inset: 0; overflow: hidden; }
.slide__pic img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); transition: transform 7s linear;
}
.slide[data-on="true"] .slide__pic img { transform: scale(1); }
/* readable side on the left, picture breathes on the right, soft floor for the controls */
.slide__pic::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(7,26,51,.85) 0%, rgba(7,26,51,0) 32%),
    linear-gradient(90deg, rgba(7,26,51,.96) 0%, rgba(7,26,51,.88) 34%, rgba(7,26,51,.45) 62%, rgba(7,26,51,.12) 100%);
}
.slide__text { position: relative; z-index: 1; width: 100%; padding: 3rem var(--side) 5rem; }
.slide__text > * { max-width: 640px; }
.slide__text > h1, .slide__text > .slide__h { max-width: 820px; }
.slide__text h1, .slide__text .slide__h { margin-top: .8rem; color: #fff; font-size: clamp(1.85rem, 1.25rem + 2vw, 2.9rem); line-height: 1.16; letter-spacing: -.015em; font-weight: 700; }
.slide__text em { font-style: normal; color: var(--green); }
.slide__lede { margin-top: .9rem; max-width: 50ch; font-size: var(--fs-lg); color: rgba(255,255,255,.82); }
.slide__acts { margin-top: 1.5rem; }
.slide__text .label {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(124,184,47,.14); border: 1px solid rgba(124,184,47,.35);
}
.slide__text .label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
/* copy rises in after the picture */
.slide__text > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.slide[data-on="true"] .slide__text > * { opacity: 1; transform: none; }
.slide[data-on="true"] .slide__text > :nth-child(2) { transition-delay: .1s; }
.slide[data-on="true"] .slide__text > :nth-child(3) { transition-delay: .2s; }
.slide[data-on="true"] .slide__text > :nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.slide__pic img, .slide__text > * { transition: none; transform: none; }
}
/* a quiet info card on the picture side (wide screens only) */
.slide__cap {
  position: absolute; right: var(--hero-x); bottom: 4.5rem; z-index: 1; display: none; align-items: center; gap: .75rem;
  padding: .75rem 1.1rem .75rem .75rem; border-radius: var(--r-md, 14px);
  background: rgba(255,255,255,.96); color: var(--text); box-shadow: 0 20px 40px -18px rgba(7,26,51,.55);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
}
.slide__cap .tile { width: 40px; height: 40px; border-radius: 10px; }
.slide__cap .tile svg { width: 19px; height: 19px; }
.slide__cap b { display: block; font-size: var(--fs-sm); }
.slide__cap span span { color: var(--muted); }
@media (min-width: 992px) {
.slide { min-height: clamp(480px, 62vh, 560px); }
.slide__text { padding-block: 3.5rem 7.5rem; }
}
@media (min-width: 1200px) {
.slide__cap { display: flex; }
}
.slide__chip, .hero__trust { display: none; }
/* slide dots: the active one stretches into a green pill */
.hero__bar { position: absolute; z-index: 4; left: 50%; bottom: 1.75rem; transform: translateX(-50%); }
.hero__tabs { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 999px; background: rgba(7,26,51,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__tab {
  position: relative; width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.4); transition: width .35s var(--ease), background .35s var(--ease);
}
.hero__tab::before { content: ""; position: absolute; inset: -8px -4px; }
/* bigger touch target */
.hero__tab:hover { background: rgba(255,255,255,.75); }
.hero__tab[data-on="true"] { width: 32px; background: var(--green); }
.hero__tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* prev / next: glass circles at the vertical centre of each edge. The copy and
   the bar keep at least --hero-x from the edge so the arrows never cover them. */
.hero { --hero-x: max(var(--side), 6rem); }
.hero__tools { position: absolute; z-index: 4; inset: 50% 0 auto 0; display: flex; justify-content: space-between; padding-inline: calc((var(--hero-x) - 56px) / 2); transform: translateY(-50%); pointer-events: none; }
.hero__btn {
  pointer-events: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero__btn svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.hero__btn:hover, .hero__btn:focus-visible { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 12px 28px -10px rgba(0,0,0,.55); }
.hero__btn[data-go="prev"]:hover svg { transform: translateX(-3px); }
.hero__btn[data-go="next"]:hover svg { transform: translateX(3px); }
.hero__btn:active { transform: scale(.94); }
.hero__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (min-width: 768px) {
.slide__text { padding-inline: var(--hero-x); }
}
/* desktop: the strip card overlaps the hero's last 56px — lift the dots, card and arrows clear of it */
@media (min-width: 992px) {
.slide__cap { bottom: 6.5rem; }
.hero__bar { bottom: 5rem; }
.hero__tools { margin-top: -28px; }
}
/* ── phone: photo on top fading into navy, then the copy, a short trust list
   and segmented progress bars — arrows sit on the photo ── */
@media (max-width: 767.98px) {
.hero { background: var(--navy-900); }
.slide { display: block; min-height: 0; }
.slide__pic { bottom: auto; height: 300px; }
.slide__pic::after { background: linear-gradient(to bottom, rgba(7,26,51,.1) 0%, rgba(7,26,51,.45) 45%, var(--navy-900) 100%); }
.slide__text { padding: 190px var(--gutter) 0; }
.slide__text .label { display: none; }
.slide__chip {
    display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .85rem .35rem .35rem; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: var(--fs-sm); font-weight: 600;
  }
.slide__chip-i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--navy-900); }
.slide__chip-i svg { width: 15px; height: 15px; }
/* two lines on any phone: the green half always starts line two */
.slide__text h1, .slide__text .slide__h { margin-top: .9rem; font-size: clamp(1.2rem, 6.3vw, 1.9rem); line-height: 1.22; letter-spacing: -.02em; }
.slide__text h1 em::before, .slide__text .slide__h em::before { content: "\A"; white-space: pre; }
.slide__lede { margin-top: .7rem; font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,.75);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.slide__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; margin-top: 1.3rem; }
.slide__acts > .btn {
    min-width: 0; min-height: 50px; justify-content: center; gap: .5rem; padding: 0 1.15rem; border-radius: 12px;
    font-size: .92rem; white-space: nowrap;
  }
.slide__acts > .btn:first-child { box-shadow: 0 14px 28px -14px rgba(10,85,168,.95); }
.slide__acts > .btn--ghost { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.slide__acts > .btn svg { width: 17px; height: 17px; }
.slide__more { display: none; }
.hero__trust {
    display: grid; gap: .7rem; margin: 1.5rem var(--gutter) 0; padding: 1.25rem 0 0; list-style: none;
    border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-size: var(--fs-sm); font-weight: 500;
  }
.hero__trust li { display: flex; align-items: center; gap: .7rem; }
.hero__trust span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--green); }
.hero__trust svg { width: 16px; height: 16px; }
.hero__bar { position: static; transform: none; padding: 1.4rem var(--gutter) 1.5rem; }
.hero__tabs { display: flex; gap: .4rem; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero__tab { flex: 1; width: auto; height: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.hero__tab[data-on="true"] { width: auto; background: rgba(255,255,255,.18); }
.hero__tab::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: left; }
.hero__tab[data-on="true"]::after { transform: scaleX(1); }
.hero[data-playing="true"] .hero__tab[data-on="true"]::after { animation: hero-fill var(--hold, 6.5s) linear both; }
.hero__tools { inset: 120px 0 auto 0; padding-inline: .75rem; transform: translateY(-50%); }
.hero__btn { width: 42px; height: 42px; background: rgba(7,26,51,.4); }
.hero__btn svg { width: 18px; height: 18px; }
}
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.hero__tab::after { animation: none !important; }
}
/* four promises under the hero — one white card; on desktop it lifts up and
   overlaps the hero's lower edge. Each promise links to its page. */
.strip { position: relative; z-index: 5; padding-top: 1.25rem; background: #fff; }
.strip__in {
  position: relative; overflow: hidden; border-radius: 22px; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 30px 70px -36px rgba(7,26,51,.5);
}
.strip__in::before {   /* brand hairline along the top */
  content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}
.strip__col + .strip__col { border-top: 1px solid var(--border); }
.strip__it {
  position: relative; display: flex; align-items: center; gap: .9rem; height: 100%;
  padding: 1.15rem 1.25rem; color: inherit; text-decoration: none;
  transition: background .3s var(--ease);
}
.strip__it:hover { background: #F6F9FE; color: inherit; }
.strip__it:focus-visible { outline-offset: -4px; }
.strip__ic {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(10,85,168,.85); transition: transform .3s var(--ease);
}
.strip__col:nth-child(even) .strip__ic { background: linear-gradient(135deg, #5E9E22, var(--green-700)); box-shadow: 0 10px 20px -10px rgba(71,122,21,.85); }
.strip__ic svg { width: 22px; height: 22px; }
.strip__it:hover .strip__ic { transform: translateY(-2px); }
.strip__body { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.strip__h, .strip__p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__h { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.strip__p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.strip__go {
  position: absolute; right: .9rem; top: 50%; margin-top: -15px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 6px #F6F9FE; opacity: 0; transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.strip__go svg { width: 14px; height: 14px; }
.strip__it:hover .strip__go, .strip__it:focus-visible .strip__go { opacity: 1; transform: none; }
@media (min-width: 576px) {
.strip__col + .strip__col { border-top: 0; }
.strip__col:nth-child(even) { border-left: 1px solid var(--border); }
.strip__col:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (min-width: 992px) {
.strip { padding-top: 0; background: linear-gradient(to bottom, transparent 56px, #fff 56px); }
.strip__in { margin-top: -56px; }
}
@media (min-width: 1200px) {
.strip__it { padding: 1.3rem 1.4rem; }
.strip__col + .strip__col { border-left: 1px solid var(--border); }
.strip__col:nth-child(n+3) { border-top: 0; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
.strip__it { gap: .75rem; padding: 1.2rem 1rem; }
.strip__ic { width: 44px; height: 44px; border-radius: 12px; }
.strip__ic svg { width: 20px; height: 20px; }
.strip__h { font-size: .94rem; }
.strip__p { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
.strip__it * { transition: none !important; }
}
/* ═══════════════════════════════ 08 sections ════════════════════════════ */
.card {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  padding: clamp(1.25rem, 1rem + .8vw, 1.6rem); border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue-100); }
.card h3 { margin-top: .55rem; }
.card p { font-size: var(--fs-sm); color: var(--muted); }
.card h3 a { color: inherit; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* "In short" — the answer-first paragraph */
.answer {
  margin-bottom: 1.75rem; padding: 1.2rem 1.35rem; border: 1px solid var(--blue-100); border-left: 5px solid var(--blue);
  border-radius: var(--r); background: var(--blue-50);
}
.answer__k { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.answer__k svg { width: 17px; height: 17px; }
.answer__p { margin-top: .45rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }
/* conditions treated */
/* two-up guidance cards (checkup + health product) */
/* ═══════════════════════════════ 09 services ════════════════════════════ */
.svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r); background: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue-100); }
.svc h3 { font-size: 1.1rem; }
.svc h3 a { color: inherit; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }
.svc p { flex: 1; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.svc .more { margin-top: .35rem; }
.svc:hover .more svg { transform: translateX(3px); }
/* ════════════════════════════════ 10 doctor ═════════════════════════════ */
/* ════════════════════════════════ 11 steps ══════════════════════════════ */
.step { position: relative; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.step h3 { margin-top: .75rem; font-size: 1.02rem; }
.step p { margin-top: .3rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
/* ════════════════════════════════ 12 stories ════════════════════════════ */
.story { display: grid; gap: 1.1rem; }
@media (min-width: 900px) {
.story { grid-template-columns: repeat(3, 1fr); }
}
.tale { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.tale__q { width: 32px; height: 32px; color: var(--blue-100); }
.tale__tag { margin-top: .75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); }
.tale blockquote p { margin-top: .45rem; color: var(--text-2); }
.tale figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.25rem; }
.tale__av { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.tale figcaption b { display: block; font-size: var(--fs-sm); color: var(--text); }
.tale figcaption span span { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* ════════════════════════════════ 13 gallery ════════════════════════════ */
.player { position: relative; overflow: hidden; border-radius: var(--r); background: var(--navy-900); aspect-ratio: 16 / 9; }
.player iframe { width: 100%; height: 100%; border: 0; }
.player__go { position: relative; display: block; width: 100%; height: 100%; }
.player__go img { width: 100%; height: 100%; object-fit: cover; }
.player__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; background: #E62117; color: #fff; transform: translate(-50%, -50%); box-shadow: var(--sh-2);
  transition: transform .2s var(--ease);
}
.player__go:hover .player__play { transform: translate(-50%, -50%) scale(1.07); }
.player__play svg { width: 26px; height: 26px; margin-left: 3px; }
/* ══════════════════════════════════ 14 faq ══════════════════════════════ */
.qa__intro h2 { margin-top: .5rem; }
.qa__intro > p { margin-top: .75rem; color: var(--muted); }
.help { margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--r); background: var(--navy); color: rgba(255,255,255,.75); }
.help h3 { color: #fff; font-size: 1.15rem; }
.help p { margin-top: .35rem; font-size: var(--fs-sm); }
.help .acts { margin-top: 1rem; }
.qa__help-m { display: none; }
@media (max-width: 991.98px) {
.qa__intro .help { display: none; }
.qa__help-m { display: block; }
}
.faq { display: grid; gap: .6rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; overflow: hidden; transition: border-color .2s var(--ease), background .2s var(--ease); }
.faq__item:has([aria-expanded="true"]) { border-color: var(--blue-100); background: var(--blue-50); box-shadow: inset 4px 0 0 var(--blue); }
.faq__h { margin: 0; font: inherit; letter-spacing: 0; }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1rem 1.15rem; text-align: left; font-weight: 700; font-size: var(--fs-md); color: var(--text); line-height: 1.45;
}
.faq__q:hover { color: var(--blue); }
.faq__q svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: var(--blue); transition: transform .25s var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq__a[data-open] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.15rem 1.1rem; font-size: var(--fs-sm); color: var(--text-2); }
.note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted); }
/* ═════════════════════════════════ 15 forms ═════════════════════════════ */
.formcard { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border: 1px solid var(--border); border-radius: var(--r); background: #fff; box-shadow: var(--sh-2); }
.formcard h2, .formcard h3 { font-size: 1.35rem; }
.formcard > p { margin-top: .3rem; font-size: var(--fs-sm); color: var(--muted); }
.formcard form { margin-top: 1.25rem; }
.f { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.f label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.f .req { color: #C93A2C; }
.f label .hint { font-weight: 500; }
.f input, .f textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: .75rem .9rem; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: #fff; font: inherit; font-size: var(--fs-md); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.f textarea { min-height: 116px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: #8A99AC; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,85,168,.15); }
.f [aria-invalid="true"] { border-color: #C93A2C; }
.msg { font-size: var(--fs-xs); font-weight: 500; color: #C93A2C; }
.msg:empty { display: none; }
.hint { font-size: var(--fs-xs); color: var(--muted); }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flash { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; }
.flash--ok { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700); }
.flash--no { background: #FDF0EE; border: 1px solid #F5CFC9; color: #9E2A1F; }
.form-end { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1.25rem; }
@media (max-width: 480px) {
.form-end .btn { width: 100%; }
}
/* ════════════════════════════════ 16 contact ════════════════════════════ */
.ways { margin-top: 1rem; }
.way {
  display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border-radius: var(--r);
  border: 1px solid var(--border); background: #fff; color: var(--text); min-width: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.way:hover { border-color: var(--blue); color: var(--text); box-shadow: var(--sh-2); }
.way .tile { width: 40px; height: 40px; border-radius: 10px; }
.way .tile svg { width: 19px; height: 19px; }
.way > span { min-width: 0; }
.way small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.way b { display: block; font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: 1.45; }
.map { overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
.map iframe { width: 100%; height: 360px; border: 0; }
/* ═════════════════════════════ 17 inner pages ═══════════════════════════ */
.ph { position: relative; background: var(--navy); color: rgba(255,255,255,.75); }
.ph::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0 65%, var(--green) 65%); }
.ph__in { padding-block: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem) clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); }
.ph h1 { margin-top: .6rem; color: #fff; font-size: clamp(1.85rem, 1.35rem + 2vw, 2.8rem); max-width: 24ch; }
.ph__lede { margin-top: .55rem; max-width: 62ch; font-size: var(--fs-lg); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; font-size: var(--fs-xs); font-weight: 500; }
.crumbs a { color: rgba(255,255,255,.72); }
.crumbs a:hover { color: #fff; }
.crumbs .sep { margin-left: .3rem; color: rgba(255,255,255,.35); }
.crumbs [aria-current] { color: var(--green); }
.media-img { width: 100%; border-radius: var(--r); aspect-ratio: 2 / 1; object-fit: cover; }
.figure { margin-bottom: 1.75rem; }
.prose > * + * { margin-top: .9rem; }
.prose h2 { margin-top: 1.9rem; font-size: clamp(1.3rem, 1.12rem + .75vw, 1.65rem); }
.prose h3 { margin-top: 1.4rem; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { display: grid; gap: .55rem; }
.prose ul li { display: flex; gap: .65rem; }
.glance { margin-top: 2rem; }
.glance__h { font-size: 1.2rem; }
.glance__grid { display: grid; gap: .7rem; margin-top: .9rem; }
@media (min-width: 560px) {
.glance__grid { grid-template-columns: 1fr 1fr; }
}
.glance__grid > div { padding: .95rem 1.05rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.glance__grid dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.glance__grid dd { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.side { display: grid; gap: 1rem; }
@media (min-width: 992px) {
.side { position: sticky; top: 104px; }
}
.side__book { padding: 1.5rem; border-radius: var(--r); background: var(--navy); color: rgba(255,255,255,.75); }
.side__book h2 { color: #fff; font-size: 1.2rem; }
.side__book p { margin-top: .4rem; font-size: var(--fs-sm); }
.side__book .btn { margin-top: .6rem; }
.side__book .btn:first-of-type { margin-top: 1.1rem; }
.side__list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: #fff; }
.side__list h2 { padding: .9rem 1.15rem; font-size: 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.side__list a { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .55rem 1.15rem; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 500; font-size: var(--fs-sm); }
.side__list li:last-child a { border-bottom: 0; }
.side__list a svg { width: 18px; height: 18px; color: var(--blue); }
.side__list a:hover, .side__list [aria-current] a { background: var(--blue-50); color: var(--blue); }
.side__list [aria-current] a { box-shadow: inset 4px 0 0 var(--blue); }
/* ═════════════════════════════════ 18 footer ════════════════════════════ */
/* closing CTA — a card that straddles the page and the footer: the section
   paints its lower half navy so the card appears to sit on the footer's edge */
.cta { position: relative; z-index: 1; color: rgba(255,255,255,.8); background: linear-gradient(to bottom, transparent 50%, var(--navy-900) 50%); }
.cta__in {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) clamp(1.25rem, .8rem + 2vw, 3rem);
  border-radius: 20px;
  background: linear-gradient(110deg, var(--blue) 0%, var(--blue-700) 100%);
  box-shadow: 0 24px 48px -28px rgba(7,26,51,.65);
}
/* two quiet rings in the right corner — the only decoration */
.cta__in::before, .cta__in::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }
.cta__in::before { right: -90px; top: -150px; width: 340px; height: 340px; }
.cta__in::after { right: -40px; top: -100px; width: 240px; height: 240px; border-color: rgba(255,255,255,.08); }
.cta__ic {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; color: var(--blue);
  box-shadow: 0 0 0 6px rgba(255,255,255,.12);
}
.cta__ic svg { width: 24px; height: 24px; }
.cta__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B9E37F; }
.cta h2 { margin-top: .3rem; color: #fff; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.cta p { margin-top: .25rem; font-size: var(--fs-md); color: rgba(255,255,255,.82); }
.cta .btn--go { background: #fff; border-color: #fff; color: var(--blue); box-shadow: 0 10px 22px -12px rgba(7,26,51,.6); }
.cta .btn--go:hover, .cta .btn--go:focus-visible { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.cta .btn--ghost { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
.cta :focus-visible { outline-color: #fff; }
/* the footer: navy with a soft dotted texture in the lower-right corner */
.ft {
  position: relative; color: rgba(255,255,255,.66); font-size: .9375rem; line-height: 1.65;
  background: radial-gradient(700px 360px at 100% 100%, rgba(124,184,47,.07), transparent 70%), var(--navy-900);
}
.ft::before {
  content: ""; position: absolute; right: 0; bottom: 0; width: min(560px, 60%); height: 70%; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(farthest-corner at 100% 100%, #000, transparent 75%); mask-image: radial-gradient(farthest-corner at 100% 100%, #000, transparent 75%);
}
.ft > * { position: relative; }
/* desktop: col-xl-auto columns size to their content and justify-content-between
   shares the free space, so every gutter is the same width */
.ft__grid { padding-block: clamp(2.75rem, 2.1rem + 2.2vw, 4rem) clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
@media (min-width: 1200px) {
.ft__brand { max-width: 364px; }
.ft__contact { max-width: 384px; }
}
.ft__logo { display: inline-block; border-radius: 8px; }
.ft__logo img { width: 230px; height: auto; }
.ft__brand p { margin-top: 1.4rem; max-width: 38ch; text-wrap: wrap; line-height: 1.75; }
.ft__read { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; margin-top: .6rem; font-weight: 700; color: var(--green); }
.ft__read svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.ft__read:hover { color: #fff; }
.ft__read:hover svg { transform: translateX(3px); }
.ft h2 { position: relative; margin-bottom: 1.4rem; padding-bottom: .8rem; color: #fff; font-size: 1.125rem; letter-spacing: -.005em; }
.ft h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--green), rgba(124,184,47,.25)); }
/* link lists: each link carries its own icon */
.ft__l { display: grid; gap: .35rem; }
.ft__l li a { display: inline-flex; align-items: center; gap: .75rem; min-height: 36px; color: rgba(255,255,255,.78); font-size: 1rem; transition: color .2s var(--ease); }
.ft__l li a svg { flex: none; width: 19px; height: 19px; color: var(--green); transition: transform .2s var(--ease); }
.ft__l li a:hover { color: #fff; }
.ft__l li a:hover svg { transform: scale(1.12); }
.ft__more {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; margin-top: .9rem; padding: 0 .95rem; border-radius: 999px;
  border: 1px solid rgba(124,184,47,.35); background: rgba(124,184,47,.08);
  font-weight: 700; font-size: var(--fs-xs); color: var(--green);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ft__more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.ft__more:hover { background: var(--green); border-color: var(--green); color: var(--navy-900); }
.ft__more:hover svg { transform: translateX(3px); }
@media (max-width: 639px) {
.ft__brand p { max-width: none; }
/* two short columns on phones, filled top-to-bottom so the order still reads naturally */
.ft__grid nav .ft__l { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 1.25rem; }
.ft__grid nav[aria-labelledby="f-svc"] .ft__l { grid-template-rows: repeat(3, auto); }
}
/* contact list: icon tile + small label + value */
.ft__c { display: grid; gap: 1.35rem; }
.ft__c li { display: flex; align-items: flex-start; gap: 1rem; }
.ft__i {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: var(--green);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ft__i svg { width: 19px; height: 19px; }
.ft__c li:hover .ft__i { background: var(--green); color: var(--navy-900); }
.ft__c small { display: block; margin-bottom: .1rem; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ft__c li > span:last-child { color: rgba(255,255,255,.9); line-height: 1.55; font-size: 1rem; }
.ft__c a { color: rgba(255,255,255,.85); transition: color .2s var(--ease); }
.ft__c a:hover { color: var(--green); }
.ft__soc { display: flex; gap: .55rem; margin-top: 1.5rem; }
.ft__soc a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.ft__soc a:hover { background: var(--green); border-color: var(--green); color: var(--navy-900); transform: translateY(-3px); }
/* each network lights up in its own colour */
.ft__soc .s-fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.ft__soc .s-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); border-color: #DD2A7B; color: #fff; }
.ft__soc .s-in:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.ft__soc .s-yt:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.ft__soc a:hover { box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.ft__dir { display: flex; width: fit-content; align-items: center; gap: .35rem; margin-top: .4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--green) !important; }
.ft__dir svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.ft__dir:hover { color: #fff !important; }
.ft__dir:hover svg { transform: translateX(3px); }
.ft__soc svg { width: 16px; height: 16px; }
.ft a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.ft__soc a:focus-visible { border-radius: 50%; }
.ft__end { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.25rem; padding-block: 1.1rem; font-size: var(--fs-xs); }
/* rule drawn inside the gutters so it lines up with the content edges */
.ft__end::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255,255,255,.1); }
.ft__end nav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.1rem; }
@media (min-width: 900px) {
.ft__end nav { gap: .1rem 0; }
.ft__end nav a + a::before { content: ""; width: 4px; height: 4px; margin-inline: .85rem; border-radius: 50%; background: rgba(255,255,255,.25); }
}
.ft__end a { display: inline-flex; min-height: 30px; align-items: center; color: rgba(255,255,255,.65); transition: color .2s var(--ease); }
.ft__end a:hover { color: #fff; }
/* keep the floating WhatsApp button off the last line of text */
@media (min-width: 561px) {
.ft__end { padding-right: 190px; }
}
@media (max-width: 560px) {
.ft { padding-bottom: 76px; }
}
/* ══════════════════════════════════ 19 float ════════════════════════════ */
.rail { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.rail[data-typing="true"] { opacity: 0; pointer-events: none; transform: translateY(10px); }
.rail__wa {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .7rem 1.15rem .7rem .95rem;
  border-radius: 999px; background: var(--wa); color: #fff; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(21,146,75,.6);
}
.rail__wa:hover { color: #fff; background: #0B6431; }
.rail__wa svg { width: 24px; height: 24px; }
.rail__top {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--navy); border: 1px solid var(--border); box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease);
}
.rail__top[data-show="true"] { opacity: 1; visibility: visible; }
.rail__top svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
.rail__wa .rail__t { display: none; }
.rail__wa { padding: .8rem; }
}
/* ════════════════════════════════ 20 overlays ═══════════════════════════ */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 4rem 1rem; background: rgba(7,26,51,.94); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.lightbox[data-open] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img { max-width: min(1100px, 100%); max-height: 80vh; border-radius: var(--r-sm); }
.lightbox__b { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.lightbox__b:hover { background: rgba(255,255,255,.24); }
.lightbox__b svg { width: 22px; height: 22px; }
.lightbox__x { top: 1rem; right: 1rem; }
.lightbox__p { left: 1rem; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__n { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__c { position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: var(--fs-sm); }
/* ═══════════════════════════════ 21 motion / print ══════════════════════ */
.js [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.js [data-rise] { opacity: 1; transform: none; }
}
@media print {
.tb, .hd, .drawer, .scrim, .rail, .cta, .lightbox, .hero__bar, .hero__tools { display: none !important; }
.slide:not([data-on="true"]) { display: none; }
}
/* ═══════════════════════════ 22 phone compaction ════════════════════════ */
.svc .more { color: var(--blue); }
@media (max-width: 599px) {
/* service cards become rows: photo left, text right — eight of them stacked
     full-height made the phone page twice as long as it needed to be */
.svc { flex-direction: row; align-items: stretch; }
.svc h3 { font-size: 1rem; }
.svc p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-xs); }
.svc .more { font-size: var(--fs-xs); margin-top: .15rem; }
.step { padding: 1rem; }
.step p { font-size: var(--fs-xs); }
.strip__it { padding: 1.3rem 1.1rem; }
.shead p { font-size: var(--fs-md); }
}
/* ═════════════════════ 23 service cards with two actions ════════════════ */
/* the card is no longer one big link: the photo and the name go to the
   service page, and the two buttons each do one clear job */
.svc h3 a::after { content: none; }
.svc h3 a:hover { color: var(--blue); }
.svc { border-top: 3px solid transparent; }
.svc:hover { border-top-color: var(--green); }
.btn--xs { min-height: 40px; padding: .45rem .6rem; gap: .35rem; font-size: .8125rem; border-width: 1.5px; }
.btn--xs svg { width: 15px; height: 15px; }
@media (max-width: 599px) {
.btn--xs { min-height: 36px; padding: .35rem .4rem; font-size: .75rem; }
.btn--xs svg { display: none; }
}
/* ════════════════════ 24 a different card for every job ═════════════════ */
/* conditions — icon tiles that turn navy on hover, with a "learn more" line */
/* steps — a timeline with a connecting rule, not a row of boxes */
.steps { position: relative; }
@media (min-width: 1200px) {
.steps > .step { padding-right: 1.25rem; }
}
.step { padding: 0; border: 0; background: transparent; }
.step h3 { margin-top: .9rem; }
@media (max-width: 1199.98px) {
.steps .step:last-child::before { display: none; }
}
/* every timeline step is number-left on narrow columns */
@media (max-width: 1199.98px) {
.steps .step h3, .steps .step p { grid-column: 2; }
.steps .step h3 { margin-top: .55rem; }
}
/* who it is for — green-tinted rows with a tick */
.who__c {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem 1.2rem;
  border-radius: var(--r); background: #fff; border: 1px solid var(--green-100); border-left: 4px solid var(--green-600);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.who__c:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.who__i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--green-50); color: var(--green-700); }
.who__i svg { width: 18px; height: 18px; }
.who__c h3 { font-size: 1.02rem; }
.who__c p { margin-top: .2rem; font-size: var(--fs-sm); color: var(--muted); }
/* vision and mission — one light, one dark */
/* checkup + guidance — two feature panels, dark and light */
/* reviews — laid out like a Google review panel (no stars: these were not
   posted on Google; the button opens the real listing) */
.tale { padding: 1.35rem; border-radius: 12px; border: 1px solid #DADCE0; box-shadow: 0 1px 2px rgba(60,64,67,.12); transition: box-shadow .2s var(--ease); }
.tale:hover { box-shadow: 0 6px 18px -6px rgba(60,64,67,.28); }
.tale figcaption { margin: 0; padding: 0; }
.tale__av { width: 42px; height: 42px; font-size: .95rem; font-weight: 700; }
.tale figcaption b { font-size: .95rem; color: #202124; }
.tale figcaption span span { color: #5F6368; }
.tale__q { width: 26px; height: 26px; margin-left: auto; color: #DADCE0; }
.tale__tag { margin-top: .9rem; font-size: 11px; color: var(--blue); }
.tale blockquote p { margin-top: .35rem; font-size: .95rem; line-height: 1.6; color: #3C4043; }
/* Google rating line — real figures from the listing */
.rv__stars { display: inline-flex; gap: 2px; color: #FBBC04; }
.rv__stars svg { width: 20px; height: 20px; }
/* the old .cond a:hover rule outranked the navy hover and turned the title dark-on-dark */
/* ════════════════════ 25 booking panel (enquiry + appointment pages) ═════════ */
.bk-sec { padding-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.bk {
  overflow: hidden; border-radius: 20px; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 30px 60px -35px rgba(11,37,69,.35);
}
.bk__side {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 1.4rem; overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); background: var(--navy); color: rgba(255,255,255,.75);
}
.bk__side::before {
  content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
  border: 40px solid rgba(124,184,47,.12); pointer-events: none;
}
.bk__side .label { color: var(--green); }
.bk__side h2 { margin-top: -.85rem; color: #fff; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); max-width: 16ch; }
.bk__steps { display: grid; gap: 0; }
.bk__steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: .9rem; padding-bottom: 1.05rem; }
.bk__steps li::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: rgba(255,255,255,.14); }
.bk__steps li:last-child { padding-bottom: 0; }
.bk__steps li:last-child::before { display: none; }
.bk__steps li > span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); color: #fff; font-size: .85rem; font-weight: 700;
}
.bk__steps li:last-child > span { background: var(--green-600); border-color: var(--green-600); }
.bk__steps h3 { margin-top: .4rem; color: #fff; font-size: 1rem; }
.bk__steps p { margin-top: .15rem; font-size: var(--fs-sm); line-height: 1.5; }
.bk__rate {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 14px;
  background: #fff; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bk__rate:hover { color: var(--text); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.bk__rate > .g { width: 30px; height: 30px; flex: none; }
.bk__rate > span { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.bk__rate b { font-size: 1.35rem; line-height: 1; }
.bk__rate .rv__stars svg { width: 16px; height: 16px; }
.bk__rate small { flex-basis: 100%; font-size: var(--fs-xs); color: var(--muted); }
.bk__info { display: grid; gap: .55rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 520px) {
.bk__info { grid-template-columns: 1fr 1fr; }
.bk__wide { grid-column: 1 / -1; }
}
.bk__info a, .bk__info li > div {
  display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .75rem; border-radius: 10px;
  background: rgba(255,255,255,.06); color: #fff; font-size: var(--fs-sm); font-weight: 500; line-height: 1.45;
  overflow-wrap: anywhere; transition: background .2s var(--ease);
}
.bk__info a:hover { background: rgba(255,255,255,.12); color: #fff; }
.bk__info svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--green); }
.bk__info small {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.bk__main { display: flex; flex-direction: column; padding: clamp(1.25rem, .9rem + 1.6vw, 2.5rem); }
.bk .formcard { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.bk .formcard > h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.bk__safe { display: flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.1rem; font-size: var(--fs-xs); color: var(--muted); }
.bk__safe svg { width: 15px; height: 15px; color: var(--green-600); }
@media (max-width: 991.98px) {
.bk__main { order: -1; border-bottom: 1px solid var(--border); }
}
/* appointment form: dropdowns */
.f select {
  width: 100%; min-width: 0; min-height: 50px; padding: .75rem 2.4rem .75rem .9rem; border: 1px solid var(--border-2);
  border-radius: var(--r-sm); font: inherit; font-size: var(--fs-md); color: var(--text); appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A55A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center / 18px no-repeat;
}
.f select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,85,168,.15); }
.f input[type="date"] { cursor: pointer; }
.bk .form-end .btn { min-width: 220px; justify-content: center; }
/* ════════════════════ 26 patient stories slider ═════════════════════════ */
.rvs .story {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: 100%; gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px 0;
}
.rvs .story::-webkit-scrollbar { display: none; }
.rvs .story:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r); }
@media (min-width: 700px) {
.rvs .story { grid-auto-columns: calc((100% - 1.1rem) / 2); }
}
@media (min-width: 1100px) {
.rvs .story { grid-auto-columns: calc((100% - 2.2rem) / 3); }
}
.rvs .tale { scroll-snap-align: start; }
.rvs__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.rvs[data-static] .rvs__nav { display: none; }
.rvs__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-2); background: #fff; color: var(--blue);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.rvs__btn svg { width: 18px; height: 18px; }
.rvs__btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.rvs__btn:disabled { opacity: .35; cursor: default; }
.rvs__dots { display: flex; gap: .4rem; }
.rvs__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--border-2); cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease); }
.rvs__dot[aria-current="true"] { width: 24px; background: var(--blue); }
/* footer end: no dead band under it on phones — keep text clear of the
   floating buttons with side padding instead */
@media (max-width: 560px) {
.ft { padding-bottom: 0; }
.ft__end { padding-right: 74px; padding-bottom: 1.1rem; }
}
/* hover fixes: these tinted variants outranked the base :hover rules */
.cta .btn--ghost:hover, .cta .btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--navy); }
/* the form is shorter than the side panel now: centre it, keep the note under it */
.bk__main { justify-content: center; }
.bk__safe { margin-top: 0; }
.bk .form-end { margin-top: 1.4rem; }
/* ════════════════════ 27 sitemap page ═══════════════════════════════════ */
.smap__g { padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.smap__g h2 { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; font-size: 1.15rem; }
.smap__g h2 .tile { width: 40px; height: 40px; border-radius: 10px; }
.smap__g h2 .tile svg { width: 19px; height: 19px; }
.smap__g ul { display: grid; gap: .35rem; }
@media (min-width: 760px) {
.smap__g--wide ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
.smap__g--wide ul { grid-template-columns: repeat(4, 1fr); }
}
.smap__g a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px;
  padding: .6rem .85rem; border-radius: 10px; background: var(--surface); color: var(--text);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.smap__g a b { display: block; font-size: var(--fs-sm); }
.smap__g a small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.smap__g a svg { width: 16px; height: 16px; flex: none; color: var(--blue); transition: transform .2s var(--ease); }
.smap__g a:hover { background: var(--blue); color: #fff; }
.smap__g a:hover b, .smap__g a:focus-visible b, .smap__g a:hover small, .smap__g a:hover svg { color: #fff; }
.smap__g a:hover svg { transform: translateX(3px); }
/* ════════════════════ 28 accessibility pass (axe, 2026-10-17) ═══════════ */
/* strip items are labels, not headings (they sat between the H1 and the first H2) */
/* links inside running text are underlined, not told apart by colour alone */
/* slider dots: 24px tap area around the 8px dot */
.rvs__dot { position: relative; width: 24px; height: 24px; background: transparent; }
.rvs__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 99px; background: var(--border-2); transform: translate(-50%, -50%); transition: width .25s var(--ease), background .25s var(--ease); }
.rvs__dot[aria-current="true"] { width: 32px; background: transparent; }
.rvs__dot[aria-current="true"]::before { width: 24px; background: var(--blue); }
.rvs__dots { gap: 0; }
/* 320px phones: the two card buttons no longer fit side by side next to the
   photo — let them shrink, and stack them below 400px */
/* small labels: never below 12px */
.tale__tag, .way small, .bk__info small { font-size: 12px; }
/* ═══════════════ patient stories — Google-reviews layout (2026-10-20) ═══════
   Summary panel on the left, review cards sliding on the right. */
.grv__sum {
  position: sticky; top: 110px; padding: 1.75rem; border: 1px solid #DADCE0; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(60,64,67,.1), 0 18px 40px -28px rgba(60,64,67,.35);
}
.grv__hd { display: flex; align-items: center; gap: .85rem; padding-bottom: 1.25rem; border-bottom: 1px solid #E8EAED; }
.grv__hd .g { width: 34px; height: 34px; flex: none; }
.grv__hd b { display: block; font-size: 1.15rem; color: #202124; }
.grv__hd span { display: block; font-size: var(--fs-sm); color: #5F6368; }
.grv__score { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0 1.5rem; }
.grv__score > b { font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #202124; }
.grv__score .rv__stars svg { width: 24px; height: 24px; }
.grv__n { display: block; margin-top: .35rem; font-size: var(--fs-sm); color: #5F6368; }
.grv__write { width: 100%; justify-content: center; min-height: 52px; border-radius: 12px; background: #1A73E8; border-color: #1A73E8; }
.grv__write:hover { background: #1557B0; border-color: #1557B0; }
.grv__all { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1rem; font-weight: 600; color: #1A73E8; }
.grv__all svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.grv__all:hover svg { transform: translateX(3px); }
.grv .rvs { position: relative; }
.grv .rvs .story { padding: 4px 2px 6px; }
@media (min-width: 700px) {
.grv .rvs .story { grid-auto-columns: calc((100% - 1.1rem) / 2); }
}
@media (min-width: 1100px) {
.grv .rvs .story { grid-auto-columns: calc((100% - 1.1rem) / 2); }
}
@media (min-width: 1400px) {
.grv .rvs .story { grid-auto-columns: calc((100% - 2.2rem) / 3); }
}
.grv .tale { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 16px; }
.grv .tale figcaption { gap: .8rem; }
.grv .tale__av { width: 46px; height: 46px; font-size: 1rem; }
.grv .tale figcaption b { font-size: 1.02rem; }
.grv .tale__q { width: 24px; height: 24px; color: #DADCE0; }
.grv .tale__tag { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: 12px; letter-spacing: .06em; color: #188038; }
.grv .tale__tag svg { width: 15px; height: 15px; }
.grv .tale blockquote { flex: 1; }
.grv .tale blockquote p {
  margin-top: .55rem; font-size: .96rem; line-height: 1.65; color: #3C4043;
}
.tale__src { display: flex; align-items: center; gap: .45rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #E8EAED; font-size: var(--fs-sm); color: #5F6368; }
.tale__src svg { width: 15px; height: 15px; color: #EA4335; }
/* arrows float on the track's edges; dots underneath */
.grv .rvs__btn { position: absolute; z-index: 2; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #DADCE0; box-shadow: 0 6px 16px -6px rgba(60,64,67,.4); }
.grv .rvs__btn--prev { left: -18px; }
.grv .rvs__btn--next { right: -18px; }
.grv .rvs__btn:disabled { opacity: 0; pointer-events: none; }
.grv .rvs[data-static] .rvs__btn { display: none; }
.grv .rvs__nav { margin-top: 1.25rem; }
@media (max-width: 991.98px) {
.grv__sum { position: static; }
}
@media (max-width: 575.98px) {
.grv .rvs__btn--prev { left: -8px; }
.grv .rvs__btn--next { right: -8px; }
.grv__score > b { font-size: 3rem; }
}
/* ═════════ Google reviews panel (demo of the Places API layout) ═════════
   Centred header; a tinted summary card and three white review cards of equal
   height. Google's own greys (#202124 / #3C4043 / #5F6368) for the text. */
.sec--stories { padding-block: clamp(3.25rem, 2.4rem + 2.6vw, 5rem); }
.sec--stories .shead { margin-bottom: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }
.sec--stories .shead h2 { max-width: none; }
.gr { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
@media (min-width: 1200px) {
.gr { --bs-gutter-x: 2.25rem; }
}
/* summary */
.gr__sum {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 1.6rem 1.6rem 1.4rem; border: 1px solid #E8ECF1; border-radius: 22px;
  background: #fff; box-shadow: 0 24px 50px -36px rgba(16,24,40,.35);
}
.gr__hd { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #E8EAED; }
.gr__hd .g { width: 28px; height: 28px; flex: none; }
.gr__hd b { display: block; font-size: 1rem; font-weight: 600; color: #202124; }
.gr__hd span { display: block; font-size: .8rem; color: #5F6368; }
.gr__score { display: flex; align-items: center; gap: .85rem; padding: .95rem 0 .85rem; }
.gr__score > b { font-size: 2.75rem; font-weight: 700; line-height: .9; letter-spacing: -.03em; color: #202124; }
.gr__score .rv__stars { gap: 2px; }
.gr__score .rv__stars svg { width: 18px; height: 18px; }
.gr__n { display: block; margin-top: .3rem; font-size: .82rem; color: #5F6368; }
.gr__bars { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.gr__bars li { display: flex; align-items: center; gap: .7rem; font-size: .78rem; color: #5F6368; }
.gr__bars li > span:first-child { width: .6rem; text-align: right; }
.gr__track { flex: 1; height: 6px; border-radius: 99px; background: #E8EAED; overflow: hidden; }
.gr__track span { display: block; height: 100%; min-width: 6px; border-radius: 99px; background: #FBBC04; }
.gr__write {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; border-radius: 999px;
  background: #1A73E8; color: #fff; font-size: .92rem; font-weight: 600;
  box-shadow: 0 8px 18px -12px rgba(26,115,232,.9); transition: background .2s var(--ease), transform .2s var(--ease);
}
.gr__write svg { width: 16px; height: 16px; }
.gr__write:hover { background: #1557B0; color: #fff; transform: translateY(-1px); }
.gr__all { display: block; margin-top: .8rem; text-align: center; font-size: .86rem; font-weight: 600; color: #1A73E8; }
.gr__all:hover { color: #1557B0; text-decoration: underline; }
/* review cards */
.gr__rvs { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.gr__rvs .story { column-gap: 1.5rem; padding: 6px 2px 10px; margin: -6px -2px -10px; }
@media (min-width: 700px) {
.gr__rvs .story { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}
@media (min-width: 1200px) {
.gr__rvs .story { grid-auto-columns: calc((100% - 3rem) / 3); }
}
.gr__card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.2rem; border: 1px solid #E3E8EF; border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.gr__card:hover { transform: translateY(-4px); border-color: #D2DCEA; box-shadow: 0 18px 36px -20px rgba(16,24,40,.28); }
.gr__card figcaption { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; }
.gr__card .tale__av { width: 44px; height: 44px; flex: none; font-size: 1.1rem; font-weight: 600; }
.gr__card figcaption > span:nth-child(2) { flex: 1; min-width: 0; }
.gr__card figcaption b { display: block; font-size: 1rem; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr__card figcaption span span { display: block; font-size: .82rem; color: #5F6368; }
.gr__card figcaption .g { width: 20px; height: 20px; flex: none; align-self: flex-start; margin-top: 2px; }
.gr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-top: 1.1rem; }
.gr__meta .rv__stars { gap: 2px; }
.gr__meta .rv__stars svg { width: 16px; height: 16px; }
.gr__ver { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: #188038; }
.gr__ver svg { width: 15px; height: 15px; }
.gr__card blockquote { flex: 1; margin: 0; }
.gr__card blockquote p { margin-top: .9rem; font-size: 1rem; line-height: 1.75; color: #3C4043;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; min-height: 7em; }
.gr__src { display: flex; align-items: center; gap: .45rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #EEF0F3; font-size: .8rem; color: #5F6368; }
.gr__src .g { width: 14px; height: 14px; }
/* arrows on the track's edges, dots underneath (hidden when all cards fit) */
.gr__rvs .rvs__btn { position: absolute; z-index: 2; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #E3E8EF; color: #202124; box-shadow: 0 8px 20px -10px rgba(16,24,40,.4); }
.gr__rvs .rvs__btn--prev { left: -22px; }
.gr__rvs .rvs__btn--next { right: -22px; }
.gr__rvs .rvs__btn:disabled { opacity: 1; color: #B0B7C3; box-shadow: 0 4px 12px -8px rgba(16,24,40,.3); cursor: default; }
.gr__rvs .rvs__nav { margin-top: 1rem; }
.gr__rvs[data-static] .rvs__nav { display: none; }
.gr__rvs .rvs__nav { position: absolute; left: 0; right: 0; top: 100%; }
.gr__rvs .rvs__btn:not(:disabled):hover { background: #1A73E8; border-color: #1A73E8; color: #fff; }
.gr__rvs .rvs__dot[aria-current="true"]::before { background: #1A73E8; }
@media (min-width: 1200px) {
.gr > .col-lg-4 { width: 28%; }
.gr > .col-lg-8 { width: 72%; }
}
@media (max-width: 575.98px) {
.gr__rvs .rvs__btn--prev { left: -8px; }
.gr__rvs .rvs__btn--next { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.gr__card, .gr__write { transition: none; }
.gr__card:hover { transform: none; }
}
/* ═════════════════════ service cards (2026-10-20 redesign) ═════════════════
   Inset photo, an icon badge on its lower edge, name + two-line summary, and a
   quiet footer: a text link to the page and a small "Book now" pill. */
.scard {
  position: relative; display: flex; flex-direction: column; padding: 10px;
  border: 1px solid #E6EBF2; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.scard:hover { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: 0 24px 44px -28px rgba(11,37,69,.4); }
.scard__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--surface); }
.scard__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.scard:hover .scard__pic img { transform: scale(1.06); }
.scard__b { position: relative; display: flex; flex-direction: column; flex: 1; padding: 1.9rem .7rem .45rem; }
.scard__ic {
  position: absolute; top: -26px; left: .7rem; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue); color: #fff; box-shadow: 0 0 0 5px #fff, 0 12px 22px -10px rgba(10,85,168,.7);
  transition: background .3s var(--ease);
}
.scard__ic svg { width: 23px; height: 23px; }
.scard:hover .scard__ic { background: var(--green-600); box-shadow: 0 0 0 5px #fff, 0 12px 22px -10px rgba(71,122,21,.7); }
.scard h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.scard h3 a { color: var(--text); }
.scard h3 a:hover { color: var(--blue); }
.scard p {
  flex: 1; margin-top: .4rem; font-size: .9rem; line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.scard__ft { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #EEF1F5; }
.scard__more { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--blue); }
.scard__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.scard__more:hover svg, .scard:hover .scard__more svg { transform: translateX(3px); }
.scard__book {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .9rem; border-radius: 999px;
  background: var(--blue-50); color: var(--blue); font-size: .82rem; font-weight: 600; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.scard__book svg { width: 15px; height: 15px; }
.scard__book:hover, .scard__book:focus-visible { background: var(--blue); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.scard, .scard__pic img { transition: none; }
.scard:hover { transform: none; }
}
#services .shead h2 { max-width: none; }
/* service cards — refinement pass */
.scard { border-color: #E4EAF2; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -24px rgba(11,37,69,.35); }
.scard:hover { border-color: #CFDDF0; box-shadow: 0 0 0 4px rgba(10,85,168,.05), 0 26px 48px -28px rgba(11,37,69,.45); }
.scard__pic::after {   /* soft floor so the badge reads, deepens on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(7,26,51,0) 55%, rgba(7,26,51,.28) 100%);
  transition: opacity .3s var(--ease); opacity: .8;
}
.scard:hover .scard__pic::after { opacity: 1; }
.scard__pic::before {  /* brand line that draws in along the photo's lower edge */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.scard:hover .scard__pic::before { transform: scaleX(1); }
.scard__ic {
  background: #fff; color: var(--blue); border: 1px solid #E4EAF2;
  box-shadow: 0 0 0 5px #fff, 0 14px 26px -14px rgba(11,37,69,.55);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.scard:hover .scard__ic { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 5px #fff, 0 14px 26px -12px rgba(10,85,168,.7); }
.scard h3 { margin-top: .1rem; font-size: 1.1rem; letter-spacing: -.01em; }
.scard:hover h3 a { color: var(--blue); }
.scard p { color: #5B6B7F; }
.scard__ft { border-top-style: dashed; border-top-color: #DFE6EF; }
.scard__book { background: transparent; border: 1px solid #CFDDF0; }
.scard:hover .scard__book { background: var(--blue); border-color: var(--blue); color: #fff; }
/* "View all services" as a quiet outlined pill */
#services .shead .more {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid #CFDDF0; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--blue); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#services .shead .more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
#services .shead .more svg { width: 16px; height: 16px; }
/* give the name clear air below the icon badge */
.scard__b { padding: 2.75rem .75rem .5rem; }
.scard__ic { top: -26px; left: .75rem; }
.scard h3 { margin-top: 0; }
.scard p { margin-top: .5rem; }
.scard__ft { margin-top: 1.15rem; padding-top: 1rem; }
.scard__ic { z-index: 2; }
/* sit above the photo's hover line */
/* ═════════════════════ conditions we treat (2026-10-20) ═════════════════════
   Compact white rows: tinted icon, name + one-line note, arrow that fills on hover. */
.sec--conds #conditions, #conditions .shead h2 { max-width: none; }
.ccard {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.15rem 1.15rem 1.15rem;
  border: 1px solid #E4EAF2; border-radius: 18px; background: #fff; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ccard:hover, .ccard:focus-visible { color: var(--text); border-color: #CFDDF0; transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(10,85,168,.05), 0 22px 40px -26px rgba(11,37,69,.45); }
.ccard__i {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px;
  background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.conds > :nth-child(even) .ccard__i { background: var(--green-50); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-100); }
.ccard__i svg { width: 25px; height: 25px; }
.ccard:hover .ccard__i { background: var(--blue); color: #fff; box-shadow: 0 12px 22px -12px rgba(10,85,168,.8); }
.conds > :nth-child(even) .ccard:hover .ccard__i { background: var(--green-600); box-shadow: 0 12px 22px -12px rgba(71,122,21,.8); }
.ccard__b { flex: 1; min-width: 0; }
.ccard__b b { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.ccard__b span { display: block; margin-top: .2rem; font-size: .88rem; line-height: 1.5; color: #5B6B7F; }
.ccard__go {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #DCE4EF; color: var(--blue); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ccard__go svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.ccard:hover .ccard__go { background: var(--blue); border-color: var(--blue); color: #fff; }
.ccard:hover .ccard__go svg { transform: translateX(2px); }
#conditions .shead .more, #services .shead .more {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid #CFDDF0; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--blue); background: #fff;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#conditions .shead .more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
#conditions .shead .more svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
.ccard { transition: none; }
.ccard:hover { transform: none; }
}
/* conditions — refinement pass: roomier cards, soft tint and accent bar on hover */
.ccard { gap: 1.1rem; padding: 1.35rem 1.3rem; overflow: hidden; border-radius: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -26px rgba(11,37,69,.4); }
.ccard::before {   /* accent bar that slides in on the left edge */
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--blue); transform: scaleY(0); transition: transform .3s var(--ease);
}
.conds > :nth-child(even) .ccard::before { background: var(--green-600); }
.ccard:hover::before { transform: scaleY(1); }
.ccard:hover { background: linear-gradient(90deg, #F7FAFF, #fff 60%); }
.conds > :nth-child(even) .ccard:hover { background: linear-gradient(90deg, #F8FBF3, #fff 60%); }
.ccard__i { width: 60px; height: 60px; border-radius: 18px; }
.ccard__i svg { width: 26px; height: 26px; }
.ccard__b b { font-size: 1.08rem; }
.ccard__b span { margin-top: .25rem; }
.conds > :nth-child(even) .ccard__go { color: var(--green-700); }
.conds > :nth-child(even) .ccard:hover .ccard__go { background: var(--green-600); border-color: var(--green-600); color: #fff; }
/* ═════════════════════ home: meet your doctor (2026-10-20) ═════════════════
   A soft blue panel; portrait with an offset brand block, an experience badge
   and a name tag; credentials as a 2x2 grid of small icon rows. */
.drx { position: relative; overflow: hidden; padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); border-radius: 32px; background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FC 100%); }
.drx::after { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.14), transparent); pointer-events: none; }
.drx > .row { position: relative; z-index: 1; }
.drx__pic { position: relative; max-width: 460px; margin: 0 auto; padding: 0 0 18px 18px; }
.drx__pic::before {   /* offset brand block behind the portrait */
  content: ""; position: absolute; left: 0; bottom: 0; width: 78%; height: 78%; border-radius: 26px;
  background: linear-gradient(135deg, var(--blue), var(--blue-700));
}
.drx__pic picture, .drx__pic > img { position: relative; display: block; }
.drx__pic img { position: relative; width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 15%; border-radius: 24px; box-shadow: 0 30px 60px -34px rgba(11,37,69,.55); }
.drx__exp {
  position: absolute; z-index: 2; right: -14px; top: 26px; display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -18px rgba(11,37,69,.45);
}
.drx__exp b { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--blue); letter-spacing: -.02em; }
.drx__exp span { font-size: .78rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
.drx__tag {
  position: absolute; z-index: 2; left: 34px; right: 16px; bottom: 34px; display: flex; align-items: center; gap: .75rem;
  padding: .75rem .9rem; border-radius: 16px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 36px -20px rgba(11,37,69,.5);
}
.drx__tag-i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--green-600); color: #fff; }
.drx__tag-i svg { width: 20px; height: 20px; }
.drx__tag b { display: block; font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.drx__tag span span { display: block; font-size: .8rem; color: var(--muted); }
.drx__body h2 { margin-top: .5rem; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
.drx__role { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; font-weight: 600; color: var(--blue); }
.drx__role::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(124,184,47,.2); }
.drx__lead { margin-top: 1rem; max-width: 60ch; font-size: 1.02rem; line-height: 1.75; color: var(--text-2); }
.drx__creds { display: grid; gap: .75rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
.drx__creds { grid-template-columns: 1fr 1fr; }
}
.drx__creds li {
  display: flex; align-items: flex-start; gap: .8rem; padding: .95rem 1rem; border-radius: 16px;
  background: #fff; border: 1px solid #E2E9F3; font-size: .9rem; line-height: 1.5; color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.drx__creds li:hover { border-color: #CFDDF0; box-shadow: 0 14px 28px -22px rgba(11,37,69,.45); }
.drx__creds small { display: block; margin-bottom: .15rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.drx__ci { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--blue); }
.drx__ci svg { width: 19px; height: 19px; }
.drx__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.drx__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--blue); }
.drx__more svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.drx__more:hover svg { transform: translateX(3px); }
@media (max-width: 575.98px) {
.drx { border-radius: 24px; }
.drx__exp { right: -6px; top: 16px; padding: .55rem .8rem; }
.drx__exp b { font-size: 1.5rem; }
.drx__tag { left: 26px; right: 10px; bottom: 28px; }
}
/* meet your doctor — refinement: stats row, dotted accent, call button */
.drx__pic::after {   /* dotted accent peeking out top-left */
  content: ""; position: absolute; z-index: 0; left: -14px; top: -14px; width: 120px; height: 120px;
  background-image: radial-gradient(rgba(10,85,168,.35) 1.4px, transparent 1.6px); background-size: 14px 14px;
}
.drx__pic picture { z-index: 1; }
.drx__creds { margin-top: 1.4rem; }
.drx__creds li:hover .drx__ci { background: var(--blue); color: #fff; }
.drx__ci { transition: background .25s var(--ease), color .25s var(--ease); }
.drx__acts { gap: .75rem 1.25rem; }
.drx__call { background: #fff; }
@media (max-width: 575.98px) {
.drx__acts .btn { flex: 1 1 100%; justify-content: center; }
}
/* meet your doctor — open layout (no panel), larger portrait, entrance motion */
.sec--drx { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.sec--drx::before { content: ""; position: absolute; left: -180px; top: 10%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,85,168,.07), transparent); pointer-events: none; }
.drx { overflow: visible; padding: 0; border-radius: 0; background: none; }
.drx::after { content: none; }
@media (min-width: 1200px) {
.drx > .row { --bs-gutter-x: 5rem; }
}
.drx__pic { max-width: 560px; margin: 0; padding: 0 0 22px 22px; }
.drx__pic img { aspect-ratio: 4 / 4.4; border-radius: 28px; }
.drx__pic::before { width: 80%; height: 80%; border-radius: 30px; }
.drx__exp { right: -18px; top: 34px; padding: .85rem 1.15rem; border-radius: 18px; }
.drx__exp b { font-size: 2.2rem; }
.drx__tag { left: 44px; right: 22px; bottom: 44px; padding: .85rem 1rem; border-radius: 18px; }
.drx__lead { font-size: 1.05rem; }
.drx__creds { gap: .85rem; margin-top: 1.5rem; }
.drx__acts { margin-top: 2rem; }
/* motion: portrait reveals, badges float, copy rises line by line */
@keyframes drx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes drx-dots  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, 6px); } }
.drx__exp { animation: drx-float 5s ease-in-out infinite; }
.drx__tag { animation: drx-float 6s ease-in-out 1.2s infinite; }
.drx__pic::after { animation: drx-dots 7s ease-in-out infinite; }
.js .drx__pic[data-rise] { opacity: 1; transform: none; }
.js .drx__pic[data-rise] picture { clip-path: inset(0 0 100% 0 round 28px); transition: clip-path 1s cubic-bezier(.2,.7,.2,1) .1s; }
.js .drx__pic[data-rise].is-in picture { clip-path: inset(0 0 0 0 round 28px); }
.js .drx__pic[data-rise]::before { transform: translate(-24px, 24px); opacity: 0; transition: transform .9s var(--ease) .35s, opacity .9s var(--ease) .35s; }
.js .drx__pic[data-rise].is-in::before { transform: none; opacity: 1; }
.js .drx__body[data-rise] { opacity: 1; transform: none; }
.js .drx__body[data-rise] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .drx__body[data-rise].is-in > * { opacity: 1; transform: none; }
.js .drx__body[data-rise].is-in > :nth-child(2) { transition-delay: .08s; }
.js .drx__body[data-rise].is-in > :nth-child(3) { transition-delay: .16s; }
.js .drx__body[data-rise].is-in > :nth-child(4) { transition-delay: .24s; }
.js .drx__body[data-rise].is-in > :nth-child(5) { transition-delay: .32s; }
.js .drx__body[data-rise].is-in > :nth-child(6) { transition-delay: .40s; }
.js .drx__body[data-rise].is-in > :nth-child(7) { transition-delay: .48s; }
.drx__creds li { transition: transform .3s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.drx__creds li:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
.drx__exp, .drx__tag, .drx__pic::after { animation: none; }
.js .drx__pic[data-rise] picture { clip-path: none; transition: none; }
.js .drx__pic[data-rise]::before, .js .drx__body[data-rise] > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 991.98px) {
.drx__pic { margin-inline: auto; }
}
/* meet your doctor — spacing pass: one vertical rhythm, even gutters */
.drx__body > .label { display: block; }
.drx__body h2 { margin-top: .6rem; line-height: 1.15; }
.drx__role { margin-top: .85rem; }
.drx__lead { margin-top: 1.1rem; max-width: 56ch; line-height: 1.75; }
.drx__creds { gap: 1rem; margin-top: 1.75rem; }
.drx__creds li { gap: .9rem; padding: 1.1rem 1.15rem; }
.drx__creds small { margin-bottom: .3rem; }
.drx__acts { gap: .85rem 1.5rem; margin-top: 2.25rem; }
.drx__pic { padding: 0 0 26px 26px; }
.drx__exp { right: -20px; top: 40px; }
.drx__tag { left: 50px; right: 24px; bottom: 50px; gap: .85rem; }
@media (max-width: 991.98px) {
.drx__body { margin-top: 1rem; }
}
@media (max-width: 575.98px) {
.drx__pic { padding: 0 0 16px 16px; }
.drx__exp { right: -4px; top: 20px; }
.drx__tag { left: 30px; right: 12px; bottom: 30px; }
.drx__creds li { padding: 1rem; }
}
@media (min-width: 1200px) {
.drx > .row { --bs-gutter-x: 4rem; }
}
.drx__pic { max-width: 500px; }
/* photo fills its column, so there is no dead strip between photo and text */
.drx__pic { max-width: none; width: 100%; }
@media (min-width: 1200px) {
.drx > .row { --bs-gutter-x: 4.5rem; }
}
@media (max-width: 991.98px) {
.drx__pic { max-width: 520px; margin-inline: auto; }
}
/* shorter credentials: one line each */
.drx__creds li { align-items: center; padding: 1rem 1.1rem; white-space: nowrap; }
.drx__creds li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
.drx__creds li { white-space: normal; }
}
/* ═════════════════════ how your care works (2026-10-20) ═════════════════════ */
.jny { list-style: none; margin-bottom: 0; padding: 0; counter-reset: none; }
.jny__c {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid #E4EAF2; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.jny__c::after {   /* bottom accent that draws in on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.jny__c:hover { transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 24px 44px -28px rgba(11,37,69,.42); }
.jny__c:hover::after { transform: scaleX(1); }
.jny__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.jny__i {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.jny > :nth-child(even) .jny__i { background: var(--green-50); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-100); }
.jny__i svg { width: 25px; height: 25px; }
.jny__c:hover .jny__i { background: var(--blue); color: #fff; }
.jny > :nth-child(even) .jny__c:hover .jny__i { background: var(--green-600); color: #fff; }
.jny__n { padding: .3rem .75rem; border-radius: 999px; background: #F3F6FA; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5B6B7F; }
.jny__c h3 { margin-top: 1.25rem; font-size: 1.12rem; font-weight: 600; }
.jny__c p { margin-top: .45rem; font-size: .93rem; line-height: 1.65; color: #5B6B7F; }
@media (prefers-reduced-motion: reduce) {
.jny__c { transition: none; }
.jny__c:hover { transform: none; }
}
/* care steps — refinement: tinted band, watermark numbers, connectors between steps */
.sec--jny { background: linear-gradient(180deg, #fff 0%, #F5F8FD 100%); }
.jny__c { padding: 1.75rem 1.6rem 1.6rem; border-radius: 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -26px rgba(11,37,69,.35); }
.jny__big {
  position: absolute; right: 1.1rem; bottom: -.9rem; font-size: 6.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px #E6EDF6; pointer-events: none; transition: -webkit-text-stroke-color .3s var(--ease), transform .4s var(--ease);
}
.jny__c:hover .jny__big { -webkit-text-stroke-color: #CFDDF0; transform: translateY(-4px); }
.jny__c h3, .jny__c p, .jny__top { position: relative; z-index: 1; }
.jny__c p { max-width: 30ch; }
.jny__n { background: #fff; border: 1px solid #E4EAF2; color: var(--blue); }
.jny > :nth-child(even) .jny__n { color: var(--green-700); }
/* small arrow linking each step to the next (desktop rows only) */
@media (min-width: 1200px) {
.jny > li { position: relative; }
.jny > li:not(:nth-child(3n))::after {
    content: ""; position: absolute; z-index: 2; top: 50%; right: -14px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A55A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
    border: 1px solid #DCE4EF; box-shadow: 0 6px 14px -8px rgba(11,37,69,.35);
  }
}
/* care steps — simplified: no watermark numbers, calmer cards */
.jny__big { display: none; }
.jny__c { padding: 1.5rem 1.5rem 1.4rem; }
.jny__c p { max-width: none; }
.jny__i { width: 50px; height: 50px; border-radius: 14px; }
.jny__i svg { width: 23px; height: 23px; }
.jny__c h3 { margin-top: 1.1rem; }
.jny__n { font-size: .72rem; }
/* ═════════════════════ checkups & guidance (2026-10-20) ═════════════════════
   Two matching white cards: inset photo with a label, icon + name, a tinted
   checklist and one clear action. Blue for the checkup, green for guidance. */
.fc {
  --c: var(--blue); --c-50: var(--blue-50); --c-100: var(--blue-100);
  display: flex; flex-direction: column; padding: 12px; border: 1px solid #E4EAF2; border-radius: 24px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 18px 40px -32px rgba(11,37,69,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.fc--green { --c: var(--green-600); --c-50: var(--green-50); --c-100: var(--green-100); }
.fc:hover { transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 28px 52px -30px rgba(11,37,69,.45); }
.fc__pic { position: relative; display: block; aspect-ratio: 16 / 7.5; overflow: hidden; border-radius: 16px; }
.fc__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fc:hover .fc__pic img { transform: scale(1.05); }
.fc__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,26,51,0) 50%, rgba(7,26,51,.35)); }
.fc__k {
  position: absolute; z-index: 1; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text);
  font-size: .8rem; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(7,26,51,.5);
}
.fc__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.fc__b { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1rem .6rem; }
.fc__hd { display: flex; align-items: center; gap: .9rem; }
.fc__i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--c-50); color: var(--c); box-shadow: inset 0 0 0 1px var(--c-100); transition: background .3s var(--ease), color .3s var(--ease); }
.fc__i svg { width: 24px; height: 24px; }
.fc:hover .fc__i { background: var(--c); color: #fff; }
.fc h3 { font-size: 1.3rem; font-weight: 600; }
.fc h3 a { color: var(--text); }
.fc h3 a:hover { color: var(--c); }
.fc__b > p { margin-top: .85rem; font-size: .95rem; line-height: 1.7; color: #5B6B7F; }
.fc__list { display: grid; gap: .6rem; margin: 1.1rem 0 0; padding: 1rem 1.1rem; list-style: none; border-radius: 14px; background: #F6F9FC; }
.fc__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; line-height: 1.5; color: var(--text); }
.fc__list svg { flex: none; width: 20px; height: 20px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--c); color: #fff; stroke-width: 3; }
.fc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: auto; padding-top: 1.4rem; }
.fc--green .fc__acts .btn { background: var(--green-600); border-color: var(--green-600); }
.fc--green .fc__acts .btn:hover { background: var(--green-700); border-color: var(--green-700); }
.fc__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--c); }
.fc--green .fc__more { color: var(--green-700); }
.fc__more svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.fc__more:hover svg { transform: translateX(3px); }
@media (max-width: 575.98px) {
.fc__b { padding: 1.2rem .5rem .4rem; }
.fc h3 { font-size: 1.15rem; }
.fc__acts .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.fc, .fc__pic img { transition: none; }
.fc:hover { transform: none; }
}
/* checkups & guidance — refinement pass */
.fc { position: relative; overflow: hidden; padding: 14px; border-radius: 26px; }
.fc::after {   /* colour line that draws along the bottom edge on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.fc:hover::after { transform: scaleX(1); }
.fc__pic { aspect-ratio: 16 / 7; border-radius: 18px; }
.fc__pic::after { background: linear-gradient(180deg, rgba(7,26,51,0) 40%, rgba(7,26,51,.45)); }
.fc__k { left: 16px; top: 16px; padding: .45rem .95rem; font-size: .82rem; }
.fc__b { position: relative; padding: 0 1.1rem .7rem; }
.fc__i {   /* icon now sits on the photo's lower edge */
  width: 60px; height: 60px; margin-top: -30px; border-radius: 18px; background: var(--c); color: #fff;
  box-shadow: 0 0 0 6px #fff, 0 14px 26px -12px rgba(11,37,69,.5);
}
.fc__i svg { width: 27px; height: 27px; }
.fc:hover .fc__i { background: var(--c); transform: rotate(-6deg); }
.fc__i { transition: transform .35s var(--ease); }
.fc__hd { flex-direction: column; align-items: flex-start; gap: 1rem; }
.fc h3 { font-size: 1.35rem; letter-spacing: -.01em; }
.fc__b > p { margin-top: .6rem; }
.fc__list { gap: 0; padding: .35rem 1.1rem; background: var(--c-50); border: 1px solid var(--c-100); }
.fc__list li { padding: .65rem 0; }
.fc__list li + li { border-top: 1px dashed var(--c-100); }
.fc__acts .btn { border-radius: 999px; padding-inline: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
.fc:hover .fc__i { transform: none; }
}
.sec--jny { background: var(--surface); }
/* ═════════════════════ home gallery — bento grid (2026-10-20) ═════════════ */
#gallery .shead .more {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid #CFDDF0; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--blue); background: #fff; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#gallery .shead .more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
#gallery .shead .more svg { width: 16px; height: 16px; }
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 15vw, 250px); gap: 1rem; }
}
.bento__i { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--surface); aspect-ratio: 1; }
@media (min-width: 768px) {
.bento__i { aspect-ratio: auto; }
}
.bento__i--lg { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (min-width: 768px) {
.bento__i--lg { grid-row: span 2; aspect-ratio: auto; }
}
.bento__i picture, .bento__i img { display: block; width: 100%; height: 100%; }
.bento__i img { object-fit: cover; transition: transform .7s var(--ease); }
.bento__i::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,26,51,0) 40%, rgba(7,26,51,.55));
  opacity: 0; transition: opacity .35s var(--ease);
}
.bento__zoom {
  position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 12px 24px -10px rgba(7,26,51,.5);
  opacity: 0; transform: scale(.7); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bento__zoom svg { width: 22px; height: 22px; }
.bento__i:hover img, .bento__i:focus-visible img { transform: scale(1.07); }
.bento__i:hover::after, .bento__i:focus-visible::after { opacity: 1; }
.bento__i:hover .bento__zoom, .bento__i:focus-visible .bento__zoom { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.bento__i img, .bento__zoom { transition: none; }
}
/* four clinic photos: large left, wide top-right, two small below it */
@media (min-width: 768px) {
.bento__i:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 767.98px) {
.bento__i:nth-child(2) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
.bento__i:nth-child(2) img { object-position: 50% 70%; }
/* gallery — compact: one short row, the first photo wider */
@media (min-width: 768px) {
.bento { grid-template-columns: 1.7fr 1fr 1fr 1fr; grid-auto-rows: clamp(220px, 19vw, 300px); }
.bento__i--lg, .bento__i:nth-child(2) { grid-column: auto; grid-row: auto; }
.bento__i:nth-child(2) img { object-position: 50% 50%; }
}
@media (max-width: 767.98px) {
.bento__i--lg { aspect-ratio: 16 / 9; }
.bento__i:nth-child(2) { grid-column: auto; aspect-ratio: 1; }
.bento__i:nth-child(4) { display: none; }
.bento__i:nth-child(3) { aspect-ratio: 1; }
}
/* ═════════════════ FAQ + appointment in one section (2026-10-20) ═════════════ */
.qb .faq { margin: 0; }
.qb__help {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; padding: 1.1rem 1.25rem;
  border-radius: 18px; background: #fff; border: 1px solid #E4EAF2;
}
.qb__help-i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--blue-50); color: var(--blue); }
.qb__help-i svg { width: 21px; height: 21px; }
.qb__help-t { flex: 1 1 220px; min-width: 0; }
.qb__help-t b { display: block; font-size: 1rem; color: var(--text); }
.qb__help-t span { display: block; font-size: .85rem; color: var(--muted); }
.qb__help .btn { border-radius: 999px; }
.qb__wa { background: #1FA855; border-color: #1FA855; }
.qb__wa:hover { background: #178A45; border-color: #178A45; }
.qb__form { position: relative; }
@media (min-width: 992px) {
.qb__form { position: sticky; top: 110px; }
}
.qb__form .formcard {
  position: relative; overflow: hidden; border: 1px solid #E4EAF2; border-radius: 22px;
  box-shadow: 0 30px 60px -40px rgba(11,37,69,.45);
}
.qb__form .formcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--green)); }
/* the CTA's upper half matches the grey section above it on the home page */
body:has(.sec--qb) .cta { background: linear-gradient(to bottom, var(--surface) 50%, var(--navy-900) 50%); }
/* FAQ + appointment — refinement pass (home only) */
/* FAQ: one card, numbered rows, hairline dividers */
.qb .faq { gap: 0; counter-reset: qn; padding: .4rem 1.4rem; border: 1px solid #E4EAF2; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 18px 40px -34px rgba(11,37,69,.4); }
.qb .faq__item { border: 0; border-radius: 0; background: none; box-shadow: none; counter-increment: qn; }
.qb .faq__item + .faq__item { border-top: 1px solid #EDF1F6; }
.qb .faq__item:has([aria-expanded="true"]) { background: none; box-shadow: none; }
.qb .faq__q { align-items: center; padding: 1.15rem 0; font-size: 1rem; font-weight: 600; }
.qb .faq__q > span { display: flex; align-items: center; gap: .9rem; }
.qb .faq__q > span::before {
  content: counter(qn, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: #F2F6FB; font-size: .78rem; font-weight: 700; color: #6B7C93; transition: background .25s var(--ease), color .25s var(--ease);
}
.qb .faq__q[aria-expanded="true"] { color: var(--blue); }
.qb .faq__q[aria-expanded="true"] > span::before { background: var(--blue); color: #fff; }
.qb .faq__q svg { width: 30px; height: 30px; padding: 7px; margin: 0; border-radius: 50%; border: 1px solid #DCE4EF; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.qb .faq__q:hover svg, .qb .faq__q[aria-expanded="true"] svg { background: var(--blue); border-color: var(--blue); color: #fff; }
.qb .faq__a p { padding: 0 2.5rem 1.2rem 3.05rem; font-size: .93rem; line-height: 1.7; color: #5B6B7F; }
/* help strip: navy, compact */
.qb__help { margin-top: 1rem; padding: 1.1rem 1.25rem; border: 0; border-radius: 20px; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-900) 100%); }
.qb__help-i { background: rgba(255,255,255,.1); color: var(--green); }
.qb__help-t b { color: #fff; }
.qb__help-t span { color: rgba(255,255,255,.7); }
.qb__help .btn:not(.qb__wa) { background: #fff; border-color: #fff; color: var(--navy); }
.qb__help .btn:not(.qb__wa):hover { background: var(--blue-50); }
/* form: softer fields, full-width pill button */
.qb__form .formcard { padding: 1.75rem 1.6rem 1.6rem; border-radius: 24px; }
.qb__form .formcard h2 { display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; }
.qb__form .formcard h2::before {
  content: ""; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A55A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 21px no-repeat;
}
.qb__form .formcard > p { margin-top: .5rem; padding-bottom: 1.1rem; border-bottom: 1px dashed #DFE6EF; }
.qb__form .f label { font-size: .85rem; font-weight: 600; }
.qb__form .f input, .qb__form .f select, .qb__form .f textarea { border-radius: 12px; background-color: #F7F9FC; border-color: #E2E8F0; font-size: .95rem; }
.qb__form .f input:focus, .qb__form .f select:focus, .qb__form .f textarea:focus { background-color: #fff; }
.qb__form .f textarea { min-height: 96px; }
.qb__form button[type="submit"] { width: 100%; justify-content: center; min-height: 52px; border-radius: 999px; }
.qb__form .form-end { display: grid; gap: .75rem; justify-items: center; margin-top: 1.25rem; }
/* ═════════════════════ about us (2026-10-20) ═════════════════════ */
body:has(.cta-grey) .cta { background: linear-gradient(to bottom, var(--surface) 50%, var(--navy-900) 50%); }
.cta-grey .shead .more, .sec--drx ~ .sec .shead .more {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid #CFDDF0; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--blue); background: #fff;
}
.cta-grey .shead .more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.cta-grey .shead .more svg { width: 16px; height: 16px; }
.abt__body h2 { margin-top: .6rem; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.15; }
.abt__body .answer { margin-top: 1.2rem; padding: 0; border: 0; background: none; box-shadow: none; }
.abt__body .answer__k { display: none; }
.abt__body .answer__p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: #4A5A6E; }
.abt__list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.abt__list li { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border: 1px solid #E4EAF2; border-radius: 14px; background: #fff; font-size: .93rem; font-weight: 600; color: var(--text); }
.abt__list span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); color: var(--blue); }
.abt__list li:nth-child(even) span { background: var(--green-50); color: var(--green-700); }
.abt__list svg { width: 18px; height: 18px; }
.abt__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 1.9rem; }
.abt__acts .btn { border-radius: 999px; }
.abt__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--blue); }
.abt__more svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.abt__more:hover svg { transform: translateX(3px); }
.abt__pics { position: relative; max-width: 560px; margin-left: auto; padding: 0 0 60px 0; }
.abt__p1 img, .abt__p2 img { display: block; width: 100%; object-fit: cover; }
.abt__p1 { width: 78%; margin-left: auto; overflow: hidden; border-radius: 26px; box-shadow: 0 30px 60px -38px rgba(11,37,69,.5); }
.abt__p1 img { aspect-ratio: 4 / 4.6; }
.abt__p2 { position: absolute; left: 0; bottom: 0; width: 48%; overflow: hidden; border: 8px solid #fff; border-radius: 24px; box-shadow: 0 24px 48px -26px rgba(11,37,69,.5); }
.abt__p2 img { aspect-ratio: 1; }
.abt__badge {
  position: absolute; left: 6%; top: 10%; display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem;
  border-radius: 16px; background: var(--blue); color: #fff; box-shadow: 0 18px 36px -16px rgba(10,85,168,.7);
}
.abt__badge b { font-size: 2rem; font-weight: 700; line-height: 1; }
.abt__badge span { font-size: .78rem; line-height: 1.3; color: rgba(255,255,255,.85); }
@media (max-width: 991.98px) {
.abt__pics { margin-inline: auto; }
}
@media (max-width: 575.98px) {
.abt__list { grid-template-columns: 1fr; }
.abt__badge { left: 0; top: 4%; }
}
.vmx {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  border: 1px solid #E4EAF2; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vmx:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -30px rgba(11,37,69,.45); }
.vmx__i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--blue-50); color: var(--blue); }
.vmx__i svg { width: 27px; height: 27px; }
.vmx h3 { margin-top: 1.3rem; font-size: 1.4rem; font-weight: 600; }
.vmx p { margin-top: .7rem; font-size: .98rem; line-height: 1.75; color: #5B6B7F; }
.vmx--m { border: 0; color: rgba(255,255,255,.8); background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%); }
.vmx--m::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.3), transparent); }
.vmx--m .vmx__i { background: rgba(255,255,255,.1); color: var(--green); }
.vmx--m h3 { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.vmx { transition: none; }
.vmx:hover { transform: none; }
}
/* ═════════════ page banner with photo (all inner pages, 2026-10-20) ═════════ */
.ph--img { overflow: hidden; isolation: isolate; text-align: center; background: var(--navy-900); }
.ph--img::after { z-index: 1; }
.ph__bg { position: absolute; inset: 0; z-index: -1; }
.ph__bg picture, .ph__bg img { display: block; width: 100%; height: 100%; }
.ph__bg img { object-fit: cover; object-position: 50% 50%; }
.ph__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,26,51,.94) 0%, rgba(11,37,69,.86) 50%, rgba(7,26,51,.94) 100%);
}
.ph--img .ph__in { padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }
.ph--img h1 { margin: 0 auto; max-width: 28ch; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ph--img .crumbs { display: flex; justify-content: center; margin-top: 1rem; }
.ph--img .crumbs ol {
  justify-content: center; margin: 0; padding: .5rem 1.1rem; list-style: none; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .85rem;
}
.ph--img .crumbs li { display: inline-flex; align-items: center; }
/* about: mission card now matches vision, in green */
.vmx--green .vmx__i { background: var(--green-50); color: var(--green-700); }
.ph__bg::after { background: linear-gradient(90deg, rgba(7,26,51,.9) 0%, rgba(11,37,69,.72) 50%, rgba(7,26,51,.9) 100%); }
.vmx { flex: 1 1 auto; width: 100%; }
.vmx::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--blue); }
.vmx--green::before { background: var(--green-600); }
/* vision & mission — compact */
.vmx { padding: 1.6rem 1.7rem; border-radius: 20px; }
.vmx__hd { display: flex; align-items: center; gap: .9rem; }
.vmx__i { width: 50px; height: 50px; border-radius: 14px; }
.vmx__i svg { width: 24px; height: 24px; }
.vmx h3 { margin: 0; font-size: 1.3rem; }
.vmx p { margin-top: .9rem; font-size: 1rem; line-height: 1.65; color: #4A5A6E; }
.vmx__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.vmx__tags li { padding: .4rem .85rem; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: .82rem; font-weight: 600; }
.vmx--green .vmx__tags li { background: var(--green-50); color: var(--green-700); }
/* vision & mission — polish: watermark icon, ticked tags, hover */
.vmx { padding: 1.8rem 1.9rem; }
.vmx__hd, .vmx p, .vmx__tags { position: relative; z-index: 1; }
.vmx__i { transition: background .3s var(--ease), color .3s var(--ease); }
.vmx:hover .vmx__i { background: var(--blue); color: #fff; }
.vmx--green:hover .vmx__i { background: var(--green-600); }
.vmx p { max-width: 46ch; }
.vmx__tags li { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--blue-100); }
.vmx--green .vmx__tags li { background: #fff; border-color: var(--green-100); }
.vmx__tags svg { width: 14px; height: 14px; stroke-width: 3; }
/* vision & mission — one panel, two statements */
/* vision & mission cards — refined: small label, statement headline, roomier */
.vmx { padding: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); border-radius: 24px; }
.vmx__k { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.vmx--green .vmx__k { color: var(--green-700); }
.vmx h3 { position: relative; z-index: 1; margin-top: 1.25rem; max-width: 24ch; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.vmx p { margin-top: .7rem; font-size: .95rem; color: #5B6B7F; }
.vmx__tags { margin-top: 1.4rem; }
/* vision & mission — short */
.vmx { padding: 1.6rem 1.8rem; }
.vmx h3 { margin-top: 1rem; }
.vmx__tags { margin-top: 1.1rem; }
/* ═════════════ about the doctor / about the clinic (2026-10-20) ═════════════ */
.drx__body .answer { margin-top: 1.1rem; padding: 0; border: 0; background: none; box-shadow: none; }
.drx__body .answer__k { display: none; }
.drx__body .answer__p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: #4A5A6E; }
/* education timeline — one white panel, dots on a thin rail */
.tlx, .dsv { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: 22px; }
.tlx { border: 1px solid #E4EAF2; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.tlx__hd { display: flex; align-items: center; gap: .85rem; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid #EDF1F6; }
.tlx__hd h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.tlx__i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue); }
.tlx__i svg { width: 21px; height: 21px; }
.tl { flex: 1 1 auto; align-content: space-between; position: relative; display: grid; gap: 1.35rem; margin: 0; padding: 0 0 0 1.9rem; list-style: none; }
.tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--blue-100), var(--green-100)); }
.tl li { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; align-items: baseline; }
.tl li::before { content: ""; position: absolute; left: calc(-1.9rem + 1px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.tl__y { grid-row: span 2; justify-self: start; padding: .2rem .6rem; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.tl b { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.tl li > span:last-child { grid-column: 2; margin-top: .15rem; font-size: .88rem; line-height: 1.5; color: #5B6B7F; }
.tl__now::before { border-color: var(--green-600) !important; box-shadow: 0 0 0 4px var(--green-50) !important; }
.tl__now .tl__y { background: var(--green-50); color: var(--green-700); }
/* doctor's services card */
.dsv { color: rgba(255,255,255,.8); background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 100%); }
.dsv .tlx__hd { border-color: rgba(255,255,255,.1); }
.dsv .tlx__hd h3 { color: #fff; }
.dsv__i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--green); }
.dsv__i svg { width: 21px; height: 21px; }
.dsv__list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.dsv__list li { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: .95rem; font-weight: 500; transition: background .25s var(--ease); }
.dsv__list li:hover { background: rgba(255,255,255,.1); }
.dsv__list svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--green-600); color: #fff; stroke-width: 3; }
.dsv__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.2rem; font-weight: 600; color: var(--green); }
.dsv__more svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.dsv__more:hover { color: #fff; }
.dsv__more:hover svg { transform: translateX(3px); }
@media (max-width: 575.98px) {
.tl li { grid-template-columns: 1fr; }
.tl__y { grid-row: auto; margin-bottom: .35rem; }
.tl li > span:last-child { grid-column: 1; }
}
/* visit tiles */
.vis { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid #E4EAF2; border-radius: 20px; background: #fff; color: var(--text); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
a.vis:hover { color: var(--text); transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 22px 40px -28px rgba(11,37,69,.45); }
.vis__i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-50); color: var(--blue); transition: background .3s var(--ease), color .3s var(--ease); }
.vis__i svg { width: 23px; height: 23px; }
a.vis:hover .vis__i { background: var(--blue); color: #fff; }
.vis small { display: block; margin-top: 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.vis b { display: block; margin-top: .35rem; font-size: .98rem; font-weight: 600; line-height: 1.5; }
.vis__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: 1rem; font-size: .88rem; font-weight: 600; color: var(--blue); }
.vis__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
a.vis:hover .vis__go svg { transform: translateX(3px); }
.cta-grey .bento__i { background: #fff; }
/* ═════════════════════ about the doctor — premium pass (2026-10-20) ═════════════════════ */
.dfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.6rem 0 0; padding: 0; list-style: none; border: 1px solid #E2E9F3; border-radius: 18px; background: #fff; }
.dfacts li { padding: 1rem 1.1rem; }
.dfacts li + li { border-left: 1px solid #E2E9F3; }
.dfacts b { display: inline-flex; align-items: center; gap: .25rem; font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--blue); }
.dfacts b svg { width: 18px; height: 18px; color: #FBBC04; }
.dfacts span { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 767.98px) {
.dfacts { grid-template-columns: 1fr 1fr; }
.dfacts li:nth-child(3) { border-left: 0; }
.dfacts li:nth-child(n+3) { border-top: 1px solid #E2E9F3; }
}
.qcard {
  position: relative; flex: 1 1 auto; width: 100%; display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem;
  border: 1px solid #E4EAF2; border-radius: 20px; background: #fff; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.qcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.qcard:hover { transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 22px 40px -28px rgba(11,37,69,.45); }
.qcard:hover::after { transform: scaleX(1); }
.qcard__i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-50); color: var(--blue); transition: background .3s var(--ease), color .3s var(--ease); }
.qcard__i svg { width: 23px; height: 23px; }
.qcard:hover .qcard__i { background: var(--blue); color: #fff; }
.qcard small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.qcard h3 { margin: .3rem 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.qcard p { margin: .25rem 0 0; font-size: .88rem; color: #5B6B7F; }
@media (prefers-reduced-motion: reduce) {
.qcard, .qcard::after { transition: none; }
.qcard:hover { transform: none; }
}
.sec--tl .tlx { background: var(--surface); border-color: #E6EDF6; box-shadow: none; }
.sec--tl .tlx__i, .sec--tl .tl__y { background: #fff; }
.sec--tl .tl li::before { box-shadow: 0 0 0 4px #fff; }
/* ═════════════════════ contact us (2026-10-20) ═════════════════════ */
.vis { flex: 1 1 auto; width: 100%; }
.sec--cx .vis b { word-break: break-word; }
/* contact — refined: info list beside the form, full-width map */
.cx h2 { margin-top: .5rem; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.cx__lead { margin-top: .8rem; max-width: 42ch; font-size: 1rem; line-height: 1.7; color: #5B6B7F; }
.cx__list { margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid #E6EDF6; }
.cx__list li { border-bottom: 1px solid #E6EDF6; }
.cx__list a, .cx__list li > div { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem; color: var(--text); }
.cx__list a > span:nth-child(2), .cx__list li > div > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.cx__list small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cx__list b { display: block; margin-top: .15rem; font-size: 1rem; font-weight: 600; line-height: 1.45; word-break: break-word; }
.cx__list a > svg { flex: none; width: 18px; height: 18px; color: #A7B6C8; transition: transform .25s var(--ease), color .25s var(--ease); }
.cx__list a:hover { color: var(--blue); }
.cx__list a:hover > svg { color: var(--blue); transform: translateX(3px); }
.cx__i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--blue-50); color: var(--blue); transition: background .25s var(--ease), color .25s var(--ease); }
.cx__i svg { width: 21px; height: 21px; }
.cx__i--wa { background: var(--green-50); color: var(--green-700); }
.cx__list a:hover .cx__i { background: var(--blue); color: #fff; }
.cx__list a:hover .cx__i--wa { background: var(--green-600); }
.sec--cx .qb__form { position: relative; top: auto; }
/* contact — doctor mini card, softer list rows */
.cx__list a, .cx__list li > div { padding: .95rem .6rem; border-radius: 14px; transition: background .25s var(--ease), color .25s var(--ease); }
.cx__list a:hover { background: var(--surface); }
.cx__dr {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .9rem 1rem; border-radius: 18px;
  color: #fff; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); box-shadow: 0 20px 40px -28px rgba(11,37,69,.6);
  transition: transform .3s var(--ease);
}
.cx__dr:hover { color: #fff; transform: translateY(-3px); }
.cx__av { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.cx__av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.cx__dr > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.cx__dr small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.cx__dr b { display: block; margin-top: .1rem; font-size: 1rem; font-weight: 600; }
.cx__dr span span { display: block; font-size: .82rem; color: rgba(255,255,255,.7); }
.cx__dr > svg { flex: none; width: 18px; height: 18px; color: var(--green); transition: transform .25s var(--ease); }
.cx__dr:hover > svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.cx__dr { transition: none; }
.cx__dr:hover { transform: none; }
}
/* contact — visit panel: details beside the map */
/* contact — visit panel, simple white details side */
/* contact — map with a floating clinic card (reference: chest & sleep site, refined) */
.cvhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.cvhead h2 { margin-top: .5rem; }
.cvhead p { margin-top: .5rem; font-size: 1rem; color: #5B6B7F; }
.cvhead__go { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border: 1px solid #CFDDF0; border-radius: 999px; background: #fff; font-weight: 600; color: var(--blue); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.cvhead__go svg { width: 18px; height: 18px; }
.cvhead__go:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.cvm { position: relative; padding: 10px; border: 1px solid #E4EAF2; border-radius: 28px; background: #fff; box-shadow: 0 24px 50px -38px rgba(11,37,69,.45); }
.cvm__map { position: relative; height: clamp(380px, 36vw, 520px); overflow: hidden; border-radius: 20px; background: var(--surface); }
.cvm__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cvm__card {
  position: absolute; left: 20px; top: 20px; width: min(370px, calc(100% - 40px)); padding: 1.3rem;
  border-radius: 20px; background: #fff; box-shadow: 0 24px 48px -20px rgba(11,37,69,.4);
}
.cvm__hd { display: flex; align-items: flex-start; gap: .9rem; }
.cvm__i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff; box-shadow: 0 12px 24px -12px rgba(10,85,168,.7); }
.cvm__i svg { width: 22px; height: 22px; }
.cvm__hd b { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.cvm__hd div span { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.55; color: #5B6B7F; }
.cvm__meta { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid #EDF1F6; }
.cvm__meta li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; font-weight: 500; line-height: 1.5; color: var(--text); }
.cvm__meta svg { flex: none; width: 17px; height: 17px; margin-top: .15rem; color: var(--green-600); }
.cvm__meta a { color: var(--text); }
.cvm__meta a:hover { color: var(--blue); }
.cvm__acts { display: flex; gap: .6rem; margin-top: 1.1rem; }
.cvm__acts .btn { flex: 1 1 auto; justify-content: center; border-radius: 999px; }
.cvm__call { display: grid; place-items: center; flex: none; width: 48px; border-radius: 50%; background: var(--green-50); color: var(--green-700); transition: background .25s var(--ease), color .25s var(--ease); }
.cvm__call svg { width: 20px; height: 20px; }
.cvm__call:hover { background: var(--green-600); color: #fff; }
@media (max-width: 767.98px) {
.cvm { padding: 8px; border-radius: 22px; }
.cvm__map { height: 300px; border-radius: 16px; }
.cvm__card { position: static; width: auto; padding: 1.2rem .6rem .5rem; box-shadow: none; }
}
.sec--cx { padding-bottom: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.sec--cx + .sec { padding-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
/* FAQ section (inner pages) — same numbered list as the home page, refined help card */
.qa .faq { gap: 0; counter-reset: qn; padding: .4rem 1.4rem; border: 1px solid #E4EAF2; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 18px 40px -34px rgba(11,37,69,.4); }
.qa .faq__item { border: 0; border-radius: 0; background: none; box-shadow: none; counter-increment: qn; }
.qa .faq__item + .faq__item { border-top: 1px solid #EDF1F6; }
.qa .faq__item:has([aria-expanded="true"]) { background: none; box-shadow: none; }
.qa .faq__q { align-items: center; padding: 1.15rem 0; font-size: 1rem; font-weight: 600; }
.qa .faq__q > span { display: flex; align-items: center; gap: .9rem; }
.qa .faq__q > span::before {
  content: counter(qn, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: #F2F6FB; font-size: .78rem; font-weight: 700; color: #6B7C93; transition: background .25s var(--ease), color .25s var(--ease);
}
.qa .faq__q[aria-expanded="true"] { color: var(--blue); }
.qa .faq__q[aria-expanded="true"] > span::before { background: var(--blue); color: #fff; }
.qa .faq__q svg { width: 30px; height: 30px; padding: 7px; margin: 0; border-radius: 50%; border: 1px solid #DCE4EF; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.qa .faq__q:hover svg, .qa .faq__q[aria-expanded="true"] svg { background: var(--blue); border-color: var(--blue); color: #fff; }
.qa .faq__a p { padding: 0 2.5rem 1.2rem 3.05rem; font-size: .93rem; line-height: 1.7; color: #5B6B7F; }
.qa .faq { padding: .4rem 1.6rem; }
@media (min-width: 992px) {
.qa__intro { position: sticky; top: 110px; }
}
.qa__intro h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.qa__intro > p { max-width: 40ch; font-size: 1rem; line-height: 1.7; color: #5B6B7F; }
.qa .help {
  position: relative; overflow: hidden; margin-top: 1.6rem; padding: 1.6rem; border-radius: 22px;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%); box-shadow: 0 24px 48px -32px rgba(11,37,69,.6);
}
.qa .help::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.22), transparent); pointer-events: none; }
.qa .help > * { position: relative; z-index: 1; }
.qa .help h3 { font-size: 1.2rem; font-weight: 600; }
.qa .help p { margin-top: .4rem; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.qa .help .acts { gap: .6rem; margin-top: 1.2rem; }
.qa .help .btn { border-radius: 999px; padding-inline: 1.2rem; }
@media (max-width: 575.98px) {
.qa .faq { padding: .2rem 1rem; }
.qa .faq__a p { padding: 0 0 1.1rem; }
}
/* "still have a question?" card — light, structured */
.qa .help { padding: 1.5rem; border: 1px solid #E4EAF2; background: #fff; color: var(--text); box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.qa .help::after { display: none; }
.help__hd { display: flex; align-items: flex-start; gap: .9rem; }
.help__i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff; box-shadow: 0 12px 24px -12px rgba(10,85,168,.7); }
.help__i svg { width: 23px; height: 23px; }
.qa .help h3 { color: var(--text); font-size: 1.15rem; }
.qa .help__hd p { margin-top: .25rem; font-size: .9rem; color: #5B6B7F; }
.qa .help__hrs { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .75rem .9rem; border-radius: 12px; background: var(--surface); font-size: .88rem; font-weight: 500; color: var(--text); }
.help__hrs svg { flex: none; width: 18px; height: 18px; color: var(--green-600); }
.help__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.help__acts .btn { flex: 1 1 160px; justify-content: center; border-radius: 999px; }
.qa .help p.help__hrs { color: var(--text); }
/* ═════════════════════ service pages (2026-10-20) ═════════════════════ */
.jny .jny__c { height: 100%; background: #fff; }
.cta-grey .shead h2 { max-width: none; }
/* ═════════════════════ service pages — original layout, refined (2026-10-20) ═════════════════════ */
.page .answer {
  position: relative; margin-bottom: 1.6rem; padding: 1.3rem 1.4rem 1.3rem 1.5rem; border: 1px solid #DCE7F5; border-left: 0;
  border-radius: 20px; background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FC 100%); overflow: hidden;
}
.page .answer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--blue), var(--green)); }
.page .answer__k { gap: .55rem; }
.page .answer__k svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--blue); color: #fff; }
.page .answer__p { margin-top: .7rem; font-size: 1.02rem; line-height: 1.75; color: #33445A; }
.page .figure { margin-bottom: 1.8rem; }
.page .media-img { border-radius: 22px; box-shadow: 0 26px 50px -36px rgba(11,37,69,.5); }
.page .prose p { font-size: 1rem; line-height: 1.8; color: #4A5A6E; }
.page .prose h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
.page .prose ul { gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
.page .prose ul { grid-template-columns: 1fr 1fr; }
}
.page .prose ul li { align-items: flex-start; gap: .7rem; padding: .85rem .95rem; border: 1px solid #E8EEF6; border-radius: 14px; background: #fff; font-size: .93rem; line-height: 1.55; color: var(--text); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.page .prose ul li:hover { border-color: #CFDDF0; box-shadow: 0 14px 28px -22px rgba(11,37,69,.45); }
.page .prose ul li::before { display: none; }
.page .prose ul li > svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green-600); color: #fff; stroke-width: 3; }
.page .glance { margin-top: 2.2rem; padding: 1.5rem; border: 1px solid #E4EAF2; border-radius: 22px; background: var(--surface); }
.page .glance__h { font-size: 1.15rem; font-weight: 600; }
.page .glance__grid > div { padding: 1rem 1.1rem; border: 1px solid #E8EEF6; border-radius: 14px; background: #fff; }
.page .glance__grid dt { color: var(--green-700); letter-spacing: .1em; }
.page .glance__grid dd { margin-top: .3rem; font-size: .93rem; font-weight: 500; line-height: 1.5; }
.page .acts .btn { border-radius: 999px; }
.page .acts .btn--line { background: #fff; }
.side { gap: 1.1rem; }
.side__book {
  position: relative; overflow: hidden; padding: 1.6rem; border-radius: 22px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 100%); box-shadow: 0 24px 48px -32px rgba(11,37,69,.6);
}
.side__book::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.22), transparent); pointer-events: none; }
.side__book > * { position: relative; z-index: 1; }
.side__book h2 { font-size: 1.2rem; font-weight: 600; }
.side__book p { line-height: 1.6; color: rgba(255,255,255,.72); }
.side__book .btn { border-radius: 999px; }
.side__list { border: 1px solid #E4EAF2; border-radius: 22px; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.side__list h2 { padding: 1rem 1.25rem; font-size: 1rem; font-weight: 600; background: #fff; border-bottom-color: #EDF1F6; }
.side__list ul { margin: 0; padding: .45rem; list-style: none; }
.side__list a { gap: .8rem; min-height: 50px; padding: .5rem .7rem; border: 0; border-radius: 12px; font-size: .93rem; transition: background .2s var(--ease), color .2s var(--ease); }
.side__list a svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--blue-50); flex: none; transition: background .2s var(--ease), color .2s var(--ease); }
.side__list [aria-current] a { box-shadow: none; background: var(--blue-50); color: var(--blue); font-weight: 600; }
.side__list [aria-current] a svg, .side__list a:hover svg { background: var(--blue); color: #fff; }
.who__c {
  position: relative; flex: 1 1 auto; width: 100%; gap: 1rem; padding: 1.4rem; overflow: hidden;
  border: 1px solid #E4EAF2; border-left: 1px solid #E4EAF2; border-radius: 20px; background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.who__c::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.who__c:hover { transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 22px 40px -28px rgba(11,37,69,.45); }
.who__c:hover::after { transform: scaleX(1); }
.who__i { width: 42px; height: 42px; border-radius: 12px; background: var(--green-50); color: var(--green-700); transition: background .3s var(--ease), color .3s var(--ease); }
.who__i svg { width: 19px; height: 19px; stroke-width: 2.6; }
.who__c:hover .who__i { background: var(--green-600); color: #fff; }
.who__c h3 { font-size: 1.05rem; font-weight: 600; }
.who__c p { margin-top: .35rem; font-size: .9rem; line-height: 1.6; color: #5B6B7F; }
@media (min-width: 1200px) {
.steps > .step { padding: 0 1rem 0 0; }
}
.steps .step h3 { font-size: 1.08rem; font-weight: 600; }
.steps .step p { font-size: .92rem; line-height: 1.65; color: #5B6B7F; }
@media (prefers-reduced-motion: reduce) {
.who__c, .who__c::after { transition: none; }
.who__c:hover { transform: none; }
}
.figure--complete-diabetes-care img { filter: brightness(1.45) contrast(1.05) saturate(1.1); }
/* service detail pages — slim breadcrumb bar instead of the photo banner */
.cbar { border-block: 1px solid #E4EAF2; background: var(--surface); }
.cbar .crumbs ol { margin: 0; padding: 1rem 0; list-style: none; gap: .5rem; font-size: .95rem; font-weight: 500; }
.cbar .crumbs li { display: inline-flex; align-items: center; }
.cbar .crumbs a { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue); }
.cbar .crumbs a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cbar .crumbs li:first-child a::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cbar .crumbs .sep { margin-left: .5rem; color: #B5C2D3; }
.cbar .crumbs [aria-current] { color: var(--text); font-weight: 600; }
.cbar + .sec { padding-top: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); }
.svh { margin-bottom: 1.6rem; }
.svh .label { display: inline-flex; align-items: center; gap: .45rem; }
.svh .label svg { width: 16px; height: 16px; }
.svh h1 { margin-top: .55rem; font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.15; }
.svh p { margin-top: .6rem; max-width: 60ch; font-size: 1.08rem; line-height: 1.65; color: #5B6B7F; }
/* service detail — header meta, summary below the photo, closing booking strip */
.svh { margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid #EDF1F6; }
.page .figure { margin-bottom: 1.6rem; }
.page .figure + .answer { margin-bottom: 1.8rem; }
.page .prose > h2 { padding-top: .4rem; }
.svh { margin-bottom: 1.4rem; padding-bottom: 1.2rem; }
.svh h1 { margin-top: 0; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.svh p { margin-top: .4rem; font-size: 1rem; }
/* mobile polish: hours never split mid-time, service card footer, visit tiles */
.nw { white-space: nowrap; }
.scard__pic img[src*="bg11"] { filter: brightness(1.4) contrast(1.05); }
@media (max-width: 575.98px) {
.scard__ft { gap: .4rem; }
.scard__more { white-space: nowrap; font-size: .8rem; }
.scard__book { white-space: nowrap; }
.scard p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vis { display: grid; grid-template-columns: 46px 1fr; column-gap: .9rem; padding: 1.1rem; border-radius: 16px; }
.vis__i { grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: 12px; }
.vis small { margin-top: 0; }
.vis b { margin-top: .2rem; font-size: .93rem; }
.vis__go { grid-column: 2; padding-top: .6rem; }
.cx__list b { font-size: .95rem; }
}
/* ═════════════════════ service detail — reference layout (chest & sleep), refined ═════════════════════ */
.sec--svd .figure { margin-bottom: 1.8rem; }
.sec--svd .media-img { aspect-ratio: 16 / 9; }
.sec--svd .svh { margin-bottom: 1rem; padding-bottom: 0; border: 0; }
.sec--svd .svh h1 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.sec--svd .prose { margin-top: 0; }
.sec--svd .answer { margin: 1.8rem 0 0; }
.shr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin-top: 2rem; padding: .9rem 1.1rem; border: 1px solid #E4EAF2; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -28px rgba(11,37,69,.4); }
.shr__t { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); }
.shr__t svg { width: 18px; height: 18px; color: var(--blue); }
.shr__l { display: flex; gap: .45rem; }
.shr__l a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #E4EAF2; border-radius: 50%; color: var(--text); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.shr__l a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.shr__l svg { width: 17px; height: 17px; }
.oth { margin-top: 1.5rem; padding: 1.4rem; border: 1px dashed #D5E0EE; border-radius: 22px; background: var(--surface); }
.oth__h { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 600; }
.oth__a { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .85rem 1rem; border: 1px solid #E4EAF2; border-radius: 14px; background: #fff; font-size: .95rem; font-weight: 500; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
.oth__a > span:nth-child(2) { flex: 1 1 auto; }
.oth__a > svg { flex: none; width: 16px; height: 16px; color: var(--blue); transition: transform .2s var(--ease); }
.oth__a:hover { color: var(--blue); border-color: #CFDDF0; box-shadow: 0 14px 28px -22px rgba(11,37,69,.45); }
.oth__a:hover > svg { transform: translateX(3px); }
.sd { display: grid; gap: 1.2rem; }
.sd__svc, .sd__form .formcard { border: 1px solid #E4EAF2; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.sd__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .6rem; }
.sd__hd h2 { font-size: 1.1rem; font-weight: 600; }
.sd__hd a { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--blue); }
.sd__hd a svg { width: 15px; height: 15px; }
.sd__svc ul { margin: 0; padding: .3rem .6rem .7rem; list-style: none; }
.sd__svc a { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border-radius: 12px; font-size: .92rem; font-weight: 500; color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.sd__svc a > span:nth-child(2) { flex: 1 1 auto; }
.sd__svc a > svg { width: 16px; height: 16px; }
.sd__i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface); color: var(--blue); }
.sd__i svg { width: 17px; height: 17px; }
.sd__svc a:hover { background: var(--blue-50); color: var(--blue); }
.sd__svc [aria-current] a { background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff; font-weight: 600; box-shadow: 0 12px 24px -14px rgba(10,85,168,.7); }
.sd__svc [aria-current] .sd__i { background: rgba(255,255,255,.15); color: #fff; }
.sd__form .formcard { padding: 1.4rem 1.25rem; }
.sd__form .formcard h2 { font-size: 1.15rem; }
.sd__form .formcard > p { font-size: .85rem; }
.sd__form .row > [class*="col-sm-6"], .sd__form .row > [class*="col-md-6"] { flex: 0 0 100%; max-width: 100%; }
.sd__form form .btn[type="submit"], .sd__form form button[type="submit"] { width: 100%; justify-content: center; border-radius: 999px; }
.sd__form form .acts { flex-direction: column; align-items: stretch; text-align: center; }
/* ═════════════════════ service detail — premium pass ═════════════════════ */
.sec--svd .figure { position: relative; }
.sec--svd .media-img { border-radius: 26px; }
.svp__tag {
  position: absolute; left: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: .65rem; padding: .5rem 1rem .5rem .5rem;
  border-radius: 999px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px -16px rgba(11,37,69,.55);
}
.svp__av { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; }
.svp__av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.svp__tag small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.svp__tag b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.svh__k { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: var(--blue-50); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.svh__k svg { width: 15px; height: 15px; }
.sec--svd .svh h1 { margin-top: .7rem; }
.sec--svd .svh p { font-size: 1.1rem; color: var(--text-2); }
.sec--svd .prose > p:first-child { font-size: 1.05rem; color: var(--text); }
.page .glance__grid > div { display: flex; align-items: flex-start; gap: .8rem; }
.glance__i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--blue); }
.glance__grid > div:nth-child(even) .glance__i { background: var(--green-50); color: var(--green-700); }
.glance__i svg { width: 18px; height: 18px; }
.shr { background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FC 100%); border-color: #DCE7F5; box-shadow: none; }
.shr__l a { background: #fff; }
.oth { padding: 0; border: 0; background: none; }
.oth__h { font-size: 1.3rem; }
.oth__a { gap: .9rem; padding: .55rem .9rem .55rem .55rem; border-radius: 18px; }
.oth__pic { flex: none; width: 72px; height: 60px; overflow: hidden; border-radius: 12px; background: var(--surface); }
.oth__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.oth__pic img[src*="bg11"] { filter: brightness(1.4); }
.oth__a:hover .oth__pic img { transform: scale(1.06); }
.oth__b { flex: 1 1 auto; min-width: 0; }
.oth__b b { display: block; font-size: .98rem; font-weight: 600; }
.oth__b small { display: block; margin-top: .1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; font-weight: 400; color: var(--muted); }
.oth__a > svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--surface); }
.oth__a:hover > svg { background: var(--blue); color: #fff; }
@media (min-width: 992px) {
.sd { position: sticky; top: 100px; }
}
@media (min-width: 992px) and (max-height: 1100px) {
.sd { position: static; }
}
.sd__form.qb__form { position: relative; top: auto; }
@media (max-width: 575.98px) {
.svp__tag { left: .7rem; bottom: .7rem; }
.oth__b small { display: none; }
}
/* service sidebar — doctor card with portrait */
.drc { overflow: hidden; border: 1px solid #E4EAF2; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.drc__b { padding: 1rem 1.1rem 1.1rem; }
.drc__row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #EDF1F6; color: var(--text); }
.drc__row:hover b { color: var(--blue); }
.drc__i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); color: var(--blue); }
.drc__i svg { width: 17px; height: 17px; }
.drc__row small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drc__row b { display: block; font-size: .98rem; font-weight: 600; transition: color .2s var(--ease); }
.drc__acts { display: flex; gap: .5rem; margin-top: 1rem; }
.drc__acts .btn { flex: 1 1 0; justify-content: center; padding-inline: .6rem; border-radius: 999px; }
.drc__hrs { display: flex; align-items: flex-start; gap: .5rem; margin-top: .9rem; padding: .65rem .8rem; border-radius: 12px; background: var(--surface); font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.drc__hrs svg { flex: none; width: 16px; height: 16px; margin-top: .1rem; color: var(--green-600); }
/* doctor card — simple */
.drc__hd { display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1.1rem 1rem; border-bottom: 1px solid #EDF1F6; }
.drc__av { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--blue-50); }
.drc__av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.drc__hd b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.drc__hd div > span { display: block; font-size: .8rem; color: var(--muted); }
.drc__hd em { display: inline-block; margin-top: .25rem; font-style: normal; font-size: .78rem; font-weight: 600; color: var(--text); }
.drc__hd em span { color: #FBBC04; }
.drc__b { padding-top: .4rem; }
.drc__row { border-bottom: 0; }
/* service sidebar — sticky; if taller than the screen it scrolls inside itself */
@media (min-width: 992px) {
.sec--svd .col-lg-4 { align-self: stretch; }
.sec--svd .sd {
    position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 6px 2px 2px; margin: -2px -6px -2px -2px; scrollbar-width: thin; scrollbar-color: #CFDDF0 transparent;
  }
.sec--svd .sd::-webkit-scrollbar { width: 6px; }
.sec--svd .sd::-webkit-scrollbar-thumb { border-radius: 6px; background: #CFDDF0; }
}
/* service sidebar — compact so the whole column fits on screen while sticky */
.sec--svd .sd { gap: 1rem; }
.sd__hd { padding: .95rem 1.1rem .4rem; }
.sd__svc ul { padding: .2rem .5rem .55rem; }
.sd__svc a { padding: .4rem .6rem; font-size: .88rem; }
.sd__i { width: 28px; height: 28px; border-radius: 8px; }
.sd__i svg { width: 15px; height: 15px; }
.sd__form .formcard { padding: 1.1rem 1.1rem 1rem; }
.sd__form .formcard h2 { font-size: 1.05rem; }
.sd__form .formcard > p { margin-top: .15rem; }
.sd__form .f:has(#i-email), .sd__form .f:has(#i-subject) { display: none; }
.sd__form .f { margin-bottom: .1rem; }
.sd__form label { font-size: .8rem; }
.sd__form input, .sd__form textarea { min-height: 42px; padding-block: .5rem; font-size: .9rem; }
.sd__form textarea { height: 76px; min-height: 76px; }
.sd__form form .btn[type="submit"] { min-height: 44px; }
.drc__hd { padding: .95rem 1rem .8rem; }
.drc__av { width: 48px; height: 48px; }
.drc__b { padding: .3rem 1rem 1rem; }
.drc__row { padding: .45rem 0; }
.drc__acts { margin-top: .7rem; }
.drc__acts .btn { min-height: 42px; }
.drc__hrs { margin-top: .7rem; padding: .5rem .7rem; }
/* sticky: the enquiry form + doctor card follow the reader; the services list scrolls away */
@media (min-width: 992px) {
.sec--svd .sd { position: static; height: 100%; max-height: none; overflow: visible; align-content: start; padding: 0; margin: 0; }
.sd__stick { position: sticky; top: 100px; display: grid; gap: 1rem; }
}
@media (max-width: 991.98px) {
.sd__stick { display: grid; gap: 1rem; }
}
/* phones: service cards stack like a normal card — photo, heading, text, buttons */
@media (max-width: 575.98px) {
.scard__b { padding: 2.4rem .9rem .6rem; }
.scard h3 { font-size: 1.05rem; }
.scard p { margin-top: .4rem; font-size: .88rem; }
.scard__ft { margin-top: .9rem; padding-top: .85rem; }
.scard__more { font-size: .86rem; }
}
@media (max-width: 575.98px) {
.scard__pic { aspect-ratio: 16 / 9; }
}
/* service card buttons — outlined "View Details" + solid "Book Now", equal width */
.scard__ft { gap: .6rem; }
.scard__more, .scard__book {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 .8rem;
  border-radius: 10px; font-size: .9rem; font-weight: 600; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.scard__more { border: 1.5px solid var(--blue); background: #fff; color: var(--blue); }
.scard__more:hover, .scard:hover .scard__more { background: var(--blue-50); color: var(--blue); }
.scard__book, .scard:hover .scard__book { border: 1.5px solid var(--blue); background: var(--blue); color: #fff; }
.scard__book:hover, .scard__book:focus-visible { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.scard__more svg, .scard__book svg { width: 16px; height: 16px; }
@media (max-width: 575.98px) {
.scard__more, .scard__book { min-height: 42px; font-size: .86rem; padding: 0 .6rem; }
}
.scard__ft .scard__more svg, .scard__ft .scard__book svg { flex: none; width: 18px !important; height: 18px !important; padding: 0 !important; }
/* breadcrumb bar — one line on phones, current page truncates */
.cbar .crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
.cbar .crumbs li { flex: none; }
.cbar .crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.cbar .crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
.cbar .crumbs ol { gap: .35rem; padding: .8rem 0; font-size: .85rem; }
.cbar .crumbs .sep { margin-left: .35rem; }
.cbar .crumbs li:first-child a::before { width: 16px; height: 16px; }
}
/* our expertise — intro stats */
#services { scroll-margin-top: 90px; }
.sec--jny.cta-grey { background: var(--surface); }
/* our expertise — refined intro and doctor band */
.oex__dr {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
  padding: 1.3rem 1.5rem; border-radius: 24px; color: rgba(255,255,255,.75); background: linear-gradient(120deg, var(--navy) 0%, var(--navy-900) 100%);
  box-shadow: 0 26px 50px -34px rgba(11,37,69,.6);
}
.oex__dr::after { content: ""; position: absolute; right: -80px; top: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.22), transparent); pointer-events: none; }
.oex__dr > * { position: relative; z-index: 1; }
.oex__av { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); }
.oex__av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.oex__dr-t { flex: 1 1 320px; min-width: 0; }
.oex__dr-t small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.oex__dr-t b { display: block; margin-top: .2rem; font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: #fff; }
.oex__dr-t span { display: block; margin-top: .15rem; font-size: .85rem; }
.oex__dr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.oex__dr-acts .btn { border-radius: 999px; }
.oex__dr-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #fff; }
.oex__dr-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.oex__dr-more:hover { color: var(--green); }
.oex__dr-more:hover svg { transform: translateX(3px); }
@media (max-width: 575.98px) {
.oex__dr { padding: 1.2rem; }
.oex__dr-acts .btn { flex: 1 1 100%; justify-content: center; }
}
/* our expertise — feature bar overlapping the banner */
.sec--oxf { position: relative; z-index: 3; background: #fff; }
.oxf {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -64px; overflow: hidden;
  border: 1px solid #E4EAF2; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -36px rgba(11,37,69,.45);
}
.oxf__it { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.3rem; transition: background .25s var(--ease); }
.oxf__it + .oxf__it { border-left: 1px solid #EDF1F6; }
.oxf__it:hover { background: #FAFCFE; }
.oxf__i { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-50); color: var(--blue); transition: background .25s var(--ease), color .25s var(--ease); }
.oxf__it:nth-child(even) .oxf__i { background: var(--green-50); color: var(--green-700); }
.oxf__it:hover .oxf__i { background: var(--blue); color: #fff; }
.oxf__it:nth-child(even):hover .oxf__i { background: var(--green-600); }
.oxf__i svg { width: 23px; height: 23px; }
.oxf__it b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.oxf__it span:not(.oxf__i) { display: block; margin-top: .2rem; font-size: .84rem; color: var(--muted); }
.sec--oxf + .sec { padding-top: clamp(3rem, 2.4rem + 2vw, 4.5rem); }
@media (max-width: 991.98px) {
.oxf { grid-template-columns: 1fr 1fr; }
.oxf__it:nth-child(3) { border-left: 0; }
.oxf__it:nth-child(n+3) { border-top: 1px solid #EDF1F6; }
}
@media (max-width: 575.98px) {
.oxf { margin-top: -40px; }
.oxf__it { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; }
.oxf__i { width: 42px; height: 42px; }
.oxf__it b { font-size: .9rem; }
.oxf__it span:not(.oxf__i) { font-size: .76rem; }
}
.sec--oxf { background: none; }
.ph:has(+ .sec--oxf) .ph__in { padding-bottom: calc(clamp(3rem, 2rem + 3vw, 5rem) + 48px); }
/* ═════════════════════ gallery page ═════════════════════ */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: clamp(.6rem, .4rem + .6vw, 1rem); grid-auto-flow: dense; }
.gal__i { position: relative; display: block; overflow: hidden; border-radius: 20px; background: var(--surface); }
.gal__i:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal__i:nth-child(6) { grid-row: span 2; }
.gal__i:nth-child(9) { grid-column: span 2; }
.gal__i picture, .gal__i img { display: block; width: 100%; height: 100%; }
.gal__i img { object-fit: cover; transition: transform .6s var(--ease); }
.gal__i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,27,51,.55)); opacity: 0; transition: opacity .35s var(--ease); }
.gal__i:hover img { transform: scale(1.06); }
.gal__i:hover::after, .gal__i:focus-visible::after { opacity: 1; }
.gal__zoom { position: absolute; z-index: 1; right: .9rem; bottom: .9rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--blue); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.gal__zoom svg { width: 19px; height: 19px; }
.gal__i:hover .gal__zoom, .gal__i:focus-visible .gal__zoom { opacity: 1; transform: none; }
@media (max-width: 767.98px) {
.gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
.gal__i { border-radius: 14px; }
.gal__i:nth-child(6) { grid-row: auto; }
.gal__zoom { opacity: 1; transform: none; width: 36px; height: 36px; right: .6rem; bottom: .6rem; }
}
.unit { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--navy); color: #fff; box-shadow: 0 20px 40px -32px rgba(11,37,69,.5); }
.unit picture, .unit img { display: block; width: 100%; height: 100%; }
.unit img { object-fit: cover; transition: transform .6s var(--ease); }
.unit img[src*="bg11"], .unit img[src*="bg9"] { filter: brightness(1.4); }
.unit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,27,51,0) 35%, rgba(8,27,51,.9) 100%); }
.unit:hover { color: #fff; }
.unit:hover img { transform: scale(1.06); }
.unit__c { position: absolute; z-index: 1; left: 1.1rem; right: 3.6rem; bottom: 1.1rem; }
.unit__c b { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.unit__c span { display: block; margin-top: .2rem; font-size: .82rem; color: rgba(255,255,255,.78); }
.unit__go { position: absolute; z-index: 1; right: 1rem; bottom: 1.1rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s var(--ease), color .25s var(--ease); }
.unit__go svg { width: 17px; height: 17px; }
.unit:hover .unit__go { background: #fff; color: var(--blue); }
@media (max-width: 575.98px) {
.unit { border-radius: 16px; }
.unit__c { left: .8rem; right: .8rem; bottom: .8rem; }
.unit__c b { font-size: .92rem; }
.unit__c span, .unit__go { display: none; }
}
.vband {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.1rem; margin-top: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); padding: 1.2rem 1.4rem;
  border-radius: 22px; color: rgba(255,255,255,.75); background: linear-gradient(120deg, var(--navy) 0%, var(--navy-900) 100%); box-shadow: 0 24px 48px -34px rgba(11,37,69,.6);
}
.vband::after { content: ""; position: absolute; right: -80px; top: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,184,47,.22), transparent); pointer-events: none; }
.vband > * { position: relative; z-index: 1; }
.vband__play { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--green-600); color: #fff; box-shadow: 0 0 0 8px rgba(124,184,47,.18); transition: transform .3s var(--ease); }
.vband__play svg { width: 22px; height: 22px; margin-left: 3px; }
.vband__t { flex: 1 1 auto; min-width: 0; }
.vband__t small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.vband__t b { display: block; margin-top: .15rem; font-size: 1.15rem; font-weight: 600; color: #fff; }
.vband__t span { display: block; font-size: .86rem; }
.vband__go { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); transition: transform .25s var(--ease); }
.vband__go svg { width: 18px; height: 18px; }
.vband:hover { color: rgba(255,255,255,.75); }
.vband:hover .vband__play { transform: scale(1.08); }
.vband:hover .vband__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.gal__i img, .unit img { transition: none; }
.gal__i:hover img, .unit:hover img { transform: none; }
}
/* 4-column step rows: arrow after 1-3, none after the last of each row */
@media (min-width: 1200px) {
.jny > li.col-xl-3:nth-child(3n)::after {
    content: ""; position: absolute; z-index: 2; top: 50%; right: -14px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A55A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
    border: 1px solid #DCE4EF; box-shadow: 0 6px 14px -8px rgba(11,37,69,.35);
  }
.jny > li.col-xl-3:nth-child(4n)::after, .jny > li:last-child::after { display: none; }
}
/* ═════════════════════ video page ═════════════════════ */
.vcard { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #E4EAF2; border-radius: 24px; background: #fff; box-shadow: 0 20px 44px -36px rgba(11,37,69,.45); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.vcard:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -34px rgba(11,37,69,.5); }
.vcard .player { margin: 10px 10px 0; overflow: hidden; border-radius: 18px; }
.vcard .player__go img { transition: transform .6s var(--ease); }
.vcard:hover .player__go img { transform: scale(1.04); }
.vcard__len { position: absolute; z-index: 1; right: .8rem; bottom: .8rem; padding: .25rem .55rem; border-radius: 8px; background: rgba(8,27,51,.85); font-size: .78rem; font-weight: 600; color: #fff; }
.vcard__b { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.3rem 1.4rem 1.4rem; }
.vcard__k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.vcard h2 { margin-top: .4rem; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.vcard p { margin-top: .4rem; font-size: .93rem; line-height: 1.65; color: #5B6B7F; }
.vcard__by { display: flex; align-items: center; gap: .65rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid #EDF1F6; }
.vcard p + .vcard__by { margin-top: 1.1rem; }
.vcard__av { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; }
.vcard__av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.vcard__by b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
.vcard__by small { display: block; font-size: .76rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.vcard { transition: none; }
.vcard:hover { transform: none; }
}
/* video page — featured talk + side column */
.vcard--big h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.vcard--big p { font-size: 1rem; }
.vcard__len { display: inline-flex; align-items: center; gap: .3rem; }
.vcard__len svg { width: 13px; height: 13px; }
.vside { display: grid; gap: 1.25rem; height: 100%; align-content: start; }
.vside .vcard { flex: none; }
.vside .vcard__b { padding: 1rem 1.2rem 1.1rem; }
.vside .vcard h2 { font-size: 1.08rem; }
.vside .vcard p { display: none; }
.vside .vcard__by { margin-top: .9rem; padding-top: .9rem; }
.ytc { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid #F3D3D3; border-radius: 20px; background: linear-gradient(135deg, #FFF6F6 0%, #FFFFFF 100%); color: var(--text); transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.ytc:hover { color: var(--text); border-color: #F0B5B5; box-shadow: 0 18px 36px -26px rgba(200,0,0,.35); }
.ytc__i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: #FF0000; color: #fff; }
.ytc__i svg { width: 22px; height: 22px; }
.ytc__t { flex: 1 1 auto; min-width: 0; }
.ytc__t b { display: block; font-size: .98rem; font-weight: 600; }
.ytc__t span { display: block; margin-top: .15rem; font-size: .8rem; color: var(--muted); }
.ytc__btn { flex: none; padding: .5rem 1rem; border-radius: 999px; background: #FF0000; font-size: .82rem; font-weight: 600; color: #fff; transition: background .2s var(--ease); }
.ytc:hover .ytc__btn { background: #CC0000; }
@media (max-width: 575.98px) {
.ytc { flex-wrap: wrap; }
.ytc__btn { width: 100%; text-align: center; }
}
/* ═════════════════════ policy pages ═════════════════════ */
@media (min-width: 992px) {
.pol__side { position: sticky; top: 100px; }
}
.pol__side { display: grid; gap: 1rem; }
.pol__toc, .pol__all { border: 1px solid #E4EAF2; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.pol__toc h2, .pol__all h2 { padding: 1rem 1.15rem .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pol__toc ol, .pol__all ul { margin: 0; padding: 0 .5rem .6rem; list-style: none; }
.pol__toc a { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .65rem; border-radius: 10px; font-size: .9rem; line-height: 1.4; color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease); }
.pol__toc a span { flex: none; font-size: .72rem; font-weight: 700; color: var(--blue); }
.pol__toc a:hover { background: var(--blue-50); color: var(--blue); }
.pol__all a { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 10px; font-size: .9rem; font-weight: 500; color: var(--text); transition: background .2s var(--ease), color .2s var(--ease); }
.pol__all a svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--surface); color: var(--blue); }
.pol__all a:hover { background: var(--blue-50); color: var(--blue); }
.pol__all [aria-current] a { background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff; font-weight: 600; }
.pol__all [aria-current] a svg { background: rgba(255,255,255,.15); color: #fff; }
.pol { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border: 1px solid #E4EAF2; border-radius: 24px; background: #fff; box-shadow: 0 20px 44px -36px rgba(11,37,69,.45); }
.pol__hd { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid #EDF1F6; }
.pol__i { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--blue-700)); color: #fff; box-shadow: 0 14px 28px -14px rgba(10,85,168,.7); }
.pol__i svg { width: 26px; height: 26px; }
.pol__hd h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.pol__upd { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.pol__upd svg { width: 15px; height: 15px; color: var(--green-600); }
.pol__lead { margin-top: 1.3rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--surface); font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.pol__s { padding-top: 1.8rem; scroll-margin-top: 110px; }
.pol__s h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.2rem; font-weight: 600; }
.pol__s h3 span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--blue-50); font-size: .78rem; font-weight: 700; color: var(--blue); }
.pol__s p { margin-top: .7rem; font-size: .98rem; line-height: 1.8; color: #4A5A6E; }
.pol__s ul { display: grid; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.pol__s li { display: flex; align-items: flex-start; gap: .6rem; font-size: .96rem; line-height: 1.6; color: var(--text-2); }
.pol__s li svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; padding: 4px; border-radius: 50%; background: var(--green-600); color: #fff; stroke-width: 3; }
.pol__help { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-top: 2.2rem; padding: 1.2rem 1.3rem; border: 1px solid #DCE7F5; border-radius: 18px; background: linear-gradient(135deg, #F3F7FD 0%, #EEF4FC 100%); }
.pol__help-i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: #fff; color: var(--blue); }
.pol__help-i svg { width: 21px; height: 21px; }
.pol__help-t { flex: 1 1 260px; }
.pol__help-t b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.pol__help-t span { display: block; margin-top: .15rem; font-size: .9rem; color: #5B6B7F; }
.pol__help-t a { font-weight: 600; color: var(--blue); }
.pol__help .btn { border-radius: 999px; }
/* ═════════════════════ enquiry page ═════════════════════ */
.enq__form .formcard { padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.enq__form .formcard h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.enq { display: grid; gap: 1rem; }
@media (min-width: 992px) {
.enq { position: sticky; top: 100px; }
}
.enq__dr { margin-top: 0; }
.enq__box { padding: 1.3rem 1.3rem 1.2rem; border: 1px solid #E4EAF2; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -34px rgba(11,37,69,.4); }
.enq__box h2 { font-size: 1.05rem; font-weight: 600; }
.enq__steps { position: relative; display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.enq__steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--blue-100); }
.enq__steps li { position: relative; display: flex; align-items: flex-start; gap: .8rem; }
.enq__steps li > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); font-size: .82rem; font-weight: 700; color: #fff; box-shadow: 0 0 0 4px #fff; }
.enq__steps li:last-child > span { background: var(--green-600); }
.enq__steps b { display: block; font-size: .95rem; font-weight: 600; color: var(--text); }
.enq__steps small { display: block; margin-top: .1rem; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.enq__acts { display: flex; gap: .5rem; margin-top: .9rem; }
.enq__acts .btn { flex: 1 1 0; justify-content: center; border-radius: 999px; }
.enq__hrs { display: flex; align-items: flex-start; gap: .55rem; margin-top: .75rem; padding: .6rem .8rem; border-radius: 12px; background: var(--surface); font-size: .84rem; line-height: 1.5; color: var(--text-2); }
.enq__hrs + .enq__hrs { margin-top: .5rem; }
.enq__hrs svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--green-600); }
/* enquiry — step strip, trust chips, Google rating card */
.enq__trust { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.enq__trust li { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: var(--surface); font-size: .82rem; font-weight: 500; color: var(--text-2); }
.enq__trust svg { width: 15px; height: 15px; color: var(--green-600); }
/* enquiry — previous layout, polished */
.enq__box h2 { display: flex; align-items: center; gap: .55rem; }
.enq__box h2 svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--blue-50); color: var(--blue); }
.enq__rate { display: block; margin-top: .35rem; font-style: normal; font-size: .78rem; font-weight: 600; color: #FBBC04; }
.enq__dr { padding: 1rem 1.1rem; }
.enq__steps li { padding: .2rem 0; }
.enq__box { transition: border-color .25s var(--ease); }
.enq__box:hover { border-color: #CFDDF0; }
/* date fields: the whole box opens the calendar */
input[type="date"], input[type="time"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Mobile: no auto-zoom on field focus (iOS zooms inputs under 16px) and no double-tap zoom */
html { touch-action: manipulation; }
@media (max-width: 991.98px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ═════════════════════════════════ 22 blog ══════════════════════════════ */
/*
 * Editorial and quiet: white cards, the photo on top with a navy date block
 * cut into its corner, the topic in green, a dashed footer line. The home page
 * shows the newest post large with the next ones as compact rows.
 */
.bc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #E4EAF2; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -26px rgba(11,37,69,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bc:hover { transform: translateY(-4px); border-color: #CFDDF0; box-shadow: 0 0 0 4px rgba(10,85,168,.05), 0 26px 48px -30px rgba(11,37,69,.45); }
.bc { padding: 10px; }   /* the photo sits inside the card, on a 10px frame */
.bc__pic { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--surface); }
.bc__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bc:hover .bc__pic img { transform: scale(1.05); }
.bc__date {
  position: absolute; left: 0; bottom: 0; display: grid; justify-items: center; min-width: 68px;
  padding: .55rem .7rem .5rem; border-top-right-radius: 14px; background: var(--navy);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; color: rgba(255,255,255,.8);
}
.bc__date b { font-size: 1.45rem; letter-spacing: -.02em; color: #fff; line-height: 1.05; }
.bc__date small { font-size: .66rem; color: var(--green); }
.bc__b { display: flex; flex-direction: column; flex: 1; padding: 1.1rem .6rem .35rem; }
.bc__cat {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content; margin-bottom: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700);
}
.bc__cat::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--green); }
.bc__cat:hover { color: var(--blue); }
.bc h3 { font-size: 1.12rem; line-height: 1.38; }
.bc h3 a { color: var(--text); transition: color .2s var(--ease); }
.bc h3 a:hover, .bc:hover h3 a { color: var(--blue); }
.bc p { margin-top: .55rem; font-size: var(--fs-sm); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc__ft { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; }
.bc h3 + .bc__ft { margin-top: 1rem; border-top: 1px dashed #DFE6EF; }
.bc__meta { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; color: var(--muted); }
.bc__meta svg { width: 15px; height: 15px; color: var(--blue); }
.bc__meta i { width: 4px; height: 4px; margin-inline: .2rem; border-radius: 50%; background: var(--border-2); }
.bc__go { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--blue); }
.bc__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.bc:hover .bc__go svg { transform: translateX(3px); }

/* the newest post: larger; side by side on the blog page */
.bc--lead h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.3; }
.bc--lead p { -webkit-line-clamp: 4; font-size: var(--fs-md); }
.bc--lead .bc__pic { aspect-ratio: 16 / 9; }
.bc--lead .bc__b { padding: 1.3rem .8rem .5rem; }
.bfeat { margin-bottom: 1.5rem; }
@media (min-width: 992px) {
.bfeat .bc--lead { flex-direction: row; }
.bfeat .bc--lead .bc__pic { flex: 0 0 56%; aspect-ratio: auto; min-height: 360px; }
.bfeat .bc--lead .bc__b { justify-content: center; padding: 2rem 2.4rem; }
.bfeat .bc--lead .bc__ft { margin-top: 1.4rem; }
}

/* home: compact rows beside the newest post */

.bc-stack { display: grid; gap: 1rem; align-content: start; }
.bc--mini { flex-direction: row; align-items: stretch; height: auto; }
.bc--mini .bc__pic { flex: 0 0 clamp(108px, 28%, 150px); aspect-ratio: auto; min-height: 118px; }
.bc--mini .bc__b { padding: .9rem 1rem .85rem 1.1rem; }
.bc--mini .bc__cat { margin-bottom: .35rem; font-size: .7rem; }
.bc--mini h3 { font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc--mini .bc__ft { padding-top: .6rem; }
.bc--mini .bc__meta { font-size: .78rem; }
.bc--mini .bc__go { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--blue-50); }
.bc--mini:hover .bc__go { background: var(--blue); color: #fff; }
.bc-all {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem;
  border: 1px dashed #BFD2EA; border-radius: 18px; background: var(--blue-50); color: var(--navy);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.bc-all b { display: block; font-size: .98rem; }
.bc-all small { display: block; font-size: .8rem; color: var(--muted); }
.bc-all > svg { width: 20px; height: 20px; flex: none; color: var(--blue); transition: transform .25s var(--ease); }
.bc-all:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.bc-all:hover small, .bc-all:hover > svg { color: #fff; }
.bc-all:hover > svg { transform: translateX(3px); }

/* blog page: heading, topic chips, pager, empty state */
.bbar { display: grid; gap: 1.25rem; margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
@media (min-width: 992px) {
.bbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.bbar__t h2 { margin-top: .45rem; max-width: 26ch; }
.bbar__t p { margin-top: .5rem; max-width: 60ch; color: var(--muted); }
.bchips { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 991.98px) {   /* one row that scrolls sideways */
.bchips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
.bchips::-webkit-scrollbar { display: none; }
.bchip { flex: none; }
}
@media (min-width: 992px) {
.bchips { justify-content: flex-end; max-width: 620px; }
}
.bchip {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 42px; padding: .4rem .5rem .4rem .95rem;
  border: 1px solid var(--border-2); border-radius: 12px; background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--text);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bchip span { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: .4rem; border-radius: 8px; background: var(--surface); font-size: .75rem; color: var(--muted); }
.bchip:hover { border-color: var(--blue); color: var(--blue); }
.bchip[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.bchip[aria-current] span { background: rgba(255,255,255,.18); color: #fff; }
.bpager { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2.5rem; }
.bpager__a { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .6rem; border: 1px solid var(--border-2); border-radius: 12px; background: #fff; font-weight: 600; color: var(--text); }
.bpager__a svg { width: 18px; height: 18px; }
.bpager__a:hover { border-color: var(--blue); color: var(--blue); }
.bpager__a[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }
.bempty { max-width: 640px; margin-inline: auto; padding: clamp(2rem, 1.4rem + 2vw, 3rem) 1.5rem; border: 1px dashed var(--border-2); border-radius: 20px; background: var(--surface); text-align: center; }
.bempty__i { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--blue); color: #fff; }
.bempty__i svg { width: 26px; height: 26px; }
.bempty h2 { margin-top: 1rem; font-size: 1.5rem; }
.bempty p { margin: .5rem auto 1.4rem; max-width: 46ch; color: var(--muted); }
.bempty .acts { justify-content: center; }

/* one post */
.post__hd { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-bottom: 1.1rem; }
.post__hd .bc__cat { margin: 0; }
.post__h1 { flex: 1 1 100%; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -.025em; }
.post__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; font-weight: 500; color: var(--muted); }
.post__meta li { display: inline-flex; align-items: center; gap: .4rem; }
.post__meta svg { width: 16px; height: 16px; color: var(--blue); }
.post__fig { overflow: hidden; border-radius: 18px; background: var(--surface); }
.post__fig img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.post__lead { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 4px solid var(--green); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; font-weight: 500; color: var(--text); }
.post__body { margin-top: 1.5rem; font-size: 1.02rem; line-height: 1.8; }
.post__body h2 { position: relative; margin-top: 2.2rem; padding-left: 1rem; scroll-margin-top: 110px; }
.post__body h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--blue); }
.post__body h3 { margin-top: 1.6rem; }
.post__body ul li { display: block; position: relative; padding-left: 1.85rem; }
.post__body ul li::before { position: absolute; left: 0; top: .2rem; margin-top: 0; }
.post__body ol { display: grid; gap: .55rem; counter-reset: ol; }
.post__body ol li { position: relative; padding-left: 2.2rem; counter-increment: ol; }
.post__body ol li::before {
  content: counter(ol); position: absolute; left: 0; top: .15rem; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; background: var(--blue-50); font-size: .78rem; font-weight: 700; color: var(--blue); line-height: 1;
}
.post__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-100); }
.post__body a:hover { text-decoration-color: currentColor; }
.post__body strong, .post__body b { color: var(--text); }
.post__body img { margin-block: .5rem; border-radius: 14px; }
.post__body figcaption { margin-top: .4rem; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.post__body blockquote { padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--blue-50); font-weight: 500; color: var(--navy); }
.post__body hr { border: 0; border-top: 1px dashed var(--border-2); margin-block: 2rem; }
.post__tbl { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.post__tbl table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-sm); }
.post__tbl th, .post__tbl td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.post__tbl th { background: var(--surface); color: var(--text); font-weight: 600; }
.post__tbl tr:last-child td { border-bottom: 0; }
.post__note { display: flex; gap: .7rem; margin-top: 2rem; padding: .9rem 1.1rem; border-radius: 12px; background: var(--surface); font-size: .86rem; line-height: 1.6; color: var(--muted); }
.post__note svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--green-600); }
.post__ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-block: 1.1rem; border-block: 1px solid var(--border); }
.post__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.post__tags li { padding: .3rem .7rem; border-radius: 8px; background: var(--surface); font-size: .82rem; font-weight: 500; color: var(--text-2); }
.post__share { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.post__share > span { margin-right: .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post__share a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-2); border-radius: 50%; color: var(--navy); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.post__share svg { width: 16px; height: 16px; }
.post__share .s-wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }
.post__share .s-fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.post__share .s-in:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.post__by { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-top: 1.75rem; padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--surface)); }
.post__by-pic { flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--blue-100); }
.post__by-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.post__by > div { flex: 1 1 220px; }
.post__by .label { font-size: .7rem; }
.post__by b { display: block; margin-top: .15rem; font-size: 1.08rem; color: var(--text); }
.post__by div > span:last-child { font-size: .86rem; color: var(--muted); }
.post__toc { padding: 1.2rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.post__toc h2, .post__toc summary { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; color: var(--text); }
.post__toc h2 svg, .post__toc summary svg { width: 18px; height: 18px; color: var(--blue); }
.post__toc ol { display: grid; gap: .15rem; margin-top: .75rem; }
.post__toc a { display: flex; gap: .65rem; padding: .45rem .55rem; border-radius: 9px; font-size: .9rem; font-weight: 500; line-height: 1.45; color: var(--text-2); }
.post__toc a span { flex: none; font-size: .75rem; font-weight: 700; color: var(--blue); padding-top: .12rem; }
.post__toc a:hover { background: var(--blue-50); color: var(--blue); }
.post__toc--m { display: block; margin-top: 1.5rem; }
.post__toc--m summary { cursor: pointer; list-style: none; }
.post__toc--m summary::-webkit-details-marker { display: none; }
.post__toc--m summary svg:last-child { margin-left: auto; transition: transform .2s var(--ease); }
.post__toc--m details[open] summary svg:last-child { transform: rotate(180deg); }
.post__side .post__toc { display: none; }
@media (min-width: 992px) {
.post__toc--m { display: none; }
.post__side .post__toc { display: block; }
}
.side__n { margin-left: auto; display: grid; place-items: center; min-width: 26px; height: 24px; padding-inline: .4rem; border-radius: 7px; background: var(--surface); font-size: .74rem; font-weight: 600; color: var(--muted); }

/* ══════════════════════════════ 23 certificates ═════════════════════════ */
/*
 * On the navy band, each certificate hangs in a thin frame on a white mat —
 * never cropped. The row scrolls sideways when there are more than fit.
 */
.crt__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem;
}
.crt__track::-webkit-scrollbar { display: none; }
.crt__track:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: var(--r); }
@media (min-width: 576px) { .crt__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 992px) { .crt__track { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (min-width: 1200px) { .crt__track { grid-auto-columns: calc((100% - 60px) / 4); } }
.crt__it { scroll-snap-align: start; display: flex; flex-direction: column; }
.crt__frame {
  position: relative; display: block; padding: 10px; border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.crt__mat { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,37,69,.08); overflow: hidden; }
.crt__mat img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.crt__zoom {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(7,26,51,.7);
  opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.crt__zoom svg { width: 22px; height: 22px; }
.crt__yr { position: absolute; top: 20px; right: 0; padding: .3rem .7rem .3rem .8rem; border-radius: 8px 0 0 8px; background: var(--green); font-size: .78rem; font-weight: 700; color: var(--navy-900); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); }
.crt__frame:hover, .crt__frame:focus-visible { transform: translateY(-4px); border-color: rgba(124,184,47,.6); box-shadow: 0 26px 40px -26px rgba(0,0,0,.7); }
.crt__frame:hover .crt__zoom, .crt__frame:focus-visible .crt__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.crt__frame:hover .crt__mat img { transform: scale(1.03); }
.crt__b { padding: 1rem .25rem 0; }
.crt__type { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.crt__type svg { width: 15px; height: 15px; }
.crt__b h3 { margin-top: .4rem; font-size: 1.05rem; line-height: 1.4; color: #fff; }
.crt__b p { margin-top: .3rem; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.66); }
.crt__nav { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
.sec--navy .rvs__btn { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.sec--navy .rvs__btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--navy-900); }
@media (prefers-reduced-motion: reduce) {
.bc, .bc__pic img, .crt__frame, .crt__mat img { transition: none; }
.bc:hover, .crt__frame:hover { transform: none; }
}