/* ============================================================
   Olympus Real Estate — site layout
   Layers on top of olympus-brand.css. Adds no new colours;
   every value below resolves to a brand token.
   ============================================================ */

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

.wrap      { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-5); }
.wrap-text { max-width: var(--text-max); }
.section   { padding: var(--s-9) 0; }
.section-sm{ padding: var(--s-8) 0; }
.section.section-sunken, .section.section-inverse { padding-left: 0; padding-right: 0; }
.stack > * + * { margin-top: var(--s-5); }
.tight > * + * { margin-top: var(--s-3); }

/* ---------- wordmark ---------- */
.wordmark {
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ---------- lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.lockup svg { display: block; height: auto; fill: currentColor; }
.section-inverse .lockup, .on-dark .lockup { color: var(--text-inverse); }

/* ---------- nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-top: 14px; padding-bottom: 14px; }
.site-nav nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav nav a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav nav a[aria-current="page"] { border-bottom-color: var(--ore-rust); }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--ore-anchor); color: var(--text);
  border-radius: var(--radius-control); padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
.nav-drawer { display: none; border-top: 1px solid var(--border); background: var(--bg-sunken); }
.nav-drawer.open { display: block; }
.nav-drawer .wrap { flex-direction: column; align-items: stretch; gap: var(--s-3); padding-top: var(--s-5); padding-bottom: var(--s-5); }
.nav-drawer a { font-size: var(--fs-h3); text-decoration: none; color: var(--text); }

@media (max-width: 1040px) {
  .site-nav nav, .nav-actions { display: none; }
  .nav-toggle { display: inline-block; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg-inverse); color: var(--text-inverse); }
.hero .wrap { position: relative; z-index: 1; padding-top: var(--s-8); padding-bottom: var(--s-8); }
.hero h1 { max-width: 16ch; }
.hero .lead { color: var(--text-inverse-muted); }

/* ---------- grids ---------- */
.grid { display: grid; gap: var(--s-5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.split { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.narrow-left { grid-template-columns: 5fr 7fr; } }

/* ---------- doors ---------- */
.door { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--radius-card); text-decoration: none; border: 1px solid transparent; }
.door h2 { font-size: var(--fs-h2); }
.door .door-num { font-size: 40px; font-weight: 700; font-stretch: 125%; letter-spacing: -0.035em; line-height: 1; }
.door-rust { background: var(--ore-rust); color: var(--ore-paper); }
.door-rust .door-num, .door-rust .door-kicker { color: var(--ore-paper); }
.door-rust p { color: #F2DED6; }
.door-rust:hover { background: var(--ore-rust-hover); color: var(--ore-paper); }
.door-anchor { background: var(--bg-inverse); color: var(--text-inverse); }
.door-anchor .door-num, .door-anchor .door-kicker { color: var(--ore-rust-light); }
.door-anchor p { color: var(--ore-tint-deep); }
.door-anchor:hover { border-color: var(--ore-slate); color: var(--text-inverse); }
.door-kicker { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.02em; }
.door-cta { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; padding-top: var(--s-3); }

/* ---------- numbers ---------- */
.numbers { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.numbers .n-item { border-top: 2px solid var(--ore-rust); padding-top: var(--s-4); }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--fs-base); }
table.compare th, table.compare td { text-align: left; padding: var(--s-4); vertical-align: top; border-bottom: 1px solid var(--border); }
table.compare thead th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
/* the two comparison columns read as their own layer, not as row text */
table.compare thead th:nth-child(2),
table.compare thead th:nth-child(3) { color: var(--text); }
table.compare tbody th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; width: 20%; }
table.compare .col-olympus { background: var(--ore-anchor); color: var(--ore-paper); font-weight: 500; }
table.compare thead .col-olympus { color: var(--ore-rust-light); }

/* ---------- list rows ---------- */
.rowlist { border-top: 1px solid var(--border); }
.rowlist > li { list-style: none; border-bottom: 1px solid var(--border); padding: var(--s-5) 0;
  display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .rowlist > li { grid-template-columns: 88px 1fr; } }
.rowlist ul, .rowlist ol { margin: 0; padding: 0; }
.rownum { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em; color: var(--text-accent); }
.section-inverse .rownum { color: var(--ore-rust-light); }
.section-inverse .rowlist, .section-inverse .rowlist > li { border-color: #333B3E; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.chips li { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--ore-slate); color: var(--ore-slate); border-radius: 999px; padding: 8px 16px; }

/* ---------- check / cross lists ---------- */
.marklist { list-style: none; padding: 0; margin: 0; }
.marklist li { position: relative; padding-left: 34px; margin-bottom: var(--s-4); }
.marklist li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 15px; }
.marklist.yes li::before { content: "\2713"; color: var(--ore-rust); }
.marklist.no  li::before { content: "\2715"; color: var(--text-muted); }

/* ---------- agent cards ---------- */
.agent-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.agent img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%;
  border-radius: var(--radius-image); border: 1px solid var(--border); }
.agent h3 { margin-top: var(--s-4); }
.agent .role { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-1); }
.agent .links { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.9; word-break: break-word; }
.agent .links a { display: block; }

/* ---------- FAQ ---------- */
details.faq { border-bottom: 1px solid var(--border); }
details.faq summary { cursor: pointer; list-style: none; padding: var(--s-5) 40px var(--s-5) 0;
  font-size: var(--fs-lead); font-weight: 500; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--text-accent); }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { padding-bottom: var(--s-5); margin: 0; }

/* ---------- quote ---------- */
blockquote.pull { margin: 0; border-left: 2px solid var(--ore-rust); padding-left: var(--s-5);
  font-size: var(--fs-lead); line-height: 1.55; }

/* ---------- misc ---------- */
.eyebrow-quiet { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-muted); }
.section-inverse .eyebrow-quiet { color: var(--ore-slate); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.section-inverse .btn-secondary { color: var(--text-inverse); box-shadow: inset 0 0 0 1.5px var(--ore-slate); }
.section-inverse .btn-secondary:hover { background: #2A3336; color: var(--text-inverse); }
.section-inverse .card { background: #252C2F; border-color: #333B3E; }
.section-inverse hr { background: #333B3E; }
figure { margin: 0; }
figure img { width: 100%; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-5); top: var(--s-3); z-index: 100; background: var(--bg);
  padding: 12px 18px; border-radius: var(--radius-control); }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-inverse); color: var(--text-inverse); padding: var(--s-8) 0 var(--s-6); }
.site-footer a { color: var(--ore-slate); text-decoration: none; }
.site-footer a:hover { color: var(--ore-slate-light); }
/* auto-fit gave the brand column a 190px track, but the wordmark is
   nowrap and ~270px wide, so it overflowed straight into the next column.
   Explicit tracks, with the brand column widest. */
.site-footer .cols { display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer .cols { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; } }
.site-footer .cols > div { min-width: 0; }
.site-footer .lockup { flex-wrap: wrap; }
.site-footer .lockup .wordmark { font-size: 13px; }
.site-footer .tight > * + * { margin-top: 9px; }
.site-footer a, .site-footer .tight span { line-height: 1.4; }
.site-footer h2 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ore-rust-light); margin-bottom: var(--s-3); }
.site-footer .legal { border-top: 1px solid #333B3E; margin-top: var(--s-7); padding-top: var(--s-5);
  font-size: var(--fs-sm); color: var(--ore-tint-deep); }
