/* ---------- fonts, self-hosted ----------
   Served from our own origin instead of Google's. It drops two third-party
   origins (a DNS lookup and a TLS handshake each) out of the render path, which
   is the whole cost on a phone. Latin subsets only, woff2 only, which is every
   browser this site will ever see. Pinyon Script is cut down to the characters
   in "Welcome home." because that is the only thing it ever sets: 2KB rather
   than 25KB. If that phrase changes, the font has to be re-cut.
   Files come from Google's own CDN, all four families are OFL licensed. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/marcellus-400.woff2") format("woff2"); }
@font-face { font-family: "Marcellus SC"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/marcellus-sc-400.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pinyon-welcome.woff2") format("woff2"); }

/* ============================================================
   Captain's Crossing
   Palette and type come from the client's printed community
   sheet: deep navy, brass, cream, and Roman inscriptional
   capitals like the monument sign at the entrance.

   Layout principle: the page is a light editorial ground with
   four deliberate navy moments. Sections deliberately do NOT
   share one shape. They alternate between a wide lead, an
   asymmetric pair, and a full-bleed image.
   ============================================================ */

:root {
  --navy-900: #041b33;
  --navy-800: #062349;
  --navy-700: #0c2e55;
  --brass:    #b9822f;
  --brass-lt: #d2a24c;
  --cream:    #f7f3ea;
  --cream-2:  #efe9dc;
  --ink:      #18212c;
  --ink-soft: #55616f;
  --line:     #ded6c4;

  /* the problem section only. Deliberately cool and brass-free, so it cannot
     be mistaken for the warm cream-and-brass treatment used for amenities. */
  --grey-bg:   #e9ebee;
  --grey-ink:  #2b333d;
  --grey-soft: #5c6672;
  --grey-line: #cfd5db;

  --display: "Marcellus", "Baskerville", "Times New Roman", serif;
  --caps:    "Marcellus SC", "Marcellus", serif;
  --body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script:  "Pinyon Script", "Snell Roundhand", cursive;

  /* Type scale. Three text sizes only, so the page cannot drift back into the
     fourteen near-identical body sizes it had before. Display sizes are
     bespoke per role, which is the one place bespoke is correct. */
  --f-cap:  .8125rem;    /* small-caps labels, fine print            */
  --f-sm:   .9375rem;    /* nav, secondary, captions, button small   */
  --f-body: 1.0625rem;   /* body copy, everywhere                    */

  --t-hero: clamp(2.9rem, 7.2vw, 6.4rem);
  --t-mega: clamp(2.6rem, 6.8vw, 5.5rem);
  --t-xl:   clamp(2.1rem, 4.4vw, 3.75rem);
  --t-lg:   clamp(1.4rem, 1.8vw, 1.72rem);
  --t-fig:  clamp(2.4rem, 4.6vw, 4rem);
  --t-lede: clamp(1.15rem, .55vw + 1rem, 1.375rem);

  /* Spacing scale. Same discipline as the type scale: the markup picks a step,
     never a number, so the vertical rhythm can't drift. */
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 2.75rem;
  --s-7: clamp(2.5rem, 4.5vw, 3.75rem);

  --wrap: 1240px;
  --wide: 1560px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 11vw, 9.5rem);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 var(--f-body)/1.68 var(--body);
  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }
::selection { background: rgba(185, 130, 47, .26); color: var(--navy-900); }

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  background: var(--navy-800); color: var(--cream); padding: .7rem 1.25rem;
  z-index: 200; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); color: var(--cream); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
/* Four headings were dropping a single short word onto their last line, the
   hero worst of all. balance evens the line lengths instead. */
h1, h2, h3, .statement__line, .burden__h { text-wrap: balance; }
p, .faq__a, .tier__note { text-wrap: pretty; }
h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.018em; }
h2 { font-size: var(--t-xl);   line-height: 1.08; letter-spacing: -.012em; }
h3 { font-size: var(--t-lg);   line-height: 1.2; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55; color: var(--ink-soft);
}
.measure { max-width: 58ch; }
.measure-wide { max-width: 36rem; }
.measure-tight { max-width: 20ch; }

.place {
  font-family: var(--caps); font-size: var(--f-cap);
  letter-spacing: .16em; color: var(--brass-lt);
}

