.hero { position:relative; isolation:isolate; overflow:hidden; grid-template-columns:1fr .78fr; padding-block:0; gap:0; background:#0a0908 }
.hero figure { margin-right:calc(-1 * var(--pad)); overflow:hidden }
.hero figure img { height:clamp(510px,49vw,790px); object-position:50% 48%; animation:none }
.hero figcaption { position:absolute; inset:auto 20px 16px; color:white; text-shadow:0 1px 4px #000 }
.hero figcaption span { color:white }
.silk { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:url("media/silk-static.svg") center/100% 100% no-repeat }
.intro { padding-block:52px; position:relative; z-index:1 }
.intro h1 { margin-left:-.05em; font-size:clamp(100px,11.8vw,210px); line-height:.8 }
.intro h1 em { display:block; margin:-.8em 0 0 .28em; color:#e3c3a6 }
.intro h1 br { display:block }
.intro h1 em { margin-top:0 }
.button,.outline { border-radius:0 }
.intro .button,.contact .button { border-bottom:1px solid var(--accent); color:var(--paper); padding:10px 0; background:transparent; gap:35px }
.button span { transition:transform .35s }.button:hover span { transform:translate(4px,-4px) }
.stats { background:#15110f }
.about { background:#dfd2c3; color:#251c17; align-items:start; padding-block:clamp(50px,8vw,130px) }
.about small,.about em { color:#71533d }.about>div:first-child { position:sticky;top:40px }
.about li { border-bottom:1px solid #baa998; padding:10px 0; margin:0 }.about ul { list-style:none; padding:0 }
.grid article>a { position:relative; overflow:hidden; display:block; background:#231b17 }
.cover { transition:transform .75s cubic-bezier(.2,.7,.2,1) }
.grid article>a:hover .cover { transform:scale(1.035) }
.grid article>a::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 38%,#fff2 50%,transparent 62%); transform:translateX(-130%); pointer-events:none }
.grid article>a:hover::after { transform:translateX(130%); transition:transform .85s ease }
.upcoming { margin-top:clamp(45px,7vw,100px); display:grid; grid-template-columns:minmax(115px,26%) 1fr; gap:7%; align-items:center; border-block:1px solid var(--line); padding:30px 4%; background:linear-gradient(110deg,#2f241d,#151210 74%) }
.upcoming img { width:100%; display:block }.upcoming h2 { margin-bottom:0 }
.contact { max-width:none; border-top:1px solid var(--line); background:radial-gradient(ellipse at 80% 110%,#34251b,transparent 65%) }
.legal { margin:0; background:#f2ece4; color:#211b17; font:17px/1.65 Georgia,serif }
.legal main { max-width:78ch; margin:auto; padding:clamp(26px,6vw,80px) 24px; overflow-wrap:anywhere }
.legal h1 { font-size:clamp(27px,4.4vw,48px); line-height:1.1; font-weight:normal }
.legal a { color:#624734 }
@media(max-width:650px) {
 .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0 }
 .hero figure { order:-1; margin:0 }.hero figure img { height:clamp(280px,87vw,420px); object-position:50% 40% }
 .hero figure::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#0a0908) }
 .hero figcaption { display:none }.intro { margin-top:-36px; padding:0 var(--pad) 34px }
 .intro h1 { font-size:clamp(71px,17vw,104px); margin:23px 0 18px }.intro h1 br { display:none }.intro h1 em { display:inline; margin-left:.1em }
 .about>div:first-child { position:static }.upcoming { gap:6%; padding:16px 0 }.upcoming h2 { font-size:clamp(30px,7vw,45px) }
}
@media(prefers-reduced-motion:reduce){.hero figure img,.cover,.button span,.grid article>a::after{animation:none;transition:none}.cover:hover{transform:none}}
@media(max-width:650px){
 .silk{display:none}
 .hero figure,.hero figure img,.intro{animation:none}
 .intro h1{font-size:clamp(64px,16vw,92px);line-height:.86}
 .intro h1 br{display:initial}
 .intro h1 em{display:block;margin:0 0 0 .18em}
 .upcoming{display:block;padding:24px}
 .upcoming img{width:min(180px,48vw);margin-bottom:18px}
 .upcoming h2{font-size:clamp(30px,8vw,42px);overflow-wrap:anywhere}
 .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .stats>div{min-width:0}
 .social{flex-wrap:wrap}
}
@media(max-width:360px){.stats strong{font-size:27px}.stats span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero figure,.hero figure img{animation:none}}

/* Keep the first screen still: no continuous paint or large animated layers. */
.hero figure,.hero figure img,.hero .intro{animation:none;transform:none;filter:none;clip-path:none}

/* Reserve the expanded price area so toggling a card never resizes the row. */
.grid article details{min-block-size:8.5rem}
.grid article .cost{flex-wrap:wrap;gap:.75rem}
/* Cutout portrait hero: warm editorial composition. */
body>header{position:absolute;inset:0 0 auto;z-index:10;height:100px;background:transparent;border:0}
body>header .outline{border:0;border-radius:50px;background:#f5f1eb;color:#211a16;padding:12px 24px}
body>header nav a:hover{color:#fff}
.hero.hero-editorial{display:block;position:relative;isolation:isolate;min-height:760px;height:min(940px,100svh);padding:0;overflow:hidden;background:radial-gradient(ellipse at 78% 24%,#715744 0%,#46352b 28%,transparent 65%),radial-gradient(ellipse at 12% 85%,#35271f 0%,transparent 58%),#100f0e}
.hero-editorial .hero-heading{position:absolute;z-index:1;left:var(--pad);top:25%;width:80%}
.hero-heading small{color:#c8baac;font-size:10px;letter-spacing:.18em}
.hero-editorial h1{font-family:var(--serif);font-size:clamp(110px,13.7vw,232px);font-weight:400;line-height:.79;letter-spacing:-.055em;margin:30px 0 0;color:#f5f1eb}
.hero-editorial h1 em{display:block;font-style:italic;color:#f5f1eb;margin:.08em 0 0 .2em}
.hero-editorial .hero-portrait{position:absolute;z-index:2;inset:auto auto 0 50%;width:52%;height:89%;margin:0;overflow:visible;transform:translateX(-28%);pointer-events:none;animation:none}
.hero-editorial .hero-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;animation:none;filter:none}
.hero-editorial .hero-copy{position:absolute;left:var(--pad);bottom:12%;z-index:3;max-width:340px}
.hero-copy p{font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.035em;margin:0 0 12px;color:#f5f1eb}
.hero-copy>span{display:block;font-size:11px;color:#c8baac;max-width:230px;line-height:1.5}
.hero-editorial .hero-copy .button{display:inline-flex;background:#f5f1eb;color:#29201a;border:0;border-radius:50px;padding:14px 24px;gap:34px;margin-top:26px;font-size:12px}
.hero-copy .button:hover{background:white}
.hero-note{position:absolute;right:var(--pad);top:42%;z-index:3;text-align:right;font-size:15px;line-height:1.35;color:#e8e0d7}
.hero-note small{display:block;text-align:right;line-height:1.7;letter-spacing:.18em;font-size:9px;color:#bda994;margin-top:110px}
.hero-scroll{position:absolute;bottom:26px;left:var(--pad);right:var(--pad);z-index:3;display:flex;justify-content:space-between;border-top:1px solid #e3d5c333;padding-top:15px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#c8baac}
.hero-scroll span{font-size:19px;line-height:1}
@media(min-width:1600px){.hero-editorial .hero-portrait{height:92%}}
@media(max-width:1000px) and (min-width:651px){.hero-note{right:30px;font-size:12px}.hero-note small{margin-top:160px}.hero-editorial .hero-portrait{left:47%;width:65%;height:84%}.hero-editorial .hero-copy{max-width:240px}}
@media(max-width:650px){
 body>header{height:76px}body>header .outline{padding:9px 16px;font-size:11px}
 .hero.hero-editorial{height:900px;height:100svh;min-height:740px;max-height:950px}
 .hero-editorial .hero-heading{left:var(--pad);right:var(--pad);top:118px;width:auto}
 .hero-heading small{font-size:8px;letter-spacing:.09em;gap:8px}.hero-heading small i{width:18px}
 .hero-editorial h1{font-size:clamp(88px,23vw,145px);line-height:.8;margin-top:23px}
 .hero-editorial h1 em{margin:.05em 0 0 .26em}
 .hero-editorial .hero-portrait{left:auto;right:-14%;bottom:0;width:105%;height:68%;transform:none;order:initial}
 .hero-editorial .hero-portrait::after{display:none}
 .hero-editorial .hero-copy{bottom:86px;left:var(--pad);max-width:205px}
 .hero-copy p{font-size:20px;text-shadow:0 1px 18px #100f0e}
 .hero-copy>span{max-width:155px;font-size:10px;text-shadow:0 1px 10px #100f0e}
 .hero-editorial .hero-copy .button{padding:12px 18px;font-size:11px;gap:20px;margin-top:20px}
 .hero-note{display:none}.hero-scroll{bottom:22px}
 .hero-editorial::after{content:"";position:absolute;z-index:2;inset:45% 0 0;pointer-events:none;background:linear-gradient(0deg,#100f0eb3,transparent 75%)}
}
body>header>a:first-child{display:block}
.logo{mix-blend-mode:normal;height:auto}
body>header .logo{width:144px}
@media(max-width:650px){body>header .logo{width:112px}}
@media(min-width:1001px){
 .hero-editorial .hero-heading{top:22%}
 .hero-editorial h1{font-size:clamp(110px,12.7vw,218px)}
 .hero-editorial .hero-portrait{left:43%;width:49%;height:89%;transform:none}
 .hero-editorial .hero-portrait img{width:100%;height:auto;object-fit:contain}
 .hero-note{top:31%}
}

/* Keep the title and call to action in one flow so their spacing is stable. */
.hero-content{display:contents}
.hero-editorial h1 em{margin:0;color:#d6c2ae}
@media(min-width:651px){
 .hero-editorial .hero-content{display:flex;flex-direction:column;gap:clamp(28px,4vh,40px);position:absolute;left:var(--pad);top:50%;transform:translateY(-45%);width:45%;max-width:680px;z-index:3}
 .hero-editorial .hero-heading{position:static;width:100%}
 .hero-heading small{max-width:none;font-size:10px;letter-spacing:.13em;line-height:1.7}
 .hero-editorial h1{font-size:clamp(84px,min(10vw,16vh),156px);line-height:.96;letter-spacing:-.045em;margin:24px 0 0}
 .hero-editorial h1 em{margin:0;line-height:1.04}
 .hero-editorial .hero-copy{position:static;max-width:360px}
 .hero-copy p{font-size:clamp(19px,1.75vw,25px);line-height:1.35;letter-spacing:-.025em;margin:0 0 14px}
 .hero-copy>span{font-size:12px;max-width:290px;line-height:1.65}
 .hero-editorial .hero-copy .button{margin-top:26px;padding:14px 25px}
}
@media(max-width:650px){
 .hero-editorial h1{font-size:clamp(76px,21vw,124px);line-height:.94;margin-top:22px}
 .hero-editorial h1 em{margin:0;line-height:1}
}
/* Depth layers share one eased input; no rotation or independent wobble. */
.hero-editorial .hero-portrait img{
 translate:var(--scene-x,0px) var(--scene-y,0px);
 scale:1.04;
 transform-origin:50% 65%;
}
.tilt-toggle{position:absolute;z-index:4;right:var(--pad);bottom:94px;padding:8px 12px;border:1px solid #e3d5c344;border-radius:24px;background:#181410a6;color:#e8e0d7;font:11px/1.4 Inter,Arial,sans-serif;cursor:pointer}
.tilt-toggle[hidden]{display:none}
.tilt-toggle:focus-visible{outline:2px solid #ddaf83;outline-offset:4px}
.tilt-toggle:disabled{opacity:.6;cursor:wait}
.tilt-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.hero-editorial .hero-portrait img{translate:none;rotate:none;scale:none}}

.hero.hero-editorial{background:#100f0e}
.hero-atmosphere{position:absolute;inset:-80px;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 78% 24%,#715744 0%,#46352b 28%,transparent 65%),radial-gradient(ellipse at 12% 85%,#35271f 0%,transparent 58%),#100f0e;translate:calc(var(--scene-x,0px) * .6) calc(var(--scene-y,0px) * .6)}
.hero-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#c2a27d22,transparent 55%);translate:calc(var(--scene-x,0px) * -1.2) calc(var(--scene-y,0px) * -1.2)}
@media(min-width:651px){.hero-editorial .hero-content{translate:calc(var(--scene-x,0px) * .4) calc(var(--scene-y,0px) * .4)}}
@media(max-width:650px){.hero-editorial .hero-heading,.hero-editorial .hero-copy{translate:calc(var(--scene-x,0px) * .4) calc(var(--scene-y,0px) * .4)}}
@media(prefers-reduced-motion:reduce){
 .hero-atmosphere,.hero-atmosphere::after,.hero-editorial .hero-content,.hero-editorial .hero-heading,.hero-editorial .hero-copy{translate:none}
}