/* ==========================================================================
   開強紀念醫院 · 海外官網 Kaqiang Memorial Hospital — Overseas Site
   Shared design system  ·  v1
   Palette: medical navy/teal × warm white × low-saturation gold
   Reference: HKU-SZH (clean white + professional blue), Gleneagles HK
   (service-line hub + international patient pages), Mass General Brigham /
   Cleveland Clinic (large imagery + clear CTAs), European clinics (whitespace)
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root{
  /* Brand */
  --navy:#0a3d56;
  --navy-800:#0b4661;
  --brand:#0e6b8f;
  --brand-600:#12809f;
  --brand-100:#e6f1f6;
  --teal:#0f9d94;
  --teal-600:#0b8078;
  --teal-100:#e4f5f3;
  --gold:#b5892c;
  --gold-600:#96701f;
  --gold-100:#f7f0de;

  /* Neutrals */
  --ink:#0d2233;
  --ink-2:#3b5268;
  --muted:#6a7f93;
  --bg:#f8f7f5;          /* warm white */
  --surface:#ffffff;
  --surface-2:#eff4f8;
  --line:#dee7ee;
  --line-2:#cbd9e4;

  /* Shape & depth */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --shadow-xs:0 1px 2px rgba(13,34,51,.05);
  --shadow-sm:0 1px 2px rgba(13,34,51,.05), 0 3px 10px rgba(13,34,51,.045);
  --shadow:0 2px 6px rgba(13,34,51,.05), 0 14px 34px rgba(13,34,51,.075);
  --shadow-lg:0 10px 44px rgba(10,61,86,.16);

  /* Layout */
  --maxw:1200px;
  --gutter:24px;
  --header-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--teal-600)}
button{font:inherit;color:inherit}

