/* ==========================================================================
   Annex Fiber - MDU Partner Program landing page
   Visual system: institutional NYC real-estate / development marketing.
   Deep midnight navy + warm ivory + restrained warm gold.
   Annex magenta/violet is an ACCENT only (fiber visualization + brand detail).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Ink / navy */
  --ink:        #070B14;
  --ink-1:      #0B1020;
  --navy:       #101A31;
  --navy-2:     #17233F;

  /* Warm ivory / cream */
  --ivory:      #F6F1E7;
  --ivory-2:    #E9E1D2;
  --ivory-dim:  #C9C2B4;
  --paper:      #FBF9F4;

  /* Restrained warm gold */
  --gold:       #C2A05B;
  --gold-soft:  #D9C08A;
  --gold-deep:  #8E6F31;   /* decorative only: hairlines, underlines, gradients */
  --gold-ink:   #856428;   /* gold TEXT on ivory/paper - clears AA where --gold-deep does not */

  /* Annex accent (from logo gradient) - accent only */
  --magenta:    #D143E9;
  --violet:     #A348EE;
  --blue:       #2F62FF;

  /* Hairlines */
  --rule-dark:  rgba(246, 241, 231, 0.16);
  --rule-light: rgba(16, 26, 49, 0.14);

  /* Type */
  --font-display: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 78rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::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: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }
a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--gold-deep);
}

/* Visible focus everywhere */
:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: rgba(163, 72, 238, 0.28); }

/* ---------- Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ivory); color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.66rem, 0.72vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.35rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 5rem;
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }
.eyebrow--center::before {
  content: ""; width: 2.5rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}

/* Section heading scale */
.h-display { font-size: clamp(2.6rem, 6.4vw, 5.1rem); }
.h-section { font-size: clamp(2rem, 3.9vw, 3.35rem); }
.h-sub     { font-size: clamp(1.18rem, 1.5vw, 1.4rem); letter-spacing: -0.004em; }

.lede {
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  color: var(--ivory-dim);
  max-width: 46ch;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font-size: clamp(0.7rem, 0.78vw, 0.79rem);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-1px); }
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ivory); border-color: var(--rule-dark); }
.btn--ghost:hover { background: rgba(246, 241, 231, 0.07); border-color: var(--gold); color: var(--ivory); }

.btn--slim { padding: 0.78rem 1.35rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow { transition: none; }
  .btn:hover { transform: none; }
  .btn:hover .btn__arrow { transform: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 1.9vw, 1.6rem);
}
.site-header[data-scrolled="true"] {
  background: rgba(7, 11, 20, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule-dark);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header[data-scrolled="true"] { background: rgba(7, 11, 20, 0.97); }
}

.brand { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.brand__logo { width: clamp(108px, 12vw, 146px); height: auto; }
.brand__divider { width: 1px; height: 1.5rem; background: var(--rule-dark); }
.brand__context {
  font-size: 0.63rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-dim); line-height: 1.3;
}
@media (max-width: 640px) {
  .brand__divider, .brand__context { display: none; }
}

/* Header CTA stays present at every width - it shortens rather than
   disappearing, so the booking path is always one tap away. */
.header-cta__short { display: none; }
@media (max-width: 520px) {
  .header-cta__long { display: none; }
  .header-cta__short { display: inline; }
  .header-cta { padding-inline: 1rem; }
}

/* ==========================================================================
   Hero - main architecture RIGHT, headline/copy LEFT (non-negotiable)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  /* Clips the full-bleed .hero__copy::before veil so it cannot bleed into the
     next section or create a horizontal scrollbar from its -50vw insets. */
  overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 100svh;
  padding-top: clamp(7rem, 12vw, 9.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background-color: var(--ink-1);
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Absolute so both dimensions are definite. <picture> is a static wrapper and
   gives no resolvable height, so height:100% alone would collapse to the
   active source's intrinsic ratio - which differs between the desktop 16:9
   and mobile 4:5 art. The .hero min-height reserves the space, so there is
   no layout shift and the img needs no width/height attributes. */
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Desktop: bias right so the MDU + skyline focal point survives any crop. */
  object-position: 76% 48%;
  background: url("../img/hero-lqip.jpg") center / cover no-repeat;
}

/* Scrim.
   Narrow + tablet widths: copy spans the column, so the scrim is VERTICAL
   (dark at the bottom) and the architecture stays legible above it.
   Wide widths (>=1280px): copy is constrained to the left ~45%, so the scrim
   becomes HORIZONTAL - darkening the left for text while leaving the
   right-hand tower and the Empire State Building clearly visible. */
