/* Self-hosted variable fonts, subset to the characters this site actually uses.
   The wght axis spans 100-900, so every weight in the stylesheet resolves from
   one file per family. unicode-range keeps a Lithuanian page from fetching the
   Cyrillic cut and vice versa. Licences: assets/fonts/OFL-Montserrat.txt and
   assets/fonts/OFL-Inter.txt (SIL OFL 1.1, redistribution requires they ship). */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-0101, U+0104-0107, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0141-0146, U+015A-015B, U+0160-0161, U+016A-016B, U+0172-0173, U+0179-017E, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-0101, U+0104-0107, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0141-0146, U+015A-015B, U+0160-0161, U+016A-016B, U+0172-0173, U+0179-017E, U+2010-2015, U+2018-201E, U+2020, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491;
}

:root {
  /* Trust Palette */
  --color-navy: #0A1428;
  --color-steel: #4A5568;
  --color-stone: #F3F4F6;
  --color-white: #FFFFFF;
  --color-bronze: #A67C00; /* Subtle architectural premium accent */
  --color-bronze-rgb: 166, 124, 0; /* keep in sync with --color-bronze */
  --color-border: #E5E7EB;
  --color-footer: #050A14;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  --space-section: 6rem;
  --space-gutter: 3rem;

  --radius-input: 4px;
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-fab: 0 2px 10px rgba(0, 0, 0, 0.2);

  --transition: all 0.3s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-white);
  color: var(--color-navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-steel);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

.text-lead {
  font-size: 1.125rem;
  color: var(--color-steel);
  font-weight: 300;
  max-width: 600px;
}

/* LAYOUT */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 3rem;
}

section {
  padding: 6rem 0;
}

.bg-stone { background-color: var(--color-stone); }
.bg-navy { background-color: var(--color-navy); color: var(--color-white); }
.bg-navy h2, .bg-navy h3 { color: var(--color-white); }

/* NAV */
/* Scoped to #navbar, NOT the bare `nav` element. Inner pages contain a second
   <nav> for the breadcrumb; with a bare selector that breadcrumb also became a
   fixed white 90px bar at z-index 1000 and, being later in the DOM, painted
   over the real header menu – which is why the menu vanished on subpages only. */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: height 0.3s ease;
}

#navbar.scrolled { height: 70px; }

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--color-navy);
  text-decoration: none;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-heading);
  text-decoration: none;
  color: var(--color-steel);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: var(--transition);
}

.nav-links a:hover { color: var(--color-navy); }

.lang-switcher {
  display: flex;
  gap: 1rem;
}

.lang-btn {
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-steel);
  cursor: pointer;
  text-transform: uppercase;
  transition: var(--transition);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.lang-btn.active, .lang-btn:hover {
  color: var(--color-navy);
  border-bottom-color: var(--color-bronze);
}

/* HAMBURGER */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 10;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  margin: 5px 0;
  transition: 0.25s ease;
}

/* FLOATING CTA (mobile only) */
.floating-cta {
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 999;
  background: var(--color-navy);
  color: var(--color-white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow-fab);
  transition: transform 0.2s, opacity 0.3s;
}
.floating-cta svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floating-cta:hover { transform: scale(1.08); }
.floating-cta.hidden { opacity: 0; pointer-events: none; }

/* FOOTER */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col p, .footer-col a {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  text-decoration: none;
  line-height: 1.8;
  display: block;
}
.footer-col a:hover { color: var(--color-white); }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.footer-contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.8125rem;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 1.25rem 2.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid var(--color-navy);
  cursor: pointer;
}

.btn:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

/* Button variants. Without these a CTA outside .hero-actions renders navy. */
.btn--accent {
  background: var(--color-bronze);
  border-color: var(--color-bronze);
  color: var(--color-white);
}

.btn--accent:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.btn--inverse {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.btn--inverse:hover {
  background: transparent;
  color: var(--color-white);
}

.btn--block { width: 100%; }

/* HERO - Brochure Style */
.hero {
  padding-top: 140px;
  padding-bottom: 6rem;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* The hero photo is an <img> rather than a background so it can be served
   responsively (srcset picks a width, AVIF/WebP pick a format). It must stay
   the first child of .hero: it shares z-index 0 with .hero::after, so paint
   order is DOM order, and ::after has to come second for its backdrop-filter
   to blur the photo. .hero keeps background-color as the pre-decode fill. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,20,40,0.88) 0%, rgba(10,20,40,0.75) 50%, rgba(10,20,40,0.85) 100%);
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.hero-content h1 span.accent { color: var(--color-bronze); }

.hero-content .eyebrow { color: rgba(255, 255, 255, 0.6); }

