/* =====================================================================
   SOLANO RESIDENCES — everything below the hero.

   The hero ends in deep navy sky, so the page carries on into it. The
   surface is drenched navy from here down and the photography is the only
   light in the room, with one porcelain break for the materials. Brass
   appears as hairlines, numerals and a single button, nowhere else.
   ===================================================================== */

:root{
  /* surface */
  --ink-900:   oklch(0.158 0.034 256);
  --ink-850:   oklch(0.196 0.042 256);
  --ink-800:   oklch(0.238 0.046 255);
  --porcelain: oklch(0.962 0.007 250);
  --bone:      oklch(0.902 0.011 250);

  /* ink on those surfaces */
  --chalk:     oklch(0.948 0.006 250);
  --mute:      oklch(0.722 0.015 252);
  --mute-dark: oklch(0.468 0.020 254);

  /* the one warm note */
  --brass:     oklch(0.790 0.104 78);
  --brass-lo:  oklch(0.660 0.088 76);

  --hair:      oklch(0.62 0.03 254 / 0.24);
  --hair-dark: oklch(0.30 0.03 254 / 0.16);

  --serif:   'Instrument Serif', 'Times New Roman', Times, serif;
  --grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --room:  clamp(112px, 15vw, 260px);   /* the standard chapter breath */
  --hold:  clamp(56px, 7vw, 120px);     /* the shorter one, for rhythm  */
  --measure: 68ch;

  --expo: cubic-bezier(.16, 1, .3, 1);
}

/* the page continues the hero's sky rather than switching to paper */
body{ background:var(--ink-900); color:var(--chalk); }

.chapter{
  position:relative;
  padding:var(--room) var(--gut);
  background:var(--ink-900);
}

/* ---------------------------------------------------------------
   TYPE
   Instrument Serif carries the statements, Archivo the small
   structural marks, Inter the reading copy. The hero's wordmark is
   untouched.
   --------------------------------------------------------------- */
.statement{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem, 6.4vw, 6.4rem);
  line-height:1.03;
  letter-spacing:-.018em;
  max-width:19ch;
  text-wrap:balance;
}
.statement em{ font-style:italic; color:var(--brass); }
.statement--centre{ margin-inline:auto; text-align:center; }
.statement--left{ max-width:14ch; }
.statement--xl{ font-size:clamp(2.8rem, 7.6vw, 8rem); max-width:16ch; }
.statement--dark{ color:var(--ink-900); }
.statement--dark em{ color:var(--brass-lo); }

/* word reveal: JS boxes each word, the box clips, the inner element lifts */
.w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.16em;      /* room for descenders inside the clip */
  margin-bottom:-.16em;
}
.w > i{ display:inline-block; font-style:inherit; }
.js [data-lines] .w > i{ transform:translateY(108%); }
.js [data-fade]{ opacity:0; }

.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family:var(--grotesk);
  font-size:11px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--mute);
  margin-bottom:clamp(28px, 4vw, 56px);
}
.eyebrow--centre{ justify-content:center; }
.eyebrow--dark{ color:var(--mute-dark); }
.eyebrow__num{ color:var(--brass); }
.eyebrow__rule{
  display:block; width:clamp(40px, 7vw, 110px); height:1px;
  background:var(--brass);
  transform-origin:left center;
}
.js [data-rule]{ transform:scaleX(0); }
.eyebrow--dark .eyebrow__rule{ background:var(--brass-lo); }

/* ---------------------------------------------------------------
   PLATES — every photograph sits in one
   --------------------------------------------------------------- */
.plate{ margin:0; position:relative; }
.plate__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:var(--ink-850);
}
.plate__frame img{
  position:absolute; inset:-13% 0 auto 0;
  width:100%; height:126%;      /* headroom so the drift never shows the frame */
  object-fit:cover;
  display:block;
}
.plate--tall .plate__frame{ aspect-ratio:4/5; }
.plate--wide .plate__frame{ aspect-ratio:5/4; }

/* ---------------------------------------------------------------
   02 — MANIFESTO
   --------------------------------------------------------------- */
.chapter--manifesto{ padding-top:calc(var(--room) * 1.15); }
.chapter--manifesto .statement{ max-width:22ch; }

.manifesto__body{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 34ch));
  gap:clamp(28px, 5vw, 88px);
  justify-content:end;
  margin-top:clamp(56px, 8vw, 120px);
}
.manifesto__body p{
  margin:0;
  color:var(--mute);
  font-size:15.5px;
  line-height:1.78;
}