.eho { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--ore-slate); border-radius: var(--radius-control); font-size: 11px;
  font-weight: 700; letter-spacing: 0.04em; flex: 0 0 auto; }

/* ---------- inquiry form ---------- */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid.two-up { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: var(--s-4); }
.field label { margin-bottom: var(--s-2); }
.req { color: var(--text-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-5) 0; }
.consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--ore-rust); }
.consent span { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.form-error {
  display: none; margin: var(--s-4) 0; padding: var(--s-4);
  border-left: 3px solid var(--ore-rust-hover); background: var(--bg-fill);
  font-size: var(--fs-base); color: var(--ore-anchor);
}
.form-error.show { display: block; }
.form-error strong { color: var(--ore-rust-hover); }
.form-note { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-5); }
.form-sent { display: none; }
.form-sent.show { display: block; }
form.hide { display: none; }

/* ---------- mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 780px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ore-anchor); border-top: 1px solid #333B3E;
  }
  .callbar a { display: block; padding: 12px 10px; text-align: center; text-decoration: none; color: var(--ore-paper); }
  .callbar a + a { border-left: 1px solid #333B3E; }
  .callbar .k { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ore-rust-light); }
  .callbar .v { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
  body.has-callbar { padding-bottom: 64px; }
}

/* ---------- the mountain as a field, not a logo ---------- */
.summit { position: relative; overflow: hidden; }
.summit .big { position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(880px, 78%); color: var(--ore-rust); opacity: 0.06; pointer-events: none; z-index: 0; }
.summit .big svg { width: 100%; height: auto; display: block; }
.summit .wrap { position: relative; z-index: 1; }
.section-inverse.summit .big { right: auto; left: 50%; transform: translate(-50%, -50%);
  width: min(1100px, 104%); color: var(--ore-slate); opacity: 0.10; }

/* ---------- fifty seats, ten taken ---------- */
.seats { display: grid; grid-template-columns: repeat(25, 1fr); gap: 7px; max-width: 760px; }
@media (max-width: 760px) { .seats { grid-template-columns: repeat(10, 1fr); gap: 6px; } }
.seat { aspect-ratio: 1; border-radius: 2px; background: #333B3E; }
.seat.taken { background: var(--ore-rust-light); }
.seatkey { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }
.seatkey span { display: flex; align-items: center; gap: 9px; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ore-slate); }
.seatkey i { width: 12px; height: 12px; border-radius: 2px; background: #333B3E; flex: 0 0 auto; }
.seatkey i.taken { background: var(--ore-rust-light); }

/* ============================================================
   THE RIDGE
   ONE instance, not two. The mark is already a twin peak, so
   two copies put four peaks on screen and read as a duplicated
   logo rather than a horizon. One, large, low, barely there.
   ============================================================ */
.range { position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0; color: var(--ore-slate); }
.range span { position: absolute; display: block; opacity: 0.06; }
/* Size the mark by HEIGHT, not width. Sizing by width meant a tall hero
   rendered a mountain taller than its band, so the peaks were sliced off
   flat by the clip and read as a rule drawn across the page. */
/* fill the whole hero: the mark crops rather than shrinks, like a cover image */
.range svg { width: 100%; height: 100%; display: block; }
.range .one { inset: -8% -6%; width: 112%; height: 116%; transform: none; }
@media (max-width: 760px) { .range .one { inset: -4% -30%; width: 160%; height: 108%; } }
/* the mark is a background element on a phone, not a hidden watermark:
   0.06 was invisible at this size. Still well under the 0.20 the brand
   uses for contour on dark. */
@media (max-width: 819px) { .range span { opacity: 0.12; } }
.range + * { position: relative; z-index: 1; }

/* ---------- the annotated selfie ----------
   Deliberately unpolished. The one place the site uses a second
   typeface, because the point is that somebody drew on a printout. */
.snap { transform: rotate(-1.4deg); max-width: 185px; padding-top: 34px; }
@media (max-width: 640px) { .snap { max-width: 165px; padding-top: 30px; } }
.snap-img { position: relative; background: var(--bg-card); padding: 6px; overflow: visible;
  border: 1px solid var(--border); border-radius: 4px; }
.snap-img img { display: block; width: 100%; border-radius: 2px; }
.snap .scribble { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  overflow: visible; pointer-events: none; }
.snap .scribble path, .byline-img .scribble path { fill: none; stroke: var(--ore-rust);
  stroke-linecap: round; stroke-linejoin: round; }
.snap .scribble path { stroke-width: 14; }
.byline-img .scribble path { stroke-width: 11; }
.snap .hand { font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 155px;
  font-weight: 600; fill: var(--ore-rust); }
.snap figcaption { transform: rotate(1.4deg); margin-top: var(--s-4); font-size: var(--fs-sm);
  line-height: 1.55; color: var(--text-muted); }
@media (max-width: 640px) { .snap { transform: none; } .snap figcaption { transform: none; } }

/* ---------- the seat grid, with faces ---------- */
.seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-width: 820px; }
@media (max-width: 760px) { .seats { grid-template-columns: repeat(5, 1fr); gap: 6px; } }
.seat { aspect-ratio: 1; border-radius: 3px; background: #333B3E; border: 0; padding: 0; }
button.seat { cursor: pointer; overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .14s, transform .14s; }
button.seat img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block; filter: saturate(0.9); }
button.seat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--ore-rust-light); }
button.seat[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ore-rust-light); }
button.seat:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button.seat { transition: none; } button.seat:hover { transform: none; } }

