/* ============================================================
   CULMENA — HOMEPAGE v2.2 (3 Sep 2026, RK round 3)
   Loaded LAST on index.html after site.css + home.css.
   Header: cream wordmark only + Menu pill. A dark scrim fades in behind
   the header on scroll; the header hides while the footer is on screen.
   Register lives in the menu, the assistant, the form and the footer.
   Buttons: plain pills, text only, orange ↔ green on hover.
   Sections alternate: text + tall image / full-bleed swap / plan + list /
   slider / type row / dark statement / cards. Hover = light, colour and a
   slow zoom inside a clipped frame. Layout never moves.
   ============================================================ */
:root{
  --orange:#D9612F;  --orange-2:#C2531F;  --orange-hi:#F08A4B;
  --green:#1F4348;   --green-2:#2A585E;   --green-deep:#12292C;
  --cream:#F3EDE2;   --cream-2:#FAF6EF;   --paper:#F3EADA;
  --ink:#141110;     --muted:#6F675E;
  --line:rgba(20,17,16,.12);
  --r:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,2.4vw,44px);
  --sec:clamp(72px,9vw,140px);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body,.page{background:var(--cream)}
::selection{background:var(--orange);color:#fff}
.reveal{opacity:1 !important;transform:none !important;transition:none !important}
h2{font-size:clamp(34px,4.4vw,68px);line-height:1;letter-spacing:-.045em;font-weight:500;text-wrap:balance}

/* ---------- BUTTONS + TEXT LINKS ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:99px;
  font:500 14.5px/1 'Instrument Sans','Inter',sans-serif;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;white-space:nowrap;transition:background-color .22s ease,color .22s ease,border-color .22s ease;-webkit-tap-highlight-color:transparent}
.b::before,.b::after{display:none}
.b-orange{background:var(--orange);color:#fff}
.b-orange:hover{background:var(--green)}
.b-green{background:var(--green);color:#fff}
.b-green:hover{background:var(--orange)}
.b:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.b-line{background:transparent;color:var(--paper);border-color:rgba(243,234,218,.45)}
.b-line:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.b .mob{display:none}
@media(hover:none) and (max-width:760px){.b .dsk{display:none}.b .mob{display:inline}}
/* text link with a drawn underline and an arrow that appears */
.tl{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;padding-bottom:6px;width:max-content}
.tl::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ink);transform-origin:left;transition:transform .4s var(--ease),background-color .25s}
.tl::before{content:"→";color:var(--orange);opacity:0;transition:opacity .25s;order:2}
.tl:hover{color:var(--orange)}
.tl:hover::after{background:var(--orange)}
.tl:hover::before{opacity:1}

/* ---------- HEADER ---------- */
body > nav{position:fixed;inset:0 0 auto 0;z-index:95;padding:0;color:var(--paper);background:none;mix-blend-mode:normal;transition:opacity .35s ease,transform .45s var(--ease)}
body.nav-hide > nav{transform:translateY(-100%);opacity:0;pointer-events:none}
body > nav::before{display:none}
body > nav::after{content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(12,16,15,.78) 0%,rgba(12,16,15,.45) 50%,rgba(12,16,15,0) 100%);opacity:0;transition:opacity .4s ease}
nav.solid::after{opacity:1}
body.at-foot > nav{opacity:0;pointer-events:none}
nav .nav-in,nav.solid .nav-in{max-width:none;margin:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,26px) var(--gutter);background:none !important;border:0;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-radius:0;transition:padding .45s var(--ease)}
nav.solid{background:none !important;box-shadow:none;backdrop-filter:none;color:var(--paper)}
nav.solid .nav-in{padding-block:14px}
nav ul{display:none !important}
.logo{display:block;height:clamp(22px,2vw,28px);aspect-ratio:470/60;color:var(--paper);transition:height .45s var(--ease),color .25s ease}
.logo .lg{width:100%;height:100%;display:block;overflow:visible}
nav.solid .logo{height:22px}
.logo:hover{color:var(--orange-hi)}
nav.solid .logo,nav.solid ul{display:block !important}
body.menu-open .logo{color:var(--paper)}
.nav-right{display:flex !important;align-items:center;gap:10px}
.nav-cta{display:none !important}
.burger{display:inline-flex !important;width:auto;height:46px;margin:0;padding:0 22px 0 18px;font-family:inherit;justify-content:center;gap:12px}
.burger .bars{position:relative;width:20px;height:12px;display:block}
.burger .bars i{position:absolute;left:0;height:1.6px;width:100%;background:currentColor;border-radius:2px;transition:transform .45s var(--ease),width .3s var(--ease)}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:10px;width:65%}
.burger:hover .bars i:nth-child(2){width:100%}
body.menu-open .burger .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger .bars i:nth-child(2){width:100%;opacity:1;transform:translateY(-5px) rotate(-45deg)}
.burger .bl-x{display:none}
body.menu-open .burger .bl{display:none}
body.menu-open .burger .bl-x{display:block}
.b-menu{background:rgba(255,255,255,.1);color:var(--paper);border-color:rgba(255,255,255,.3);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.b-menu:hover{background:var(--orange);border-color:var(--orange);color:#fff}
body.menu-open .b-menu,body.menu-open nav.solid .b-menu{background:rgba(10,12,12,.55);border-color:rgba(255,255,255,.18);color:#fff}
body.menu-open .b-menu:hover{background:var(--orange);border-color:var(--orange)}
@media(max-width:600px){.logo{height:20px}nav.solid .logo{height:18px}.burger{height:42px;padding:0 18px;font-size:14px}}

/* ---------- MENU ---------- */
.drawer{position:fixed;inset:0;z-index:90;background:var(--green-deep);color:var(--paper);display:block;padding:0;
  opacity:0;visibility:hidden;transform:none;transition:opacity .5s ease,visibility 0s linear .5s;overflow:hidden}
body.menu-open .drawer{opacity:1;visibility:visible;transition:opacity .5s ease}
.dr-bg{position:absolute;inset:0;z-index:0}
.dr-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,41,44,.96) 0%,rgba(18,41,44,.82) 40%,rgba(31,67,72,.55) 75%,rgba(31,67,72,.7) 100%),
             radial-gradient(60% 80% at 100% 100%,rgba(217,97,47,.28),transparent 60%)}
