/* ===== EarthyRoots Farm — homepage redesign (test) =====
   Swap any image by editing the --img-* variables or the <img src>. */
:root{
  --leaf:#581B1D; --leaf-2:#262B1D; --wine:#581B1D; --midnight:#151212; --moss:#581B1D; --cream:#E4D5BC; --paper:#F4ECDD;
  --mango:#B0936D; --mango-d:#6E5231; --clay:#581B1D; --ink:#151212; --mute:#6B5A47;
  --line:rgba(21,18,18,.14); --line-l:rgba(228,213,188,.2);
  --serif:'Literata','Iowan Old Style',Georgia,'Times New Roman',serif; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,80px); --ease:cubic-bezier(.2,.7,.2,1);
  
  
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--ink);background:var(--paper);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;line-height:1.08;letter-spacing:.005em;text-wrap:balance}
body{font-feature-settings:'kern';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{font-size:clamp(46px,8vw,128px);line-height:1.02}
h2{font-size:clamp(38px,5.4vw,86px)}
h3{font-size:clamp(28px,2.7vw,42px)}
em{font-style:italic;color:var(--mango-d);letter-spacing:-.015em}
.dark em,.hero em{color:var(--mango)}
.eyebrow{font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;font-weight:600;color:var(--moss);display:flex;align-items:center;gap:14px;margin-bottom:28px}
.eyebrow:before{content:"";width:48px;height:1px;background:currentColor}
.dark .eyebrow{color:var(--mango)}
section{position:relative}
.wrap{padding:clamp(80px,12vw,180px) var(--pad)}
.dark{background:var(--leaf);color:var(--cream)}
.cream{background:var(--cream)}
.lede{font-size:clamp(16px,1.3vw,19px);max-width:54ch;color:var(--mute);line-height:1.85;font-weight:400}
.dark .lede{color:rgba(228,213,188,.72)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border:1px solid currentColor;font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;transition:.5s var(--ease);position:relative;overflow:hidden}
.btn:after{content:"→";transition:transform .5s var(--ease)}
.btn:hover:after{transform:translateX(6px)}
.btn.solid{background:var(--mango);border-color:var(--mango);color:var(--leaf)}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--leaf)}
.link{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:6px}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.mask{overflow:hidden}
.mask img{transform:scale(1.18);transition:transform 1.8s var(--ease)}
.mask.in img{transform:scale(1)}

/* loader */
#loader{position:fixed;inset:0;background:var(--leaf);z-index:999;display:grid;place-items:center;transition:opacity .9s .2s,visibility .9s .2s}
#loader.off{opacity:0;visibility:hidden}
#loader span{font-family:var(--serif);font-size:clamp(34px,5vw,64px);color:var(--cream);letter-spacing:.01em;animation:pulse 1.6s ease-in-out infinite}
#loader i{color:var(--mango);font-style:italic}
@keyframes pulse{50%{opacity:.35}}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);color:var(--cream);transition:.6s var(--ease)}
header.solid{background:rgba(21,18,18,.28);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%);border-bottom:1px solid rgba(228,213,188,.14);padding-top:14px;padding-bottom:14px}
header.hide{transform:translateY(-100%)}
.logo img{height:46px;width:auto}
.nav-r{display:flex;align-items:center;gap:28px}
.nav-r .tel{font-size:13px;letter-spacing:.08em}
.burger{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.burger b{display:block;width:30px;height:10px;position:relative}
.burger b:before,.burger b:after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:.5s var(--ease)}
.burger b:before{top:0}.burger b:after{bottom:0}
.menu-open .burger b:before{top:4px;transform:rotate(25deg)}
.menu-open .burger b:after{bottom:5px;transform:rotate(-25deg)}
#menu{position:fixed;inset:0;z-index:90;background:var(--leaf);color:var(--cream);display:grid;grid-template-columns:1.1fr 1fr;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);visibility:hidden}
.menu-open #menu{clip-path:inset(0);visibility:visible}
#menu nav{display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 60px}
#menu nav a{font-family:var(--serif);font-size:clamp(42px,6.4vw,96px);line-height:1.12;display:flex;gap:22px;align-items:baseline;transition:.4s;opacity:.85}
#menu nav a small{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--mango)}
#menu nav a:hover{color:var(--mango);padding-left:14px;opacity:1}
#menu aside{background:var(--img-hero) center/cover;position:relative}
#menu aside:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(49,54,38,.85),rgba(49,54,38,.2))}
#menu aside div{position:absolute;left:40px;right:40px;bottom:50px;font-size:14px;line-height:2}
#menu aside strong{font-family:var(--serif);font-weight:400;font-size:30px;display:block;margin-bottom:10px}
.menu-open{overflow:hidden}

