/* ==========================================================================
   405 Dickson · public site stylesheet (landing + suite share page)
   Palette: Place Dickson sage green + sky blue on navy ink and soft concrete.
   ========================================================================== */
:root {
  /* Place Dickson brand: sage green + sky blue from the building sign */
  --green: #79b58f;
  --green-deep: #5e9c76;
  --green-tint: #eaf4ee;
  --blue: #6fa6dc;
  --blue-deep: #4f88c4;
  --blue-tint: #eaf2fa;
  --ink: #1b2a38;
  --steel: #34495e;
  --slate: #62748a;
  --line: #dde3e8;
  --concrete: #f5f7f6;
  --paper: #ffffff;
  --signal: var(--blue-deep);
  --signal-deep: #3b73ad;
  --ok: #4f9a6e;
  --warn: #d98b00;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(16, 24, 32, .25);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--concrete); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); letter-spacing: .01em; line-height: 1.05; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 700; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--green-deep); font-weight: 600; }
p { margin: 0 0 12px; }
.muted { color: var(--slate); }
.hidden, [hidden] { display: none !important; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--steel); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(16,24,32,.06); }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brand { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.brand img { height: 52px; width: auto; display: block; }
.brand .brand-405 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .08em; color: var(--slate); border-left: 1px solid var(--line); padding-left: 10px; }
.nav-links { display: flex; gap: 22px; align-items: center; font-size: 14px; }
.nav-links a { text-decoration: none; opacity: .85; }
.nav-links a:hover { opacity: 1; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 600; }
.lang-toggle button { background: transparent; color: var(--ink); border: 0; padding: 6px 10px; cursor: pointer; opacity: .6; }
.lang-toggle button.active { background: var(--ink); color: #fff; opacity: 1; }
.nav-burger { display: none; background: transparent; border: 0; color: var(--ink); font-size: 26px; cursor: pointer; }
@media (max-width: 860px) {
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; padding: 16px 20px 22px; align-items: flex-start; }
  .nav-links.open { display: flex; }
  .nav-burger { display: block; }
}