.dr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 9s linear}
.dr-img.on{opacity:.9;transform:scale(1)}
.dr-in{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:1fr auto;padding:clamp(110px,14vh,150px) var(--gutter) clamp(28px,4vh,44px)}
.dr-links{display:flex;flex-direction:column;justify-content:center;max-width:820px}
.dr-links a{position:relative;display:block;
  padding:clamp(14px,2vh,22px) 0;text-decoration:none;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease),color .25s ease}
body.menu-open .dr-links a{opacity:1;transform:none}
body.menu-open .dr-links a:nth-child(1){transition-delay:.08s}
body.menu-open .dr-links a:nth-child(2){transition-delay:.14s}
body.menu-open .dr-links a:nth-child(3){transition-delay:.20s}
body.menu-open .dr-links a:nth-child(4){transition-delay:.26s}
body.menu-open .dr-links a:nth-child(5){transition-delay:.32s}
body.menu-open .dr-links a:nth-child(6){transition-delay:.38s}
.dr-links .t{font-size:clamp(26px,3.6vw,50px);font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;position:relative;display:inline-block}
.dr-links .t::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.dr-links a:hover .t::after,.dr-links a:focus-visible .t::after{transform:scaleX(1)}
.dr-links .s{display:none}
.dr-links a:hover{color:#fff}
.dr-links .dr-reg .t{color:var(--orange-hi)}
.dr-links .dr-reg:hover .t{color:#fff}
.dr-links a:focus-visible{outline:none}
.drawer .d-meta{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px 40px;margin:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);opacity:0;transition:opacity .6s ease .4s}
body.menu-open .drawer .d-meta{opacity:1}
.dm-col{display:grid;gap:4px;font-size:14px;letter-spacing:.02em;color:rgba(243,234,218,.7)}
.dm-col .dm-lab{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-hi);margin-bottom:4px}
.dm-btns{display:flex;gap:10px;flex-wrap:wrap}
.drawer .d-meta a.b{display:inline-flex !important;align-items:center;justify-content:center;font:500 13px/1 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;height:46px;padding:0 22px;margin:0;opacity:1 !important;transform:none !important;border:0;border-radius:99px;background:var(--paper);color:var(--ink);transition:background-color .22s,color .22s}
.drawer .d-meta a.b:hover{background:var(--orange);color:#fff}
@media(max-width:700px){.dr-links .s{font-size:13px;white-space:normal}.dr-in{padding-top:96px}.dm-btns{width:100%}.dm-btns .b{flex:1}}

/* ---------- HERO ---------- */
.hero{border-radius:0}
.hero .shade{background:linear-gradient(to top,rgba(20,14,10,.72) 0%,rgba(20,14,10,.2) 40%,rgba(20,14,10,0) 65%),
                        linear-gradient(to bottom,rgba(20,14,10,.42) 0%,rgba(20,14,10,0) 22%)}
.hero-about,.hero-actions{display:none}
.hero-inner{display:block;padding-bottom:clamp(30px,3.6vw,52px);padding-right:clamp(240px,22vw,360px)}
.hero h1{font-size:clamp(44px,6.4vw,108px)}
.hero-blurb{position:static;max-width:52ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.88);padding:0;border:0;background:none;backdrop-filter:none;
  opacity:0;margin-top:22px}
