/* 33 Clear Water Bay — 置業參考 v2
   概念：門牌與路牌。地址本身就是品牌。
   白牌 = 名稱；黑牌 = 門牌號；綠牌 = 指示資料；虛線 = 規劃中；工程黃 = 而家／未有。
   v2：換頁路牌、開閘式圖片、LED 走馬燈、夜間路線、數據動畫、橫向相簿、此路不通 404。 */

:root{
  --kerb:#E3E4DF; --plate:#FFFFFF; --ink:#000000; --text:#1F2422; --muted:#575D59;
  --route:#0B5D3B; --route-ink:#DCEBE1; --works:#F0A500; --asphalt:#2A2E2C; --road:#3B403D;
  --mtr:#00A04E; --tml:#923011;
  --rule:rgba(0,0,0,.14);
  --zh:"Chiron Hei HK","PingFang HK","Noto Sans HK","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --latin:"Overpass","Helvetica Neue",Arial,sans-serif;
  --font:"Overpass","Chiron Hei HK","PingFang HK","Noto Sans HK","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.25,1.55,.5,1);
  --wrap:1180px; --gutter:20px; --section:72px; --top-h:64px;
  --t-cap:13px; --t-small:15px; --t-body:17px; --t-lede:19px; --t-h3:21px;
  --t-h2:clamp(28px,6.4vw,44px);
  --t-sign:clamp(36px,12.2vw,108px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
html.lock{overflow:hidden}
body{
  margin:0;background:var(--kerb);color:var(--text);
  font-family:var(--font);font-size:var(--t-body);line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);font-weight:900;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--works);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gutter), var(--wrap));margin-inline:auto}
.nw{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:#fff;color:#000;padding:10px 14px;border-radius:6px}
.skip:focus{left:12px}

/* ---------- 換頁路牌 ---------- */
.veil{
  position:fixed;inset:0;z-index:250;display:grid;place-items:center;pointer-events:none;
  background:var(--route);box-shadow:inset 0 0 0 14px var(--route),inset 0 0 0 18px #fff;
  transform:translateY(-101%);visibility:hidden;
}
.veil .sign{--t-sign:clamp(38px,11vw,96px);opacity:0;transform:translateY(-26px) rotate(-3deg);transform-origin:30% -60px;
  transition:transform .55s var(--spring) .18s,opacity .2s .18s}
html.veil-in .veil{visibility:visible;transform:none;transition:transform .45s cubic-bezier(.7,0,.25,1)}
html.veil-hold .veil{visibility:visible;transform:none}
html.veil-out .veil{visibility:visible;transform:translateY(-101%);transition:transform .6s cubic-bezier(.65,0,.3,1)}
html.veil-in .veil .sign,html.veil-hold .veil .sign,html.veil-out .veil .sign{opacity:1;transform:none}
html.veil-hold .veil .sign,html.veil-out .veil .sign{transition:none}

/* ---------- 頂部 ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--kerb);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--top-h)}
.logo{display:flex;gap:4px;text-decoration:none;color:#000}
.mini-name{
  background:#fff;border-radius:6px;padding:9px 14px 8px;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.mn-zh{display:block;font-family:var(--zh);font-weight:900;font-size:18px;line-height:1.2;letter-spacing:.16em;margin-right:-.16em;white-space:nowrap}
.mn-en{display:block;font-family:var(--latin);font-weight:800;font-size:9.5px;line-height:1.2;margin-top:3px;white-space:nowrap}
.mini-no{
  background:#000;color:#fff;border-radius:6px;min-width:46px;
  box-shadow:inset 0 0 0 3px #000,inset 0 0 0 5px #fff;
  display:grid;place-items:center;padding:4px 9px 0;
  font-family:var(--latin);font-weight:900;font-size:24px;line-height:1;
}
.nav{display:none}
.menu-btn{
  min-height:44px;padding:2px 18px 0;border:0;border-radius:6px;cursor:pointer;
  background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000;
  font:inherit;font-weight:900;font-size:16px;
}
.menu-btn[aria-expanded="true"]{background:#000;color:#fff}
/* 手機目錄：好似拉閘咁由上而下打開，指路牌逐塊擺入位 */
.drawer{
  position:fixed;left:0;right:0;top:var(--top-h);bottom:0;z-index:59;
  background:var(--kerb);overflow-y:auto;overscroll-behavior:contain;
  padding:28px 0 calc(110px + env(safe-area-inset-bottom,0px));
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .45s var(--ease),visibility 0s linear .45s;
}
.drawer.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .45s var(--ease),visibility 0s}
.drawer.open .post{animation:swing .6s var(--spring) backwards;animation-delay:calc(.14s + var(--i,0)*55ms)}
@keyframes swing{from{opacity:0;transform:rotate(-8deg) translateX(-18px)}}

