/* ============================================================
   HOMEPAGE — M2. One continuous scene: every section has its
   own rhythm (no repeated padding), overlaps replace hard cuts,
   photography leads, typography follows.
   ============================================================ */

/* HERO */
#hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--abyss)}
#hero .img{position:absolute;inset:-5% 0;background:center/cover no-repeat;will-change:transform;transform:scale(1.05)}
#hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,62,74,.5),rgba(11,62,74,.32) 30%,rgba(11,62,74,.4) 55%,rgba(11,62,74,.82) 100%)}
#hero .identity{position:absolute;left:0;right:0;top:16vh;z-index:2;text-align:center;color:var(--ivory);
  text-shadow:0 1px 14px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5);will-change:transform,opacity}
#hero .identity .wm-big{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);
  letter-spacing:.5em;text-transform:uppercase;text-indent:.5em;opacity:0}
#hero .identity .place{margin-top:.9rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;
  text-transform:uppercase;opacity:0;color:rgba(250,247,240,.8)}
#hero .content{position:relative;z-index:2;height:100%;max-width:var(--w-max);margin:0 auto;
  padding:0 var(--gutter) 12vh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ivory)}
#hero h1{max-width:11em;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}
#hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
#hero h1 .line span{display:inline-block;transform:translateY(114%)}
#hero .sub{margin-top:1.6rem;max-width:30em;opacity:0;color:rgba(250,247,240,.86);text-shadow:0 1px 14px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5)}
#hero .cta{margin-top:2.3rem;opacity:0;display:flex;gap:1rem;flex-wrap:wrap}
#hero .cue{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:.55rem;color:rgba(250,247,240,.7);font-family:var(--mono);font-size:.56rem;
  letter-spacing:.3em;text-transform:uppercase;opacity:0}
#hero .cue i{width:1px;height:46px;background:rgba(250,247,240,.3);position:relative;overflow:hidden;display:block}
#hero .cue i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--ivory);
  animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{top:-100%}60%{top:0}100%{top:100%}}

/* 01 · PHILOSOPHY — the quietest room in the house: narrow, indented, slow */
#philosophy{background:var(--ivory);padding:clamp(6rem,15vh,11rem) 0 clamp(4rem,9vh,7rem)}
#philosophy .statement{margin-top:2.2rem;font-family:var(--serif);
  font-size:clamp(1.75rem,3.2vw,2.85rem);line-height:1.42;max-width:22em;
  text-indent:clamp(2rem,8vw,6rem)} /* a book's first paragraph */
#philosophy .statement .dim{color:var(--driftwood)}
#philosophy .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;
  margin-top:clamp(3.5rem,8vw,5.5rem)}
#philosophy .item{border-top:1px solid var(--travertine);padding-top:1.4rem}
#philosophy .item:nth-child(2){transform:translateY(1.6rem)}   /* hand-set, not templated */
#philosophy .item:nth-child(3){transform:translateY(3.2rem)}
#philosophy .item h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.03em;margin-bottom:.55rem}
#philosophy .item p{font-size:.92rem;color:var(--charcoal-soft)}
@media(max-width:820px){#philosophy .grid{grid-template-columns:1fr}
  #philosophy .item:nth-child(2),#philosophy .item:nth-child(3){transform:none}}

/* THE CROSSING */
#crossing{height:38vh;min-height:220px;position:relative;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--sand) 20%,var(--shallow) 54%,var(--lagoon) 78%,var(--deep) 100%)}
#crossing .line{position:absolute;left:0;right:0;top:52%;height:1px;background:rgba(250,247,240,.92);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 26px rgba(250,247,240,.55)}
#crossing .lbl{position:absolute;left:var(--gutter);top:calc(52% + 14px);font-family:var(--mono);
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(250,247,240,.85)}

/* 02 · REEF — full-bleed media; the chapter rises INTO it (overlap, no cut) */
#reef{background:var(--deep);color:var(--ivory)}
#reef .media{position:relative;height:78vh;min-height:440px;overflow:hidden}
#reef .media .img{position:absolute;inset:-12% 0;background:center/cover no-repeat;will-change:transform}
#reef .body{position:relative;margin-top:-7rem;padding-bottom:clamp(5rem,11vh,8.5rem)}
#reef .capcard{display:inline-block;background:var(--abyss);border:1px solid rgba(250,247,240,.14);
  padding:.9rem 1.3rem;border-radius:3px;margin-bottom:clamp(2.4rem,6vh,4rem);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
#reef .cols{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2.4rem,6vw,6.5rem);align-items:end}
#reef .cols>div:last-child{padding-bottom:.4rem}
#reef .chapter{color:rgba(250,247,240,.55)}
#reef .chapter::after{background:rgba(250,247,240,.2)}
#reef h2{margin-top:1.2rem}
#reef .lede,#reef .copy{color:rgba(250,247,240,.82)}
#reef .copy{margin-top:1.1rem}
#reef .log{margin-top:clamp(3rem,7vw,4.6rem);border:1px solid rgba(250,247,240,.16);
  display:grid;grid-template-columns:repeat(3,1fr)}