body.ready .hero-blurb{animation:fadeUp 1.1s 1.1s var(--ease) forwards}
@media(max-width:900px){.hero-inner{padding-right:var(--gutter);padding-bottom:96px}}

/* ---------- PICTURE: clipped image, slow zoom; caption sits below in type ---------- */
.pic{display:block;text-decoration:none;color:var(--ink)}
.pic .im{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:#DCD2C2;isolation:isolate}
.pic .im img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 2.2s var(--ease)}
.pic:hover .im img{transform:scale(1.04)}
.pic .im::after{content:"";position:absolute;inset:0;background:rgba(31,67,72,.28);opacity:0;transition:opacity .9s ease}
.pic:hover .im::after{opacity:1}
.pic .cap{position:static;display:flex;align-items:baseline;gap:14px;padding:14px 2px 0;background:none;border-radius:0;backdrop-filter:none;color:var(--ink);font-size:inherit;letter-spacing:0;text-transform:none}
.pic .cap b{font-size:17px;font-weight:500;letter-spacing:-.02em;transition:color .5s ease}
.pic .cap small{font-size:14px;color:var(--muted)}
.pic:hover .cap b{color:var(--orange)}
.pic .ov{position:absolute;left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,28px);right:clamp(18px,2vw,30px);z-index:2;display:grid;gap:4px;color:var(--paper);opacity:0;transition:opacity .7s ease}
.pic .ov b{font-size:clamp(22px,2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1}
.pic .ov small{font-size:14px;color:rgba(243,234,218,.85)}
.pic .ov::before{content:"";position:absolute;left:0;top:-14px;width:28px;height:2px;background:var(--orange-hi)}
.pic .im::after{background:linear-gradient(to top,rgba(18,41,44,.72),rgba(18,41,44,.1) 55%,rgba(18,41,44,0))}
.pic .ov{display:none}
.pic .im::before{content:"→";position:absolute;right:18px;bottom:18px;z-index:2;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;border:1.5px solid rgba(243,234,218,.7);color:var(--paper);font-size:18px;line-height:1;background:rgba(12,24,26,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s ease,background-color .3s,border-color .3s;pointer-events:none}
.pic:hover .im::before{opacity:1;background:var(--orange);border-color:var(--orange)}
@media(hover:none){.pic .im::before{opacity:1}}

/* ---------- 1. HOMES ---------- */
.homes{padding:var(--sec) var(--gutter) 0;display:grid;gap:clamp(40px,5vw,80px)}
.homes-top{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,96px);align-items:center}
.homes-copy{display:grid;gap:24px;align-content:center;justify-items:start}
.homes-copy h2{max-width:12ch}
.homes-copy p{max-width:44ch;font-size:16px;line-height:1.6;color:var(--muted)}
.pic.tall .im{aspect-ratio:4/3}
.pic.wide .im{aspect-ratio:21/9}
@media(max-width:900px){.homes-top{grid-template-columns:1fr}.pic.wide .im{aspect-ratio:16/10}}

/* ---------- 2. AMENITIES: full-bleed, the list drives the picture ---------- */
.amen{position:relative;margin-top:var(--sec);min-height:clamp(560px,82vh,860px);color:var(--paper);isolation:isolate;overflow:hidden;display:grid;align-items:end;padding-block:4vw}
.am-bg{position:absolute;inset:0;z-index:-1;background:var(--green-deep)}
.am-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 1.6s var(--ease)}
.am-bg img.on{opacity:1;transform:none}
.am-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(12,24,26,.82) 0%,rgba(12,24,26,.55) 45%,rgba(12,24,26,.15) 100%),
                                                       linear-gradient(to top,rgba(12,24,26,.6),transparent 40%)}
.am-in{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:end;padding:clamp(56px,7vw,110px) var(--gutter)}
.am-copy h2{max-width:11ch;margin-bottom:14px}
.am-copy p{font-size:16px;color:rgba(243,234,218,.75)}
.am-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.am-list a{display:grid;grid-template-columns:1fr;gap:4px;padding:clamp(16px,1.8vw,24px) 0 clamp(16px,1.8vw,24px) 18px;border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;color:var(--paper);position:relative;transition:color .25s}
.am-list a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.am-list a:hover::before,.am-list a.on::before{transform:scaleY(1)}
.am-list b{font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.05;transition:color .25s}
.am-list a:hover b,.am-list a.on b{color:var(--orange-hi)}
.am-list span{font-size:14px;color:rgba(243,234,218,.6);max-width:44ch;transition:color .25s}
.am-list a:hover span,.am-list a.on span{color:rgba(243,234,218,.9)}
@media(max-width:900px){.am-in{grid-template-columns:1fr;gap:28px}}