/* ---------- 按鈕 ---------- */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:2px 22px 0;border:0;border-radius:7px;cursor:pointer;
  font:inherit;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.btn-ink{background:#000;color:#fff}
.btn-wa{background:var(--route);color:#fff}
.btn-plate{background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000}
.btn-block{width:100%}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 #000}
.btn-plate:hover{box-shadow:inset 0 0 0 2px #000,0 4px 0 #000}
.btn:active{transform:none;box-shadow:none}
.text-link{display:inline-block;font-weight:700;color:#000;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- 路牌（核心元件） ---------- */
.sign{display:flex;gap:6px;align-items:stretch;width:max-content;max-width:100%}
.sign-name{
  background:#fff;color:#000;border-radius:10px;text-align:center;
  padding:calc(var(--t-sign)*.32) calc(var(--t-sign)*.42) calc(var(--t-sign)*.26);
  box-shadow:inset 0 0 0 calc(var(--t-sign)*.09) #fff,inset 0 0 0 calc(var(--t-sign)*.09 + 3px) #000;
}
.sign-name .zh{display:block;font-family:var(--zh);font-weight:900;font-size:var(--t-sign);line-height:1.05;letter-spacing:.06em;margin-right:-.06em;white-space:nowrap}
.sign-name .en{display:block;font-family:var(--latin);font-weight:800;font-size:calc(var(--t-sign)*.25);line-height:1.2;margin-top:.45em;white-space:nowrap}
.sign-no{
  background:#000;color:#fff;border-radius:10px;
  box-shadow:inset 0 0 0 calc(var(--t-sign)*.09) #000,inset 0 0 0 calc(var(--t-sign)*.09 + 3px) #fff;
  display:grid;place-items:center;padding:.12em .3em 0;
  font-family:var(--latin);font-weight:900;font-size:calc(var(--t-sign)*1.02);line-height:1;
}
.sign-sm{--t-sign:clamp(32px,11.5vw,80px)}
.sign-green .sign-name{background:var(--route);color:#fff;box-shadow:inset 0 0 0 calc(var(--t-sign)*.09) var(--route),inset 0 0 0 calc(var(--t-sign)*.09 + 3px) #fff}

/* ---------- 開場：開閘 + 掛牌 + 告示 ---------- */
html.js:not(.is-ready) .reveal img{clip-path:inset(100% 0 0 0)}
html.is-ready .reveal img{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.hero .sign,.phero .sign{transform-origin:30% -60px}
html.js:not(.is-ready) .hero .sign,html.js:not(.is-ready) .phero .sign{opacity:0;transform:translateY(-30px) rotate(-4deg)}
html.is-ready .hero .sign,html.is-ready .phero .sign{transition:transform 1s var(--spring) .5s,opacity .35s .5s}
html.js:not(.is-ready) .notice{opacity:0;transform:rotate(-30deg) scale(.4)}
html.is-ready .notice{transition:transform .7s cubic-bezier(.3,1.6,.5,1) 1.15s,opacity .25s 1.15s}

/* ---------- 首頁頂 ---------- */
.hero{padding:0 0 calc(var(--section)*.8)}
.hero-media{position:relative;margin-inline:calc(-1*var(--gutter))}
.hero-media img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.hero-copy .sign{position:relative;z-index:2;margin-top:calc(var(--t-sign)*-1.15)}
.hero h1{font-size:clamp(24px,5.6vw,34px);line-height:1.4;margin:28px 0 14px}
.lede{font-size:var(--t-lede);line-height:1.8;max-width:30em}
.art-note{font-size:var(--t-cap);color:var(--muted);margin:18px 0 0}
.notice{
  position:absolute;right:14px;top:14px;z-index:3;text-decoration:none;text-align:center;
  background:var(--works);color:#000;border-radius:8px;padding:9px 15px 7px;
  box-shadow:inset 0 0 0 3px var(--works),inset 0 0 0 5px #000;
  font-weight:900;font-size:clamp(15px,3.8vw,19px);line-height:1.3;transform:rotate(-4deg);
}
.notice small{display:block;font-weight:700;font-size:.7em}
.notice:hover{transform:rotate(-2deg) scale(1.04)}

/* ---------- LED 走馬燈 ---------- */
.led{background:#000;color:var(--works);overflow:hidden;white-space:nowrap;border-block:4px solid var(--road)}
.led-track{display:inline-flex;animation:led 48s linear infinite}
.led:hover .led-track{animation-play-state:paused}
.led span{
  display:inline-flex;align-items:center;gap:30px;padding:15px 0 12px 30px;
  font-family:var(--zh);font-weight:900;font-size:clamp(23px,6.2vw,30px);letter-spacing:.1em;color:#FFB31F;
  text-shadow:0 0 10px rgba(255,179,31,.75);
  -webkit-mask-image:radial-gradient(circle,#000 68%,transparent 75%);mask-image:radial-gradient(circle,#000 68%,transparent 75%);
  -webkit-mask-size:3px 3px;mask-size:3px 3px;
}
.led span::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
@keyframes led{to{transform:translateX(-50%)}}

/* ---------- 內頁頂 ---------- */
.phero{padding:0 0 calc(var(--section)*.8)}
.phero-media{overflow:hidden}
.phero-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.phero-copy .sign{position:relative;z-index:2;margin-top:calc(var(--t-sign)*-1.2)}
.phero h1{font-size:clamp(24px,5.6vw,36px);line-height:1.4;margin:26px 0 12px;max-width:22em}
.phero-plain{padding-top:36px}
.phero-plain .phero-copy .sign{margin-top:0}

/* ---------- 區段 ---------- */
.section{padding:var(--section) 0}
.section.tight-top{padding-top:0}
.band{background:#fff}
.section h2{font-size:var(--t-h2);line-height:1.3;margin-bottom:18px;letter-spacing:.02em}
.prose{max-width:34em}
.two{display:grid;gap:36px}
.split{display:grid;gap:28px;align-items:center}
.cap{display:block;font-size:var(--t-cap);color:var(--muted);line-height:1.6;margin-top:10px}
figure{margin:0}
.fig img{width:100%;border-radius:8px}
.note{font-size:var(--t-small);color:var(--muted);max-width:40em;margin-top:24px}
.gap-top{margin-top:32px}

/* ---------- 綠色指示牌 ---------- */
.board{margin:0;background:var(--route);color:#fff;border-radius:12px;box-shadow:inset 0 0 0 7px var(--route),inset 0 0 0 10px #fff;padding:20px 28px 18px}
.board-row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.28)}
.board-row:first-child{border-top:0}
.board dt{font-size:var(--t-small);color:var(--route-ink);line-height:1.5}
.board dd{margin:0;text-align:right;font-weight:800;font-size:clamp(19px,5.2vw,27px);line-height:1.3;font-variant-numeric:tabular-nums}
.board dd small{font-size:.62em;font-weight:700;margin-left:2px}
.board sup{font-size:.55em;margin-left:2px;vertical-align:top;position:relative;top:-.1em}
.board-foot{font-size:var(--t-cap);color:var(--muted);margin:12px 0 0;line-height:1.6}

/* ---------- 面積尺 ---------- */
.ruler{margin-top:32px;max-width:34em}
.ruler-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;color:#000}
.ruler-lab b{font-weight:900}
.ruler-lab span{font-weight:800;font-variant-numeric:tabular-nums}
.ruler-track{position:relative;height:26px;border-radius:6px;background:var(--road);margin-top:8px;overflow:hidden}
.ruler-track::after{content:"";position:absolute;left:8px;right:8px;top:12px;border-top:2px dashed rgba(255,255,255,.7)}
.ruler-track i{position:absolute;z-index:1;top:0;bottom:0;left:var(--l);width:var(--w);background:var(--works);box-shadow:inset 0 0 0 2px #000;transform-origin:left center}
[data-io]:not(.in) .ruler-track i{transform:scaleX(0)}
.in .ruler-track i{transition:transform 1.1s var(--ease) .15s}
.ruler-scale{position:relative;height:22px;margin-top:6px;font-size:var(--t-cap);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ruler-scale span{position:absolute;left:var(--x);transform:translateX(-50%)}
.ruler-scale span:first-child{transform:none}
.ruler-scale span:last-child{transform:translateX(-100%)}

/* ---------- 夜間路線（時序） ---------- */
.night{background:var(--asphalt);color:#D7DAD6}
.night h2{color:#fff}
.route-wrap{position:relative;margin:36px 0}
.route-wrap::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:14px;background:#4A504C;border-radius:7px}
.route-wrap::after{content:"";position:absolute;left:19px;top:14px;bottom:14px;border-left:2px dashed rgba(255,255,255,.85)}
.route-fill{position:absolute;left:13px;top:6px;width:14px;height:var(--fill,0px);background:var(--works);border-radius:7px;transform-origin:top center;transform:scaleY(0)}
.route-wrap.in .route-fill{transform:none;transition:transform 1.3s var(--ease) .2s}
.route{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.stop{position:relative;padding:0 0 26px 58px;min-height:44px}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;z-index:1;left:8px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--asphalt);box-shadow:0 0 0 3px #fff}
.stop.done::before{background:#fff}
.stop.now::before{left:4px;top:0;width:32px;height:32px;background:var(--works);box-shadow:0 0 0 3px #000,0 0 0 5px var(--works)}
.stop.now::after{content:"";position:absolute;left:4px;top:0;width:32px;height:32px;border-radius:50%;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,165,0,.75)}100%{box-shadow:0 0 0 22px rgba(240,165,0,0)}}
.stop b{display:block;font-size:19px;font-weight:900;color:#fff;line-height:1.45}
.stop span{display:block;font-size:var(--t-small);color:#AEB3AF;line-height:1.6}
.stop em{display:inline-block;margin-top:6px;font-style:normal;font-weight:900;font-size:var(--t-cap);background:var(--works);color:#000;padding:2px 9px 1px;border-radius:4px}
.night .btn-plate{box-shadow:none}

/* ---------- 指路牌 ---------- */
.posts{position:relative;display:grid;gap:12px;padding-left:22px}
.posts::before{content:"";position:absolute;left:0;top:-14px;bottom:-30px;width:12px;border-radius:3px;background:var(--road)}
.post{position:relative;display:block;isolation:isolate;text-decoration:none;color:#000;padding:15px 64px 15px 22px;min-height:78px;border-radius:4px;transform-origin:0 50%;transition:transform .2s var(--ease)}
.post-shape{position:absolute;inset:0;z-index:-1;background:#000;clip-path:polygon(0 0,calc(100% - 36px) 0,100% 50%,calc(100% - 36px) 100%,0 100%)}
.post-shape::before{content:"";position:absolute;inset:3px;background:#fff;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%);transition:background-color .2s}
.post b{display:block;font-weight:900;font-size:var(--t-h3);line-height:1.35}
.post b i{font-style:normal;font-family:var(--latin);font-weight:800;font-size:14px;color:var(--muted);margin-left:8px}
.post small{display:block;font-size:var(--t-small);color:var(--muted);line-height:1.5;margin-top:2px}
.post:hover{transform:translateX(8px)}
.post:hover .post-shape::before{background:#F4F4F1}
.post[aria-current="page"] .post-shape::before{background:var(--works)}
.post[aria-current="page"] small,.post[aria-current="page"] b i{color:#000}
.post-cta .post-shape::before{background:#000}
.post-cta,.post-cta small,.post-cta b i{color:#fff}
.post-cta:hover .post-shape::before{background:#000}
.post-cta[aria-current="page"],.post-cta[aria-current="page"] small,.post-cta[aria-current="page"] b i{color:#000}
.posts[data-io]:not(.in) .post{opacity:0}
.posts[data-io].in .post{animation:swing .65s var(--spring) backwards;animation-delay:calc(var(--i,0)*80ms)}

/* ---------- 資料牌（現有／規劃） ---------- */
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 20px;font-size:var(--t-small);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend i{display:inline-block;width:34px;height:20px;border-radius:4px}
.legend .l-solid{background:#fff;border:3px solid #000}
.legend .l-dash{border:3px dashed #000}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.fbtn{min-height:44px;padding:2px 18px 0;border:0;border-radius:7px;background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000;font:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:background-color .2s,color .2s}
.fbtn:hover{background:#F4F4F1}
.fbtn[aria-pressed="true"]{background:#000;color:#fff}
.specs{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.spec{background:#fff;border:3px solid #000;border-radius:9px;padding:18px 20px 16px}
.spec.planned{background:rgba(255,255,255,.4);border-style:dashed}
.spec h3{font-size:var(--t-h3);line-height:1.4;margin-bottom:6px}
.spec h3 span{font-family:var(--latin);font-weight:800;font-size:14px;color:var(--muted);margin-left:8px}
.spec p{margin:0;font-size:16px;line-height:1.75}
.tag{display:inline-block;font-size:var(--t-cap);font-weight:900;line-height:1.5;padding:2px 9px 1px;border-radius:4px;background:#000;color:#fff;margin-bottom:10px}
.tag-plan{background:var(--works);color:#000}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:var(--ease)}

/* ---------- 港鐵示意圖 ---------- */
.mtr{background:#fff;border:3px solid #000;border-radius:12px;padding:16px 14px 8px;max-width:420px}
.mtr svg{width:100%;height:auto;display:block;overflow:visible}
.mtr text{font-family:var(--font)}
.mtr .ln{stroke-dasharray:1;stroke-dashoffset:0}
.mtr[data-io]:not(.in) .ln{stroke-dashoffset:1}
.mtr.in .ln{transition:stroke-dashoffset 1.4s var(--ease)}
.mtr .stn,.mtr .spur{transition:opacity .45s}
.mtr[data-io]:not(.in) .stn,.mtr[data-io]:not(.in) .spur{opacity:0}
.mtr.in .stn{transition-delay:calc(.25s + var(--i,0)*.14s)}
.mtr.in .spur{transition-delay:1.35s}

/* ---------- 樓書清單 ---------- */
.checks{list-style:none;margin:0;padding:0;max-width:44em;border-bottom:2px solid #000}
.checks li{border-top:2px solid #000}
.checks label{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:16px 0;cursor:pointer}
.checks input{position:absolute;opacity:0;width:1px;height:1px}
.checks .box{width:24px;height:24px;margin-top:3px;border:3px solid #000;border-radius:4px;background:#fff;position:relative;transition:background-color .2s}
.checks .box::after{content:"";position:absolute;left:5px;top:0;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--spring)}
.checks input:checked + .box{background:#000}
.checks input:checked + .box::after{transform:rotate(45deg) scale(1)}
.checks input:focus-visible + .box{outline:3px solid var(--works);outline-offset:2px}
.checks b{display:block;color:#000;font-size:18px;line-height:1.5}
.checks .txt span{display:block;font-size:16px;color:var(--muted);line-height:1.7}
.checks input:checked ~ .txt b{text-decoration:line-through;text-decoration-thickness:2px}

/* ---------- 相片 ---------- */
.gallery{display:grid;gap:26px}
.shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;font:inherit;color:inherit}
.shot .ph{display:block;position:relative;overflow:hidden;border-radius:8px}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.035)}
.shot.plan img{object-fit:contain;background:#fff;aspect-ratio:5/4}
.shot.plan:hover img{transform:none}
.shot b{display:block;color:#000;font-size:17px;margin-top:10px;line-height:1.5}
.shot .cap{margin-top:2px}
.zoom-tag{position:absolute;right:10px;bottom:10px;background:#fff;color:#000;border-radius:6px;padding:3px 10px 1px;font-size:var(--t-cap);font-weight:900;box-shadow:inset 0 0 0 2px #000}
.strip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.strip-head h2{margin-bottom:0}
.strip-nav{display:none;gap:8px;flex:none}
.strip-nav button{width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000;cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.strip-nav button:hover{background:var(--works)}
.strip-nav svg,.lb-bar svg{width:20px;height:20px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,400px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 18px;margin:28px calc(-1*var(--gutter)) 0;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
.strip .shot{scroll-snap-align:start}
.mosaic{display:grid;gap:22px}

/* ---------- 問答 ---------- */
.faq{max-width:46em;border-bottom:2px solid #000}
.faq details{border-top:2px solid #000}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 0;position:relative;font-weight:900;font-size:18px;color:#000;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:7px;box-shadow:inset 0 0 0 2px #000;display:grid;place-items:center;font-size:22px;font-weight:800;line-height:1;transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--works)}
.faq details p{margin:0 0 20px;max-width:40em}
.faq details[open] p{animation:drop .35s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* ---------- 工程黃登記帶 ---------- */
.works{position:relative;background:var(--works);color:#000;padding:calc(var(--section) + 12px) 0}
.works::before,.works::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(-45deg,#000 0 12px,var(--works) 12px 24px)}
.works::before{top:0}
.works::after{bottom:0}
.works h2{font-size:clamp(40px,10vw,92px);line-height:1.08;margin-bottom:18px;letter-spacing:.02em}
.works p{font-size:var(--t-lede);max-width:30em;color:#000}
.works .actions{margin-top:26px}

/* ---------- 登記表 ---------- */
.form-plate{background:#fff;border-radius:14px;padding:34px 26px 30px;box-shadow:inset 0 0 0 8px #fff,inset 0 0 0 11px #000}
.form{display:grid;gap:24px}
.field{display:grid;gap:6px;font-weight:700;color:#000;font-size:16px}
.field input,.field textarea{width:100%;font:inherit;font-weight:400;font-size:17px;color:#000;background:#fff;border:2px solid #000;border-radius:7px;padding:12px 14px}
.field input:focus,.field textarea:focus{outline:3px solid var(--works);outline-offset:0}
.field textarea{resize:vertical}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;color:#000;font-size:16px;margin-bottom:8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:2px 16px 0;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 2px #000;font-size:16px;color:#000;transition:background-color .15s,color .15s,transform .15s var(--spring)}
.chip input:checked + span{background:#000;color:#fff}
.chip input:active + span{transform:scale(.95)}
.chip input:focus-visible + span{outline:3px solid var(--works);outline-offset:2px}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15px;line-height:1.6;color:var(--muted)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:#000}
.form-note{font-size:var(--t-cap);color:var(--muted);margin:0}
.aside-list{list-style:none;margin:0;padding:0}
.aside-list li{padding:12px 0;border-top:2px solid #000;font-weight:700;color:#000}
.aside-list li span{display:block;font-weight:400;color:var(--muted);font-size:15px}
.wechat{display:flex;gap:16px;align-items:center;background:#fff;border-radius:9px;padding:14px;border:2px solid #000;margin-top:24px}
.wechat img{width:120px;height:120px}
.wechat p{margin:0;font-weight:700;color:#000}

/* ---------- 頁尾 ---------- */
.foot{background:var(--route);color:var(--route-ink);padding:56px 0 32px;font-size:var(--t-small)}
.foot-sign{margin-bottom:44px}
.foot-sign .sign{--t-sign:clamp(34px,11vw,116px)}
.foot-top{display:grid;gap:28px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.25)}
.foot-name{margin:0;color:#fff;font-weight:700}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.foot-links.one{grid-template-columns:1fr}
.foot-links a{color:#fff;text-decoration:none;padding:5px 0}
.foot-links a:hover{text-decoration:underline}
.foot-wechat{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.foot-wechat img{width:150px;height:150px;display:block;background:#fff;border:8px solid #fff;border-radius:8px;box-sizing:border-box}
.foot-wechat p{margin:0;color:#fff;font-weight:700;line-height:1.35}
.disclaimer{padding-top:28px;font-size:var(--t-cap);line-height:1.85;max-width:62em}
.disclaimer b{color:#fff}
.copyright{margin:22px 0 0;font-size:var(--t-cap)}

/* ---------- 底部快捷（手機） ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(227,228,223,.97);border-top:1px solid var(--rule)}
.dock .btn{min-height:50px;padding-inline:10px}
.dock .btn:hover{transform:none;box-shadow:none}

/* ---------- 放大圖 ---------- */
.lb{border:0;padding:0;background:transparent;color:#fff;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0}
.lb::backdrop{background:rgba(0,0,0,.92)}
.lb[open]{display:grid}
.lb-in{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;height:100%}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 8px}
.lb-count{font-family:var(--latin);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.lb-x{min-height:44px;padding:2px 16px 0;border:0;border-radius:6px;background:#fff;color:#000;font:inherit;font-weight:900;cursor:pointer}
.lb-stage{overflow:auto;display:grid;place-items:center;padding:0 12px;overscroll-behavior:contain}
.lb-stage img{max-width:min(1400px,100%);max-height:74dvh;object-fit:contain;border-radius:4px;animation:lbin .35s var(--ease)}
.lb.pan .lb-stage{place-items:start}
.lb.pan .lb-stage img{max-width:none;max-height:none;width:max(100%,1500px);border-radius:0;background:#fff}
@keyframes lbin{from{opacity:0;transform:scale(.97)}}
.lb-bar{display:flex;align-items:center;gap:12px;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px))}
.lb-cap{flex:1;text-align:center;font-size:15px;margin:0}
.lb-bar button{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:#fff;color:#000;cursor:pointer;display:grid;place-items:center}
.lb.single .lb-bar button{visibility:hidden}

/* ---------- 此路不通（404） ---------- */
.lost{min-height:70vh;display:grid;align-content:center;gap:22px;padding:60px 0}
.lost .sign-no{background:#B3261E;box-shadow:inset 0 0 0 calc(var(--t-sign)*.09) #B3261E,inset 0 0 0 calc(var(--t-sign)*.09 + 3px) #fff}

/* ================= 闊螢幕 ================= */
@media (min-width:700px){
  :root{--gutter:32px}
  .specs{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .wide{grid-column:span 2}
  .mosaic .wide img{aspect-ratio:21/9}
  .strip-nav{display:flex}
  .foot-top{grid-template-columns:1fr 1fr}
  .form-plate{padding:48px 48px 44px}
}

@media (min-width:960px){
  :root{--section:112px;--top-h:76px}
  body{padding-bottom:0}
  .dock,.menu-btn,.drawer{display:none !important}
  .nav{display:flex;align-items:center;gap:2px}
  .nav a{text-decoration:none;font-weight:700;font-size:15px;padding:9px 12px 7px;border-radius:6px;color:#000;transition:background-color .2s}
  .nav a:hover{background:rgba(255,255,255,.7)}
  .nav a[aria-current="page"]{background:#fff;box-shadow:inset 0 0 0 2px #000}
  .nav .nav-cta{background:#000;color:#fff;margin-left:10px}
  .nav .nav-cta:hover{background:#000}
  .nav .nav-cta[aria-current="page"]{background:#000;color:#fff;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #fff}

  .hero{padding-top:40px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:56px}
  .hero-media{grid-column:2;grid-row:1;margin:0}
  .hero-media img{aspect-ratio:auto;height:min(80vh,760px);border-radius:12px}
  .notice{right:-14px;top:28px}
  .hero-copy{grid-column:1;grid-row:1;container-type:inline-size}
  .hero-copy .sign{margin-top:0;--t-sign:min(104px,13.5cqi)}  /* 跟左欄闊度縮放，唔會遮到右邊張圖 */

  .phero-media img{aspect-ratio:auto;height:min(60vh,560px)}

  .two{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
  .split.flip > :first-child{order:2}
  .specs.three{grid-template-columns:repeat(3,1fr)}

  .route-wrap{--horiz:1}
  .route-wrap::before{left:0;right:0;top:14px;bottom:auto;width:auto;height:14px}
  .route-wrap::after{left:10px;right:10px;top:20px;bottom:auto;border-left:0;border-top:2px dashed rgba(255,255,255,.85)}
  .route-fill{left:0;top:14px;height:14px;width:var(--fill,0px);transform-origin:left center;transform:scaleX(0)}
  .route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .stop{padding:58px 18px 0 0}
  .stop::before{left:0;top:9px}
  .stop.now::before,.stop.now::after{left:-4px;top:5px}

  .posts-area{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}
  .posts .post{width:max-content;min-width:440px;max-width:100%}
  .foot-top{grid-template-columns:2fr 1fr 1fr auto}
  .reg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .veil{display:none}
}