/* ---------- layout ---------- */

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); }
.mt-0 { margin-top: 0; }

/* image credit / disclaimer line under a figure */
.caption { margin-top: var(--s-3); font-size: var(--f-sm); color: var(--ink-soft); }
/* stacked full-width figures on the homes page */
.home--stack { margin: 0 0 var(--s-7); }

.wrap  { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--sec-y); overflow-x: clip; }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--cream { background: var(--cream); }
.band--grey  { background: var(--grey-bg); color: var(--grey-ink); }
.band--grey h2 { color: var(--grey-ink); }
.band--navy  { background: var(--navy-800); color: var(--cream); position: relative; isolation: isolate; }
.band--navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 75% at 8% 0%, rgba(210, 162, 76, .08), transparent 60%);
}
.band--navy h2, .band--navy h3 { color: var(--cream); }
.band--navy a:not(.btn) { color: var(--brass-lt); }
.band--navy .lede { color: #b9c6d6; }

/* the asymmetric pair. Deliberately not 50/50, and it flips. */
.duo { display: grid; gap: clamp(2.25rem, 4.5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.15fr 1fr; }
  .duo--flip > :first-child { order: 2; }
  .duo--text-led { grid-template-columns: 1fr 1.15fr; }
}

/* a heading block that sits off the left edge, not centered in a box */
.lead { max-width: 22ch; }
.lead--wide { max-width: 30ch; }

/* Images that run off the edge of the page instead of sitting in the box.
   The offset has to clear the centered container's own margin plus its gutter,
   which is why this is not the usual calc(50% - 50vw). */
.bleed-r, .bleed-l { position: relative; }
.bleed-r img, .bleed-l img { width: 100%; box-shadow: 0 40px 80px -50px rgba(4, 27, 51, .6); }
@media (min-width: 1000px) {
  .bleed-l { margin-left:  calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter))); }
  .bleed-r { margin-right: calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter))); }
}

/* ---------- the anchor rule, used sparingly so it stays special ---------- */

.rule {
  display: flex; align-items: center; gap: 1rem;
  max-width: 13rem; margin: 0 0 1.75rem; color: var(--brass);
}
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.rule svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.rule--center { margin-inline: auto; }
.rule--light { color: var(--brass-lt); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--body); font-weight: 700; font-size: var(--f-body);
  text-decoration: none; padding: 1.05rem 2rem;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.masthead__call { white-space: nowrap; }
.btn--sm svg { width: 16px; height: 16px; }
/* Navy on brass, like engraved lettering on a brass plate. Also clears AA at
   4.68:1, which white on this brass does not. */
.btn--call  { background: var(--brass); color: var(--navy-800); }
.btn--call:hover { background: var(--brass-lt); color: var(--navy-800); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(210,162,76,.55); }
.btn--ghost:hover { background: rgba(210,162,76,.14); color: var(--cream); border-color: var(--brass-lt); }
.btn--quiet { background: transparent; color: var(--navy-700); border-color: var(--line); font-weight: 700; }
.btn--quiet:hover { border-color: var(--brass); color: var(--brass); }
.btn--sm { padding: .72rem 1.25rem; font-size: var(--f-sm); }

