/* ============================== TOKENS ============================== */
:root{
  --ink:#0E2A3F;
  --ink-2:#3A4E5C;
  --ink-3:#6B7C87;
  --paper:#FFFFFF;
  --ground:#F2F1ED;
  --ground-2:#E7E9E4;
  --line:#D9D9D2;
  --line-soft:#E8E8E2;
  --accent:#2E78E8;
  --accent-soft:#E7F0FD;
  --accent-ink:#1F5FD8;
  --on-accent:#FFFFFF;
  --us:#9AA5AC;
  --todo-bg:#FFF4D6; --todo-ink:#7A5200; --todo-line:#E3B341;
  --shadow:0 1px 2px rgba(14,42,63,.05), 0 8px 24px -12px rgba(14,42,63,.18);

  --f-display:"Libre Franklin","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-body:"Source Serif 4",Georgia,"Songti SC","SimSun",serif;
  --f-ui:"Libre Franklin","Helvetica Neue",Arial,"PingFang SC",sans-serif;

  --maxw:1180px;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.4 -1.5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --gut:clamp(16px,5vw,64px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDEFEA; --ink-2:#BFC8CC; --ink-3:#8A979E;
    --paper:#0F1719; --ground:#161F22; --ground-2:#1E2A2D;
    --line:#2B3639; --line-soft:#232E31;
    --accent:#7DB6FF; --accent-soft:#15253D; --accent-ink:#A9CFFF; --on-accent:#0A1A33;
    --us:#55636A;
    --todo-bg:#3A2E10; --todo-ink:#F2D58A; --todo-line:#8A6A1E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#EDEFEA; --ink-2:#BFC8CC; --ink-3:#8A979E;
  --paper:#0F1719; --ground:#161F22; --ground-2:#1E2A2D;
  --line:#2B3639; --line-soft:#232E31;
  --accent:#7DB6FF; --accent-soft:#15253D; --accent-ink:#A9CFFF; --on-accent:#0A1A33;
  --us:#55636A;
  --todo-bg:#3A2E10; --todo-ink:#F2D58A; --todo-line:#8A6A1E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ============================== BASE ============================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--f-body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.015em}
p{margin:0}
img{max-width:100%; display:block}
a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 40%, transparent)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.shell{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
[id]{scroll-margin-top:80px}

.eyebrow{
  font-family:var(--f-ui); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
}
.eyebrow.muted{color:var(--ink-3)}

/* ============================== NAV ============================== */
header{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line-soft)}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:9px; border:0; color:inherit}
.brand img{width:36px; height:36px; flex:none}
.brand .bw{display:flex; align-items:baseline; font-family:"Urbanist",var(--f-ui)}
.brand .bn{font-size:34px; font-weight:600; letter-spacing:-.01em; line-height:1; padding-top:.12em;
  background-image:var(--noise),linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.45) 100%),
    linear-gradient(100deg,#1F5FD8 0%,#2E78E8 35%,#13809F 62%,#5163DE 100%);
  background-size:110px 110px,100% 100%,100% 100%; -webkit-background-clip:text; background-clip:text; color:transparent}
.brand .bs{font-size:13px; font-weight:500; letter-spacing:.01em; color:#5A7392; margin-left:.7em; white-space:nowrap}
.brand .i{position:relative}
.brand .i::after{content:""; position:absolute; left:50%; top:.2em; width:.175em; height:.175em; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 33% 31%,rgba(255,255,255,.95) 0 13%,rgba(255,255,255,0) 14%),
    radial-gradient(circle at 34% 30%,rgba(0,0,0,0) 0 64%,var(--sh) 65%),linear-gradient(160deg,var(--c1) 0%,var(--c2) 100%)}