/* hero */
.hero{height:100svh;min-height:640px;color:var(--cream);overflow:hidden;display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:-6% 0;background:var(--img-hero) center/cover,linear-gradient(160deg,#581B1D,#151212);animation:kb 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.14) translateY(-2%)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,18,18,.9) 4%,rgba(21,18,18,.15) 55%,rgba(21,18,18,.5))}
.hero-in{position:relative;z-index:2;padding:0 var(--pad) clamp(60px,9vh,110px);width:100%;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hero h1{max-width:14ch}
.hero p{max-width:46ch;margin-top:28px;font-size:clamp(15px,1.25vw,18px);color:rgba(228,213,188,.82)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.scroll{writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:16px}
.scroll:after{content:"";width:1px;height:70px;background:var(--cream);transform-origin:top;animation:ln 2.2s ease-in-out infinite}
@keyframes ln{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-l)}
.stat{padding:48px var(--pad) 48px 0;border-right:1px solid var(--line-l)}
.stat:first-child{padding-left:var(--pad)}.stat+.stat{padding-left:32px}.stat:last-child{border:0}
.stat b{font-family:var(--serif);font-weight:400;font-size:clamp(60px,7.4vw,118px);line-height:.95;color:var(--mango);display:block}
.stat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(228,213,188,.7)}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,7vw,120px);align-items:end}
.manifesto h2{margin-bottom:36px}
.twin{display:grid;gap:34px;margin-top:56px}
.twin div{border-top:1px solid var(--line);padding-top:24px}
.twin h3{font-size:30px;margin-bottom:10px}
.imgs{position:relative;height:clamp(420px,52vw,760px)}
.imgs .a{position:absolute;right:0;top:0;width:78%;height:78%}
.imgs .b{position:absolute;left:0;bottom:0;width:52%;height:46%;border:10px solid var(--paper)}
.imgs img{width:100%;height:100%;object-fit:cover}
.imgs .tag{position:absolute;right:-6px;bottom:6%;background:var(--mango);color:var(--leaf);padding:20px 24px;z-index:2;font-family:var(--serif);font-size:44px;line-height:1}
.imgs .tag small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}

/* aamra */
.aamra{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.aamra .pic{position:sticky;top:0;height:100svh;overflow:hidden}
.aamra .pic img{width:100%;height:100%;object-fit:cover}
.aamra .txt{padding:clamp(80px,12vw,180px) var(--pad)}
.aamra h2{margin-bottom:30px}
.pillars{margin-top:56px}
.pillar{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line-l)}
.pillar i{font-style:normal;font-family:var(--serif);color:var(--mango);font-size:26px}
.pillar h3{font-size:28px;margin-bottom:6px}
.pillar p{font-size:15px;color:rgba(228,213,188,.68)}
.size{font-family:var(--serif);font-size:clamp(40px,4.8vw,70px);color:var(--mango);margin-top:44px;line-height:1}
.size small{display:block;font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(228,213,188,.6);margin-top:10px}

/* within the gate */
.gate-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:70px}
.gate-list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:90px 1.1fr 1.4fr 150px;gap:24px;padding:38px 0;border-bottom:1px solid var(--line);align-items:start;transition:.5s var(--ease);cursor:default}
.row:hover{padding-left:20px;background:rgba(176,147,109,.08)}
.row .n{font-family:var(--serif);font-size:30px;color:var(--mango-d)}
.row p.s{color:var(--mute);margin-top:10px;font-size:15px}
.row ul{list-style:none;columns:2;column-gap:30px;font-size:15px}
.row li{padding:3px 0}.row li:before{content:"—  ";color:var(--mango-d)}
.row .c{font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:right;color:var(--moss)}

/* amenity rail */
.rail-head{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:0 var(--pad);margin-bottom:60px;flex-wrap:wrap}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(290px,34vw,500px);scroll-snap-align:start;position:relative;height:clamp(440px,52vw,680px);overflow:hidden;color:var(--cream)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.card:hover img{transform:scale(1.08)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,18,18,.92),rgba(21,18,18,0) 62%)}
.card .t{position:absolute;left:28px;right:28px;bottom:28px;z-index:2}
.card .t span{font-size:11px;letter-spacing:.2em;color:var(--mango)}
.card h3{font-size:clamp(26px,2.4vw,36px);margin:8px 0 10px}
.card p{font-size:14px;color:rgba(228,213,188,.78);max-height:0;opacity:0;overflow:hidden;transition:.7s var(--ease)}
.card:hover p,.card:focus-within p{max-height:150px;opacity:1}
@media(hover:none){.card p{max-height:150px;opacity:1}}
.rail-ctl{display:flex;gap:10px}
.rail-ctl button{width:54px;height:54px;border:1px solid var(--line-l);color:var(--cream);font-size:20px;transition:.4s}
.rail-ctl button:hover{background:var(--mango);color:var(--leaf);border-color:var(--mango)}

/* masterplan */
.mp-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:50px}
.mp-bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:10px 20px;border:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.35s}
.chip.on,.chip:hover{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.legend{display:flex;gap:20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.k-a{background:#5C9E3F}.k-r{background:var(--mango)}.k-s{background:#B64B3A}
.remain{font-family:var(--serif);font-size:30px}
.mp{position:relative;height:clamp(380px,62vw,780px);background:#e7e0cf;overflow:hidden;cursor:grab;touch-action:none}
.mp.drag{cursor:grabbing}
.mp .stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.mp img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.mk{position:absolute;width:22px;height:22px;margin:-11px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .3s}
.mk:hover,.mk.sel{transform:scale(1.5);z-index:3}
.mk.available{background:#5C9E3F}.mk.reserved{background:var(--mango)}.mk.sold{background:#B64B3A}
.mk.dim{opacity:.18;pointer-events:none}
.mp-tools{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:5}
.mp-tools button{width:46px;height:46px;background:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:20px}
.mp-tip{position:absolute;left:16px;bottom:16px;background:var(--leaf);color:var(--cream);padding:18px 22px;font-size:13px;z-index:5;max-width:280px;line-height:1.6}
.mp-tip b{font-family:var(--serif);font-size:24px;font-weight:400;display:block;color:var(--mango)}
.mp-note{margin-top:16px;font-size:12px;color:var(--mute)}

/* why / benefits */
.ben{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:70px;border-top:1px solid var(--line-l)}
.ben div{padding:36px 32px 36px 0;border-bottom:1px solid var(--line-l)}
.ben div:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--line-l)}
.ben h3{font-size:28px;margin-bottom:10px}
.ben p{font-size:15px;color:rgba(228,213,188,.68)}
.ben .no{font-family:var(--serif);color:var(--mango);font-size:20px;display:block;margin-bottom:14px}

/* location */
.loc{height:100svh;min-height:600px;color:var(--cream);display:flex;align-items:center;overflow:hidden}
.loc .bg{position:absolute;inset:-8% 0;background:var(--img-location) center/cover,var(--leaf-2)}
.loc:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,18,18,.88),rgba(21,18,18,.2))}
.loc-in{position:relative;z-index:2;padding:0 var(--pad);max-width:900px}
.loc h3{font-size:clamp(26px,3vw,44px);margin:30px 0 40px;font-style:italic}

