/* ==========================================================================
   Homepage-specific layout
   ========================================================================== */
/* cache-bust: 2026-09-09-01 */

/* -- hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero picture, .hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 38%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,10,.15) 0%, rgba(10,12,10,.08) 42%, rgba(8,10,8,.72) 100%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-top: calc(var(--nav-h) + 40px);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  color: #E7E4DA;
}
.hero-eyebrow .chip { color: #E7E4DA; }
.hero h1 {
  color: #fff; font-size: var(--step-7); max-width: 15ch;
  text-wrap: balance;
}
.hero .lede { color: #E7E4DA; margin-top: 20px; font-size: var(--step-1); }
.hero-note { color: #B9B6AA; margin-top: 14px; font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .02em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #E7E4DA; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: .18em;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 34px; background: linear-gradient(#fff, transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%{opacity:.15; transform: scaleY(.4); transform-origin: top;} 50%{opacity:1; transform: scaleY(1); transform-origin: top;} 100%{opacity:.15; transform: scaleY(.4); transform-origin: top;} }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; opacity: .6; } }

/* -- statement ---------------------------------------------------------- */
.statement { text-align: center; }
.statement .display { font-size: var(--step-6); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.statement .display em { color: var(--marine); font-style: italic; }

/* -- sticky craft -------------------------------------------------------- */
.craft { background: var(--ink); color: var(--stone); }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.craft-media { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.craft-media img { width: 100%; height: 100%; object-fit: cover; }
.craft-media figcaption {
  position: absolute; left: var(--gutter); bottom: 28px; right: var(--gutter);
  font-family: var(--f-mono); font-size: var(--step--1); color: #E7E4DA;
  display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid rgba(255,255,255,.25); padding-top: 10px;
}
.craft-copy { padding: clamp(48px, 9vw, 120px) clamp(20px, 5vw, 64px); }
.craft-copy .eyebrow { color: var(--metal); }
.craft-copy h2 { font-size: var(--step-5); color: #fff; max-width: 12ch; margin-top: 14px; }
.craft-copy > .lede { color: #C9C6BA; margin-top: 18px; }

.craft-stats { margin-top: 56px; display: flex; flex-direction: column; }
.craft-stat {
  padding-block: 28px; border-top: 1px solid var(--line-on-dark);
  display: grid; grid-template-columns: auto 1fr; gap: 18px 26px; align-items: baseline;
}
.craft-stat:last-child { border-bottom: 1px solid var(--line-on-dark); }
.craft-stat .num { font-family: var(--f-display); font-weight: 600; font-size: var(--step-4); color: #fff; }
.craft-stat .num sup { font-family: var(--f-mono); font-size: 0.4em; margin-left: 4px; color: var(--metal); }
.craft-stat .label { font-size: var(--step-0); color: #C9C6BA; align-self: center; }
.craft-stat .label small { display: block; font-family: var(--f-mono); font-size: var(--step--1); color: var(--faint-on-dark); margin-top: 4px; }

@media (max-width: 880px) {
  .craft-grid { grid-template-columns: 1fr; }
  .craft-media { position: relative; height: 62vh; }
}

/* -- photo break -------------------------------------------------------- */
.photo-break { position: relative; height: clamp(320px, 62vw, 640px); overflow: hidden; }
.photo-break img { width: 100%; height: 100%; object-fit: cover; }
.photo-break .tag {
  position: absolute; left: var(--gutter); bottom: var(--gutter);
  color: #fff; font-family: var(--f-display); font-style: italic; font-size: var(--step-3);
  max-width: 14ch; text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

/* -- islands -------------------------------------------------------------- */
.islands { background: var(--teal-dim); }
.islands-head { max-width: 62ch; }
.islands-head h2 { font-size: var(--step-5); margin-top: 14px; }
.island-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.island-grid-3 { grid-template-columns: repeat(3, 1fr); }
.island-grid-1 { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
@media (max-width: 760px) { .island-grid, .island-grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 761px) and (max-width: 980px) { .island-grid-3 { grid-template-columns: 1fr 1fr; } }
.island-card {
  background: var(--paper);
  padding: 34px clamp(22px, 3vw, 38px);
}
.island-card .eyebrow { color: var(--teal); }
.island-card .chip { color: var(--teal); }
.island-card .chip .dot { background: var(--teal); }
.island-card h3 { font-family: var(--f-display); font-size: var(--step-3); margin-top: 14px; }
.island-card p { margin-top: 14px; color: var(--ink-soft); max-width: 42ch; }
.island-card .meta { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; }
.island-card .meta span { font-family: var(--f-mono); font-size: var(--step--1); color: var(--teal); }

/* -- models carousel -------------------------------------------------------- */
.models-carousel-wrap { margin-top: 48px; }
.models-carousel {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  cursor: grab; scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 6px;
}
.models-carousel::-webkit-scrollbar { display: none; }
.models-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.models-carousel.is-dragging .model-card { pointer-events: none; }
.model-card {
  flex: 0 0 auto; width: min(80vw, 360px); scroll-snap-align: start;
  display: block; text-align: center; transition: opacity .2s ease;
}
.model-card:hover { opacity: .82; }
.model-card-media { height: 300px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 28px; }
.model-card-media img { max-height: 100%; max-width: 100%; width: auto; margin-inline: auto; }
.model-card-caption { display: block; padding-top: 20px; }
.model-card-caption h3 { font-family: var(--f-display); font-style: italic; font-size: var(--step-3); }
.model-card-caption .status { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 640px) { .model-card-media { height: 220px; } }

/* -- photo gallery ----------------------------------------------------------
   A curated mosaic, not a uniform grid: four tile sizes (small / wide /
   tall / big) give the wall of photos a hung-salon rhythm instead of a
   flat contact sheet. Sizes are assigned by hand per photo (see the HTML),
   not computed — a handful of the strongest shots get the big tiles. -- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(70px, 8.6vw, 130px);
  grid-auto-flow: dense;
  gap: 10px;
  margin-top: 48px;
}
.gallery-item { display: block; grid-column: span 1; grid-row: span 3; overflow: hidden; background: var(--stone-line); cursor: zoom-in; }
.gallery-item--wide { grid-column: span 2; grid-row: span 3; }
.gallery-item--tall { grid-column: span 1; grid-row: span 6; }
.gallery-item--big { grid-column: span 2; grid-row: span 6; }
.gallery-item picture, .gallery-item img { display: block; width: 100%; height: 100%; }
.gallery-item img { object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.08); }
@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide, .gallery-item--big { grid-column: span 2; }
  .gallery-item--tall, .gallery-item--big { grid-row: span 4; }
}

/* -- lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12,12,10,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.lightbox-stage { max-width: 88vw; max-height: 84vh; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img {
  max-width: 88vw; max-height: 84vh; width: auto; height: auto;
  opacity: 0; transition: opacity .25s ease;
}
.lightbox-stage img.loaded { opacity: 1; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; color: #fff; line-height: 1; padding: 14px;
  opacity: .68; transition: opacity .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-close { top: 14px; right: 14px; font-size: 1.6rem; font-weight: 300; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 2.6rem; font-weight: 200; }
.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }
.lightbox-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.55); font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .1em;
}
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { font-size: 1.9rem; padding: 10px; }
  .lightbox-stage, .lightbox-stage img { max-width: 94vw; max-height: 78vh; }
}

/* -- split CTA -------------------------------------------------------------- */
.split-cta { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .split-cta { grid-template-columns: 1fr; } }
.split-cta > a {
  position: relative;
  padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 16px;
  transition: opacity .25s ease;
  min-height: 320px;
  justify-content: flex-start;
  border-top: 1px solid var(--ink);
}
.corner-tag {
  position: absolute; top: 22px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid currentColor; opacity: .6;
}
.corner-tag-left { left: 22px; }
.corner-tag-right { right: 22px; }
.split-cta .rent { background: var(--stone); color: var(--ink); }
.split-cta .rent:hover { opacity: .6; }
.split-cta .buy { background: var(--paper); color: var(--ink); }
.split-cta .buy:hover { opacity: .6; }
.split-cta .eyebrow { color: var(--ink-faint); }
.split-cta h3 { font-family: var(--f-display); font-size: var(--step-4); }
.split-cta p { max-width: 34ch; opacity: .82; }
.split-cta .arrow { font-family: var(--f-mono); font-size: var(--step--1); display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.split-cta .durations { font-family: var(--f-mono); font-size: var(--step--1); opacity: .95; margin-top: 4px; }
.split-cta .durations-note { font-size: var(--step--1); opacity: .72; margin-top: 6px; max-width: 34ch; }

/* -- waitlist band ------------------------------------------------------------ */
.waitlist-band { background: var(--stone-dim); border-top: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line); }
.waitlist-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 880px) { .waitlist-grid { grid-template-columns: 1fr; } }
.waitlist-copy h2 { font-size: var(--step-4); margin-top: 14px; max-width: 14ch; }
.waitlist-copy .lede { margin-top: 16px; }
.waitlist-form-card { background: var(--paper); border: 1px solid var(--stone-line); padding: clamp(24px, 4vw, 40px); border-radius: 0; }

/* -- social proof / instagram teaser ------------------------------------------- */
.social-strip { text-align: center; }
.social-strip h2 { font-size: var(--step-4); margin-top: 12px; }
.social-strip .lede { margin-inline: auto; margin-top: 14px; }
.social-strip .btn { margin-top: 30px; }
.btn-instagram { display: inline-flex; align-items: center; gap: 10px; }
.btn-instagram .ig-icon { width: 18px; height: 18px; flex: none; }