/* Stop values are not eyeballed - they were solved against the actual hero
   pixels so every hero text colour clears WCAG AA over its worst-case
   background. Re-check with the contrast script if the art changes. */
.hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__scrim::before {
  content: ""; position: absolute; inset: 0;
  background:
    /* top: keeps the fixed header legible */
    linear-gradient(180deg, rgba(7,11,20,0.80) 0%, rgba(7,11,20,0.30) 18%, rgba(7,11,20,0.08) 34%),
    /* bottom: only blends the hero into the next section. Text legibility at
       these widths is NOT this gradient's job - see .hero__copy::before. */
    linear-gradient(180deg,
      rgba(7,11,20,0) 55%,
      rgba(7,11,20,0.30) 80%,
      var(--ink) 100%);
}

@media (min-width: 1280px) {
  .hero__scrim::before {
    background:
      /* header legibility */
      linear-gradient(180deg, rgba(7,11,20,0.65) 0%, rgba(7,11,20,0.15) 22%, rgba(7,11,20,0) 40%),
      /* blend into the section below - kept late so it does not darken the copy */
      linear-gradient(180deg, rgba(7,11,20,0) 70%, rgba(7,11,20,0.45) 90%, var(--ink) 100%),
      /* Left-to-right veil, deliberately LIGHT.
         The area under the copy is already dark in the source art (median
         luminance 0.024); only ~4% of it is bright, and that is isolated
         specular highlights in lit windows. An earlier version darkened this
         to 0.94 to force those few pixels past AA, which left just 6% of the
         photograph visible and killed the hero. Now ~45-57% of the image
         reads under the copy and 83-96% over the tower, and the handful of
         hot pixels are handled by the text-shadow below instead. */
      linear-gradient(90deg,
        rgba(7,11,20,0.62) 0%,
        rgba(7,11,20,0.55) 20%,
        rgba(7,11,20,0.48) 42%,
        rgba(8,12,24,0.30) 52%,
        rgba(8,12,24,0.10) 64%,
        rgba(8,12,24,0.02) 78%,
        rgba(8,12,24,0.14) 100%);
  }

  /* Local contrast where a global veil would cost too much image. The tight
     shadow sharpens edges against lit windows; the wide one lifts the text off
     any bright patch underneath. Only applied where copy sits ON the photo -
     below 1280px the copy is on solid ink and this would just look muddy. */
  .hero__copy {
    text-shadow:
      0 1px 2px rgba(7,11,20,0.55),
      0 2px 22px rgba(7,11,20,0.85);
  }
  /* Brighter than the section ledes: ivory clears AA over far more of the
     photograph than --ivory-dim does (0.5% of the band below 4.5:1 vs 1.9%).
     Compound selectors because the base `.hero__note` rule is declared later
     in the file and media queries add no specificity. */
  .hero .hero__lede, .hero .hero__note { color: var(--ivory); }
}

.hero__inner { position: relative; width: 100%; }

.hero__copy { max-width: 40rem; }

/* Keep the headline inside the left band so the tower on the right reads. */
@media (min-width: 1280px) { .hero__copy { max-width: min(48%, 36rem); } }

.hero__headline {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  margin-bottom: clamp(1.35rem, 2vw, 1.9rem);
}
.hero__headline em {
  font-style: normal;
  display: block;
  color: var(--gold-soft);
}

/* Slightly brighter than the section eyebrows: this one sits over photography,
   and --gold alone does not clear AA against the brightest hero pixels. */
.hero .eyebrow { color: var(--gold-soft); }