.ledger{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 4vw, 64px);
  margin:clamp(72px, 11vw, 180px) 0 0;
}
.ledger__cell{ border-top:1px solid var(--hair); padding-top:22px; }
.ledger dt{
  font-family:var(--grotesk);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute);
}
.ledger dd{
  margin:14px 0 0;
  font-family:var(--serif);
  font-size:clamp(3rem, 6vw, 5.6rem);
  line-height:.9;
  letter-spacing:-.02em;
}
.ledger dd i{ font-style:normal; color:var(--brass); }

/* ---------------------------------------------------------------
   03 — THE COLLECTION
   Pinned: the page holds still and the coast moves sideways.
   --------------------------------------------------------------- */
.chapter--collection{ padding:0; }
.collection__stage{
  height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.collection__track{
  display:flex;
  align-items:center;
  gap:clamp(32px, 5vw, 104px);
  padding-inline:var(--gut);
  will-change:transform;
}
.panel{ flex:0 0 auto; width:clamp(256px, 27vw, 380px); }
.panel--intro{ width:clamp(300px, 36vw, 540px); }
.panel--intro .eyebrow{ margin-bottom:26px; }
.panel__note{
  margin:clamp(24px, 3vw, 40px) 0 0;
  max-width:32ch;
  color:var(--mute);
  font-size:14.5px; line-height:1.75;
}
/* the alternating drop is what keeps this from reading as a row of cards */
.panel--drop{ transform:translateY(clamp(40px, 8vh, 110px)); }

.panel__index{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.6rem, 5vw, 4.6rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--hair);
  margin-bottom:-.34em;          /* the numeral sits over the plate */
  margin-left:-.04em;
  position:relative; z-index:2;
  pointer-events:none;
}
.panel__meta{ margin-top:26px; }
.panel__meta h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.35rem, 2.1vw, 1.85rem);
  line-height:1.12;
  letter-spacing:-.01em;
}
.panel__meta h3 i{ font-style:italic; color:var(--brass); }
.panel__meta p{
  margin:12px 0 18px;
  color:var(--mute);
  font-size:14px; line-height:1.7;
  max-width:30ch;
}
.panel__stat{
  font-family:var(--grotesk);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass);
}

/* ---------------------------------------------------------------
   MARQUEE — a slow drift between chapters
   --------------------------------------------------------------- */
.marquee{
  overflow:hidden;
  padding:clamp(28px, 4vw, 56px) 0;
  border-block:1px solid var(--hair-dark);
  background:var(--ink-900);
}
.marquee__row{
  display:flex; gap:.5em;
  width:max-content;
  animation:drift 42s linear infinite;
}
.marquee__row span{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(2rem, 4.6vw, 4.4rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--hair);
  white-space:nowrap;
}
@keyframes drift{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------
   04 — RESIDENCES
   Two photographs per plan, overlapping, moving at different speeds.
   --------------------------------------------------------------- */
.chapter--residences .statement{ margin-bottom:0; }

.plan{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:clamp(48px, 7vw, 132px);
  margin-top:clamp(120px, 17vw, 280px);
}
.plan--mirror .plan__art{ order:2; }
.plan--mirror .plan__text{ order:1; }

.plan__art{ position:relative; padding-bottom:clamp(40px, 7vw, 96px); }
.plate--inset{
  position:absolute;
  right:-9%; bottom:0;
  width:46%;
  z-index:2;
}
.plate--inset .plate__frame{
  aspect-ratio:3/4;
  box-shadow:0 0 0 clamp(8px, 1vw, 16px) var(--ink-900);
}
.plan--mirror .plate--inset{ right:auto; left:-9%; }

.plan__tag{
  display:block;
  font-family:var(--grotesk);
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass);
  margin-bottom:20px;
}
.plan__text h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 4.4vw, 4.2rem);
  line-height:1;
  letter-spacing:-.02em;
}
.plan__text > p{
  margin:clamp(20px, 2.6vw, 32px) 0 0;
  max-width:44ch;
  color:var(--mute);
  font-size:15.5px; line-height:1.78;
}

.spec{ margin:clamp(34px, 4.4vw, 56px) 0 0; }
.spec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:15px 0;
  border-top:1px solid var(--hair-dark);
}
.spec dt{
  font-family:var(--grotesk);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute);
}
.spec dd{
  margin:0;
  font-family:var(--grotesk);
  font-size:15px; font-weight:500; letter-spacing:-.01em;
}

/* ---------------------------------------------------------------
   MATERIALS — the one light room, deliberately off-grid
   --------------------------------------------------------------- */