#reef .log>div{padding:1.9rem 1.6rem;border-left:1px solid rgba(250,247,240,.16)}
#reef .log>div:first-child{border-left:none}
#reef .log b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);
  color:var(--shallow);line-height:1.1}
#reef .log span{display:block;margin-top:.6rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,247,240,.6)}
#reef .log .src{grid-column:1/-1;border-left:none;border-top:1px solid rgba(250,247,240,.16);
  font-family:var(--mono);font-size:.6rem;color:rgba(250,247,240,.45);padding:.9rem 1.6rem}
@media(max-width:860px){#reef .cols{grid-template-columns:1fr}
  #reef .log{grid-template-columns:1fr}
  #reef .log>div{border-left:none;border-top:1px solid rgba(250,247,240,.16)}}

#surfacing{height:30vh;min-height:170px;
  background:linear-gradient(180deg,var(--deep),var(--lagoon) 28%,var(--shallow) 56%,var(--sand))}

/* 03 · PROPERTY — gate aperture; small image escapes the section boundary */
#property{background:var(--sand);padding:clamp(4rem,9vh,7rem) 0 clamp(7rem,15vh,11rem)}
#property .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
#property .imgs{position:relative;padding-bottom:14%}
#property .a{width:78%;aspect-ratio:4/5}
#property .a .mask{height:100%}
#property .a img{clip-path:var(--gate)}
#property .b{position:absolute;right:0;bottom:-2%;width:48%;aspect-ratio:1;
  box-shadow:0 32px 64px -30px rgba(14,78,92,.45)}
#property .txt .chapter{margin-bottom:1.2rem}
#property h2{margin-bottom:1.2rem}
#property .list{margin-top:1.9rem;display:grid;gap:.75rem}
#property .list li{display:flex;gap:.9rem;align-items:baseline;font-size:.93rem;color:var(--charcoal-soft)}
#property .list li::before{content:"";width:14px;height:1px;background:var(--lagoon);flex:none;transform:translateY(-4px)}
#property .btn{margin-top:2.1rem}
@media(max-width:900px){#property .grid{grid-template-columns:1fr}
  #property .imgs{margin-bottom:2rem;padding-bottom:18%}}

/* 04 · RESIDENCES — three hand-set layouts, one language */
#residences{background:var(--ivory);padding:clamp(5rem,12vh,9rem) 0}
.sec-head{max-width:52rem;display:grid;gap:1.3rem;margin-bottom:clamp(2.6rem,6vw,4.4rem)}
.sec-head .chapter{margin-bottom:.2rem}
.res-list{display:grid;gap:clamp(4rem,9vw,6.5rem)}

.res-card .floor{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon)}
.res-card h3{font-size:clamp(1.5rem,2.3vw,2.05rem);margin:.5rem 0 1rem}
.res-card h3 .no{font-family:var(--mono);font-size:.55em;color:var(--driftwood);font-weight:400;vertical-align:middle;margin-left:.5rem}
.res-card p.desc{font-size:.95rem;color:var(--charcoal-soft);max-width:32em}
.res-card .spec{margin-top:1.4rem;border-top:1px solid var(--travertine)}
.res-card .spec div{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;
  border-bottom:1px solid var(--travertine);font-size:.85rem}
.res-card .spec dt{color:var(--charcoal-soft)}
.res-card .spec dd{font-family:var(--mono);font-size:.76rem;color:var(--deep);text-align:right}
.res-card .actions{margin-top:1.5rem;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.res-card .mask{border-radius:3px}
.res-card .mask:hover img{transform:scale(1.035)}

/* variant A — the opener: full-width band, content below (the bungalow stands apart) */
.res-card.v-wide{display:block}
.res-card.v-wide .media .mask{aspect-ratio:21/9}
.res-card.v-wide .below{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,4rem);
  margin-top:1.6rem;align-items:start}
/* variant B — editorial pair: tall lead + small offset detail */
.res-card.v-pair{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.8rem,4.5vw,4.4rem);align-items:center}
.res-card.v-pair .media{position:relative;padding-bottom:10%}
.res-card.v-pair .media .m1{aspect-ratio:4/5;width:84%}
.res-card.v-pair .media .m2{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:1;
  box-shadow:0 26px 52px -26px rgba(14,78,92,.4)}
.res-card.v-pair.flip{direction:rtl}
.res-card.v-pair.flip>*{direction:ltr}
.res-card.v-pair.flip .media .m1{margin-left:auto}
.res-card.v-pair.flip .media .m2{right:auto;left:0}
/* variant C — the quiet one: single frame, generous margin (202, renovating) */
.res-card.v-solo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4.5vw,4.4rem);align-items:center}
.res-card.v-solo .media .mask{aspect-ratio:16/10}
@media(max-width:900px){
  .res-card.v-pair,.res-card.v-solo,.res-card.v-wide .below{grid-template-columns:1fr}
  .res-card.v-pair.flip{direction:ltr}
  .res-card.v-pair .media{padding-bottom:16%;margin-bottom:.6rem}
}

