/* Phenomenal Living v2. Original concept: basalt, plaster, water, one signal color. */
:root {
  --ink: #0f1311;
  --ink-2: #1a201d;
  --paper: #eeefe9;
  --paper-2: #e2e4dc;
  --stone: #a9ada3;
  --mute-dark: #b9bfb6;
  --mute-light: #4b524d;
  --water: #8adbe3;
  --signal: #ff5b2e;
  --signal-ink: #1a0a04;
  --line-dark: rgba(238, 239, 233, 0.22);
  --line-light: rgba(15, 19, 17, 0.18);
  --g: clamp(20px, 4.2vw, 64px);
  --max: 1560px;
  --frame: clamp(10px, 2vw, 28px);
  --frame-paper: #f3efe8;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  color-scheme: dark light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 18px/1.55 var(--sans);
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 0.98; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--signal); color: var(--signal-ink); padding: 12px 18px; min-height: 44px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.label {
  font: 500 16px/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.muted { color: var(--mute-dark); }
.light .muted, .on-light .muted { color: var(--mute-light); }

/* Calls to action. Two clear levels.
   Primary: the solid signal-orange block (one per view): label cell plus square arrow cell; on hover a dark fill
   wipes in from the arrow side and the arrow hands off. Secondary: a warm outlined box in the frame-paper tone
   (ink on light sections) that only tints on hover. Both are 52 to 56px tall, square-cornered, no shimmer.
   Study: Gerax (square, restrained, one solid action), Nothin' on footer.design (label plus arrow chip), DBI. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: stretch; min-height: 56px; padding: 0;
  background: var(--signal); color: var(--signal-ink);
  font: 600 18px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: color .45s var(--ease-in-out), transform .25s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: inset(0 0 0 100%); transition: clip-path .55s var(--ease-in-out);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn__l { display: flex; align-items: center; padding: 0 20px 0 22px; }
.btn__go { position: relative; display: grid; place-items: center; flex: none; width: 56px; overflow: hidden; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); }
.btn__go svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform .5s var(--ease); }
.btn__go svg + svg { transform: translateX(-180%); }
:is(.btn, .textlink, .pick):is(:hover, :focus-visible) .btn__go svg:first-child { transform: translateX(180%); }
:is(.btn, .textlink, .pick):is(:hover, :focus-visible) .btn__go svg + svg { transform: none; }
.btn[disabled] { background: var(--stone); cursor: not-allowed; }
.btn[disabled]::before { display: none; }
.btn--small { min-height: 44px; font-size: 16px; }
.btn--small .btn__l { padding: 0 14px 0 16px; }
.btn--small .btn__go { width: 44px; }
.btn--ghost, .textlink {
  position: relative; display: inline-flex; align-items: stretch; min-height: 52px; padding: 0;
  background: rgba(243, 239, 232, .04); color: var(--frame-paper); box-shadow: inset 0 0 0 1.5px rgba(243, 239, 232, .6);
  font: 600 17px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--ghost::before { display: none; }
.btn--ghost:hover, .btn--ghost:focus-visible, .textlink:hover, .textlink:focus-visible { color: var(--frame-paper); background: rgba(243, 239, 232, .14); box-shadow: inset 0 0 0 1.5px var(--frame-paper); }
:is(.light, .stone) :is(.btn--ghost, .textlink) { color: var(--ink); background: rgba(255, 255, 255, .4); box-shadow: inset 0 0 0 1.5px rgba(15, 19, 17, .6); }
:is(.light, .stone) :is(.btn--ghost, .textlink):is(:hover, :focus-visible) { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* Focus ring: water on dark, deep teal on light sections, ink on the orange closing band. */
:is(.light, .stone) :focus-visible { outline-color: #0b6f7a; }
.close :focus-visible { outline-color: var(--ink); }
.sweep {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
  padding-bottom: 2px;
}
.sweep:hover, .sweep:focus-visible { background-size: 100% 1px; }
.textlink__l, .btn--ghost .btn__l { display: flex; align-items: center; padding: 0 16px 0 18px; }
.textlink .btn__go, .btn--ghost .btn__go { width: 52px; border-left: 1.5px solid rgba(243, 239, 232, .35); }
:is(.light, .stone) :is(.textlink, .btn--ghost) .btn__go { border-left-color: rgba(15, 19, 17, .25); }
.textlink .btn__go svg { width: 20px; height: 20px; }

/* Header. The logo shows whole: tall h and l stems on top, nothing cropped. It shrinks once the page moves.
   A warm-white frame line runs across the top of the header and the logo file starts at the stem tops, so the
   stems meet that line instead of the screen edge. Over the home hero the line is the hero's own frame band. */
:root { --head: 162px; --head-solid: 126px; --rule: min(var(--frame), 10px); }
@media (min-width: 760px) { :root { --head: 184px; --head-solid: 146px; } }
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  transition: background-color .35s var(--ease), transform .45s var(--ease);
}
/* The frame line paints above the logo, so on the home page at scroll zero the logo can tuck its two i dots
   (the top 6% of the file, shadow included) under the band; the stems run on into it, the lettering stays whole. */
.top::before { content: ""; display: block; position: relative; z-index: 2; height: var(--rule); background: var(--frame-paper); }
.top__in { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 24px; padding-top: 0; padding-bottom: 12px; }
.top.is-solid { background: rgba(15, 19, 17, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top.is-hidden { transform: translateY(-100%); }
/* Home, over the framed hero: the header sits inside the warm-white frame; its line is the frame's top band. */
.is-home .top:not(.is-solid) { left: var(--frame); right: var(--frame); --rule: var(--frame); }
.menu { box-shadow: inset 0 var(--rule) 0 var(--frame-paper); }
.is-home .top:not(.is-solid) ~ .menu { box-shadow: inset 0 var(--frame) 0 var(--frame-paper); }
.brand {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px;
  text-decoration: none; line-height: 1; margin-right: auto;
}
.brand img { width: 196px; height: auto; display: block; transition: width .45s var(--ease), transform .45s var(--ease); }
/* Home at scroll zero, desktop: the logo rises by the file's top 6%, so the two i tittles of "living" sit behind the
   warm-white top frame (which paints above the logo). Any scroll brings them back. Phones use the rule further down:
   there the logo keeps clear space under the frame and only the two tittles are masked, so every stem stays whole. */
.is-home .top.at-top .brand img { transform: translateY(-6%); }
.top.is-solid .brand img { width: 140px; }
.hz-intro .hero__index { margin-top: 32px; }
@media (min-width: 760px) { .brand img { width: 236px; } .top.is-solid .brand img { width: 176px; } }
.nav { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  text-decoration: none; font-size: 17px; font-weight: 500; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; padding: 0 4px 0 12px;
  background: none; border: 0; color: inherit; font: 600 17px/1 var(--sans); cursor: pointer;
}
/* Phones: the menu button is a clear 48px box whose center lines up with the "phenomenal living" wordmark (rows 259 to
   305 of the 404-row logo file: center 69.8% down, so 30.2% of the logo height above its bottom edge). The logo is
   capped so it always leaves room beside the button. The warm-white top band shows only at scroll zero; after any
   scroll it turns transparent (its space stays, so the stems never touch the screen edge). */
@media (max-width: 759px) {
  .top { --logo-w: min(196px, calc(100vw - 2 * var(--g) - 140px)); }
  .top.is-solid { --logo-w: min(140px, calc(100vw - 2 * var(--g) - 140px)); }
  .brand img, .top.is-solid .brand img { width: var(--logo-w); }
  .menu-btn {
    align-self: flex-end; margin-bottom: calc(var(--logo-w) * 404 / 600 * .302 - 24px); min-height: 48px; padding: 0 12px 0 14px;
    box-shadow: inset 0 0 0 1.5px rgba(243, 239, 232, .55); transition: margin-bottom .45s var(--ease);
  }
  .is-home .top.at-top .menu-btn { margin-bottom: calc(var(--logo-w) * 404 / 600 * .302 - 24px + 6px); }
  .js .top:not(.at-top)::before { background-color: transparent; }
  .js .top:not(.at-top) ~ .menu { box-shadow: none; }
  /* Phones: on inner pages the logo sits 6px under the frame line. On the home page it sits on the line, so the stems
     meet the frame; at home scroll zero only the two tittles are masked (ellipses at their measured centers in
     logo-mark-1200.png: x 904 and 1010 of 1200, y 22 of 809, shadow included); any scroll removes the mask. */
  body:not(.is-home) .brand { padding-top: 6px; }
  .is-home .top.at-top .brand img {
    transform: translateY(-6px);
    -webkit-mask-image: radial-gradient(ellipse 1.67% 3.21% at 75.33% 2.72%, transparent 99%, #000 100%), radial-gradient(ellipse 1.67% 3.21% at 84.17% 2.72%, transparent 99%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 1.67% 3.21% at 75.33% 2.72%, transparent 99%, #000 100%), radial-gradient(ellipse 1.67% 3.21% at 84.17% 2.72%, transparent 99%, #000 100%);
    mask-composite: intersect;
  }
}
.menu-btn i { position: relative; width: 26px; height: 12px; display: block; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.menu-btn i::before { top: 0; }
.menu-btn i::after { top: 10px; }
.menu-open .menu-btn i::before { top: 5px; transform: rotate(45deg); }
.menu-open .menu-btn i::after { top: 5px; transform: rotate(-45deg); }
.top .btn--small { display: none; }
@media (min-width: 640px) { .top .btn--small { display: inline-flex; transition: opacity .35s var(--ease), visibility .35s; } }
/* Over the home hero the hero's own button is the one action; the header button returns once the page scrolls. */
.is-home .top:not(.is-solid) .btn--small { opacity: 0; visibility: hidden; }
@media (min-width: 1100px) {
  .nav { display: flex; gap: 2px; }
  .top .btn--small { margin-left: 10px; }
}

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 35; background: var(--ink-2); color: var(--paper);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(var(--head) + 8px) var(--g) 32px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-in-out), visibility 0s; }
/* The header logo stays visible above the open menu, so the menu itself carries no second logo. The team frame
   holds a fixed 3:2 box; the photo inside is cropped to fit (object-fit: cover), never stretched. */
.menu__team { margin: 40px 0 0; width: 100%; max-width: 560px; }
.menu__team-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #070908; }
.menu__team-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); }
.menu__team-frame .label { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: rgba(15,19,17,.86); color: var(--paper); }
.menu__team figcaption { color: var(--mute-dark); max-width: 46ch; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu li { overflow: hidden; }
.menu ol a {
  display: flex; align-items: baseline; gap: 16px; min-height: 44px; text-decoration: none;
  font-size: clamp(40px, 9vw, 92px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05;
  transform: translateY(105%); transition: transform .7s var(--ease), color .2s;
}
.menu ol a small { font: 500 16px/1 var(--mono); color: var(--mute-dark); letter-spacing: .04em; }
.menu ol a:hover { color: var(--signal); }
.menu-open .menu ol a { transform: none; }
.menu-open .menu li:nth-child(2) a { transition-delay: .04s; }
.menu-open .menu li:nth-child(3) a { transition-delay: .08s; }
.menu-open .menu li:nth-child(4) a { transition-delay: .12s; }
.menu-open .menu li:nth-child(5) a { transition-delay: .16s; }
.menu-open .menu li:nth-child(6) a { transition-delay: .20s; }
.menu-open .menu li:nth-child(7) a { transition-delay: .24s; }
.menu__sub { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.menu__sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }
.menu__main .btn { margin-top: 28px; }
@media (min-width: 900px) {
  .menu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 110px); align-content: start; align-items: start; }
  .menu__team { margin-top: 12px; justify-self: end; }
}

/* Hero: cinematic scene inside a warm-white frame */
.hero { position: relative; height: 100svh; min-height: 600px; padding: var(--frame); background: var(--frame-paper); }
.hero__frame {
  position: relative; height: 100%; overflow: hidden; isolation: isolate; background: #1c2a3c;
  display: flex; flex-direction: column; justify-content: space-between;
  animation: frame-open 1.2s var(--ease-in-out) both;
}
@keyframes frame-open { from { clip-path: inset(10% 14%); } to { clip-path: inset(0); } }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__art { position: absolute; inset: 0; animation: hero-settle 2.2s var(--ease) both; transform-origin: 50% 70%; }
.hero__art picture, .hero__art img { display: block; width: 100%; height: 100%; max-width: none; }
.hero__art img { object-fit: cover; object-position: 52% 100%; }
@keyframes hero-settle { from { transform: scale(1.1); filter: brightness(.55); } to { transform: none; filter: none; } }
.hero__frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,16,28,.78) 0%, rgba(9,16,28,.68) 38%, rgba(9,16,28,.44) 52%, rgba(9,16,28,0) 68%),
    linear-gradient(0deg, rgba(8,12,12,.72) 0%, rgba(8,12,12,.42) 7%, rgba(8,12,12,0) 18%);
}
.hero__body { padding: calc(var(--head) - 6px) var(--g) 0; text-align: center; }
.hero h1 {
  font-size: clamp(44px, 7.6vw, 132px);
  line-height: .95; letter-spacing: -0.04em; font-weight: 300;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .ln > span { display: inline-block; animation: rise 1.1s .35s var(--ease) both; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .47s; }
@media (min-width: 900px) {
  .hero h1 .ln:nth-child(1) > span { margin-right: 1.4em; }
  .hero h1 .ln:nth-child(2) > span { margin-left: 1.6em; }
}
.hero h1 em { font-style: normal; color: var(--water); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__scope {
  margin: clamp(16px, 2.4vw, 28px) auto 0; max-width: 40ch;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; letter-spacing: -0.01em;
  color: #fff; animation: fade-up .9s .8s var(--ease) both;
}
.hero__scope b { font-weight: 500; }
.hero__act { margin-top: 26px; animation: fade-up .9s .95s var(--ease) both; }
.hero__bottom { padding: 0 var(--g); }
.hero__index {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.28);
}
.hero__index li { animation: fade-up .8s var(--ease) both; }
.hero__index li:nth-child(1) { animation-delay: 1s; }
.hero__index li:nth-child(2) { animation-delay: 1.07s; }
.hero__index li:nth-child(3) { animation-delay: 1.14s; }
.hero__index li:nth-child(4) { animation-delay: 1.21s; }
.hero__index li:nth-child(5) { animation-delay: 1.28s; grid-column: 1 / -1; }
.hero__index a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0;
  text-decoration: none; font-size: 18px; font-weight: 500; color: #fff; position: relative;
}
.hero__index a span { font: 500 16px/1 var(--mono); color: var(--water); }
.hero__index a::after {
  content: ""; position: absolute; left: 0; right: 12px; bottom: 6px; height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.hero__index a:hover::after, .hero__index a:focus-visible::after { transform: scaleX(1); }
.hero__foot { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0 8px; }
/* Inspiration credit: always present with the exact words, set small and dimmed as a photo credit.
   The one deliberate exception to the 16px text floor (foreman review, 2026-10-07); contrast stays above 4.5:1. */
.credit { font-size: 13px; line-height: 1.35; font-weight: 400; letter-spacing: .01em; color: #959c94; max-width: 62ch; margin-top: 6px; }
.light .credit { color: #5d645e; }
.hero__foot p.credit { margin: 0; padding: 4px 8px; background: rgba(9, 12, 11, .8); color: #b4bab2; }
@media (max-width: 759px) {
  .hero__index a { font-size: 17px; }
  .hero h1 { font-size: 40px; }
  .hero__index { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .hero__index li:nth-child(5) { grid-column: auto; }
  .hero__index a { font-size: 17px; min-width: 44px; }
  .hero__index a span { display: none; }
}
/* Portrait screens: words, then the photo band, then the credit on the dark frame. The credit stays off the
   architecture and the band keeps the central glazing and pool in view. */
@media (orientation: portrait) and (max-width: 1023px) {
  .hero__body { order: 0; }
  .hero__media { position: relative; inset: auto; order: 1; flex: 1 1 0; min-height: 0; margin-top: 16px; }
  .hero__media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 30%; background: linear-gradient(180deg, #1c2a3c, rgba(28, 42, 60, 0)); }
  .hero__bottom { order: 2; }
}
/* Portrait: enlarge toward the central glazing and pool (52% across); the sky is what gets cropped. */
@media (orientation: portrait) {
  .hero__art picture { position: relative; }
  .hero__art img { position: absolute; left: 0; bottom: 0; height: 128%; }
}
/* Landscape: let the photo run past the bottom edge so the roofline sits below the words; both wings stay in frame. */
@media (orientation: landscape) {
  .hero__art img { height: 118%; }
  .hero h1 { font-size: clamp(44px, 6.2vw, 112px); }
}
@media (min-width: 760px) {
  .hero__index { grid-template-columns: repeat(5, 1fr); }
  .hero__index li:nth-child(5) { grid-column: auto; }
  .hero__index a { min-height: 64px; font-size: 20px; }
}
@media (max-height: 700px) and (max-width: 759px) {
  .hero__body { padding-top: calc(var(--head) - 8px); }
  .hero h1 { font-size: 36px; }
  .hero__scope { font-size: 17px; margin-top: 10px; }
  .hero__act { margin-top: 14px; }
  .hero__index a { min-height: 44px; font-size: 17px; }
}

/* Second scene: broad landscape with unequal photographs layered over it */
.scene { position: relative; overflow: hidden; color: #fff; padding: clamp(96px, 12vw, 180px) 0 clamp(72px, 8vw, 120px); isolation: isolate; }
.scene__bg { position: absolute; inset: 0; z-index: -2; }
.scene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: saturate(.55); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(62, 60, 64, .78); }
.scene__grid { display: grid; gap: 32px; }
.scene h2 { font-size: clamp(42px, 6.4vw, 104px); letter-spacing: -0.045em; line-height: .96; }
.scene h2 span { display: block; }
.scene h2 span:nth-child(2) { padding-left: 1.2em; }
.scene h2 span:nth-child(3) { padding-left: .5em; color: var(--water); }
.scene__text p { font-size: 19px; max-width: 40ch; color: #eceae6; }
.scene__list { list-style: none; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 24px; }
.scene__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; text-decoration: none; }
.scene__rects { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.scene__rects figure { margin: 0; }
.scene__rects figure:nth-child(2) { grid-column: 1 / -1; order: -1; }
.scene__rects .ph { overflow: hidden; }
.scene__rects img { width: 100%; height: 100%; object-fit: cover; }
.scene__rects figcaption { color: #dcdad6; }
@media (min-width: 1000px) {
  .scene__grid { grid-template-columns: 1.3fr 1fr; align-items: end; column-gap: 80px; }
  .scene__rects { display: block; height: clamp(520px, 52vw, 760px); margin-top: 80px; }
  .scene__rects figure { position: absolute; will-change: transform; }
  .scene__rects figure:nth-child(1) { left: 6%; top: 22%; width: 17%; }
  .scene__rects figure:nth-child(1) .ph { aspect-ratio: 3 / 4; }
  .scene__rects figure:nth-child(2) { left: 30%; top: 0; width: 34%; }
  .scene__rects figure:nth-child(2) .ph { aspect-ratio: 4 / 5; }
  .scene__rects figure:nth-child(3) { right: 4%; top: 34%; width: 25%; }
  .scene__rects figure:nth-child(3) .ph { aspect-ratio: 4 / 3; }
}

/* Sections */
.sec { padding: clamp(80px, 11vw, 168px) 0; position: relative; }
.light { background: var(--paper); color: var(--ink); }
.light .label { color: var(--mute-light); }
.stone { background: var(--paper-2); color: var(--ink); }
.sec__head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 88px); }
.sec__head h2 { font-size: clamp(40px, 6.4vw, 108px); max-width: 15ch; }
.sec__head p { font-size: clamp(19px, 1.6vw, 23px); max-width: 44ch; margin: 0; }
@media (min-width: 1000px) {
  .sec__head { grid-template-columns: 1fr 1fr; align-items: end; }
  .sec__head .label { grid-column: 1 / -1; }
}

/* Owner video location */
.reel { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.reel__frame {
  position: relative; aspect-ratio: 16 / 9; background: #070908; color: var(--paper);
  display: grid; place-items: center; overflow: hidden;
}
.reel__frame::before {
  content: ""; position: absolute; inset: 18px;
  background:
    linear-gradient(var(--water), var(--water)) 0 0 / 28px 2px no-repeat,
    linear-gradient(var(--water), var(--water)) 0 0 / 2px 28px no-repeat,
    linear-gradient(var(--water), var(--water)) 100% 0 / 28px 2px no-repeat,
    linear-gradient(var(--water), var(--water)) 100% 0 / 2px 28px no-repeat,
    linear-gradient(var(--water), var(--water)) 0 100% / 28px 2px no-repeat,
    linear-gradient(var(--water), var(--water)) 0 100% / 2px 28px no-repeat,
    linear-gradient(var(--water), var(--water)) 100% 100% / 28px 2px no-repeat,
    linear-gradient(var(--water), var(--water)) 100% 100% / 2px 28px no-repeat;
}
.reel__frame img.reel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(1) contrast(1.15); }
.reel__frame blockquote { position: relative; z-index: 1; }
.stage__tag { position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 14px; background: rgba(15,19,17,.82); color: var(--paper); font-size: 16px; z-index: 3; }
.reel__frame .rec, .reel__frame .tc { z-index: 1; }
.reel__frame .rec { position: absolute; top: 30px; left: 34px; display: flex; gap: 10px; align-items: center; }
.reel__frame .rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.reel__frame .tc { position: absolute; bottom: 30px; right: 34px; }
.reel__frame blockquote { margin: 0; padding: 0 12%; font-size: clamp(22px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 300; text-align: center; }
.reel__text h2 { font-size: clamp(36px, 4.6vw, 72px); margin-bottom: 20px; }
@media (max-width: 560px) { .reel__frame .tc, .reel__frame .rec { display: none; } .reel__frame blockquote { font-size: 20px; padding: 0 10%; } }
@media (min-width: 1000px) { .reel { grid-template-columns: 1.5fr 1fr; } }

/* Property plan */
.plan { display: grid; gap: clamp(32px, 4vw, 72px); align-items: start; }
.plan__svg { width: 100%; height: auto; overflow: visible; }
.plan__svg .draw { fill: none; stroke: currentColor; stroke-width: 1.4; }
.plan__svg .zone { fill: transparent; stroke: none; transition: fill .4s var(--ease); }
.plan__svg .zone.water { fill: rgba(138,219,227,.32); }
.plan__svg [data-zone].is-on .zone, .plan__svg [data-zone]:hover .zone { fill: rgba(255,91,46,.28); }
.plan__svg [data-zone].is-on .zone.water, .plan__svg [data-zone]:hover .zone.water { fill: rgba(138,219,227,.75); }
.plan__svg text { font: 500 15px var(--mono); fill: currentColor; letter-spacing: .04em; }
.plan__svg .pin { fill: var(--signal); }
.js .plan__svg .draw { stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400); transition: stroke-dashoffset 2.2s var(--ease); }
.js .plan.in .plan__svg .draw { stroke-dashoffset: 0; }
.plan__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); counter-reset: z; }
.plan__list li { border-bottom: 1px solid var(--line-light); }
.plan__list a {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 8px; min-height: 76px;
  text-decoration: none; padding: 12px 0; transition: padding-left .45s var(--ease), color .2s;
}
.plan__list a b { font-weight: 400; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1.05; }
.plan__list a p { grid-column: 2 / 3; margin: 4px 0 0; color: var(--mute-light); font-size: 17px; }
.plan__list a svg { width: 26px; height: 26px; transition: transform .45s var(--ease); }
.plan__list a:hover, .plan__list a:focus-visible, .plan__list a.is-on { padding-left: 14px; }
.plan__list a:hover svg, .plan__list a.is-on svg { transform: translateX(8px); color: var(--signal); }
@media (min-width: 1000px) { .plan { grid-template-columns: 1.25fr 1fr; } .plan__fig { position: sticky; top: 100px; } }

/* Five areas: stacked on phones, tablets and JS-off; chapters of the desktop book otherwise */
.hz-intro h2 { font-size: clamp(40px, 5.6vw, 92px); margin-bottom: 20px; }
.hz-intro p { font-size: 19px; max-width: 34ch; }
.hz-intro { padding-bottom: 40px; }
.hz__panel, .hz__panel figure, .hz__body { min-width: 0; }
.hz__panel { display: grid; gap: 24px; padding: 0 var(--g) 72px; }
.hz__media { margin: 0; }
/* Phones and tablets: the photo or drawing keeps a 4:3 box of its own height, so the caption sits below it
   inside the figure and never runs under the chapter number and heading. */
.hz__media img, .hz__media .art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hz__panel .hz__num { margin: 4px 0 0; font: 300 clamp(64px, 9vw, 150px)/.8 var(--sans); letter-spacing: -0.06em; color: var(--signal); }
.hz__panel h3 { font-size: clamp(44px, 5.4vw, 92px); margin: 16px 0 16px; }
.hz__panel p { max-width: 36ch; font-size: 19px; }
.hz__tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mute-dark); }
.hz__tags li { font-size: 17px; }
.hz__tags li::before { content: "/ "; color: var(--signal); }
.hz__panel .ticks { margin-bottom: 22px; max-width: 30ch; }
figcaption, .cap { font-size: 16px; color: var(--mute-dark); margin-top: 10px; }
.light figcaption, .light .cap { color: var(--mute-light); }
@media (min-width: 1000px) {
  .hz__panel { grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
  .hz__body { align-self: center; }
}

/* Desktop book. Exact owner wording: "only desktop is left and right". One native horizontal
   scroller (main + footer); every top-level section is a chapter. No nested sideways scrollers. */
.book__bar { display: none; }
@media (min-width: 1000px) and (min-height: 640px) {
  .js .is-home { overflow: hidden; }
  .js .is-home .book {
    position: relative; display: flex; height: calc(100vh - 56px); overflow-x: auto; overflow-y: hidden;
    overscroll-behavior: contain; scroll-snap-type: x proximity; scrollbar-width: none; outline: none;
  }
  .js .is-home .book::-webkit-scrollbar { display: none; }
  .js .is-home .book > main { display: flex; flex: none; height: 100%; }
  .js .is-home .chap {
    flex: none; width: 100vw; height: 100%; margin: 0; scroll-snap-align: start; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center; padding: calc(var(--head-solid) + 6px) 0 28px;
  }
  .js .is-home .chap > .wrap { width: 100%; }
  .js .is-home .hero.chap { display: block; min-height: 0; padding: var(--frame); }
  .js .is-home .hero__body { padding-top: calc(var(--head) - 6px); }
  .js .is-home .sec__head { margin-bottom: 40px; }
  .js .is-home .sec__head h2 { font-size: clamp(40px, 5vw, 84px); }
  .js .is-home .scene h2 { font-size: clamp(40px, 4.4vw, 74px); }
  /* Property: text, then the layered photographs, side by side across a wide spread */
  .js .is-home .scene.chap { width: 168vw; flex-direction: row; align-items: center; }
  .js .is-home .scene__grid { flex: 0 0 92vw; max-width: none; grid-template-columns: 1.15fr 1fr; }
  .js .is-home .scene__rects { flex: 0 0 72vw; height: min(78vh, 720px); margin: 0; max-width: none; }
  /* Plan: heading, drawing and list in one row */
  .js .is-home .plan-sec.chap { width: 150vw; }
  .js .is-home .plan-sec > .wrap { max-width: none; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr); gap: 64px; align-items: center; }
  .js .is-home .plan-sec .sec__head { grid-template-columns: 1fr; margin: 0; }
  .js .is-home .plan__fig { position: static; }
  .js .is-home .plan__svg { max-height: calc(100vh - 230px); width: auto; margin: 0 auto; }
  .js .is-home .hz-intro.chap { width: 46vw; padding-left: 0; }
  .js .is-home .hz__panel.chap { width: min(86vw, 1260px); display: grid; padding: calc(var(--head-solid) + 6px) clamp(48px, 6vw, 110px) 36px var(--g); }
  .js .is-home .hz__media { height: calc(100vh - var(--head-solid) - 150px); }
  .js .is-home .hz__panel:nth-child(even) .hz__media { align-self: end; height: calc(100vh - var(--head-solid) - 200px); }
  .js .is-home .hz__media > img, .js .is-home .hz__media .art { aspect-ratio: auto; height: calc(100% - 40px); }
  .js .is-home .hz__num { font-size: clamp(56px, 7vw, 120px); }
  .js .is-home .hz__panel h3 { font-size: clamp(44px, 4.6vw, 80px); }
  .js .is-home .work-sec .sec__head { margin-bottom: 28px; }
  .js .is-home .work-sec .strip .ph { max-height: calc(100vh - 590px); }
  .js .is-home .work-sec .strip figure:nth-child(3) .ph { aspect-ratio: auto; height: calc(100vh - 590px); }
  .js .is-home .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .js .is-home .steps li { grid-template-columns: 1fr; border-bottom: 1px solid var(--line-light); }
  .js .is-home .steps li > div { display: block; }
  .js .is-home .close h2 { font-size: clamp(52px, 8vw, 150px); }
  .js .is-home .foot.chap { border-top: 0; border-left: 1px solid var(--line-dark); }
  .js .is-home .book__bar {
    position: fixed; inset: auto 0 0 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 20px;
    padding: 0 var(--g); background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-dark);
  }
  .book__pick { display: flex; align-items: center; gap: 12px; margin-right: auto; }
  .book__pick .label { color: var(--mute-dark); }
  .book__select {
    min-height: 44px; min-width: 220px; padding: 0 12px; background: var(--ink-2); color: var(--paper);
    border: 1px solid var(--line-dark); border-radius: 0; font: 500 16px var(--sans); cursor: pointer;
  }
  .book__now { margin: 0; font: 500 16px var(--mono); color: var(--mute-dark); white-space: nowrap; }
  .book__step { display: flex; gap: 4px; }
  .book__step button {
    display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; background: none;
    border: 1px solid var(--line-dark); color: inherit; cursor: pointer; transition: border-color .25s;
  }
  .book__step button:hover { border-color: var(--paper); }
  .book__step svg { width: 22px; height: 22px; }
  .hz__progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
  .hz__progress i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(var(--p, 0)); }
}
@media (min-width: 1000px) and (max-width: 1239px) and (min-height: 640px) { .book__pick .label { display: none; } }
.art { display: grid; place-items: center; background: #13201c; color: var(--paper); }
.art svg { width: 86%; height: auto; }
.art svg .draw { fill: none; stroke: currentColor; stroke-width: 1.3; }
.art svg .fillw { fill: rgba(138,219,227,.45); }
.art svg .fills { fill: rgba(255,91,46,.85); }
.art--care svg { width: 94%; }
.art svg .route { stroke-dasharray: 3 9; stroke: var(--water); stroke-width: 2; }
.art svg .thin { stroke-width: 1; opacity: .7; }
.art svg .bgfill { fill: #13201c; }
.art svg .dogfill { fill: #13201c; }
.art svg .lg { font: 500 21px var(--mono); fill: currentColor; letter-spacing: .04em; }
.art svg .pin-n { font: 700 17px var(--mono); fill: var(--signal-ink); text-anchor: middle; }

/* Completed work: unequal-scale sequence with one oversized frame */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 72vw; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--g) 12px; scrollbar-width: thin; }
.strip figure { margin: 0; scroll-snap-align: center; }
.strip .ph { overflow: hidden; aspect-ratio: 4 / 5; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }
@media (min-width: 1000px) {
  .strip { grid-auto-flow: row; grid-template-columns: 1fr 1.4fr 2.9fr 1.4fr 1fr; grid-auto-columns: auto; align-items: end; overflow: visible; gap: clamp(14px, 1.6vw, 24px); }
  .strip figure:nth-child(3) .ph { aspect-ratio: 4 / 3; }
  .strip figure:nth-child(1) .ph, .strip figure:nth-child(5) .ph { aspect-ratio: 3 / 4; }
}

.care-grid { display: grid; gap: 40px; }
.care-year { display: grid; gap: 40px; }
.care-year figure { margin: 0; max-width: 560px; }
@media (min-width: 900px) { .care-year { grid-template-columns: minmax(0, 520px) 1fr; align-items: start; } }
.care-grid h2 { font-size: clamp(40px, 6vw, 96px); }
.ticks { list-style: none; margin: 0; padding: 0; columns: 1; }
.ticks li { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 19px; line-height: 1.35; break-inside: avoid; display: flex; align-items: flex-start; gap: 14px; }
/* Checkbox bullet: a square box with a drawn check, one element, no stacked glyphs. */
.ticks li::before {
  content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--water);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%238adbe3' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.light .ticks li { border-color: var(--line-light); }
.light .ticks li::before {
  border-color: #c2410c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23c2410c' stroke-width='2'/%3E%3C/svg%3E");
}

/* Care plans: four rows, each with monthly and quarterly paths into the local questionnaire */
.plans { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.plan-row { display: grid; gap: 16px 32px; padding: 28px 0; border-bottom: 1px solid var(--line-light); }
.plan-row .label { color: var(--mute-light); }
.plan-row h3 { font-size: clamp(32px, 3.6vw, 56px); letter-spacing: -0.035em; }
.plan-row p { margin: 10px 0 0; max-width: 46ch; color: var(--mute-light); }
.plan-row__go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: center; }
.pick {
  position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: stretch;
  min-height: 56px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px;
  box-shadow: inset 0 0 0 1px var(--ink); transition: color .45s var(--ease-in-out);
}
.pick > span:first-child { display: flex; align-items: center; padding: 0 12px 0 16px; }
.pick .btn__go { width: 48px; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: inset(0 0 0 100%); transition: clip-path .55s var(--ease-in-out); }
.pick:hover, .pick:focus-visible { color: var(--paper); }
.pick:hover::before, .pick:focus-visible::before { clip-path: inset(0 0 0 0); }
@media (max-width: 899px) { .plan-row__go { grid-template-columns: 1fr; max-width: 420px; } }
@media (min-width: 900px) { .plan-row { grid-template-columns: 64px minmax(0, 1.4fr) minmax(300px, 1fr); align-items: center; } }
@media (min-width: 900px) { .care-grid { grid-template-columns: 1fr 1fr; } .ticks.two { columns: 2; column-gap: 40px; } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: minmax(70px, 1fr) 3fr; gap: 18px; padding: 28px 0; border-top: 1px solid var(--line-light); }
.steps li:last-child { border-bottom: 1px solid var(--line-light); }
.steps li::before { counter-increment: s; content: "0" counter(s); font-size: clamp(44px, 6vw, 104px); font-weight: 300; letter-spacing: -0.05em; line-height: .9; color: var(--signal); }
.steps h3 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 10px; letter-spacing: -0.03em; }
.steps p { margin: 0; max-width: 52ch; }
@media (min-width: 900px) { .steps li { grid-template-columns: 1fr 1.2fr 2fr; } .steps li > div { display: contents; } .steps p { grid-column: 3; } }