.seatcard { margin-top: var(--s-6); min-height: 128px; display: flex; gap: var(--s-5);
  align-items: center; border-top: 1px solid #333B3E; padding-top: var(--s-6); }
.seatcard-empty { margin: 0; color: var(--ore-tint-deep); font-size: var(--fs-lead); }
.seatcard-img { width: 104px; height: 130px; object-fit: cover; object-position: center 18%;
  border-radius: 8px; flex: 0 0 auto; }
.seatcard-body h3 { color: var(--ore-paper); }
.seatcard-role { margin: var(--s-2) 0 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ore-slate); }
.seatcard-links { margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm); word-break: break-word; }
.seatcard-links a { color: var(--ore-slate); }
.seatcard-links a:hover { color: var(--ore-slate-light); }
@media (max-width: 560px) { .seatcard { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   BOTTOM NAV
   Primary navigation lives at the bottom, where a thumb is.
   Replaces the hamburger entirely — no drawer to open, every
   destination is one tap from anywhere on the site.
   ============================================================ */
.botnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: var(--ore-anchor); border-top: 1px solid #333B3E;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: env(safe-area-inset-bottom); }
.botnav::-webkit-scrollbar { display: none; }
/* flex-basis 0 with nowrap let the labels overrun each other on a phone
   ("MEET THE FAMOURYWHY"). Natural width plus a scrolling bar instead. */
.botnav a { flex: 0 0 auto; text-align: center; text-decoration: none;
  padding: 14px 15px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ore-slate); white-space: nowrap;
  border-top: 2px solid transparent; }
@media (min-width: 900px) { .botnav a { flex: 1 1 auto; } }
/* A sideways scroller hides destinations a phone user never thinks to swipe
   for. Below 900px the bar wraps instead, so all seven stay on screen. Each
   link keeps its natural width and nowrap, so labels cannot overrun. */
@media (max-width: 899px) {
  .botnav { flex-wrap: wrap; overflow-x: visible; }
  /* five across the whole phone-and-tablet range. At natural width the
     five labels total ~725px, so anything narrower wrapped to a second
     row. An 18% basis keeps all five on one line, and white-space:normal
     is essential here: while the labels were nowrap their min-content
     width kept forcing the wrap back at around 600px. */
  .botnav a { flex: 1 1 18%; white-space: normal; }
}
/* At phone widths the seven labels at natural width need three rows, which
   eats a quarter of the screen. A 22% basis packs them four to a row (so two
   rows, the last three growing to fill), and letting a label break over two
   lines keeps "Meet the Family" inside its cell. */
@media (max-width: 560px) {
  /* Centre each label in a box of its own so a one-line row and a two-line
     row come out the same height, and every tap target clears 44px. */
  /* five destinations, one row. A 22% basis packed four per row and
     wrapped the fifth; 18% fits all five across (5 x 18 = 90%), which is
     what turns this from a menu that overflowed into a tab bar. */
  .botnav a { flex: 1 1 18%; white-space: normal; padding: 9px 5px;
    font-size: 10px; letter-spacing: 0.04em; line-height: 1.22;
    min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .botnav a[href="brokerage.html"] { padding-left: 14px; }
  .botnav a[href="brokerage.html"]::before { width: 3px; }
}
.botnav a:hover { color: var(--ore-paper); }
.botnav a[aria-current="page"] { color: var(--ore-paper); border-top-color: var(--ore-rust-light); }
.botnav a:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: -3px; }
body { padding-bottom: 78px; }
@media (max-width: 899px) { body { padding-bottom: 96px; } }
@media (max-width: 560px) { body { padding-bottom: 86px; } }

/* the top bar keeps the mark and one action; navigation moved down */
.site-nav nav, .nav-toggle, .nav-drawer { display: none !important; }
.site-nav .nav-actions { display: flex; }

/* A bare "Call or text" is a dead end on a desktop, where tel: often does
   nothing visible. Show the number itself there; keep it short on phones. */
.lbl-short { display: none; }
@media (max-width: 1080px) { .lbl-full { display: none; } .lbl-short { display: inline; } }

/* ---------- the wall ---------- */
.wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5) var(--s-4);
  margin-top: var(--s-7); }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } }
.face { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; }
.face img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 20%;
  border-radius: 8px; border: 1px solid var(--border); display: block;
  transition: border-color .14s, transform .14s; }
.face:hover img { border-color: var(--ore-rust); transform: translateY(-3px); }
.face[aria-pressed="true"] img { border-color: var(--ore-rust); border-width: 2px; }
.face-n { display: block; margin-top: var(--s-3); font-size: var(--fs-base); font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.25; color: var(--text); }
.face-r { display: block; margin-top: 3px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.face:focus-visible img { outline: 3px solid var(--ore-anchor); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .face img { transition: none; } .face:hover img { transform: none; } }

/* the detail card now sits on a light ground */
.section-sunken .seatcard { border-top-color: var(--border); }
.section-sunken .seatcard-empty { color: var(--text-muted); }
.section-sunken .seatcard-body h3 { color: var(--text); }
.section-sunken .seatcard-role { color: var(--text-muted); }
.section-sunken .seatcard-links a { color: var(--link); }
.section-sunken .seatcard-links a:hover { color: var(--link-hover); }

/* ---------- About: founder stories ---------- */
.story { display: grid; gap: var(--s-5) var(--s-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: 220px minmax(0, 1fr); } }
.byline img { width: 180px; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); display: block; }
@media (min-width: 900px) { .byline { position: sticky; top: 92px; } .byline img { width: 100%; } }
.byline-n { margin: var(--s-3) 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.byline-r { margin: 3px 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); }
.story .stack p { max-width: 64ch; }

/* ---------- About: the three values ---------- */
.rowlist.values > li { grid-template-columns: 1fr; }
@media (min-width: 760px) { .rowlist.values > li { grid-template-columns: 180px minmax(0, 1fr); } }
.vword { font-size: var(--fs-h3); font-weight: 700; font-stretch: 125%; letter-spacing: -0.03em;
  line-height: 1; color: var(--ore-rust); }

/* ---------- the Type A door ----------
   Once open this is a document, not a page. Tighter leading, tabular
   figures, ruled section headers, denser type. It should feel like it
   was written for somebody who reads contracts for pleasure, because
   it was. No jokes live in here. */
.typea { border: 1px solid var(--ore-anchor); border-radius: var(--radius-card); background: var(--bg-card); }
.typea > summary { list-style: none; cursor: pointer; padding: var(--s-6); display: block; }
.typea > summary::-webkit-details-marker { display: none; }
.typea-eyebrow { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-accent); }
.typea-title { display: block; margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); }
.typea-hint { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted);
  max-width: 62ch; }
.typea-title::after { content: " \2192"; color: var(--text-accent); }
.typea[open] .typea-title::after { content: " \2193"; }
.typea > summary:hover { background: var(--bg-sunken); }
.typea > summary:focus-visible { outline: 3px solid var(--ore-anchor); outline-offset: -3px; }

.typea-body { padding: 0 var(--s-6) var(--s-7); border-top: 1px solid var(--ore-anchor);
  font-size: 15.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.typea-body p { max-width: 74ch; }
/* the panel spans the column like every ruled section below it; the extra
   right padding keeps the line length readable without shrinking the box */
.typea-body p.typea-note { margin-top: var(--s-6); padding: var(--s-5); background: var(--bg-sunken);
  border-left: 2px solid var(--ore-rust); font-size: 15px; line-height: 1.6; color: var(--text);
  max-width: none; }
@media (min-width: 900px) { .typea-body p.typea-note { padding-right: max(var(--s-5), calc(100% - 78ch)); } }

/* ruled section headers, numbered */
.typea-body > h3 { margin-top: var(--s-8); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ore-anchor); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); }
.typea-body .rowlist h3, .typea-body .spec dt { margin-top: 0; font-size: var(--fs-base);
  letter-spacing: -0.01em; text-transform: none; color: var(--text); font-weight: 600;
  border: 0; padding: 0; }
.typea-body .rowlist > li { padding: var(--s-4) 0; }
.typea-body .marklist li { margin-bottom: var(--s-3); }

