/* ============================================================
   CAAM 承德 168 — Multi-page Build
   Layout / type cadence adapted from therefineryatdomino.com.
   Palette per CAAM CIS brand book:
     · #C3CEDA Misty Blue / #0C4160 Midnight / #071330 Dark Blue
     · #EFEBE9 Cream paper / #152D2E Ebony text
   Type: Microsoft JhengHei (ZH) + Libre Franklin (EN)
   Visual rules: Sharp 0-radius rectangles, generous whitespace
   ============================================================ */

/* ---------- 1. Tokens — CAAM CIS palette (per CIS_HEX.pdf brand book) ---------- */
:root {
  /* === CIS brand color system === */
  --misty-blue:  #C3CEDA;    /* primary tint */
  --blue-gray:   #738FA7;    /* secondary */
  --blue-gray-2: #43616F;    /* deeper */
  --midnight:    #0C4160;    /* PRIMARY accent */
  --midnight-2:  #2B6488;    /* accent alt */
  --dark-blue:   #071330;    /* deepest */
  --ivory:       #E8DBCB;    /* warm paper */
  --cream:       #EFEBE9;    /* default paper */
  --ebony:       #152D2E;    /* deepest text */
  --cool-gray:   #4D5C60;
  --slate:       #8A9EA0;

  /* paper / surface */
  --paper:       #FFFFFF;
  --paper-soft:  var(--cream);          /* #EFEBE9 */
  --paper-deep:  var(--ivory);          /* #E8DBCB */
  --white:       #FFFFFF;

  /* ink */
  --ink:         var(--ebony);          /* #152D2E */
  --ink-deep:    var(--dark-blue);      /* #071330 */
  --gray-1:      var(--cool-gray);      /* #4D5C60 */
  --gray-3:      var(--slate);          /* #8A9EA0 */

  /* Neighborhood category colors — used by .spot-marker */
  --cat-bank:    #6c7e93;   /* 銀行 — 灰藍 */
  --cat-conv:    #c9a890;   /* 生活服務 — 暖膚色 */
  --cat-cafe:    #d99b5e;   /* 品飲散策 — 暖橘 */
  --cat-dine:    #c5694a;   /* 美味秘境 — 紅橘 */
  --cat-art:     #8b6f47;   /* 藝文聚點 — 棕色 */
  --cat-health:  #6fa86b;   /* 健康補給 — 草綠 */
  --cat-hotel:   #8a7cc2;   /* 國際商旅 — 紫灰 */
  --cat-transit: #0C4160;   /* 捷運/機場 — CIS midnight */
  --cat-tech:    #4a7da6;   /* 科技園區 — 中藍 */
  --cat-park:    #87a55a;   /* 公園綠地 — 葉綠 */

  /* lines */
  --rule:        rgba(43, 43, 43, 0.14);

  /* === Type — CAAM CIS spec:
     · 中文: 微軟正黑體 Light/Bold
     · 英文: Libre Franklin Light/Regular
     · 字級 50 / 24 / 14 / 10 (主/副/內文/圖說) ===*/
  --font-sans:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-zh:      "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "微軟正黑體", sans-serif;
  --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* Unified 6-step type scale: 56 / 38 / 28 / 20 / 16 / 14 px */
  --fs-display:  4rem;       /* 64px — hero h1 */
  --fs-h1:       2.75rem;    /* 44px — section title */
  --fs-h2:       2rem;       /* 32px — sub head */
  --fs-lede:     1.375rem;   /* 22px — lede / lead body */
  --fs-lead:     var(--fs-lede);
  --fs-body:     1rem;       /* 16px — body */
  --fs-caption:  0.875rem;   /* 14px — caption / button / eyebrow */

  /* Letter spacing — 4-step scale */
  --tracking-tight:    0;           /* display headings */
  --tracking-default:  0;           /* body / paragraphs */
  --tracking-body:     var(--tracking-default);
  --tracking-eyebrow:  0;           /* small uppercase: buttons, learn-more */
  --tracking-caption:  0;           /* labels, captions, table headers */

  /* Line heights */
  --lh-tight:    1.1;          /* display */
  --lh-snug:     1.2;          /* h1 / h2 */
  --lh-h3:       1.25;
  --lh-caption:  1.4;
  --lh-body:     1.55;
  --lh-comfort:  1.65;         /* paragraph reading */
  --lh-relaxed:  var(--lh-comfort);
  --lh-loose:    1.7;          /* long-form ZH copy */

  /* Font weight — only the value actually consumed by rules */
  --fw-light:    500;          /* heading default (was 300, bumped for legibility) */

  /* === Spacing scale — only steps actually consumed by rules === */
  --space-2:  5px;
  --space-3:  8px;
  --space-5:  15px;
  --space-7:  22px;
  --space-9:  28px;
  --space-11: 40px;
  --space-12: 42px;
  --space-13: 50px;
  --space-15: 70px;

  /* layout — direct from Refinery saved HTML CSS:
     · main container max-width 1600px (used 6x)
     · most common container padding: 0 25px (used 9x — tightest)
     · larger sections use 0 50px (used 4x)
     · text content sometimes capped 768px (used 22x for body)
     · hero images are FULL-BLEED (escape shell) */
  --shell-max:    1600px;                          /* their actual */
  --shell-pad:    clamp(1rem, 1.75vw, 1.5625rem);  /* 16 → 25px — their most common */
  --content-indent: 0;                              /* no extra title indent */
  --text-max:     768px;                            /* their actual body text column */
  --section-pad:  clamp(3.5rem, 5.5vw, 5.5rem);    /* 56 → 88px — restrained module rhythm */
  --section-content-gap: clamp(2rem, 3vw, 3rem);   /* 32 → 48px — heading group to content */
  --gap-xl:       clamp(2rem, 5vw, 4.375rem);      /* 32 → 70 px */
  --gap-lg:       clamp(1.25rem, 3vw, 2.625rem);   /* 20 → 42 px */

  /* button — extracted dimensions */
  --btn-pad-y:    8px;
  --btn-pad-x:    12px;
  --btn-border-w: 2px;

  /* Motion */
  --ease:        ease-in-out;
  --dur-fast:    180ms;                    /* quick hovers, fills */
  --dur:         250ms;                    /* default */
  --dur-slow:    320ms;                    /* polished CTAs, menu toggle */
  --dur-slide:   500ms;                    /* transform transitions */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--font-zh), var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--dur) var(--ease);    /* 250ms ease-in-out — Refinery standard */
}
a:hover { color: var(--midnight-2); }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 4px;
}

::selection { background: var(--misty-blue); color: var(--dark-blue); }

/* ---------- 3. Type Scale ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-zh), var(--font-display);
  font-weight: 500;
  margin: 0;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink-deep);
}

/* Unified type scale — section 46px / 38px / 28px */
.h-jumbo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-h2), 2.875vw, 2.875rem); /* 28 → 46px */
  line-height: var(--lh-tight);
  letter-spacing: 0;
}
/* Eyebrow + h-jumbo rhythm */
.eyebrow + .h-jumbo { margin-top: 0.7rem; }
.h-l {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.h-m {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h3);
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-caption);
  color: var(--ink-deep);
  display: inline-block;
  margin-bottom: 0.6rem;
}
.eyebrow .dot { display: none; }
.eyebrow.light { color: var(--white); }
.eyebrow.gray  { color: var(--gray-1); }

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-comfort);
  color: var(--ink);
  font-weight: 400;
}

.body-sm { font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: var(--lh-loose); color: var(--gray-1); }
.caption { font-size: var(--fs-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--gray-1); font-family: var(--font-sans); font-weight: 500; }

/* ---------- 4. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); position: relative; }
.section-tight { padding-top: calc(var(--section-pad) * 0.8); padding-bottom: calc(var(--section-pad) * 0.8); }
/* Adjacent white homepage modules share one interval, not two stacked paddings. */
main:has(> .hero) > .section + .section { padding-top: 0; }
.section-paper-soft { background: var(--paper-soft); }
.section-white      { background: var(--white); }
[id] { scroll-margin-top: 88px; }

/* ---------- 5. Header — stable 80px sticky navigation
   z-index high enough to overlay Leaflet map (default panes 400-700) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  height: 80px;                                   /* default — accommodates square logo */
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: all var(--dur) cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-scrolled {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
/* Keep the header and logo dimensions stable while scrolling. */
.site-header .brand-mark-image,
.site-header .brand-mark-image img { height: 33px; transition: all var(--dur) cubic-bezier(0.4, 0, 0.2, 1); }

/* Header bar: logo LEFT, nav RIGHT (one row) */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.4rem);
  height: 100%;
  width: 100%;
}

/* Brand mark — left aligned per CAAM brief */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink-deep);
  text-decoration: none;
  flex-shrink: 0;
}
/* Logo — CAAM CIS 方形 logo (CAAM 字標 + 承德 168 副標 + 裝飾線)
   Square aspect — sized to fit nav row */
.brand-mark-image {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-mark-image img.brand-logo-cis {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  transition: all var(--dur) cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-mark-image img.brand-logo-horizontal { height: 22px; }
/* Contact CTA — CIS midnight blue background, white text */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--midnight);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  min-height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--btn-border-w) solid var(--midnight);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-contact:hover {
  background: var(--dark-blue);
  color: #fff;
  border-color: var(--dark-blue);
}

/* Single nav row — pushed to right of header */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.4rem);
  flex-wrap: nowrap;
}
.site-nav.nav-row {
  justify-content: flex-end;
  margin-left: auto;
}
/* Nav link — extracted Refinery spec:
   uppercase, color #000, border-bottom: 2px transparent
   becomes var(--midnight) on hover/active */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: 400;                            /* Gotham-Medium maps to ~400 */
  font-size: var(--fs-body);                   /* 1rem = 16px */
  line-height: 1.125rem;                       /* extracted 18px */
  letter-spacing: var(--tracking-default);
  text-transform: uppercase;
  color: #000;
  min-height: 44px;                            /* WCAG 2.5.5 touch target */
  padding: 8px 5px;
  position: relative;
  white-space: nowrap;
  border-bottom: 2px solid rgba(0, 0, 0, 0);   /* extracted — transparent placeholder */
  transition: all var(--dur) var(--ease);
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  border-bottom-color: var(--midnight);                /* extracted hover underline */
}
.nav-link .nav-zh { display: inline; }
.lang-en .site-nav { gap: clamp(0.75rem, 1.3vw, 1.5rem); }
.lang-en .nav-link { font-size: 0.92rem; line-height: 1.55; letter-spacing: 0; text-transform: none; }
.lang-en .h-jumbo,
.lang-en .h-l,
.lang-en .section-title { font-family: var(--font-display); letter-spacing: 0; line-height: 1.2; }
.nav-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Nav item with submenu (場地租借) ---------------------------------------- */
.nav-item.has-submenu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-link-parent .nav-caret {
  display: inline-flex;
  margin-left: 0.25rem;
  opacity: 0.55;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-item.has-submenu:hover .nav-link-parent .nav-caret,
.nav-item.has-submenu:focus-within .nav-link-parent .nav-caret {
  opacity: 1;
  transform: rotate(180deg);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0.4rem 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  z-index: 60;
}
/* invisible bridge so the cursor can travel from parent to submenu */
.nav-submenu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-item.has-submenu:hover .nav-submenu,
.nav-item.has-submenu:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.nav-sublink {
  display: block;
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-default);
  color: var(--ink-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-sublink:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--midnight);
}

.lang-toggle {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-default);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-1);
}
.lang-toggle .lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--gray-1);
  cursor: pointer;
  transition: color var(--dur-slow) var(--ease);
}
.lang-toggle .lang-btn:hover { color: var(--ink); }
.lang-toggle .lang-btn.is-active { color: var(--ink-deep); cursor: default; }

/* i18n visibility helpers — for pages that mix ZH+EN in the same view
   (e.g. building.html) so toggling hides the inactive language. */
.caam-lang-en { display: none; }
.caam-lang-zh { display: initial; }
.lang-en .caam-lang-en { display: initial; }
.lang-en .caam-lang-zh { display: none; }
.lang-toggle .is-active { color: var(--ink-deep); }
.lang-toggle .is-disabled { color: var(--gray-1); opacity: 0.5; cursor: not-allowed; }
.lang-toggle .lang-sep { opacity: 0.4; }

/* ---- Live AQI — EcoLab 172 full styles.css + refinery.css cascade.
   CAAM coordinates and Open-Meteo/CAMS data remain specific to 168. */
.aqi-wrap { position: relative; display: inline-flex; flex-shrink: 0; --aqi-color: var(--gray-1); }
.aqi-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  min-width: 92px;
  height: 34px;
  padding: 0.32rem 0.7rem;
  box-shadow: 0 2px 8px rgba(10, 38, 64, 0.12);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--ink-deep);
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aqi-trigger::after { content: ""; position: absolute; inset: -5px 0; }
.aqi-widget:hover,
.aqi-wrap.is-open .aqi-widget {
  border-color: var(--midnight);
  background: rgba(0, 0, 0, 0.02);
}
.aqi-wrap[data-state="loading"] .aqi-widget { opacity: 0.6; }
.aqi-trigger:focus-visible, .aqi-tooltip a:focus-visible { outline: 2px solid var(--midnight); outline-offset: 3px; }
.aqi-widget .aqi-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--ink-deep);
  opacity: 0.85;
}
.aqi-widget .aqi-value {
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  min-width: 1.4em;
  text-align: center;
}
.aqi-widget .aqi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aqi-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: background var(--dur) var(--ease);
}