h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.24;color:var(--navy);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.14;font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(1.55rem,2.7vw,2.15rem);letter-spacing:-.018em}
h3{font-size:1.16rem;line-height:1.4}
h4{font-size:1rem;font-weight:700;line-height:1.45}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-inline-start:1.25em}
li{margin:.3em 0}
strong{font-weight:700;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip-link:focus{inset-inline-start:0;color:#fff}

/* ---------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:880px}
.section{padding:74px 0}
.section-sm{padding:52px 0}
.section-tight{padding:44px 0}
.bg-surface{background:var(--surface)}
.bg-soft{background:var(--surface-2)}
.bg-navy{background:var(--navy);color:#dfeaf2}
.bg-navy h2,.bg-navy h3,.bg-navy h1{color:#fff}
.bg-warm{background:#fbf9f6}

.grid{display:grid;gap:26px}
.grid>*{min-width:0}/* grid children must be allowed to shrink below their content width, otherwise .table-wrap cannot scroll horizontally and the page overflows */
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:1.35fr .95fr}
.g-1-2{grid-template-columns:.85fr 1.4fr}
.gap-sm{gap:16px}
.gap-lg{gap:34px}

.section-head{max-width:760px;margin-bottom:44px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--ink-2);font-size:1.03rem;margin-bottom:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.735rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal-600);margin-bottom:12px
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.section-head.center .eyebrow::before{display:none}
.bg-navy .eyebrow{color:#7fd8d3}

.lede{font-size:1.08rem;color:var(--ink-2);line-height:1.8}

/* ---------------------------------------------------------------
   4. Buttons & pills
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:11px;border:1.5px solid transparent;
  font-weight:700;font-size:.95rem;letter-spacing:.005em;line-height:1.2;
  cursor:pointer;text-align:center;transition:all .18s var(--ease);white-space:nowrap
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 3px 12px rgba(14,107,143,.26)}
.btn-primary:hover{background:var(--navy);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,61,86,.3)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 3px 12px rgba(15,157,148,.26)}
.btn-teal:hover{background:var(--teal-600);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-600);color:#fff;transform:translateY(-2px)}
.btn-outline{border-color:var(--line-2);background:var(--surface);color:var(--navy)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}
.btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-sm{padding:10px 18px;font-size:.87rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand-100);color:var(--brand);
  border-radius:999px;padding:5px 14px;font-size:.76rem;font-weight:700;letter-spacing:.02em
}
.pill-teal{background:var(--teal-100);color:var(--teal-600)}
.pill-gold{background:var(--gold-100);color:var(--gold-600)}
.pill-line{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--brand)}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover{color:var(--teal-600)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------------------------------------------------------------
   5. Utility bar
   --------------------------------------------------------------- */
.utility{background:var(--navy);color:#c3d7e4;font-size:.79rem}
.utility .container{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:nowrap}
.utility-list{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;min-width:0;overflow:hidden}
.utility-list li{display:flex;align-items:center;gap:7px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.utility-list a{color:#c3d7e4;font-weight:600}
.utility-list a:hover{color:#fff}
.utility svg{width:14px;height:14px;opacity:.85;flex:0 0 auto}

/* Language switcher — never shrink, never wrap, pinned to the inline end so
   its right edge lines up with the page container's right edge above and
   below it (the header CTA row and the content grid). */
.lang{position:relative;flex:0 0 auto;margin-inline-start:auto}
.lang-btn{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:.78rem;
  padding:5px 11px;border-radius:8px;cursor:pointer;transition:background .18s;
  white-space:nowrap;line-height:1.35
}
.lang-btn:hover{background:rgba(255,255,255,.2)}
.lang-btn svg{width:12px;height:12px;transition:transform .2s}
.lang[data-open="true"] .lang-btn svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:7px;list-style:none;margin:0;z-index:120;
  display:none;max-width:calc(100vw - 40px)
}
.lang[data-open="true"] .lang-menu{display:block}
.lang-menu li{margin:0}
.lang-menu a,.lang-menu span{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:9px;color:var(--ink);font-size:.87rem;font-weight:600;
  white-space:nowrap
}
/* Arabic runs RTL inside an LTR row; without this the label and its badge
   swap sides and the row no longer lines up with the rows above it. */
.lang-menu [dir="rtl"]{unicode-bidi:isolate}
.lang-menu .tag-soon,.lang-menu em{flex:0 0 auto;font-style:normal;white-space:nowrap}
.lang-menu a:hover{background:var(--surface-2);color:var(--brand)}
.lang-menu span{color:var(--muted);cursor:not-allowed}
.lang-menu .tag-soon{font-size:.66rem;font-weight:700;color:var(--gold-600);background:var(--gold-100);padding:2px 7px;border-radius:5px}
.lang-menu .is-current{color:var(--teal-600);font-weight:800;background:var(--teal-100)}

/* ---------------------------------------------------------------
   6. Header / navigation
   --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header.is-stuck{box-shadow:0 4px 24px rgba(13,34,51,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand-mark{
  width:44px;height:44px;border-radius:12px;background:var(--navy);
  display:grid;place-items:center;flex:0 0 auto
}
.brand-mark svg{width:24px;height:24px}
.brand-text{display:flex;flex-direction:column;line-height:1.18}
.brand-name{font-size:1.01rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.brand-sub{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:9px 13px;border-radius:9px;color:var(--ink-2);
  font-size:.9rem;font-weight:700;transition:all .17s var(--ease);white-space:nowrap
}
.nav a:hover{color:var(--brand);background:var(--brand-100)}
.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-100)}
.header-cta{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.nav-toggle{
  display:none;width:46px;height:46px;border-radius:11px;border:1px solid var(--line-2);
  background:#fff;cursor:pointer;align-items:center;justify-content:center
}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--navy);border-radius:2px;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

.nav-mobile-extra{display:none}
/* Buttons inside the mobile menu must keep their white label: `.nav a`
   (0,1,1) outranks `.btn-primary` (0,1,0) and was painting the label in
   --ink-2, i.e. near-invisible dark text on the dark button fill. */
.nav-mobile-extra .btn{color:#fff}

/* The open menu lives inside .site-header, which is its own stacking context
   (position:sticky + z-index:100). A backdrop above 100 therefore painted
   OVER the menu. Keep the backdrop just below the header instead, but above
   .sticky-cta (z-index:95, same layer but later in the DOM). */
.nav-backdrop{position:fixed;inset:0;background:rgba(10,28,42,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:96}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,38,55,.94) 0%,rgba(9,48,68,.86) 38%,rgba(10,61,86,.6) 66%,rgba(10,61,86,.34) 100%)
}
.hero-inner{padding:88px 0 78px;max-width:730px}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:#8fe0da}
.hero .lede{color:#d3e3ee;font-size:1.11rem;max-width:620px;margin-bottom:14px}
.hero-points{list-style:none;padding:0;margin:22px 0 30px;display:flex;flex-wrap:wrap;gap:10px 22px}
.hero-points li{display:flex;align-items:center;gap:9px;font-size:.91rem;color:#dceaf3;margin:0;font-weight:600}
.hero-points svg{width:17px;height:17px;flex:0 0 auto;color:#8fe0da}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-strip{display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hero-strip div{font-size:.83rem;color:#bed4e2;font-weight:600}
.hero-strip b{display:block;font-size:1.5rem;color:#fff;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 16px;
  font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#d9ecf5;margin-bottom:24px
}
.hero-kicker i{width:7px;height:7px;border-radius:50%;background:#8fe0da;flex:0 0 auto}

/* Page hero (sub-pages) */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.page-hero .hero-media img{object-position:center 45%}
.page-hero .hero-scrim{background:linear-gradient(100deg,rgba(8,38,55,.95) 0%,rgba(9,48,68,.88) 45%,rgba(10,61,86,.68) 100%)}
.page-hero .hero-inner{padding:60px 0 54px;max-width:800px}
.page-hero h1{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.page-hero .lede{color:#d3e3ee;font-size:1.04rem;margin-bottom:0}

/* Breadcrumb */
.crumbs{font-size:.82rem;padding:16px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted)}
.crumbs li::after{content:"›";color:var(--line-2);font-weight:700}
.crumbs li:last-child::after{display:none}
.crumbs a{color:var(--ink-2);font-weight:600}
.crumbs a:hover{color:var(--brand)}
.crumbs [aria-current]{color:var(--brand);font-weight:700}

/* ---------------------------------------------------------------
   8. Trust badge marquee
   --------------------------------------------------------------- */
.trust{background:var(--surface);border-bottom:1px solid var(--line);padding:26px 0}
.trust-label{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.trust-badge{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 17px
}
.trust-badge svg{width:21px;height:21px;color:var(--brand);flex:0 0 auto}
.trust-badge b{display:block;font-size:.83rem;color:var(--navy);font-weight:700;line-height:1.3}
.trust-badge span{font-size:.72rem;color:var(--muted);line-height:1.3;display:block}

/* ---------------------------------------------------------------
   9. Cards
   --------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-xs);transition:box-shadow .24s var(--ease),transform .24s var(--ease),border-color .24s
}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.94rem;margin-bottom:0}
.card-icon{
  width:50px;height:50px;border-radius:13px;background:var(--brand-100);
  display:grid;place-items:center;margin-bottom:18px
}
.card-icon svg{width:25px;height:25px;color:var(--brand)}
.card-icon.teal{background:var(--teal-100)}
.card-icon.teal svg{color:var(--teal-600)}
.card-icon.gold{background:var(--gold-100)}
.card-icon.gold svg{color:var(--gold-600)}

.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--line-2)}

/* Service card (with photo) */
.service-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs);
  transition:box-shadow .24s var(--ease),transform .24s var(--ease)
}
.service-card:hover{box-shadow:var(--shadow);transform:translateY(-5px)}
.service-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.service-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.service-card:hover .thumb img{transform:scale(1.05)}
.service-card .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.service-card h3{font-size:1.09rem;margin-bottom:9px}
.service-card p{color:var(--ink-2);font-size:.92rem;flex:1;margin-bottom:16px}

/* Specialty card */
.spec-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-xs);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s
}
.spec-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--brand-100)}
.spec-card .card-icon{width:46px;height:46px;border-radius:12px;margin-bottom:15px}
.spec-card .card-icon svg{width:23px;height:23px}
.spec-card h3{font-size:1.02rem;margin-bottom:7px}
.spec-card p{font-size:.89rem;color:var(--ink-2);margin-bottom:14px;flex:1}
.spec-card .spec-meta{font-size:.78rem;color:var(--muted);font-weight:600;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;gap:10px}

/* Feature (why us) */
.feature{display:flex;gap:18px;align-items:flex-start}
.feature .card-icon{flex:0 0 auto;margin-bottom:0}
.feature h3{font-size:1.03rem;margin-bottom:6px}
.feature p{font-size:.92rem;color:var(--ink-2);margin-bottom:0}

/* Guide entry cards */
.guide-card{
  display:block;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-xs);
  transition:all .22s var(--ease);color:var(--ink)
}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand);color:var(--ink)}
.guide-card svg{width:26px;height:26px;color:var(--teal);margin-bottom:14px}
.guide-card h3{font-size:1rem;margin-bottom:7px;color:var(--navy)}
.guide-card p{font-size:.88rem;color:var(--ink-2);margin-bottom:0}