/* spec pairs */
.spec { margin: var(--s-5) 0 0; display: grid; gap: 0; }
.spec > div { display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: 1fr;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
@media (min-width: 720px) { .spec > div { grid-template-columns: 240px minmax(0, 1fr); } }
.spec dt { font-size: var(--fs-xs) !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: var(--text-muted) !important; }
.spec dd { margin: 0; }

table.spec-table { min-width: 640px; font-size: 15px; }
table.spec-table th, table.spec-table td { padding: var(--s-3) var(--s-4); }
table.spec-table tbody th { width: 34%; letter-spacing: 0.1em; }
table.spec-table td:nth-child(2) { font-weight: 700; font-stretch: 125%; white-space: nowrap;
  color: var(--text-accent); }

/* The display size is set against the viewport but these sit in a grid cell.
   The first fix still broke between roughly 620 and 760px, where the grid
   was still fitting three columns while the type had already grown. Widen
   the column minimum so it drops to two columns before that happens, and
   keep one size rule rather than two that can disagree. Modelled across
   390 / 560 / 640 / 700 / 760 / 900 / 1100 / 1440 — no overflow at any. */
.numbers { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.numbers .number { font-size: clamp(30px, 4.4vw, 54px); }
.numbers .n-item { min-width: 0; }
.numbers .number-label { line-height: 1.35; }

/* ============================================================
   TABBED PANELS
   One screen at a time instead of a long scroll. Every panel
   has its own URL so the back button and shared links work.
   With JS off, every panel simply shows — nothing is hidden
   from a reader or a crawler.
   ============================================================ */
.tabs { position: sticky; top: 72px; z-index: 30; background: var(--bg);
  border-bottom: 1px solid var(--border); }
.tabs-row { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-left: 0; padding-right: 0; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted);
  padding: 16px 18px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--ore-rust); }
.tab:focus-visible { outline: 3px solid var(--ore-anchor); outline-offset: -3px; }
@media (max-width: 640px) { .tabs { top: 62px; } .tab { padding: 14px 14px; font-size: 12px; } }
/* Same reasoning as the bottom bar: a sideways scroller hides panels a phone
   user never swipes for. Below 560px the tab strip wraps instead. */
@media (max-width: 560px) {
  .tabs-row { flex-wrap: wrap; overflow-x: visible; }
  .tab { flex: 1 1 auto; white-space: normal; padding: 11px 10px; font-size: 11px;
    line-height: 1.3; }
}

.panel > section:first-child { padding-top: var(--s-8); }
.panel[hidden] { display: none; }
.panel-jump { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-7) 0 0; }
.panel-jump span { font-size: var(--fs-sm); color: var(--text-muted); }

/* ============================================================
   THE CALL SHEET
   A tel: link does nothing visible on most desktops, which made
   the primary CTA look broken. This shows the number instead,
   dials on a phone, and copies on a laptop.
   ============================================================ */
.sheet { position: fixed; inset: 0; z-index: 200; display: none; }
.sheet[open] { display: block; }
.sheet-back { position: absolute; inset: 0; background: rgba(15,19,20,0.72); }
.sheet-card { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 100%); background: var(--bg); border-radius: 14px 14px 0 0;
  padding: var(--s-7) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top: 3px solid var(--ore-rust); }
