/* =========================================================
   Sections after the hero
   ========================================================= */
main > section{position:relative;z-index:3}
.sec-head{max-width:1180px;margin:0 auto clamp(36px,5vw,64px);display:grid;gap:14px}
.sec-head h2,.idea-copy h2,.lantern-copy h2,.register h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,80px);line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted)}

/* 01 · idea: tall track, pinned stage, objects at different depths */
.idea{height:260vh;height:260lvh;--q:0;
  background:linear-gradient(180deg,var(--ink) 0%,var(--green-900) 35%,#06281b 60%,var(--green-900) 85%,var(--ink) 100%)}
.idea-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:grid;place-items:center;padding-inline:var(--pad)}
.idea-stage::before{content:"";position:absolute;left:50%;top:50%;width:80vmax;height:80vmax;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(201,162,74,calc(.05 + var(--q) * .16)),rgba(201,162,74,0));pointer-events:none}
.idea-copy{position:relative;z-index:2;max-width:640px;text-align:center;display:grid;gap:18px;justify-items:center;
  opacity:clamp(0,calc(var(--q) * 5 - .4),1);transform:translateY(calc((.35 - var(--q)) * 60px))}
.idea-copy p{margin:0;color:#d4ded8;max-width:52ch}
.float{position:absolute;margin:0;z-index:1;display:grid;justify-items:center;gap:10px;will-change:transform;
  transform:translateY(calc((.5 - var(--q)) * var(--d))) rotate(calc((var(--q) - .5) * var(--r)))}
.float img{width:var(--w);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.float figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit);text-align:center;
  padding:7px 11px;border:1px solid var(--line);border-radius:4px;background:rgba(2,11,7,.6)}
.float figcaption span{display:block;color:var(--muted);letter-spacing:.06em}
.f1{left:6%;top:12%;--w:clamp(110px,15vw,230px);--d:70vh;--r:40deg}
.f2{right:5%;top:8%;--w:clamp(120px,17vw,260px);--d:120vh;--r:-18deg}
.f3{left:10%;bottom:6%;--w:clamp(100px,13vw,200px);--d:150vh;--r:25deg}
.f4{right:9%;bottom:10%;--w:clamp(110px,15vw,230px);--d:90vh;--r:-35deg}