/* Doctor card */
.doc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
  transition:box-shadow .24s var(--ease),transform .24s var(--ease)
}
.doc-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.doc-photo{aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.doc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.doc-body h3{font-size:1.06rem;margin-bottom:4px}
.doc-role{font-size:.83rem;font-weight:700;color:var(--teal-600);margin-bottom:11px;display:block}
.doc-title{
  display:inline-block;background:var(--brand-100);color:var(--brand);font-size:.72rem;
  font-weight:700;border-radius:6px;padding:3px 9px;margin-bottom:12px
}
.doc-desc{font-size:.87rem;color:var(--ink-2);flex:1;margin-bottom:14px}
.doc-meta{font-size:.79rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:5px}
.doc-meta span{display:flex;align-items:center;gap:7px}
.doc-meta svg{width:13px;height:13px;flex:0 0 auto;color:var(--brand)}

/* Story / testimonial */
.story{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow-xs);position:relative;display:flex;flex-direction:column
}
.story::before{content:"“";position:absolute;top:14px;inset-inline-end:26px;font-size:4.2rem;line-height:1;color:var(--brand-100);font-family:Georgia,serif;font-weight:700}
.story blockquote{margin:0 0 18px;font-size:1rem;color:var(--ink-2);line-height:1.8;position:relative;z-index:1;flex:1}
.story figcaption{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
.story .avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--surface-2)}
.story .avatar img{width:100%;height:100%;object-fit:cover}
.story cite{font-style:normal;font-weight:700;color:var(--navy);font-size:.92rem;display:block;line-height:1.35}
.story small{color:var(--muted);font-size:.79rem}