/* gallery */
.gal{columns:3;column-gap:16px;margin-top:60px}
.gal button{display:block;width:100%;margin-bottom:16px;overflow:hidden;position:relative}
.gal img{width:100%;transition:transform 1.4s var(--ease)}
.gal button:hover img{transform:scale(1.06)}
.gal button:after{content:"View ↗";position:absolute;left:18px;bottom:16px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.5s}
.gal button:hover:after{opacity:1}
#lb{position:fixed;inset:0;background:rgba(21,18,18,.96);z-index:300;display:none;place-items:center}
#lb.on{display:grid}
#lb img{max-width:90vw;max-height:84vh}
#lb button{position:absolute;color:#fff;font-size:30px;padding:20px}
#lb .x{top:10px;right:14px}#lb .p{left:6px;top:50%}#lb .nx{right:6px;top:50%}
#lb small{position:absolute;bottom:22px;color:#fff;letter-spacing:.2em;font-size:11px}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.visit .contacts{margin-top:46px;display:grid;gap:22px}
.visit .contacts a,.visit .contacts p{font-size:15px}
.visit .contacts b{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--moss);font-weight:500;margin-bottom:4px}
.dark .visit .contacts b{color:var(--mango)}
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;background:var(--cream);padding:clamp(28px,4vw,56px)}
form .f{display:flex;flex-direction:column;gap:6px}
form .full{grid-column:1/-1}
label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--moss)}
input,textarea{font:inherit;font-size:16px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;color:var(--ink);outline:0;transition:.3s;border-radius:0}
input:focus,textarea:focus{border-color:var(--mango-d)}
textarea{min-height:90px;resize:vertical}
form .btn{justify-self:start;background:var(--wine);color:var(--cream);border-color:var(--wine)}
form .btn:hover{background:var(--mango);color:var(--leaf);border-color:var(--mango)}
#fmsg{grid-column:1/-1;font-size:14px;min-height:20px}

/* footer */
footer{background:var(--midnight);color:var(--cream);padding:clamp(70px,9vw,130px) var(--pad) 120px}
.big{font-family:var(--serif);font-weight:400;font-size:clamp(72px,17vw,290px);line-height:.85;letter-spacing:-.02em;margin-bottom:70px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;border-top:1px solid var(--line-l);padding-top:50px;font-size:14px}
.fgrid h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mango);font-weight:500;margin-bottom:18px}
.fgrid li{list-style:none;padding:4px 0}
.fgrid a:hover{color:var(--mango)}
.fgrid img{height:56px;margin-bottom:18px}
.fgrid p{color:rgba(228,213,188,.7);max-width:34ch}
.copy{margin-top:60px;font-size:12px;color:rgba(228,213,188,.5)}

/* mobile dock */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--wine);border-top:1px solid var(--line-l)}
.dock a{flex:1;text-align:center;padding:16px 4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);font-weight:500}
.dock a+a{border-left:1px solid var(--line-l)}
.dock a:last-child{background:var(--mango);color:var(--leaf)}