/* ---- hero ---- */
/* ==========================================================================
   Hero: the 3D tour is the hero, full width. The headline sits over it until
   the tour reports load, then clears so the whole frame is available for
   walking. The scrim then keeps only a top gradient (the sticky nav needs a
   dark edge) so the tour's own pills along the bottom are not dimmed. (Rule 21)
   ========================================================================== */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% 15%, rgba(111,166,220,.38), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(121,181,143,.28), transparent 60%), linear-gradient(180deg, #223546 0%, #1b2a38 100%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; }
.hero--tour { display: flex; flex-direction: column; padding: 0; }   /* section padding would open a band above the tour */
.hero__tour { position: relative; height: calc(100svh - 72px); min-height: 520px; max-height: 900px; background: #000; z-index: 0; }
.hero__tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero__tour .cover { position: absolute; inset: 0; background: linear-gradient(135deg, #1d2a38, #0d141b); display: grid; place-items: center; text-align: center; padding: 24px; }
.hero__tour .cover .pulse { width: 64px; height: 64px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: 0 0 0 0 rgba(111,166,220,.6); animation: pulse 2s infinite; font-size: 26px; }
.hero__tour .badge-3d { position: absolute; top: 14px; left: 14px; background: rgba(16,24,32,.85); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; letter-spacing: .06em; z-index: 1; pointer-events: none; }
.hero__scrim { position: absolute; left: 0; right: 0; top: 0; height: calc(100svh - 72px); min-height: 520px; max-height: 900px; z-index: 2; pointer-events: none; transition: background .6s ease;
  background: linear-gradient(180deg, rgba(16,24,32,.55) 0%, rgba(16,24,32,.15) 22%, rgba(16,24,32,.05) 45%, rgba(16,24,32,.78) 78%, var(--ink) 100%); }
/* same box as the tour frame (not the whole section, which also holds the stats bar).
   pointer-events none: the headline sits over the whole frame until the tour is live, and
   on phones Matterport waits for a first tap before it starts. Only the buttons catch taps. */
.hero__inner { position: absolute; left: 0; right: 0; top: 0; height: calc(100svh - 72px); min-height: 520px; max-height: 900px; z-index: 3; display: flex; align-items: flex-end; padding-bottom: clamp(40px, 6vw, 80px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero.tour-ready .hero__inner a, .hero.tour-ready .hero__inner button { pointer-events: none; }
.hero__inner .wrap { position: relative; }
.hero__inner h1 { max-width: 18ch; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; text-shadow: 0 6px 40px rgba(0,0,0,.7); }
.hero__inner p.lead { font-size: 19px; color: rgba(255,255,255,.85); max-width: 560px; margin: 18px 0 26px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__hint { position: absolute; right: 14px; top: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: rgba(16,24,32,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); transition: opacity .55s ease; pointer-events: none; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(121,181,143,.6); animation: pulse 2.4s infinite; }
/* tour live: copy and hint clear at every width, scrim keeps the top edge only */
.hero.tour-ready .hero__inner { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.hero.tour-ready .hero__hint { opacity: 0; }
.hero.tour-ready .hero__scrim { background: linear-gradient(180deg, rgba(16,24,32,.72) 0%, rgba(16,24,32,.2) 16%, transparent 30%, transparent 100%); }
.stats { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
.stats > div { background: rgba(16,24,32,.95); padding: 18px 22px; }
.stats b { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; }
.stats span { font-size: 12px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats > div:last-child { grid-column: span 2; } }
@media (max-width: 760px) {
  .hero__tour, .hero__scrim, .hero__inner { height: calc(100svh - 64px); min-height: 460px; }
  .hero__hint { font-size: 11px; white-space: nowrap; }
  .hero__inner { padding-bottom: 24px; }
  .hero__inner h1 { font-size: 30px; max-width: none; }
  .hero__inner p.lead { display: none; }   /* the page below carries the pitch; the phone frame is for the tour */
  .hero__inner .eyebrow { font-size: 10px; }
  .hero__tour .badge-3d { display: none; }
  .hero-cta .btn { padding: 10px 14px; font-size: 14px; }
}

/* ---- sections ---- */
section { padding: 72px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head p { max-width: 560px; margin: 8px 0 0; color: var(--slate); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- suite cards ---- */
.suites { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.suite { background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .15s ease, box-shadow .15s ease; }
.suite:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.suite-top { padding: 18px 20px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.suite-code { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; }
.suite-type { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); font-weight: 600; margin-top: 4px; }
.status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.status.available { background: var(--green-tint); color: var(--green-deep); }
.status.notice { background: #fff3dc; color: var(--warn); }
.status.leased { background: #e9ecef; color: var(--slate); }
.status.reserved { background: #e7e9ff; color: #4048b8; }
.suite-body { padding: 14px 20px 18px; flex: 1; }
.suite-sqft { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.suite-sqft small { font-size: 14px; color: var(--slate); font-weight: 500; }
.suite-rate { color: var(--slate); font-size: 14px; margin: 2px 0 12px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; color: var(--steel); }
.specs div::before { content: '• '; color: var(--green); }
.suite-feat { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite-feat span { font-size: 11px; background: var(--concrete); padding: 4px 8px; border-radius: 6px; color: var(--steel); }
.suite-actions { display: flex; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }
.suite-actions .btn { flex: 1; justify-content: center; }
.placeholder-flag { font-size: 10px; color: #b45309; background: #fff7e6; border: 1px dashed #f0c060; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ---- tour section ---- */
.tour-frame { aspect-ratio: 16 / 8; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--shadow); position: relative; }
.tour-frame iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .tour-frame { aspect-ratio: 4 / 5; } }

/* ---- feature columns ---- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.col .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--green-tint); color: var(--green-deep); display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; }
.col ul { margin: 10px 0 0; padding-left: 18px; color: var(--steel); font-size: 14px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* ---- dark band ---- */
.band { background: var(--ink); color: #fff; }
.band .col .ico { background: rgba(121,181,143,.18); color: var(--green); }
.band .eyebrow { color: var(--green); }
.band .col { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.band .col ul, .band .muted { color: rgba(255,255,255,.7); }

/* ---- contact ---- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
input, select, textarea { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(121,181,143,.35); border-color: var(--signal); }
textarea { min-height: 90px; resize: vertical; }
.notice { border-left: 3px solid var(--warn); background: #fff7e6; padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.success { text-align: center; padding: 30px 10px; }
.success .check { width: 60px; height: 60px; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); display: grid; place-items: center; font-size: 30px; margin: 0 auto 12px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } #gbp-card { grid-template-columns: 1fr !important; } }

/* ---- footer ---- */
footer { background: #13202b; color: rgba(255,255,255,.7); padding: 40px 0; font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer img { height: 34px; width: auto; opacity: .9; }
footer a { color: #fff; text-decoration: none; }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: -80px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; opacity: 0; transition: bottom .3s ease, opacity .3s ease; z-index: 90; pointer-events: none; white-space: nowrap; }
.toast.show { bottom: 28px; opacity: 1; }

/* ==========================================================================
   Chat widget · the qualification assistant
   ========================================================================== */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 80; font-family: var(--font); }
.chat.open .chat-launcher { opacity: 0; pointer-events: none; transform: translateY(10px); }
.chat-launcher { transition: opacity .2s ease, transform .2s ease; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px 10px 10px; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); font-weight: 600; font-size: 14px; }
.chat-launcher .dot { width: 36px; height: 36px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-size: 18px; position: relative; }
.chat-launcher .dot::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #34d399; border: 2px solid var(--ink); }
.chat-panel { position: fixed; right: 20px; bottom: -700px; width: min(390px, calc(100vw - 32px)); height: min(620px, calc(100vh - 100px)); background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: bottom .35s ease, opacity .3s ease; pointer-events: none; }
.chat-panel.open { bottom: 20px; opacity: 1; pointer-events: auto; }
.chat-head { background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.chat-head .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.chat-head b { display: block; font-size: 14px; }
.chat-head small { font-size: 11px; opacity: .7; }
.chat-head button { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--concrete); display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.user { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--slate); margin-right: 3px; animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .2s; } .msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.chat-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: #fff; border-top: 1px solid var(--line); }
.chat-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 11px; font-size: 12px; cursor: pointer; font-weight: 600; color: var(--steel); }
.chat-chips button:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; border-radius: 999px; }
.chat-input button { background: var(--signal); color: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; font-size: 18px; flex: none; }
.chat-vac { font-size: 12px; background: #fff7e6; color: #92400e; padding: 8px 12px; border-bottom: 1px solid #f3dcb0; }
@media (max-width: 480px) { .chat-launcher span.txt { display: none; } .chat-launcher { padding: 6px; } }

/* ==========================================================================
   Suite share page
   ========================================================================== */
.suite-hero { background: var(--ink); color: #fff; padding: 40px 0 30px; }
.suite-hero .wrap { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.suite-hero .price { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; }
.suite-hero .price small { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.7); font-family: var(--font); }
.suite-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 26px; align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec-table td:first-child { color: var(--slate); width: 45%; }
.spec-table td:last-child { font-weight: 600; text-align: right; }
.share-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.share-row input { font-size: 13px; }
@media (max-width: 900px) { .suite-layout { grid-template-columns: 1fr; } .suite-hero .wrap { grid-template-columns: 1fr; } }

/* ==========================================================================
   Booking block (replaces the landing lead form)
   ========================================================================== */
.book-steps { margin: 20px 0 0; padding: 0 0 0 20px; display: grid; gap: 12px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.5; }
.book-steps li::marker { color: var(--green); font-weight: 700; }
.band .book-card { background: #fff; color: var(--ink); border-color: transparent; box-shadow: 0 24px 60px -28px rgba(0,0,0,.6); }
.book-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.book-av { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 20px; font-weight: 700; flex: none; position: relative; }
.book-av::after { content: ''; position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #34d399; border: 2px solid #fff; }
.book-head b { display: block; font-size: 16px; font-family: var(--display); }
.book-head small { display: block; font-size: 12px; color: var(--slate); margin-top: 2px; }
.book-go { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; }
.book-ask { width: 100%; justify-content: center; margin-top: 10px; }
.book-card .btn-ghost { border: 1px solid var(--line); color: var(--steel); background: #fff; }
.book-card .btn-ghost:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.book-or { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--slate); text-align: center; line-height: 1.8; }
.book-or a { color: var(--blue-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.book-or a:hover { text-decoration: underline; }
.book-or span { display: block; margin-bottom: 2px; }

/* ==========================================================================
   Self-qualification blocks: gross cost, comparison, building sheet,
   lease conditions, pipeline, brokers, tour checklist
   ========================================================================== */
.suite-gross { margin: 6px 0 2px; font-weight: 700; font-size: 15px; color: var(--ink); }
.suite-gross small { display: block; font-weight: 400; font-size: 11.5px; color: var(--slate); margin-top: 1px; }
.suite-combo { margin-top: 10px; font-size: 12.5px; color: var(--green-deep); font-weight: 600; padding: 6px 10px; background: var(--green-tint); border-radius: 8px; display: inline-block; }
.ph-flag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); border: 1px dashed var(--warn); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

/* comparison table */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.cmp th, .cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { background: var(--ink); color: #fff; font-family: var(--display); font-size: 20px; letter-spacing: .02em; }
.cmp thead th:first-child { background: var(--ink); }
.cmp thead th a { color: #fff; text-decoration: none; }
.cmp thead .placeholder-flag { display: inline-block; margin: 6px 0 0; }
.cmp tbody th { font-weight: 600; color: var(--slate); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; width: 190px; background: var(--concrete); }
.cmp tbody tr:nth-child(odd) td { background: #fbfcfc; }
.cmp tfoot th, .cmp tfoot td { border-bottom: 0; background: var(--concrete); }
.cmp td b { font-size: 15px; }

/* building sheet */
.bld-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 20px; align-items: start; }
.bld-grid h3 { margin: 0 0 10px; font-family: var(--display); font-size: 22px; }
.bld-grid .spec-table td:first-child { width: 42%; }

/* lease conditions (on the dark band) */
.lease-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lease-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.lease-wide { grid-column: span 2; }
.lease-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.lease-v { font-size: 15px; line-height: 1.5; color: #fff; }
.band .lease-v .ph-flag { color: #f2c063; border-color: #f2c063; }
.lease-docs { margin: 0; padding-left: 20px; color: #fff; font-size: 15px; line-height: 1.7; }
.lease-docs li::marker { color: var(--green); font-weight: 700; }

/* pipeline */
.pipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pipe-grid h3 { margin: 0 0 12px; font-family: var(--display); font-size: 22px; }
.pipe-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.pipe-when { font-weight: 700; color: var(--green-deep); white-space: nowrap; }
.pipe-wait { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; background: var(--blue-tint); border-radius: 10px; font-size: 14px; }
.pipe-wait .btn { flex: none; }

/* brokers */
.bro-card { padding: 30px; }
.bro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bro-item { min-width: 0; }
.bro-item .lease-k { color: var(--green-deep); }
.bro-item .lease-v { color: var(--ink); }
.bro-item a { color: var(--blue-deep); font-weight: 600; text-decoration: none; }
.bro-sheets { display: flex; flex-wrap: wrap; gap: 6px; }
.bro-sheets .btn { text-decoration: none; }

/* tour checklist under the frame */
.tour-under { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-top: 18px; }
.tour-under--solo { margin-top: 0; }
.tour-btns { display: flex; flex-direction: column; gap: 10px; }
.tour-check { font-size: 14px; color: rgba(255,255,255,.85); }
.tour-check b { display: block; font-family: var(--display); font-size: 18px; color: #fff; margin-bottom: 6px; }
.tour-check ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 30px; }
.tour-check li { margin-bottom: 4px; break-inside: avoid; }

@media (max-width: 900px) {
  .bld-grid, .pipe-grid { grid-template-columns: 1fr; }
  .lease-grid, .bro-grid { grid-template-columns: 1fr 1fr; }
  .tour-under { grid-template-columns: 1fr; }
  .tour-check ul { columns: 1; }
}
@media (max-width: 560px) {
  .lease-grid, .bro-grid { grid-template-columns: 1fr; }
  .lease-wide { grid-column: span 1; }
  .pipe-item, .pipe-wait { flex-direction: column; align-items: flex-start; }
}

/* ---- print: the suite page doubles as the broker spec sheet (?print=1) ---- */
@media print {
  header.nav, footer, .chat-launcher, .chat-panel, .dkRoot, .share-row, .book-card, .tour-frame, .suite-actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .suite-hero { background: #fff !important; color: #000 !important; padding: 0 0 12px; border-bottom: 2px solid #000; }
  .suite-hero .price small { color: #333; }
  .suite-layout { grid-template-columns: 1fr; gap: 12px; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .print-only { display: block !important; }
}
.print-only { display: none; }