/* Ensemo 導入大樓 — CorporateVIP front end, second building (2026-10-27).
   Same structure as the AgentDesk building (frontend/css/site.css); the first viewport
   follows the approved comp ensemo-comp-b on its 1536x1024 grid: every region sits at its
   measured box in % of the frame, type scales through container query units (--u = one comp px).
   Palette: deep navy #1A2340 + champagne gold on a warm stone ground (the Ensemo brand). */

@font-face { font-family: "YJ Serif"; src: url("../assets/fonts/noto-serif-tc-700.woff2?v=4") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "YJ Serif"; src: url("../assets/fonts/noto-serif-tc-500.woff2?v=4") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "YJ Sans"; src: url("../assets/fonts/noto-sans-tc-400.woff2?v=4") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "YJ Sans"; src: url("../assets/fonts/noto-sans-tc-600.woff2?v=4") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #1A2340;
  --navy-deep: #111830;
  --navy-soft: #5A6178;
  --indigo: #1A2340;          /* primary fill (buttons, current floor): Ensemo navy */
  --indigo-hover: #2A3560;
  --indigo-glow: rgb(26 35 64 / .25);
  --accent: #8C6B32;          /* text accent and hover: deep gold, 4.7:1 on white */
  --gold: #8C6B32;
  --gold-metal: #A98236;
  --champagne: #E9D7A6;
  --ground: #F4F1EA;
  --ground-top: #F8F6F1;
  --band: #F7F3EA;
  --hairline: #E3DCCD;
  --blank: #C9BFA8;
  --indigo-wash: rgb(201 169 98 / .18);
  --white: #FFFFFF;
  --serif: "YJ Serif", "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
  --sans: "YJ Sans", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--navy);
  font-family: var(--sans);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgb(201 169 98 / .3); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--gold-metal); outline-offset: 3px; border-radius: 4px; }

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 16px; background: var(--navy); color: var(--white); text-decoration: none; border-radius: 8px; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }

/* ---------- the comp frame ---------- */
.frame {
  --u: calc(100cqw / 1536);
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ground-top) 0%, var(--ground) 70%, #EDE7DA 86%, var(--band) 87.9%, var(--band) 100%);
}
.frame main, .frame section { position: static; }

/* ---------- top bar (comp: 0-72) ---------- */
.topbar {
  position: absolute; inset: 0 0 auto 0; height: 7.03%;
  background: rgb(248 246 241 / .94);
  border-bottom: 1px solid var(--hairline);
  z-index: 3;
}
.wordmark {
  position: absolute; left: 2.6%; top: 26%; height: 48%;
  display: flex; align-items: center; gap: calc(var(--u) * 14);
  color: var(--navy); text-decoration: none;
}
.wordmark img { height: 100%; width: auto; }
.wm-sep { width: 1px; height: 90%; background: var(--gold-metal); opacity: .7; }
.wm-cjk { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 23); letter-spacing: .14em; color: var(--gold); white-space: nowrap; }
.steps {
  position: absolute; left: 60.5%; width: 37%; top: 28%; height: 44%;
  display: flex; align-items: center; justify-content: space-between;
}
.steps a {
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--u) * 14.5); letter-spacing: .06em;
  color: var(--navy); text-decoration: none;
  padding: calc(var(--u) * 4) 0;
  background: linear-gradient(var(--gold-metal), var(--gold-metal)) left bottom / 0 1.5px no-repeat;
  transition: color .2s var(--ease-out), background-size .3s var(--ease-out);
}
.steps a:hover { color: var(--accent); background-size: 100% 1.5px; }

/* ---------- exterior ---------- */
/* plate tower.png (1536x1024) drawn at 0.84: building x 387-1153, roof 53, base 993 in plate px */
.tower {
  position: absolute; left: 7.49%; top: 4.3%; width: 83.98%; height: 83.98%;
  margin: 0; pointer-events: none;
}
.tower img { width: 100%; height: 100%; object-fit: contain; }
.ground {
  position: absolute; left: 18%; width: 64%; top: 83%; height: 5.5%;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgb(120 96 56 / .16), rgb(120 96 56 / 0) 70%);
}
/* the blank bronze roof band: plate 513-1087 x, 87-173 y */
.roof-sign {
  position: absolute; left: 35.5%; top: 12.1%; width: 31.4%; height: 4.6%;
  margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  color: #5A4214;
  text-shadow: 0 1px 0 rgb(255 236 190 / .55), 0 calc(var(--u) * -1) 0 rgb(60 40 10 / .25);
  white-space: nowrap;
}
.roof-latin { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 27); letter-spacing: .02em; }
.roof-cjk { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 20); letter-spacing: .12em; }

.headline {
  position: absolute; left: 3.13%; top: 18.4%; width: 27%;
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--u) * 62); line-height: 1.22; letter-spacing: .04em;
  color: var(--navy); white-space: nowrap;
}
.subline {
  position: absolute; left: 3.13%; top: 35.2%; width: 26%;
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: calc(var(--u) * 22); line-height: 1.75; letter-spacing: .1em;
  color: var(--navy); white-space: nowrap;
}

/* offices picker: one pill, three segments (comp: 48-410 x, 470-533 y) */
.hero-offices {
  position: absolute; left: 3.13%; top: 45.9%; width: 23.57%; height: 6.15%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: calc(var(--u) * 1.5) solid #D6C08A; border-radius: 999px; background: rgb(255 255 255 / .75);
  padding: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgb(90 70 30 / .08);
}
.hero-offices label { position: relative; display: flex; cursor: pointer; }
.hero-offices label + label::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: #DCCFA9; transition: opacity .2s; }
.hero-offices label:has(input:checked)::before, .hero-offices label:has(input:checked) + label::before { opacity: 0; }
.hero-offices input { position: absolute; opacity: 0; pointer-events: none; }
.hero-offices span {
  flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 21); letter-spacing: .08em; color: var(--navy);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.hero-offices label:hover span { color: var(--accent); }