@media(max-width:980px){
  #menu{grid-template-columns:1fr}#menu aside{display:none}
  .nav-r .tel{display:none}
  .stats{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--line-l)}.stat:nth-child(2){border-right:0}.stat:nth-child(3){padding-left:var(--pad)}
  .manifesto,.mp-head,.gate-head,.visit{grid-template-columns:1fr}
  .aamra{grid-template-columns:1fr}.aamra .pic{position:relative;height:62vh}
  .row{grid-template-columns:50px 1fr;gap:10px 16px}.row ul,.row .c{grid-column:2}.row .c{text-align:left}
  .ben{grid-template-columns:1fr}.ben div,.ben div:not(:nth-child(3n+1)){padding:30px 0;border-left:0}
  .gal{columns:2}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero-in{grid-template-columns:1fr}.scroll{display:none}
  .dock{display:flex}
}
@media(max-width:560px){.gal{columns:1}.fgrid{grid-template-columns:1fr}form{grid-template-columns:1fr}.row ul{columns:1}.imgs .tag{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.mask img{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== Brand deck layer: Bordeaux Velvet #581B1D · Heirloom Pearl #E4D5BC · Baroque Brass #6E5231 · Forgotten Manuscript #B0936D · Forest Olive #313626 (kept on the site-visit block) · Midnight Study #151212 ===== */
.wine{background:var(--wine);color:var(--cream)}
.ink{background:var(--midnight);color:var(--cream)}
.tagline{font-size:11px;letter-spacing:.42em;text-transform:uppercase;font-weight:500;color:var(--mango);margin-top:26px}
.hero .tagline{margin-bottom:-6px}
.imgs .a{border-radius:999px 999px 0 0}
.imgs .b{border-radius:0 0 0 0}
.card{border-radius:240px 240px 0 0}
.card .t{text-align:center;left:20px;right:20px}
.card:after{background:linear-gradient(to top,rgba(21,18,18,.94),rgba(21,18,18,0) 60%)}
.hero .eyebrow,.eyebrow{font-weight:500}
.btn.solid{color:var(--midnight)}
.logo span{letter-spacing:.02em}
#menu nav a{letter-spacing:.01em}
.big{letter-spacing:0}
.stat b,.row .n,.pillar i,.remain,.size{font-family:var(--serif)}
::selection{background:var(--mango);color:var(--midnight)}
@media(max-width:560px){.card{border-radius:160px 160px 0 0}}
/* ===== Hero drone video ===== */
.hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.5) saturate(1.15);transform:scale(1.2);opacity:0;transition:opacity 1.4s}
.hframe{position:absolute;overflow:hidden;opacity:0;transition:opacity 1.4s;inset:0}
.hframe video{position:absolute;left:0;top:0;width:100%;height:112%;object-fit:cover}
.hero.vid .hframe,.hero.vid .hbg{opacity:1}
.hero.vid .bg{opacity:0;transition:opacity 1.4s}
.hbar{position:absolute;left:var(--pad);bottom:30px;z-index:3;display:flex;align-items:center;gap:22px}
.hseg{display:flex;gap:6px}
.hseg i{display:block;width:clamp(34px,5vw,64px);height:2px;background:rgba(228,213,188,.3);position:relative;overflow:hidden;cursor:pointer}
.hseg i:before{content:"";position:absolute;inset:0;background:var(--mango);transform:scaleX(0);transform-origin:0 50%}
.hseg i.done:before{transform:scaleX(1)}
.vctl{font-size:10px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;color:var(--cream);border:1px solid var(--line-l);padding:9px 16px;backdrop-filter:blur(6px);background:rgba(21,18,18,.25);transition:.4s}
.vctl:hover{background:var(--mango);color:var(--midnight);border-color:var(--mango)}
@media(min-width:981px){
  .hbg{display:block}
  .hframe{inset:auto;right:calc(var(--pad) + 1vw);top:50%;transform:translateY(-46%);height:76vh;aspect-ratio:9/16;border-radius:999px 999px 0 0;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .hero-in>div:first-child{max-width:calc(100% - 44vh - 6vw)}
  .hero h1{font-size:clamp(46px,6.2vw,104px)}
  .scroll{display:none}
}
@media(max-width:980px){
  .hbg{display:none}
  .hbar{bottom:82px}
  .hero-in{padding-bottom:150px}
}
@media(max-width:980px){
  header .nav-r .btn{display:none}
  .logo,.logo span{white-space:nowrap}.logo span{font-size:23px!important}
  .hero .eyebrow{display:none}
  .hero:after{background:linear-gradient(to top,rgba(21,18,18,.94) 10%,rgba(21,18,18,.6) 55%,rgba(21,18,18,.5))}
  .hero p{font-size:14px;line-height:1.7;margin-top:16px}
  .hero .cta{margin-top:22px;gap:10px;flex-wrap:nowrap}
  .hero .cta .btn{padding:15px 14px;flex:1;justify-content:center;font-size:10px;letter-spacing:.18em}
  .hero .cta .btn:after{display:none}
  .tagline{letter-spacing:.24em;font-size:10px}
  .hero-in{padding-bottom:140px}
}
@media(min-width:981px){.hero .tagline{letter-spacing:.3em;white-space:nowrap}}
header em,footer em{color:var(--mango)}

/* ===== Inner pages ===== */
.phero{height:78svh;min-height:520px;color:var(--cream);display:flex;align-items:flex-end;overflow:hidden;background:var(--midnight)}
.phero .pbg{position:absolute;inset:-6% 0;background-size:cover;background-position:center}
.phero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,18,18,.92) 6%,rgba(21,18,18,.25) 60%,rgba(21,18,18,.55))}
.phero .pin{position:relative;z-index:2;padding:0 var(--pad) clamp(56px,9vh,100px);width:100%}
.crumb{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mango);margin-bottom:22px;font-weight:500}
.crumb a:hover{color:var(--cream)}
.phero h1{font-size:clamp(52px,9vw,148px);line-height:1}
.phero p.sub{max-width:52ch;margin-top:22px;color:rgba(228,213,188,.82);font-size:clamp(15px,1.2vw,18px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.split.rev>:first-child{order:2}
.arch{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.arch img{width:100%;height:100%;object-fit:cover}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:70px;border-top:1px solid var(--line)}
.step{padding:40px 36px 20px 0}
.step+.step{padding-left:36px;border-left:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:clamp(54px,6vw,92px);color:var(--mango-d);line-height:1;display:block;margin-bottom:18px}
.step h3{margin-bottom:12px}
.dark .step,.dark .steps,.dark .step+.step{border-color:var(--line-l)}
.dark .step .n{color:var(--mango)}
.mini-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:50px}
.info{width:100%;border-top:1px solid var(--line-l);margin-top:34px}
.info div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-l);font-size:15px}
.info b{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mango);font-weight:500;padding-top:3px}
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border-top:1px solid var(--line)}
.group{padding:38px 32px 30px 0}
.group+.group{padding-left:32px;border-left:1px solid var(--line)}
.group h3{margin-bottom:22px}
.group ul{list-style:none;font-size:15.5px}
.group li{padding:9px 0;border-bottom:1px solid var(--line)}
.group li:before{content:"— ";color:var(--mango-d)}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px}
.hl article{background:rgba(228,213,188,.07);border:1px solid var(--line-l);padding:38px 32px;transition:.5s var(--ease)}
.hl article:hover{background:rgba(176,147,109,.14);transform:translateY(-6px)}
.hl h3{font-size:clamp(26px,2.3vw,34px);margin-bottom:12px}
.hl p{font-size:15px;color:rgba(228,213,188,.72)}
.strip{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center;margin-top:50px;padding:34px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.strip b{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,52px);color:var(--mango)}
.arow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,110px);align-items:center;padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--line)}
.arow:nth-child(even) .pic{order:2}
.arow .pic{aspect-ratio:5/4;overflow:hidden}
.arow:nth-child(odd) .pic{border-radius:999px 999px 0 0;aspect-ratio:4/5;max-height:640px;width:min(100%,520px)}
.arow:nth-child(even) .pic{border-radius:0 0 999px 999px;aspect-ratio:4/5;max-height:640px;width:min(100%,520px);margin-left:auto}
.arow .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.arow:hover .pic img{transform:scale(1.06)}
.arow .no{font-family:var(--serif);font-size:clamp(54px,6vw,96px);color:var(--mango-d);line-height:1;display:block;margin-bottom:12px}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px}
.acard{position:relative;overflow:hidden}
.acard .pic{aspect-ratio:3/4;overflow:hidden;border-radius:220px 220px 0 0}
.acard img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.acard:hover img{transform:scale(1.08)}
.acard h3{font-size:clamp(22px,1.9vw,28px);margin:18px 0 8px}
.acard p{font-size:14px;color:var(--mute);line-height:1.7}
.mason{columns:3;column-gap:16px}
.mason button{display:block;width:100%;margin-bottom:16px;overflow:hidden;position:relative;background:var(--cream)}
.mason img{width:100%;transition:transform 1.4s var(--ease)}
.mason button:hover img{transform:scale(1.05)}
.mason button:after{content:"View ↗";position:absolute;left:18px;bottom:16px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.5s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mason button:hover:after{opacity:1}
.cblocks{display:grid;gap:26px;margin-top:44px}
.cblock{display:grid;grid-template-columns:52px 1fr;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.cblock i{font-style:normal;font-family:var(--serif);font-size:28px;color:var(--mango-d)}
.cblock b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);font-weight:500;margin-bottom:6px}
.cblock a:hover{color:var(--mango-d)}
.banner{text-align:center;padding:clamp(70px,9vw,140px) var(--pad)}
.banner h2{max-width:18ch;margin:0 auto 30px}
.promise{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--line-l)}
.promise div{padding:34px 30px 10px 0}
.promise div+div{padding-left:30px;border-left:1px solid var(--line-l)}
.promise span{font-family:var(--serif);font-size:clamp(34px,3.6vw,56px);color:var(--mango);display:block;line-height:1}
.promise p{font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-top:12px;color:rgba(228,213,188,.75)}
.nav-cur{color:var(--mango)!important}
@media(max-width:980px){
  .split{grid-template-columns:1fr}.split.rev>:first-child{order:0}
  .steps,.groups,.hl,.promise{grid-template-columns:1fr}
  .step,.step+.step,.group,.group+.group,.promise div,.promise div+div{padding:28px 0;border-left:0}
  .step+.step,.group+.group,.promise div+div{border-top:1px solid var(--line)}
  .promise div+div{border-top-color:var(--line-l)}
  .arow{grid-template-columns:1fr}.arow:nth-child(even) .pic{order:0;margin-left:0}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .mason{columns:2}
  .info div{grid-template-columns:110px 1fr}
}
@media(max-width:560px){.agrid{grid-template-columns:1fr}.mason{columns:1}.acard .pic{border-radius:160px 160px 0 0}}
.cblock{display:block}