/* tooltip card — hidden by default; JS toggles [hidden] attribute */
.aqi-tooltip[hidden] { display: none !important; }
.aqi-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(240px, calc(100vw - 2rem));
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.85rem 0.95rem 0.75rem;
  display: grid;
  gap: 0.45rem;
  text-align: left;
  color: var(--ink-deep);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  line-height: 1.55;
  text-transform: none;
  z-index: 60;
  cursor: default;
}
.aqi-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}
.aqi-tt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.aqi-tt-head {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.82rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.aqi-tt-label { color: var(--gray-1); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
.aqi-tt-station { font-weight: 500; color: #102f4a; }
.aqi-tt-main {
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.2rem 0.1rem;
  border-bottom: 1px solid rgba(20, 46, 62, 0.14);
  font-size: 1rem;
  font-weight: 700;
}
.aqi-tt-num {
  font-family: var(--font-serif, var(--font-sans));
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--ink-deep);
  font-feature-settings: "tnum" 1;
  line-height: 1;
}
.aqi-tt-status { font-size: var(--fs-body); color: var(--ink-deep); text-align: right; }
.aqi-tt-detail {
  justify-content: space-between;
  color: var(--gray-1);
  margin-top: 7px;
  font-size: 0.9rem;
}
.aqi-tt-detail > span:nth-child(2) {
  margin-left: auto;
  color: var(--ink-deep);
  font-feature-settings: "tnum" 1;
}
.aqi-tt-unit { color: var(--gray-1); }
.aqi-tt-foot {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
  color: var(--gray-1);
  font-size: 0.74rem;
}
.aqi-tt-link {
  color: var(--midnight);
  text-decoration: none;
  font-weight: 500;
}
.aqi-tt-link:hover { text-decoration: underline; }
.aqi-tt-source {
  display: block;
  margin-top: 8px;
  color: var(--gray-1);
  font-size: 0.68rem;
  opacity: 0.8;
}
.aqi-tt-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
}
.menu-toggle span { width: 28px; height: 2px; background: var(--ink); display: block; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow); }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 6. Buttons — CIS midnight blue with white text ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: 44px;                            /* WCAG 2.5.5 touch target */
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-size: var(--fs-caption);
  line-height: 1;
  color: #fff;
  background: var(--midnight);
  border: var(--btn-border-w) solid var(--midnight);
  border-radius: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover {
  background: var(--dark-blue);
  color: #fff;
  border-color: var(--dark-blue);
}
.btn:active { background: var(--blue-gray-2); }
.btn-outline {
  background: transparent;
  color: var(--midnight);
  border: var(--btn-border-w) solid var(--midnight);
}
.btn-outline:hover { background: var(--midnight); color: #fff; border-color: var(--midnight); }

.arrow-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  font-size: var(--fs-caption);
  color: var(--ink-deep);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink-deep);
  transition: color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.arrow-cta::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease);
}
.arrow-cta:hover { color: var(--ink-deep); border-bottom-color: var(--midnight); }
.arrow-cta:hover::after { transform: translateX(6px); }

.arrow-cta.light { color: var(--paper); border-bottom-color: var(--paper); }
.arrow-cta.light:hover { border-bottom-color: var(--midnight); color: var(--midnight); }

/* ---------- 7. Hero — Refinery style: image first, text after.
   No top padding; header is sticky so it flows naturally above hero. ---------- */
.hero {
  position: relative;
  background: var(--paper);
  padding-top: 0;
  margin-top: 0;
}
.hero-visual {
  position: relative;
}
.hero-image {
  width: 100%;
  /* Preserve the 16:9 composition without letting the 80px header + image
     push the overlaid subtitle below the first viewport. */
  height: min(56.25vw, calc(100vh - 80px));
  height: min(56.25vw, calc(100svh - 80px));
  max-height: 900px;
  min-height: min(360px, calc(100vh - 80px));
  min-height: min(360px, calc(100svh - 80px));
  overflow: hidden;
  background: var(--ink-deep);
  position: relative;
}
.hero-image video,
.hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-image .hero-video {
  position: absolute;
  inset: 0;
}
.hero-image .hero-video[hidden] { display: none; }
/* Fill the viewport edge to edge; keep the film's lower-left title in frame. */
.hero-image:has(.hero-video:not([hidden])) {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
}
.hero-image .hero-video {
  object-fit: cover;
  object-position: center bottom;
}
body:not(.caam-editor-enabled) .hero-visual:has(.hero-video:not([hidden])) .hero-sub-overlay {
  opacity: 0;
  pointer-events: none;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(4, 13, 35, 0.58));
}
@media (prefers-reduced-motion: reduce) {
  .hero-image .hero-video { display: none; }
}
.hero-sub-overlay {
  position: absolute;
  right: clamp(1rem, 3vw, 3.5rem);
  bottom: clamp(1.2rem, 3vw, 3rem);
  z-index: 3;
  width: min(46rem, calc(100% - 15rem));
}
.hero-sub-overlay .hero-sub {
  margin: 0;
  color: var(--white);
  font-family: var(--font-zh);
  font-size: clamp(1.3rem, 2.15vw, 2.15rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-align: right;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
/* Hero title row */
.hero-title-row {
  margin-bottom: var(--space-13);     /* 50px gap before body */
}
.hero-title-row h1 {
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.75rem);   /* 172 primary heading: 44px desktop */
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-deep);
  margin: 0;
  max-width: 18ch;
}
/* EN home hero */
.lang-en .hero-title-row h1 {
  font-family: var(--font-display);
  font-weight: 500;
  max-width: none;
}
@media (max-width: 560px) {
  .hero-sub-overlay {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .hero-sub-overlay .hero-sub {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
  }
}
/* Title block follows Figma: 260px from viewport edge in 1920 design.
   Shell already gives 210px; add content-indent ≈ 50px for the 260px target. */
.hero-text {
  padding: var(--space-13) var(--content-indent) var(--space-15);   /* 50 / 50 / 70 */
  max-width: 100%;
}
/* When .hero-text is reused as a section-title wrapper inside .section,
   drop the hero-only top/bottom padding so the wrapper just provides max-width. */
.section .hero-text { padding-top: 0; padding-bottom: 0; }
/* Standard breathing room between section title block and following content */
.section .hero-text + * { margin-top: var(--section-content-gap); }
/* Section title wrapper variant — eyebrow + jumbo with bottom space */
.section-head { margin-bottom: var(--section-content-gap); }
.hero-text .hero-sub {
  font-family: var(--font-zh);
  font-weight: var(--fw-light);                       /* 500 */
  font-size: var(--fs-h2);                            /* 28px */
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-default);
  color: var(--ink-deep);
  max-width: 34ch;
  margin: 0 0 var(--space-12);                         /* 42px */
}
.hero-text .hero-body {
  font-family: var(--font-zh);
  font-weight: var(--fw-light);                        /* 500 */
  font-size: var(--fs-lede);                            /* 20px */
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--ink-deep);
  margin: 0 0 var(--space-5);                           /* 15px */
}
/* ---------- 8. Page-Hero — Refinery style: image first, text below.
   No top padding; header is sticky so it flows naturally above hero. ---------- */
.page-hero {
  position: relative;
  background: var(--paper);
  padding-top: 0;
  margin-top: 0;
}
.page-hero-image {
  position: relative;
  width: 100%;
  height: clamp(360px, 46.875vw, 900px);
  overflow: hidden;
  background: var(--ink-deep);
}
.page-hero-image img,
.page-hero-image video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.page-hero-text {
  padding: var(--space-13) var(--content-indent) var(--space-15);
  max-width: none;
}
.page-hero-text .breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--gray-1);
  font-weight: 500;
  margin-bottom: var(--space-7);     /* 22px */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                /* 5px */
}
.page-hero-text .breadcrumb a { color: var(--gray-1); }
.page-hero-text .breadcrumb a:hover { color: var(--ink-deep); }
.page-hero-text .breadcrumb .sep { color: var(--gray-3); }
.page-hero-text h1 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.5rem);              /* Actual EcoLab 172 inner-page heading cascade. */
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  margin: 0 0 var(--space-3);
}
.page-hero-text h1 .h-zh {
  display: block;
  font-family: var(--font-zh);
  font-weight: 400;
  text-transform: none;
  font-size: 0.6em;
  letter-spacing: 0;
  margin-top: var(--space-3);                          /* 8px */
  color: var(--gray-1);
  line-height: var(--lh-snug);
}
.page-hero-text .lede {
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: var(--fs-lede);                           /* 22px — matches home hero */
  line-height: var(--lh-body);
  letter-spacing: 0;                                    /* aligned with hero-body */
  text-transform: none;
  color: var(--ink-deep);
  margin: var(--space-9) 0 0;                          /* 30px — generous breathing */
}
.page-hero-text .lede-zh {
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.55vw, 1.55rem);            /* 22.4 → 24.8px */
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--gray-1);
  margin-top: var(--space-7);                          /* 22px */
}

/* ---------- 9. Stats / Specs ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 4px solid var(--ink-deep);
  border-bottom: 4px solid var(--ink-deep);
}
.specs article {
  padding: 2.6rem 1.6rem;
  border-right: 1px solid var(--rule);
  display: grid;
  align-content: space-between;
  gap: 1.4rem;
  min-height: 240px;
  background: var(--paper);
  transition: background var(--dur-slow) var(--ease);
}
.specs article:last-child { border-right: 0; }
.specs article:hover { background: var(--paper-soft); }
.specs .spec-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
  font-weight: 600;
}
.specs .spec-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  color: var(--ink-deep);
  line-height: 0.94;
  letter-spacing: 0;
}
.specs .spec-value .unit {
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
  margin-left: 0.4rem;
}
.specs .spec-foot {
  font-size: var(--fs-caption);
  color: var(--gray-1);
  line-height: var(--lh-body);
}


/* ---------- 9b. Feat Sticky — 4 橫式標籤 + 滾動換圖 ---------- */
.feat-sticky {
  position: relative;
  padding-top: clamp(1.6rem, 3vw, 3rem);
  background: var(--paper);
}
.feat-stage {
  position: relative;
  height: calc(4 * 90vh);     /* 4 trigger zones × 90vh = total scroll length */
}
.feat-stage-stick {
  position: sticky;
  top: 80px;                  /* directly under the stable navigation */
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);  /* mobile: fit even with the URL bar visible */
  z-index: 0;
}
.feat-stage-stick > .shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(0.6rem, 1.2vw, 1.2rem);
  padding-bottom: clamp(0.6rem, 1.2vw, 1.2rem);
}
.feat-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
}
.feat-label {
  appearance: none;
  background: transparent;
  border: 0;
  padding: clamp(0.6rem, 1vw, 1rem) clamp(0.4rem, 0.8vw, 0.8rem);
  display: grid;
  grid-template-rows: 32px auto auto;
  align-content: start;
  gap: 0.4rem;
  text-align: left;
  cursor: pointer;
  color: var(--ink-deep);
  opacity: 0.32;                          /* inactive — heavily faded */
  transition: opacity var(--dur) var(--ease);
  font-family: inherit;
}
.feat-label.is-active { opacity: 1; }
.feat-label:hover { opacity: 0.7; }
.feat-label.is-active:hover { opacity: 1; }
.feat-label .ico {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: flex-start;
}
.feat-label .ico img { width: 28px; height: 28px; object-fit: contain; }
.feat-label strong {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);   /* 22 → 28px */
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: inherit;
}
.lang-en .feat-label {
  grid-template-rows: 32px minmax(4.2rem, auto) auto;
}
.feat-label .feat-sub {
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);   /* 17 → 19.2px */
  line-height: var(--lh-body);
  color: var(--gray-1);
}
.nowrap-token { white-space: nowrap; }
.feat-triggers {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
  z-index: 1;
}
.feat-trigger { width: 100%; }
.feat-photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--ink-deep);
}
.feat-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.feat-photo.is-active { opacity: 1; }
.feat-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .feat-labels { grid-template-columns: repeat(2, 1fr); }
  .feat-stage-stick { height: calc(100vh - 80px); height: calc(100svh - 80px); }
  .feat-stage { height: calc(4 * 80vh); }
}
@media (max-width: 520px) {
  .feat-labels { grid-template-columns: 1fr; gap: 0.4rem; }
  .feat-label { grid-template-rows: auto auto; padding: 0.4rem 0; }
  .feat-label .ico { display: none; }
  .feat-label .feat-sub { display: none; }
}

/* ---------- 9b'. Floors Sticky — 樓層設施分布滾動高亮 ---------- */
.floors-sticky {
  position: relative;
  padding-top: clamp(2rem, 4vw, 4rem);
  background: var(--paper);
}
.floors-stage {
  position: relative;
  height: calc(4 * 90vh);
}
.floors-stage-stick {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);
  /* Keep the following floor list from painting over the final sticky card
     while the scroll story releases at the section boundary. */
  z-index: 2;
  background: var(--paper);
}
.floors-stage-stick > .shell {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  padding-top: clamp(0.6rem, 1.2vw, 1.2rem);
  padding-bottom: clamp(0.6rem, 1.2vw, 1.2rem);
}
.floors-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.45fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.floors-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.8rem);
}
.floor-step {
  opacity: 0.32;
  border-left: 2px solid transparent;
  padding-left: clamp(0.8rem, 1.4vw, 1.4rem);
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.floor-step.is-active {
  opacity: 1;
  border-left-color: var(--midnight);
}
.floor-step .floor-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);   /* 15.7 → 17.6px */
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: 0.5rem;
}
.floor-step h3 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: var(--lh-snug);
  margin: 0 0 0.6rem;
  color: var(--ink-deep);
}
.floor-step p {
  margin: 0;
  font-size: clamp(1.1rem, 1.2vw, 1.2rem);     /* 17.6 → 19.2px */
  line-height: var(--lh-body);
  color: var(--gray-1);
  max-width: 38ch;
}
.floors-image {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* JS sets --img-top / --img-h (px) to the building image's actual rect
     within this column — overlays use those vars so they line up with the
     drawing, not the column. */
}
.floors-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* Left / right blur-fade — the section drawing has no full-width
     context, so trim the white margins softly. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* Overlays positioned via CSS variables that JS keeps in sync with the
   actual building-image rect (px), so they line up with the drawing
   regardless of how object-fit centered the image inside the column. */
.floors-dim {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.55);
  transition: top 700ms var(--ease), height 700ms var(--ease);
  pointer-events: none;
  z-index: 1;
}
.floors-dim--top {
  top: var(--img-top, 0);
  height: calc(var(--img-h, 100%) * var(--hi-start, 0.04));
}
.floors-dim--bottom {
  top: calc(var(--img-top, 0) + var(--img-h, 100%) * var(--hi-end, 0.13));
  height: calc(var(--img-h, 100%) * (1 - var(--hi-end, 0.13)));
}
.floors-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--img-top, 0) + var(--img-h, 100%) * var(--hi-start, 0.04));
  height: calc(var(--img-h, 100%) * (var(--hi-end, 0.13) - var(--hi-start, 0.04)));
  border-top: 1.5px solid var(--midnight);
  border-bottom: 1.5px solid var(--midnight);
  background: rgba(12, 65, 96, 0.04);
  box-shadow: 0 0 0 3px rgba(12, 65, 96, 0.06);
  transition: top 700ms var(--ease), height 700ms var(--ease);
  pointer-events: none;
  z-index: 2;
}

.floors-triggers {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
  z-index: 1;
}
.floor-trigger { width: 100%; }

/* English floor descriptions take more lines than the Chinese copy. On
   short desktop viewports (notably Safari with its browser chrome visible),
   compact only this story so the basement card remains fully readable. */
@media (min-width: 901px) and (max-height: 940px) {
  .lang-en .floors-text {
    gap: clamp(0.5rem, 1.25svh, 0.75rem);
  }
  .lang-en .floor-step .floor-tag {
    font-size: clamp(0.85rem, 1.8svh, 1rem);
    margin-bottom: 0.2rem;
  }
  .lang-en .floor-step h3 {
    font-size: clamp(1.25rem, 3.25svh, 2rem);
    margin-bottom: 0.3rem;
  }
  .lang-en .floor-step p {
    font-size: clamp(0.95rem, 2.1svh, 1.1rem);
    line-height: 1.45;
    max-width: 48ch;
  }
}