/* Closing CTA */
.close { padding: clamp(96px, 14vw, 220px) 0; background: var(--signal); color: var(--signal-ink); overflow: hidden; }
.close h2 { font-size: clamp(52px, 11vw, 200px); letter-spacing: -0.06em; max-width: 12ch; }
.close p { font-size: clamp(19px, 1.8vw, 26px); max-width: 40ch; margin: 28px 0 32px; }
.close .btn { background: var(--ink); color: var(--paper); }
.close .btn::before { background: var(--paper); }
.close .btn:hover, .close .btn:focus-visible { color: var(--ink); }

/* Inner page hero */
.phero { position: relative; padding: calc(var(--head) + 4px) 0 0; overflow: hidden; }
.phero__grid { display: grid; gap: 28px; padding-bottom: clamp(40px, 5vw, 72px); }
.phero h1 { font-size: clamp(54px, 10vw, 176px); letter-spacing: -0.055em; line-height: .9; }
.phero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.phero h1 .ln > span { display: block; animation: rise 1s var(--ease) both; }
.phero h1 .ln:nth-child(2) > span { animation-delay: .1s; }
.phero .lede { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 36ch; color: var(--mute-dark); margin: 0; animation: fade-up .9s .35s var(--ease) both; }
.phero .lede b { color: var(--paper); font-weight: 500; }
.phero__start { margin-top: 18px; animation: fade-up .9s .45s var(--ease) both; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; animation: fade-up .7s var(--ease) both; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.phero__media { position: relative; height: clamp(320px, 62vh, 760px); overflow: hidden; }
.phero__media img, .phero__media .art { width: 100%; height: 115%; object-fit: cover; animation: hero-settle 2s var(--ease) both; }
.phero__media figcaption { position: absolute; left: var(--g); right: var(--g); bottom: 16px; margin: 0; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.phero__media figcaption.credit { right: auto; max-width: min(62ch, calc(100% - 2 * var(--g))); padding: 6px 10px; background: rgba(9, 12, 11, .72); color: #aab0a8; text-shadow: none; }
@media (min-width: 1000px) { .phero__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* Split choice (homes) */
.choice { display: grid; gap: 2px; }
.choice a {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px;
  padding: clamp(24px, 3vw, 44px); text-decoration: none; background: var(--ink-2); color: var(--paper); overflow: hidden; isolation: isolate;
}
.choice a::before { content: ""; position: absolute; inset: 0; background: var(--signal); z-index: -1; clip-path: circle(0 at 100% 100%); transition: clip-path .8s var(--ease-in-out); }
.choice a:hover::before, .choice a:focus-visible::before { clip-path: circle(150% at 100% 100%); }
.choice a:hover, .choice a:focus-visible { color: var(--signal-ink); }
.choice b { font-size: clamp(44px, 6vw, 104px); font-weight: 300; letter-spacing: -0.05em; line-height: .95; }
.choice p { max-width: 34ch; font-size: 19px; margin: 18px 0 0; }
.choice .go { display: flex; justify-content: space-between; align-items: center; }
.choice .go svg { width: 40px; height: 40px; transition: transform .5s var(--ease); }
.choice a:hover .go svg { transform: translateX(10px) rotate(-45deg); }
@media (min-width: 900px) { .choice { grid-template-columns: 1fr 1fr; } .choice a { min-height: 460px; } }

/* Feature rows */
.facts { display: grid; gap: 0; }
.fact { display: grid; gap: 12px; padding: 32px 0; border-top: 1px solid var(--line-light); }
.dark .fact, .fact.dark { border-color: var(--line-dark); }
.fact h3 { font-size: clamp(28px, 3vw, 46px); letter-spacing: -0.03em; }
.fact p { margin: 0; max-width: 56ch; }
@media (min-width: 900px) { .fact { grid-template-columns: 1fr 1.4fr; gap: 40px; } }

/* Media pair */
.pair { display: grid; gap: clamp(16px, 2vw, 28px); }
.pair figure { margin: 0; }
.pair .ph { overflow: hidden; }
.pair img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .pair { grid-template-columns: 1.3fr 1fr; align-items: end; } .pair .tall { aspect-ratio: 4 / 5; } }

/* Before / after */
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; background: #000; --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.ba__line::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a04' stroke-width='2'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba input:focus-visible + .ba__line::after { outline: 3px solid var(--water); outline-offset: 3px; }
.ba__tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.ba__tags span { background: rgba(15,19,17,.78); color: var(--paper); padding: 8px 10px; }
.ba-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .ba-grid { grid-template-columns: 1fr 1fr; } }

/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button {
  min-height: 48px; padding: 0 18px; background: none; border: 1px solid currentColor; color: inherit;
  font: 500 17px var(--sans); cursor: pointer; transition: background-color .25s, color .25s;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.works { display: grid; gap: clamp(20px, 2.5vw, 36px); grid-template-columns: 1fr; }
.works figure { margin: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.works figure.is-out { display: none; }
.works .ph { overflow: hidden; aspect-ratio: 4 / 3; }
.works img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.works figure:hover img { transform: scale(1.04); }
.works figcaption b { display: block; color: var(--ink); font-weight: 500; font-size: 19px; }
@media (min-width: 700px) { .works { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(3, 1fr); } .works figure:nth-child(4n+1) { grid-column: span 2; } .works figure:nth-child(4n+1) .ph { aspect-ratio: 16 / 9; } }

/* Approach timeline */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-light); }
.timeline__bar { position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--p, 1) * 100%); background: var(--signal); }
.timeline .fact { border-top: 0; padding: 0 0 56px; }