.pg{display:none}.pg.on{display:block}

:root{--img-hero:url('/images/redesign/gate_dusk.jpg');--img-location:url('/images/redesign/orchard.jpg')}
/* progress fill for the hero segment bar (the preview injected this at runtime) */
.hseg i:before{transform:scaleX(var(--p,0));transform-origin:left center}
.hseg i.done:before{transform:scaleX(1)}
/* circular menu control (label removed) */
.burger{
	width:46px;
	height:46px;
	flex:0 0 46px;
	padding:0;
	border-radius:50%;
	border:1px solid rgba(228,213,188,.38);
	display:grid;
	place-items:center;
	gap:0;
	transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.burger:hover{border-color:rgba(228,213,188,.75);background:rgba(228,213,188,.09)}
.burger b{width:18px;height:8px}
/* open state: two bars converge into a true 45deg cross */
.menu-open .burger b{width:20px}
.menu-open .burger b:before{top:3.5px;transform:rotate(45deg)}
.menu-open .burger b:after{bottom:3.5px;transform:rotate(-45deg)}
/* the site-visit block keeps the original forest olive */
section#visit.dark,
#visit{background:#313626}
/* ---------------------------------------------------------------------------
   Footer — "Come home." editorial block
   --------------------------------------------------------------------------- */

#footer{
	background:#0F0D0D;
	color:var(--cream);
	padding:clamp(64px,8vw,110px) 0 34px;
	overflow:hidden;
}