/* 02 · villas */
.villas{padding-block:clamp(90px,12vw,170px);padding-inline:var(--pad);background:var(--ink)}
.villa{max-width:1180px;margin:0 auto clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.villa.flip .villa-img{order:2}
.villa-img{overflow:hidden;border-radius:4px;border:1px solid var(--line)}
.villa-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.villa:hover .villa-img img{transform:scale(1.035)}
.villa-body{display:grid;gap:12px;min-width:0}
.villa-body h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1;color:var(--gold-lit)}
.villa-body p{margin:0;color:#d4ded8}
.villa-body .tr{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.villa-top{display:flex;align-items:center;justify-content:space-between}
.num{font-family:var(--display);font-size:22px;color:var(--gold);letter-spacing:.1em}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:99px;border:1px solid}
.chip.ok{color:#8fe3be;border-color:rgba(111,227,180,.4);background:rgba(30,107,79,.3)}
.chip.held{color:var(--gold-lit);border-color:var(--line);background:rgba(201,162,74,.08)}
.chip.later{color:var(--muted);border-color:rgba(154,169,161,.35)}
.spec{margin:8px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.spec div{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:0;font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums}
.villa-body .price{font-family:var(--display);font-size:22px;color:var(--gold-lit)}

/* 03 · lantern: the one turning object */
.lantern{height:300vh;height:300lvh;--q:0;background:var(--ink)}
.lantern-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:grid;place-items:center;perspective:1200px}
.lantern-canvas,.lantern-still{position:absolute;left:50%;top:50%;width:min(78vh,92vw);height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.lantern-canvas{opacity:0;transition:opacity .6s}
.lantern.ready .lantern-canvas{opacity:1}
.lantern.ready .lantern-still{opacity:0}
.lantern-still{transition:opacity .6s}
.ring{position:absolute;left:50%;top:50%;width:min(64vh,84vw);height:min(64vh,84vw);transform-style:preserve-3d;z-index:1;
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(calc(var(--q) * 300deg))}
.ring span{position:absolute;left:50%;top:50%;font-family:var(--display);font-size:clamp(18px,2.4vh,28px);color:var(--gold-lit);
  transform-origin:0 0;white-space:pre}
.lantern-copy{position:absolute;z-index:2;padding-inline:var(--pad);max-width:560px}
.l1{left:0;top:16vh;opacity:clamp(0,min(calc(var(--q) * 6),calc((.55 - var(--q)) * 6)),1)}
.l2{right:0;bottom:14vh;text-align:right;opacity:clamp(0,calc((var(--q) - .45) * 5),1)}
.l2 p{margin:0;color:#d4ded8;font-size:clamp(16px,1.5vw,20px)}
.l1 h2{font-size:clamp(34px,4.4vw,64px)}

/* 04 · estate plan */
.estate{padding-block:clamp(90px,12vw,170px);padding-inline:var(--pad);background:linear-gradient(180deg,var(--ink),var(--green-900))}
.plan-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.plan{width:100%;height:auto;display:block}
.plan .site{fill:#03130c;stroke:var(--line)}
.plan .tree{fill:#0d3a28}
.plan .cypress{stroke:#145238;stroke-width:6;stroke-dasharray:2 10;stroke-linecap:round}
.plan .water{fill:var(--jade)}
.plan .court{fill:none;stroke:var(--gold);stroke-width:1.5}
.plan .arch{fill:none;stroke:var(--gold-lit);stroke-width:2}
.plan .lot rect{fill:#0a2a1d;stroke:var(--gold);stroke-width:1.2;transition:fill .3s}
.plan .lot .lot-court{fill:none;stroke:rgba(240,216,154,.6);stroke-dasharray:3 3}
.plan .lot text{fill:var(--gold-lit);font-family:var(--display);font-size:18px}
.plan .lot{cursor:pointer;outline:none}
.plan .lot:hover rect:first-child,.plan .lot:focus-visible rect:first-child,.plan .lot.on rect:first-child{fill:rgba(201,162,74,.28)}
.plan .lbl,.plan .north text,.plan .scale text{fill:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.plan .north path{fill:var(--gold)}
.plan .scale line{stroke:var(--muted)}
.plan-card{border:1px solid var(--line);border-radius:6px;padding:24px;background:rgba(2,11,7,.7);display:grid;gap:10px;min-width:0}
.plan-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,42px);color:var(--gold-lit)}
.plan-card p{margin:0;color:#d4ded8}

/* 05 · materials */
.materials{padding-block:clamp(90px,12vw,150px);padding-inline:var(--pad);background:var(--green-900)}
.mat{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.mat li{background:var(--green-900);padding:26px 22px;display:grid;gap:8px;align-content:start;min-width:0}
.mat b{font-family:var(--display);font-weight:400;font-size:26px;color:var(--gold-lit)}
.mat span{color:#cdd8d2;font-size:15px}

/* 06 · register */
.register{padding-block:clamp(90px,12vw,170px);padding-inline:var(--pad);
  background:radial-gradient(70% 60% at 20% 30%,rgba(30,107,79,.35),transparent 70%),var(--ink)}
.reg-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.reg-inner > div{display:grid;gap:18px}
.reg-inner > div p{margin:0;color:#d4ded8;max-width:44ch}
.reg-form{display:grid;gap:16px;border:1px solid var(--line);border-radius:8px;padding:clamp(20px,3vw,32px);background:rgba(2,11,7,.6)}
.reg-form label{display:grid;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.reg-form label em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0}
.reg-form input,.reg-form select{font-family:var(--body);font-size:16px;letter-spacing:0;text-transform:none;color:var(--cream);
  background:#020b07;border:1px solid rgba(201,162,74,.35);border-radius:4px;padding:12px 14px;min-height:48px}
.reg-form input:focus,.reg-form select:focus{outline:none;border-color:var(--gold-lit);box-shadow:0 0 0 3px rgba(201,162,74,.2)}
.reg-form input[aria-invalid="true"]{border-color:#d98c6a}
.reg-form .btn{justify-self:start;border:0;cursor:pointer;margin-top:6px}
.form-note{margin:0;min-height:1.4em;font-size:15px;color:#cdd8d2}
.form-note.ok{color:#8fe3be}.form-note.err{color:#e8a78a}

/* footer */
.foot{position:relative;z-index:3;border-top:1px solid var(--line);padding:40px var(--pad) calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;justify-items:start;background:var(--ink)}
.foot p{margin:0;color:var(--muted);font-size:14px;max-width:70ch}
.foot a{color:var(--gold-lit)}

@media (max-width:860px){
  .villa,.villa.flip{grid-template-columns:minmax(0,1fr)}
  .villa.flip .villa-img{order:0}
  .plan-wrap,.reg-inner{grid-template-columns:minmax(0,1fr)}
  .mat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .float figcaption{display:none}
  /* phones: objects stay in the bands above and below the copy */
  .f1{left:-3%;top:10%;--w:96px;--d:22vh}
  .f2{right:-5%;top:7%;--w:110px;--d:34vh}
  .f3{left:2%;bottom:5%;top:auto;--w:92px;--d:26vh}
  .f4{right:0;bottom:9%;top:auto;--w:104px;--d:20vh}
  .idea-copy{padding-block:22vh}
  .l1{top:12vh}.l2{bottom:10vh}
}
@media (max-width:520px){ .mat{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){
  .idea,.lantern{height:auto}
  .idea-stage,.lantern-stage{position:relative;min-height:100vh}
  .float,.idea-copy,.ring{transform:none!important}
  .idea-copy,.l1,.l2{opacity:1}
}