.hero-content .text-lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
  font-weight: 300;
}

.hero-actions {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
}

.hero-actions .btn {
  background: var(--color-bronze);
  color: var(--color-white);
  border-color: var(--color-bronze);
}

.hero-actions .btn:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

/* BENTO BOX STATS */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.bento-item {
  background: var(--color-white);
  padding: 3rem 2rem;
}

.bento-val {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.bento-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--color-steel);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* TEXT GRIDS */
.text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

.section-title {
  font-size: clamp(2rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
}

/* FEATURE CARDS (WHY US) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}

.feature-card {
  border-top: 2px solid var(--color-navy);
  padding-top: 1.5rem;
}

.feature-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bronze);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.feature-card p {
  color: var(--color-steel);
  font-size: 0.9375rem;
}

/* INFRASTRUCTURE GRID */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: 3rem;
}

.infra-item {
  background: var(--color-white);
  padding: 2.5rem 2rem;
}

.infra-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.infra-item h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  color: var(--color-navy);
}

.infra-item p {
  font-size: 0.875rem;
  color: var(--color-steel);
}

/* SPACES DATA TABLE */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 3rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 1.5rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-steel);
  font-weight: 600;
}

.data-table td {
  font-size: 1rem;
  color: var(--color-navy);
}

.td-large {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.table-link {
  font-family: var(--font-heading);
  color: var(--color-bronze);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-link:hover { text-decoration: underline; }

/* LOCATION MAP SECTION */
.map-container {
  width: 100%;
  height: 100%;
  min-height: 450px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Full-bleed embedded map. Deliberately not .map-container, which is the
   padded, bordered box around the drawn location graphic. The fixed height
   here reserves the box before the frame loads, so loading="lazy" cannot
   shift the layout. */
.map-section { padding: 0; }
.map-section iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  filter: saturate(0.8) contrast(1.05);
}
@media (max-width: 768px) {
  .map-section iframe { height: 320px; }
}

.dist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

.dist-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

.dist-label { color: var(--color-steel); font-size: 0.875rem; }
.dist-val { font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; }

/* TENANTS */
.tenant-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}
.tenant-logo {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tenant-logo img {
  max-height: 100%;
  max-width: 140px;
  object-fit: contain;
}
.tenant-logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
  opacity: 0.5;
}

/* FORMS */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

/* Form. Base styles are for a LIGHT background; the dark variant is scoped to
   .bg-navy. Before this split the form was dark-only and its labels and typed
   text were invisible on any white section. */
.form-group { margin-bottom: 1.5rem; }

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-steel);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-navy);
  background: var(--color-white);
  transition: var(--transition);
}

.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-steel); opacity: 0.6; }

.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--color-bronze);
  box-shadow: 0 0 0 3px rgba(var(--color-bronze-rgb), 0.2);
}

.form-group textarea { resize: vertical; min-height: 80px; }

.form-note {
  font-size: 0.75rem;
  color: var(--color-steel);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.bg-navy .form-note { color: rgba(255,255,255,0.4); }

.bg-navy .form-group label { color: rgba(255,255,255,0.6); }

.bg-navy .form-group input, .bg-navy .form-group textarea {
  border-color: rgba(255,255,255,0.15);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.2);
}

.bg-navy .form-group input::placeholder,
.bg-navy .form-group textarea::placeholder { color: rgba(255,255,255,0.4); opacity: 1; }

.bg-navy .form-group input:focus, .bg-navy .form-group textarea:focus {
  background: rgba(0, 0, 0, 0.4);
}

footer {
  background: var(--color-footer);
  color: rgba(255,255,255,0.4);
  padding: 3.5rem 0 2rem;
  font-size: 0.875rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .text-grid, .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .infra-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 120px; }
}

@media (max-width: 768px) {
  .floating-cta { display: flex; }
  .hero-content h1 { font-size: 1.75rem; }
  .feature-grid, .dist-grid, .bento-grid, .infra-grid { grid-template-columns: 1fr; }
  .tenant-logos { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .bento-item { padding: 2rem 1.5rem; }
  .container { padding: 0 1.5rem; }
  .hero { min-height: 70vh; padding-bottom: 4rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  footer { padding-bottom: 3rem; }
}

#tipai .text-lead { max-width: 78ch; }

/* Space-type chooser on the hub. The homepage's job is to route the visitor
   to the right spoke, so each card carries its own keyword-bearing link. */
/* Fixed 3 columns, not auto-fit: there are exactly six cards, so this lays
   them out as two rows of three instead of letting the viewport width decide
   and leaving a ragged 4+2 or 5+1 last row. */
.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: 3rem;
}

@media (max-width: 1024px) {
  .type-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.type-card {
  background: var(--color-white);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
}

.bg-stone .type-card { background: var(--color-stone); }

.type-card h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }

.type-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-bronze);
  font-size: 0.9375rem;
  margin-bottom: 0.85rem;
}