/* ---------------------------------------------------------------
   10. Process / timeline
   --------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;top:26px;inset-inline:6%;height:2px;background:var(--line);z-index:0}
.step{position:relative;z-index:1;text-align:center;padding-top:0}
.step-num{
  width:54px;height:54px;border-radius:50%;background:var(--surface);border:2px solid var(--brand);
  color:var(--brand);font-weight:800;font-size:1.05rem;display:grid;place-items:center;margin:0 auto 16px
}
.step:nth-child(5) .step-num,.step.is-done .step-num{background:var(--brand);color:#fff}
.step h3{font-size:.97rem;margin-bottom:7px}
.step p{font-size:.86rem;color:var(--ink-2);margin-bottom:0}

/* Vertical timeline (plan-your-visit / about history) */
.timeline{position:relative;padding-inline-start:36px;list-style:none;margin:0;padding-block:0}
.timeline::before{content:"";position:absolute;inset-inline-start:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;margin-bottom:30px}
.timeline li:last-child{margin-bottom:0}
.timeline li::before{
  content:"";position:absolute;inset-inline-start:-36px;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:3px solid var(--teal)
}
.timeline time{display:block;font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--gold-600);text-transform:uppercase;margin-bottom:4px}
.timeline h3{font-size:1rem;margin-bottom:5px}
.timeline p{font-size:.9rem;color:var(--ink-2);margin-bottom:0}

/* ---------------------------------------------------------------
   11. Stats band
   --------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--navy);padding:34px 26px;text-align:center}
.stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.025em}
.stat b sup{font-size:.55em;color:#8fe0da;margin-inline-start:2px}
.stat span{display:block;font-size:.85rem;color:#a9c5d8;margin-top:8px;line-height:1.5}

/* ---------------------------------------------------------------
   12. CTA band
   --------------------------------------------------------------- */