@media (min-width: 640px) {
  .sheet-card { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 14px;
    border: 1px solid var(--ore-anchor); border-top: 3px solid var(--ore-rust); }
}
.sheet-msg { margin: 0; font-size: clamp(21px, 3vw, 27px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.25; color: var(--text); }
.sheet-sub { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sheet-num { display: block; margin: var(--s-6) 0 0; text-align: center; text-decoration: none;
  background: var(--ore-rust); color: var(--ore-paper); border-radius: 8px; padding: 18px 20px;
  font-size: clamp(24px, 4vw, 30px); font-weight: 700; font-stretch: 125%; letter-spacing: -0.02em; }
.sheet-num:hover { background: var(--ore-rust-hover); color: var(--ore-paper); }
.sheet-row { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.sheet-row > * { flex: 1 1 0; text-align: center; }
.sheet-close { display: block; width: 100%; margin-top: var(--s-5); background: none; border: 0;
  font: inherit; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; padding: 8px; }
.sheet-close:hover { color: var(--text); }
.sheet-copied { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ore-rust-hover);
  text-align: center; min-height: 20px; }


/* ============================================================
   QA PASS
   Measured in a real browser at 320 / 375 / 390 / 430 / 768 /
   1440 and phone landscape. Everything below fixes something
   that actually failed, not something that looked risky.
   ============================================================ */

/* Footer links measured 272 x 24. Anything tappable gets 44px of height. */
.site-footer .tight > * { display: block; padding: 10px 0; }
.site-footer .tight > * + * { margin-top: 0; }

/* The header lockup was a 25px-tall tap target. */
.site-nav .lockup, .site-footer .lockup { min-height: 44px; align-items: center; padding: 8px 0; }

/* Inline links inside captions and small print were 15-18px tall. */
.caption a, .figcaption a, p.caption a, .panel-jump a { display: inline-block; padding: 12px 0; }
.snap figcaption a { padding: 12px 0; }

/* The asterisk footnote link was a 5 x 16 target. */
/* The footnote marker needs a 44px target without punching a hole in the
   headline. Keep it tight and expand the hit area with a pseudo-element. */
h1 sup a { position: relative; display: inline-block; padding: 0 1px; line-height: 1; }
h1 sup a::after { content: ""; position: absolute; top: -16px; bottom: -22px; left: -18px; right: -18px; }

/* Long unbroken strings (emails, urls) must never push a page wide. */
.seatcard-links a, .agent .links a, .spec dd { overflow-wrap: anywhere; }

/* Nothing on the page may exceed the viewport. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, table { max-width: 100%; }

/* Small prose links that are still real targets on a phone. */
@media (max-width: 760px) {
  main p > a:not(.btn), main li > a:not(.btn), main span > a:not(.btn) {
    display: inline-block; padding: 12px 0;
  }
}

/* ---- contrast failures found by measuring the real render ---- */

/* .hero is dark but isn't .section-inverse, so the secondary button kept its
   light-ground colour: Anchor text on an Anchor hero. 1:1. Invisible. */
.hero .btn-secondary { color: var(--ore-paper); box-shadow: inset 0 0 0 1.5px var(--ore-slate); }
.hero .btn-secondary:hover { background: #2A3336; color: var(--ore-paper); }

/* The values moved onto a dark ground; Rust on Anchor is 2.71:1 and is one of
   the kit's forbidden pairings. */
.section-inverse .vword { color: var(--ore-rust-light); }

/* Rust Light on the raised dark card measures 4.02:1. */
.section-inverse .card dd, .section-inverse .card strong { color: var(--ore-paper); }

/* ---------- lucha mask, inline with the wall prompt ---------- */
.lucha { width: 30px; height: auto; display: inline-block; vertical-align: -9px; margin-left: 4px; }
@media (max-width: 560px) { .lucha { width: 26px; vertical-align: -8px; } }


/* the snapshot column is sized to the photo so it doesn't leave a hole */
.snap-col { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; }
/* size the column to the photo so there is no slack beside it */
@media (min-width: 720px) { .snap-col { grid-template-columns: max-content minmax(0, 1fr); } }
.snap-col > .snap figcaption { text-align: center; max-width: 100%; }

/* ---------- the byline annotation ---------- */
.byline-img { position: relative; width: 180px; }
@media (min-width: 900px) { .byline-img { width: 100%; } }
.byline-img img { width: 100%; }
.byline-img .scribble { position: absolute; inset: 0; width: 100%; height: 100%; }
.byline-note { margin: var(--s-4) 0 0; font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 21px; line-height: 1.25; color: var(--ore-rust); max-width: 22ch;
  transform: rotate(-1.2deg); }
@media (max-width: 899px) { .byline-note { max-width: 34ch; } }

/* ---------- annotated byline: note beside the photo ---------- */
.byline-annotated { display: grid; gap: var(--s-4) var(--s-5); align-items: start;
  grid-template-columns: 1fr; }
.byline-annotated .byline-img { grid-column: 1; }
@media (min-width: 560px) {
  .byline-annotated { grid-template-columns: 190px minmax(0, 1fr); }
  .byline-annotated .byline-img { grid-row: 1 / span 3; width: 100%; }
  .byline-annotated .byline-n { margin-top: 0; }
  .byline-annotated .byline-note { margin-top: var(--s-4); max-width: 30ch; }
}
@media (min-width: 900px) {
  .story-wide { grid-template-columns: 420px minmax(0, 1fr); }
  .byline-annotated { position: static; grid-template-columns: 180px minmax(0, 1fr); }
  .byline-annotated .byline-note { max-width: 26ch; }
}

/* the note sits below the photo on a phone and beside it above 560px,
   so the arrow has to change direction with it */
.byline-img .arrow-right { display: none; }
.byline-img .arrow-down { display: block; }
@media (min-width: 560px) {
  .byline-img .arrow-right { display: block; }
  .byline-img .arrow-down { display: none; }
}

/* the Type A content on its own page: no card, no summary, just the document */
.typea-page { padding: 0; border-top: 0; }
.typea-page > h3:first-of-type { margin-top: 0; }

/* ---------- compact hero: mark behind the copy, not stacked under it ----------
   The default hero reserves a band under the text for the watermark, which on
   a short page leaves a large empty field. Here the mark fills the whole hero
   and sits behind the words. */
.hero-tight .wrap { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.hero-tight .range span { opacity: 0.05; }
/* and close the gap between the compact hero and the document under it */
.hero-tight + .section { padding-top: var(--s-7); }

/* ---------- the wall: first names only ---------- */
.face-r { display: none; }
.wall .face-n { margin-top: var(--s-3); font-size: var(--fs-base); font-weight: 600;
  letter-spacing: -0.012em; color: var(--text); text-align: center; }
.wall .face { text-align: center; }

/* ---------- agent card dialog ---------- */
.ac { text-align: left; padding: 0; overflow: hidden; }
.ac-x { position: absolute; top: 10px; right: 12px; z-index: 2; background: rgba(29,35,38,0.55);
  color: var(--ore-paper); border: 0; border-radius: 50%; width: 36px; height: 36px;
  font-size: 22px; line-height: 1; cursor: pointer; }
.ac-x:hover { background: var(--ore-anchor); }
.ac-x:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 2px; }
.ac-img { width: 100%; height: 300px; object-fit: cover; object-position: center 18%; display: block; }
@media (min-width: 640px) { .ac-img { height: 340px; } }
/* On a short phone (SE-sized, 568-667px tall) the card is taller than the
   screen. The sheet is fixed and the card is pinned to its bottom edge, so
   the photo and the close button ended up above the top edge with no way to
   reach them. Capping the height and letting the card scroll fixes both. */
.sheet-card { max-height: 100vh; max-height: 100dvh; overflow-y: auto;
  overscroll-behavior: contain; }
@media (min-width: 640px) { .sheet-card { max-height: 92vh; max-height: 92dvh; } }
.ac-role { margin: var(--s-5) var(--s-6) 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); }
.ac-name { margin: var(--s-2) var(--s-6) 0; font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); }
.ac-lic { margin: var(--s-2) var(--s-6) 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ac-lic:empty { display: none; }
.ac-rows { margin: var(--s-5) var(--s-6) var(--s-6); display: grid; gap: 0; }
.ac-rows > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-4);
  align-items: baseline; padding: 13px 0; border-top: 1px solid var(--border); }
