/* ============================================================
   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; }
.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; }
.nav { display: flex; align-items: center; gap: 1.85rem; }
.nav a { color: #ccd6e2; text-decoration: none; font-size: var(--f-sm); padding-block: .35rem; border-bottom: 1px solid transparent; }
.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); }

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

.steps { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin: 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)); }
.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; }
}

/* ---------- 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; }

/* ---------- 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; } }
.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; }
}