/* =====================================================================
   home.css — the site root: landing page, then straight into the work.

   Everything reuses theme.css tokens (colour, type, the .btn/.wrap/.rule
   vocabulary and the portal's .ro scroll-reveal). Nothing here hardcodes
   a colour or a font — see theme.css if the palette ever changes.
   ===================================================================== */

main { display: block }

/* ---------------------------------------------------------------
   Scroll reveal — opt-in only once JS has actually run, so a failed
   script, a disabled-JS visitor, a crawler, or a print/PDF/screenshot
   tool that never fires a real scroll event still gets full content
   instead of permanently-blank sections. theme.css's own `.ro` rule
   hides unconditionally in CSS, which is exactly the failure mode this
   page can't afford for its own marketing copy — so it isn't used here.
   --------------------------------------------------------------- */
html.js-ready .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s, transform .9s;
}
html.js-ready .reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal { opacity: 1; transform: none }
}

/* ---------------------------------------------------------------
   Section bands
   --------------------------------------------------------------- */
.band {
  padding: 76px 24px;
}
.band.alt {
  background: linear-gradient(180deg, rgba(201, 162, 75, .05), transparent 60%);
  border-top: 1px solid rgba(201, 162, 75, .12);
  border-bottom: 1px solid rgba(201, 162, 75, .12);
}

.band-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.eyebrow {
  font-family: var(--label); font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .7rem;
}
.band-head h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--cream);
  margin-bottom: 1rem;
}
.band-head .lede {
  color: var(--cream-dim); font-size: 1.02rem; line-height: 1.75;
}

/* ---------------------------------------------------------------
   Offer cards — same elevation language as the gallery tiles
   --------------------------------------------------------------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1020px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .offer-grid { grid-template-columns: 1fr; }
}

.offer {
  background: var(--card); border-radius: 14px; padding: 30px 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055),
              0 0 0 1px rgba(255, 255, 255, .04);
  transition: box-shadow .35s var(--ease);
}
.offer:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 0 0 1px rgba(201, 162, 75, .38);
}
.offer-mark {
  font-size: 1.3rem; color: var(--gold); margin-bottom: 1rem;
}
.offer h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  color: var(--cream); margin-bottom: .6rem;
}
.offer p {
  color: var(--cream-dim); font-size: .94rem; line-height: 1.68;
  margin-bottom: 1.2rem;
}
.linkout {
  font-family: var(--label); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  font-weight: 600; transition: color .25s;
}
.linkout:hover { color: var(--gold-bright) }

/* ---------------------------------------------------------------
   Blank vs. hand-painted
   --------------------------------------------------------------- */
.finish-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 720px) {
  .finish-row { grid-template-columns: 1fr; }
}
.finish-copy h2 { margin-bottom: 1rem }
.finish-copy p {
  color: var(--cream-dim); font-size: 1rem; line-height: 1.75;
}

.finish-pills { display: flex; flex-direction: column; gap: 14px }
.pill {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: .3rem;
}
.pill-k {
  font-family: var(--label); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.pill-v {
  font-size: .9rem; color: var(--cream-dim); line-height: 1.5;
}

/* ---------------------------------------------------------------
   Featured strip — same figure-on-its-own-ground pattern as the
   piece page, at grid scale.
   --------------------------------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1020px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}

.feat {
  display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background: var(--bg, var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055),
              0 0 0 1px rgba(255, 255, 255, .04);
  transition: box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.feat:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 0 0 1px rgba(201, 162, 75, .38);
}
@media (hover: hover) {
  .feat-grid:has(.feat:hover) .feat:not(:hover) { opacity: .5 }
}
.feat img {
  width: 100%; height: 100%; object-fit: contain;
}

/* ---------------------------------------------------------------
   Footer social row
   --------------------------------------------------------------- */
.social-row {
  margin-top: 1.4rem;
  font-family: var(--label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream-dim);
}
.social-row a { color: var(--cream-dim); text-decoration: none; transition: color .25s }
.social-row a:hover { color: var(--gold) }
.social-row span { margin: 0 .5rem; color: var(--line-strong) }