.brand .i1{--c1:#8CC2FF; --c2:#2E78E8; --sh:rgba(22,60,160,.42)}
.brand .i2{--c1:#8FDCE8; --c2:#1E9BBE; --sh:rgba(10,80,105,.42)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand .bn{background-image:var(--noise),
    linear-gradient(180deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.45) 100%),linear-gradient(100deg,#7DB6FF 0%,#8CC2FF 35%,#6FCFE0 62%,#A3ADFF 100%)}
  :root:not([data-theme="light"]) .brand .bs{color:#8FA9C8}
  :root:not([data-theme="light"]) .brand .i1{--c1:#CFE6FF; --c2:#7DB6FF; --sh:rgba(40,90,190,.45)}
  :root:not([data-theme="light"]) .brand .i2{--c1:#CFF3F8; --c2:#6FCFE0; --sh:rgba(20,110,140,.45)} }
.navlinks{display:flex; gap:4px; font-family:var(--f-ui); align-items:center}
.navlinks a{
  font-size:14px; font-weight:600; border:0; color:var(--ink-3);
  padding:8px 14px; border-radius:999px;
}
.navlinks a:hover{color:var(--ink)}
.navlinks a{white-space:nowrap}
@media (max-width:900px){ .navlinks > a:nth-child(2), .navlinks > a:nth-child(3){display:none} }
.navlinks a.pill{background:var(--accent); color:var(--on-accent)}
.navlinks a.pill:hover{background:var(--accent-ink)}

/* ============================== PHOTO PLACEHOLDER ============================== */
.ph{
  position:relative; width:100%; background:var(--ground-2);
  border:1px dashed color-mix(in srgb,var(--ink-3) 55%, transparent);
  border-radius:6px; display:grid; place-items:center; text-align:center;
  padding:18px; overflow:hidden; aspect-ratio:16/9;
}
.ph .tag{
  position:absolute; top:10px; left:10px;
  font-family:var(--f-ui); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  background:var(--ink); color:var(--paper); padding:3px 7px; border-radius:3px;
}
.ph .what{
  font-family:var(--f-ui); font-size:13.5px; font-weight:600; color:var(--ink-2);
  line-height:1.55; max-width:36ch;
}
.ph .size{display:block; font-weight:500; font-size:12px; color:var(--ink-3); margin-top:6px}
.ph.tall{aspect-ratio:4/3}
.ph.sq{aspect-ratio:1/1}
.ph.hero{aspect-ratio:21/9}
.ph-img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; display:block; background:var(--ground-2)}
.ph-img.tall{aspect-ratio:4/3}
.ph-img.hero{aspect-ratio:21/9; padding:0}
.card .ph-img{border-radius:0}

/* ============================== TODO (data still to be filled) ============================== */
.todo{
  display:inline-block; font-family:var(--f-ui); font-size:13px; font-weight:600;
  background:var(--todo-bg); color:var(--todo-ink); border:1px dashed var(--todo-line);
  padding:2px 8px; border-radius:4px; line-height:1.5;
}

/* ============================== HERO ============================== */
.hero{padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,52px)}
.hero .rule{width:56px; height:4px; background:var(--accent); margin-bottom:24px}
.hero h1{font-size:clamp(36px,5.8vw,64px); line-height:1.06; font-weight:700; max-width:17ch; margin-bottom:24px}
.hero .lede{font-size:clamp(19px,2.2vw,23px); line-height:1.6; max-width:60ch}
.hero .lede strong{color:var(--ink); font-weight:600}
.heroctas{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:30px; font-family:var(--f-ui)}
.btn{
  display:inline-block; background:var(--accent); color:var(--on-accent); border:0;
  font-family:var(--f-ui); font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:999px;
}
.btn:hover{background:var(--accent-ink); color:var(--on-accent)}
.btn.ghost{background:transparent; color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.heronote{font-size:14px; color:var(--ink-3)}
.herophoto{margin-top:clamp(32px,4vw,52px)}

/* ============================== SECTIONS ============================== */
section{padding:clamp(48px,6vw,84px) 0}
section.band{background:var(--ground); border-block:1px solid var(--line-soft)}
.sechead{margin-bottom:clamp(26px,3.4vw,42px); max-width:70ch}
.sechead h2{font-size:clamp(26px,3.4vw,38px); line-height:1.18; margin:12px 0 14px}
.sechead p{font-size:17px; color:var(--ink-2); max-width:62ch}

/* ---------- condition overview grid ---------- */
.big5{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.8vw,22px)}
.big5 .card{grid-column:span 2}
.big5 .card:nth-child(4), .big5 .card:nth-child(5){grid-column:span 3}
.card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); overflow:hidden; color:inherit;
  transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--line)}