.f-script{
	font-family:var(--script);
	font-weight:400;
	font-size:clamp(58px,10.5vw,168px);
	line-height:.92;
	letter-spacing:-.01em;
	margin:0;
	background:linear-gradient(172deg,#F1E3C9 0%,#D8C09A 38%,#A98A5E 78%,#6E5231 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}

.f-tag{
	margin-top:clamp(22px,3vw,40px);
	font-size:11px;
	font-weight:500;
	letter-spacing:.42em;
	text-transform:uppercase;
	color:var(--manuscript,#B0936D);
	opacity:.9;
}

.f-rule{
	height:1px;
	background:rgba(228,213,188,.16);
	margin:clamp(38px,4.6vw,60px) 0 clamp(38px,4.4vw,58px);
}

.f-grid{
	display:grid;
	grid-template-columns:1.55fr 1fr 1.15fr 1.35fr;
	gap:clamp(28px,4vw,64px);
	align-items:start;
}

.f-mark{
	font-family:var(--script);
	font-size:clamp(28px,2.4vw,38px);
	line-height:1.1;
	color:var(--cream);
}

.f-brand p{
	margin-top:22px;
	max-width:40ch;
	font-size:14.5px;
	line-height:1.78;
	color:rgba(228,213,188,.68);
}

.f-col h3{
	font-family:var(--sans);
	font-size:11px;
	font-weight:500;
	letter-spacing:.26em;
	text-transform:uppercase;
	color:var(--manuscript,#B0936D);
	margin:0 0 22px;
}

.f-col ul{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:13px;
}

.f-col li,
.f-col a{
	font-size:15px;
	line-height:1.5;
	color:rgba(228,213,188,.86);
	text-decoration:none;
	transition:color .35s var(--ease), padding-left .35s var(--ease);
}

.f-col a:hover{
	color:var(--cream);
	padding-left:4px;
}

.f-contact a{
	display:block;
	margin-bottom:10px;
}

.f-contact a.f-addr{
	margin-top:6px;
	max-width:34ch;
	line-height:1.7;
	font-size:14px;
	color:rgba(228,213,188,.72);
}

.f-contact a.f-addr:hover{
	padding-left:0;
	color:var(--cream);
}

.f-bottom{
	margin-top:clamp(46px,6vw,80px);
	padding-top:26px;
	border-top:1px solid rgba(228,213,188,.12);
	font-size:12.5px;
	letter-spacing:.01em;
	color:rgba(228,213,188,.5);
}

@media only screen and (max-width: 991px){

	.f-grid{
		grid-template-columns:1fr 1fr;
		row-gap:44px;
	}

	.f-brand{
		grid-column:1 / -1;
	}
}

@media only screen and (max-width: 640px){

	.f-grid{
		grid-template-columns:1fr;
	}

	.f-script{
		font-size:clamp(52px,15vw,92px);
	}
}
:root{
	--script:'Mea Culpa','Literata',cursive;
	--manuscript:#B0936D;
}
/* menu overlay: a touch smaller link type */
#menu nav a{font-size:clamp(34px,5.2vw,82px)}
/* ---------------------------------------------------------------------------
   Drifting cloud layer over the masterplan (ported from the old Location3D)
   --------------------------------------------------------------------------- */

.mp-clouds{
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
	z-index:2;
}

.mp-clouds .cloud,
.mp-clouds .cloud-shadow{
	position:absolute;
	border-radius:50%;
	animation:mp-cloud 26s ease-in-out infinite alternate;
	will-change:transform;
}

.mp-clouds .cloud{
	background:radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 40%, transparent 70%);
	filter:blur(14px);
	opacity:.72;
}

.mp-clouds .cloud-shadow{
	background:radial-gradient(ellipse at center, rgba(20,6,7,.38), transparent 70%);
	filter:blur(18px);
	opacity:.5;
}

.mp-clouds .c1{ left:8%;  top:12%; width:32%; height:22%; }
.mp-clouds .c2{ left:62%; top:58%; width:28%; height:20%; animation-duration:32s; }
.mp-clouds .c3{ left:70%; top:4%;  width:22%; height:16%; animation-duration:22s; }
.mp-clouds .cloud-shadow{ margin:4% 0 0 3%; }

@keyframes mp-cloud{
	from{ transform:translate3d(-12%,0,0); }
	to{ transform:translate3d(14%,6%,0); }
}

@media (prefers-reduced-motion: reduce){
	.mp-clouds .cloud,
	.mp-clouds .cloud-shadow{ animation:none; }
}
/* ---------------------------------------------------------------------------
   Amenity icon grid (ported from the old project's AmenityIconsSection)
   --------------------------------------------------------------------------- */

.amenity-grid{
	margin-top:clamp(34px,4vw,56px);
	border-top:1px solid var(--line);
}

.azone{
	border-bottom:1px solid var(--line);
	padding:clamp(30px,3.4vw,46px) 0 clamp(34px,4vw,52px);
	display:grid;
	gap:clamp(24px,3vw,38px);
}

.azone-head{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:start;
	gap:clamp(16px,3vw,40px);
}

.azone-num{
	font-family:var(--serif);
	font-size:clamp(16px,1.5vw,20px);
	color:var(--mango-d);
	line-height:1.9;
}

.azone-head h3{
	margin:0;
	font-size:clamp(26px,2.7vw,40px);
}

.azone-head p{
	margin:10px 0 0;
	font-size:14.5px;
	color:var(--mute);
}

.azone-count{
	align-self:start;
	border:1px solid rgba(21,18,18,.22);
	border-radius:999px;
	padding:8px 16px;
	font-size:10px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--mute);
	white-space:nowrap;
}

.azone-icons{
	display:flex;
	flex-wrap:wrap;
	gap:clamp(20px,3.2vw,48px);
	list-style:none;
	margin:0;
	padding:0;
}

.azicon{
	width:clamp(92px,10vw,124px);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	text-align:center;
}

.azbadge{
	position:relative;
	width:clamp(64px,6.6vw,84px);
	aspect-ratio:1;
	border-radius:50%;
	background:#fff;
	display:grid;
	place-items:center;
	box-shadow:0 14px 26px -20px rgba(21,18,18,.55);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}

.azring{
	position:absolute;
	inset:5px;
	border-radius:50%;
	border:1px solid rgba(88,27,29,.22);
}

.azbadge svg{
	width:42%;
	height:42%;
	fill:none;
	stroke:var(--wine);
	stroke-width:1.4;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.azlabel{
	font-size:11px;
	letter-spacing:.09em;
	text-transform:uppercase;
	line-height:1.55;
	color:var(--ink);
}

.azicon:hover .azbadge{
	transform:translateY(-4px);
	box-shadow:0 22px 34px -22px rgba(88,27,29,.6);
}

@media (max-width:640px){
	.azone-head{ grid-template-columns:auto 1fr; }
	.azone-count{ grid-column:2; justify-self:start; }
}
/* "Everything you need," stays on one line */
.gate-head{
	grid-template-columns:1fr;
}

.gate-head > div{
	grid-column:1 / -1;
	max-width:none;
}

.gate-head h2 em{
	display:block;
}

.h-nowrap{
	white-space:nowrap;
}

@media (max-width:520px){
	.h-nowrap{ white-space:normal; }
}

/* amenity icons: scroll stagger, hover fill, orbit ring, self-drawing strokes */

.amenity-grid.is-drawable .azicon{
	opacity:0;
	transform:translateY(24px);
	transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
	transition-delay:calc(var(--i) * 70ms);
}

.amenity-grid.is-drawable.is-in .azicon{
	opacity:1;
	transform:none;
}

.azring{
	inset:-7px;
	border:1px dashed rgba(176,147,109,.55);
	opacity:0;
	transition:opacity .4s ease;
}

.azicon:hover .azring{
	opacity:1;
	animation:az-orbit 9s linear infinite;
}

.azicon:hover .azbadge{
	background:var(--wine);
	transform:translateY(-6px);
	box-shadow:0 20px 32px -18px rgba(88,27,29,.6);
}

.azicon:hover .azbadge svg{
	stroke:var(--cream);
	transform:scale(1.06);
}

.azicon:hover .azlabel{
	color:var(--mango-d);
}

.azbadge svg [pathLength]{
	stroke-dasharray:1;
	stroke-dashoffset:0;
}

.azicon:hover .azbadge svg [pathLength]{
	animation:az-draw 1.2s cubic-bezier(.65,0,.35,1) both;
}

@keyframes az-orbit{
	to{ transform:rotate(360deg); }
}

@keyframes az-draw{
	from{ stroke-dashoffset:1; }
	to{ stroke-dashoffset:0; }
}

@media (prefers-reduced-motion: reduce){
	.amenity-grid.is-drawable .azicon{ opacity:1; transform:none; transition:none; }
	.azicon:hover .azring{ animation:none; }
	.azicon:hover .azbadge svg [pathLength]{ animation:none; }
}
/* ---------------------------------------------------------------------------
   Layout consistency: one rhythm and one horizontal inset for every section
   --------------------------------------------------------------------------- */

:root{
	--section-y:clamp(80px,10vw,140px);
}

.wrap{
	padding:var(--section-y) var(--pad);
}

.rail-section{
	padding:var(--section-y) 0;
}

.rail-foot{
	padding:50px var(--pad) 0;
}

.why-head{
	margin-bottom:clamp(40px,5vw,64px);
}

@media (max-width:900px){

	.mp-head{
		grid-template-columns:1fr;
		gap:26px;
		align-items:start;
	}
}
/* ---------------------------------------------------------------------------
   Alignment pass: stats band, section headers and card rhythm
   --------------------------------------------------------------------------- */

.stats{
	padding:0 var(--pad);
	border-top:1px solid var(--line-l);
}

.stat{
	padding:clamp(30px,3.4vw,48px) clamp(16px,2.4vw,40px) clamp(30px,3.4vw,48px) 0;
}

.stat:last-child{
	border-right:0;
	padding-right:0;
}

.rail-head{
	align-items:flex-end;
	margin-bottom:clamp(40px,5vw,64px);
}

.rail-section > .rail-foot{
	margin-top:clamp(30px,4vw,50px);
}
/* footer now uses the site's primary serif instead of the script face */
#footer .f-script{
	font-family:var(--serif);
	font-style:italic;
	font-weight:400;
	letter-spacing:-.02em;
}

#footer .f-mark{
	font-family:var(--serif);
	font-style:normal;
	font-weight:500;
	letter-spacing:-.01em;
}

/* text wordmark in the top bar */
.logo{
	display:flex;
	align-items:center;
}

.logo .logo-text{
	font-family:var(--serif);
	font-size:23px;
	line-height:1;
	letter-spacing:-.015em;
	color:var(--ink);
	white-space:nowrap;
}

header#hdr.hide .logo .logo-text,
#hdr:not(.solid) .logo .logo-text{
	color:var(--cream);
}