.ac-rows > div:first-child { border-top: 0; padding-top: 0; }
.ac-rows > div[hidden] { display: none; }
.ac-rows dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); }
.ac-rows dd { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
.ac-rows dd a { color: var(--link); text-decoration: none; }
.ac-rows dd a:hover { color: var(--link-hover); text-decoration: underline; }
/* A 92px label column leaves ~148px for the value at 320px, which snaps
   realestatewithmichelle@yahoo.com (239px) mid-word. Stacking the label
   above gives the value the full card width at every phone size. */
@media (max-width: 560px) {
  .ac-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
#ac-tel { font-weight: 600; font-stretch: 125%; letter-spacing: -0.01em; }

/* an eyebrow carrying proper nouns reads better in sentence case, and sits
   flush left with the headline above it and the lead below it */
.hero .eyebrow-caps-off { text-transform: none; letter-spacing: 0.01em;
  font-size: var(--fs-sm); font-weight: 600; text-align: left; margin-left: 0;
  margin-right: 0; max-width: 60ch; }

/* ---------- make the choices read as controls, not copy ---------- */
.tapcue { margin: var(--s-4) 0 0; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.02em; color: var(--ore-tint-deep); }
.pick { position: relative; }
.pick .pgo { position: absolute; right: var(--s-5); bottom: var(--s-4);
  font-size: 22px; line-height: 1; color: var(--ore-slate); transition: transform .14s; }
.pick.rust .pgo { color: #F2DED6; }
.pick:hover .pgo { transform: translateX(4px); }
.pick > .ps { padding-right: 34px; }
/* and give them something that feels pressed */
.pick { transition: transform .12s, box-shadow .12s; }
.pick:active { transform: scale(0.988); }
@media (prefers-reduced-motion: reduce) {
  .pick, .pick .pgo { transition: none; }
  .pick:active { transform: none; }
}

/* ---------- dialog entrance: settle back rather than punch forward ----------
   The card starts slightly oversized and eases down to its resting size, so the
   face reads as receding into place instead of zooming at you. */
@keyframes sheetInMobile {
  from { opacity: 0; transform: translateX(-50%) scale(1.07); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes sheetInDesktop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.07); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes backIn { from { opacity: 0; } to { opacity: 1; } }

.sheet[open] .sheet-card { animation: sheetInMobile .26s cubic-bezier(.22,.7,.3,1) both;
  transform-origin: center; }
.sheet[open] .sheet-back { animation: backIn .22s ease both; }
@media (min-width: 640px) {
  .sheet[open] .sheet-card { animation-name: sheetInDesktop; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open] .sheet-card, .sheet[open] .sheet-back { animation: none; }
}

/* ============================================================
   THE CROSSROADS
   Question centred, a fork drawn from it down into the two
   options, and an "or" between them when they stack. The point
   is that you cannot go forward without picking a side.
   ============================================================ */
#s1 .stepmeta, #s1 .q, #s1 .choose { text-align: center; }
#s1 .stepmeta { justify-content: center; }
.q-centre { margin-inline: auto; max-width: 20ch; margin-bottom: var(--s-3); }
.choose { margin: 0 auto; text-align: center; font-size: var(--fs-base);
  color: var(--ore-tint-deep); max-width: 40ch; }

.fork { display: block; width: 100%; height: 118px; margin: var(--s-3) 0 0; overflow: visible; }
.fork path { fill: none; stroke: var(--ore-slate); stroke-width: 2; stroke-linecap: round;
  opacity: 0.5; vector-effect: non-scaling-stroke; }
.fork .tip { opacity: 0.75; }
.fork .hub { fill: var(--ore-rust-light); }
@media (max-width: 760px) { .fork { display: none; } }

.crossroads { position: relative; margin-top: 0; }
@media (max-width: 760px) { .crossroads { margin-top: var(--s-5); } }

.orbar { display: none; }
@media (max-width: 760px) {
  .orbar { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-2) 0; }
  .orbar::before, .orbar::after { content: ""; flex: 1 1 auto; height: 1px; background: #333B3E; }
  .orbar span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ore-slate); }
}

/* the consumer door sits at the end of the bar, set apart from the agent tabs */
.botnav a[href="brokerage.html"] { color: var(--ore-rust-light); }
.botnav a[href="brokerage.html"]::before { content: ""; position: absolute; left: 0;
  top: 22%; bottom: 22%; width: 1px; background: #333B3E; }
.botnav a[href="brokerage.html"] { position: relative; padding-left: 26px; }

/* ============================================================
   MOTION
   One curve and three durations so every moving thing on the
   site reads as the same hand. The curve is the one the step
   flow and the sheets already used; this just names it.
   ============================================================ */
:root {
  --ease:       cubic-bezier(.22, .7, .3, 1);
  --dur-state:  .16s;   /* hover, focus, press */
  --dur-elem:   .34s;   /* one element arriving */
  --dur-sect:   .55s;   /* a section arriving */
}

/* every interactive surface changes state on the same curve */
.btn, .door, .face img, .pick, button.seat, .tab, .botnav a,
.site-nav nav a, .ac-x, .sheet-close, .chips li {
  transition: background-color var(--dur-state) var(--ease),
              border-color     var(--dur-state) var(--ease),
              color            var(--dur-state) var(--ease),
              box-shadow       var(--dur-state) var(--ease),
              transform        var(--dur-state) var(--ease);
}
/* the two doors are the decision on the landing page: they should feel
   like they come forward under the cursor. No shadow — this identity
   has none — so the lift is carried by a border and 2px of travel. */
.door { border-color: transparent; }
.door-rust:hover, .door-anchor:hover { transform: translateY(-2px); }
.btn:hover { transform: translateY(-1px); }



@media (prefers-reduced-motion: reduce) {
  .btn, .door, .face img, .pick, button.seat, .tab, .botnav a,
  .site-nav nav a, .ac-x, .sheet-close, .chips li { transition: none; }
  .door-rust:hover, .door-anchor:hover, .btn:hover { transform: none; }
}

/* A footnote marker is a 7x14 tap target. Widen the hit area with a
   pseudo-element so a thumb can land on it without moving the glyph. */
sup a[href^="#"] { position: relative; display: inline-block; }
sup a[href^="#"]::after { content: ""; position: absolute;
  left: -12px; right: -12px; top: -14px; bottom: -14px; }

/* A heading that is also a link inherits the rust link colour, which the
   brand reserves for decision points — never headings. Keep the heading in
   ink and let rust mark it only on hover, where it IS a decision. */
.rowlist h3 a { color: var(--text); text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--border); }
.rowlist h3 a:hover,
.rowlist h3 a:focus-visible { box-shadow: inset 0 -2px 0 var(--ore-rust); }

/* ---------- Franco's footer credit (see js/site.js) ---------- */
.franco-egg { background: none; border: 0; padding: 0; font: inherit;
  color: inherit; letter-spacing: inherit; text-align: inherit;
  cursor: pointer; }
.franco-egg:hover { color: var(--ore-paper); }
.franco-egg .egg-line { transition: opacity var(--dur-state) var(--ease); }
.franco-egg.is-turning .egg-line { opacity: 0; }

/* ---------- the fork's junction dot (see js/site.js) ---------- */
.fork-wrap { position: relative; }
/* the dot sits at 50% across and 30/124 down the fork's viewBox */
.hub-hit { position: absolute; left: 50%; top: 24%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); background: none; border: 0; padding: 0;
  border-radius: 50%; cursor: pointer; }
.hub-hit:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 0; }
/* A hidden note that still occupies its height pushes the two doors down
   the page for everyone who never taps the dot. Collapse the row instead,
   so it costs nothing until it is asked for. */
.fork-note { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-elem) var(--ease); }
.fork-note > p { overflow: hidden; margin: 0 auto; max-width: 34ch;
  text-align: center; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--ore-tint-deep); opacity: 0;
  transition: opacity var(--dur-elem) var(--ease); }
.fork-note.is-shown { grid-template-rows: 1fr; }
.fork-note.is-shown > p { opacity: 1; padding-top: var(--s-3); }
@media (prefers-reduced-motion: reduce) {
  .franco-egg .egg-line, .fork-note, .fork-note > p { transition: none; }
}

/* On a phone the content above a call to action is centred, so a
   left-aligned button row left a ragged edge hanging off the page's axis.
   Centre the row, and the caption that belongs to it, wherever one of
   these appears — there are fifteen across the site. */
@media (max-width: 899px) {
  .btn-row { justify-content: center; }
  .btn-row + .caption,
  .btn-row + p.caption { text-align: center; }
}

/* ============================================================
   THE BOTTOM BAR, AS ACTUAL BUTTONS
   Slate text on a dark strip with no shape read as a caption
   rather than a control — worst on a phone, where the browser's
   own chrome sits directly beneath it and the labels get lost.
   These now use the same surface the gate's door cards already
   use (#252C2F on a #3C4548 edge, paper text), so anything you
   can tap on this site looks like the same kind of object.
   Paper on that surface is ~12:1, against slate's ~4:1.
   ============================================================ */