/* ---------- header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 35, 73, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(210, 162, 76, .28);
}
.masthead__in { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; color: var(--cream); }
.brand svg { width: 26px; height: 26px; fill: var(--brass-lt); flex: none; }
.brand__name { font-family: var(--caps); font-size: var(--f-body); letter-spacing: .11em; line-height: 1.1; }
.brand:hover { color: #fff; }
/* five items now, so the gap gives way before the labels do. nothing in the
   masthead is allowed to wrap: it broke "The Homes" across two lines at 1000px. */
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.85rem); }
.nav a { color: #ccd6e2; text-decoration: none; font-size: var(--f-sm); padding-block: .35rem; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--brass-lt); }
@media (max-width: 940px) { .nav { display: none; } }
@media (max-width: 640px) {
  .masthead__in { gap: .75rem; min-height: 62px; }
  .brand svg { width: 22px; height: 22px; }
  .brand__name { font-size: .84rem; letter-spacing: .07em; }
  .masthead__call { padding: .62rem .78rem; }
  .masthead__call span { display: none; }
}

/* ---------- hero: full bleed, type set large over the place itself ---------- */

.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(94vh, 900px);
  background: var(--navy-900); color: var(--cream); overflow: hidden;
}
.hero__art { position: absolute; inset: 0; overflow: hidden; }
.hero__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform-origin: 58% 62%;
}
/* one slow push-in. The only motion on the page that the viewer doesn't start. */
@media (prefers-reduced-motion: no-preference) {
  .hero__art img { animation: push 26s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes push { from { transform: scale(1.005); } to { transform: scale(1.085); } }
}
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,27,51,.70) 0%, rgba(4,27,51,.18) 32%, rgba(4,27,51,.74) 70%, rgba(4,27,51,.95) 100%),
    linear-gradient(90deg, rgba(4,27,51,.68) 0%, rgba(4,27,51,.14) 58%, transparent 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(4,27,51,.45) 100%);
}
.hero__panel { position: relative; width: 100%; padding-block: clamp(3rem, 7vw, 6rem) clamp(4.5rem, 9vw, 7.5rem); }
.hero h1 { color: var(--cream); max-width: 17ch; margin: 1.1rem 0 1.4rem; text-shadow: 0 2px 24px rgba(4,27,51,.45); }
.hero__sub { font-size: var(--t-lede); line-height: 1.5; color: #dfe6ee; max-width: 44ch; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: center; }
.hero__note { font-size: var(--f-sm); color: #b0bccb; margin-top: 1.35rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero__panel .wrap > * { animation: rise 1.05s cubic-bezier(.16,.84,.34,1) both; }
  .hero__panel .wrap > :nth-child(1) { animation-delay: .15s; }
  .hero__panel .wrap > :nth-child(2) { animation-delay: .28s; }
  .hero__panel .wrap > :nth-child(3) { animation-delay: .45s; }
  .hero__panel .wrap > :nth-child(4) { animation-delay: .60s; }
  .hero__panel .wrap > :nth-child(5) { animation-delay: .72s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}

/* ---------- spec plate, lapped over the bottom of the hero ---------- */

.plate { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -5vw, -3rem); }
.plate ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--navy-900);
  box-shadow: 0 24px 60px -28px rgba(4, 27, 51, .65);
  border-top: 2px solid var(--brass);
}
.plate li {
  padding: 1.6rem 1.1rem; text-align: center; color: var(--cream);
  font-family: var(--caps); letter-spacing: .09em; font-size: var(--f-cap);
  border-left: 1px solid rgba(210, 162, 76, .22);
}
.plate li:first-child { border-left: 0; }
.plate b {
  display: block; font-family: var(--display); font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: 0; color: var(--brass-lt); margin-bottom: .3rem;
}
@media (max-width: 900px) {
  .plate { margin-top: 0; }
  .plate ul { grid-template-columns: repeat(2, 1fr); }
  .plate li { border-left: 0; border-top: 1px solid rgba(210,162,76,.2); }
  .plate li:nth-child(2n) { border-left: 1px solid rgba(210,162,76,.2); }
  .plate li:last-child { grid-column: 1 / -1; }
}

/* ---------- statement: the one line worth repeating ---------- */

.statement {
  background: var(--navy-900); color: var(--cream);
  text-align: center; position: relative; overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9rem);
}
.statement::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 90% at 50% 0%, rgba(210,162,76,.13), transparent 62%);
}
.statement .wrap { position: relative; }
.statement__line { font-family: var(--display); font-size: var(--t-mega); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.statement__sub { color: #9dabbd; margin: 0; font-size: var(--t-lede); }

/* ---------- prose columns ---------- */

.cols { display: grid; gap: clamp(2rem, 3vw, 3.25rem); }
@media (min-width: 780px) { .cols { grid-template-columns: repeat(3, 1fr); } }
.cols > div { border-top: 2px solid var(--brass); padding-top: 1.4rem; }
/* the sub-head carries the point on its own, so the section can be read
   from the three bold lines without touching the body copy */
.cols h3 { font-size: var(--t-lg); line-height: 1.25; margin-bottom: .75rem; color: var(--navy-800); }
.band--navy .cols h3 { color: var(--cream); }
.cols p { font-size: var(--f-body); line-height: 1.6; color: var(--ink-soft); }

/* ---------- the cost of waiting, stacked ---------- */

.burden { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--grey-line); }
.burden__row {
  display: grid; gap: .55rem 3.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--grey-line);
}
@media (min-width: 840px) { .burden__row { grid-template-columns: 1.05fr 1fr; align-items: baseline; } }
.burden__h {
  font-family: var(--display); line-height: 1.18;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  color: var(--grey-ink); margin: 0;
}
.burden__p { color: var(--grey-soft); font-size: var(--f-body); margin: 0; }

