:root {
  --navy: #14263a; --navy-2: #1d3550; --tide: #5f7f93; --sail: #eef1ef; --sand: #d9e0dc;
  --cedar: #a8693f; --cedar-ink: #7d4a28; --ink: #18222d; --mute: #55606b; --line: color-mix(in oklch, var(--navy) 18%, transparent);
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4.5vw, 64px); --max: 1280px;
  --ease: cubic-bezier(.2,.7,.2,1); --t-short: 260ms; --t-long: 900ms;
  --step--1: clamp(.82rem, .79rem + .15vw, .9rem); --step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); --step-3: clamp(2.3rem, 1.4rem + 4vw, 4.8rem); --step-4: clamp(2.8rem, 1.4rem + 6.4vw, 7rem);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sail); color: var(--ink); font: 400 var(--step-0)/1.6 var(--body); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.h2 { font: 400 var(--step-3)/1.02 var(--display); letter-spacing: -.01em; color: var(--navy); }
.h2 em, .bay-line em { font-style: italic; color: var(--cedar); }
.kicker { margin: 0 0 1rem; font: 500 var(--step--1)/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; }

/* header: wordmark, nav, phone, and the waterline the catboat sails along as you scroll */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gut) 14px; color: #fff; transition: background var(--t-short), color var(--t-short); }
.top.is-solid { background: color-mix(in oklch, var(--sail) 94%, transparent); color: var(--navy); }
.wordmark { display: block; width: 150px; aspect-ratio: 2426 / 810; background: currentColor;
  -webkit-mask: url(/assets/wordmark.svg) center / contain no-repeat; mask: url(/assets/wordmark.svg) center / contain no-repeat; }
.top-mark { display: block; flex: none; }
.top-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); margin-left: auto; font: 500 .92rem/1 var(--body); }
.top-nav a, .top-call { text-decoration: none; padding: 12px 0; }
.top-nav a:hover, .top-call:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.top-call { flex: none; font: 600 .95rem/1 var(--body); white-space: nowrap; border-left: 1px solid currentColor; padding-left: clamp(12px, 2vw, 28px); }
.waterline { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; background: color-mix(in oklch, currentColor 40%, transparent); }
.waterline-boat { position: absolute; bottom: 0; left: 0; width: 22px; aspect-ratio: 1235 / 1099; background: currentColor; translate: calc(var(--p, 0) * (100cqw - 22px)) 0;
  -webkit-mask: url(/assets/boat.svg) center / contain no-repeat; mask: url(/assets/boat.svg) center / contain no-repeat; }