header#hdr.solid .logo .logo-text{
	color:var(--ink);
}
/* the wordmark keeps one colour whether the bar is transparent or solid */
#hdr .logo .logo-text,
#hdr.solid .logo .logo-text,
header#hdr.solid .logo .logo-text,
header#hdr.hide .logo .logo-text{
	color:var(--cream);
}

/* mobile menu: give the links room to breathe */
@media (max-width: 767px){

	#menu nav{
		gap: clamp(12px, 3vw, 20px);
		padding: 96px var(--pad) 48px;
	}

	#menu nav a{
		line-height: 1.18;
	}

	#menu nav a small{
		font-size: 9.5px;
	}
}
/* menu overlay: consistent spacing between links on every viewport */
#menu nav{
	gap: clamp(10px, 1.4vw, 22px);
}

#menu nav a{
	line-height: 1.14;
}

@media (max-height: 760px){
	#menu nav{
		padding-top: 84px;
		padding-bottom: 40px;
	}
}
/* selecting a menu entry: dismiss the overlay in the same frame */
body.menu-dismiss #menu,
body.menu-dismiss #menu *{
	transition: none !important;
	animation: none !important;
}

body.menu-dismiss #menu{
	visibility: hidden !important;
	clip-path: inset(0 0 100% 0) !important;
	pointer-events: none !important;
}
/* loader mark: the supplied artwork replaces the wordmark */
#loader .loader-mark{
	width: clamp(120px, 16vw, 190px);
	height: auto;
	display: block;
	animation: pulse 1.9s ease-in-out infinite;
}
/* top-bar wordmark: the supplied cream SVG */
.logo .logo-img{
	display: block;
	height: clamp(24px, 2vw, 30px);
	width: auto;
	max-width: 100%;
}
/* footer wordmark uses the same SVG as the top bar */
#footer .f-mark-img{
	display: block;
	height: clamp(26px, 2.2vw, 34px);
	width: auto;
	max-width: 100%;
	margin-bottom: 22px;
}
/* larger top-bar wordmark */
.logo .logo-img{
	height: clamp(30px, 2.6vw, 38px);
}
/* a little larger again */
.logo .logo-img{
	height: clamp(34px, 3vw, 44px);
}
/* footer wordmark at twice the top-bar size */
#footer .f-mark-img{
	height: clamp(68px, 6vw, 88px);
	margin-bottom: 26px;
}

