/* Capistrano homepage — proof grid.
   Scoped to body.cap-home. Tokens match the studio navy / brass / ivory system.
   Signature lives here; the rest of the page stays quiet. */

.cap-home {
  --desk-navy: #0c1a2c;
  --desk-navy-deep: #08131f;
  --desk-ivory: #f6f3ee;
  --desk-brass: #b89254;
  --desk-charcoal: #222930;
  --desk-stone: #e8e2d8;
  --desk-gutter: 3px;
}

.cap-home,
.cap-home body {
  background: var(--desk-navy-deep);
}

/* Menu sits outside the blurred nav so position:fixed covers the viewport. */
.cap-home [data-mobile-menu]:not([hidden]) {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;
  z-index: 40;
  background: var(--desk-navy);
}

@media (min-width: 640px) {
  .cap-home [data-mobile-menu]:not([hidden]) { top: 64px; }
}

@media (min-width: 1024px) {
  .cap-home [data-mobile-menu] { display: none !important; }
}

/* ----- Single-shot hero ----- */

.cap-hero {
  position: relative;
  background: var(--desk-navy-deep);
  color: #fff;
}

.cap-hero-shot {
  margin: 0;
  background: #071018;
}

.cap-hero-shot img {
  display: block;
  width: 100%;
  height: min(86svh, 820px);
  object-fit: cover;
  object-position: center;
}

.cap-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 20px 28px;
  background: linear-gradient(transparent, rgba(8, 19, 31, 0.92) 42%);
}

@media (min-width: 640px) {
  .cap-hero-copy { padding: 72px 32px 36px; }
}

@media (min-width: 1024px) {
  .cap-hero-copy { padding: 88px 48px 44px; }
}

.cap-hero-copy .eyebrow {
  color: var(--desk-brass);
  margin-bottom: 12px;
}

.cap-hero-copy h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  max-width: 14ch;
  margin: 0 0 14px;
}

.cap-hero-copy .cap-lead {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 38ch;
  margin: 0 0 20px;
}

.cap-hero-copy .cap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  background: var(--desk-brass);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  max-width: 280px;
}

.cap-hero-copy .cap-cta:hover { background: #c4a266; }

.cap-hero-copy .cap-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cap-hero-copy .cap-aside {
  margin: 14px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

/* ----- Quiet proof gallery (below the hero) ----- */

.cap-gallery {
  background: var(--desk-navy-deep);
  color: #fff;
}

.cap-gallery-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 36px;
}

@media (min-width: 640px) {
  .cap-gallery-inner { padding: 36px 24px 48px; }
}

.cap-gallery-grid {
  display: grid;
  gap: var(--desk-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .cap-gallery-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.cap-gallery-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #071018;
}

.cap-gallery-grid img {
  display: block;
  width: 100%;
  height: 42vw;
  max-height: 220px;
  object-fit: cover;
}

@media (min-width: 700px) {
  .cap-gallery-grid img { height: 200px; max-height: none; }
}

.cap-gallery-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(transparent, rgba(8, 19, 31, 0.78));
}

/* ----- Quiet bands ----- */

.cap-band {
  background: var(--desk-ivory);
  color: var(--desk-charcoal);
}

.cap-band--stone { background: var(--desk-stone); }
.cap-band--navy {
  background: var(--desk-navy);
  color: #fff;
}

.cap-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px;
}

@media (min-width: 640px) {
  .cap-band-inner { padding: 64px 24px; }
}

@media (min-width: 1024px) {
  .cap-band-inner { padding: 80px 48px; }
}

.cap-kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--desk-brass);
  margin: 0 0 12px;
}

.cap-band h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
  color: var(--desk-navy);
  margin: 0 0 10px;
  max-width: 22ch;
}

.cap-band--navy h2 { color: #fff; }

.cap-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(34, 41, 48, 0.72);
  max-width: 52ch;
  margin: 0 0 28px;
}

.cap-band--navy .cap-sub { color: rgba(255, 255, 255, 0.72); }

/* Decision ledger — rent-roll vernacular, not brochure cards */

.cap-ledger {
  border-top: 1px solid rgba(12, 26, 44, 0.12);
}

.cap-ledger a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(12, 26, 44, 0.12);
  color: inherit;
}

@media (min-width: 640px) {
  .cap-ledger a {
    grid-template-columns: 140px 1fr auto;
    gap: 24px;
    padding: 18px 0;
  }
}

.cap-ledger a:hover .cap-ledger-title { color: var(--desk-brass); }

.cap-ledger figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0c1a2c;
}

.cap-ledger figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-ledger-meta {
  min-width: 0;
}

.cap-ledger-kind {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--desk-brass);
  margin-bottom: 4px;
}

.cap-ledger-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--desk-navy);
  line-height: 1.3;
  margin: 0 0 4px;
}

.cap-ledger-blurb {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(34, 41, 48, 0.68);
  margin: 0;
}

.cap-ledger-go {
  display: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--desk-navy);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .cap-ledger-go { display: block; }
}

/* Packaging strip — quieter than the ledger */

.cap-pack {
  display: grid;
  gap: var(--desk-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .cap-pack { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cap-pack { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.cap-pack a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: 18px 16px;
  background: var(--desk-navy);
  color: #fff;
}

.cap-pack a:hover { background: #122338; }

.cap-pack-kind {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--desk-brass);
  margin-bottom: 8px;
}

.cap-pack h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

/* Quiet lanes */

.cap-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.cap-lanes a {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  color: var(--desk-navy);
  border-bottom: 1px solid rgba(184, 146, 84, 0.55);
  padding-bottom: 2px;
}

.cap-lanes a:hover { color: var(--desk-brass); }

.cap-price-row {
  display: grid;
  gap: 1px;
  background: rgba(12, 26, 44, 0.1);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .cap-price-row { grid-template-columns: repeat(4, 1fr); }
}

.cap-price {
  background: var(--desk-ivory);
  padding: 18px 16px;
}

.cap-price dt {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(34, 41, 48, 0.5);
  margin: 0 0 6px;
}

.cap-price dd {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--desk-navy);
}

.cap-price small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(34, 41, 48, 0.55);
}

.cap-note {
  margin: 16px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(34, 41, 48, 0.62);
  max-width: 62ch;
}

.cap-more {
  color: inherit;
  border-bottom: 1px solid rgba(184, 146, 84, 0.55);
}

.cap-steps {
  display: grid;
  gap: 16px 28px;
}

@media (min-width: 800px) {
  .cap-steps { grid-template-columns: repeat(4, 1fr); }
}

.cap-steps h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--desk-navy);
  margin: 0 0 6px;
}

.cap-steps p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(34, 41, 48, 0.68);
  margin: 0;
}

.cap-close {
  text-align: left;
}

.cap-close .cap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  background: var(--desk-brass);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  max-width: 280px;
}

.cap-close .cap-cta:hover { background: #c4a266; }

.cap-close .cap-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cap-close-mail {
  display: block;
  margin-top: 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.cap-close-mail a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ stays on existing accordion markup; tighten type only */

.cap-home #faq button {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
}

@media (max-width: 420px) {
  .cap-hero-copy .cap-cta,
  .cap-close .cap-cta { max-width: none; }
}