@media (max-width: 900px) {
  /* Mobile keeps the scroll story: the cross-section pins on top, the four
     floor rows sit compact below (descriptions collapse unless active), and
     the center scan-line keeps driving the highlight. */
  .floors-stage { height: calc(4 * 75svh); }
  .floors-stage-stick {
    top: 64px;
    height: calc(100svh - 64px);
    /* Solid panel that clips its own content and paints above the next
       section — otherwise on short screens the overflowing step text and
       the following heading render through each other. */
    z-index: 2;
    background: var(--paper);
    overflow: hidden;
  }
  .floors-grid {
    grid-template-columns: 1fr;
    /* Fixed image row: a flexible row would resize the drawing every time
       the active description's length changes. */
    grid-template-rows: min(30svh, 340px) auto;
    gap: 0.8rem;
    height: 100%;
  }
  .floors-image { order: -1; min-height: 0; }
  .floors-text {
    justify-content: flex-start;
    gap: 0.55rem;
    padding-bottom: 0.6rem;
  }
  .floor-step h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
  .floor-step .floor-tag { margin-bottom: 0.1rem; font-size: 0.88rem; }
  .floor-step p { display: none; font-size: 0.98rem; line-height: 1.5; }
  .floor-step.is-active p { display: block; }
}

/* ---------- 9c. Transit Sticky — 3 個交通項目 + sticky 地圖路線動畫 ---------- */
.transit-sticky {
  position: relative;
  padding: clamp(2.4rem, 4vw, 4rem) 0;
  background: var(--paper);
}
.transit-sticky .section-title { margin-bottom: clamp(1.4rem, 2.4vw, 2.4rem); }
.lang-en .transit-sticky .section-title { font-weight: 500; }
.transit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  /* must stretch so map-col grows to match text-col height; otherwise sticky has no room to stick */
  align-items: stretch;
  padding: 0 var(--shell-pad);
  max-width: 1600px;
  margin: 0 auto;
}
.transit-text { display: flex; flex-direction: column; gap: 0; }
.transit-step {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.4rem, 2vw, 2rem) 0;
  border-top: 1px solid var(--rule);
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease);
}
.transit-step:last-child { border-bottom: 1px solid var(--rule); }
.transit-step.is-active { opacity: 1; }
.transit-step .ico {
  width: 36px; height: 36px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: flex-start;
  margin-bottom: 0.8rem;
}
.transit-step .ico img {
  width: 32px; height: 32px;
  object-fit: contain;
  opacity: 0.85;
}
.transit-step.is-active .ico img { opacity: 1; }
.transit-step h3 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);    /* 28 → 41px */
  line-height: var(--lh-snug);
  margin: 0 0 0.8rem;
  color: var(--ink-deep);
}
.transit-step p {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--gray-1);
}
.transit-step--wide {
  min-height: 80vh;       /* longer scroll → markers have time to populate */
}
.transit-step--wide h3 {
  max-width: 22ch;
}
.transit-step--wide p { max-width: 38ch; }
.transit-map-col { position: relative; }
.transit-map-stick {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  height: clamp(420px, 72vh, 760px);
  border: 1px solid var(--rule);
  background: var(--paper-soft);
}
.transit-map-stick .leaflet-map { width: 100%; height: 100%; }

@media (max-width: 900px) {
  /* Mobile keeps the desktop interaction: the map pins below the header while
     the four steps scroll past and re-draw their routes. `display: contents`
     lifts map + steps into one flex column so the sticky map can travel the
     full height of the step list. */
  .transit-grid { display: flex; flex-direction: column; }
  .transit-text,
  .transit-map-col { display: contents; }
  .transit-map-stick {
    order: -1;
    position: sticky;
    top: 64px;
    z-index: 5;
    height: min(42svh, 400px);
  }
  .transit-step {
    min-height: 52svh;   /* text stays vertically centered so it lingers in the visible band below the map */
  }
  .transit-step--wide { min-height: 62svh; }
  .transit-step:first-of-type { margin-top: 1.2rem; }
}

/* ---------- 9d. Awards — all six credentials visible in a static grid ---------- */
.awards-section { overflow: visible; }
.awards-overview {
  width: min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));
  margin: var(--section-content-gap) auto 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.award-card {
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  background: transparent;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "badge title"
    "badge copy";
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem);
  row-gap: 0.75rem;
  align-content: start;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.award-card:nth-child(3n) { border-right: 0; }
.award-card:nth-last-child(-n + 3) { border-bottom: 0; }
.awards-grid .award-card img {
  grid-area: badge;
  align-self: start;
  width: 96px;
  height: 96px;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  scroll-snap-align: none;
  background: transparent;
}
.awards-grid .award-card img.award-badge--round {
  border-radius: 50%;
  clip-path: circle(48% at 50% 50%);
}
.award-card h3 {
  grid-area: title;
  overflow-wrap: anywhere;
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.55vw, 1.65rem);   /* 22.4 → 26.4px */
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--ink-deep);
}
.award-card p {
  grid-area: copy;
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.15rem);      /* 16 → 18.4px */
  line-height: var(--lh-body);
  color: var(--gray-1);
}
@media (max-width: 1100px) {
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award-card:nth-child(n) { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .award-card:nth-child(2n) { border-right: 0; }
  .award-card:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .awards-grid { grid-template-columns: minmax(0, 1fr); }
  .award-card:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--rule); }
  .award-card:last-child { border-bottom: 0; }
  .award-card {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-inline: 1rem;
  }
  .awards-grid .award-card img { width: 72px; height: 72px; }
}

/* ---------- 10. Text Block — Refinery single-column flow ---------- */
.text-block {
  display: block;
  max-width: 920px;
}
.text-block .tb-label .eyebrow { margin-bottom: 1rem; }
.text-block h2 { margin: 0 0 1rem; }
.text-block .tb-body { margin-top: 1rem; }
.text-block .tb-body p { color: var(--ink); line-height: var(--lh-body); max-width: 70ch; font-size: var(--fs-body); }
.text-block .tb-body p + p { margin-top: 1rem; }

/* ---------- 11. Text + Icons — single column flow ---------- */
.text-icons {
  display: block;
  max-width: 920px;
}
.text-icons h2 { margin-bottom: 1rem; max-width: 16ch; }
.text-icons .icon-list { margin-top: 2rem; }

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.icon-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.6rem;
  align-items: center;
  min-width: 0;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.icon-list .ico {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
.icon-list .ico img { width: 32px; height: 32px; opacity: 0.85; object-fit: contain; }
.icon-list .ico--accent img { opacity: 1; }
/* When the whole li is wrapped in an anchor (404 quick links) */
.icon-list li:has(> a) {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  gap: 1rem;
}
.icon-list li > a {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.icon-list li:has(> a):hover .ic-text strong { color: var(--midnight); }
.icon-list .ic-arrow {
  margin-left: auto;
  color: var(--gray-1);
  font-size: var(--fs-lede);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-list li:has(> a):hover .ic-arrow {
  color: var(--midnight);
  transform: translate(2px, -2px);
}

.icon-list .ic-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.icon-list .ic-text strong {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);    /* 17.6 → 20px */
  color: var(--ink-deep);
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: anywhere;
}
.venue-equipment-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.5rem;
}
.venue-equipment-list li {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1rem;
}
.venue-equipment-list .ic-text strong {
  overflow-wrap: normal;
  word-break: normal;
  line-break: auto;
}
@media (max-width: 1200px) {
  .venue-equipment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.icon-list .ic-text span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);  /* 15.2 → 16.8px */
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
}
.neighborhood-page .icon-list .ic-text span {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 12. Image Grid — Refinery: 1:1 square default, 1fr 1fr or 3-col,
   max-height 260/400/500 at breakpoints (extracted from home__three-per-row) ---------- */
.image-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.image-grid figure {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 1 / 1;                       /* extracted default */
}
/* Certification card — image badge + h3 + body */
.cert-card {
  background: var(--paper-soft);
  padding: 3rem 2rem;
  border-top: 4px solid var(--midnight);
}
.cert-card img { height: 120px; width: auto; margin-bottom: 2rem; }
.cert-card h3 { margin-top: 1rem; }
.cert-card p  { margin-top: 1.2rem; }

/* Mini cert card — used inside .cert-grid on the homepage */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink-deep);
}
.cert-card--mini {
  background: var(--white);
  padding: 2.4rem 1.6rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cert-grid > .cert-card--mini:nth-child(3n) { border-right: 0; }
.cert-grid > .cert-card--mini:nth-last-child(-n+3) { border-bottom: 0; }
.cert-card--mini img { height: 80px; width: auto; margin-bottom: 1.2rem; }
.cert-card--mini p  { margin-top: 0.6rem; }

/* Advantage card — 4-up grid, no gap, hairline grid borders */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.advantage-card {
  padding: 2.6rem 1.6rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.advantage-grid > .advantage-card:last-child { border-right: 0; }
.advantage-card h3 { margin-top: 1.2rem; }
.advantage-card p  { margin-top: 1rem; }
.advantage-card .trend { color: var(--midnight-2); }

/* Card pattern (article wraps figure + heading + description) — 4/3 photo */
.image-grid article > figure,
.venue-card-photo > figure {
  aspect-ratio: 4 / 3;
  margin: 0 0 1.2rem;
  overflow: hidden;
}
/* Aspect-ratio modifier for direct figure children of .image-grid */
.image-grid.image-grid--4-3 > figure { aspect-ratio: 4 / 3; }
/* Per-figure aspect overrides — used in mixed grids */
.image-grid figure.fig-4-3  { aspect-ratio: 4 / 3; }
.image-grid figure.fig-16-9 { aspect-ratio: 16 / 9; }
.image-grid article > h3 + .section-body-zh,
.image-grid article > .h-m + .section-body-zh {
  margin-top: 0.6rem;
}
.image-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all var(--dur-slide) var(--ease);   /* 500ms ease-in-out — extracted */
}
.image-grid figure:hover img { transform: scale(1.04); }
.image-grid figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);  /* 15.2 → 16.8px */
  letter-spacing: var(--tracking-default);
  text-transform: uppercase;
  color: var(--gray-1);
  transition: color var(--dur) var(--ease);
}
.image-grid figure:hover figcaption { color: var(--midnight); }

.pillars {
  display: grid;
  /* Auto-fit so 3-item pages don't leave an empty 4th column */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.pillars article {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body  body";
  align-content: start;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.9rem;
  min-height: 250px;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.pillars article > .ico {
  grid-area: icon;
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pillars article > .ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* `.ico--accent` keeps the icon's own dark linework — no midnight tile, no invert */
.pillars article > .ico.ico--accent { background: transparent; }
.pillars article > .ico.ico--accent img { filter: none; }

.neighborhood-pillars article {
  min-height: 220px;
}
@media (max-width: 720px) {
  .neighborhood-pillars article {
    min-height: 180px;
  }
}

/* Venue features — 5 features in one row at desktop, wrap on tablet/mobile */
.venue-features { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .venue-features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .venue-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .venue-features { grid-template-columns: 1fr; } }

/* Venue 特點 — 真實照片 (非 icon)，4 張一列 */
.feature-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 2vw, 2rem);
}
@media (max-width: 900px)  { .feature-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .feature-photos { grid-template-columns: 1fr; } }
.feature-photo-card {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.feature-photo-num {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--midnight);
  color: var(--paper-soft);
  font-family: var(--font-serif, var(--font-display));
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}
.feature-photo-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-soft);
}
.feature-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.feature-photo-card:hover .feature-photo-img img { transform: scale(1.04); }
.feature-photo-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feature-photo-card figcaption h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  line-height: var(--lh-snug);
  color: var(--midnight);
}
.feature-photo-card figcaption p {
  margin: 0;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: var(--lh-relaxed);
  color: var(--ink-deep);
}

/* Venue hero — LEED Platinum 標章 旁置於說明段落左側 */
.lede-with-badge {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 2vw, 2rem);
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
}
.lede-with-badge .leed-badge {
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 140px);
  height: clamp(96px, 11vw, 140px);
  object-fit: contain;
  margin-top: 0.25rem;
}
.lede-with-badge .lede {
  margin: 0;
  flex: 1 1 auto;
}
@media (max-width: 600px) {
  .lede-with-badge { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lede-with-badge .leed-badge { width: 96px; height: 96px; }
}

.pillars h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.55rem, 1.75vw, 1.75rem);  /* 24.8 → 28px */
  line-height: var(--lh-snug);
}
.pillars p {
  grid-area: body;
  margin: 0;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);   /* 17 → 19.2px */
  line-height: var(--lh-body);
  color: var(--gray-1);
}
/* 對角階梯排版 — 01 在右上、04 在左下 */
.pillars--stair {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  border: 0;
  margin-top: clamp(2rem, 4vw, 4rem);
}
.pillars--stair article {
  border: 0;
  min-height: 0;
  background: var(--paper-soft);
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  border-top: 4px solid var(--midnight);
}
.pillars--stair article:nth-child(2) {
  background: var(--misty-blue);
  border-top-color: var(--blue-gray-2);
}
.pillars--stair article:nth-child(3) {
  background: var(--paper-deep);
  border-top-color: var(--cat-dine);
}
.pillars--stair article:nth-child(4) {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--cat-health);
}
.pillars--stair article:nth-child(1) { grid-column: 4; grid-row: 1; }
.pillars--stair article:nth-child(2) { grid-column: 3; grid-row: 2; }
.pillars--stair article:nth-child(3) { grid-column: 2; grid-row: 3; }
.pillars--stair article:nth-child(4) { grid-column: 1; grid-row: 4; }
@media (max-width: 900px) {
  .pillars--stair {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
  }
  .pillars--stair article:nth-child(1) { grid-column: 2; grid-row: 1; }
  .pillars--stair article:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pillars--stair article:nth-child(3) { grid-column: 2; grid-row: 3; }
  .pillars--stair article:nth-child(4) { grid-column: 1; grid-row: 4; }
}
@media (max-width: 560px) {
  .pillars--stair {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .pillars--stair article:nth-child(n) { grid-column: 1; grid-row: auto; }
}

.pillar-num {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-deep);
}

/* Homepage benefits — static rows using the shared icon-list pattern */
.icon-list.benefits-list li {
  grid-template-columns: 64px minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(1.2rem, 2.4vw, 2.5rem);
  padding-block: clamp(2rem, 3.5vw, 3.5rem);
}
.benefits-list .ico {
  margin-top: 0.15rem;
}
.benefits-list h3 {
  margin: 0;
  color: var(--ink-deep);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: var(--lh-snug);
}
.benefits-list p {
  margin: 0;
  color: var(--gray-1);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: var(--lh-loose);
}
.benefits-list .arrow-up,
.benefits-list .arrow-down {
  color: var(--midnight);
}
@media (max-width: 820px) {
  .icon-list.benefits-list li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 1rem 1.25rem;
  }
  .benefits-list p {
    grid-column: 2;
  }
}

.ig-tall   { grid-column: span 5; aspect-ratio: 4/5; }
.ig-wide   { grid-column: span 7; aspect-ratio: 16/9; }
.ig-half   { grid-column: span 6; aspect-ratio: 4/3; }
.ig-third  { grid-column: span 4; aspect-ratio: 4/5; }
.ig-2-3    { grid-column: span 8; aspect-ratio: 16/9; }