/* desktop: the clip fills the hero instead of the arched card */
@media (min-width: 901px){

	.hero .hframe{
		inset: 0;
		right: auto;
		top: 0;
		transform: none;
		height: 100%;
		width: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
	}

	.hero .hframe video{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* the still + ken-burns layer is redundant behind a full-bleed clip */
	.hero.vid .bg,
	.hero .bg{
		opacity: 0;
		animation: none;
	}

	.hero-in > div:first-child{
		max-width: min(760px, 60vw);
	}
}


/* hero copy: stronger scrim and text shadows so it stays legible on video */
@media (min-width: 901px){

	.hero:after{
		background:
			linear-gradient(90deg, rgba(21,18,18,.86) 0%, rgba(21,18,18,.62) 38%, rgba(21,18,18,.18) 66%, rgba(21,18,18,.55) 100%),
			linear-gradient(to top, rgba(21,18,18,.88) 2%, rgba(21,18,18,0) 48%);
	}

	.hero-in h1{
		text-shadow: 0 2px 34px rgba(21,18,18,.55), 0 1px 3px rgba(21,18,18,.45);
	}

	.hero-in p,
	.hero-in .tagline{
		text-shadow: 0 1px 20px rgba(21,18,18,.6);
	}

	.hero-in .eyebrow{
		color: var(--cream);
		text-shadow: 0 1px 16px rgba(21,18,18,.65);
		opacity: .95;
	}
}

/* lighter scrim: let the footage breathe, keep the text shadows doing the work */
@media (min-width: 901px){

	.hero:after{
		background:
			linear-gradient(90deg, rgba(21,18,18,.6) 0%, rgba(21,18,18,.32) 34%, rgba(21,18,18,.06) 62%, rgba(21,18,18,.34) 100%),
			linear-gradient(to top, rgba(21,18,18,.52) 0%, rgba(21,18,18,0) 42%);
	}
}

/* header CTA: bordeaux with white text */
header#hdr .btn.solid{
	background: #581C1E;
	border-color: #581C1E;
	color: #fff;
}

header#hdr .btn.solid:hover{
	background: #6E2326;
	border-color: #6E2326;
	color: #fff;
}

/* scrolled header: frosted glass instead of the olive bar */
header#hdr.solid{
	background: rgba(21, 18, 18, .28);
	-webkit-backdrop-filter: blur(18px) saturate(125%);
	backdrop-filter: blur(18px) saturate(125%);
	border-bottom: 1px solid rgba(228, 213, 188, .14);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	header#hdr.solid{
		background: rgba(21, 18, 18, .78);
	}
}

/* hero primary CTA: bordeaux with white text, matching the header */
.hero .cta .btn.solid{
	background: #581C1E;
	border-color: #581C1E;
	color: #fff;
}

.hero .cta .btn.solid:hover{
	background: #6E2326;
	border-color: #6E2326;
	color: #fff;
}