.hero__lede { max-width: 40ch; margin-bottom: clamp(2rem, 3.2vw, 2.75rem); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }
.hero__note {
  font-size: 0.82rem; color: var(--ivory-dim);
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   Below 1280px: STACK the hero instead of overlaying the copy on the art.

   Overlaying does not survive a narrow column. The copy block is a
   near-constant ~360px tall while the hero height tracks the viewport, so any
   scrim dark enough to carry the text at 320x720 also swallows the building -
   which is precisely what it did. Text over photography only works when the
   text occupies a minority of the frame, and on a phone it never does.

   Stacking gives the art its own uncropped-feeling panel and puts the copy on
   solid ink below it: the whole composition reads, contrast is trivially AA,
   and there is no viewport-dependent gradient maths to get wrong.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .hero {
    /* Sized so the primary CTA and its support line both clear the fold on a
       375x812 phone. A taller panel looked better in isolation but pushed the
       button half off screen. */
    --hero-media-h: clamp(17rem, 48svh, 26rem);
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The backdrop becomes a real block in the flow. */
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: var(--hero-media-h);
  }
  /* Favour the tower crown, the Empire State Building and the sunset band. */
  .hero__media img { object-position: 50% 42%; }

  /* Scrim now covers only the art panel: legible header at the top, soft
     hand-off into the copy block at the bottom. No text sits under it. */
  .hero__scrim {
    inset: 0 0 auto 0;
    height: var(--hero-media-h);
    z-index: 1;
  }
  .hero__scrim::before {
    background:
      linear-gradient(180deg, rgba(7,11,20,0.75) 0%, rgba(7,11,20,0.25) 18%, rgba(7,11,20,0) 34%),
      linear-gradient(180deg, rgba(7,11,20,0) 60%, rgba(7,11,20,0.45) 86%, var(--ink) 100%);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    background: var(--ink);
    padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem);
  }
  .hero__copy { max-width: 34rem; }
}

/* Tablet: two columns of breathing room, so give the copy a measure and let
   the desktop 16:9 art sit above it. */
@media (min-width: 768px) and (max-width: 1279px) {
  /* 44svh rather than 52svh: on a short-but-wide tablet/laptop (1024x768) the
     taller panel pushed the primary CTA below the fold. */
  .hero { --hero-media-h: clamp(19rem, 44svh, 32rem); }
  /* 82% keeps the Empire State Building inside the right edge of the panel;
     at 72% it was clipped off. */
  .hero__media img { object-position: 82% 46%; }
  .hero__copy { max-width: 38rem; }
}

@media (max-width: 767px) {
  .hero .eyebrow { margin-bottom: 1rem; }
  .hero__headline { font-size: clamp(2.05rem, 9.6vw, 2.6rem); margin-bottom: 1.1rem; }
  .hero__lede { font-size: 0.98rem; max-width: 34ch; margin-bottom: 1.75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  /* The approved CTA wording is long. Tightened tracking keeps it on ONE line
     in a full-width phone button; wrapped to two it read as a broken label.
     The arrow is decorative (aria-hidden) and only got in the way here. */
  .hero__actions .btn {
    justify-content: center; text-align: center;
    font-size: 0.68rem; letter-spacing: 0.08em;
    padding-inline: 1.1rem;
  }
  .hero__actions .btn .btn__arrow { display: none; }
  .hero__note { max-width: none; text-align: center; }
}

/* Scroll cue */
.hero__cue {
  position: absolute; right: var(--gutter); bottom: 0.25rem;
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.hero__cue span { width: 3.5rem; height: 1px; background: linear-gradient(90deg, var(--rule-dark), var(--gold)); }
@media (max-width: 1279px) { .hero__cue { display: none; } }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--section-y); position: relative; }
.section--dark  { background: var(--ink); }
.section--navy  { background: var(--navy); }
.section--light { background: var(--paper); color: var(--ink-1); }
.section--light .lede { color: rgba(11, 16, 32, 0.68); }
.section--light .eyebrow { color: var(--gold-ink); }
.section--light .eyebrow::after { background: linear-gradient(90deg, rgba(142,111,49,0.5), transparent); }

.section__head { max-width: 44rem; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.section__head .lede { margin-top: 1.5rem; }

/* ---------- Benefits: hairline grid, not SaaS cards ---------- */
.benefits {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-dark);
}
.benefit {
  padding: clamp(2rem, 3vw, 2.85rem) 0;
  border-bottom: 1px solid var(--rule-dark);
}
.benefit__icon { color: var(--gold); margin-bottom: 1.6rem; }
.benefit h3 { font-size: clamp(1.32rem, 1.7vw, 1.6rem); margin-bottom: 0.85rem; }
.benefit p { font-size: 0.95rem; color: var(--ivory-dim); max-width: 32ch; }