/* ---------- framed image, from the brass double rule on the printed sheet ---------- */

.framed { position: relative; padding: 12px; }
.framed::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--brass); opacity: .45; }
.framed::after  { content: ""; position: absolute; inset: 7px; border: 1px solid var(--brass); opacity: .25; }
.framed img { position: relative; width: 100%; box-shadow: 0 36px 70px -40px rgba(4, 27, 51, .55); }

.split { display: grid; gap: clamp(2rem, 4vw, 3.75rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split__art img { width: 100%; border-radius: var(--radius); }

/* ---------- owner portrait: narrower than a half-and-half split ---------- */

@media (min-width: 900px) { .owner { grid-template-columns: .62fr 1fr; } }
.owner__photo { margin: 0 auto; max-width: 22rem; }
.owner__photo img { display: block; }

/* ---------- the plan: big quiet numerals, no navy needed ---------- */

/* the numerals are set on a .86 line-height, so they sit high in their box and
   crowd the heading above. the space lives here rather than on a utility class,
   because this rule resets margin and would win against one anyway. */
.steps { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin: clamp(2.75rem, 4.5vw, 4rem) 0 0; padding: 0; counter-reset: s; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { list-style: none; counter-increment: s; }
.steps li::before {
  content: counter(s);
  display: block; font-family: var(--display); font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: .86; color: var(--brass); opacity: .5;
  padding-bottom: 1.1rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.steps h3 { margin-bottom: .75rem; font-size: var(--t-lg); }
.steps p { font-size: var(--f-body); color: var(--ink-soft); }
.band--navy .steps li::before { color: var(--brass-lt); opacity: .8; border-bottom-color: rgba(210,162,76,.3); }
.band--navy .steps p { color: #b9c6d6; }

/* ---------- exterior picker ---------- */

.picker { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.picker > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
/* Stacked and cross-faded rather than swapped, so changing exterior reads as
   one home being refinished instead of four separate photographs. */
.picker__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: var(--cream-2);
  box-shadow: 0 40px 80px -48px rgba(4, 27, 51, .55);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
#x1:checked ~ .picker__stage .s1,
#x2:checked ~ .picker__stage .s2,
#x3:checked ~ .picker__stage .s3,
#x4:checked ~ .picker__stage .s4 { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

.picker__chips { display: grid; gap: .75rem; margin-top: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
/* model names are longer than the old colour labels, so two columns on a phone
   breaks "The Anchorage" across lines. One column below 520 keeps them whole. */
@media (max-width: 520px) { .picker__chips { grid-template-columns: 1fr; } }
.picker__chips label {
  display: grid; grid-template-columns: 26px 1fr; gap: 0 .8rem; align-content: center;
  padding: .85rem 1.1rem; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s ease, background-color .16s ease;
}
.picker__chips label:hover { border-color: var(--brass); }
.chip__dot {
  grid-row: 1 / 3; align-self: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(4,27,51,.25);
}
.chip__name { font-family: var(--display); font-size: var(--f-body); line-height: 1.25; }
.chip__trim { font-size: var(--f-sm); color: var(--ink-soft); line-height: 1.25; }
#x1:checked ~ .picker__chips label[for="x1"],
#x2:checked ~ .picker__chips label[for="x2"],
#x3:checked ~ .picker__chips label[for="x3"],
#x4:checked ~ .picker__chips label[for="x4"] {
  border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); background: #fffdf6;
}
#x1:focus-visible ~ .picker__chips label[for="x1"],
#x2:focus-visible ~ .picker__chips label[for="x2"],
#x3:focus-visible ~ .picker__chips label[for="x3"],
#x4:focus-visible ~ .picker__chips label[for="x4"] { outline: 2px solid var(--brass-lt); outline-offset: 3px; }

/* ---------- home figures (homes.html) ---------- */

.homes { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.75rem; }
@media (min-width: 720px) { .homes { grid-template-columns: repeat(2, 1fr); } }
.home img { width: 100%; border-radius: var(--radius); }
.home figcaption { display: flex; align-items: baseline; gap: .75rem; margin-top: 1rem; padding-top: .85rem; border-top: 2px solid var(--brass); }
.home__name { font-family: var(--display); font-size: var(--t-lg); }
.home__trim { font-size: var(--f-sm); color: var(--ink-soft); margin-left: auto; text-align: right; }
@media (max-width: 520px) {
  .home figcaption { display: block; }
  .home__trim { display: block; margin: .2rem 0 0; text-align: left; }
}

/* ---------- floor plans, drawn by scripts/build-floorplans.py ---------- */

.plan { margin: 0 0 var(--s-7); }
.plan:last-child { margin-bottom: 0; }
.plan__head { display: flex; align-items: baseline; gap: .75rem; padding-bottom: .85rem; border-bottom: 2px solid var(--brass); }
.plan__name-lg { font-family: var(--display); font-size: var(--t-lg); }
.plan__meta { font-size: var(--f-sm); color: var(--ink-soft); margin-left: auto; text-align: right; }
/* the homes are 3.5 to 4 times longer than they are wide, so on a phone the
   plan scrolls sideways rather than shrinking the room labels to nothing */
.plan__scroll { overflow-x: auto; margin-top: 1.3rem; }
.plan__svg { display: block; width: 100%; min-width: 620px; height: auto; }
.plan__note { font-size: var(--f-sm); color: var(--ink-soft); margin-top: 1rem; max-width: 62ch; }
/* the plan only overflows once the viewport is narrower than its min-width */
.plan__hint { display: none; font-size: var(--f-cap); color: var(--brass); margin-top: .7rem; letter-spacing: .04em; }
@media (max-width: 700px) { .plan__hint { display: block; } }

.plan__shell { fill: none; stroke: var(--navy-800); stroke-width: 5; }
.plan__floor { fill: #fff; }
.plan__room { fill: #fff; stroke: var(--navy-800); stroke-width: 1.6; }
.plan__room--service { fill: var(--cream-2); }
.plan__room--open { stroke: none; }
.plan__gaps rect { fill: #fff; }
.plan__name { font-family: var(--caps); font-size: 11px; fill: var(--navy-800); text-anchor: middle; }
.plan__name--sm { font-size: 8.5px; }
.plan__name--quiet { fill: var(--ink-soft); letter-spacing: .06em; }
.plan__dim { font-family: var(--body); font-size: 8.5px; fill: var(--ink-soft); text-anchor: middle; }
.plan__rule { stroke: var(--brass); stroke-width: 1.2; }
.plan__scale { font-family: var(--body); font-size: 9px; fill: var(--brass); text-anchor: middle; letter-spacing: .1em; }

@media (max-width: 520px) {
  .plan__head { display: block; }
  .plan__meta { display: block; margin: .2rem 0 0; text-align: left; }
}

/* ---------- amenity list ---------- */

.amenities { list-style: none; margin: 2rem 0 0; padding: 0; }
.amenities li { display: grid; grid-template-columns: 26px 1fr; gap: 1rem; padding: 1.05rem 0; border-top: 1px solid var(--line); align-items: start; }
.amenities li:last-child { border-bottom: 1px solid var(--line); }
.amenities svg { width: 20px; height: 20px; fill: var(--brass); margin-top: .28rem; }
.amenities--plain li { grid-template-columns: 1fr; }
.band--navy .amenities li { border-color: rgba(210,162,76,.26); }
.band--navy .amenities svg { fill: var(--brass-lt); }

/* ---------- construction specs ---------- */

.specs { display: grid; gap: clamp(2rem, 3.5vw, 3.25rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.specs h3 { font-family: var(--caps); font-size: var(--f-cap); letter-spacing: .13em; color: var(--brass-lt); padding-bottom: .85rem; margin-bottom: .3rem; border-bottom: 1px solid rgba(210,162,76,.38); }
.specs ul { list-style: none; margin: 0; padding: 0; }
.specs li { padding: .78rem 0; font-size: var(--f-body); line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,.09); }
.band--navy .specs li { color: #c8d3e0; }

/* ---------- construction standards: spec on the left, plain english on the right ---------- */

.stds__group { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); }
.stds__group:first-child { margin-top: 0; }
.stds__group h3 { font-family: var(--caps); font-size: var(--f-cap); letter-spacing: .13em; color: var(--brass); margin-bottom: .2rem; }
.stds { border-top: 1px solid var(--line); }
.stds__row { display: grid; gap: .35rem 3rem; padding: clamp(1.1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .stds__row { grid-template-columns: .9fr 1fr; align-items: baseline; } }
.stds__t { font-family: var(--display); font-size: var(--t-lg); line-height: 1.2; color: var(--navy-800); margin: 0; }
.stds__d { color: var(--ink-soft); font-size: var(--f-body); margin: 0; }
/* Marcellus sets the prime marks with almost no right bearing, so the word space
   after 16" or 8' disappears at display size. This buys it back. */
.pr { margin-inline-end: .2em; }

/* ---------- pricing, set as type rather than as cards ---------- */

.tiers { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.tier {
  display: grid; gap: .35rem 2.5rem; align-items: baseline;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .tier { grid-template-columns: 12rem minmax(0, 1fr) auto; } }
.tier__name { font-family: var(--display); font-size: var(--t-lg); }
.tier__note { color: var(--ink-soft); font-size: var(--f-body); max-width: 46ch; }
.tier__fig {
  font-family: var(--display); font-size: var(--t-fig);
  line-height: 1; color: var(--navy-800); letter-spacing: -.02em; white-space: nowrap;
}
.tier__fig small { font-family: var(--body); font-size: var(--f-sm); color: var(--ink-soft); letter-spacing: 0; margin-left: .5rem; }
/* the currency sign set smaller and raised, the way a price is set in print */
.tier__fig .cur, .cost__fig .cur { font-size: .58em; vertical-align: .34em; margin-right: .03em; letter-spacing: 0; }
.tier__fig, .plate b { font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 820px) { .tier__fig { justify-self: end; text-align: right; } }

/* legacy card treatment, still used on the inner pages */
.costs { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 780px) { .costs { grid-template-columns: repeat(2, 1fr); } }
.cost { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brass); padding: clamp(1.5rem, 3vw, 2.25rem); }
.cost--wide { margin-top: 1.5rem; }
.cost h3 { margin-bottom: .35rem; }
.cost__fig a { text-decoration: none; }
.cost__fig { font-family: var(--display); font-size: clamp(2rem, 3vw, 2.6rem); color: var(--navy-800); line-height: 1.1; margin: .5rem 0 .6rem; }
.cost__fig span { font-family: var(--body); font-size: var(--f-sm); color: var(--ink-soft); font-weight: 400; }
.cost p:not(.cost__fig) { font-size: var(--f-body); color: var(--ink-soft); }

/* a value the client still has to supply, so it cannot be missed */
.tbd { background: #fff6dd; color: #7a5300; border-bottom: 2px dashed var(--brass); padding: 0 .18em; font-family: var(--body); font-size: .82em; font-weight: 700; white-space: nowrap; }

/* ---------- faq ---------- */

.faq { margin-top: clamp(2rem, 4vw, 3rem); max-width: 48rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 1rem; padding: 1.3rem 0; font-family: var(--display); font-size: var(--t-lg); color: var(--navy-800); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; margin-left: auto; align-self: center; width: 11px; height: 11px; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { color: var(--brass); }
.faq__a { padding: 0 0 1.5rem; max-width: 60ch; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .faq details[open] summary::after { transition: none; } }

/* ---------- faq paired with a standing call panel ---------- */

.faqwrap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .faqwrap { grid-template-columns: 1.6fr .75fr; align-items: start; } }
.faqwrap .faq { margin-top: 0; max-width: none; }
.askcard {
  background: var(--navy-800); color: var(--cream);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  border-top: 2px solid var(--brass);
  box-shadow: 0 30px 60px -40px rgba(4, 27, 51, .6);
}
@media (min-width: 980px) { .askcard { position: sticky; top: 100px; } }
/* the face belongs where someone is stuck on a question and weighing a call */
.askcard__face { display: block; width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--brass); }
.askcard__who { font-family: var(--caps); font-size: var(--f-cap); color: var(--brass-lt) !important; letter-spacing: .08em; margin: .85rem 0 .5rem; }
.askcard h3 { color: var(--cream); margin-bottom: .8rem; }
.askcard p { color: #b9c6d6; font-size: var(--f-body); }
.askcard .btn { margin-top: 1.6rem; width: 100%; }

/* ---------- full-bleed photographic break ---------- */

.interstitial {
  position: relative; color: var(--cream);
  min-height: min(78vh, 700px);
  display: flex; align-items: center;
  overflow: hidden; background: var(--navy-900);
}
.interstitial__bg { position: absolute; inset: 0; }
.interstitial__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.interstitial__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,27,51,.90) 0%, rgba(4,27,51,.62) 46%, rgba(4,27,51,.28) 100%),
    radial-gradient(110% 90% at 50% 50%, transparent 40%, rgba(4,27,51,.5) 100%);
}
.interstitial .wrap { position: relative; width: 100%; }
.interstitial h2 { color: var(--cream); max-width: 17ch; margin-bottom: 1.25rem; }
.interstitial p { color: #c3cfdd; max-width: 46ch; }
.interstitial .btn { margin-top: 2rem; }

/* ---------- closing ---------- */

.closing { position: relative; color: var(--cream); background: var(--navy-800); padding-block: clamp(5.5rem, 12vw, 10rem); text-align: center; }
.closing__bg { position: absolute; inset: 0; overflow: hidden; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; }
.closing__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,35,73,.84) 0%, rgba(4,27,51,.94) 100%); }
.closing .wrap { position: relative; }
.closing h2 { color: var(--cream); max-width: 22ch; margin-inline: auto; }
.closing__script { font-family: var(--script); font-size: clamp(2.8rem, 6vw, 4.5rem); color: var(--brass-lt); line-height: 1; margin-bottom: .5rem; }
.closing__note { color: #b3bfce; margin-top: 1.6rem; }
.closing .btn { margin-top: 2.25rem; }

/* ---------- footer ---------- */

.foot { background: var(--navy-900); color: #b2bdcb; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: var(--f-sm); }
.foot a:not(.btn) { color: #d6dde6; text-decoration: none; }
.foot a:not(.btn):hover { color: var(--brass-lt); text-decoration: underline; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h2, .foot h3 { font-family: var(--caps); font-size: var(--f-cap); letter-spacing: .13em; color: var(--cream); margin-bottom: 1.1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .65rem; }
.foot__tag { font-family: var(--display); color: var(--brass-lt); font-size: var(--t-lg); margin-top: 1.3rem; }
.foot__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(210,162,76,.2); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: var(--f-cap); color: #8996a6; }

/* ---------- mobile call bar: the phone is the whole point ---------- */

.callbar { position: fixed; inset: auto 0 0 0; z-index: 120; display: none; background: rgba(6,35,73,.97); border-top: 1px solid rgba(210,162,76,.4); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); }
.callbar .btn { width: 100%; }
@media (max-width: 940px) {
  .callbar { display: block; }
  body { padding-bottom: 5.5rem; }
  /* the fixed call bar sits over the bottom of a full-height hero, so give the
     hero panel room to clear it */
  .hero { min-height: min(88vh, 780px); }
  .hero__panel { padding-bottom: clamp(5.5rem, 15vw, 7.5rem); }
}


/* ---------- print: people do print property sheets ---------- */

@media print {
  .masthead, .callbar, .hero__art, .closing__bg, .interstitial__bg, .askcard { display: none !important; }
  body { padding-bottom: 0; color: #000; font-size: 11pt; }
  .band, .statement, .closing, .interstitial { padding-block: 1.2rem !important; background: #fff !important; color: #000 !important; }
  .band--navy h2, .band--navy h3, .closing h2, .interstitial h2,
  .statement__line, .hero h1, .hero__sub, .hero__note, .place,
  .plate li, .plate b, .specs h3, .specs li, .foot, .foot h3, .foot__tag { color: #000 !important; }
  /* the hero shadow prints as a grey smudge */
  .hero h1 { text-shadow: none !important; }
  .plate ul { box-shadow: none !important; border-top-color: #000 !important; }
  .framed img, .bleed-l img, .bleed-r img, .picker__stage { box-shadow: none !important; }
  .specs li, .amenities li, .tier, .burden__row { break-inside: avoid; }
  .faq details { break-inside: avoid; }
  .faq details > div { display: block !important; }
}