/* ---------- 13. Text Overlay — simplified: full-width photo + text below ---------- */
.text-overlay {
  position: relative;
  background: var(--paper);
  padding: 0;
}
.text-overlay .to-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-deep);
}
.text-overlay .to-bg img,
.text-overlay .to-bg video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;
}
.text-overlay .to-content {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  max-width: 100%;
}
.text-overlay h2 {
  color: var(--ink-deep);
  max-width: 30ch;
  margin: 0 0 1.4rem;
}
.text-overlay p {
  color: var(--ink-deep);
  max-width: 80ch;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: var(--lh-h3);
  letter-spacing: 0;
}

/* ---------- 14. Spec Sheet ---------- */
.spec-sheet {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.spec-sheet > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec-sheet dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-1);
}
.spec-sheet dd {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);    /* 17.6 → 20px */
  color: var(--ink-deep);
  text-align: right;
}

/* Keep floor-copy trademarks compact without expanding the text line. */
.floor-list sup,
.floor-step sup {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.6rem;
}
.hero-actions .caption {
  flex-basis: 100%;
  letter-spacing: var(--tracking-default);
  text-transform: none;
  line-height: var(--lh-body);
}
.hero-actions .caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

/* Venue page — emphasize rental-type headings, keep descriptions regular. */
.venue-page .section-title {
  font-weight: 700;
  font-size: clamp(2.1rem, 3vw, 3rem);            /* 33.6 → 48px */
}
.venue-page .section-body {
  font-size: clamp(1.5rem, 1.7vw, 1.7rem);        /* 24 → 27.2px */
  max-width: none;
}
.venue-hero {
  min-height: clamp(560px, 72svh, 820px);
  background: var(--ink-deep);
  overflow: hidden;
}
.venue-hero .page-hero-image {
  height: clamp(560px, 72svh, 820px);
}
.venue-hero .page-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(7, 19, 48, 0.28));
  pointer-events: none;
}
.venue-hero .venue-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.venue-hero .page-hero-text {
  width: 100%;
  padding: clamp(2rem, 5vw, 5rem) var(--content-indent);
}
.venue-hero .page-hero-text h1 {
  max-width: none;
  margin: 0;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.08;
  text-shadow: 0 2px 12px rgba(7, 19, 48, 0.28);
}
.venue-hero .page-hero-text .breadcrumb,
.venue-hero .page-hero-text .breadcrumb a,
.venue-hero .page-hero-text .breadcrumb .sep {
  color: rgba(255, 255, 255, 0.82);
}
.venue-hero .page-hero-text .breadcrumb a:hover { color: var(--white); }
.venue-intro-band {
  padding: clamp(3rem, 6vw, 6rem) 0;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--rule);
}
.venue-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.venue-intro-grid .lede-with-badge {
  margin: 0;
  align-items: flex-start;
}
.venue-intro-grid .lede {
  margin: 0;
  color: var(--ink-deep);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
}
.venue-intro-actions {
  min-width: 0;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--rule);
  container-type: inline-size;
}
.venue-intro-actions h2 {
  max-width: none;
  margin: 0.65rem 0 0;
  font-family: var(--font-zh);
  font-size: clamp(1.55rem, 9cqw, 2.6rem);
  line-height: var(--lh-snug);
  color: var(--ink-deep);
}
html:not([lang="en"]) .venue-intro-actions h2 {
  white-space: nowrap;
  word-break: keep-all;
}
.venue-intro-actions .hero-actions { align-items: flex-start; }
.venue-intro-actions .caption { color: var(--gray-1); }
.venue-hero-copy {
  display: grid;
  gap: 1rem;
  flex: 1 1 auto;
}
.venue-hero-copy .lede { max-width: none; }
@media (max-width: 900px) {
  .venue-intro-grid { grid-template-columns: 1fr; }
  .venue-intro-actions {
    padding: clamp(1.5rem, 5vw, 2.5rem) 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 600px) {
  .venue-hero,
  .venue-hero .page-hero-image { min-height: 460px; height: 68svh; }
  .venue-hero .page-hero-text { padding: 2rem 0; }
  .venue-hero .page-hero-text h1 { font-size: clamp(1.45rem, 6.2vw, 2rem); }
  .venue-intro-grid .lede-with-badge { flex-direction: row; }
  .venue-intro-grid .lede-with-badge .leed-badge { width: 76px; height: 76px; }
  .venue-intro-grid .lede-with-badge { gap: 1rem; }
}
.link-button,
.inline-action {
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.inline-action {
  color: var(--midnight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.inline-action:hover,
.inline-action:focus-visible { color: var(--midnight-2); }
.venue-page .spec-sheet > div {
  grid-template-columns: minmax(9rem, 0.34fr) minmax(0, 1fr);
}
.venue-page .spec-sheet dd {
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .venue-page .spec-sheet > div {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .venue-page .spec-sheet dd {
    text-align: left;
    overflow-wrap: break-word;
  }
}

.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.venue-grid-three { grid-template-columns: repeat(3, 1fr); }
.venue-card {
  display: grid;
  align-content: start;
  gap: 1.4rem;
  min-height: 260px;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.venue-card-photo { gap: 1rem; }
.venue-card-detail {
  gap: 1.1rem;
}
.venue-card figure {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}
.venue-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.venue-media-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.venue-media-strip figure {
  aspect-ratio: 4 / 3;
}

/* ---------- Venue Carousel — 一個畫面顯示一個場地，上方 tab 高亮 ---------- */
.venue-carousel {
  margin-top: clamp(1.6rem, 3vw, 3rem);
}
.venue-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  align-items: baseline;
  padding-bottom: clamp(1rem, 1.6vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
}
.venue-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);   /* 20 → 26px */
  letter-spacing: 0;
  color: var(--ink-deep);
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease);
  position: relative;
}
.venue-tab:hover { opacity: 0.6; }
.venue-tab.is-active { opacity: 1; }
.venue-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--midnight);
}

.venue-stage {
  position: relative;
}
.venue-viewport {
  overflow: hidden;       /* clip the sliding slides */
}
.venue-track {
  display: flex;
  width: 100%;
  transition: transform 500ms var(--ease);
}
.venue-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  padding: 0;
  background: transparent;
  align-items: start;
}
.venue-slide-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}
.venue-slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.venue-slide-body { display: flex; flex-direction: column; gap: 1.2rem; }
.venue-slide-title {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 3rem);            /* 32 → 48px — big single name */
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
  color: var(--ink-deep);
}
.venue-slide .mini-spec { margin: 0; }

.venue-arrow {
  position: absolute;
  top: 30%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-deep);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  z-index: 2;
}
.venue-arrow:hover { background: var(--midnight); color: #fff; }
.venue-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.venue-arrow--prev { left: clamp(-1rem, -1vw, 0.4rem); }
.venue-arrow--next { right: clamp(-1rem, -1vw, 0.4rem); }

@media (max-width: 800px) {
  .venue-tabs { gap: 0.8rem 1.2rem; }
  .venue-slide { grid-template-columns: 1fr; }
  .venue-arrow { display: none; }
}
.mini-spec {
  display: grid;
  gap: clamp(1.2rem, 1.6vw, 1.6rem);   /* more breathing between rows */
  margin: 0;
}
.mini-spec div {
  display: grid;
  gap: 0.35rem;                          /* slight breathing between label and value */
}
.mini-spec dt {
  font-family: var(--font-zh);
  font-size: clamp(0.9rem, 0.95vw, 1rem);      /* 14 → 16px — smaller than dd */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-3);                         /* light grey — recedes vs the dark value */
}
.mini-spec dd {
  margin: 0;
  color: var(--ink-deep);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);    /* 17.6 → 20px */
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.venue-page a[href^="tel:"] { text-decoration: none; border-bottom: 0; }

.mini-spec a,
.spec-sheet a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.mini-spec .equipment-tags {
  justify-content: flex-start;
}
/* Equipment chips — flat: icon + label, no background, no border */
.equipment-tags > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.4rem 0.2rem 0;
  font-family: var(--font-zh);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-deep);
}
.equipment-tags .equip-i > img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
}
.equipment-tags .equip-i > span {
  display: inline;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.venue-note {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-deep);
}
.venue-note p { margin: 0; }
.venue-note p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.venue-note a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.venue-regus-section .mini-spec > div:has(dt[data-zh="費用"]),
.venue-regus-section .spec-sheet > div:has(dt[data-zh="費用"]) {
  display: none;
}

.split-editorial {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  gap: var(--gap-xl);
  align-items: start;
}
.split-editorial .section-title { max-width: 12ch; }

.resource-downloads {
  display: grid;
  border-top: 1px solid var(--rule);
}
.resource-downloads a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule);
}
.resource-downloads strong {
  font-size: var(--fs-body);
  color: var(--ink-deep);
}
.resource-downloads span {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
}
.resource-downloads a::after {
  content: "↓";
  font-size: var(--fs-body);
  color: var(--ink-deep);
}

.team-section {
  align-items: start;
}
.team-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.team-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1rem, 2.5vw, 2.4rem);
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
/* 全寬版本 — 匹配 Figma：title 在上、dl 全寬 */
.team-list--wide { margin-top: clamp(2rem, 3vw, 3rem); }
.team-list--wide > div {
  grid-template-columns: minmax(140px, 0.25fr) minmax(0, 0.75fr);
}
.team-list dt {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-1);
}
.team-list dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);    /* 17.6 → 20px */
  line-height: var(--lh-body);
  color: var(--ink-deep);
  overflow-wrap: anywhere;
}
.team-list dd span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gray-1);
}

/* ---------- 15. CTA Strip — EcoLab dark band and light invitation ---------- */
.cta-strip {
  background: var(--dark-blue);
  color: var(--white);
  min-height: 178px;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  display: flex;
  align-items: center;
}
.cta-strip .shell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  text-align: left;
}
.cta-strip h2 {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--white);
}
.cta-strip .arrow-cta {
  flex-shrink: 0;
  background: var(--white);
  color: var(--dark-blue);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 0.5rem 1.6rem;
  min-height: 44px;
  border: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.cta-strip .arrow-cta::after { content: none; }
.cta-strip .arrow-cta:hover { background: var(--misty-blue); color: var(--dark-blue); }

/* Homepage invitation uses the same dark/light treatment as interior CTAs. */
.newsletter-band {
  background: var(--dark-blue);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  min-height: 178px;
  display: flex;
  align-items: center;
}
.newsletter-band .shell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
}
.newsletter-band h2 { margin: 0; color: var(--white); }
.newsletter-band .nb-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--white);
}
.newsletter-band .arrow-cta {
  min-width: 180px;
  justify-content: center;
  background: var(--white);
  color: var(--dark-blue);
  border-bottom: 0;
}
.newsletter-band .arrow-cta:hover {
  background: var(--misty-blue);
  color: var(--dark-blue);
}
.newsletter-band .btn {
  min-width: 180px;
  justify-content: center;
  flex-shrink: 0;
  background: var(--white);
  border-color: var(--white);
  color: var(--dark-blue);
}
.newsletter-band .btn:hover {
  background: var(--misty-blue);
  border-color: var(--misty-blue);
  color: var(--dark-blue);
}
.newsletter-band form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 480px;
}
.newsletter-band input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--midnight);
  padding: 0.6rem 0.4rem;
  color: var(--dark-blue);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  outline: none;
  text-transform: uppercase;
}
.newsletter-band input[type="email"]::placeholder { color: rgba(7, 19, 48, 0.55); text-transform: uppercase; }
.newsletter-band button {
  background: var(--midnight);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 0 1.6rem;
  min-height: 44px;
  align-self: end;
}
.newsletter-band button:hover { background: var(--ink); }

/* Shared title hierarchy retains CAAM body sizing and lighter, measured headings. */
.section-title {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);            /* Actual EcoLab 172 shared section heading. */
  letter-spacing: 0.02em;
  line-height: var(--lh-snug);
  color: var(--ink-deep);
  margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
}
.section-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.55vw, 1.55rem);           /* 22.4 → 24.8px */
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-default);
  color: var(--ink-deep);
  margin: 0;
}
.section-body-zh {
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.2vw, 1.2rem);             /* 17.6 → 19.2px */
  line-height: var(--lh-body);
  color: var(--gray-1);
  margin: var(--space-5) 0 0;
}
.learn-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);                        /* 14px */
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-deep);
  margin-top: var(--space-9);                          /* 28px */
  padding-bottom: var(--space-3);                      /* 8px */
  border-bottom: 1px solid var(--ink-deep);
  transition: border-color var(--dur) var(--ease);
}
.learn-more:hover { border-bottom-color: var(--midnight); }

/* Inline "了解更多 / read more" link inside body copy */
.inline-link {
  color: var(--midnight);
  text-decoration: underline;
  margin-left: 0.4rem;
}
.inline-link:hover { color: var(--dark-blue); }

/* Refinery overlay wordmark style — used over section image */
.feature-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-deep);
  margin-bottom: 2.4rem;
}
.feature-image img,
.feature-image video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.contact-map-frame {
  min-height: 360px;
  margin-bottom: 0;
  background: var(--paper-soft);
}
.contact-map-frame .leaflet-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--paper-soft);
}

.office-solution-grid,
.office-regus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 2.4rem;
}
.office-solution-grid article,
.office-regus-grid article {
  background: var(--white);
  padding: clamp(1.6rem, 3vw, 3rem);
  min-width: 0;
}
.office-solution-grid article:nth-child(2) {
  background: var(--paper-soft);
}
.regus-title-row,
.regus-section-title {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.4vw, 1.4rem);
  flex-wrap: wrap;
}
.regus-title-row h3,
.regus-section-title .section-title {
  margin-bottom: 0;
}
.regus-logo {
  display: block;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.regus-logo--card {
  height: clamp(1.7rem, 2vw, 2.25rem);
  max-width: min(10rem, 46%);
}
.regus-logo--section {
  height: clamp(2.2rem, 3.2vw, 3.6rem);
  max-width: min(14rem, 48%);
}
.regus-section-title {
  margin-bottom: var(--space-11);
}
.office-solution-grid h3,
.office-regus-grid h3 {
  margin: 0.8rem 0 0;
  font-family: var(--font-zh);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: var(--lh-snug);
  color: var(--ink-deep);
}
.office-solution-grid .regus-title-row h3 {
  margin: 0;
}
.office-solution-grid p,
.office-regus-grid p {
  margin: 1rem 0 0;
  color: var(--gray-1);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}
.office-solution-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: var(--space-9);
}
.office-solution-actions .learn-more {
  min-height: 44px;
  margin-top: 0;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.office-solution-actions .link-button {
  color: var(--midnight);
  border-bottom-color: var(--midnight);
}
.office-solution-actions .learn-more:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 4px;
}
.office-regus-grid {
  align-items: stretch;
}
.office-regus-grid figure {
  margin: 0 0 1.4rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}