.botnav {
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #171C1F;                /* a shade under the page, so the
                                         bar reads as a separate surface
                                         even on the dark pages */
  border-top: 1px solid #333B3E;
}
.botnav a {
  display: flex; align-items: center; justify-content: center;
  background: #252C2F;
  border: 1px solid #3C4548;
  border-radius: 7px;
  color: var(--ore-paper);
  min-height: 46px;
}
.botnav a:hover {
  background: #2C3437; border-color: var(--ore-slate); color: var(--ore-paper);
}
.botnav a:active { background: #202629; }

/* where you are: the same rust the site uses to mark a decision */
.botnav a[aria-current="page"] {
  background: #2C3437;
  border-color: var(--ore-rust-light);
  color: var(--ore-paper);
}

/* the buyer and seller door keeps its rust voice, but the old 3px rust
   spur was drawn at left:0 and would now sit inside a rounded chip */
.botnav a[href="brokerage.html"] { color: var(--ore-rust-light); padding-left: 15px; }
.botnav a[href="brokerage.html"]::before { display: none; }
@media (max-width: 560px) {
  .botnav a[href="brokerage.html"] { padding-left: 5px; }
}
.botnav a:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 2px; }

/* ---------- "Take me back to the start" in the header ----------
   Secondary weight on purpose: the gate is a door, but the rust on these
   pages belongs to the real calls to action (call or text), and two rust
   things competing in one view would flatten both. The wrap is already
   space-between, so this sits hard right of the wordmark. */
.nav-start { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px;
  font-size: 11px; letter-spacing: 0.07em; }
.nav-start .ns-mid, .nav-start .ns-short { display: none; }
/* The wordmark is nowrap and so is this, so neither can give: below about
   520px the full sentence pushes past the header's right edge. Two shorter
   forms take over rather than letting the header wrap or clipping. */
@media (max-width: 520px) {
  .nav-start { padding: 9px 12px; font-size: 10px; letter-spacing: 0.05em; }
  .nav-start .ns-full { display: none; }
  .nav-start .ns-mid { display: inline; }
}
@media (max-width: 440px) {
  .site-nav .wrap { gap: var(--s-3); }
  .nav-start { padding: 9px 11px; }
  .nav-start .ns-mid { display: none; }
  .nav-start .ns-short { display: inline; }
}

/* On a 320px screen the lockup and the button together still run 9px past
   the header's edge. The wordmark carries an inline font-size, so it needs
   !important to give any ground — the only place on this site that does. */
@media (max-width: 360px) {
  .site-nav .wrap { padding-left: 14px; padding-right: 14px; gap: var(--s-2); }
  .site-nav .wordmark { font-size: 11px !important; }
  .nav-start { padding: 9px 9px; }
}

/* ---------- "you are here", at the top of the page ----------
   Clicking "The Catch" used to land on a headline reading "There isn't
   one.", which is the answer to a question you can no longer see. This
   repeats the button you pressed, in the same surface and rust edge the
   bottom bar uses to mark the current page, so the two read as the same
   idea at two sizes. It is a label, not a control: no hover, no pointer,
   nothing to tap. */
.page-badge {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--s-6);
  padding: 11px 24px;
  background: #252C2F;
  border: 1px solid var(--ore-rust-light);
  border-radius: 8px;
  color: var(--ore-paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 560px) {
  .page-badge { padding: 9px 18px; font-size: 11px; letter-spacing: 0.1em;
    margin-bottom: var(--s-5); }
}

/* ---------- who you are actually calling ----------
   The contact hero promised "you will be talking to one of us" and then
   never said who — Keith and Franco were in cards below the fold, so the
   first screen answered a question with a question. Their faces now sit
   in the hero, which also fills the empty run under the lead. */
.who-line { max-width: 46ch; color: var(--ore-tint-deep); font-size: var(--fs-body); }
.whos-here { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-7); }
.wh { display: flex; align-items: center; gap: var(--s-4); }
.wh img { width: 60px; height: 75px; object-fit: cover; object-position: center 18%;
  border-radius: var(--radius-image); border: 1px solid #3C4548; flex: 0 0 auto; }
.wh-text { display: flex; flex-direction: column; gap: 3px; }
.wh-text b { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ore-paper); line-height: 1.1; }
.wh-text span { font-size: var(--fs-sm); line-height: 1.45; color: var(--ore-tint-deep); }
/* Side by side on a phone too: stacked, the two of them ate a whole
   screen. Each becomes a narrow column with the face above the name, so
   the pair still reads as a pair at 375px. */