@media (min-width: 700px) {
  .benefits { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
}
@media (min-width: 1080px) {
  .benefits { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .benefit { border-bottom: none; padding-bottom: 0; padding-right: clamp(1.75rem, 2.6vw, 3rem); }
  .benefit + .benefit {
    border-left: 1px solid var(--rule-dark);
    padding-left: clamp(1.75rem, 2.6vw, 3rem);
  }
}

/* ---------- Housing credibility strip (exact approved copy) ---------- */
.housing {
  background: var(--ivory);
  color: var(--ink-1);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.housing__inner {
  max-width: 58rem; margin-inline: auto; text-align: center;
  border-top: 1px solid rgba(142,111,49,0.34);
  border-bottom: 1px solid rgba(142,111,49,0.34);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.housing h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  margin-bottom: 1.15rem;
}
.housing p {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: rgba(11,16,32,0.72);
  max-width: 52ch; margin-inline: auto;
}

/* ---------- Qualification / fit strip ---------- */
.fit { display: grid; gap: clamp(1.75rem, 3vw, 3rem); grid-template-columns: 1fr; margin: 0; }
@media (min-width: 820px) { .fit { grid-template-columns: repeat(3, 1fr); } }

.fit__item {
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-dark);
}
.fit__item dt {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.65vw, 1.5rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.fit__item dd { margin: 0; font-size: 0.9rem; color: var(--ivory-dim); }

/* ---------- How the partnership works ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.85rem, 3vw, 2.6rem);
  border-top: 1px solid var(--rule-light);
}
.step:last-child { border-bottom: 1px solid var(--rule-light); }
.step h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); }
.step p { color: rgba(11,16,32,0.7); max-width: 52ch; font-size: 0.98rem; }
/* Needs to out-specify `.step p` above, hence the compound selector. */
.step p.step__num {
  font-family: var(--font-display);
  font-size: 0.85rem; letter-spacing: 0.18em;
  color: var(--gold-ink);
  max-width: none;
  padding-top: 0.45rem;
}
.step p.step__num::before { content: "0" counter(step); }
@media (min-width: 780px) {
  .step { grid-template-columns: 4rem 17rem 1fr; align-items: start; }
}

/* ==========================================================================
   Booking
   ========================================================================== */
.choices {
  display: grid; gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: 1fr;
  max-width: 62rem; margin-inline: auto;
}
@media (min-width: 760px) { .choices { grid-template-columns: 1fr 1fr; } }

.choice {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
  padding: clamp(1.6rem, 2.4vw, 2.25rem);
  text-align: left;
  background: rgba(246,241,231,0.035);
  border: 1px solid var(--rule-dark);
  cursor: pointer;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.choice:hover { background: rgba(246,241,231,0.06); border-color: rgba(194,160,91,0.5); }
.choice[aria-selected="true"] {
  background: rgba(194,160,91,0.09);
  border-color: var(--gold);
}
.choice[aria-selected="true"]::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet), var(--blue));
}
.choice__label {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.choice__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.12; }
.choice__desc { font-size: 0.9rem; color: var(--ivory-dim); }
.choice__state {
  margin-top: auto; padding-top: 0.9rem;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory-dim);
  display: flex; align-items: center; gap: 0.55rem;
}
.choice[aria-selected="true"] .choice__state { color: var(--gold-soft); }
.choice__state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid currentColor;
}
.choice[aria-selected="true"] .choice__state::before { background: currentColor; }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } }

/* Calendar panels */
.cal-panel { margin-top: clamp(2rem, 3.5vw, 3rem); }
.cal-panel[hidden] { display: none; }

/* min-height is a FLOOR, never a cap. HighLevel's form_embed.js sets an inline
   height on the iframe once the widget reports its size; if that message never
   arrives (blocked script, hidden panel on first paint) the panel still stands
   at a usable height instead of collapsing to a few pixels. */
.cal-frame {
  background: var(--paper);
  border: 1px solid var(--rule-dark);
  /* Generous, because this only ever shows if the vendor's height message is
     missed - in which case too tall (a little extra paper) beats too short (a
     clipped calendar). When sizing works, the inline height wins and this is
     invisible. */
  min-height: 52rem;
}
@media (max-width: 767px) { .cal-frame { min-height: 56rem; } }
/* The floor has to be on the IFRAME too, not just the container.
   An iframe's default height is 150px. HighLevel's resizer overrides it with
   an inline height once the widget reports its size, but until that message
   arrives - or if it never does - the iframe sits at 150px inside a 736px
   container and the calendar is clipped to a sliver. That is exactly what
   "only the top part shows" looks like. inherit picks up the container's
   floor, and the vendor's inline height still wins over it. */
.cal-frame iframe { display: block; width: 100%; min-height: inherit; border: 0; }