.cta-band{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta-band::after{content:"";position:absolute;inset-inline-end:-90px;top:-90px;width:420px;height:420px;border-radius:50%;background:rgba(15,157,148,.16);z-index:-1}
.cta-band .inner{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:center;padding:62px 0}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:#bdd3e2;margin-bottom:0;font-size:1rem}
.cta-contacts{display:flex;flex-direction:column;gap:12px}
.cta-contact{
  display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:14px 18px;color:#fff
}
.cta-contact:hover{background:rgba(255,255,255,.18);color:#fff}
.cta-contact svg{width:21px;height:21px;color:#8fe0da;flex:0 0 auto}
.cta-contact b{display:block;font-size:.93rem}
.cta-contact small{font-size:.76rem;color:#a9c5d8}

/* ---------------------------------------------------------------
   13. Forms
   --------------------------------------------------------------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:700;color:var(--navy)}
.field label .req{color:#c0392b;margin-inline-start:3px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;
  background:#fff;font-size:.93rem;font-family:inherit;color:var(--ink);transition:border-color .17s,box-shadow .17s
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,107,143,.14)}
.field .hint{font-size:.77rem;color:var(--muted)}
.field input[type="file"]{padding:10px;font-size:.85rem;background:var(--bg)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--ink-2);line-height:1.6}
.check input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--brand)}
.form-note{background:var(--brand-100);border-inline-start:3px solid var(--brand);border-radius:0 10px 10px 0;padding:13px 16px;font-size:.82rem;color:var(--ink-2);margin-top:6px}
.form-status{border-radius:10px;padding:14px 16px;font-size:.88rem;font-weight:600;margin-top:16px;display:none}
.form-status.is-ok{display:block;background:#e6f6f1;border:1px solid #b6e3d7;color:#106b52}
.form-status.is-err{display:block;background:#fdecea;border:1px solid #f5c6c0;color:#a3352a}
.range-wrap{display:flex;flex-direction:column;gap:6px}
input[type="range"]{width:100%;accent-color:var(--brand)}
.range-out{font-size:.83rem;font-weight:700;color:var(--brand)}

/* ---------------------------------------------------------------
   14. Accordion / FAQ
   --------------------------------------------------------------- */
.accordion{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:0}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;padding:19px 22px;cursor:pointer;text-align:start;
  font-size:.97rem;font-weight:700;color:var(--navy);transition:background .17s
}
.acc-btn:hover{background:var(--bg)}
.acc-btn::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--brand);flex:0 0 auto;transition:transform .22s var(--ease)}
.acc-btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc-panel-inner{padding:0 22px 21px;font-size:.91rem;color:var(--ink-2);line-height:1.8}
.acc-panel-inner p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------
   15. Tables
   --------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.data caption{text-align:start;padding:16px 20px 0;font-size:.83rem;color:var(--muted);font-weight:600}
table.data th,table.data td{padding:14px 20px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:var(--surface-2);color:var(--navy);font-weight:700;font-size:.85rem;white-space:nowrap}
table.data tbody tr:last-child th,table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#fbfcfd}
table.data td strong{color:var(--navy)}
.price{font-weight:700;color:var(--brand);white-space:nowrap}

/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */
.site-footer{background:#08293a;color:#9fb9cb;font-size:.89rem;padding:64px 0 0}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:44px;padding-bottom:48px}
.footer-brand .brand-mark{background:rgba(255,255,255,.1)}
.footer-brand p{font-size:.87rem;color:#9fb9cb;margin:18px 0 0;max-width:330px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0 0 11px}
.footer-links a{color:#9fb9cb;font-size:.87rem}
.footer-links a:hover{color:#fff}
.footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;margin:0}
.footer-contact svg{width:16px;height:16px;color:#5fbfb8;flex:0 0 auto;margin-top:4px}
.footer-contact a{color:#dfeaf2}
.footer-contact a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:18px;font-size:.8rem
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.footer-legal a{color:#9fb9cb}
.footer-legal a:hover{color:#fff}
.disclaimer{margin:0 0 18px;font-size:.79rem;color:#7d99ad;line-height:1.7;max-width:1080px}

/* ---------------------------------------------------------------
   17. Sticky mobile action bar
   --------------------------------------------------------------- */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:95;display:none;
  background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;
  box-shadow:0 -4px 22px rgba(13,34,51,.1)
}
.sticky-cta .btn{flex:1;padding:13px 14px;font-size:.87rem}

.to-top{
  position:fixed;inset-inline-end:22px;bottom:26px;z-index:90;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s
}
.to-top.is-visible{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--brand);transform:translateY(-3px)}
.to-top svg{width:19px;height:19px}

/* ---------------------------------------------------------------
   18. Misc components
   --------------------------------------------------------------- */
.notice{
  display:flex;gap:14px;background:var(--gold-100);border:1px solid #ecdcb8;
  border-radius:var(--r);padding:18px 20px;font-size:.87rem;color:#6b5316;line-height:1.72
}
.notice svg{width:20px;height:20px;color:var(--gold-600);flex:0 0 auto;margin-top:3px}
.notice.info{background:var(--brand-100);border-color:#c6e0eb;color:#17475e}
.notice.info svg{color:var(--brand)}
.notice.teal{background:var(--teal-100);border-color:#bfe6e1;color:#0a5f59}
.notice.teal svg{color:var(--teal-600)}
.notice strong{color:inherit}

.split-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--surface-2)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media.tall{aspect-ratio:3/4}

.media-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.media-duo .split-media{aspect-ratio:1/1}

.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--ink-2);margin:0}
.checklist svg{width:19px;height:19px;color:var(--teal);flex:0 0 auto;margin-top:4px}

.icon-row{display:flex;flex-wrap:wrap;gap:10px}
.icon-chip{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--ink-2)
}
.icon-chip svg{width:16px;height:16px;color:var(--brand)}

.mini-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mini-list li{display:flex;gap:10px;font-size:.89rem;color:var(--ink-2);margin:0}
.mini-list b{color:var(--navy);flex:0 0 auto;min-width:88px}

.filter-bar{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow-xs)}
.filter-group{display:flex;flex-direction:column;gap:7px;min-width:186px}
.filter-group label{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filter-group select{padding:11px 13px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font-size:.9rem;font-family:inherit;color:var(--ink)}
.filter-group select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,107,143,.14)}
.filter-count{font-size:.85rem;color:var(--muted);font-weight:600;margin-inline-start:auto;padding-bottom:11px}
.is-hidden{display:none !important}

/* Info list — 院區資訊 / Getting here.
   These classes had no rules at all, so the inline SVGs fell back to the
   browser default replaced-element size (300x150, measured 422x422 here). */
.info-list{display:grid;gap:18px}
.info-item{display:flex;gap:14px;align-items:flex-start}
.ii-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--brand-100);
  display:grid;place-items:center;color:var(--brand)
}
.ii-icon svg{width:20px;height:20px}
.info-item>span:last-child{font-size:.92rem;color:var(--ink-2);line-height:1.6}
.info-item b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:3px}
.info-item small{display:block;color:var(--muted);font-size:.83rem;margin-top:3px}