.waterline { container-type: inline-size; }
@media (max-width: 760px) { .top-nav { display: none; } .top-call { margin-left: auto; } .wordmark { width: 118px; } }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--navy); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--navy) 55%, transparent) 0%, transparent 30%, color-mix(in oklch, var(--navy) 35%, transparent) 55%, color-mix(in oklch, var(--navy) 92%, transparent) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gut) clamp(64px, 12vh, 120px); }
.hero-title { font: 400 var(--step-4)/.95 var(--display); letter-spacing: -.015em; max-width: 11ch; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: block; }
.hero-lede { max-width: 46ch; margin: 1.4rem 0 0; color: color-mix(in oklch, #fff 86%, transparent); }
.hero-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(14px, 3vw, 28px); margin: 2rem 0 0; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; background: var(--cedar); color: #fff; text-decoration: none; font-weight: 600;
  white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background var(--t-short); }
.btn:hover { background: var(--cedar-ink); }
.link { font-weight: 600; white-space: nowrap; text-underline-offset: 6px; text-decoration-thickness: 1px; padding: 12px 0; }
@media (max-width: 400px) { .btn { padding: 0 18px; } .hero-actions { gap: 12px; font-size: .92rem; } }
.hero-boat { position: absolute; z-index: 1; right: clamp(-40px, 4vw, 8vw); top: 16vh; width: min(42vw, 520px); margin: 0; opacity: .92; }
.hero-boat .boat { width: 100%; height: auto; overflow: visible; }
.boat path { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.waves { width: 115%; height: 34px; margin: -8px 0 0 -6%; overflow: visible; }
.waves path { fill: none; stroke: #fff; stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; animation: swell 6s linear infinite; }
.waves path + path { opacity: .3; animation-duration: 9s; animation-direction: reverse; }
@keyframes swell { to { transform: translateX(-150px); } }
@media (max-width: 760px) { .hero-boat { width: 58vw; top: 13vh; right: -6vw; opacity: .5; } }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 24px; height: 40px; border: 1.5px solid #fff; border-radius: 12px; translate: -50% 0; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; background: #fff; border-radius: 2px; translate: -50% 0; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 60% { translate: -50% 12px; opacity: 0; } 100% { opacity: 0; } }

/* facts */
.facts { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 14vw, 170px) var(--gut); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.facts-copy p { max-width: 58ch; color: var(--mute); margin: 1.5rem 0 0; }
.facts-list { margin: 0; display: grid; gap: 0; }
.facts-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.facts-list dt { color: var(--mute); font-size: var(--step--1); }
.facts-list dd { margin: 0; font: 400 var(--step-2)/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; } }

/* selected work: horizontal rail, pinned on desktop */
.work { background: var(--navy); color: #fff; padding: clamp(72px, 10vw, 120px) 0; overflow: hidden; }
.work .h2 { color: #fff; }
.work-head { max-width: var(--max); margin: 0 auto 40px; padding: 0 var(--gut); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.work-head p { margin: 0; color: color-mix(in oklch, #fff 70%, transparent); }
.rail { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail-track { display: flex; gap: clamp(16px, 2.4vw, 32px); padding: 0 var(--gut); width: max-content; }
.proj { width: min(46vw, 640px); flex: none; }
.proj-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-2); }
.proj-media img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: transform .6s var(--ease); }
.proj:hover .proj-media img { transform: scale(1.04); }
.proj-text { padding: 20px 4px 0; max-width: 52ch; }
.proj-place { margin: 0 0 6px; font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.proj h3 { font: 400 var(--step-2)/1.1 var(--display); }
.proj-text p:last-child { color: color-mix(in oklch, #fff 76%, transparent); margin: .6rem 0 0; }
@media (max-width: 760px) { .proj { width: 84vw; } .rail { scroll-snap-type: x mandatory; } .proj { scroll-snap-align: center; } }

/* 3D frame to finish */
.frame { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; min-height: 100vh; background: linear-gradient(180deg, var(--sail), var(--sand)); }
.frame-stage { position: relative; height: 100vh; }
.frame-canvas { width: 100%; height: 100%; display: block; }
.frame-photo img { width: 100%; height: auto; }
.frame-photo { position: absolute; left: var(--gut); bottom: 6vh; width: min(30%, 240px); border: 6px solid #fff; box-shadow: 0 18px 40px -20px rgb(20 38 58 / .45); rotate: -3deg; }
.frame-copy { padding: 16vh var(--gut) 16vh 0; align-self: center; }
.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: s; }
.step { position: relative; padding: 14px 0 14px 26px; border-left: 1px solid var(--line); opacity: .38; transition: opacity var(--t-short); }
.step::before { content: ""; position: absolute; left: -5px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--sail); border: 1px solid var(--navy); transition: background var(--t-short); }
.step.is-on { opacity: 1; }
.step.is-on::before { background: var(--cedar); border-color: var(--cedar); }
.step h3 { font: 400 1.5rem/1.2 var(--display); color: var(--navy); }
.step p { margin: .3rem 0 0; color: var(--mute); max-width: 44ch; }
@media (max-width: 860px) {
  .frame { grid-template-columns: 1fr; }
  .frame-stage { height: 56vh; position: sticky; top: 0; z-index: 1; }
  .frame-copy { position: relative; z-index: 2; padding: 0 var(--gut) 12vh; background: linear-gradient(180deg, transparent, var(--sand) 4%); }
  .frame-photo { width: 110px; bottom: 2vh; }
}

/* bay interlude: photo parallax + the catboat crossing */
.bay { position: relative; height: clamp(420px, 80vh, 820px); overflow: hidden; background: var(--navy); color: #fff; }
.bay-photo { position: absolute; inset: -12% 0; }
.bay-photo img { width: 100%; height: 100%; object-fit: cover; }
.bay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklch, var(--navy) 70%, transparent), transparent 55%); }
.bay-sail { position: absolute; inset: auto 0 22%; height: 90px; z-index: 1; }
.bay-boat { position: absolute; left: 0; bottom: 0; width: 96px; aspect-ratio: 1235 / 1099; background: #fff; -webkit-mask: url(/assets/boat.svg) center / contain no-repeat; mask: url(/assets/boat.svg) center / contain no-repeat; }
.bay-line { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 8%; margin: 0; font: 400 var(--step-3)/1.05 var(--display); }
.bay-line em { color: var(--sand); }

/* details mosaic */
.details { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--gut); }
.mosaic { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(180px, 22vw, 300px); gap: clamp(10px, 1.6vw, 20px); }
.m { margin: 0; position: relative; overflow: hidden; background: var(--sand); }
.m img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.m:hover img { transform: scale(1.04); }
.m figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 14px; color: #fff; font-size: var(--step--1); line-height: 1.45;
  background: linear-gradient(0deg, color-mix(in oklch, var(--navy) 88%, transparent), transparent); }
.m-tall { grid-row: span 2; } .m-wide { grid-column: span 2; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } .m-wide { grid-column: span 2; } }
@media (max-width: 460px) { .mosaic { grid-template-columns: 1fr; } .m-tall { grid-row: span 2; } .m-wide { grid-column: auto; } }

/* house lift */
.lift { background: var(--navy-2); color: #fff; }
.lift { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(72px, 10vw, 130px) max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); }
.lift .h2 { color: #fff; }
.lift .h2 em { color: var(--sand); }
.lift-copy p { max-width: 54ch; color: color-mix(in oklch, #fff 80%, transparent); }
.lift .note { font: italic 400 1.25rem/1.4 var(--display); color: var(--sand); }
.lift-video { margin: 0; aspect-ratio: 4 / 5; max-height: 74vh; overflow: hidden; justify-self: end; width: 100%; max-width: 440px; }
.lift-video video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .lift { grid-template-columns: 1fr; } .lift-video { justify-self: start; } }

/* barn timeline */
.barn { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.barn-photo { position: relative; overflow: hidden; }
.barn-photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.barn-copy { position: relative; padding: clamp(72px, 10vw, 130px) var(--gut); background: var(--sand); }
.barn-line { position: absolute; left: calc(var(--gut) + 4px); top: 260px; width: 10px; height: calc(100% - 360px); overflow: visible; }
.barn-line path { fill: none; stroke: var(--cedar); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); }
.barn-time { list-style: none; margin: 3rem 0 0; padding: 0 0 0 40px; display: grid; gap: clamp(40px, 8vh, 90px); }
.yr { display: block; font: 400 var(--step-3)/1 var(--display); color: var(--navy); }
.barn-time p { margin: .6rem 0 0; color: var(--mute); max-width: 40ch; }
@media (max-width: 860px) { .barn { grid-template-columns: 1fr; } .barn-photo { height: 60vh; } }

/* services */
.services { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--gut); }
.svc { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.svc li { padding: 28px 24px 32px 0; border-bottom: 1px solid var(--line); }
.svc svg { width: 48px; height: 48px; fill: none; stroke: var(--cedar); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svc h3 { margin-top: 14px; font: 400 1.5rem/1.2 var(--display); color: var(--navy); }
.svc p { margin: .3rem 0 0; color: var(--mute); }
.partners { margin: 40px 0 0; color: var(--mute); font-size: var(--step--1); max-width: 70ch; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .svc { grid-template-columns: 1fr; } }

/* showroom */
.showroom { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); color: #fff; }
.showroom-copy { padding: clamp(72px, 10vw, 130px) var(--gut); }
.showroom .h2 { color: #fff; } .showroom .h2 em { color: var(--sand); }
.showroom .kicker { color: var(--sand); }
.showroom-copy > p { max-width: 50ch; color: color-mix(in oklch, #fff 80%, transparent); }
.showroom address { font: 400 var(--step-2)/1.2 var(--display); font-style: normal; margin: 1.6rem 0 0; }
.showroom-map { min-height: 420px; }
.showroom-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(.4) contrast(1.05); }
@media (max-width: 860px) { .showroom { grid-template-columns: 1fr; } }

/* footer */
.foot { background: #0e1b2a; color: color-mix(in oklch, #fff 70%, transparent); padding: 56px var(--gut) calc(40px + env(safe-area-inset-bottom, 0px)); font-size: var(--step--1); }
.wordmark-foot { width: 180px; color: #fff; margin-bottom: 18px; }
.foot p { margin: .4rem 0; }
.foot .sig { margin-top: 1.6rem; }

/* reveal (IntersectionObserver adds .in) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .boat path { fill-opacity: 1; stroke-dashoffset: 0; }
  .reveal { opacity: 1; transform: none; }
  .proj-media img { scale: 1; }
}

/* project form (js/form.js -> /api/request) */
.ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding: clamp(72px, 10vw, 130px) var(--gut); max-width: var(--max); margin: 0 auto; }
.ask-copy > p { max-width: 42ch; color: var(--mute); }
.ask-alt a { color: var(--cedar-ink); font-weight: 600; }
.form { display: grid; gap: 18px; align-content: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { font: 500 var(--step--1)/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); padding: 0; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; min-height: 48px; transition: border-color var(--t-short); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cedar); box-shadow: 0 0 0 3px color-mix(in oklch, var(--cedar) 22%, transparent); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.field-inline legend { width: 100%; margin-bottom: 6px; }
.field-inline label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.field-inline input { accent-color: var(--cedar); width: 18px; height: 18px; }
.form-send { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.form-send:disabled { opacity: .6; cursor: progress; }
.form-status { margin: 0; min-height: 1.6em; font-size: var(--step--1); }
.form-status.is-ok { color: var(--navy); } .form-status.is-err { color: #b3261e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
@media (max-width: 860px) { .ask { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.dms-pref { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* plain pages (privacy, 404) */
.plain-top { position: sticky; top: env(safe-area-inset-top, 0px); }
.plain-top .top-call { margin-left: auto; }
.prose { max-width: 70ch; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gut); }
.prose h2 { font: 400 var(--step-2)/1.15 var(--display); color: var(--navy); margin: 2.2rem 0 .6rem; }
.prose a:not(.btn) { color: var(--cedar-ink); }