.office-regus-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.office-regus-grid + .hero-link {
  margin-top: 2rem;
}

.ready-office-floors {
  display: grid;
  gap: clamp(4rem, 7vw, 7rem);
  margin-top: 2.4rem;
}
.ready-office-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.ready-office-intro > .hero-text {
  min-height: 100%;
}
.ready-office-qr-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-deep);
  text-align: left;
  cursor: pointer;
}
.section .ready-office-intro > .ready-office-qr-card {
  margin-top: 0;
}
.ready-office-qr-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--white);
}
.ready-office-qr-card span {
  display: block;
  margin-top: 0.65rem;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.ready-office-qr-card:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 5px;
}
.ready-office-floor {
  min-width: 0;
  padding-top: clamp(1.5rem, 2.4vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.ready-office-floor-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 2rem;
}
.ready-office-floor-head > .eyebrow {
  align-self: start;
  margin-bottom: clamp(1.45rem, 2.6vw, 2.5rem);
}
.ready-office-floor-head h3 {
  margin: 0 0 clamp(0.3rem, 0.7vw, 0.65rem);
  font-family: var(--font-zh);
  font-size: clamp(1.6rem, 2.4vw, 2.5rem);
  line-height: var(--lh-snug);
  color: var(--ink-deep);
}
.ready-office-floor-head p {
  margin: 0;
  max-width: 44rem;
  color: var(--gray-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ready-office-gallery .carousel-track > figure {
  aspect-ratio: 4 / 3;
}
.ready-office-floors + .hero-link {
  margin-top: clamp(3rem, 5vw, 5rem);
}
@media (max-width: 720px) {
  .ready-office-intro {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .ready-office-intro { grid-template-columns: 1fr; }
  .ready-office-qr-card { width: min(170px, 48vw); }
}

.amenity-mini-carousel {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}
.image-grid .amenity-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.amenity-card > .amenity-mini-carousel { flex-shrink: 0; }
.amenity-card > .amenity-card-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
}
.amenity-mini-carousel:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 3px;
}
.amenity-mini-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  min-width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.amenity-mini-track::-webkit-scrollbar { display: none; }
.amenity-mini-track:active { cursor: grabbing; }
.amenity-mini-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}
.amenity-mini-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink-deep);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(7, 19, 48, 0.16);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.amenity-mini-arrow:hover { background: var(--white); }
.amenity-mini-arrow:disabled { opacity: 0.3; cursor: default; }
.amenity-mini-arrow--prev { left: 0.75rem; }
.amenity-mini-arrow--next { right: 0.75rem; }
.amenity-mini-carousel--single .amenity-mini-arrow { display: none; }

@media (max-width: 760px) {
  .office-solution-grid,
  .office-regus-grid {
    grid-template-columns: 1fr;
  }
  .regus-section-title {
    align-items: flex-start;
    gap: 0.8rem;
  }
  .regus-logo--section {
    height: 2.2rem;
    max-width: 11rem;
  }
}

/* Accessibility wayfinding — generated clean plan with deterministic route overlays. */
.accessibility-section {
  overflow: visible;
  background: var(--paper-soft);
}
.accessibility-intro {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.access-wayfinding {
  position: relative;
  overflow: visible;
  border-top: 1px solid var(--ink-deep);
  border-bottom: 1px solid var(--ink-deep);
  background: var(--white);
}
.access-wayfinding-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.4rem, 2.5vw, 2.4rem);
}
.access-wayfinding-head h3 {
  margin: 0.45rem 0 0;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.access-route-tabs,
.access-phase-tabs {
  flex: 0 0 auto;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  border: 0;
}
.access-route-tabs .venue-tab,
.access-phase-tabs .venue-tab {
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  letter-spacing: 0;
  white-space: nowrap;
}
.access-route-tabs .venue-tab:focus-visible,
.access-phase-tabs .venue-tab:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 5px;
}
.access-wayfinding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
  align-items: stretch;
  border-top: 1px solid var(--rule);
}
.access-map-col {
  position: relative;
  min-width: 0;
}
.access-map-stick {
  position: sticky;
  top: clamp(80px, 10vh, 108px);
}
.access-map-frame {
  min-width: 0;
  margin: 0;
  padding: clamp(0.7rem, 1.5vw, 1.25rem);
  border-right: 1px solid var(--rule);
  background: #f8faf9;
}
.access-map-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  background: var(--white);
}
.access-map-canvas > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.access-map-canvas > img[hidden] { display: none; }
.access-wayfinding[data-active-floor="1f"] [data-map-floor]:not([data-map-floor="1f"]),
.access-wayfinding[data-active-floor="b1"] [data-map-floor]:not([data-map-floor="b1"]),
.access-wayfinding[data-active-floor="b2"] [data-map-floor]:not([data-map-floor="b2"]) {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}
.access-route-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.access-route-overlay marker path {
  fill: var(--ink-deep);
}
.access-route-path {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  marker-end: url(#accessRouteArrow);
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(7, 19, 48, 0.18));
  transition: opacity 180ms var(--ease);
}
.access-route-path--chengde { stroke: #d6a400; }
.access-route-path--hougang { stroke: #bd6a37; }
.access-route-path--parking { stroke: #4f8791; }
.access-route-path.is-active {
  opacity: 0.96;
  animation: accessRouteDraw 850ms var(--ease) forwards;
}
.access-wayfinding[data-access-phase="locations"] .access-route-path {
  opacity: 0;
  animation: none;
}
@keyframes accessRouteDraw {
  to { stroke-dashoffset: 0; }
}
.access-location-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink-deep);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink-deep);
  cursor: pointer;
  opacity: 0.28;
  box-shadow: 0 3px 12px rgba(7, 19, 48, 0.16);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.access-location-pin:hover,
.access-location-pin:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
.access-location-pin:focus-visible,
.access-floor-locator:focus-visible {
  outline: 3px solid #ffcc4d;
  outline-offset: 3px;
}
.access-location-pin.is-active {
  opacity: 1;
  background: var(--ink-deep);
  color: var(--white);
}
.access-location-pin-number {
  font: 700 0.7rem/1 var(--font-sans);
}
.access-location-pin-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  min-width: max-content;
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(7, 19, 48, 0.25);
  border-radius: 3px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink-deep);
  font: 600 0.76rem/1.2 var(--font-zh);
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(7, 19, 48, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.access-location-pin:hover .access-location-pin-label,
.access-location-pin:focus-visible .access-location-pin-label,
.access-location-pin.is-active .access-location-pin-label {
  opacity: 1;
}
.access-location-pin--shower .access-location-pin-label {
  right: calc(100% + 9px);
  bottom: 50%;
  left: auto;
  transform: translateY(50%);
}
.access-floor-locator {
  position: absolute;
  left: clamp(0.7rem, 2vw, 1.4rem);
  bottom: clamp(0.7rem, 2vw, 1.4rem);
  z-index: 5;
  min-width: min(210px, 42%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(7, 19, 48, 0.28);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-deep);
  cursor: pointer;
  opacity: 0.28;
  box-shadow: 0 3px 12px rgba(7, 19, 48, 0.12);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.access-floor-locator:hover,
.access-floor-locator:focus-visible,
.access-floor-locator.is-active {
  opacity: 1;
}
.access-floor-locator.is-active {
  background: var(--ink-deep);
  color: var(--white);
}
.access-floor-locator-number {
  font: 700 0.72rem/1 var(--font-sans);
}
.access-floor-locator > span:last-child {
  display: grid;
  gap: 0.1rem;
  text-align: left;
}
.access-floor-locator strong {
  font: 700 1.05rem/1 var(--font-sans);
}
.access-floor-locator small {
  font: 600 0.72rem/1.2 var(--font-zh);
  letter-spacing: 0;
}
.access-hotspot {
  position: absolute;
  left: var(--hotspot-x);
  top: var(--hotspot-y);
  z-index: 4;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink-deep);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-deep);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.access-hotspot:hover,
.access-hotspot:focus-visible,
.access-hotspot.is-route-relevant {
  opacity: 1;
}
.access-hotspot:hover,
.access-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}
.access-hotspot:focus-visible {
  outline: 3px solid #ffcc4d;
  outline-offset: 3px;
}
.access-hotspot.is-active {
  background: var(--ink-deep);
  color: var(--white);
}
.access-wayfinding[data-access-phase="locations"] .access-hotspot {
  opacity: 0;
  pointer-events: none;
}
.access-wayfinding[data-access-phase="routes"] .access-location-pin,
.access-wayfinding[data-access-phase="routes"] .access-floor-locator {
  opacity: 0.14;
  pointer-events: none;
}
.access-wayfinding[data-access-phase="routes"][data-active-route="parking"] .access-location-pin--parking {
  opacity: 0.82;
}
.access-hotspot-number {
  font: 700 0.78rem/1 var(--font-sans);
}
.access-hotspot-label {
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  min-width: max-content;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(7, 19, 48, 0.25);
  border-radius: 3px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-deep);
  font: 600 0.76rem/1.2 var(--font-zh);
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(7, 19, 48, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.access-hotspot.is-route-relevant .access-hotspot-label,
.access-hotspot:hover .access-hotspot-label,
.access-hotspot:focus-visible .access-hotspot-label,
.access-hotspot.is-active .access-hotspot-label {
  opacity: 1;
}
.access-hotspot--accessible-lift .access-hotspot-label {
  right: calc(100% + 9px);
  left: auto;
}
.access-hotspot--vip-lift .access-hotspot-label,
.access-hotspot--lift-lobby .access-hotspot-label {
  top: auto;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
}
.access-hotspot--restroom .access-hotspot-label {
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
}
.access-map-frame figcaption {
  padding: 0.85rem 0.25rem 0.1rem;
  color: var(--gray-1);
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  line-height: 1.65;
}
.access-wayfinding-info {
  min-width: 0;
  padding: 0 clamp(1.6rem, 3vw, 3rem);
  background: var(--white);
}
.access-story-divider {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--ink-deep);
}
.access-story-divider--first {
  border-top: 0;
}
.access-story-divider .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}
.access-story-divider h4 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.access-story-divider .access-route-tabs {
  margin-top: clamp(1.25rem, 2vw, 2rem);
}
.access-location-step,
.access-route-step {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  opacity: 0.32;
  transition: opacity var(--dur) var(--ease);
}
.access-location-step:first-of-type { border-top: 0; }
.access-route-step:last-child { border-bottom: 1px solid var(--rule); }
.access-location-step.is-active,
.access-route-step.is-active { opacity: 1; }
.access-info-index {
  display: block;
  margin-bottom: clamp(1.6rem, 3vw, 3rem);
  color: var(--gray-1);
  font: 600 var(--fs-caption)/1 var(--font-sans);
}
.access-location-panels h4,
.access-route-panels h4,
.access-facility-panels h4 {
  margin: 0 0 0.75rem;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.access-location-panels p,
.access-route-panels p,
.access-facility-panels p {
  margin: 0;
  color: var(--gray-1);
  line-height: var(--lh-body);
}
.access-route-panels dl {
  margin: clamp(1.4rem, 2.4vw, 2.4rem) 0 0;
}
.access-route-panels dl div {
  display: grid;
  grid-template-columns: minmax(4rem, 0.35fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.access-route-panels dt,
.access-route-panels dd {
  margin: 0;
  line-height: 1.55;
}
.access-route-panels dt {
  color: var(--gray-1);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.access-route-panels dd {
  color: var(--ink-deep);
  font-size: 0.95rem;
}
.access-facility-panels {
  margin-top: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--ink-deep);
}
.access-facility-panels .eyebrow {
  display: block;
  margin-bottom: 1.2rem;
}
.accessibility-num {
  display: block;
  margin-bottom: 1.7rem;
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
}
@media (max-width: 900px) {
  .access-wayfinding-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .access-route-tabs,
  .access-phase-tabs {
    width: 100%;
  }
  .access-wayfinding-layout {
    display: flex;
    flex-direction: column;
  }
  .access-map-col { display: contents; }
  .access-map-stick {
    order: -1;
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--white);
  }
  .access-map-frame {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .access-wayfinding-info {
    padding-inline: clamp(1.4rem, 5vw, 3rem);
  }
  .access-location-step,
  .access-route-step {
    min-height: 54svh;
  }
  .access-facility-panels {
    margin-bottom: clamp(2rem, 6vw, 4rem);
  }
}
@media (min-width: 640px) and (max-width: 900px) {
  .access-wayfinding-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .access-map-col {
    display: block;
    position: relative;
  }
  .access-map-stick {
    order: initial;
    top: 64px;
  }
  .access-map-frame {
    border-right: 1px solid var(--rule);
    border-bottom: 0;
  }
  .access-wayfinding-info {
    padding-inline: clamp(1.25rem, 3vw, 2rem);
  }
}
@media (max-width: 760px) {
  .access-route-tabs,
  .access-phase-tabs {
    flex-wrap: nowrap;
    gap: 1.2rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.8rem;
    scrollbar-width: none;
  }
  .access-route-tabs::-webkit-scrollbar,
  .access-phase-tabs::-webkit-scrollbar { display: none; }
  .access-map-frame { padding: 0.45rem; }
  .access-location-pin {
    width: 28px;
    height: 28px;
  }
  .access-location-pin-label { display: none; }
  .access-floor-locator {
    min-width: 0;
    max-width: calc(100% - 1.4rem);
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
  }
  .access-floor-locator small { font-size: 0.66rem; }
  .access-hotspot {
    width: 28px;
    height: 28px;
  }
  .access-hotspot-label { display: none; }
  .access-wayfinding-info {
    padding-inline: 1.15rem;
  }
  .access-facility-panels {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink-deep);
  }
}
@media (prefers-reduced-motion: reduce) {
  .access-route-path.is-active { animation: none; stroke-dashoffset: 0; }
}

/* ---------- 17. Footer — EcoLab 172 three-column structure, CAAM content ---------- */
.site-footer {
  background: var(--dark-blue);
  color: var(--white);
  padding: 0 0 2rem;
}
.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.site-footer .footer-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--misty-blue);
  font: 500 var(--fs-body)/var(--lh-body) var(--font-sans);
  letter-spacing: .08em;
}
.site-footer .footer-statement h2 {
  margin: 0;
  max-width: 24ch;
  color: var(--white);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
}
.site-footer .footer-visit-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-shrink: 0;
  min-height: 48px;
  padding: .8125rem 1.25rem;
  background: var(--white);
  color: var(--dark-blue);
  font: 600 var(--fs-body)/1.4 var(--font-sans);
}
.site-footer .footer-visit-link:hover { background: var(--misty-blue); color: var(--dark-blue); }
.site-footer .footer-address { overflow-wrap: anywhere; }
.site-footer .footer-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.4375rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.site-footer .footer-column { display: grid; align-content: start; gap: 2rem; min-width: 0; }
.site-footer .footer-info-grid section { display: grid; gap: 1rem; min-width: 0; }
.site-footer .footer-collection-items { display: grid; gap: 1rem; }
.site-footer .footer-info-grid h5 {
  margin: 0 0 0.375rem;
  color: var(--misty-blue);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer .footer-info-grid h5 .footer-heading-link { color: var(--misty-blue); font-size: inherit; font-weight: inherit; }
.site-footer .footer-info-grid a,
.site-footer .footer-info-grid p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-comfort);
  overflow-wrap: anywhere;
}
.site-footer .footer-collection-items > a { padding-bottom: 0; }
.site-footer [data-caam-collection="events"] .footer-collection-items > a + a,
.site-footer [data-caam-collection="media"] .footer-collection-items > a + a {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer a:focus-visible { outline: 2px solid var(--misty-blue); outline-offset: 4px; }
.site-footer .footer-info-grid a.footer-more-link { color: var(--misty-blue); border: 0; }
.site-footer .footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-comfort);
  color: rgba(255,255,255,0.85);
}
.site-footer .footer-base nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.site-footer .footer-base a { color: inherit; }
@media (max-width: 900px) {
  .site-footer .footer-info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer .footer-column:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .site-footer .footer-top { flex-direction: column; align-items: flex-start; }
  .site-footer .footer-info-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer .footer-column:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .site-footer .footer-info-grid { gap: 2.5rem; }
  .site-footer .footer-base { flex-direction: column; align-items: flex-start; }
  .newsletter-band .shell { flex-direction: column; align-items: flex-start; }
}