.card .ph{border-radius:0; border:0; border-bottom:1px dashed color-mix(in srgb,var(--ink-3) 45%, transparent)}
.card .body{padding:18px 20px 20px}
.card .rank{font-family:var(--f-ui); font-size:12px; font-weight:700; color:var(--accent-ink); letter-spacing:.1em}
.card h3{font-size:clamp(19px,2vw,23px); line-height:1.22; margin:6px 0 6px}
.card p{font-family:var(--f-ui); font-size:15px; color:var(--ink-2); line-height:1.55}
.small4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px); margin-top:clamp(14px,1.8vw,22px)}
.mini{
  display:block; border:1px solid var(--line); border-radius:8px; padding:14px 16px; color:inherit;
  background:var(--paper);
}
.mini:hover{border-color:var(--accent)}
.mini h3{font-size:16px; line-height:1.3; margin-bottom:3px}
.mini p{font-family:var(--f-ui); font-size:13.5px; color:var(--ink-3); line-height:1.5}

/* ---------- condition rows (home, scroll section) ---------- */
.crow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(20px,3.4vw,48px); align-items:center;
  padding-block:clamp(28px,3.6vw,44px); border-top:1px solid var(--line);
}
.crow:first-child{border-top:0; padding-top:0}
.crow:nth-child(even) .cphoto{order:2}
.crow h3{font-size:clamp(23px,2.8vw,31px); line-height:1.18; margin:8px 0 10px}
.crow p{font-size:17px}
.hchips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px}
.hchips span{
  font-family:var(--f-ui); font-size:13px; font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); padding:5px 11px; border-radius:999px;
}
.more{font-family:var(--f-ui); font-weight:700; font-size:15px}
.minirows{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px); margin-top:clamp(28px,3.6vw,44px)}
.minirow{border-top:3px solid var(--line); padding-top:16px}
.minirow h3{font-size:20px; margin-bottom:6px}
.minirow p{font-family:var(--f-ui); font-size:15px; line-height:1.6}
.minirow .hchips{margin:12px 0 12px}

/* ---------- hospitals strip ---------- */
.hgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,20px)}
.hcard h3{font-size:16px; line-height:1.3; margin:12px 0 2px}
.hcard .cn{font-family:var(--f-ui); font-size:13px; color:var(--ink-3)}
.hcard ul{list-style:none; padding:0; margin:10px 0 0}
.hcard li{font-family:var(--f-ui); font-size:13px; color:var(--ink-2); line-height:1.5}

/* ---------- steps ---------- */
.howphotos{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:clamp(28px,3.5vw,44px)}
@media (max-width:760px){.howphotos{grid-template-columns:repeat(2,1fr)}}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.8vw,40px)}
.step .n{
  font-family:var(--f-ui); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--accent-ink); padding-bottom:12px; margin-bottom:14px; border-bottom:2px solid var(--accent);
}
.step h3{font-size:19px; line-height:1.3; margin-bottom:8px}
.step p{font-size:15.5px; font-family:var(--f-ui); color:var(--ink-2); line-height:1.6}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px)}
.plan{border:1px solid var(--line); border-radius:10px; padding:clamp(22px,3vw,34px); background:var(--paper)}
.plan.main{border:2px solid var(--accent)}
.plan .eyebrow{margin-bottom:10px}
.plan h3{font-size:22px; margin-bottom:4px}
.plan .price{font-family:var(--f-ui); font-size:clamp(34px,4vw,44px); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.1; margin:12px 0 4px}
.plan .price small{font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.plan .pnote{font-family:var(--f-ui); font-size:14px; color:var(--ink-3); margin-bottom:16px}
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.ticks li{font-family:var(--f-ui); font-size:15px; padding-left:24px; position:relative; line-height:1.55}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}
.payline{margin-top:20px; font-family:var(--f-ui); font-size:14.5px; color:var(--ink-2); max-width:80ch}

