/* Shared Home-only composition. System, Operations and About do not load this. */
/* The founder's full opening, not a condensed substitute. Three paragraphs give
   identity, physical continuity and the owner's outcome their own reading beat. */
.hero{min-height:max(800px,min(94svh,1000px));height:auto;--surface-deep:#133026;--scrim-rgb:19 48 38}
.hero-copy{height:auto;min-height:inherit;padding-block:calc(var(--header-height) + 56px) 58px}
.hero::after{background:linear-gradient(90deg,rgb(var(--scrim-rgb)/96%) 0%,rgb(var(--scrim-rgb)/92%) 28%,rgb(var(--scrim-rgb)/74%) 43%,transparent 64%)}
.hero h1{font-size:clamp(50px,4.2vw,72px);line-height:1.09;max-width:650px;letter-spacing:0;text-wrap:initial}
.hero h1{position:relative;top:-72px}
.hero-description{max-width:510px;margin-top:28px}
.hero-description p{font-size:15px;line-height:1.7;color:var(--white);text-wrap:pretty}
.hero-description .lead{font-size:16px;line-height:1.7;max-width:none;margin:0;color:var(--white)}
.hero-description p+p{margin-top:17px}
.hero-actions{margin-top:26px}
@media(min-width:1700px){
 .hero-description{max-width:550px}
 .hero-description p{font-size:16px}
 .hero-description .lead{font-size:17px}
}
@media(min-width:801px) and (max-width:1100px){
 .hero{min-height:850px}
 .hero h1{font-size:49px;max-width:510px}
 .hero-description{max-width:420px}
 .hero-description p{font-size:14.5px}
 .hero-description .lead{font-size:15.5px}
}
@media(max-width:800px){
 .hero h1{top:-18px}
 .hero{height:auto;min-height:0}
 .hero-copy{padding-block:38px 36px}
 .hero h1{font-size:clamp(40px,6.5vw,56px);max-width:650px}
 .hero-description{max-width:620px;margin-top:24px}
 .hero-description p{font-size:15px;line-height:1.65}
 .hero-description .lead{font-size:16px}
 .hero-actions{margin-top:24px}
}
@media(max-width:600px){
 .hero-copy{padding-block:30px}
 .hero h1{font-size:clamp(34px,8.7vw,49px);line-height:1.08}
 .hero h1 br{display:initial}
 .hero-description{margin-top:23px}
 .hero-description p{font-size:14px;line-height:1.65}
 .hero-description .lead{font-size:15px;line-height:1.65}
 .hero-description p+p{margin-top:15px}
}
/* Keep the supplied 4:3 room intact, particularly the tall integrated surface.
   No duplicate UI overlay and no fake resolution increase. */
.hero-architecture{left:auto;right:0;top:50%;width:max(70cqw,133.333333cqh);aspect-ratio:4/3;transform:translateY(-50%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
@media(max-width:800px){
  .hero-art{height:auto;aspect-ratio:4/3}
  .hero-architecture{inset:0;width:100%;height:100%;transform:none;mask-image:none}
}
.owner-discovery .discovery-scene{min-height:490px;min-width:0;margin:0}
.owner-discovery .discovery-scene>img{object-position:71% center}
.discovery-scene::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgb(var(--scrim-rgb)/82%));pointer-events:none}
.discovery-caption{position:absolute;z-index:1;left:32px;bottom:26px;max-width:calc(100% - 64px);font:27px/1.2 var(--serif);color:var(--white);text-shadow:var(--image-shadow)}
.owner-physical{grid-template-columns:57% 43%;background:var(--surface-soft)}
.owner-physical .story-copy{padding:52px 14% 52px 12%}
.owner-physical .movement-scene{min-height:490px}
.owner-physical .movement-notice{right:4%;top:auto;bottom:25px}
.owner-readiness{background:var(--surface-deep);color:var(--white);border-bottom:0}
.owner-readiness .section-label,.owner-readiness .story-copy>p{color:var(--inverse-muted)}
.owner-readiness .story-copy h2{max-width:355px}
.readiness-scene{margin:0;display:grid;grid-template-rows:auto auto;align-content:center;min-width:0;background:var(--surface-deep)}
.readiness-photo{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:47% center}
.readiness-caption{display:flex;align-items:center;justify-content:space-between;gap:12px 22px;padding:20px 27px;background:var(--surface-deep);color:var(--white);border-top:1px solid var(--line-inverse)}
.readiness-caption>span{font:25px/1.2 var(--serif)}
.readiness-caption p{display:flex;gap:9px;align-items:center;font:12.5px/1.6 var(--sans);color:var(--inverse-muted)}
.readiness-caption svg{width:16px;height:16px;flex:0 0 16px}

@media(max-width:1100px) and (min-width:601px){
  .owner-discovery .story-copy{padding-left:12%;padding-right:25px}
  .owner-physical .story-copy{padding-left:10%;padding-right:12%}
  .readiness-caption{display:block;padding:19px 23px}
  .readiness-caption p{margin-top:9px}
}
@media(max-width:600px){
  .owner-discovery .discovery-scene{min-height:320px}
  .owner-discovery .discovery-scene>img{object-position:70% center}
  .discovery-caption{left:var(--gutter);bottom:23px;max-width:calc(100% - 2 * var(--gutter));font-size:25px}
  .owner-physical{grid-template-columns:1fr}
  .owner-physical .story-copy{grid-row:1;padding:33px var(--gutter) 35px}
  .owner-physical .movement-scene{min-height:320px}
  .owner-physical .movement-notice{right:17px;bottom:19px}
  .readiness-scene{min-height:0}
  .readiness-photo{height:auto;aspect-ratio:1.15;object-position:47% center}
  .readiness-caption{display:block;padding:21px var(--gutter) 24px}
  .readiness-caption>span{font-size:26px}
  .readiness-caption p{font-size:12px;margin-top:10px}
}

/* Section 3 — Each piece, known in full.
   Two materials side by side: the idea on warm limestone, the piece held in a
   deep evergreen vitrine with faint jade depth. The record shows one facet at a
   time beneath it (cinematic.js facetRecord); without JS all four are listed. */
.known-band{position:relative;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:stretch;
  padding:0 0 0 var(--gutter);background:linear-gradient(115deg,#ece6dc,#e4dbcf);color:var(--ink)}
#main>.known-band:not(:first-child){border-block-start-width:0}
.known-head{align-self:center;padding:clamp(72px,8vw,120px) 9% clamp(72px,8vw,120px) 0;min-width:0}
.known-head h2{font-size:clamp(44px,3.9vw,64px);line-height:1.04;margin-bottom:26px}
.known-lede{font-size:15.5px;line-height:1.7;color:var(--ink);max-width:340px;text-wrap:pretty}
.known-scope{margin-top:26px;padding-top:20px;border-top:1px solid rgb(31 43 39 / 14%);font-size:13.5px;line-height:1.7;color:var(--muted);max-width:340px;text-wrap:pretty}
.known-piece{position:relative;margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(64px,6.5vw,104px) clamp(32px,5vw,80px) clamp(52px,5vw,80px);color:var(--white);isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 46% 40% at 50% 40%,rgb(214 232 222 / 13%),transparent 72%),
    linear-gradient(rgb(19 48 38 / 78%),rgb(19 48 38 / 86%)),var(--jade-texture) center/cover,#133026}
.known-piece::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 1px rgb(255 255 255 / 6%)}
.known-watch{width:clamp(220px,19vw,330px);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 34px 38px rgb(0 0 0 / 42%)) drop-shadow(0 8px 12px rgb(0 0 0 / 24%))}
.known-record{width:100%;max-width:560px;margin-top:clamp(30px,3.2vw,44px);text-align:center}
.known-facets{display:none;justify-content:center;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.facets-ready .known-facets{display:flex}
.known-facets li{display:flex;align-items:center}
.known-facets li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:rgb(196 226 210 / 40%);margin:0 clamp(10px,1.1vw,16px)}
.known-facet{position:relative;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  font:500 10.5px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:rgb(196 226 210 / 62%);transition:color .35s ease}
.known-facet::after{content:"";position:absolute;left:2px;right:2px;bottom:11px;height:1px;background:rgb(196 226 210 / 80%);
  transform:scaleX(0);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.known-facet:hover,.known-facet[aria-pressed="true"]{color:#eef3ee}
.known-facet[aria-pressed="true"]::after{transform:scaleX(1)}
.known-facet:focus-visible{outline:1px solid rgb(196 226 210 / 80%);outline-offset:3px}
/* No JS: every facet listed with its label. With JS: one at a time, same height. */
.known-statements{display:grid;gap:18px;margin-top:8px}
.known-statement{margin:0;font:400 clamp(21px,1.75vw,27px)/1.3 var(--serif);color:#f1f2ec;text-wrap:balance}
.known-statement-label{display:block;margin-bottom:6px;font:500 10px/1.5 var(--sans);letter-spacing:2px;text-transform:uppercase;color:rgb(196 226 210 / 70%)}
.facets-ready .known-statements{display:grid;grid-template-areas:"s";gap:0;margin-top:14px;min-height:2.7em}
.facets-ready .known-statement{grid-area:s;opacity:0;transform:translateY(4px);visibility:hidden;
  transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.22,.61,.36,1),visibility 0s linear 1.1s}
.facets-ready .known-statement.is-current{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.facets-ready .known-statement-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.facets-ready .known-statement{transition:none;transform:none}}


@media(min-width:1700px){
  .known-lede,.known-scope{max-width:380px}
  .known-lede{font-size:16.5px}
}
/* Tablet and phone: the idea first, then the vitrine full width. */
@media(max-width:1099px){
  .known-band{grid-template-columns:1fr;padding:0}
  .known-head{padding:clamp(56px,8vw,88px) var(--gutter) clamp(44px,6vw,60px)}
  .known-lede,.known-scope{max-width:520px}
  .known-watch{width:280px}
}
@media(max-width:700px){
  .known-head h2{font-size:clamp(36px,10vw,46px);margin-bottom:20px}
  .known-lede{font-size:15px}
  .known-piece{padding:52px var(--gutter) 44px}
  .known-watch{width:min(58vw,250px)}
  .facets-ready .known-facets{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;column-gap:26px}
  .known-facets li{justify-content:center}
  .known-facets li+li::before{display:none}
  .known-facet{font-size:9.5px;letter-spacing:1.4px}
  .known-statement{font-size:20px}
}

/* ------------------------------------------------------------------
   Homepage system: one canvas, one dark, one type scale, real air.
   Every section stands apart on a warm ivory canvas (the header's
   limestone family), the way a gallery hangs work: dark evergreen
   bands and photographs read as placed objects, copy sits on the page.
   ------------------------------------------------------------------ */
.home{
  --canvas:#f0ece4;            /* page and light sections */
  --deep:#133026;              /* evergreen: hero, film, vitrine, readiness */
  --ink-strong:#1d2a26;        /* headings on canvas */
  --body-ink:#3c4743;          /* body on canvas */
  --jade-light:rgb(196 226 210);/* labels and fine detail on deep */
  --section-gap:clamp(72px,9vw,152px);
  --h2-size:clamp(40px,3.6vw,60px);
  --body-size:clamp(15px,1.05vw,16.5px);
  --surface-deep:var(--deep);--scrim-rgb:19 48 38;
  background:var(--canvas)}
.home #main{gap:var(--section-gap);padding-bottom:var(--section-gap);background:var(--canvas)}
.home #main>:not(script):not(:first-child){border-block-start:0}
.home .story-band{border-bottom:0}

/* One heading voice, one body voice, one label voice */
.home .story-copy h2,.home .known-head h2{font-size:var(--h2-size);line-height:1.05;letter-spacing:-.2px;color:var(--ink-strong);margin-bottom:24px}
.home .owner-readiness .story-copy h2{color:var(--white)}
.home .story-copy>p:not(.section-label),.home .known-lede{font-size:var(--body-size);line-height:1.7;color:var(--body-ink);max-width:380px}
.home .owner-readiness .story-copy>p:not(.section-label){color:var(--inverse-muted)}
.home .known-scope{font-size:calc(var(--body-size) - 1.5px);max-width:380px}
.home .section-label{font:500 10.5px/1.5 var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.home .owner-readiness .section-label{color:var(--inverse-muted)}

/* Light sections take the canvas, so copy sits on the page itself */
.home .known-band,.home .owner-discovery,.home .owner-physical{background:var(--canvas)}
.home .owner-readiness,.home .readiness-scene,.home .readiness-caption{background:var(--deep)}
/* The footer uses the site-wide midnight jade treatment. */

/* The film: a full-width evergreen band, held apart from the hero */
.home .film-band{padding-block:clamp(28px,3vw,52px)}
@media(max-width:480px){.home .film-band{padding-bottom:62px}}
@media(max-width:700px){.home .film-band[data-film-cut="tall"]{padding-block:0}}

@media(max-width:700px){
  .home{--section-gap:clamp(56px,15vw,80px);--h2-size:clamp(34px,9.6vw,44px);--body-size:15px}
  .home .section-label{font-size:10px;margin-bottom:20px}
}
/* Sections now stand apart, so the old stacked-band seam shading goes. */
body.v2-experience.home .story-band{box-shadow:none}
body.v2-experience.home .story-band::before{display:none}

/* Hero (option A): the words on evergreen, the room beside them.
   Nothing overlaps, so the copy reads cleanly and the photograph leads.
   The room keeps its 4:3 box (the mirror's lights are placed inside it) and
   is cropped to the right panel, favouring the window and the mirror. */
@media(min-width:801px){
  .hero{--hero-split:40%;--hero-focus:.72}
  .hero::after{display:none}
  .hero::before{right:auto;width:var(--hero-split);mask-image:none;opacity:.45}
  .hero-art{left:var(--hero-split);mask-image:linear-gradient(90deg,transparent,#000 72px)}
  .hero-architecture{width:max(100cqw,133.333333cqh);aspect-ratio:4/3;top:50%;right:auto;
    left:calc((100cqw - max(100cqw,133.333333cqh)) * var(--hero-focus));transform:translateY(-50%);mask-image:none}
  .hero-copy{max-width:var(--hero-split);padding-right:clamp(32px,3.5vw,64px)}
  .hero h1{font-size:clamp(40px,3.2vw,62px);line-height:1.2;max-width:none;white-space:nowrap;top:-36px}
  .hero-description{max-width:400px;margin-top:4px}
  .hero-description .lead{font-size:clamp(15.5px,1.12vw,18px);line-height:1.8}
  .hero-description p{font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.85}
  .hero-description p+p{margin-top:22px}
}
@media(min-width:1700px){.hero-description{max-width:460px}}
@media(min-width:801px) and (max-width:1100px){
  .hero{--hero-split:46%;--hero-focus:.97}
  .hero h1{font-size:clamp(34px,3.6vw,40px);white-space:normal}
  .hero-description{max-width:none}
}
@media(max-width:800px){
  .hero h1{line-height:1.18;top:0}
  .hero-copy{padding-top:48px;padding-bottom:44px}
  .hero-description{margin-top:28px}
  .hero-description p{line-height:1.8}
  .hero-description p+p{margin-top:20px}
}
/* A gentle lift on the room itself: shadows opened, sunset kept. */
.home .hero-photo{filter:brightness(1.12) contrast(.96) saturate(1.04)}
/* Headline: two distinct lines with clear air between them. */
.home .hero h1 .hero-line{display:block}
.home .hero h1 .hero-line+.hero-line{margin-top:.34em}
.home .hero h1{line-height:1.08}
/* Match the film band to the film's own evergreen so the frame has no edge. */
.home .film-band{background:linear-gradient(rgb(22 53 41 / 84%),rgb(22 53 41 / 84%)),var(--jade-texture) center/cover,#163529}
.home .film-frame,.home .film-video{background:#163529}
/* The readiness copy panel fills its section, so no inner box shows. */
.home .owner-readiness .story-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center}

/* Closing invitation: one quiet, centred moment on the canvas before the footer. */
.home .closing-invite{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(24px,3vw,48px) var(--gutter) clamp(8px,1vw,16px);background:var(--canvas)}
.home .closing-invite .section-label{justify-content:center;gap:14px}
.home .closing-invite .section-label::before{content:"";display:block;height:1px;width:54px;background:currentColor;opacity:.5}
.home .closing-invite h2{font-size:var(--h2-size);line-height:1.12;color:var(--ink-strong);margin-bottom:26px}
.home .closing-invite h2 span{display:block}
.home .closing-invite-copy{max-width:440px;font-size:var(--body-size);line-height:1.75;color:var(--body-ink);margin-bottom:38px;text-wrap:pretty}
.home .closing-invite .outline-button{color:var(--ink-strong);border-color:rgb(29 42 38 / 55%);min-width:250px}
.home .closing-invite .outline-button:is(:hover,:focus-visible){border-color:#c4a465}

/* ------------------------------------------------------------------
   Rhythm: more air, and a little more at the two chapter turns
   (after the film, and before the closing invitation).
   ------------------------------------------------------------------ */
.home{--section-gap:clamp(88px,12vw,184px)}
.home #main>#known{margin-top:clamp(16px,2.4vw,40px)}
.home #main>#introduction{margin-top:calc(var(--section-gap) * -.4)}
@media(max-width:700px){.home{--section-gap:clamp(64px,17vw,92px)}}

/* ------------------------------------------------------------------
   Across every residence and yacht: three properties on one fine line.
   A point of light travels along it with the scroll, and each property's
   entry writes itself in as the light arrives. Without JS (or with reduced
   motion) the line is complete and every entry is shown.
   ------------------------------------------------------------------ */
.home .places-band{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:stretch;background:var(--canvas)}
.places-map{position:relative;margin:0;display:flex;align-items:center;min-height:clamp(420px,36vw,560px);
  padding:clamp(56px,6vw,96px) clamp(36px,4.5vw,80px);color:var(--white);isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 50% 46%,rgb(214 232 222 / 9%),transparent 70%),
    linear-gradient(rgb(19 48 38 / 80%),rgb(19 48 38 / 88%)),var(--jade-texture) center/cover,#133026}
.places-map{flex-direction:column;justify-content:center;gap:clamp(40px,4.6vw,72px)}
.places-kicker{position:relative;z-index:1;font:500 10px/1.4 var(--sans);letter-spacing:2.6px;text-transform:uppercase;color:rgb(196 226 210 / 72%);text-align:center}
.places-foot{position:relative;z-index:1;max-width:30ch;font:400 clamp(16px,1.25vw,19px)/1.45 var(--serif);color:rgb(238 240 234 / 78%);text-align:center;text-wrap:balance}
.places-route{--route:1;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);
  width:100%;margin:0;padding:0;list-style:none}
.place{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.place-node{position:relative;z-index:2;width:11px;height:11px;border-radius:50%;margin-bottom:22px;
  border:1px solid rgb(226 196 140 / 70%);background:#133026;transition:background .6s var(--ease-out),box-shadow .8s var(--ease-out)}
.place.is-reached .place-node,.places-static .place-node{background:#e8c98c;box-shadow:0 0 0 3px rgb(232 201 140 / 14%),0 0 12px rgb(232 196 122 / 55%)}
.place-name{font:400 clamp(19px,1.55vw,25px)/1.2 var(--serif);color:#f3f1ea;margin-bottom:14px}
.place-log{display:flex;flex-direction:column;gap:5px;font:400 clamp(12px,.86vw,13.5px)/1.5 var(--sans);color:rgb(226 232 226 / 82%)}
.place-item{color:#eef0ea}
.place-mark{margin-top:8px;font:500 9.5px/1.4 var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:rgb(196 226 210 / 75%)}
/* the line runs between the first and last node centres */
.places-line{position:absolute;z-index:0;left:calc(clamp(36px,4.5vw,80px) + (100% - 2 * clamp(36px,4.5vw,80px)) / 6);
  right:calc(clamp(36px,4.5vw,80px) + (100% - 2 * clamp(36px,4.5vw,80px)) / 6);top:var(--line-y,50%);height:1px;
  background:linear-gradient(90deg,rgb(226 196 140 / 22%),rgb(226 196 140 / 34%),rgb(226 196 140 / 22%))}
.places-line::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(232 201 140 / 30%),rgb(232 201 140 / 85%));
  transform-origin:left center;transform:scaleX(var(--route,1))}
.places-light{position:absolute;top:50%;left:calc(var(--route,1) * 100%);width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff3d6;box-shadow:0 0 6px 2px rgb(244 212 131 / 75%),0 0 18px 6px rgb(232 189 101 / 28%)}
/* entries write themselves in */
.places-live .place-log>span{opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.places-live .place.is-reached .place-log>span{opacity:1;transform:none}
.places-live .place.is-reached .place-log>span:nth-child(2){transition-delay:.18s}
.places-live .place.is-reached .place-log>span:nth-child(3){transition-delay:.36s}
.places-copy{align-self:center;padding:clamp(56px,6vw,96px) var(--gutter) clamp(56px,6vw,96px) clamp(40px,5vw,88px);min-width:0}
.places-copy h2{font-size:var(--h2-size);line-height:1.08;color:var(--ink-strong);margin-bottom:24px}
.places-copy h2 span{display:block}
.places-copy>p:not(.section-label){font-size:var(--body-size);line-height:1.7;color:var(--body-ink);max-width:380px}
@media(max-width:1099px){
  .home .places-band{grid-template-columns:1fr}
  .places-copy{grid-row:1;padding:clamp(48px,8vw,72px) var(--gutter) clamp(36px,6vw,52px)}
}
/* phones: the route runs down the page */
@media(max-width:700px){
  .places-map{min-height:0;padding:48px var(--gutter) 52px}
  .places-route{grid-template-columns:1fr;gap:38px;padding-left:34px}
  .place{align-items:flex-start;text-align:left}
  .places-map{align-items:stretch;gap:36px}
  .places-kicker,.places-foot{text-align:left}
  .place-node{position:absolute;left:-34px;top:7px;margin:0}
  .places-line{left:calc(var(--gutter) + 5px);right:auto;top:var(--line-top,60px);bottom:auto;width:1px;height:var(--line-h,70%);
    background:linear-gradient(rgb(226 196 140 / 22%),rgb(226 196 140 / 34%))}
  .places-line::before{transform-origin:center top;transform:scaleY(var(--route,1));background:linear-gradient(rgb(232 201 140 / 30%),rgb(232 201 140 / 85%))}
  .places-light{left:50%;top:calc(var(--route,1) * 100%)}
}

/* ------------------------------------------------------------------
   The film arrives: framed on the canvas, it opens to full width as it
   comes into view. Linked to the scroll, never taking it over.
   ------------------------------------------------------------------ */
@media(min-width:801px){
  .home .film-band{clip-path:inset(0 calc((1 - var(--arrive,1)) * 8vw))}
  .home .film-frame{transform:scale(calc(.93 + .07 * var(--arrive,1)));transform-origin:center center}
}

/* ------------------------------------------------------------------
   Signature light: the first time an evergreen panel enters view, one
   hairline of warm light traces its top edge and fades. Once, never looping.
   ------------------------------------------------------------------ */
.edge-light{position:absolute;z-index:6;left:0;right:0;top:0;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgb(240 210 150 / 90%) 50%,transparent);transform:scaleX(0);transform-origin:left center}
.edge-light.is-lit{animation:edge-trace 2.6s var(--ease-out) forwards}
@keyframes edge-trace{0%{opacity:0;transform:scaleX(0)}12%{opacity:1}62%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.home .known-piece,.home .owner-readiness .story-copy{position:relative}

/* ------------------------------------------------------------------
   Gentle arrivals: text rises a few pixels and fades in; photographs
   settle from very slightly enlarged. Only once JS is ready, so nothing
   is ever hidden without it.
   ------------------------------------------------------------------ */
.motion-ready .arrive{opacity:0;transform:translateY(12px);
  transition:opacity .95s var(--ease-out) calc(var(--i,0) * 90ms),transform 1.15s var(--ease-out) calc(var(--i,0) * 90ms)}
.motion-ready .arrive.is-in{opacity:1;transform:none}
.motion-ready .settle{transform:scale(1.035);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.motion-ready .settle.is-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .motion-ready .arrive,.motion-ready .settle{opacity:1;transform:none;transition:none}
  .edge-light{display:none}
  .home .film-band{clip-path:none}.home .film-frame{transform:none}
}

/* House colour in the type: headings, invitations and secondary links in the
   deep evergreen; body stays charcoal; labels take a muted evergreen. */
.home{--ink-strong:#173a2e;--label-green:#4d675e}
.home .section-label{color:var(--label-green)}
.home .owner-readiness .section-label{color:var(--inverse-muted)}
.home .closing-invite .outline-button{color:#173a2e;border-color:rgb(23 58 46 / 62%)}

/* Chapter numbers: a quiet index before each label, in aligned figures. */
.home .label-index{font-variant-numeric:tabular-nums;letter-spacing:1px;margin-right:12px;padding-right:12px;border-right:1px solid currentColor;opacity:.75}
.home .owner-readiness .story-copy .section-label{color:rgb(214 228 220 / 78%)}
/* System entries keep time in aligned figures, like a refined log. */
.place-mark time{font-variant-numeric:tabular-nums;letter-spacing:1.2px;margin-left:6px;color:rgb(232 210 160 / 85%)}
.home .closing-assurance{margin-top:30px;font-size:12.5px;letter-spacing:.2px;color:var(--label-green)}
/* One photographic world: the curation and departure photographs share the
   hero's warm evening grade. */
.home .discovery-scene>img,.home .readiness-photo{filter:sepia(.1) saturate(1.06) brightness(1.02) contrast(1.02)}
/* Five facets: one line on wide screens, a centred 3 + 2 on phones. */
.home .known-record{max-width:720px}
@media(min-width:1100px){
  .home .facets-ready .known-facets{flex-wrap:nowrap}
  .home .known-facets li+li::before{margin:0 clamp(8px,.9vw,14px)}
  .home .known-facet{letter-spacing:1.7px;font-size:10px}
}
@media(max-width:700px){
  .home .facets-ready .known-facets{display:flex;flex-wrap:wrap;justify-content:center;column-gap:24px;row-gap:0}
}
@media(max-width:700px){.home .closing-invite .section-label::before,.home .closing-invite .section-label::after{display:none}.home .closing-invite .section-label{white-space:nowrap}}

/* ------------------------------------------------------------------
   03 The intelligence: text on the left, the four homes on the right.
   At every width the owner's question and ZALLIA's answer sit on the film
   itself, over a soft scrim, so the two are always seen together.
   ------------------------------------------------------------------ */
.home .intel-band{background:var(--canvas);display:grid;grid-template-columns:minmax(0,1fr) min(48vw,calc((100svh - var(--header-height) - 48px) * .8));
  grid-template-areas:"head scene";column-gap:clamp(40px,6vw,110px);padding-left:var(--gutter);align-items:center}
.intel-head{grid-area:head;padding:clamp(24px,3vw,48px) 0}
.intel-head .section-label{margin-bottom:24px}
.intel-head h2{font-size:var(--h2-size);line-height:1.08;color:var(--ink-strong);margin-bottom:24px}
.intel-head h2 span{display:block}
.intel-copy p{font-size:var(--body-size);line-height:1.7;color:var(--body-ink);max-width:420px}
.intel-copy .intel-examples{margin-top:14px;color:var(--ink-strong);font-family:var(--serif);font-size:calc(var(--body-size) + 3px);line-height:1.5}
.intel-scene{grid-area:scene;position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;width:100%;background:#2a1d14}
.intel-scene::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;background:linear-gradient(transparent,rgb(10 12 10 / 74%) 58%)}
.intel-video{display:block;width:100%;height:100%;object-fit:cover}
.intel-note{grid-area:scene;align-self:end;z-index:2;margin:0;padding:0 clamp(20px,2.4vw,40px) clamp(20px,2.4vw,36px)}
.intel-beats{display:grid}
.intel-beat{grid-area:1/1;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .6s var(--ease-out)}
.intel-note[data-beat="0"] [data-for="0"],.intel-note[data-beat="1"] [data-for="1"],.intel-note[data-beat="2"] [data-for="2"],.intel-note[data-beat="3"] [data-for="3"]{opacity:1}
.intel-ask,.intel-answer{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.intel-ask-line{display:block;font:400 clamp(22px,1.75vw,29px)/1.22 var(--serif);color:#f6f3ec;text-shadow:0 1px 14px rgb(0 0 0 / 60%);text-wrap:balance}
.intel-answer{display:flex;flex-direction:column;gap:8px;max-width:440px;padding:clamp(14px,1.2vw,18px) clamp(16px,1.4vw,22px) clamp(16px,1.3vw,20px);
  background:rgb(14 24 20 / 72%);border:1px solid rgb(214 182 118 / 38%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.intel-answer{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.intel-answer-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid rgb(214 182 118 / 26%);
  font:500 10px/1.4 var(--sans);letter-spacing:2.6px;text-transform:uppercase}
.intel-answer-head span:first-child{color:#d6be8a}
.intel-answer-head span+span{color:rgb(244 241 234 / 70%)}
.intel-answer-item{font:400 clamp(18px,1.35vw,22px)/1.25 var(--serif);color:#f4f1ea}
.intel-answer-note{font:400 13.5px/1.5 var(--sans);color:rgb(244 241 234 / 82%)}
.intel-note[data-beat="0"] [data-for="0"] :is(.intel-ask,.intel-answer),.intel-note[data-beat="1"] [data-for="1"] :is(.intel-ask,.intel-answer),
.intel-note[data-beat="2"] [data-for="2"] :is(.intel-ask,.intel-answer),.intel-note[data-beat="3"] [data-for="3"] :is(.intel-ask,.intel-answer){opacity:1;transform:none}
.intel-note[data-beat] [data-for] .intel-ask{transition-delay:.15s}
.intel-note[data-beat] [data-for] .intel-answer{transition-delay:.8s}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.intel-answer{background:#101a16;backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Phones and narrow tablets: copy first, then the film full width. */
@media(max-width:900px){
  .home .intel-band{grid-template-columns:1fr;grid-template-areas:"head" "scene";padding-left:0}
  .intel-head{padding:0 var(--gutter) 28px}
  .intel-scene::after{height:62%;background:linear-gradient(transparent,rgb(10 12 10 / 78%) 55%)}
  .intel-note{padding:0 var(--gutter) 22px}
  .intel-ask-line{font-size:23px}
  .intel-answer{max-width:none;padding:14px 16px 16px}
  .intel-answer-item{font-size:19px}
  .intel-answer-note{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.intel-beat,.intel-ask,.intel-answer{transition:none!important;transform:none!important}}
/* Zigzag rhythm: 04 places its photograph on the left, text on the right. */
@media(min-width:901px){
  .home .owner-readiness{grid-template-columns:64% 36%}
  .home .owner-readiness .story-copy{order:2}
}
/* Closing: three quiet elements, held close together. */
.home .closing-invite h2{margin-bottom:30px}
.home .closing-assurance{margin-top:22px}
.home #main{padding-bottom:0}
.home .closing-invite{padding-bottom:clamp(64px,6.5vw,104px)}