:root {
  --ink: #16232f;
  --ink-2: #223748;
  --paper: #fffdf8;
  --mist: #e7eef1;
  --sand: #eee5d7;
  --sage: #dce9e1;
  --copper: #c45e2b;
  --copper-dark: #8a3f1d;
  --text: #26343e;
  --muted: #5d6a72;
  --line: #d8d0c3;
  --wrap: 1120px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.62;
}
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--serif); line-height: 1.14; }
h1 { max-width: 15ch; font-size: clamp(2.2rem, 1.45rem + 3.2vw, 4.15rem); }
h2 { max-width: 23ch; font-size: clamp(1.65rem, 1.25rem + 1.55vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--copper-dark); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }

.hold { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; }
.skip:focus { left: 12px; top: 12px; padding: 10px 16px; background: #fff; color: var(--ink); }

.site-head { background: var(--paper); border-top: 5px solid var(--copper); border-bottom: 1px solid var(--line); }
.nav-row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { margin: 0; color: var(--ink); font-family: var(--serif); font-size: .96rem; font-weight: 700; line-height: 1.15; }
.brand span { display: block; margin-top: 3px; color: var(--muted); font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.desktop-nav { display: none; }
.mobile-nav { position: relative; }
.mobile-nav summary { width: 46px; height: 46px; display: grid; place-content: center; gap: 4px; list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary span { width: 20px; height: 2px; display: block; background: var(--ink); }
.mobile-nav nav { position: absolute; z-index: 20; top: 52px; right: 0; width: min(78vw, 280px); padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px rgba(22,35,47,.16); }
.mobile-nav nav a { min-height: 46px; display: flex; align-items: center; padding: 6px 10px; color: var(--ink); font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav nav a:last-child { border-bottom: 0; }

.hero { padding-block: clamp(40px, 6vw, 78px); background: linear-gradient(145deg, #fffdf8 0%, #f4eee3 100%); }
.hero__grid { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
.eyebrow, .section-tag { margin: 0 0 12px; color: var(--copper-dark); font-size: .75rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.answer { max-width: 61ch; margin-top: 24px; padding-left: 20px; border-left: 4px solid var(--copper); font-size: clamp(1.08rem, 1rem + .36vw, 1.28rem); }
.answer strong { color: var(--ink); }
.house-map { margin: 0; }
.house-map svg { width: 100%; height: auto; display: block; border: 1px solid #d4cab9; border-radius: 22px; box-shadow: 0 18px 36px rgba(22,35,47,.1); }
.house-map figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.section { padding-block: clamp(42px, 6vw, 76px); scroll-margin-top: 10px; }
.section__intro { margin-bottom: clamp(26px, 4vw, 42px); }
.section__intro h2 { margin-bottom: 14px; }
.section__intro > p:last-child { max-width: 66ch; font-size: 1.08rem; }
.lead { max-width: 58ch; font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); }

.section--companies { background: var(--ink); color: #e6edf1; }
.section--companies h2 { color: #fff; }
.section--companies .section-tag { color: #efa06c; }
.section--companies .section__intro > p:last-child { color: #c7d3da; }
.company-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; color: var(--text); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 34px rgba(0,0,0,.16); }
.company-table th, .company-table td { padding: 18px; text-align: left; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.company-table th:last-child, .company-table td:last-child { border-right: 0; }
.company-table tbody tr:last-child th, .company-table tbody tr:last-child td { border-bottom: 0; }
.company-table thead th { background: #e2ebe6; color: var(--ink); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }
.company-table tbody th { width: 19%; font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; }
.company-table tbody th a { color: var(--copper-dark); }
.company-table td { font-size: .98rem; line-height: 1.55; }

.section--changes { background: var(--mist); }
.split-section { display: grid; gap: 28px; }
.split-section h2 { margin-bottom: 16px; }
.plain-copy { max-width: 62ch; }

.section--levels { background: var(--paper); }
.level-grid { display: grid; gap: 14px; }
.level-grid article { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 20px rgba(22,35,47,.06); }
.level-grid h3 { margin: 14px 0 7px; }
.level-grid p { color: var(--muted); font-size: .95rem; }
.height { position: relative; height: 82px; display: block; border-bottom: 2px solid #a99b87; background: linear-gradient(to top, #f0e7d9 0 38%, transparent 38%); }
.height::before { content: ""; position: absolute; left: 8%; right: 8%; top: var(--top); height: 7px; border-radius: 4px; background: var(--copper); }
.height::after { content: ""; position: absolute; left: 50%; top: calc(var(--top) + 7px); bottom: 0; width: 2px; background: #a99b87; }
.height--high { --top: 10%; }
.height--mid { --top: 38%; }
.height--low { --top: 62%; }
.section-note { max-width: 68ch; margin-top: 24px; padding: 16px 20px; background: var(--sand); border-left: 4px solid var(--copper); }

.section--access { background: var(--sand); }
.access-grid { display: grid; gap: 26px; }
.access-grid h2 { margin-bottom: 16px; }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.access-list li { position: relative; padding: 14px 16px 14px 42px; background: #fff; border: 1px solid #d8cdbc; border-radius: 10px; }
.access-list li::before { content: ""; position: absolute; left: 17px; top: 21px; width: 10px; height: 10px; background: var(--copper); border-radius: 2px; }
.access-note { padding: 18px 20px; background: var(--ink); color: #e6edf1; border-radius: 12px; }

.section--checklist { background: var(--sage); }
.checklist { list-style: none; counter-reset: item; margin: 0; padding: 0; display: grid; gap: 2px; overflow: hidden; background: #fff; border: 1px solid #c5d3ca; border-radius: 15px; }
.checklist li { counter-increment: item; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 18px; border-top: 1px solid #dbe5de; }
.checklist li:first-child { border-top: 0; }
.checklist li::before { content: counter(item); width: 34px; height: 34px; display: grid; place-content: center; background: var(--ink); color: #fff; border-radius: 50%; font-weight: 800; }
.checklist strong, .checklist span { display: block; }
.checklist strong { color: var(--ink); }
.checklist span { grid-column: 2; margin-top: -8px; color: var(--muted); }

.footer { padding-block: 28px; background: var(--ink); color: #b9c7cf; font-size: .9rem; }
.footer p { margin: 0; }

@media (max-width: 767px) {
  .company-table, .company-table tbody, .company-table tr, .company-table th, .company-table td { display: block; width: 100%; }
  .company-table { background: transparent; box-shadow: none; }
  .company-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .company-table tbody { display: grid; gap: 18px; }
  .company-table tr { overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 12px 26px rgba(0,0,0,.15); }
  .company-table tbody th { padding: 18px; background: #e2ebe6; border: 0; border-bottom: 1px solid var(--line); }
  .company-table td { padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); }
  .company-table td:last-child { border-bottom: 0; }
  .company-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--copper-dark); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
}

@media (min-width: 620px) {
  .level-grid { grid-template-columns: 1fr 1fr; }
  .access-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 820px) {
  .mobile-nav { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: 4px; }
  .desktop-nav a { min-height: 42px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: .88rem; font-weight: 650; text-decoration: none; border-radius: 8px; }
  .desktop-nav a:hover { background: var(--sand); color: var(--ink); }
  .hero__grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .split-section { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
  .level-grid { grid-template-columns: repeat(4,1fr); }
  .access-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; }
  .access-note { grid-column: 1 / -1; max-width: 70ch; }
  .checklist { grid-template-columns: 1fr 1fr; gap: 0; }
  .checklist li:nth-child(2) { border-top: 0; }
  .checklist li:nth-child(even) { border-left: 1px solid #dbe5de; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