.chapter--materials{
  background:var(--porcelain);
  color:var(--ink-900);
}
.chapter--materials .eyebrow{ color:var(--mute-dark); }

.hand{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  margin-top:clamp(56px, 8vw, 120px);
}
.hand__item{ margin:0; position:relative; }
.hand__item .plate__frame{ overflow:hidden; background:var(--bone); }
.hand__item img{ position:absolute; inset:-13% 0 auto 0; width:100%; height:126%; object-fit:cover; }
.hand__item--a{ grid-column:1 / span 5; }
.hand__item--a .plate__frame{ aspect-ratio:4/5; }
.hand__item--b{
  grid-column:6 / span 4;
  margin-top:clamp(56px, 12vh, 150px);
  margin-left:-9%;
  z-index:2;
}
.hand__item--b .plate__frame,
.hand__item--c .plate__frame{ box-shadow:0 0 0 clamp(8px, 1vw, 16px) var(--porcelain); }
.hand__item--b .plate__frame{ aspect-ratio:3/4; }
.hand__item--c{ grid-column:10 / span 3; margin-top:clamp(20px, 4vh, 56px); margin-left:-11%; z-index:3; }
.hand__item--c .plate__frame{ aspect-ratio:1/1; }

.hand figcaption{
  padding-top:18px;
  font-size:13.5px; line-height:1.6;
  color:var(--mute-dark);
  max-width:30ch;
}
.hand figcaption b{
  display:block;
  font-family:var(--grotesk);
  font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-900);
  margin-bottom:8px;
}

/* ---------------------------------------------------------------
   05 — AMENITIES
   A list, not a grid of tiles. The photograph follows the cursor.
   --------------------------------------------------------------- */
.services{
  list-style:none;
  margin:clamp(64px, 9vw, 130px) auto 0;
  padding:0;
  max-width:1080px;
  border-bottom:1px solid var(--hair-dark);
}
.service{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) minmax(0, 34ch);
  align-items:baseline;
  gap:clamp(20px, 4vw, 64px);
  padding:clamp(26px, 3.2vw, 46px) 0;
  border-top:1px solid var(--hair-dark);
  transition:border-color .5s var(--expo);
}
.service__num{
  font-family:var(--grotesk);
  font-size:11px; letter-spacing:.2em;
  color:var(--mute);
  transition:color .5s var(--expo);
}
.service h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2.6rem);
  line-height:1.06;
  letter-spacing:-.015em;
  transition:transform .6s var(--expo), color .5s var(--expo);
}
.service p{
  margin:0;
  color:var(--mute);
  font-size:14.5px; line-height:1.7;
}
.service:hover{ border-color:var(--brass-lo); }
.service:hover .service__num{ color:var(--brass); }
.service:hover h3{ transform:translateX(18px); }

.service__ghost{
  position:fixed; top:0; left:0;
  width:clamp(210px, 20vw, 320px);
  aspect-ratio:4/5;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  z-index:60;
  will-change:transform;
}
.service__ghost img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------
   ENQUIRE + FOOT
   --------------------------------------------------------------- */
.chapter--enquire{
  text-align:center;
  padding-bottom:0;
  background:
    radial-gradient(70% 52% at 50% 0%, oklch(0.26 0.07 254 / .8), transparent 68%),
    var(--ink-900);
}
.enquire__note{
  margin:clamp(26px, 3vw, 40px) auto 0;
  max-width:46ch;
  color:var(--mute);
  font-size:15.5px; line-height:1.78;
}

.enquire__form{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:clamp(20px, 3vw, 44px);
  max-width:940px;
  margin:clamp(56px, 7vw, 96px) auto 0;
  text-align:left;
}
.field{ display:grid; gap:10px; flex:1 1 210px; }
.field span{
  font-family:var(--grotesk);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute);
}
.field input, .field select{
  font-family:var(--body);
  font-size:16px;
  color:var(--chalk);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hair);
  border-radius:0;
  padding:12px 2px;
  outline:none;
  width:100%;
  transition:border-color .45s var(--expo);
}
.field input::placeholder{ color:oklch(0.55 0.02 254); }
.field input:focus, .field select:focus{ border-bottom-color:var(--brass); }
.field select option{ color:var(--ink-900); }

.btn{
  position:relative;
  overflow:hidden;
  font-family:var(--grotesk);
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass);
  background:transparent;
  border:1px solid var(--brass);
  border-radius:100px;
  padding:18px 34px;
  cursor:pointer;
  flex:0 0 auto;
  transition:color .5s var(--expo);
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--brass);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .6s var(--expo);
}
.btn:hover{ color:var(--ink-900); }
.btn:hover::before{ transform:scaleX(1); transform-origin:left center; }
.btn span{ position:relative; }