/* ---------- 3. SITE + NEIGHBOURHOOD ---------- */
.site{padding:var(--sec) var(--gutter) 0;display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(28px,5vw,90px);align-items:start}
.site-copy{display:grid;gap:22px;position:sticky;top:110px;justify-items:start}
.site-copy h2{max-width:12ch}
.site-copy p{max-width:44ch;font-size:16px;line-height:1.6;color:var(--muted)}
.walk{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.walk a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:14px 12px;margin:0 -12px;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative;isolation:isolate;transition:color .25s}
.walk a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.walk a:hover{color:var(--paper)}
.walk a:hover::before{transform:scaleX(1)}
.walk b{font-size:19px;font-weight:500;letter-spacing:-.02em}
.walk span{grid-row:2;font-size:13.5px;color:var(--muted);transition:color .25s}
.walk a:hover span{color:rgba(243,234,218,.7)}
.walk em{grid-row:1/3;grid-column:2;font-style:normal;font-size:15px;font-weight:500;color:var(--orange);font-variant-numeric:tabular-nums}
.pic.plan .im{aspect-ratio:4/3.4;background:#E4DDD0}
@media(max-width:1100px){.site{grid-template-columns:1fr;gap:clamp(22px,5vw,40px)}.site-copy{position:static;gap:18px}.pic.plan .im{aspect-ratio:4/3}.site .walk{width:100%}.site-copy .b{width:100%}}

/* ---------- 4. INTERIORS ---------- */
.compare{background:var(--cream);padding:var(--sec) var(--gutter) 0}
.cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.cmp-head p{max-width:46ch;font-size:16px;line-height:1.6;color:var(--muted)}
.cmp{border-radius:var(--r);box-shadow:none;aspect-ratio:16/8.4}
.cmp::before{display:none}
.cmp-grip{color:var(--ink);transition:background-color .2s,color .2s}
.cmp-handle:hover .cmp-grip,.cmp-handle:focus-visible .cmp-grip{transform:none;background:var(--orange);color:#fff}
.cmp-tag{background:rgba(20,14,10,.5);letter-spacing:0;text-transform:none;font-size:13px;font-weight:500}
@media(max-width:900px){.cmp-head{grid-template-columns:1fr;gap:12px}}

/* ---------- STATEMENT: full-bleed, edge to edge ---------- */
.statement{margin:var(--sec) 0 0;border-radius:0;background:var(--green)}
.statement .media img{opacity:.62;filter:saturate(.85)}
.statement::before{background:linear-gradient(to top,rgba(15,30,28,.55),rgba(15,30,28,.15))}
.statement q i{color:#F3C79B}
.statement .st-in .w{opacity:.55}
.statement small{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:1;margin-top:30px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.statement .spot{-webkit-mask:radial-gradient(circle var(--r,260px) at var(--x,50%) var(--y,50%),#000 0,#000 30%,transparent 100%);
  mask:radial-gradient(circle var(--r,260px) at var(--x,50%) var(--y,50%),#000 0,#000 30%,transparent 100%)}


/* ============================================================
   SECTION JOINS — the chosen five (RK, 3 Sep). Two mechanisms:
     .jn  paints the join as a flat colour (--jc) over the empty strip at the
          foot of the section above. For solid-colour sections.
     .jm  masks the section's own edge. For sections whose background is a
          picture (the image has to run into the strip, not a flat colour).
   Shapes:
     -hip      flat for 55%, one shallow rise      (-hipb: the same, rotated, on the bottom → a connected slab)
     -chamfer  straight, leading corner cut over 260px, 20px deep
     -notch    two shallow 45°-ish corner cuts, 96px wide, 18px tall
     -sand     a hair-angled sand course between the two
     -gap      two planes at slightly different angles with a deep-green sliver between
   The strip (--ov) is empty on both sides. Text and pictures never enter it.
   ============================================================ */
:root{--ov:clamp(48px,5vw,72px);--sand:#D9C7AE;
  --m-hip:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V48H790L1440 16V72Z' fill='black'/></svg>");
  --m-hipb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 0V56L650 24H1440V0Z' fill='black'/></svg>");
  --m-chamfer:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V66L260 46H1440V72Z' fill='black'/></svg>");
  --m-notchb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 0V72L96 54H1344L1440 72V0Z' fill='black'/></svg>");
  --m-slant-t:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V14L1440 50V72Z' fill='black'/></svg>");
  --m-slant-b:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 0V58L1440 22V0Z' fill='black'/></svg>");
  --m-notch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V18L96 0H1344L1440 18V72Z' fill='black'/></svg>");
  --m-sand-fill:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V58L1440 44V72Z' fill='black'/></svg>");
  --m-sand-band:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 40L1440 30V44L0 58Z' fill='black'/></svg>");
  --m-gap-fill:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 72V54L1440 30V72Z' fill='black'/></svg>");
  --m-gap-band:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'><path d='M0 40L1440 22V30L0 54Z' fill='black'/></svg>");
  --m-fill:linear-gradient(#000 0 0)}
/* painted joins */
.jn{position:relative;z-index:2;--jc:var(--cream)}
.join{height:0;z-index:4}
.jn::before{content:"";position:absolute;left:0;right:0;top:calc(var(--ov) * -1 + 1px);height:var(--ov);background:var(--jc);pointer-events:none;z-index:1;
  -webkit-mask:var(--jt) center/100% 100% no-repeat;mask:var(--jt) center/100% 100% no-repeat}
.jn-hip{--jt:var(--m-hip)}.jn-chamfer{--jt:var(--m-chamfer)}.jn-notch{--jt:var(--m-notch)}
.jn-sand{--jt:var(--m-sand-fill)}
.jn-sand::after{content:"";position:absolute;left:0;right:0;top:calc(var(--ov) * -1 + 1px);height:var(--ov);background:var(--sand);pointer-events:none;z-index:1;
  -webkit-mask:var(--m-sand-band) center/100% 100% no-repeat;mask:var(--m-sand-band) center/100% 100% no-repeat}
.jn-gap{--jt:var(--m-gap-fill)}
.jn-gap::after{content:"";position:absolute;left:0;right:0;top:calc(var(--ov) * -1 + 1px);height:var(--ov);background:var(--green-deep);pointer-events:none;z-index:1;
  -webkit-mask:var(--m-gap-band) center/100% 100% no-repeat;mask:var(--m-gap-band) center/100% 100% no-repeat}
/* masked joins (picture sections) */
.jm{position:relative;z-index:3;margin-top:calc(var(--ov) * -1);--mt:var(--m-fill);--mb:var(--m-fill);
  -webkit-mask-image:var(--mt),var(--m-fill),var(--mb);mask-image:var(--mt),var(--m-fill),var(--mb);
  -webkit-mask-size:100% var(--ov),100% calc(100% - var(--ov) * 2 + 2px),100% var(--ov);mask-size:100% var(--ov),100% calc(100% - var(--ov) * 2 + 2px),100% var(--ov);
  -webkit-mask-position:top,center,bottom;mask-position:top,center,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.jm-hip{--mt:var(--m-hip)}.jm-notch{--mt:var(--m-notch)}.jm-chamfer{--mt:var(--m-chamfer)}
.jm-hipb{--mb:var(--m-hipb);margin-bottom:calc(var(--ov) * -1)}
.jm-notchb{--mb:var(--m-notchb);margin-bottom:calc(var(--ov) * -1)}
.jm-slant{--mt:var(--m-slant-t)}.jm-slantb{--mb:var(--m-slant-b);margin-bottom:calc(var(--ov) * -1)}
/* stacking, colours, and the empty strips each section leaves for its neighbour */
.hero{z-index:1;height:calc(100svh + var(--ov));min-height:calc(620px + var(--ov))}
.hero .hero-inner{padding-bottom:calc(clamp(30px,3.6vw,52px) + var(--ov))}
.homes{--jc:var(--cream);background:var(--cream);padding-top:var(--sec);padding-bottom:calc(var(--sec) * .7 + var(--ov))}
.amen{margin-top:calc(var(--ov) * -1);padding-top:0;padding-bottom:0}
.amen .am-in{padding-top:calc(clamp(56px,7vw,110px) + var(--ov));padding-bottom:calc(clamp(56px,7vw,110px) + var(--ov))}
.site{position:relative;z-index:2;background:var(--cream);padding-top:calc(var(--sec) + var(--ov));padding-bottom:calc(var(--sec) * .4);grid-template-columns:1.3fr .9fr}
.compare{position:relative;z-index:2;background:var(--cream);padding-bottom:calc(var(--sec) * .7 + var(--ov))}
.statement{margin-top:calc(var(--ov) * -1);margin-bottom:0}
.statement .st-in{padding-top:calc(clamp(56px,7vw,90px) + var(--ov));padding-bottom:calc(clamp(56px,7vw,90px) + var(--ov))}
.explore{position:relative;z-index:2;background:var(--cream);padding-top:calc(var(--sec) + var(--ov));padding-bottom:calc(var(--sec) * .8 + var(--ov))}
.register{padding-top:clamp(56px,7vw,96px);padding-bottom:calc(clamp(36px,4vw,56px) + var(--ov));border-radius:0}
footer{padding-top:clamp(48px,6vw,84px)}
@media(max-width:700px){:root{--ov:36px}}

/* ---------- 6. EXPLORE: four panels, the one under the cursor opens ---------- */
.ex-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.ex-head p{max-width:46ch;font-size:16px;line-height:1.6;color:var(--muted)}
.ex-panels{display:flex;gap:10px;height:clamp(420px,62vh,640px)}
.ex-p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r);background:#DCD2C2;box-shadow:inset 0 0 0 0 var(--orange);text-decoration:none;color:var(--paper);isolation:isolate;
  transition:flex-grow 1.1s var(--ease)}
.ex-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.4s var(--ease)}
.ex-p::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,24,26,.82),rgba(12,24,26,.15) 55%,rgba(12,24,26,0));transition:opacity .8s ease}
.ex-p::before{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r);border:2px solid var(--orange);opacity:0;transition:opacity .4s ease;pointer-events:none}
.ex-p:hover::before{opacity:1}
.ex-p .tx{position:absolute;left:clamp(18px,2vw,32px);right:clamp(18px,2vw,32px);bottom:clamp(20px,2.4vw,34px);z-index:1;display:grid;gap:10px}
.ex-p b{font-size:clamp(22px,2.4vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.ex-p small{font-size:14.5px;line-height:1.5;color:rgba(243,234,218,.85);max-width:36ch;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .8s var(--ease)}
.ex-p b::after{content:"";display:block;width:28px;height:2px;background:var(--orange-hi);margin-top:12px;transition:width .8s var(--ease)}
@media(hover:hover){
  .ex-panels:hover .ex-p{flex-grow:.8}
  .ex-p:hover{flex-grow:2.4}
  .ex-p:hover img{transform:scale(1.04)}
  .ex-p:hover small{opacity:1;transform:none;transition-delay:.25s}
  .ex-p:hover b::after{width:64px}
}
@media(hover:none){.ex-p small{opacity:1;transform:none}}
@media(max-width:800px){
  .ex-head{grid-template-columns:1fr;gap:12px}
  .ex-panels{flex-direction:column;height:auto;gap:12px}
  .ex-p{aspect-ratio:16/9;flex:none}
}

/* ---------- REGISTER: tighter ---------- */
.register{background:var(--green);margin:0;border-radius:0;padding:clamp(48px,6vw,84px) var(--gutter) clamp(36px,4vw,56px)}
.register .glow{background:radial-gradient(circle,rgba(217,97,47,.32) 0%,rgba(217,97,47,.1) 35%,rgba(217,97,47,0) 66%)}
.reg-head{margin-bottom:clamp(16px,2vw,28px)}
.reg-time{color:#F3C79B;border-color:rgba(243,199,155,.4)}
.rail span.on{background:var(--orange)}
.stepno{margin-top:8px}
.q{font-size:clamp(30px,4vw,62px);margin-top:6px}
.q i{color:#F3C79B}
.hint{margin-top:10px}
.big{font-size:clamp(22px,2.4vw,34px)}
.big:focus,.small:focus{border-color:#F3C79B}
.opt{transition:background-color .2s,border-color .2s,color .2s}
.opt:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.opt[aria-checked="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.go{background:var(--orange);color:#fff;font-size:14.5px;height:48px;padding:0 24px;display:inline-flex;align-items:center;box-shadow:none;transition:background-color .22s}
.go:hover{background:var(--paper);color:var(--ink)}
.thanks .tick{background:var(--orange) !important;color:#fff}
.err{color:#F3A98A}
/* two columns on desktop: the form, and the showroom card */
.register .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:clamp(28px,5vw,90px);align-items:start;max-width:none;padding:0}
.register .reg-head,.register .steps,.register .thanks{grid-column:1}
.regfoot{grid-column:2;grid-row:1/4;align-self:center;position:static;margin:0;padding:clamp(26px,2.8vw,40px);border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr;gap:0;text-align:left;max-width:440px;justify-self:end;width:100%}
.regfoot > *{grid-column:1;min-width:0}
.rf-lab{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-hi);font-weight:500;margin-bottom:14px}
.rf-addr{display:block;font-size:clamp(24px,2vw,30px);line-height:1.1;letter-spacing:-.03em;font-weight:500;color:var(--paper);text-decoration:none;transition:color .25s;margin-bottom:22px}
.rf-addr:hover{color:var(--orange-hi)}
.rf-addr small{display:block;font-size:14px;font-weight:400;letter-spacing:0;color:rgba(243,234,218,.65);margin-top:8px}
.rf-hours{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:4px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:22px}
.rf-hours span{font-size:16px;font-weight:500;color:var(--paper);white-space:nowrap}
.rf-hours em{font-style:normal;font-size:14px;color:rgba(243,234,218,.6);white-space:nowrap}
.rf-hours .rf-now{flex-basis:100%;margin-top:6px;font-size:11.5px;letter-spacing:.1em}
.rf-btns{display:grid;grid-template-columns:1fr;gap:10px}
.rf-btns .b{width:100%;justify-content:center;height:48px;white-space:nowrap}
@media(max-width:980px){.register .wrap{grid-template-columns:1fr}.regfoot{grid-column:1;grid-row:auto;position:static;margin-top:28px;max-width:none;justify-self:stretch}.rf-btns{grid-template-columns:1fr 1fr 1fr}.rf-addr br{display:none}}
@media(max-width:640px){.rf-btns{grid-template-columns:1fr}}

/* ---------- FOOTER: textured deep green ---------- */
footer{position:relative;margin-top:0;background:var(--green-deep);color:rgba(243,234,218,.72);border-radius:0;overflow:hidden;isolation:isolate;padding-top:clamp(40px,5vw,72px)}
.ft-bg{position:absolute;inset:0;z-index:-1}
.ft-bg img{width:100%;height:100%;object-fit:cover;opacity:.35;object-position:center 35%;filter:saturate(.7)}
.ft-bg::before{content:"";position:absolute;inset:0;z-index:1;background:var(--noise);background-size:160px;opacity:.16;mix-blend-mode:overlay}
.ft-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(18,41,44,.82) 0%,rgba(18,41,44,.9) 40%,rgba(10,22,24,.98) 100%),
             radial-gradient(60% 50% at 90% 10%,rgba(217,97,47,.28),transparent 70%),
             radial-gradient(40% 40% at 10% 90%,rgba(46,94,99,.5),transparent 70%)}
footer .wrap{max-width:none;padding-inline:var(--gutter)}
footer .f-top{padding-top:0;padding-bottom:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(30px,5vw,80px);border:0;align-items:start}
.f-brand .f-mark{display:block;width:clamp(220px,22vw,340px);color:var(--paper);margin-bottom:26px;transition:color .25s}
.f-brand .f-mark:hover{color:var(--orange-hi)}
.f-brand .f-mark .lg{width:100%;height:auto;display:block;overflow:visible}
.f-brand p{font-size:15px;line-height:1.65;max-width:42ch}
.f-now{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-hi)}
.f-now i{width:8px;height:8px;border-radius:50%;background:var(--orange-hi);box-shadow:0 0 0 0 rgba(240,138,75,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(240,138,75,0)}}
.f-cols{display:grid;grid-template-columns:.8fr 1.5fr .7fr;gap:clamp(20px,3vw,48px)}
.f-cols span{white-space:nowrap}
.f-cols h4{color:var(--orange-hi);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
.f-cols a,.f-cols span{display:block;font-size:15.5px;line-height:1.35;margin-bottom:9px;text-decoration:none;color:rgba(243,234,218,.9)}
.f-cols a{position:relative;width:max-content;max-width:100%;transition:color .25s}
.f-cols a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--orange-hi);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.f-cols a:hover{color:#fff}
.f-cols a:hover::after{transform:scaleX(1)}
.f-cta{display:none}
footer .f-credits{display:flex;flex-wrap:wrap;gap:clamp(34px,6vw,96px);align-items:center;padding-block:38px;border-top:1px solid rgba(255,255,255,.12)}
footer .credit{display:flex;align-items:center;gap:16px}
footer .credit small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,234,218,.6)}
footer .credit a{display:block}
footer .credit .mk{width:auto;opacity:.85;transition:opacity .3s,filter .3s}
footer .credit .mk.dl{height:50px}
footer .credit .mk.tl{height:56px}
footer .credit a:hover .mk{opacity:1;filter:drop-shadow(0 0 10px rgba(240,138,75,.45))}
.totop{margin-left:auto;font-size:13px;color:var(--paper);text-decoration:none;position:relative}
.totop::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--orange-hi);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.totop:hover::after{transform:scaleX(1)}
footer .f-legal{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:20px 30px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:1.6;color:rgba(243,234,218,.5)}
footer .f-legal p{max-width:90ch}
footer .f-legal{padding-block:16px 22px}
@media(max-width:900px){footer .f-top{grid-template-columns:1fr}.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-cols{grid-template-columns:1fr}}

/* ---------- assistant: bigger close, register reminder ---------- */
.cb-x{width:44px;height:44px;font-size:20px;display:grid;place-items:center;border-radius:50%}
.cb-reg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--orange);color:#fff;text-decoration:none;font-size:13px;font-weight:500;transition:background-color .22s}
.cb-reg:hover{background:var(--orange-2)}
.cb-reg small{font-weight:400;opacity:.85}
.cb-reg b{font-weight:500}


/* ---------- misc ---------- */
.magnet{transition:none}
@media(prefers-reduced-motion:reduce){
  .logo,.nav-in,.b,.dr-img,.dr-links a,.pic img,.card-x .ph img,.am-bg img{transition:none}
  .hero-blurb{animation:none !important;opacity:1 !important}
  .f-now i{animation:none}
}

/* assistant launcher: opens out on hover, closes again when you leave */
.cb.cb-tight:not(.open) .cb-launch:hover{padding:14px 22px 14px 18px;gap:11px;border-radius:var(--cb-radius)}
.cb.cb-tight:not(.open) .cb-launch:hover .cb-label{max-width:260px;opacity:1}

/* ---------- LIGHTBOX (shared): type and controls in the site's language ---------- */
.lb{background:rgba(10,20,20,.94)}
.lb-cap{max-width:60ch;padding:16px 20px;border-radius:12px;background:rgba(12,24,26,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(243,234,218,.1)}
.lb-cap b{font-family:'Instrument Sans','Inter',sans-serif;font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--paper);margin-bottom:6px}
.lb-cap{font-family:'Instrument Sans','Inter',sans-serif;font-size:14.5px;line-height:1.55;color:rgba(243,234,218,.78)}
.lb-count{font-family:'Instrument Sans','Inter',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--orange-hi);padding:12px 18px;border-radius:99px;background:rgba(12,24,26,.55);border:1px solid rgba(243,234,218,.1)}
.lb-zoomhint{font-family:'Instrument Sans','Inter',sans-serif;font-size:11.5px;letter-spacing:.14em;color:rgba(243,234,218,.7);background:rgba(12,24,26,.55);border:1px solid rgba(243,234,218,.1);border-radius:99px;padding:10px 16px}
.lb-close,.lb-prev,.lb-next{background:rgba(243,234,218,.1);border:1.5px solid rgba(243,234,218,.28);color:var(--paper);transition:background-color .25s,border-color .25s,transform .4s var(--ease)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--orange);border-color:var(--orange)}
.lb-close:hover{transform:rotate(90deg)}

/* ============================================================
   FOOTER ON SMALL SCREENS
   Brand block, links and credits centre up; the social links become a
   centred row of circular icons; back-to-top becomes a single arrow.
   Desktop is untouched — the icons and the arrow are hidden above 760px.
   ============================================================ */
/* social: circular icon buttons at every width (the <a> carries an aria-label) */
.f-social{display:flex;gap:10px;margin-top:2px}
.f-social a{margin:0;width:auto}
.f-social a::after{display:none}
.f-social .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(243,234,218,.32);color:var(--paper);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.f-social a:hover .ic{background:var(--orange);border-color:var(--orange);color:#fff}
.f-social .ic svg{width:18px;height:18px;display:block}
.totop i{display:none}
@media(max-width:760px){
  footer{padding-top:clamp(34px,8vw,54px)}
  footer .f-top{padding-bottom:20px;gap:28px;text-align:center;justify-items:center}
  .f-brand{display:grid;justify-items:center}
  .f-brand .f-mark{width:min(250px,66vw);margin:0 auto 16px}
  .f-brand p{max-width:38ch;margin-inline:auto;font-size:14.5px}
  .f-now{margin-top:14px}
  .f-cols{grid-template-columns:1fr;gap:24px;text-align:center;justify-items:center}
  .f-cols h4{margin-bottom:10px}
  .f-cols a,.f-cols span{margin-bottom:6px;width:auto}
  .f-cols a::after{display:none}
  /* social: centred circles */
  .f-social{justify-content:center;gap:12px}
  .f-social .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
    border:1.5px solid rgba(243,234,218,.34);color:var(--paper);
    transition:background-color .25s ease,border-color .25s ease,color .25s ease}
  .f-social a:hover .ic,.f-social a:active .ic{background:var(--orange);border-color:var(--orange);color:#fff}
  .f-social .ic svg{width:19px;height:19px;display:block}
  /* credits: bigger marks, stacked and centred */
  footer .f-credits{flex-direction:column;align-items:center;gap:28px;padding-block:34px;text-align:center}
  footer .credit{flex-direction:column;gap:10px}
  footer .credit small{font-size:10.5px}
  footer .credit .mk.dl{height:41px}
  footer .credit .mk.tl{height:46px}
  /* back to top: just the arrow */
  .totop{margin:0}
  .totop .f-label{display:none}
  .totop::after{display:none}
  .totop i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-style:normal;font-size:19px;
    border:1.5px solid rgba(243,234,218,.34);color:var(--paper);
    transition:background-color .25s ease,border-color .25s ease}
  .totop:hover i,.totop:active i{background:var(--orange);border-color:var(--orange);color:#fff}
  footer .f-legal{flex-direction:column;text-align:center;align-items:center;gap:10px;padding-block:14px 24px}
  footer .f-legal p{max-width:46ch;font-size:12px}
}