/* Form */
.form { display: grid; gap: 36px; max-width: 980px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.03em; font-weight: 300; margin-bottom: 16px; padding: 0; }
.opts { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .opts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .opts.three { grid-template-columns: repeat(3, 1fr); } }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 16px;
  border: 1px solid var(--line-light); cursor: pointer; font-size: 18px; transition: background-color .2s, border-color .2s;
}
.opt span::before { content: ""; flex: 0 0 22px; height: 22px; border: 1.5px solid var(--ink); transition: background-color .2s, box-shadow .2s; }
.opt input[type="radio"] + span::before { border-radius: 50%; }
.opt input:checked + span { border-color: var(--ink); background: #fff; }
.opt input:checked + span::before { background: var(--signal); box-shadow: inset 0 0 0 3px #fff; }
.opt input:focus-visible + span { outline: 3px solid #0b6f7a; outline-offset: 2px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 18px; }
.field input, .field textarea, .field select {
  font: 400 18px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line-light);
  min-height: 56px; padding: 12px 14px; border-radius: 0; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid #0b6f7a; outline-offset: 0; }
.row2 { display: grid; gap: 20px; }
@media (min-width: 760px) { .row2 { grid-template-columns: 1fr 1fr; } }
.notice { border-left: 4px solid var(--signal); padding: 16px 20px; background: #fff; max-width: 70ch; }
.notice p:last-child { margin: 0; }
.err { color: #a3260b; font-weight: 600; min-height: 1.5em; margin: 0; }
/* Visit request form: smaller legends, an off-screen honeypot field (same idea as phenomenalpoolscapes.com/book). */
#visit legend { font-size: clamp(22px, 2vw, 28px); }
#visit .cap { margin: 8px 0 0; color: var(--mute-light); }
.hp { position: absolute; left: -9999px; width: 300px; }
.hp input { display: block; width: 100%; min-height: 56px; }
/* On the visit request page the header scrolls away with the page and never slides back over a field being filled. */
.is-form .top { position: absolute; }
.is-form .top .btn--small { display: none; }
.saved dl { display: grid; gap: 0; margin: 0; }
.saved dl div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line-light); }
.saved dt { font: 500 16px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute-light); }
.saved dd { margin: 0; font-size: 20px; }
@media (min-width: 760px) { .saved dl div { grid-template-columns: 220px 1fr; } }

/* Prose */
.prose { max-width: 68ch; font-size: 19px; }
.prose h2 { font-size: clamp(32px, 3.6vw, 52px); margin: 56px 0 18px; letter-spacing: -0.03em; }
.prose h3 { font-size: 26px; margin: 32px 0 10px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose code { font: 16px var(--mono); background: rgba(0,0,0,.06); padding: 2px 5px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 17px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-light); vertical-align: top; }

/* Footer */
.foot { padding: 72px 0 40px; border-top: 1px solid var(--line-dark); }
.foot__logo { width: 280px; height: auto; margin-bottom: 48px; }
@media (min-width: 900px) { .foot__logo { width: 360px; } }
.foot__big { font-size: clamp(48px, 9vw, 160px); font-weight: 300; letter-spacing: -0.06em; line-height: .9; margin-bottom: 48px; }
.foot__cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.foot__cols ul { list-style: none; margin: 0; padding: 0; }
.foot__cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.foot__legal { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--mute-dark); font-size: 16px; }
@media (min-width: 900px) { .foot__cols { grid-template-columns: repeat(4, 1fr); } }

/* Phones only: quick-contact bar, same three actions as the phenomenalpoolscapes.com .mbar (Call, Text, Book a
   visit, the booking path wider). Square cells to match this site. Below the open menu (35) and the header (40).
   Body padding and the hero height make room for it, so it never covers footer text or the hero credit. */
.pbar { display: none; }
@media (max-width: 759px) {
  :root { --pbar: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--pbar); }
  /* The visit request page has no quick-contact bar (its own send button is the one action), so no bottom reserve. */
  body.is-form { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .hero { height: calc(100svh - var(--pbar)); }
  .pbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 33;
    display: grid; grid-template-columns: 1fr 1fr 1.8fr; gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 19, 17, .96); border-top: 1px solid var(--line-dark);
  }
  .pbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 8px;
    font: 600 17px/1 var(--sans); color: var(--frame-paper); text-decoration: none; background: rgba(243, 239, 232, .04); box-shadow: inset 0 0 0 1.5px rgba(243, 239, 232, .55);
  }
  .pbar a svg { width: 20px; height: 20px; flex: none; }
  .pbar .pbar__book { background: var(--signal); color: var(--signal-ink); box-shadow: none; }
  .pbar a:active { transform: scale(.98); }
}

/* Scroll reveal: only hides when JS is running and motion is allowed */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-in-out); }
.js [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; }
  .js .plan__svg .draw { stroke-dashoffset: 0; }
  .js .stage__slide img, .js .stage__slide .art { transform: none; }
  .months { flex-wrap: wrap; width: auto; }
  .months span[aria-hidden="true"] { display: none; }
}