/* ---------- 18. Mobile Nav (only on small screens) ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 90;
  transform: translateY(-100%);
  transition: transform var(--dur-slide) var(--ease);
  grid-template-rows: 1fr auto;
  overflow-y: auto;
  padding: 7rem var(--shell-pad) 3rem;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .lang-en .site-nav { display: none; }
  .lang-en .aqi-wrap { margin-left: auto; }
  .lang-en .menu-toggle { display: inline-flex; }
  .lang-en .mobile-nav { display: grid; }
}
@media (max-width: 720px) {
  .mobile-nav { display: grid; }
}
.mobile-nav.is-open { transform: translateY(0); display: grid; visibility: visible; pointer-events: auto; }
.mobile-nav .mobile-language { gap: 1rem; margin-top: 1.5rem; }
.mobile-language .lang-btn { min-width: 44px; min-height: 44px; font-size: var(--fs-body); }
.mobile-language .lang-btn:focus-visible { outline: 2px solid var(--midnight); outline-offset: 3px; }
.mobile-nav nav {
  display: grid;
  gap: 1.2rem;
  align-content: center;
}
.mobile-nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  font-weight: 700;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--ink-deep);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
}
.mobile-nav a .num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--gray-1);
}
.mobile-nav a .en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
  text-align: right;
}
.mobile-nav a:hover { color: #fff; background: var(--midnight); padding-left: 0.5rem; }

/* ---------- 19. Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* Disable gratuitous transitions site-wide; keep essentials (focus rings, color) */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .image-grid figure:hover img,
  .image-carousel .carousel-track > figure:hover img,
  .image-grid figure:hover figcaption { transform: none !important; }
}

/* ---------- 20. Skip link ---------- */
.skip-link {
  position: absolute;
  left: -1000px;
  top: 0.5rem;
  background: var(--ink-deep);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 200;
  font-weight: 600;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 1rem;
  outline: 2px solid var(--midnight);
  outline-offset: 2px;
}

/* ---------- 21. Floor Plans (interactive) ---------- */
.floors {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: var(--gap-xl);
  align-items: start;
}

/* (removed: interactive floor-plans styles — spec wants static side-by-side images) */
.floors-graphic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 4px solid var(--ink-deep);
  border-bottom: 4px solid var(--ink-deep);
  padding: 1rem 0;
}
.floor-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-default);
  background: var(--paper-soft);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.floor-row:hover { border-color: var(--ink-deep); }
.floor-row.is-active { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.floor-row.is-active .floor-num,
.floor-row.is-active .floor-name,
.floor-row.is-active .floor-status { color: #fff; }
.floor-row .floor-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-body);
  color: var(--ink-deep);
}
.floor-row .floor-name { color: var(--ink); font-weight: 500; }
.floor-row .floor-status {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
}

/* ---------- 22. Activity and press hub ---------- */
.press-hub {
  min-height: 58svh;
}
.press-hub-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--ink-deep);
}
.press-hub-toolbar .section-title {
  margin-bottom: 0;
}
.press-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex: 0 0 auto;
  border: 1px solid var(--ink-deep);
}
.press-view-toggle-button {
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  font-family: var(--font-zh);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.press-view-toggle-button + .press-view-toggle-button {
  border-left: 1px solid var(--ink-deep);
}
.press-view-toggle-button:hover:not(.is-active) {
  background: var(--paper-soft);
}
.press-view-toggle-button.is-active {
  color: var(--white);
  background: var(--midnight);
}
.press-view-toggle-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--misty-blue);
  outline-offset: 3px;
}
.press-view-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  gap: var(--gap-xl);
  align-items: start;
  padding-top: clamp(2.4rem, 5vw, 4.8rem);
}
.press-view-panel[hidden] {
  display: none;
}
.press-view-intro h3 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.press-view-intro p {
  max-width: 26ch;
  margin: 1rem 0 0;
  color: var(--gray-1);
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-comfort);
}
.visitor-parking-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* ---------- 22a. Press list ---------- */
.press-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.press-list a,
.press-list .press-item,
.press-list .download-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.press-list .press-item {
  width: 100%;
  color: inherit;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.press-list a:hover,
.press-list .press-item:hover {
  background: var(--paper-soft);
  padding-left: 1rem;
  padding-right: 1rem;
}
.press-list .press-item:focus-visible {
  outline: 3px solid var(--midnight);
  outline-offset: 3px;
}
.press-list strong {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);   /* 17.6 → 20px */
  color: var(--ink-deep);
}
.press-list .press-source {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem); /* 15.2 → 16.8px */
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
  white-space: nowrap;
}
.press-list .press-arrow {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  color: var(--ink-deep);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.press-list a:hover .press-arrow,
.press-list .press-item:hover .press-arrow {
  transform: translateX(8px);
  color: var(--ink-deep);
}
.press-list .download-item {
  align-items: center;
}
.press-list .download-item.is-external:hover .press-arrow {
  transform: translate(4px, -4px);
}
.press-list .download-item.is-download:hover .press-arrow {
  transform: translateY(4px);
}
.press-list .download-item.is-unavailable {
  cursor: default;
}
.press-list .download-item.is-unavailable:hover {
  padding-right: 0;
  padding-left: 0;
  background: transparent;
}
.press-list .download-item.is-unavailable .press-arrow {
  color: var(--gray-1);
}
.event-list-heading {
  display: grid;
  min-width: 0;
  gap: 0.55rem;
}
.event-list-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
}
.event-list-tag {
  color: var(--midnight);
}

/* ---------- 22b. Event detail dialog ---------- */
html.event-dialog-open,
html.event-dialog-open body {
  overflow: hidden;
}
.event-detail-dialog {
  width: min(1120px, calc(100% - 32px));
  height: min(900px, calc(100svh - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  color: var(--ink-deep);
  background: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 28px 90px rgba(7, 19, 48, 0.34);
  overflow: hidden;
}
.event-detail-dialog::backdrop {
  background: rgba(7, 19, 48, 0.7);
  backdrop-filter: blur(3px);
}
.event-detail-layout {
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 88px;
  width: 100%;
  height: 100%;
}
.event-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 24px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.event-detail-brand {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--midnight);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.event-detail-brand span + span {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}
.event-detail-close {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.event-detail-close:hover {
  background: var(--paper-soft);
}
.event-detail-close:focus-visible,
.event-detail-nav:focus-visible {
  outline: 3px solid var(--midnight);
  outline-offset: 2px;
}
.event-detail-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.event-detail-scroll:focus {
  outline: none;
}
.event-detail-article {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 54px 32px 80px;
}
.event-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 22px;
}
.event-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-detail-tags span {
  padding: 5px 9px;
  color: var(--midnight);
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
}
.event-detail-meta time {
  flex: 0 0 auto;
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
}
.event-detail-article h2 {
  max-width: 24ch;
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.22;
}
.event-detail-summary {
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--gray-1);
  font-family: var(--font-zh);
  font-size: 1.18rem;
  line-height: 1.75;
}
.event-detail-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 42px 0;
  background: var(--paper-soft);
  overflow: hidden;
}
.event-detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-detail-content {
  color: var(--ink);
  font-family: var(--font-zh);
  font-size: 1.06rem;
  line-height: 1.9;
}
.event-detail-content > :first-child {
  margin-top: 0;
}
.event-detail-content > :last-child {
  margin-bottom: 0;
}
.event-detail-content h2,
.event-detail-content h3 {
  margin: 2.2em 0 0.75em;
  color: var(--ink-deep);
  font-size: 1.45rem;
  line-height: 1.4;
}
.event-detail-content p,
.event-detail-content ul,
.event-detail-content ol {
  margin: 0 0 1.2em;
}
.event-detail-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}
.event-detail-content a {
  color: var(--midnight);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.event-detail-content .event-content-block {
  max-width: 100%;
}
.event-detail-content .event-content-paragraph {
  white-space: pre-line;
}
.event-detail-content .event-content-heading {
  margin-top: 2.2em;
}
.event-detail-content .event-content-quote {
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  color: var(--ink-deep);
  border-left: 3px solid var(--midnight);
  font-size: 1.18rem;
  line-height: 1.75;
  white-space: pre-line;
}
.event-detail-content .event-content-list {
  padding-left: 1.4rem;
}
.event-detail-content .event-content-divider {
  height: 1px;
  margin: 2.4rem 0;
  background: var(--rule);
  border: 0;
}
.event-detail-content .event-content-block code {
  padding: 0.12em 0.32em;
  background: rgba(15, 23, 42, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.event-detail-content .event-content-media {
  margin: 2.4rem 0;
}
.event-detail-content .event-content-media img,
.event-detail-content .event-content-media video,
.event-detail-content .event-content-media iframe {
  display: block;
  width: 100%;
  margin: 0;
  background: #0b1220;
  border: 0;
}
.event-detail-content .event-content-media img {
  height: auto;
}
.event-detail-content .event-content-media video,
.event-detail-content .event-content-media iframe {
  aspect-ratio: 16 / 9;
}
.event-detail-content .event-content-media figcaption {
  margin-top: 0.75rem;
  color: var(--gray-1);
  font-size: 0.88rem;
  line-height: 1.6;
}
.event-detail-content a.event-content-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.25rem 0;
  color: var(--ink-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.event-content-attachment > span:first-child {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}
.event-content-attachment strong {
  overflow-wrap: anywhere;
}
.event-content-attachment small {
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 0.82rem;
}
.event-content-attachment > span:last-child {
  flex: 0 0 auto;
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
}
.event-detail-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--rule);
}
.event-detail-nav {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 12px 28px;
  color: var(--ink-deep);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.event-detail-nav-next {
  text-align: right;
}
.event-detail-nav:hover:not(:disabled) {
  background: var(--paper-soft);
}
.event-detail-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.event-detail-nav span {
  font-size: 0.78rem;
  font-weight: 700;
}
.event-detail-nav strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow: hidden;
  font-family: var(--font-zh);
  font-size: 0.9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-detail-counter {
  align-self: center;
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  .press-hub-toolbar {
    align-items: stretch;
    gap: 0;
  }
  .press-view-toggle {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .press-view-toggle-button {
    min-height: 46px;
    padding-inline: 0.7rem;
  }
  .press-view-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2.4rem;
  }
  .press-view-intro p {
    max-width: 38ch;
  }
  .press-list a,
  .press-list .press-item,
  .press-list .download-item {
    gap: 0.8rem;
    padding: 1.3rem 0;
  }
  .event-detail-dialog {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    border-radius: 0;
  }
  .event-detail-layout {
    grid-template-rows: 60px minmax(0, 1fr) 76px;
  }
  .event-detail-header {
    padding: 0 10px 0 16px;
  }
  .event-detail-brand {
    font-size: 0.7rem;
  }
  .event-detail-article {
    padding: 34px 18px 60px;
  }
  .event-detail-meta {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 18px;
  }
  .event-detail-article h2 {
    max-width: none;
    font-size: 1.9rem;
  }
  .event-detail-summary {
    font-size: 1.05rem;
  }
  .event-detail-cover {
    aspect-ratio: 4 / 3;
    margin: 28px 0;
  }
  .event-detail-content {
    font-size: 1rem;
  }
  .event-detail-nav {
    padding: 10px 14px;
  }
  .event-detail-nav strong {
    display: none;
  }
}

/* ---------- Offices floor-plan cards — click to expand to lightbox ---------- */
.floor-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}
.floor-plan-grid--single { grid-template-columns: minmax(0, 1fr); }
.floor-plan-grid--single .floor-plan-thumb img {
  max-height: 78vh;
  object-fit: contain;
}
.floor-plan-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.floor-plan-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.floor-plan-thumb:hover {
  border-color: var(--midnight);
  box-shadow: 0 6px 20px rgba(12, 65, 96, 0.10);
}
.floor-plan-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.floor-plan-zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.floor-plan-thumb:hover .floor-plan-zoom,
.floor-plan-thumb:focus-visible .floor-plan-zoom {
  opacity: 1;
  transform: translateY(0);
}
.floor-plan-cap {
  display: grid;
  gap: 0.3rem;
}
.floor-plan-cap-title {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: var(--fs-lede);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--ink-deep);
}
.floor-plan-cap-sub {
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--gray-1);
  line-height: var(--lh-body);
}
.floor-plan-lightbox {
  position: fixed; inset: 0;
  background: rgba(7, 19, 48, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  cursor: zoom-out;
  animation: floorPlanFadeIn 200ms var(--ease);
}
.floor-plan-lightbox[hidden] { display: none !important; }
@keyframes floorPlanFadeIn { from { opacity: 0; } to { opacity: 1; } }
.floor-plan-lightbox-close {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--white); color: var(--ink-deep);
  font-size: 1.8rem; line-height: 1; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.floor-plan-lightbox-inner {
  margin: 0;
  max-width: min(100%, 1200px); max-height: 100%;
  display: flex; flex-direction: column; gap: 1.2rem;
  cursor: default;
}
.floor-plan-lightbox-inner img {
  width: 100%; max-height: 78vh; object-fit: contain;
  background: var(--white); display: block;
}
.floor-plan-lightbox-cap {
  color: var(--white); font-family: var(--font-zh); font-weight: 500;
  font-size: var(--fs-lede); text-align: center; letter-spacing: 0;
}
@media (max-width: 720px) {
  .floor-plan-grid { grid-template-columns: 1fr; }
}

/* ---------- 23. Form ---------- */
/* Contact page — Refinery side-by-side: narrow info (~22%) + wide form (~70%) */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-comfort);
  color: var(--ink-deep);
}
.contact-info-title {
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--ink-deep);
  margin: 0 0 0.5rem;
}
.contact-info-line {
  margin: 0;
  /* no border, no divider */
}
.contact-info-line a { color: var(--ink-deep); }
.contact-info-line a:hover { color: var(--midnight-2); text-decoration: underline; text-underline-offset: 0.2em; }
.contact-info-tag {
  display: inline-block;
  font-size: var(--fs-caption);
  color: var(--gray-1);
  letter-spacing: var(--tracking-eyebrow);
  margin-top: 0.15rem;
}
.contact-info-link {
  margin-top: 0.8rem;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--midnight);
  border-bottom: 1px solid var(--midnight);
  padding-bottom: 0.2rem;
  align-self: flex-start;
}
.contact-info-link:hover { color: var(--midnight-2); border-bottom-color: var(--midnight-2); }
.contact-form { width: 100%; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.inquiry-form {
  display: grid;
  gap: 1.4rem;
}
.inquiry-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.inquiry-form .field { display: grid; gap: 0.4rem; }
.inquiry-form label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);   /* 15.7 → 17.6px */
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--gray-1);
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  font-family: var(--font-zh);
  font-size: clamp(1.1rem, 1.2vw, 1.2rem);     /* 17.6 → 19.2px */
  padding: 0.95rem 0;
  border: 0;
  border-bottom: 2px solid var(--ink-deep);
  background: transparent;
  color: var(--ink-deep);
  border-radius: 0;
  resize: vertical;
  font-weight: 500;
  transition: box-shadow var(--dur) var(--ease);
}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-bottom-color: var(--midnight);
  box-shadow: inset 0 -2px 0 0 var(--midnight);
}
.inquiry-form textarea { min-height: 120px; }
.inquiry-form .interest-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.inquiry-form input[type="radio"] { display: none; }
.inquiry-form .interest-pill {
  border: 2px solid var(--midnight);
  padding: 0.6rem 1.2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--midnight);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.inquiry-form .interest-pill:hover {
  background: var(--misty-blue);
}
.inquiry-form input[type="radio"]:focus-visible + .interest-pill {
  outline: 2px solid var(--midnight);
  outline-offset: 4px;
}
.inquiry-form input[type="radio"]:checked + .interest-pill {
  background: var(--midnight);
  color: #fff;
}
.inquiry-form .submit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.inquiry-form .submit-note { font-size: clamp(0.95rem, 1.05vw, 1.05rem); color: var(--gray-1); }
.form-thanks {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--rule);
}
.form-thanks strong {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: 600;
  text-transform: uppercase;
}
.form-thanks a {
  width: max-content;
  border-bottom: 1px solid var(--ink-deep);
}
.form-thanks[hidden] { display: none; }