/* ---------- partners ---------- */
.partner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,4vw,56px); align-items:start}
.partner h2{font-size:clamp(24px,3vw,34px); line-height:1.2; margin-top:12px}
.partner p+p{margin-top:14px}
.partner .btn{margin-top:22px}

/* ---------- not-list ---------- */
.notgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,32px)}
.notgrid div{border-top:3px solid var(--line); padding-top:16px}
.notgrid h4{font-family:var(--f-ui); font-size:15px; margin-bottom:7px}
.notgrid p{font-family:var(--f-ui); font-size:15px; color:var(--ink-3); line-height:1.6}

/* ============================== CONDITION DETAIL PAGE ============================== */
.crumb{font-family:var(--f-ui); font-size:14px; padding-top:22px}
.crumb a{border:0; color:var(--ink-3)}
.crumb a:hover{color:var(--accent-ink)}
.dhero{padding-block:clamp(24px,4vw,48px) clamp(24px,3vw,36px)}
.dhero h1{font-size:clamp(34px,5vw,56px); line-height:1.08; margin:10px 0 18px; max-width:20ch}
.dhero .lede{font-size:clamp(18px,2vw,21px); max-width:62ch}
.gal{display:grid; grid-template-columns:2fr 1fr; gap:12px}
.gal .stack{display:grid; gap:12px}
.gal .stack{grid-template-rows:1fr 1fr}
.gal .stack > *{contain:size; aspect-ratio:auto; height:100%}

.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.8vw,36px)}
.block h4{
  font-family:var(--f-ui); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:10px;
  border-bottom:1px solid var(--line); margin-bottom:14px;
}
.block p{font-size:16px; line-height:1.6}
.block p+p{margin-top:12px}
.stay{font-family:var(--f-ui); font-weight:700; color:var(--ink); font-size:clamp(26px,3vw,32px); line-height:1.1; margin-bottom:8px; letter-spacing:-.02em}