.cal-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.9rem 1.5rem;
  margin-top: 1.1rem;
  font-size: 0.82rem; color: var(--ivory-dim);
}
.cal-meta a { color: var(--gold-soft); }

/* ==========================================================================
   Middle image band
   ========================================================================== */
.band {
  margin: 0;
  position: relative;
  background: var(--paper);
}
.band img {
  width: 100%;
  height: clamp(19rem, 40vw, 34rem);
  object-fit: cover;
  object-position: 50% 60%;
}
/* Feather the bottom edge into the dark booking section below. */
.band::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,0.55) 58%, var(--ink) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .band img { height: clamp(17rem, 62vw, 24rem); object-position: 50% 55%; }
}

/* Unsupplied destinations.
   An <a> with no href is not a link and not focusable, so nothing dead ships.
   The label makes the gap visible instead of hiding it behind "#".
   Add the real href and these styles stop applying. */
[data-todo-link]:not([href]),
[data-fallback-link]:not([href]) {
  cursor: not-allowed;
  color: var(--ivory-dim);
  text-decoration: underline dashed var(--magenta);
  text-underline-offset: 0.22em;
}
[data-todo-link]:not([href])::after,
[data-fallback-link]:not([href])::after {
  content: " — url pending";
  font-size: 0.68em; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--magenta);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 52rem; }
.faq__item { border-top: 1px solid var(--rule-dark); }
.faq__item:last-child { border-bottom: 1px solid var(--rule-dark); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.28;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--gold-soft); }

.faq__sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; color: var(--gold); }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq__sign::before { inset: 6px 0 auto 0; height: 1px; }
.faq__sign::after  { inset: 0 6px auto 6px; width: 1px; height: 100%; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .faq__sign::before, .faq__sign::after { transition: none; } }

.faq__a { padding-bottom: clamp(1.4rem, 2vw, 1.8rem); }
.faq__a p { font-size: 0.95rem; color: var(--ivory-dim); max-width: 62ch; }
.faq__a p + p { margin-top: 0.85rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  /* The scrim ramp below is expressed in multiples of this, so the image band
     and the start of the footer content always line up. */
  --footer-pad-top: clamp(8rem, 15vw, 13rem);
  position: relative;
  background: var(--ink-1);
  padding-top: var(--footer-pad-top);
  padding-bottom: clamp(2rem, 3vw, 2.75rem);
  overflow: hidden;
}
/* Footer atmosphere. Same <picture> caveat as the hero: the img must be
   absolutely positioned for height:100% to resolve, otherwise it falls back to
   the active source's intrinsic ratio and overshoots the footer. */
/* The image occupies the footer's top padding ONLY - not the whole footer.
   Two reasons, both learned the hard way:
   1. Stretched over the full footer, the visible strip was just the top
      quarter of the photograph, which is empty sky. The skyline and the
      bridge sit mid-frame. Sizing the element to the band lets
      object-position pick that slice instead.
   2. No footer text overlaps it, so it needs almost no veil. A uniform veil
      could never work here anyway: the dimmest footer text (the 72% ivory
      meta line) caps the image at ~15% before dropping below AA, and 15% is
      not visible - which is why the previous version read as a flat box. */
.site-footer__media {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--footer-pad-top);
  z-index: 0;
  overflow: hidden;
}
.site-footer__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 43% lands the lit skyline and the bridge towers inside the band. */
  object-position: 50% 43%;
  opacity: 0.75;
}

/* Only a bottom fade, dissolving the band into the footer proper. */
.site-footer__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,16,32,0.18) 0%,
    rgba(11,16,32,0.10) 42%,
    rgba(11,16,32,0.58) 78%,
    var(--ink-1) 100%);
}
.site-footer > .wrap { position: relative; z-index: 1; }

.footer__top {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.1fr 1fr; align-items: end; } }

.footer__logo { width: clamp(140px, 16vw, 190px); margin-bottom: 1.6rem; }
.footer__tag {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.2; color: var(--ivory);
  max-width: 26ch;
}

.footer__links {
  display: grid; gap: 1.75rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer__links h3 {
  font-family: var(--font-sans);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__links a { font-size: 0.89rem; color: var(--ivory-dim); text-decoration: none; }
.footer__links a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 0.22em; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  font-size: 0.76rem; color: rgba(201,194,180,0.72);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--ivory); text-decoration: underline; }

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .hero__cue, .choices { display: none !important; }
  body { background: #fff; color: #000; }
}