/* Actual EcoLab172 contact reference: styles.css 2054–2097 and contact.html.
   Preserve CAAM 168 readable body sizes and contact data. No form heading. */
.contact-grid {
  grid-template-columns: minmax(0, .28fr) minmax(0, .72fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.inquiry-form.contact-form--ecolab { display: block; width: 100%; min-width: 0; }
.inquiry-form.contact-form--ecolab > label {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-zh);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-1);
}
.inquiry-form.contact-form--ecolab input,
.inquiry-form.contact-form--ecolab select,
.inquiry-form.contact-form--ecolab textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 48, .2);
  border-radius: 0;
  padding: 8px 0 10px;
  background: transparent;
  color: var(--ink-deep);
  font-size: 1rem;
  font-weight: 400;
}
.inquiry-form.contact-form--ecolab textarea { min-height: 120px; resize: vertical; }
.inquiry-form.contact-form--ecolab input:focus,
.inquiry-form.contact-form--ecolab select:focus,
.inquiry-form.contact-form--ecolab textarea:focus {
  outline: none;
  border-bottom-color: var(--midnight);
  box-shadow: 0 1px 0 var(--midnight);
}
.inquiry-form.contact-form--ecolab > .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 13px 20px;
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #071330;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.inquiry-form.contact-form--ecolab > .btn:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 4px;
}
.inquiry-form.contact-form--ecolab .submit-note { margin: 0; line-height: 1.65; }
.inquiry-form.contact-form--ecolab .form-thanks { overflow-wrap: anywhere; }
.inquiry-form.contact-form--ecolab .form-thanks a { max-width: 100%; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }


/* ---------- 24. Two-column lists (neighborhood) ---------- */
.hood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.hood-grid article {
  padding: 2rem 1.4rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body  body";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.4rem;
}
.hood-grid article:nth-child(3n) { border-right: 0; }
.hood-grid article > .ico {
  grid-area: icon;
  width: clamp(26px, 1.9vw, 32px);
  height: clamp(26px, 1.9vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hood-grid article > .ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* `.ico--accent` keeps native icon linework — no midnight tile, no invert */
.hood-grid article > .ico.ico--accent { background: transparent; }
.hood-grid article > .ico.ico--accent img { filter: none; }
.hood-grid h3 { grid-area: title; margin: 0; font-size: clamp(1.5rem, 1.65vw, 1.65rem); font-weight: 600; }
.hood-grid p { grid-area: body; color: var(--gray-1); font-size: clamp(1.05rem, 1.15vw, 1.15rem); line-height: var(--lh-loose); margin: 0; }

/* ---------- 23b. Image Carousel — Refinery card-slider pattern, 3-per-row ---------- */
.sticky-carousel-scene {
  position: relative;
  height: calc(var(--sticky-carousel-scroll, 80vh) + 100vh);
}
.sticky-carousel-scene.is-static-carousel-scene {
  height: auto;
}
.image-carousel {
  position: relative;
  /* Slightly wider than its container — escapes shell-pad by ~50% on each side */
  width: calc(100% + var(--shell-pad));
  margin-left: calc(var(--shell-pad) * -0.5);
}
.image-carousel--sticky-scroll {
  position: sticky;
  top: clamp(5rem, 9vh, 7rem);
  z-index: 1;
  overflow: hidden;
}
.image-carousel--sticky-scroll.is-static-carousel {
  position: relative;
  top: auto;
}
.image-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.image-carousel--sticky-scroll .image-carousel-track {
  overflow: visible;
  scrollbar-width: none;
}
.image-carousel--sticky-scroll .image-carousel-track::-webkit-scrollbar {
  display: none;
}
.image-carousel-track img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  background: var(--paper-deep);
}
/* Full-bleed version — escapes shell padding entirely (legacy) */
/* Floor-plan variant — white card with contained PNG drawings */
.image-carousel--floorplans .carousel-track > figure {
  background: #fff;
}
.image-carousel--floorplans .carousel-track > figure img {
  object-fit: contain;
  padding: 1rem;
}
.image-carousel .carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.image-carousel .carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap, 1rem)) / 3);
  gap: var(--carousel-gap, 1rem);
  transition: transform var(--dur-slide) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.image-carousel--manual .carousel-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.image-carousel--manual.is-dragging .carousel-viewport {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}
.image-carousel--manual .carousel-viewport img {
  -webkit-user-drag: none;
  user-select: none;
}
.image-carousel--manual .carousel-viewport:focus-visible {
  outline: 2px solid var(--midnight);
  outline-offset: 4px;
}
.image-carousel--manual .carousel-viewport::-webkit-scrollbar {
  display: none;
}
.image-carousel--manual .carousel-track,
.image-carousel--manual .image-carousel-track {
  transform: none !important;
  width: 100%;
  will-change: auto;
}
.image-carousel--manual .carousel-track > *,
.image-carousel--manual .image-carousel-track > * {
  scroll-snap-align: start;
}
.image-carousel--manual.is-static-carousel .carousel-arrow {
  display: none;
}
.image-carousel--sticky-scroll .carousel-track,
.image-carousel--sticky-scroll .image-carousel-track {
  transition: none;
  will-change: transform;
}
.image-carousel .carousel-track > figure {
  margin: 0;
  aspect-ratio: 1 / 1;            /* SQUARE */
  overflow: hidden;
  background: var(--paper-deep);
  position: relative;
}
.office-gallery-source .carousel-track > figure {
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
}
.neighborhood-gallery .image-carousel-track img {
  aspect-ratio: 16 / 15;
}
.image-carousel .carousel-track > figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.image-carousel .carousel-track > figure:hover img { transform: scale(1.04); }
.image-carousel .carousel-track > figure figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(transparent, rgba(7, 19, 48, 0.65));
  color: #fff;
  font-family: var(--font-zh);
  font-weight: var(--fw-light);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-default);
}

/* Arrow buttons — Refinery style: 35×35 round, semi-transparent white,
   inside the carousel sitting on top of images */
.image-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--midnight);
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.image-carousel .carousel-arrow svg { width: 35px; height: 35px; display: block; }
.image-carousel .carousel-arrow:hover { background: #fff; color: var(--dark-blue); }
.image-carousel .carousel-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.image-carousel .carousel-arrow.prev { left: 18px; }
.image-carousel .carousel-arrow.next { right: 18px; }

@media (max-width: 1100px) {
  .image-carousel-track {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }
  .image-carousel .carousel-track {
    grid-auto-columns: calc((100% - var(--carousel-gap, 1rem)) / 2);
  }
}
@media (max-width: 900px) {
  /* Scroll already drives the strip on mobile — arrow buttons are redundant
     clutter. Center the pinned strip vertically instead of hugging the top. */
  .image-carousel .carousel-arrow { display: none; }
  .image-carousel--manual .carousel-arrow { display: grid; }
  .image-carousel--sticky-scroll { top: max(76px, calc(50svh - 42vw)); }
}
@media (max-width: 720px) {
  .image-carousel-track {
    grid-auto-columns: 80%;
  }
  .image-carousel .carousel-track {
    grid-auto-columns: 80%;
  }
}

/* Venue media uses the same sticky scroll-driven horizontal motion site-wide. */
.image-carousel--venue {
  margin-top: clamp(1.8rem, 3vw, 3rem);
  --carousel-gap: clamp(1rem, 2vw, 1.5rem);
}
.image-carousel--venue .carousel-track {
  grid-auto-columns: clamp(620px, 48vw, 820px);
  align-items: start;
}
.image-carousel--venue.image-carousel--sticky-scroll {
  top: max(76px, 8vh);
  z-index: 3;
}
.venue-detail-card {
  min-width: 0;
  background: var(--white);
  border-top: 2px solid var(--ink-deep);
  box-shadow: 0 10px 28px rgba(7, 19, 48, 0.08);
}
.venue-detail-card figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-deep);
}
.venue-regus-section .venue-detail-card figure {
  height: clamp(190px, calc(100svh - 500px), 460px);
  aspect-ratio: auto;
}
#open-space .venue-detail-card figure { aspect-ratio: 2 / 1; }
.venue-detail-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.venue-detail-body {
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}
.venue-detail-body h3 {
  margin: 0 0 1rem;
  color: var(--ink-deep);
  font-family: var(--font-zh);
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  line-height: var(--lh-tight);
  font-weight: 600;
}
.venue-detail-body .mini-spec {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.3rem;
}
.venue-detail-body .mini-spec > div {
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
}
.venue-booking-btn { margin-top: 1.4rem; }
.image-carousel--venue-photos .carousel-track { grid-auto-columns: clamp(620px, 54vw, 900px); }
.image-carousel--venue-photos .carousel-track > figure { aspect-ratio: 4 / 3; }

/* Venue features use the shared sticky vertical-to-horizontal carousel. */
.image-carousel--features {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  --carousel-gap: clamp(1rem, 2vw, 2rem);
}
.image-carousel--features .feature-photos {
  grid-template-columns: none;
  gap: var(--carousel-gap);
  padding-inline: clamp(0.4rem, 0.75vw, 0.75rem);
}
.image-carousel--features .carousel-track {
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
  align-items: stretch;
}
.image-carousel--features .carousel-track > .feature-photo-card {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
}
.image-carousel--features .feature-photo-img {
  aspect-ratio: 4 / 3;
}
.image-carousel--features .carousel-track > .feature-photo-card figcaption {
  position: static;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}
.image-carousel--features.image-carousel--sticky-scroll {
  top: max(76px, calc(50svh - 21rem));
  z-index: 2;
}

@media (max-width: 1100px) {
  .image-carousel--features .carousel-track {
    grid-auto-columns: calc((100% - var(--carousel-gap)) / 2);
  }
}
@media (max-width: 720px) {
  .image-carousel--features .carousel-track {
    grid-auto-columns: 84%;
  }
  .image-carousel--features.image-carousel--sticky-scroll {
    top: max(76px, calc(50svh - 17rem));
  }
}

@media (max-width: 760px) {
  .image-carousel--venue {
    width: calc(100% + var(--shell-pad));
    margin-left: 0;
  }
  .image-carousel--venue .carousel-track,
  .image-carousel--venue-photos .carousel-track {
    grid-auto-columns: 88%;
  }
  .image-carousel--venue.image-carousel--sticky-scroll { top: 76px; }
  .venue-regus-section .venue-detail-card figure {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .venue-detail-body .mini-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-detail-body .mini-spec > div:nth-child(n + 3) { grid-column: 1 / -1; }
}

.regus-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 19, 48, 0.82);
}
.regus-qr-modal[hidden] { display: none; }
.regus-qr-dialog {
  position: relative;
  width: min(100%, 430px);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--white);
  color: var(--ink-deep);
  text-align: center;
  box-shadow: 0 18px 60px rgba(7, 19, 48, 0.28);
}
.regus-qr-dialog h2 {
  margin: 0;
  font-family: var(--font-zh);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: var(--lh-snug);
}
.regus-qr-dialog p {
  margin: 0.65rem 0 1.2rem;
  color: var(--gray-1);
}
.regus-qr-dialog img {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: 0 auto;
}
.regus-qr-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink-deep);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.regus-qr-close:hover,
.regus-qr-close:focus-visible { background: var(--paper); }

.office-gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.3rem;
}
.office-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  align-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(0, 0, 0, 0.94);
  animation: floorPlanFadeIn 200ms var(--ease);
}
.office-gallery-lightbox[hidden] { display: none !important; }
.office-gallery-close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-deep);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.office-gallery-frame {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.office-gallery-frame img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(76vh, calc(100vh - 190px));
  object-fit: contain;
}
.office-gallery-caption {
  max-width: min(100%, 900px);
  color: var(--white);
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}
.office-gallery-nav {
  grid-row: 1;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink-deep);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.office-gallery-nav:hover {
  background: var(--midnight);
  color: var(--white);
}
.office-gallery-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.office-gallery-prev { grid-column: 1; }
.office-gallery-next { grid-column: 3; }
.office-gallery-thumbs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.2rem 0 0.1rem;
}
.office-gallery-thumbs button {
  flex: 0 0 auto;
  width: 82px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 0.62;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.office-gallery-thumbs button:hover,
.office-gallery-thumbs button.is-active {
  border-color: var(--white);
  opacity: 1;
}
.office-gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .office-gallery-lightbox {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 4.5rem 1rem 1rem;
  }
  .office-gallery-frame {
    grid-column: 1;
  }
  .office-gallery-frame img {
    max-height: calc(100vh - 220px);
  }
  .office-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 1.7rem;
  }
  .office-gallery-prev { left: 0.8rem; }
  .office-gallery-next { right: 0.8rem; }
  .office-gallery-thumbs {
    grid-column: 1;
    justify-content: flex-start;
  }
}