/* cost compare */
.cost{border:1px solid var(--line); border-radius:10px; padding:clamp(20px,3vw,32px); background:var(--paper)}
.cost h3{font-size:20px; margin-bottom:4px}
.cost .what{font-family:var(--f-ui); font-size:14px; color:var(--ink-3); margin-bottom:22px}
.bar{display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 18px; align-items:center; margin-bottom:16px}
.bar .lab{font-family:var(--f-ui); font-size:14px; font-weight:700; color:var(--ink)}
.bar .lab small{display:block; font-weight:500; color:var(--ink-3); font-size:12.5px}
.bar .track{position:relative; height:34px; background:var(--ground); border-radius:4px}
.bar .fill{height:100%; border-radius:4px; background:var(--us); display:flex; align-items:center; padding-left:12px; min-width:fit-content}
.bar.cn .fill{background:var(--accent)}
.bar .fill b{font-family:var(--f-ui); font-size:15px; color:#fff; white-space:nowrap; padding-right:12px; font-variant-numeric:tabular-nums}
.bar.us .fill b{color:#0E2A3F}
.fine{font-family:var(--f-ui); font-size:12.5px; color:var(--ink-3); line-height:1.6; margin-top:18px; border-top:1px solid var(--line-soft); padding-top:14px}
.fine b{color:var(--ink-2)}
.fine a{color:var(--ink-3)}

/* hospital rows on detail page */
.hosp{display:grid; gap:clamp(28px,4vw,48px)}
.hosprow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(20px,3vw,40px); align-items:start}
.hosp h3{font-size:clamp(20px,2.4vw,25px); line-height:1.25; margin:8px 0 4px}
.hosp .cn{font-family:var(--f-ui); font-size:14px; color:var(--ink-3); margin-bottom:12px}
.hosp .dept{font-family:var(--f-ui); font-size:15px; font-weight:600; color:var(--accent-ink); margin-bottom:10px}
.hosp p{font-size:16px}
.facts{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:9px}
.facts li{font-family:var(--f-ui); font-size:14.5px; color:var(--ink-2); padding-left:18px; position:relative; line-height:1.55}
.facts li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.facts .s{font-size:12.5px; color:var(--ink-3)}
.facts .s a{color:var(--ink-3)}

/* ============================== CTA / FOOTER ============================== */
.cta{background:var(--ink); color:#F2F1ED; border-radius:8px; padding:clamp(28px,4vw,52px)}
.cta h2{color:#FFF; font-size:clamp(24px,3vw,34px); line-height:1.18; margin-bottom:14px; max-width:24ch}
.cta p{font-size:17.5px; color:#C6D2D9; max-width:60ch}
.ctaline{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; font-family:var(--f-ui); font-size:15px}
.ctabtn{display:inline-block; background:#F2F1ED; color:#0E2A3F; font-weight:700; padding:13px 26px; border-radius:999px; border:0; font-size:15px}
.ctabtn:hover{background:#FFF}
.ctanote{color:#94A7B1; font-size:14px}
.ctanote a{color:#C6D2D9; border-bottom-color:rgba(198,210,217,.4)}
:root[data-theme="dark"] .cta, .cta{}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta{background:#1E2A2D} }
:root[data-theme="dark"] .cta{background:#1E2A2D}

footer{border-top:1px solid var(--line-soft); padding:36px 0 48px}
.footin{display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:flex-start}
.footin p{font-family:var(--f-ui); font-size:14px; color:var(--ink-3); max-width:54ch; line-height:1.6}
.footin b{display:block; font-family:var(--f-ui); color:var(--ink); font-size:16px; margin-bottom:5px}

/* ============================== RESPONSIVE ============================== */
@media (max-width:980px){
  .hgrid{grid-template-columns:repeat(3,1fr)}
  .small4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .big5{grid-template-columns:repeat(2,1fr)}
  .big5 .card, .big5 .card:nth-child(4), .big5 .card:nth-child(5){grid-column:span 1}
  .big5 .card:first-child{grid-column:span 2}
  .crow, .hosprow, .partner{grid-template-columns:1fr}
  .crow:nth-child(even) .cphoto{order:0}
  .trio, .notgrid{grid-template-columns:1fr; gap:22px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal .stack{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .gal .stack > *{contain:none; aspect-ratio:16/9; height:auto}
}
@media (max-width:620px){
  body{font-size:17px}
  .nav{gap:8px}
  .navlinks > a{display:none}
  .navlinks a.pill{padding:7px 12px; font-size:13px}
  .brand img{width:30px; height:30px}
  .brand .bw{flex-direction:column; align-items:flex-start}
  .brand .bn{font-size:27px}
  .brand .bs{font-size:10.5px; margin-left:0; margin-top:2px}
  .big5{grid-template-columns:1fr}
  .big5 .card:first-child{grid-column:span 1}
  .small4, .minirows, .steps, .hgrid{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr}
  .ph.hero, .ph-img.hero{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .card{transition:none} }

/* ============================== CONDITION SHEET (Liquid Glass 弹窗) ============================== */
.cphoto{display:block; border:0}
html.sheet-open{overflow:hidden}
.sheet{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(14,42,63,.22); opacity:0; transition:opacity .24s ease;
}
.sheet[hidden]{display:none}
.sheet.on{opacity:1}
.sheet-panel{
  position:relative; width:80vw; height:80vh; max-width:1400px;
  border-radius:28px; overflow:hidden; outline:0;
  background:color-mix(in srgb,var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(30px) saturate(175%); backdrop-filter:blur(30px) saturate(175%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 40px 90px -30px rgba(14,42,63,.5), 0 2px 8px rgba(14,42,63,.08);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.sheet.on .sheet-panel{transform:none}
.sheet-body{height:100%; overflow-y:auto; overscroll-behavior:contain; padding-top:28px}
.sheet-body section.band{background:color-mix(in srgb,var(--ground) 55%, transparent); border-color:color-mix(in srgb,var(--line) 50%, transparent)}
.sheet-body .dhero{padding-top:clamp(36px,4vw,52px)}
.sheet-x{
  position:absolute; top:18px; left:18px; z-index:2; width:42px; height:42px; padding:0;
  display:grid; place-items:center; border-radius:50%; cursor:pointer; color:var(--ink);
  background:color-mix(in srgb,var(--paper) 62%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 14px -4px rgba(14,42,63,.28);
  transition:background .15s, transform .15s;
}
.sheet-x:hover{background:color-mix(in srgb,var(--paper) 88%, transparent)}
.sheet-x:active{transform:scale(.94)}
.sheet-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sheet-x svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sheet{background:rgba(0,0,0,.45)}
  :root:not([data-theme="light"]) .sheet-panel{border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .sheet-x{border-color:rgba(255,255,255,.18)} }
:root[data-theme="dark"] .sheet{background:rgba(0,0,0,.45)}
:root[data-theme="dark"] .sheet-panel{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .sheet-x{border-color:rgba(255,255,255,.18)}
@media (max-width:620px){ .sheet-panel{width:92vw; height:86vh; border-radius:22px} .sheet-x{top:12px; left:12px} }
@media (prefers-reduced-motion:reduce){ .sheet, .sheet-panel{transition:none} }


/* ============================== MEDIA 2026-11 ============================== */
video.ph-img{cursor:pointer}
.mini .ph-img{margin:-1px 0 10px; border-radius:6px}
.steps.withpics .step .ph-img{margin-bottom:14px}
.ownrow{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px)}
.ownrow figure,.cityrow figure{margin:0}
.ownrow .ph-img.vert{aspect-ratio:9/16}
.ownrow figcaption,.cityrow figcaption{font-family:var(--f-ui); font-size:13.5px; color:var(--ink-3); margin-top:8px}
.cityrow{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,16px)}
.cityrow .citybig{grid-column:1 / -1}
.cityrow .citybig .ph-img{aspect-ratio:21/9}
.partnerpic{margin-top:22px}
@media (max-width:760px){
  .ownrow{grid-template-columns:repeat(2,1fr)}
  .cityrow{grid-template-columns:1fr 1fr}
  .cityrow .citybig .ph-img{aspect-ratio:16/9}
  .partnerpic{display:none}
}

/* Booking button: hover (tap on touch) offers WhatsApp or email; click goes to email */
.book{position:relative; display:inline-flex}
.book-menu{
  position:absolute; top:100%; left:0; z-index:60; min-width:168px; padding-top:8px;
  display:flex; flex-direction:column; font-family:var(--f-ui);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.navlinks .book-menu{left:auto; right:0}
.book .book-menu a{
  display:block; padding:11px 18px; margin:0; border-radius:0; white-space:nowrap;
  background:var(--paper); color:var(--ink); font-size:14.5px; font-weight:600; line-height:1.3;
  text-decoration:none; text-align:left; box-shadow:inset 0 0 0 1px var(--line), 0 8px 24px -12px rgba(14,42,63,.28);
}
.book .book-menu a:first-child{border-radius:10px 10px 0 0}
.book .book-menu a:last-child{border-radius:0 0 10px 10px; margin-top:-1px}
.book .book-menu a:hover,.book .book-menu a:focus-visible{background:var(--accent-soft); color:var(--accent-ink)}
.book.open .book-menu,.book:has(:focus-visible) .book-menu{opacity:1; visibility:visible; transform:none}
@media (hover:hover){ .book:hover .book-menu{opacity:1; visibility:visible; transform:none} }
@media (prefers-reduced-motion:reduce){ .book-menu{transition:none} }
@media (max-width:350px){ .navlinks a.pill{padding:6px 10px; font-size:12px} .brand{gap:6px} .brand .bs{font-size:9.5px} }