:root {
  --ink: #102c2d;
  --ink-soft: #315050;
  --deep: #073f43;
  --deep-2: #052f34;
  --paper: #f1eee6;
  --paper-2: #e4e0d7;
  --sand: #c9bb9a;
  --aqua: #51d6d3;
  --white: #fffdf7;
  --line: rgba(16, 44, 45, .16);
  --survey: 0;
  --dig: 0;
  --shell: 0;
  --finish: 0;
  --water: 0;
  --detail: 0;
  --scene-x: 0deg;
  --scene-y: 0deg;
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--aqua); color: var(--deep-2); }

.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed;
  width: 340px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 226, 216, .13), rgba(87, 226, 216, 0) 68%);
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover:hover) { body:hover .cursor-glow { opacity: 1; } }

.site-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(22px, 4vw, 66px);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color .35s ease, background .35s ease, backdrop-filter .35s ease, transform .35s ease;
}
.site-header.is-solid {
  color: var(--ink);
  background: rgba(241, 238, 230, .86);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(16,44,45,.12);
}
.site-header.is-hidden { transform: translateY(-105%); }
.brand { display: inline-flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 600; letter-spacing: .22em; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; }
.brand-mark svg { width: 100%; height: 100%; }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; }
.desktop-nav a { position: relative; opacity: .84; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:currentColor; transition:right .28s ease; }
.desktop-nav a:hover::after { right:0; }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 14px; border: 1px solid currentColor; border-radius: 999px; padding: 11px 16px 11px 20px; font-size: 12px; letter-spacing: .05em; }
.header-cta svg { width: 18px; fill:none; stroke:currentColor; stroke-width:1.3; }