.formnote{
  flex:1 0 100%;
  margin:4px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--brass);
  min-height:1.3em;
}

.foot{
  margin-top:clamp(96px, 13vw, 190px);
  padding:clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
  border-top:1px solid var(--hair-dark);
  text-align:left;
}
.foot__cols{
  display:flex; flex-wrap:wrap;
  gap:clamp(28px, 8vw, 110px);
}
.foot__cols > div{ display:grid; gap:9px; align-content:start; }
.foot__cols span{
  font-family:var(--grotesk);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute); margin-bottom:5px;
}
.foot__cols a{ font-size:14.5px; color:var(--chalk); transition:color .4s var(--expo); }
.foot__cols a:hover{ color:var(--brass); }
.foot__end{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:clamp(48px, 7vw, 96px);
  padding-top:22px;
  border-top:1px solid var(--hair-dark);
  font-size:12px; color:var(--mute);
}

/* ---------------------------------------------------------------
   NAV over a dark page
   --------------------------------------------------------------- */
.nav.is-stuck{
  background:oklch(0.158 0.034 256 / .82);
  border-bottom:1px solid var(--hair-dark);
}
.nav.is-stuck .nav__mark{ color:var(--chalk); }
.nav.is-stuck .pill{
  color:var(--chalk);
  background:oklch(0.95 0.01 250 / .07);
  border-color:var(--hair);
}
.nav.is-stuck .pill:hover{ background:oklch(0.95 0.01 250 / .14); }
.nav.is-stuck .pill--solid{
  background:transparent; color:var(--brass);
  border-color:var(--brass);
}
.nav.is-stuck .pill--solid:hover{ background:var(--brass); color:var(--ink-900); }
.nav.is-stuck .nav__burger{ border-color:var(--hair); background:oklch(0.95 0.01 250 / .07); }
.nav.is-stuck .nav__burger span{ background:var(--chalk); }

::selection{ background:var(--brass); color:var(--ink-900); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1080px){
  .plan, .plan--mirror{ grid-template-columns:1fr; gap:clamp(40px, 8vw, 72px); }
  .plan__art{ width:min(100%, 660px); margin-inline:auto; }
  .plan__text{ max-width:660px; margin-inline:auto; }
  .plan--mirror .plan__art{ order:0; }
  .plan--mirror .plan__text{ order:0; }
  .plate--inset, .plan--mirror .plate--inset{ width:38%; right:0; left:auto; }
  .manifesto__body{ grid-template-columns:1fr; justify-content:start; max-width:56ch; }
  .service{ grid-template-columns:auto 1fr; align-items:start; gap:clamp(16px, 3vw, 32px); }
  .service p{ grid-column:2; margin-top:10px; }
  .hand{ gap:clamp(16px, 3vw, 28px); }
  .hand__item--a{ grid-column:1 / span 7; }
  .hand__item--b{ grid-column:8 / span 5; }
  .hand__item--c{ grid-column:3 / span 6; margin-top:clamp(28px, 6vh, 72px); }
}

@media (max-width:680px){
  .ledger{ grid-template-columns:1fr; gap:0; }
  .ledger__cell{ padding:20px 0; }
  .ledger dd{ font-size:clamp(2.6rem, 14vw, 3.4rem); }
  .hand{ display:grid; grid-template-columns:1fr; gap:clamp(36px, 9vw, 64px); }
  .hand__item--a, .hand__item--b, .hand__item--c{ grid-column:1; margin-top:0; }
  .hand__item--b{ padding-left:14%; }
  .hand__item--c{ padding-right:18%; }
  .plate--inset{ width:44%; right:-4%; }
  .enquire__form{ gap:26px; }
  .field{ flex:1 1 100%; }
  .btn{ width:100%; }
  .foot__end{ flex-direction:column; gap:6px; }
}

/* under 900px the collection is not pinned; it becomes a swipe rail */
.collection__stage.is-free{
  height:auto;
  overflow-x:auto;
  padding-block:var(--room);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.collection__stage.is-free::-webkit-scrollbar{ display:none; }
.collection__stage.is-free .panel{ scroll-snap-align:center; }
.collection__stage.is-free .panel--drop{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .marquee__row{ animation:none; }
  .js [data-lines] .w > i,
  .js [data-fade]{ transform:none; opacity:1; }
  .service__ghost{ display:none; }
}