.combi{margin-top:clamp(4rem,9vw,6rem);border:1px solid var(--travertine);display:grid;grid-template-columns:repeat(3,1fr)}
.combi>div{padding:2.1rem 1.9rem;border-left:1px solid var(--travertine);
  transition:background .5s var(--ease)}
.combi>div:hover{background:rgba(229,220,200,.35)}
.combi>div:first-child{border-left:none}
.combi .lb{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon)}
.combi b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:.5rem 0}
.combi p{font-size:.87rem;color:var(--charcoal-soft)}
@media(max-width:900px){.combi{grid-template-columns:1fr}
  .combi>div{border-left:none;border-top:1px solid var(--travertine)}
  .combi>div:first-child{border-top:none}}

/* 05 · ISLAND — the bands physically step away from your door */
#island{background:var(--travertine);padding:clamp(5rem,11vh,8.5rem) 0}
#island .band{border-top:1px solid rgba(163,147,124,.4);padding:2rem 0;
  display:grid;grid-template-columns:.9fr 2.1fr;gap:1.6rem}
#island .band:nth-child(2){padding-left:clamp(0rem,3vw,2.5rem)}
#island .band:nth-child(3){padding-left:clamp(0rem,6vw,5rem)}
#island .band:nth-child(4){padding-left:clamp(0rem,9vw,7.5rem)}
#island .band:last-child{border-bottom:1px solid rgba(163,147,124,.4)}
#island .band .when b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400}
#island .band .when span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}
#island .band .places{display:grid;gap:1.1rem}
#island .band .places div b{font-weight:600;font-size:.95rem}
#island .band .places div p{font-size:.88rem;color:var(--charcoal-soft);max-width:44em}
@media(max-width:760px){#island .band{grid-template-columns:1fr;padding-left:0!important}}

/* 06 · OWNERS — words with a real photograph, offset */
#owners{background:var(--deep);color:var(--ivory);padding:clamp(5.5rem,12vh,9rem) 0}
#owners .ow-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2.4rem,6vw,5.5rem);align-items:center}
#owners .chapter{color:rgba(250,247,240,.55)}
#owners .chapter::after{background:rgba(250,247,240,.2)}
#owners .quote{margin-top:1.8rem;font-family:var(--serif);font-size:clamp(1.45rem,2.8vw,2.35rem);
  line-height:1.42;max-width:23em}
#owners .quote .q{color:var(--shallow);font-style:italic}
#owners .attr{margin-top:1.7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(250,247,240,.7)}
#owners .note{margin-top:2.2rem}
#owners .ow-photo{aspect-ratio:4/5;transform:translateY(clamp(0px,3vw,2.4rem)) rotate(.4deg)}
@media(max-width:860px){#owners .ow-grid{grid-template-columns:1fr}
  #owners .ow-photo{max-width:420px;transform:none}}

/* 07 · CROSS-SECTION */
#section-map{background:var(--sand);padding:clamp(5rem,11vh,8.5rem) 0}
#section-map .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.4rem,6vw,5rem);align-items:center}
#section-map h2{margin:1.2rem 0}
#section-map .dist{margin-top:1.9rem}
#section-map .dist div{display:flex;justify-content:space-between;align-items:baseline;padding:.88rem 0;
  border-bottom:1px solid var(--travertine);font-size:.93rem;transition:padding-left .45s var(--ease)}
#section-map .dist div:hover{padding-left:.5rem}
#section-map .dist div span:last-child{font-family:var(--mono);font-size:.76rem;color:var(--deep)}
#section-map svg{width:100%;height:auto;display:block;border-radius:3px;overflow:hidden}
#section-map .svg-note{margin-top:.8rem;font-family:var(--mono);font-size:.6rem;color:var(--driftwood)}
@media(max-width:900px){#section-map .grid{grid-template-columns:1fr}}

/* 08 · RESERVE — the deep end; the page ends underwater, calm */
#reserve-cta{position:relative;color:var(--ivory);text-align:center;
  background:linear-gradient(180deg,var(--sand),var(--shallow) 18%,var(--lagoon) 44%,var(--deep) 72%,var(--abyss));
  padding:clamp(8rem,20vh,14rem) 0 clamp(6rem,13vh,9rem)}
#reserve-cta .inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
#reserve-cta .chapter{color:rgba(250,247,240,.6);justify-content:center}
#reserve-cta .chapter::after{background:rgba(250,247,240,.25)}
#reserve-cta h2{max-width:16em}
#reserve-cta .fine{font-size:.85rem;color:rgba(250,247,240,.66);max-width:36em}