/* ---------- 24a. Real Map (Leaflet + OpenStreetMap) ---------- */
.info-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 560px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.info-map .leaflet-map {
  width: 100%;
  height: 100%;
  background: var(--paper);
}

/* CAAM map marker — use square CIS logo on white circle */
.caam-marker {
  background: transparent;
  border: 0;
}
.caam-marker .pin {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--midnight);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(7,19,48,0.28);
  position: relative;
  padding: 8px;
}
.caam-marker .pin img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.caam-marker--hood .pin {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-width: 2px;
}
.hood-map-section .spot-marker .pin {
  width: 28px;
  height: 28px;
  margin: 3px;
}
.hood-map-section .spot-marker .pin img {
  width: 17px;
  height: 17px;
}
.caam-marker .pin::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: var(--midnight);
  opacity: 0.3;
  animation: pulse 2.4s var(--ease) infinite;
  z-index: -1;
}
@keyframes pulse {
  0%   { transform: scale(0.8);  opacity: 0.5; }
  100% { transform: scale(1.8);  opacity: 0; }
}

.spot-marker {
  background: transparent;
  border: 0;
  transition: opacity 600ms var(--ease);
}
/* Smooth route fade — Leaflet polylines use stroke-opacity */
.leaflet-overlay-pane path {
  transition: stroke-opacity 600ms var(--ease);
}
/* Landmark pictograms selected through Better Icons / Iconify. */
.spot-marker .pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--spot-color, var(--ink-deep));
  box-shadow: 0 2px 8px rgba(7, 19, 48, 0.22);
  display: grid;
  place-items: center;
  transform: translate3d(var(--spot-shift-x, 0), var(--spot-shift-y, 0), 0);
  transition: transform var(--dur-fast) var(--ease);
}
.spot-marker .pin img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}
.spot-marker:hover .pin {
  transform: translate3d(var(--spot-shift-x, 0), var(--spot-shift-y, 0), 0) scale(1.35);
}

.tech-region-marker {
  background: transparent;
  border: 0;
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  transition: opacity 600ms var(--ease);
}
.tech-region-marker span {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 0.3rem 0.55rem;
  text-align: center;
  color: var(--white);
  background: rgba(12, 65, 96, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(7, 19, 48, 0.2);
  font-family: var(--font-zh);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}
.leaflet-overlay-pane .tech-region-shape {
  transition: fill-opacity 600ms var(--ease), stroke-opacity 600ms var(--ease);
}

@media (max-width: 900px) {
  .transit-map-stick .leaflet-tooltip.caam-tooltip {
    width: max-content;
    max-width: 176px;
    padding: 0.3rem 0.45rem;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .transit-map-stick .caam-marker {
    display: grid !important;
    place-items: center;
  }
  .transit-map-stick .caam-marker .pin {
    width: 52px;
    height: 52px;
    padding: 6px;
  }
  .tech-region-marker span {
    padding: 0.15rem 0.3rem;
    font-size: 0.68rem;
  }
}

/* Category-specific ring colours retain the map legend. */
.spot-marker .pin[data-cat="bank"]    { --spot-color: var(--cat-bank); }
.spot-marker .pin[data-cat="conv"]    { --spot-color: var(--cat-conv); }
.spot-marker .pin[data-cat="cafe"]    { --spot-color: var(--cat-cafe); }
.spot-marker .pin[data-cat="dine"]    { --spot-color: var(--cat-dine); }
.spot-marker .pin[data-cat="art"]     { --spot-color: var(--cat-art); }
.spot-marker .pin[data-cat="health"]  { --spot-color: var(--cat-health); }
.spot-marker .pin[data-cat="hotel"]   { --spot-color: var(--cat-hotel); }
.spot-marker .pin[data-cat="transit"] { --spot-color: var(--cat-transit); }
.spot-marker .pin[data-cat="bike"]    { --spot-color: #2f7d5b; }
.spot-marker .pin[data-cat="tech"]    { --spot-color: var(--cat-tech); }
.spot-marker .pin[data-cat="park"]    { --spot-color: var(--cat-park); }

/* Hover tooltip — CAAM CIS midnight background, no close button (hover-driven) */
.leaflet-tooltip.caam-tooltip {
  background: var(--ink-deep);
  color: var(--white);
  border: 0;
  border-radius: 0;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.leaflet-tooltip.caam-tooltip::before { border-top-color: var(--ink-deep); }
.leaflet-tooltip-top.caam-tooltip::before { border-top-color: var(--ink-deep); }
.leaflet-tooltip-bottom.caam-tooltip::before { border-bottom-color: var(--ink-deep); }
.leaflet-tooltip-left.caam-tooltip::before { border-left-color: var(--ink-deep); }
.leaflet-tooltip-right.caam-tooltip::before { border-right-color: var(--ink-deep); }

/* Leaflet popup style override */
.leaflet-popup-content-wrapper {
  border-radius: 0 !important;
  background: var(--ink-deep) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}
.leaflet-popup-content {
  margin: 0.6rem 0.9rem !important;
  font-family: var(--font-zh) !important;
  font-weight: 500 !important;
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption) !important;
  color: var(--white);
}
.leaflet-popup-content .pop-en {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-default);
  color: rgba(255,255,255,0.7);
  margin-top: 0.2rem;
}
.leaflet-popup-tip {
  background: var(--ink-deep) !important;
}
.leaflet-popup-close-button {
  color: var(--white) !important;
  padding: 6px 8px 0 0 !important;
}

/* Hide leaflet's default attribution styling clutter, keep credit subtle */
.leaflet-control-attribution {
  background: rgba(255,255,255,0.7) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
}

/* ---------- 24aa. Interactive Neighborhood Map ---------- */
.hood-map-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.hood-map-filters {
  padding: 1.6rem 1.4rem;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--rule);
}
.hood-map-filters h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 1rem;
  color: var(--ink-deep);
}
.hood-map-filters .filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.hood-map-filters .filter-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--ink-deep);
  border: 1px solid transparent;
  background: var(--white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hood-map-filters .filter-list li:hover { border-color: var(--ink-deep); }
.hood-map-filters .filter-list li.is-active {
  background: var(--midnight);
  border-color: var(--ink-deep);
  color: var(--white);
}
.hood-map-filters .filter-list li .filter-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink-deep);
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.hood-map-filters .filter-label {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.hood-map-filters .filter-label strong {
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  line-height: 1.25;
  letter-spacing: 0;
  color: inherit;
}
.hood-map-filters .filter-label small {
  font-family: var(--font-zh);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--gray-1);
}
.hood-map-filters .filter-list li.is-active .filter-label small,
.hood-map-filters .filter-list li.is-active .filter-count {
  color: rgba(255, 255, 255, 0.74);
}
.hood-map-filters .filter-list li[data-cat="all"]    .filter-dot { background: var(--ink-deep); }
.hood-map-filters .filter-list li[data-cat="bank"]   .filter-dot { background: var(--cat-bank); }
.hood-map-filters .filter-list li[data-cat="conv"]   .filter-dot { background: var(--cat-conv); }
.hood-map-filters .filter-list li[data-cat="cafe"]   .filter-dot { background: var(--cat-cafe); }
.hood-map-filters .filter-list li[data-cat="dine"]   .filter-dot { background: var(--cat-dine); }
.hood-map-filters .filter-list li[data-cat="art"]    .filter-dot { background: var(--cat-art); }
.hood-map-filters .filter-list li[data-cat="health"] .filter-dot { background: var(--cat-health); }
.hood-map-filters .filter-list li[data-cat="hotel"]  .filter-dot { background: var(--cat-hotel); }
.hood-map-filters .filter-list li .filter-count {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--gray-1);
  font-family: var(--font-sans);
}

.hood-map-canvas {
  position: relative;
  background: var(--paper);
  aspect-ratio: 16 / 9;
  min-height: 520px;
  height: clamp(520px, 58vw, 760px);
  overflow: hidden;
}
.hood-map-canvas .leaflet-map { width: 100%; height: 100%; }
.hood-map-canvas .leaflet-container {
  cursor: default;
  touch-action: pan-y;
}
.hood-map-canvas:not(.is-interactive) .leaflet-control-zoom {
  display: none;
}
.hood-map-canvas.is-interactive .leaflet-container {
  cursor: grab;
  touch-action: none;
}
.hood-map-canvas.is-interactive .leaflet-container.leaflet-dragging {
  cursor: grabbing;
}

.hood-map-section .shell {
  max-width: 1640px;
}
.hood-map-stage {
  position: relative;
  height: 648vh;
  height: 648svh;
  min-height: 3600px;
}
.hood-map-stick {
  position: sticky;
  top: 76px;
  height: min(820px, calc(100vh - 92px));
  height: min(820px, calc(100svh - 92px));
  min-height: min(620px, calc(100svh - 92px));
  z-index: 1;
}
.hood-map-stick .hood-map-wrap {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}
.hood-map-stick .hood-map-filters {
  overflow: visible;
}
.hood-map-stick .hood-map-canvas {
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
}
.hood-map-scroll-triggers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 72vh;
  bottom: 72svh;
  left: 0;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
}
.hood-map-trigger {
  min-height: 72vh;
  min-height: 72svh;
}
@media (max-width: 1100px) {
  .hood-map-filters .filter-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hood-map-filters { padding: 1rem; }
  .hood-map-filters h3 { margin-bottom: 0.65rem; }
  .hood-map-filters .filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hood-map-filters .filter-list li { min-height: 44px; }
  .hood-map-filters .filter-label small { display: none; }
  .hood-map-stick { top: 68px; height: calc(100svh - 80px); }
}

/* CTA link under hero block */
.hero-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  color: var(--ink-deep);
  margin-top: 2.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink-deep);
  letter-spacing: 0;
}
.hero-link:hover { border-bottom-color: var(--midnight); }

/* ---------- 25b. Pull Quote ---------- */
.pull-quote {
  border-top: 4px solid var(--midnight);
  border-bottom: 4px solid var(--midnight);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}
.pull-quote q {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: var(--lh-h3);
  color: var(--ink-deep);
  letter-spacing: 0;
  quotes: "" "";
  display: block;
  margin: 0;
}
.pull-quote .quote-zh {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--gray-1);
  line-height: var(--lh-comfort);
}

/* ---------- 26. Responsive ---------- */
@media (max-width: 1100px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs article { border-right: 0; }
  .specs article:nth-child(odd) { border-right: 1px solid var(--rule); }
  .text-block, .text-icons, .floors {
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }
  .hood-grid { grid-template-columns: repeat(2, 1fr); }
  .hood-grid article { border-right: 0; }
  .hood-grid article:nth-child(odd) { border-right: 1px solid var(--rule); }
  .venue-grid,
  .venue-grid-three { grid-template-columns: repeat(2, 1fr); }
  .split-editorial { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --section-pad: 3rem; }
  .shell { min-width: 0; }
  .header-bar { gap: 0.625rem; }
  .aqi-wrap { margin-left: auto; }
  .aqi-tooltip { position: fixed; top: 76px; right: 1rem; }
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  /* keep AQI widget visible on mobile next to menu toggle */
  .aqi-widget {
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
  }
  .brand-mark-image { width: 156px; }
  .page-hero-text,
  .hero-text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    box-sizing: border-box;
  }
  .page-hero-text h1,
  .page-hero-text .lede,
  .page-hero-text .lede-zh,
  .hero-text .hero-sub,
  .hero-text .hero-body {
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    hyphens: none;
  }
  .page-hero-text h1,
  .hero-text .hero-sub,
  .hero-text .hero-body {
    max-width: 100%;
  }
  .page-hero-text h1 {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.12;
    max-width: 100%;
  }
  .page-hero-text h1 .h-zh { font-size: 0.72em; }
  .page-hero-text .lede,
  .hero-text .hero-body,
  .page-hero-text .lede-zh {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .hero-text .hero-sub {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    line-height: var(--lh-snug);
    max-width: 100%;
  }
  .hero-actions,
  .section-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .hero-actions .btn,
  .section-actions .btn,
  .hero-actions .arrow-cta,
  .section-actions .arrow-cta {
    width: 100%;
    justify-content: center;
  }
  .section-tight nav {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-content: stretch !important;
    gap: 0.5rem !important;
  }
  .section-tight nav .nav-link {
    white-space: normal;
    overflow-wrap: anywhere;
  }


  .specs, .hood-grid { grid-template-columns: 1fr; }
  .specs article, .hood-grid article { border-right: 0; }
  .pillars { grid-template-columns: 1fr; }
  .venue-grid,
  .venue-grid-three { grid-template-columns: 1fr; }
  .spec-sheet > div {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .spec-sheet dd { text-align: left; }
  .team-list > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 1rem 0;
  }

  .image-grid {
    grid-template-columns: 1fr !important;
  }
  .image-grid figure { grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
  .icon-list { grid-template-columns: 1fr !important; }
  .icon-list li { grid-template-columns: 56px 1fr; gap: 1rem; padding: 1.2rem 0; }

  .site-footer .footer-base { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .inquiry-form .row-2 { grid-template-columns: 1fr; }
  .inquiry-form .submit-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .cta-strip .shell { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

/* ---------- 28. Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .mobile-nav,
  .menu-toggle,
  .cta-strip,
  .image-carousel .carousel-arrow,
  .reveal { opacity: 1 !important; transform: none !important; }

  .site-header,
  .site-footer,
  .skip-link,
  .mobile-nav,
  .menu-toggle,
  .cta-strip,
  .image-carousel .carousel-arrow,
  video { display: none !important; }

  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }

  .section,
  .section-tight { padding: 1rem 0 !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  .page-hero-image,
  .hero-image { max-height: 4cm; }
  img { max-width: 100%; }
}


/* Short mobile viewports cannot fit the pinned drawing plus four floor rows.
   Let the complete approved descriptions follow normal document scrolling. */
@media (max-width: 900px) and (max-height: 600px) {
  .floors-stage { height: auto; }
  .floors-stage-stick { position: relative; top: auto; height: auto; overflow: visible; }
  .floors-stage-stick > .shell { height: auto; }
  .floors-grid { height: auto; grid-template-rows: 280px auto; }
  .floors-text { gap: 1.5rem; padding-block: 1rem 2rem; }
  .floor-step,
  .floor-step.is-active { opacity: 1; border-left-color: transparent; }
  .floor-step p { display: block; max-width: none; }
  .floors-triggers,
  .floors-dim,
  .floors-frame { display: none; }
}

/* Muted OSM basemap: scope to tiles so CAAM pins and routes keep their colors.
   This is a color treatment, not the former CARTO Positron tile design. */
.caam-basemap {
  filter: grayscale(1) contrast(0.72) brightness(1.17);
}