.map-pin-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.map-pin{
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:.83rem;font-weight:600;color:var(--ink-2)
}
.map-pin svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
.muted-sm{font-size:.83rem;color:var(--muted);line-height:1.6}

.map-embed{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-xs)}
.map-embed.tall .map-fallback{min-height:340px;display:flex;flex-direction:column;justify-content:center}
.map-embed iframe{width:100%;height:380px;border:0;display:block}
.map-fallback{padding:26px;font-size:.9rem;color:var(--ink-2)}

.qr-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.qr-box svg{width:132px;height:132px;margin:0 auto 12px}
.qr-box p{font-size:.82rem;color:var(--muted);margin:0}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
@media (scripting:none){.reveal{opacity:1;transform:none}}

/* ---------------------------------------------------------------
   19. Responsive
   --------------------------------------------------------------- */
@media (max-width:1080px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn-outline{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  /* backdrop-filter on the header creates a containing block for the
     position:fixed mobile menu, which collapsed it to the header's height.
     Dropping it at mobile width lets .nav.open resolve against the viewport. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:fixed;top:var(--header-h);inset-inline:0;bottom:0;z-index:110;
    max-height:calc(100dvh - var(--header-h));max-height:calc(100vh - var(--header-h));
    background:#fff;padding:18px 20px 40px;overflow-y:auto;
    box-shadow:0 18px 40px rgba(13,34,51,.14);border-top:1px solid var(--line)
  }
  .nav.open a{padding:15px 16px;font-size:1rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav.open::after{
    content:"";display:block;
  }
  .nav.open .nav-mobile-extra{display:flex;flex-direction:column;gap:10px;margin-top:22px}
}

/* English pages: the primary CTA reads "Enquire" (longer than the Chinese
   equivalent) and the brand name is longer too, which pushed the hamburger
   toggle ~24px outside a 375px viewport. Tighten only the en scope. */
@media (max-width:680px){
  html[lang="en"] .header-inner{gap:8px}
  html[lang="en"] .header-cta{gap:6px}
  html[lang="en"] .header-cta .btn-primary{padding:10px 10px;font-size:.8rem}
  /* "Kaqiang Memorial Hospital" is far longer than the Chinese brand name;
     let it stack on two lines rather than push the toggle off-screen. */
  html[lang="en"] .brand-text{min-width:0}
  html[lang="en"] .brand-name{font-size:.78rem;white-space:normal;line-height:1.16;max-width:150px}
  /* Utility bar on phones: keep the info list and the switcher on ONE row in
     both locales. Ellipsising the info line cut the phone number in half
     ("+86 20 8307"), so instead drop the three decorative icons and let the
     text wrap to a second tight line — the bar stays 40px and the number
     always reads in full. */
  .utility{font-size:.76rem}
  .utility .container{gap:10px}
  .utility-list{gap:10px;overflow:visible}
  .utility-list li{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  /* Never break INSIDE the phone number: the English label wraps naturally
     before "+86 …" but the number itself must stay on one line. */
  .utility-list a[href^="tel:"]{white-space:nowrap}
  .utility svg{display:none}
}

/* Desktop / tablet header: the English nav labels are much longer than the
   Chinese ones, so between 1080px and 1440px the brand + six nav links + two
   CTAs did not fit the 1200px container and the "Enquire" button was pushed
   past the right edge (measured 15px of document overflow at 1440px, up to
   237px at 1120px — i.e. a page-wide horizontal scrollbar and a clipped CTA).
   Give the nav room to shrink and tighten the paddings just enough that every
   width from 1080px up fits inside the grid. */
@media (min-width:1080px){
  /* column-gap (never `gap`) so the row gap stays 0 and the header keeps its
     natural 76px height — see the vertical-alignment note further down. */
  .header-inner{flex-wrap:nowrap;column-gap:14px}
  .site-header .brand{flex:0 0 auto;min-width:0}
  .site-header .brand-text{min-width:0}
  .site-header .brand-name{white-space:nowrap}
  /* THE "About Us is crammed against Call" BUG
     ------------------------------------------
     Root cause: the nav was the ONLY shrinkable flex item (.brand and
     .header-cta are flex:0 0 auto), so it silently absorbed ALL flex
     negotiation with no floor. Measured on the English header at 1280-1600px:
     the nav box was 697.3px while its six nowrap links needed 705px, so the
     links spilled 37.7px PAST the nav box and straight over the gap in front
     of "Call" — the last label sat only ~1px from that button (the Chinese
     header, shorter labels, showed a comfortable 62px there).
     Fix: the nav NEVER shrinks and never grows either (flex:0 0 auto) — it
     always keeps its true content width, so "About Us" is separated from
     "Call" by the container's own space-between slack (~40px at 1280px),
     which cannot be squeezed by flex. The density ladder below guarantees
     enough room for that, at sizes a visitor can actually read: 0.8rem
     (12.8px) minimum on the nav, with no item padding below 8px. */
  .nav{flex:0 0 auto;min-width:0;flex-wrap:nowrap;column-gap:6px}
  .header-cta{flex:0 0 auto;flex-wrap:nowrap;column-gap:8px}
  .header-cta .btn{padding:10px 13px;font-size:.83rem}
}
/* Nav density ladder. Each tier must fit brand + nav content + CTAs inside the
   1200px container with room to spare; measured need at the English header is
   ~1050px at these sizes, so every tier keeps 100px+ of slack. */
@media (min-width:1080px) and (max-width:1229px){
  .site-header .brand{gap:8px}
  .site-header .brand-mark{width:38px;height:38px;border-radius:10px}
  .nav a{padding:9px 8px;font-size:.8rem}
  html[lang="en"] .site-header .brand-name{font-size:.8rem}
  html[lang="en"] .site-header .brand-sub{display:none}
}
@media (min-width:1230px){
  .nav a{padding:9px 10px;font-size:.85rem}
  .header-cta .btn{padding:10px 14px;font-size:.84rem}
  html[lang="en"] .site-header .brand-name{font-size:.95rem}
  html[lang="en"] .site-header .brand-sub{font-size:.62rem;letter-spacing:.05em}
}

/* English utility bar clipping: the three English info strings are ~53px wider
   than the Chinese ones, so between 1080px and 1179px the address was cut off
   mid-sentence ("No. 1161 Xingang East Road, Haizhu District, " + ellipsis;
   measured up to 40px of hidden text at 1080px). Shrink the bar text slightly
   in that band only, so all three items fit on one line untruncated. */
@media (min-width:1080px) and (max-width:1179px){
  html[lang="en"] .utility{font-size:.73rem}
  html[lang="en"] .utility .container{gap:12px}
  html[lang="en"] .utility-list{gap:12px}
}

@media (max-width:900px){
  :root{--gutter:20px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-2,.g-2-1,.g-1-2{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta-band .inner{grid-template-columns:1fr;gap:30px;padding:52px 0}
  .hero-inner{padding:64px 0 58px}
}

@media (max-width:680px){
  body{font-size:16px}
  /* Header must fit small phones: shrink brand, drop the English sub-line,
     tighten gaps so the hamburger toggle stays inside the viewport. */
  .header-inner{gap:12px}
  .brand{gap:9px;min-width:0}
  .brand-mark{width:38px;height:38px;border-radius:10px}
  .brand-mark svg{width:20px;height:20px}
  .brand-text{min-width:0}
  .brand-name{font-size:.9rem;white-space:nowrap}
  .brand-sub{display:none}
  .header-cta{gap:8px}
  .header-cta .btn-primary{padding:10px 13px;font-size:.82rem}
  .section{padding:52px 0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .card{padding:24px 22px}
  .g-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps .step{text-align:start;display:flex;gap:18px;align-items:flex-start}
  .steps .step-num{margin:0;flex:0 0 auto}
  .stats{grid-template-columns:1fr;border-radius:var(--r)}
  .stat{padding:26px 22px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .utility-list li:nth-child(2),.utility-list li:nth-child(3){display:none}
  .sticky-cta{display:flex}
  body{padding-bottom:76px}
  .to-top{bottom:92px}
  .hero-strip{gap:14px 22px}
  .hero-strip b{font-size:1.25rem}
  .media-duo{grid-template-columns:1fr}
  .filter-bar{padding:20px;gap:16px}
  .filter-group{min-width:100%}
  .filter-count{margin-inline-start:0}
  .section-head{margin-bottom:32px}
}

/* ---------------------------------------------------------------
   20. RTL readiness (Arabic locale)
   --------------------------------------------------------------- */
[dir="rtl"] body{font-family:'Noto Sans Arabic','Noto Sans TC',system-ui,sans-serif}
[dir="rtl"] .timeline{padding-inline-start:0;padding-inline-end:36px}
[dir="rtl"] .timeline::before{inset-inline-start:auto;inset-inline-end:9px}
[dir="rtl"] .timeline li::before{inset-inline-start:auto;inset-inline-end:-36px}
[dir="rtl"] .link-arrow::after{content:"←"}
[dir="rtl"] .crumbs li::after{content:"‹"}
[dir="rtl"] .hero-scrim{background:linear-gradient(260deg,rgba(8,38,55,.94) 0%,rgba(9,48,68,.86) 38%,rgba(10,61,86,.6) 66%,rgba(10,61,86,.34) 100%)}
[dir="rtl"] .form-note{border-inline-start:3px solid var(--brand);border-inline-end:0;border-radius:10px 0 0 10px}
[dir="rtl"] .cta-band::after{inset-inline-end:auto;inset-inline-start:-90px}

/* Very narrow phones (~320-369px, e.g. iPhone SE 1st gen). The English brand
   plus "Enquire" still exceeded the viewport by 41px at 320px, pushing the
   hamburger toggle off-screen. Step the type down one more notch and let the
   brand name wrap here. */
@media (max-width:369px){
  html[lang="en"] .header-inner{gap:6px}
  html[lang="en"] .brand{gap:6px}
  html[lang="en"] .brand-mark{width:32px;height:32px;border-radius:9px}
  html[lang="en"] .brand-mark svg{width:17px;height:17px}
  html[lang="en"] .brand-name{font-size:.7rem;white-space:normal;line-height:1.15;max-width:104px}
  html[lang="en"] .header-cta{gap:5px}
  html[lang="en"] .header-cta .btn-primary{padding:9px 8px;font-size:.74rem}
  html[lang="en"] .nav-toggle{width:40px;height:40px;border-radius:10px}
}

/* ---------------------------------------------------------------
   21. Print
   --------------------------------------------------------------- */
@media print{
  .utility,.site-header,.sticky-cta,.to-top,.cta-band,.site-footer{display:none !important}
  body{background:#fff;font-size:12pt}
  .card,.service-card,.doc-card{box-shadow:none;border:1px solid #ccc}
}