.build-story { height: 620vh; background: var(--deep); }
.build-sticky { position: sticky; top: 0; height: 100vh; min-height: 650px; overflow: hidden; background: var(--deep); color: var(--white); }
.scene-wrap { position: absolute; inset: 0; transform: scale(1.04) perspective(1200px) rotateX(var(--scene-x)) rotateY(var(--scene-y)); transition: transform .2s ease-out; transform-origin: 50% 50%; }
.pool-scene { width: 100%; height: 100%; display:block; }
.hero-shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,31,34,.76) 0%, rgba(3,31,34,.28) 43%, rgba(3,31,34,.04) 68%, rgba(3,31,34,.34) 100%), linear-gradient(0deg, rgba(3,25,29,.42), transparent 42%); pointer-events:none; }
.hero-copy { position:absolute; z-index:3; left:clamp(24px,7vw,116px); top:50%; width:min(700px,78vw); transform:translateY(-48%); }
.eyebrow, .section-kicker { margin:0 0 24px; text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600; }
.eyebrow { color:rgba(255,255,255,.64); }
.story-lines { position:relative; min-height:390px; }
.story-line { position:absolute; inset:0 auto auto 0; width:100%; opacity:0; transform:translateY(28px); pointer-events:none; }
.story-line.is-active { pointer-events:auto; }
.story-line h1, .story-line h2, .display-title {
  margin:0;
  font-family:"Italiana", Georgia, serif;
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.92;
}
.story-line h1, .story-line h2 { font-size:clamp(56px,7vw,118px); text-wrap:balance; }
.story-line em, .display-title em { font-style:italic; color:#d9caab; }
.story-line p { max-width:460px; margin:30px 0 0; color:rgba(255,255,255,.72); font-size:clamp(14px,1.1vw,18px); line-height:1.7; }
.stage-rail { position:absolute; z-index:3; right:clamp(21px,4vw,68px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:13px; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.64); }
.stage-track { position:relative; width:1px; height:180px; background:rgba(255,255,255,.25); overflow:hidden; }
.stage-track span { position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; transform:translateY(-100%); }
.stage-number { color:#fff; }
.scroll-cue { position:absolute; z-index:3; left:clamp(24px,7vw,116px); bottom:30px; display:flex; align-items:center; gap:18px; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:rgba(255,255,255,.62); transition:opacity .3s ease; }
.scroll-cue i { position:relative; width:74px; height:1px; background:rgba(255,255,255,.28); overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:#fff; animation:scrollLine 1.8s ease-in-out infinite; transform-origin:left; }
@keyframes scrollLine { 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

.survey-layer { opacity: var(--survey); transform: translateY(calc((1 - var(--survey)) * 28px)); transform-origin:center; }
.dig-layer { opacity: var(--dig); transform: scale(calc(.94 + var(--dig) * .06)); transform-origin:center; }
.shell-layer { opacity: var(--shell); transform: translateY(calc((1 - var(--shell)) * 54px)) scale(calc(.94 + var(--shell) * .06)); transform-origin:center; }
.finish-layer { opacity: var(--finish); transform: translateY(calc((1 - var(--finish)) * 42px)); transform-origin:center; }
.water-layer { opacity: var(--water); transform: translateY(calc((1 - var(--water)) * 90px)); transform-origin:center; }
.final-detail-layer { opacity: var(--detail); transform: translateY(calc((1 - var(--detail)) * 24px)); }
.scene-house, .scene-landscape { transition:filter .3s ease; }
.water-lines { animation:waterMove 7s linear infinite; }
.water-shimmer { animation:shimmer 5s ease-in-out infinite alternate; }
@keyframes waterMove { to { transform:translateX(50px); } }
@keyframes shimmer { to { transform:translate(120px,18px) scale(.9); opacity:.3; } }

.section-shell { width:min(1360px, calc(100% - 48px)); margin-inline:auto; }
.intro-section { padding:clamp(110px,13vw,210px) 0 100px; background:var(--paper); }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:clamp(60px,9vw,150px); align-items:end; }
.section-kicker { color:#7b806f; }
.display-title { font-size:clamp(58px,7.2vw,116px); color:var(--ink); }
.intro-copy { padding-bottom:10px; }
.intro-copy p { margin:0 0 34px; font-size:clamp(16px,1.35vw,21px); line-height:1.75; color:var(--ink-soft); }
.text-link { display:inline-flex; align-items:center; gap:18px; border-bottom:1px solid var(--ink); padding-bottom:8px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.text-link span { transition:transform .25s ease; }
.text-link:hover span { transform:translate(4px,-4px); }
.metrics { margin-top:clamp(80px,10vw,150px); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metrics div { min-height:180px; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:24px clamp(20px,3vw,48px); border-right:1px solid var(--line); }
.metrics div:last-child { border-right:0; }
.metrics strong { font-family:"Italiana",serif; font-size:clamp(48px,5vw,78px); font-weight:400; line-height:1; }
.metrics span { color:#6d7975; font-size:13px; }

.projects-section { padding:120px 0 180px; background:#d9d5cb; }
.section-heading { margin-bottom:70px; }
.projects-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; }
.project-card { min-width:0; }
.project-card--large { grid-row:span 2; }
.project-visual { position:relative; min-height:430px; overflow:hidden; background:#516e68; isolation:isolate; }
.project-card--large .project-visual { height:100%; min-height:900px; }
.project-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%,rgba(4,37,40,.3)); z-index:8; }
.project-meta { display:flex; justify-content:space-between; gap:20px; padding:18px 2px 10px; font-size:12px; color:#68716d; }
.project-meta strong { max-width:290px; color:var(--ink); font-weight:500; text-align:right; }
.visual-water { position:absolute; z-index:3; background:linear-gradient(135deg,#85ded6,#1f9aaa 58%,#096377); box-shadow:inset 0 0 0 10px rgba(245,241,227,.7); }
.visual-house { position:absolute; z-index:4; background:#d4cbbb; box-shadow:0 18px 50px rgba(8,31,32,.25); }
.visual-chair { position:absolute; z-index:6; width:80px; height:140px; border:9px solid #e6decc; border-top-width:20px; transform:skewX(-12deg); }
.visual-tree { position:absolute; z-index:7; width:110px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 35%,#9db36f,#3d6549 65%,#294b3a); box-shadow:0 0 0 22px rgba(42,72,53,.28); }
.visual-cliff { background:linear-gradient(150deg,#b7b7aa 0 44%,#595e58 44% 56%,#d4cfc0 56%); }
.visual-cliff .visual-water { left:15%; right:8%; bottom:10%; height:55%; clip-path:polygon(0 18%,100% 0,100% 100%,0 88%); }
.visual-cliff .visual-house { left:4%; top:9%; width:58%; height:23%; transform:skewY(-4deg); }
.visual-cliff .visual-chair { right:12%; bottom:18%; transform:rotate(-8deg) skewX(-12deg); }
.visual-courtyard { background:linear-gradient(90deg,#a9a18d 0 24%,#e1d8c6 24% 78%,#86917f 78%); }
.visual-courtyard .visual-water { left:19%; right:13%; top:28%; bottom:10%; transform:skewY(-4deg); }
.visual-courtyard .visual-house { inset:0 0 auto 0; height:24%; background:#31504d; }
.visual-courtyard .visual-tree { right:7%; top:12%; }
.visual-pavilion { background:linear-gradient(#78928a 0 52%,#cfc8b7 52%); }
.visual-pavilion .visual-water { left:8%; right:8%; bottom:8%; height:45%; }
.visual-pavilion .visual-house { left:7%; right:7%; top:12%; height:35%; background:linear-gradient(90deg,#263e3c 0 18%,#c7b991 18% 22%,#365b5e 22% 78%,#c7b991 78% 82%,#263e3c 82%); }
.visual-pavilion .visual-chair { left:14%; bottom:14%; transform:scale(.65) rotate(8deg); }

.process-section { padding:clamp(120px,12vw,200px) 0; background:var(--deep); color:var(--white); }
.process-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,10vw,180px); }
.process-heading { position:sticky; top:150px; align-self:start; }
.process-heading .section-kicker { color:#8da9a4; }
.process-heading .display-title { color:var(--white); font-size:clamp(58px,6vw,94px); }
.process-heading p:last-child { max-width:420px; margin:36px 0 0; color:rgba(255,255,255,.62); line-height:1.8; }
.process-list { border-top:1px solid rgba(255,255,255,.15); }
.process-item { display:grid; grid-template-columns:76px 1fr; gap:20px; padding:42px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.process-item > span { color:#78d7d0; font-size:12px; letter-spacing:.18em; }
.process-item h3 { margin:0 0 12px; font-family:"Italiana",serif; font-size:clamp(34px,3vw,52px); font-weight:400; }
.process-item p { max-width:650px; margin:0; color:rgba(255,255,255,.6); line-height:1.7; }

.quote-section { position:relative; min-height:780px; padding:160px 30px; display:grid; place-content:center; text-align:center; overflow:hidden; background:#cfc6b2; }
.quote-section blockquote { position:relative; z-index:2; margin:0; font-family:"Italiana",serif; font-size:clamp(42px,5.2vw,82px); line-height:1.12; letter-spacing:-.035em; }
.quote-section > p { position:relative; z-index:2; margin:36px 0 0; text-transform:uppercase; letter-spacing:.19em; font-size:10px; }
.quote-orbit { position:absolute; inset:0; display:grid; place-items:center; }
.quote-orbit span { position:absolute; width:min(72vw,980px); aspect-ratio:1; border:1px solid rgba(8,57,58,.14); border-radius:50%; animation:orbit 18s linear infinite; }
.quote-orbit span:nth-child(2){ width:min(54vw,720px); animation-duration:14s; animation-direction:reverse; }
.quote-orbit span:nth-child(3){ width:min(34vw,450px); animation-duration:10s; }
.quote-orbit span::after { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--deep); top:8%; left:21%; }
@keyframes orbit { to{ transform:rotate(360deg);} }

.contact-section { padding:clamp(110px,11vw,180px) 0; background:#0d5154; color:var(--white); }
.contact-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(60px,9vw,150px); align-items:start; }
.contact-copy .section-kicker { color:#9bb7b3; }
.contact-copy .display-title { color:var(--white); font-size:clamp(60px,6.5vw,106px); }
.contact-copy > p:nth-of-type(2) { max-width:460px; margin:35px 0; color:rgba(255,255,255,.62); line-height:1.75; }
.contact-details { display:flex; flex-direction:column; gap:8px; color:#bce6e0; font-size:14px; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; padding:clamp(28px,4vw,58px); background:#f2eee5; color:var(--ink); }
.contact-form label { display:flex; flex-direction:column; gap:10px; }
.contact-form label.full { grid-column:1/-1; }
.contact-form label span { text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:#6b7470; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; border:0; border-bottom:1px solid #9ca49f; border-radius:0; background:transparent; padding:8px 0 13px; outline:none; color:var(--ink); resize:vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color:var(--deep); }
.submit-button { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:12px; border:0; background:var(--deep); color:white; padding:20px 22px; cursor:pointer; text-align:left; }
.submit-button b { font-size:20px; font-weight:400; transition:transform .25s ease; }
.submit-button:hover b { transform:translate(4px,-4px); }

.site-footer { padding:80px 0 28px; background:#082f32; color:white; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr .6fr .6fr; gap:50px; padding-bottom:70px; }
.brand--footer { align-self:start; }
.footer-grid p { margin:0; color:rgba(255,255,255,.56); line-height:1.7; }
.footer-grid > div { display:flex; flex-direction:column; gap:10px; font-size:13px; color:rgba(255,255,255,.72); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.44); font-size:11px; }

.reveal { opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.magnetic { will-change:transform; }

@media (max-width: 980px) {
  :root { --header-h:74px; }
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .build-story { height:560vh; }
  .hero-copy { top:52%; width:min(760px,86vw); }
  .story-line h1, .story-line h2 { font-size:clamp(52px,10vw,86px); }
  .intro-grid, .process-layout, .contact-grid { grid-template-columns:1fr; }
  .intro-copy { max-width:650px; }
  .metrics { grid-template-columns:1fr 1fr; }
  .metrics div:nth-child(2) { border-right:0; }
  .metrics div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .projects-grid { grid-template-columns:1fr; }
  .project-card--large { grid-row:auto; }
  .project-card--large .project-visual { min-height:630px; }
  .process-heading { position:static; }
  .process-heading p:last-child { max-width:620px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header { padding-inline:18px; }
  .header-cta { padding:9px 12px; }
  .header-cta span { display:none; }
  .brand { letter-spacing:.16em; }
  .build-sticky { min-height:590px; }
  .scene-wrap { inset:-2% -34%; }
  .hero-shade { background:linear-gradient(90deg,rgba(3,31,34,.8),rgba(3,31,34,.25)),linear-gradient(0deg,rgba(3,25,29,.55),transparent 55%); }
  .hero-copy { left:22px; top:48%; width:calc(100vw - 56px); }
  .story-lines { min-height:380px; }
  .story-line h1, .story-line h2 { font-size:clamp(48px,14.8vw,76px); }
  .story-line p { margin-top:22px; font-size:14px; max-width:88%; }
  .stage-rail { right:13px; }
  .scroll-cue { left:22px; }
  .section-shell { width:min(100% - 34px,1360px); }
  .display-title { font-size:clamp(50px,14vw,76px); }
  .intro-section { padding-top:100px; }
  .metrics { grid-template-columns:1fr; }
  .metrics div { border-right:0; border-bottom:1px solid var(--line); min-height:140px; }
  .metrics div:last-child { border-bottom:0; }
  .projects-section { padding:90px 0 120px; }
  .project-card--large .project-visual, .project-visual { min-height:460px; }
  .project-meta { flex-direction:column; }
  .project-meta strong { text-align:left; }
  .process-item { grid-template-columns:44px 1fr; padding:32px 0; }
  .quote-section { min-height:640px; padding-inline:18px; }
  .contact-form { grid-template-columns:1fr; padding:28px 22px; }
  .contact-form label.full, .submit-button { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .scene-wrap { transform:none !important; }
}

/* Scroll-controlled cinematic video */
.pool-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: var(--deep);
  filter: saturate(.96) contrast(1.02);
  will-change: contents;
}
.video-loader {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  background: #082f32;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 10px;
  transition: opacity .65s ease, visibility .65s ease;
}
.video-loader::before {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.8);
  border-radius: 50%;
  animation: videoLoaderSpin 1.1s linear infinite;
}
.video-loader span { transform: translateY(52px); }
.video-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes videoLoaderSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .pool-video { object-position: 52% center; }
}
.scene-wrap::after {
  content: "AQUAVERA  /  CINEMATIC BUILD";
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(4,32,35,.58);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.72);
  font-size: 8px;
  letter-spacing: .16em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .scene-wrap::after { right: 24%; bottom: 18px; }
}