.type-card p.type-desc {
  color: var(--color-steel);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.35rem;
  flex-grow: 1;
}

.type-card .table-link { align-self: flex-start; }

@media (max-width: 768px) {
  .type-card { padding: 1.75rem 1.5rem; }
}

/* Persistent click-to-call in the sticky header. The nav follows the user
   down the page, so this is the one CTA always within reach on desktop.
   Below 768px it hides and the floating button takes over. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bronze);
  border: 1px solid var(--color-bronze);
  color: var(--color-white);
  padding: 0.7rem 1.15rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.nav-cta:hover { background: var(--color-navy); border-color: var(--color-navy); }
.nav-cta:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

.nav-cta svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Two-step collapse for the header row. The call button drops its label first,
   then the whole link row folds into the drawer. Both thresholds come from the
   measured width of the longest label set, not from a device size, so they
   hold in all three languages. Source order matters: the drawer block must
   come last so its gap:0 wins over the tightened row gap above it. */
@media (max-width: 1360px) {
  .nav-links { gap: 1.25rem; }
  .nav-cta span { display: none; }
  .nav-cta { padding: 0.7rem 0.85rem; }
}

@media (max-width: 768px) {
  .nav-cta { display: none; }
}

@media (max-width: 1100px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: 1.5rem 2rem;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-menu);
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--color-border); }
  .nav-links li:has(+ .mobile-lang) { border-bottom: none; }
  .nav-links a {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    display: block;
  }
  .hamburger { display: block; }
  .lang-switcher { display: none; }
  .mobile-lang {
    display: flex !important;
    gap: 1rem;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid var(--color-border);
    border-bottom: none !important;
    margin-top: 0.5rem;
  }
}

/* -------------------------------------------------------------
   Inner landing pages
   ------------------------------------------------------------- */

/* Lighter than .hero: no photograph, so inner pages do not each pull a
   552 KB image and do not compete visually with the homepage. */
.page-hero {
  padding-top: 150px;
  padding-bottom: 4rem;
  background: var(--color-navy);
  color: var(--color-white);
}

.page-hero h1 {
  color: var(--color-white);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  margin-bottom: 1.25rem;
  max-width: 26ch;
}

.page-hero .eyebrow { color: rgba(255,255,255,0.5); }

.page-hero .lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  max-width: 74ch;
  font-weight: 300;
}

.page-hero .hero-actions { margin-top: 2.25rem; }

.breadcrumb {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.25rem;
}

.breadcrumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb span { margin: 0 0.5rem; }

/* Line length is capped on the CONTAINER, not on each paragraph. Capping the
   paragraph inside a 1440px shell left every text block in the left ~45% of
   the row with a void beside it; capping the container keeps the same
   comfortable measure while the block fills its row. */
.prose p { margin-bottom: 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 1.15rem 1.15rem; }
.prose li { margin-bottom: 0.5rem; }

/* Text-led sections narrow to the measure. Sections carrying a table or a grid
   keep the full width, because spec tables, stat tiles, cards and the logo
   wall all need the room. Each :not() only ever removes matches, so widening
   this list cannot change how an existing section renders. */
section:has(> .container > .prose):not(:has(.table-wrapper)):not(:has(.bento-grid)):not(:has(.feature-grid)):not(:has(.tenant-logos)) > .container,
section:has(> .container > .faq-list) > .container {
  max-width: 780px;
}

/* FAQ. Plain markup, always visible – a collapsed answer is worth less to
   both readers and answer engines. */
.faq-list {
  margin-top: 2.5rem;
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.faq-item { background: var(--color-white); padding: 1.75rem 2rem; }
.bg-stone .faq-item { background: var(--color-stone); }
.faq-item h3 { font-size: 1.0625rem; margin-bottom: 0.65rem; }
.faq-item p { color: var(--color-steel); margin: 0; }

.next-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: 3rem;
}

.next-page {
  background: var(--color-white);
  padding: 1.75rem 2rem;
  text-decoration: none;
  display: block;
  transition: var(--transition);
}

.next-page:hover { background: var(--color-stone); }

.next-page .np-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-bronze);
  display: block;
  margin-bottom: 0.5rem;
}

.next-page .np-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1rem;
}

@media (max-width: 768px) {
  .page-hero { padding-top: 120px; padding-bottom: 3rem; }
  .faq-item, .next-page { padding: 1.5rem; }
}