.hero-offices input:checked + span { background: var(--navy); color: var(--champagne); box-shadow: inset 0 0 0 1px rgb(201 169 98 / .6); }
.hero-offices input:focus-visible + span { outline: 2px solid var(--gold-metal); outline-offset: 2px; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  background: var(--indigo); color: var(--champagne); text-decoration: none;
  font-family: var(--serif); font-weight: 700; letter-spacing: .08em;
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgb(26 35 64 / .28), inset 0 0 0 1px rgb(201 169 98 / .55);
  transition: background-color .2s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:hover { background: var(--indigo-hover); transform: translateY(-1px); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgb(26 35 64 / .32), inset 0 0 0 1px rgb(201 169 98 / .7); }
.btn-primary:active { transform: translateY(0); }
.btn-primary .ic { stroke-width: 2; }
.hero-cta {
  position: absolute; left: 3.13%; top: 55.5%; width: 20.44%; height: 6.64%;
  font-size: calc(var(--u) * 23); letter-spacing: .12em;
}
.hero-cta .ic { width: 1.05em; height: 1.05em; }

/* five floor keys (comp: band 900-1024; gold discs with numbers) */
.floor-keys {
  position: absolute; left: 0; right: 0; top: 87.9%; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  border-top: 1px solid #D9C99F;
}
.floor-keys a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8);
  color: var(--navy); text-decoration: none;
}
.floor-keys a + a::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: #DCCFA9; }
.fk-n {
  display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%;
  font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 21); color: #FFF8E6;
  background: radial-gradient(circle at 35% 30%, #E2C27A, #B08A4A 60%, #8A6A2E);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(110 80 20 / .35), inset 0 1px 0 rgb(255 255 255 / .35);
  text-shadow: 0 1px 1px rgb(80 56 16 / .5);
  transition: transform .25s var(--ease-out);
}
.fk-t { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 19); letter-spacing: .1em; transition: color .2s var(--ease-out); }
.floor-keys a:hover .fk-t { color: var(--accent); }
.floor-keys a:hover .fk-n { transform: translateY(-2px); }

/* ---------- the plan card: plate behind live text ----------
   Same plate geometry as the AgentDesk card (header 69–184, seven rows 185–812, divider 311
   in plate px); the Ensemo card sits right of the tower (comp: card 1100–1500 x, from 300 y). */
.plan {
  position: absolute; left: 70.05%; top: 26.6%; width: 29.17%; height: 35.99%;
  margin: 0;
  container-type: inline-size;
  --cu: calc(100cqw / 583.5);   /* one comp px of the card; the card scales anywhere */
}
.plan-plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-title {
  position: absolute; left: 5.36%; right: 5.36%; top: 7.22%; height: 13.1%;
  margin: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--cu) * 36); letter-spacing: .2em; text-indent: .4em;
  color: var(--champagne);
}
.plan-rows { position: absolute; left: 5.36%; right: 5.36%; top: 21.02%; height: 71.4%; margin: 0; display: grid; grid-template-rows: repeat(7, 1fr); }
.plan-rows .row { display: grid; grid-template-columns: 25.1% 1fr; align-items: center; min-width: 0; }
.plan-rows dt {
  justify-self: start; margin-left: 7.1%; width: calc(var(--cu) * 80);
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--cu) * 19); color: var(--navy);
  text-align: justify; text-align-last: justify;
}
.plan-rows dd {
  margin: 0 0 0 calc(var(--cu) * 19); min-width: 0;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--cu) * 18.5); letter-spacing: .04em;
  color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-rows dd.is-fresh { animation: fresh 1.6s var(--ease-out); }
@keyframes fresh {
  0% { color: var(--accent); background: linear-gradient(var(--indigo-wash), var(--indigo-wash)) left center / 100% 70% no-repeat; }
  60% { color: var(--accent); }
  100% { color: var(--navy); background: linear-gradient(var(--indigo-wash), var(--indigo-wash)) left center / 0% 70% no-repeat; }
}
.blank {
  display: block; width: calc(var(--cu) * 292); max-width: 100%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--blank) 0 calc(var(--cu) * 8), transparent calc(var(--cu) * 8) calc(var(--cu) * 15));
}
body[data-view="floor-4"] [data-row="payment"] dd { color: var(--accent); font-weight: 600; }
body[data-view="floor-4"] [data-row="payment"] dt { color: var(--accent); }

/* ---------- brand: logos and the site footer ---------- */
.brand-logo { display: block; width: auto; }
.site-foot { background: var(--white); border-top: 1px solid var(--hairline); color: var(--navy); }
.sf-in { max-width: 1440px; margin: 0 auto; padding: 22px 32px calc(22px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.sf-by { display: flex; align-items: center; gap: 12px; margin: 0; }
.sf-k { font-size: 13px; letter-spacing: .12em; color: var(--navy-soft); }
.sf-mark { height: 34px; width: auto; }
.sf-name { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.sf-links { display: flex; gap: 22px; }
.sf-links a { font-size: 14px; color: var(--navy-soft); text-decoration: none; }
.sf-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.sf-leave { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--navy-soft); cursor: pointer; }
.sf-leave:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media print { .site-foot { display: none; } }