@media (max-width: 560px) {
  .whos-here { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .wh { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .wh img { width: 54px; height: 66px; }
  .wh-text b { font-size: 17px; }
  .wh-text span { font-size: 12px; line-height: 1.4; }
}

/* ---------- the page's own index, in the hero ----------
   "Three things, then how to check us out" described a page you could not
   see. Somebody handed this link by their agent can now tell at a glance
   what is here and jump straight at the bit they asked about. */
.page-index { list-style: none; counter-reset: pi; margin: 0; padding: 0;
  display: grid; gap: var(--s-3); max-width: 52ch; }
.page-index li { counter-increment: pi; display: grid;
  grid-template-columns: 26px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.page-index li::before { content: counter(pi, decimal-leading-zero);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  color: var(--ore-rust-light); }
.page-index a { color: var(--ore-paper); text-decoration: none;
  box-shadow: inset 0 -1px 0 #3C4548; font-size: var(--fs-base); line-height: 1.5; }
.page-index a:hover, .page-index a:focus-visible { box-shadow: inset 0 -1px 0 var(--ore-rust-light); }

/* ---------- the door for somebody who knows nothing yet ----------
   An agent standing in a client's kitchen gets asked "what is a brokerage?"
   This is the thing they can send. It sits on the details page because that
   is where somebody reading closely will already be. */
.explainer { display: grid; gap: var(--s-2); margin: 0 0 var(--s-7);
  padding: var(--s-5) var(--s-6); background: var(--bg-card);
  border: 1px solid var(--border); border-left: 3px solid var(--ore-rust);
  border-radius: var(--radius-card); text-decoration: none; }
.explainer:hover { background: var(--bg-sunken); }
.ex-q { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); line-height: 1.25; }
.ex-a { font-size: var(--fs-base); line-height: 1.6; color: var(--text-muted); max-width: 56ch; }
.ex-go { font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-accent); margin-top: var(--s-2); }
.explainer:hover .ex-go { color: var(--ore-rust-hover); }
@media (max-width: 560px) {
  .explainer { padding: var(--s-5) var(--s-4); }
  .ex-q { font-size: 21px; }
}

/* ============================================================
   PHONE DENSITY
   Every section carried 96px of air above and below — 192px at
   each seam, tuned for a desktop column and far too generous on
   a 375px screen. Nothing is removed here and no type shrinks;
   the gaps just stop being desktop-sized. Sections still alternate
   their backgrounds, so the separation is carried by colour as
   much as by space.
   ============================================================ */
@media (max-width: 560px) {
  .section    { padding-top: var(--s-7); padding-bottom: var(--s-7); }   /* 96 -> 48 */
  .section-sm { padding-top: var(--s-6); padding-bottom: var(--s-6); }   /* 64 -> 32 */
  .section > section:first-child,
  .panel > section:first-child { padding-top: var(--s-6); }

  /* long list pages: the rows were spaced like a desktop table */
  .rowlist > li { padding: var(--s-4) 0; }                               /* 24 -> 16 */
  .proof li    { padding: var(--s-3) 0; }

  /* the stacked rhythm inside a section stays, just a notch closer */
  .stack > * + * { margin-top: var(--s-4); }                             /* 24 -> 16 */
  .grid { gap: var(--s-4); }
  .card { padding: var(--s-4); }
}

/* the licence, on the card of the person it belongs to */
.lic-line { margin: var(--s-4) 0 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* ============================================================
   COMPARISON TABLES ON A PHONE
   table.compare carries min-width:720px, so inside a 327px column
   55% of it sat off-screen behind a sideways scroll. Below 760px
   the same markup reflows into a block per category: the row
   heading becomes the title, and each cell carries its column name
   from data-label. One table in the HTML, no duplicated content,
   still a real <table> for screen readers and on desktop.
   ============================================================ */
@media (max-width: 760px) {
  .table-scroll { overflow-x: visible; }
  table.compare { min-width: 0; width: 100%; display: block; }
  table.compare thead { display: none; }           /* column names move into the cells */
  table.compare tbody { display: block; }

  /* Olympus leads each category in bold, with its own name on it, then the
     other two sit underneath quietly. DOM order is Solo, Team, Olympus for
     the desktop table, so the column is pulled to the front with order. */
  .compare-3way tbody tr { display: flex; flex-direction: column;
    padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
  .compare-3way tbody tr:last-child { border-bottom: 0; }

  .compare-3way tbody th { order: -2; display: block; width: auto;
    padding: 0 0 6px; border: 0; font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); }

  .compare-3way tbody td { display: block; padding: 3px 0 0; border: 0;
    font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
  /* The labels sat at 10px with barely any tracking and ran straight into
     the sentence they introduce, so they read as part of it. Same colour,
     but a size up, wider tracking and real space after, which is what
     separates a label from its text without changing the colour. */
  .compare-3way tbody td::before { content: attr(data-label);
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ore-muted); margin-right: 9px; }

  /* ours: first, bold, and no dark panel — the weight does the work here */
  .compare-3way tbody td.col-olympus { order: -1; background: none;
    padding: 0 0 8px; margin: 0; border-radius: 0;
    font-size: 17px; font-weight: 600; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--text); }
  .compare-3way tbody td.col-olympus::before { font-size: 11px;
    letter-spacing: 0.1em; margin-right: 9px; color: var(--text-accent); }

  /* the fee sheet on "I want all the details" is Line / Amount / Notes,
     so it stacks more simply: the line, its figure, then the note */
  .spec-table tbody tr { display: block; padding: var(--s-4) 0;
    border-bottom: 1px solid var(--border); }
  .spec-table tbody th { display: block; width: auto; padding: 0 0 4px; border: 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-accent); }
  .spec-table tbody td { display: block; padding: 2px 0 0; border: 0; }
  .spec-table tbody td:first-of-type { font-size: 19px; font-weight: 600;
    letter-spacing: -0.01em; color: var(--text); }
  .spec-table tbody td:last-of-type { font-size: 13px; line-height: 1.5;
    color: var(--text-muted); margin-top: 3px; }
}

/* ---------- the hand-off into the hero buttons ----------
   The fee schedule, then a line about not losing yourself, and then a phone
   number with nothing in between: the call arrived before the reader had been
   given any reason to feel allowed to make it. The cue names both buttons in
   the order they sit and says out loud that neither one commits you. It is
   tied to the buttons rather than floating as its own stack item, so it reads
   as their caption instead of as one more paragraph. */
.cta-cue { margin: 0 0 var(--s-3); max-width: 46ch;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--ore-tint-deep); }
@media (max-width: 560px) {
  .cta-cue { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
}

/* ---------- the easter egg on Keith's face ----------
   A button that has to look exactly like the image it wraps: no chrome, no
   padding, and line-height zeroed so it hugs the photo rather than sitting in
   a taller text box. It keeps the flex sizing the bare <img> had. */
.wh-egg { position: relative; display: block; flex: 0 0 auto;
  padding: 0; border: 0; background: none; line-height: 0; cursor: pointer;
  border-radius: var(--radius-image); -webkit-tap-highlight-color: transparent; }
.wh-egg:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 3px; }
/* Audio that starts with nothing on screen to show it started, and no way to
   stop it, is hostile. The photo lights up and gets a meter, and the same
   click stops it. */
.wh-egg[aria-pressed="true"] img { border-color: var(--ore-rust-light); }
.egg-bars { position: absolute; inset: auto 0 0 0; display: none;
  align-items: flex-end; justify-content: center; gap: 3px;
  height: 22px; padding-bottom: 5px;
  border-radius: 0 0 var(--radius-image) var(--radius-image);
  background: linear-gradient(to top, rgba(29, 35, 38, 0.88), rgba(29, 35, 38, 0)); }
.wh-egg[aria-pressed="true"] .egg-bars { display: flex; }
.egg-bars i { width: 3px; height: 4px; border-radius: 1px;
  background: var(--ore-rust-light); animation: eggbar .9s ease-in-out infinite; }
.egg-bars i:nth-child(2) { animation-delay: .15s; }
.egg-bars i:nth-child(3) { animation-delay: .3s; }
@keyframes eggbar { 0%, 100% { height: 4px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .egg-bars i { animation: none; height: 9px; }
}

/* ---------- the one pair the brand file explicitly forbids ----------
   .hero is a dark field, but it is not .section-inverse, so it never picked up
   the rule that swaps Rust for Rust Light on dark. That left .eyebrow rendering
   #A24B2B on #1D2326 = 2.71:1 on 404 and receipt -- the exact pair the
   FORBIDDEN block at the bottom of olympus-brand.css names, with the exact
   remedy it prescribes. */
.hero .eyebrow { color: var(--text-accent-inverse); }

/* ---------- the long way to Bluffdale ----------
   Looks and behaves exactly like the text around it, because an easter egg
   that advertises itself is not one. Same tab on purpose: the brief asked for
   it to take you away from the page. */
/* Specificity matters here. Plain `.egg-roll` is (0,1,0) and loses to
   `.site-footer a` and `.on-dark a`, both (0,1,1), so the word was rendering
   in Slate against Tint Deep text -- a link wearing a highlighter in the one
   place it was supposed to disappear. `a.egg-roll:link` is (0,2,1) and wins
   outright; the hover pair is (0,3,1) so it beats `.site-footer a:hover` too. */
a.egg-roll:link, a.egg-roll:visited,
a.egg-roll:link:hover, a.egg-roll:visited:hover,
a.egg-roll:link:active, a.egg-roll:visited:active {
  color: inherit; text-decoration: none; cursor: pointer;
}
/* Invisible at rest, findable if you are already poking at it. */
a.egg-roll:link:hover, a.egg-roll:visited:hover {
  text-decoration: underline dotted; text-underline-offset: 3px;
}
a.egg-roll:focus-visible { outline: 3px solid var(--ore-slate); outline-offset: 2px; }