@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cg-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cg-600.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/cg-500i.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:200 800;font-style:normal;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}
:root{--ink:#0b0c0f;--ink2:#13151b;--navy:#0e1a2d;--navy2:#15263f;--ivory:#f2ede2;--ivory2:#e8e1d1;--gold:#c4a765;--gold-d:#7a6226;
--tx:#ece7db;--mute:#a4a9b5;--txl:#1a1c22;--mutel:#565a66;--ld:rgba(255,255,255,.12);--ll:rgba(20,22,28,.14);
--serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--max:1240px;--ease:cubic-bezier(.22,.8,.24,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;background:var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.7 var(--sans);background:var(--ink);color:var(--tx);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;line-height:1.05;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px);position:relative}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:8px;z-index:200;background:var(--ivory);color:var(--ink);padding:10px 16px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.s-ivory .eyebrow{color:var(--gold-d)}
.ph{color:var(--gold);border-bottom:1px dashed currentColor;padding-bottom:1px;font-style:normal;white-space:normal}
.s-ivory .ph{color:var(--gold-d)}

/* progress + cursor */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),#efe0b4)}
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(196,167,101,.7);border-radius:50%;pointer-events:none;z-index:150;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:normal}
.cursor.on{opacity:1}.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(196,167,101,.12)}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
header.nav.solid{background:rgba(11,12,15,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--ld)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 1.35rem/1 var(--serif);letter-spacing:.01em;color:#fff;z-index:2}
.brand i{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--gold);color:var(--gold);font:600 .95rem/1 var(--serif);font-style:normal;letter-spacing:.04em}
nav.main ul{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0;position:relative}
nav.main a{display:block;font:500 .82rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#d3d6dd;padding:12px 2px;transition:color .25s}
nav.main a:hover,nav.main a.act{color:#fff}
.ind{position:absolute;left:0;bottom:4px;height:1px;width:0;background:var(--gold);transition:transform .45s var(--ease),width .45s var(--ease);opacity:0}
.burger{display:none;position:relative;z-index:2;width:46px;height:46px;background:none;border:1px solid var(--ld);border-radius:50%;cursor:pointer;color:#fff;padding:0}
.burger i,.burger i::before{position:absolute;left:14px;width:16px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i{top:22px}.burger i::before{content:"";left:0;top:-5px}
.burger[aria-expanded=true] i{transform:rotate(45deg)}.burger[aria-expanded=true] i::before{top:0;transform:rotate(90deg)}
@media(max-width:900px){
 .burger{display:block}
 nav.main{position:fixed;inset:0;background:rgba(9,10,13,.99);display:flex;align-items:center;padding:96px clamp(24px,8vw,64px) 40px;clip-path:circle(0 at calc(100% - 44px) 36px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
 nav.main.open{clip-path:circle(150% at calc(100% - 44px) 36px);visibility:visible;transition:clip-path .7s var(--ease)}
 nav.main ul{flex-direction:column;gap:0;width:100%}
 nav.main li{overflow:hidden;border-bottom:1px solid var(--ld)}
 nav.main a{font:500 clamp(1.9rem,8vw,2.6rem)/1.1 var(--serif);text-transform:none;letter-spacing:0;padding:20px 0;transform:translateY(110%);transition:transform .6s var(--ease)}
 nav.main.open a{transform:none}nav.main.open li:nth-child(2) a{transition-delay:.06s}nav.main.open li:nth-child(3) a{transition-delay:.12s}nav.main.open li:nth-child(4) a{transition-delay:.18s}nav.main.open li:nth-child(5) a{transition-delay:.24s}
 .ind{display:none}
}

/* buttons */
.btn{--bx:0px;--by:0px;position:relative;display:inline-flex;align-items:center;gap:.7rem;font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1.15rem 1.9rem;border:1px solid var(--gold);color:var(--ink);background:var(--gold);cursor:pointer;overflow:hidden;transform:translate(var(--bx),var(--by));transition:transform .35s var(--ease),color .35s,background .35s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ivory);transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}
.btn>*{position:relative;z-index:1}.btn:hover::before{transform:none}.btn span{display:inline-block}
.btn.ghost{background:transparent;color:var(--tx);border-color:rgba(255,255,255,.28)}.btn.ghost::before{background:var(--gold)}.btn.ghost:hover{color:var(--ink);border-color:var(--gold)}
.link{position:relative;display:inline-block;font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.4rem 0;color:var(--tx)}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
.actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

/* hero + 3D scene */
.hero{position:relative;background:var(--ink);padding:0}
.js .hero{height:260vh}
.js .hero.static{height:auto}
.hero-pin{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:96px 0 56px}
.js .hero:not(.static) .hero-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.hero-bg{position:absolute;inset:0;background:radial-gradient(900px 600px at 78% 45%,rgba(21,38,63,.95),transparent 70%),radial-gradient(600px 400px at 10% 100%,rgba(122,98,38,.16),transparent 70%),var(--ink)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:calc(100%/12) 100%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,3vw,48px);align-items:center;width:100%}
.hero h1{font-size:clamp(2.4rem,4.5vw,4.6rem);line-height:1;color:#fff;margin:0 0 1.4rem}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.hero h1 .ln:nth-child(2)>span{transition-delay:.12s;font-style:italic;color:var(--gold)}
.ready .hero h1 .ln>span{transform:none}
.hero .copy{position:relative;z-index:2}
.hero .lede{max-width:33rem;color:var(--mute);margin-bottom:2.2rem}
.hero .who{font:500 1.2rem/1.3 var(--serif);font-style:italic;color:var(--tx);margin:0 0 .5rem}
.scene{position:relative;overflow:clip;height:min(78vh,680px);perspective:1500px;perspective-origin:50% 38%;pointer-events:none}
.world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.bx{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.fc{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.stone .fr{background:linear-gradient(180deg,#2a2e38,#171a21);box-shadow:inset 0 0 0 1px rgba(196,167,101,.22)}
.stone .rt{background:linear-gradient(180deg,#1b1e26,#0d0f13)}.stone .lf{background:linear-gradient(180deg,#333846,#1c2029)}.stone .tp{background:#3a3f4d}.stone .bk{background:#0d0f13}
.col .fr{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),linear-gradient(90deg,#191c24,#343a4a 45%,#20242e);box-shadow:inset 0 0 0 1px rgba(196,167,101,.18)}
.col .rt{background:linear-gradient(90deg,#0c0e12,#171a21)}.col .lf{background:linear-gradient(90deg,#3a4152,#232733)}.col .tp{background:#414859}.col .bk{background:#0c0e12}
.gold .fr,.gold .tp,.gold .lf,.gold .rt{background:linear-gradient(180deg,#e6d3a0,#a88b46)}.gold .bk{background:#7a6226}
.glass .fr{background:linear-gradient(135deg,rgba(196,167,101,.10),rgba(120,150,210,.05) 50%,rgba(196,167,101,.14));box-shadow:inset 0 0 0 1px rgba(196,167,101,.35)}
.glass .bk{background:linear-gradient(135deg,rgba(196,167,101,.08),rgba(120,150,210,.05))}.glass .rt,.glass .lf,.glass .tp{background:rgba(196,167,101,.25)}
.paper .fr,.paper .bk{background:repeating-linear-gradient(180deg,transparent 0 17px,rgba(20,24,33,.16) 17px 18px),linear-gradient(160deg,#f6f1e4,#ddd4bf);box-shadow:inset 0 0 0 1px rgba(122,98,38,.35)}
.paper .rt,.paper .lf,.paper .tp{background:#cfc5ab}
.paper .fr::before{content:"";position:absolute;left:14px;top:16px;width:46%;height:6px;background:rgba(122,98,38,.65)}
.dust{position:absolute;inset:0;width:100%;height:100%}
.scene-glow{position:absolute;inset:0;background:radial-gradient(360px circle at var(--lx,60%) var(--ly,30%),rgba(196,167,101,.13),transparent 60%)}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);transition:opacity .5s}
.cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:900px){
 .hero-pin{align-items:flex-end;padding:88px 0 40px}
 .hero-grid{grid-template-columns:1fr;position:static}
 .hero .scene{position:absolute;inset:64px 0 auto 0;height:60svh;z-index:0;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 78%,transparent)}
 .hero-bg::after{opacity:.6}
 .hero .copy{position:relative;z-index:2}
 .hero-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(transparent,rgba(11,12,15,.92) 46%);z-index:1;pointer-events:none}
 .hero h1{font-size:clamp(2.35rem,10.4vw,3.6rem);margin-bottom:1rem}
 .hero .lede{font-size:.98rem;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .cue{display:none}
}
@media(max-height:520px) and (orientation:landscape){.hero-pin{padding:84px 0 32px}.hero .scene{position:relative;inset:auto;height:70vh}.hero-grid{grid-template-columns:1fr 1fr}.hero-pin::after{display:none}}

/* sections */
section{position:relative;padding:clamp(76px,11vw,156px) 0}
.s-ink{background:var(--ink)}.s-navy{background:linear-gradient(180deg,var(--navy) ,#0a1424)}
.s-ivory{background:var(--ivory);color:var(--txl)}.s-ivory h2,.s-ivory h3{color:var(--txl)}
.s-ivory p.mute,.s-ivory .mute{color:var(--mutel)}
.idx{position:absolute;right:clamp(8px,3vw,40px);top:clamp(24px,4vw,56px);font:500 clamp(5rem,14vw,12rem)/.8 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(196,167,101,.28);pointer-events:none;user-select:none}
.s-ivory .idx{-webkit-text-stroke-color:rgba(122,98,38,.28)}
.head{max-width:44rem;margin-bottom:clamp(40px,6vw,80px);position:relative}
h2.t{font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1.2rem}
h2.t em{font-style:italic;color:var(--gold)}.s-ivory h2.t em{color:var(--gold-d)}
.mute{color:var(--mute)}.lead{font-size:1.12rem;max-width:40rem}

/* 07 credentials + gallery */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,17vw,220px);gap:12px;margin-top:clamp(56px,8vw,110px)}
.gal button{position:relative;padding:0;border:1px solid var(--ld);overflow:hidden;cursor:zoom-in;background:#000;border-radius:2px}
.gal button:nth-child(1){grid-column:span 2;grid-row:span 2}.gal button:nth-child(4){grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s;filter:saturate(.85)}
.gal button:hover img{transform:scale(1.06);filter:none}
.gal span{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;text-align:left;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.gal-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:clamp(56px,8vw,110px)}
.gal-h h3{font-size:clamp(1.8rem,3vw,2.6rem)}.gal-h+.gal{margin-top:24px}
@media(max-width:800px){.gal{grid-template-columns:1fr 1fr}.gal button:nth-child(1){grid-column:span 2}}
#lb{max-width:min(980px,94vw);width:100%;padding:14px;background:rgba(9,10,13,.97);color:var(--tx);border:1px solid var(--ld);border-radius:4px}
#lb::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
#lb img{width:100%;height:auto;max-height:76vh;object-fit:contain}
#lb p{margin:12px 4px 0;color:var(--mute);font-size:.9rem}#lb .bar{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.ib{background:none;border:1px solid var(--ld);color:var(--tx);padding:.8rem 1.3rem;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.ib:hover{border-color:var(--gold);color:var(--gold)}

/* 08 contact */
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
form .full{grid-column:1/-1}
.fld{position:relative}
.fld label{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.fld input,.fld textarea{width:100%;font:inherit;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);padding:.5rem 0 .8rem;border-radius:0;transition:border-color .3s}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.fld:focus-within label{color:var(--gold)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--mute);line-height:1.55}
.chk input{margin-top:.25rem;accent-color:var(--gold);width:18px;height:18px;flex:none}
.fnote{font-size:.84rem;color:var(--mute);border-left:2px solid var(--gold);padding-left:1rem;margin:0}
#fstat{min-height:1.4em;font-size:.9rem;color:var(--gold);margin:0}
@media(max-width:560px){form{grid-template-columns:1fr}}

/* footer */
footer.site{background:#07080a;border-top:1px solid var(--ld);padding:clamp(44px,6vw,80px) 0 40px;font-size:.84rem;color:var(--mute)}
footer.site .top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:2.2rem;align-items:center}
footer.site .brand{font-size:1.5rem}
footer.site p{max-width:62rem;line-height:1.7}
footer.site nav a{margin-right:22px;color:var(--tx);text-decoration:none;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}footer.site nav a:hover{color:var(--gold)}

/* gate dialog */
dialog#gate{max-width:600px;width:calc(100% - 32px);padding:clamp(24px,4vw,44px);background:#0d0e12;color:var(--tx);border:1px solid rgba(196,167,101,.4);border-radius:4px;box-shadow:0 40px 100px rgba(0,0,0,.7)}
dialog#gate::backdrop{background:rgba(5,6,8,.92);backdrop-filter:blur(8px)}
dialog#gate h2{font-size:2rem;margin-bottom:1rem;color:#fff}dialog#gate p,dialog#gate li{color:var(--mute);font-size:.95rem}
dialog#gate ul{padding-left:1.1rem;margin:0 0 1rem}dialog#gate li{margin-bottom:.4rem}
dialog#gate .actions{margin-top:1.6rem}
noscript .ns{padding:16px 22px;background:var(--ivory);color:var(--txl);font-size:.9rem}

/* doc pages */
.doc{padding:150px 0 90px;background:var(--ink)}.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(2.6rem,6vw,4.2rem);margin-bottom:1.4rem;color:#fff}.doc h2{font-size:1.8rem;margin:2.4rem 0 .6rem;color:var(--gold)}.doc p{color:var(--mute)}

/* reveal */
.js .rv{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
 .js .rv{filter:none;transform:none}
 .hero h1 .ln>span{transform:none}
 .cursor{display:none}
}
@media print{header.nav,.cursor,.progress,dialog,.scene,.cue,form{display:none!important}body,section,.hero{background:#fff!important;color:#000!important}*{color:#000!important}.js .rv{opacity:1;transform:none;filter:none}.js .hero{height:auto}}

/* QR codes + digital card */
a.tel{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--gold)}a.tel:hover{color:var(--gold)}
.qrs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2rem;max-width:460px}
.qr{margin:0;padding:14px;background:rgba(255,255,255,.04);border:1px solid var(--ld);border-radius:4px;text-align:center}
.qbox{background:var(--ivory);padding:6px;border-radius:2px;line-height:0}.qbox svg{width:100%;height:auto;display:block}
.qr figcaption{margin-top:.9rem;line-height:1.35}.qr figcaption b{display:block;font:600 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}.qr figcaption span{font-size:.8rem;color:var(--mute)}
@media(max-width:420px){.qrs{gap:12px}.qr{padding:10px}}
.cardpg .wrap{max-width:760px}
.cardwrap{margin:2rem 0 2.2rem;perspective:1200px}
.face{display:block;border-radius:6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(196,167,101,.25);background:#0b0c0f}
.cardpg .actions .btn{padding:1.05rem 1.5rem}
@media print{.cardpg .actions{display:none}}

/* card sides (front and back always visible) */
.sides{display:grid;gap:30px;margin:2rem 0 1.4rem}
.side{margin:0}
.side figcaption{font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.face{display:block;width:100%;height:auto}
.fnote[hidden],#map-link[hidden]{display:none}
/* robustness: [hidden] must always win; download helpers */
[hidden]{display:none!important}
.actions.sm{margin-top:.9rem;gap:10px}.actions.sm .btn{padding:.8rem 1.1rem;font-size:.7rem}
button.inl{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;cursor:pointer}
#dl-status a{color:var(--gold)}
.cardpg .fnote{margin:1.4rem 0 1.8rem}.cardpg .actions{margin-top:1.4rem}

/* ===== BENTO GRID ===== */
section.sec{padding:clamp(64px,9vw,128px) 0;background:transparent;position:relative}
section.sec:nth-of-type(even)::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 88% 0,rgba(21,38,63,.55),transparent 70%);pointer-events:none}
.head{margin-bottom:clamp(28px,4vw,52px);max-width:46rem}
.bento{--g:clamp(10px,1.4vw,18px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);grid-auto-flow:dense;list-style:none;margin:0;padding:0;position:relative}
.tile{--t-bg:linear-gradient(155deg,#16181f,#0f1116);--t-fg:var(--tx);--t-mute:var(--mute);--t-acc:var(--gold);
 position:relative;min-width:0;overflow:hidden;border-radius:clamp(20px,2.4vw,32px);padding:clamp(20px,2.4vw,34px);background:var(--t-bg);color:var(--t-fg);
 border:1px solid rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 40px -28px rgba(0,0,0,.8);
 display:flex;flex-direction:column;gap:.7rem;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;margin:0}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(196,167,101,.16),transparent 60%)}
.tile:hover{border-color:rgba(196,167,101,.5);transform:translateY(-3px)}.tile:hover::after{opacity:1}
.t-ink{--t-bg:linear-gradient(155deg,#16181f,#0e1015)}
.t-navy{--t-bg:linear-gradient(155deg,#182a47,#0e1a2d)}
.t-glass{--t-bg:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.t-ivory{--t-bg:linear-gradient(155deg,#f6f1e5,#e6dfce);--t-fg:#1a1c22;--t-mute:#565a66;--t-acc:#7a6226;border-color:rgba(0,0,0,.06)}
.t-gold{--t-bg:linear-gradient(155deg,#d9bf82,#b39550);--t-fg:#15120a;--t-mute:#3d3416;--t-acc:#15120a;border-color:rgba(255,255,255,.25)}
.t-ivory:hover{border-color:rgba(122,98,38,.6)}.t-gold:hover{border-color:#fff}
.tile h3{font-size:clamp(1.3rem,1.9vw,1.75rem);color:var(--t-fg)}
.tile h3.big{font-size:clamp(2.2rem,4.4vw,4rem)}.tile h3 em,.tile .role{color:var(--t-acc)}
.tile .big2{font:500 clamp(1.4rem,2.3vw,2.1rem)/1.15 var(--serif);color:var(--t-fg)}
.tile p{margin:0;color:var(--t-mute);font-size:.96rem}.tile p.v{color:var(--t-fg);font-size:1rem}
.tile .k{font:600 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t-acc);margin:0}
.tile .role{font:italic 500 1.35rem/1.3 var(--serif);margin-top:auto}
.tile .ph{color:var(--t-acc)}.t-ivory .ph,.t-gold .ph{color:var(--t-acc)}
.t-gold .tel,.tile a.tel{color:inherit;border-bottom-color:currentColor}
/* spans */
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.r2{grid-row:span 2}.r3{grid-row:span 3}
/* portrait tile */
.tile.tp{padding:0;min-height:380px;background:#111}
.tile.tp picture,.tile.tp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.tp img{transition:transform 1.2s var(--ease)}.tile.tp:hover img{transform:scale(1.04)}
.tile.tp figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 18px;font:600 .68rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85))}
/* practice tiles */
.pa{justify-content:space-between;min-height:210px;transform-style:preserve-3d;will-change:transform}
.pa .n{font:600 .7rem/1 var(--sans);letter-spacing:.22em;color:var(--t-acc)}
.pa svg{width:40px;height:40px;stroke:var(--t-acc);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin:.4rem 0 auto}
.pa.feat{min-height:340px}.pa.feat svg{width:64px;height:64px}.pa.feat h3{font-size:clamp(1.7rem,3vw,2.6rem)}
.pa.wide{flex-direction:row;align-items:center;gap:1.4rem;min-height:0}.pa.wide svg{margin:0;flex:none}.pa.wide .n{order:-1}.pa.wide>div{flex:1}
/* steps, articles, notes, qr, form */
.tl.bento{--tl:0}.tl .tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--t-acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.tl .tile.on::before{transform:scaleX(1)}.tl .tile{min-height:190px}
.art{gap:.8rem}.art .thumb{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#0e1a2d,#15263f);margin-bottom:.6rem}
.art .thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(196,167,101,.14) 46px 47px),linear-gradient(200deg,transparent 40%,rgba(196,167,101,.25))}
.art .thumb::after{content:"";position:absolute;left:12%;bottom:0;width:22%;height:70%;background:linear-gradient(90deg,#1b2a44,#2c4066);box-shadow:70px 24px 0 #142036,150px 40px 0 #1b2a44}
.art .more{margin-top:auto;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute);opacity:.75}
.note-t{flex-direction:row;align-items:baseline;gap:1.2rem;border-left:3px solid var(--gold)}.note-t .k{flex:none}
.qr-t{align-items:center;text-align:center;gap:.9rem}.qr-t .qbox{width:min(100%,190px);background:#fff;padding:8px;border-radius:14px}
.qr-t figcaption{line-height:1.35}.qr-t figcaption b{display:block;font:600 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#1a1c22}.qr-t figcaption span,.qr-t figcaption a{font-size:.82rem;color:#565a66}
.form-t form{padding:0;background:none;border:0;box-shadow:none;margin-top:.6rem;gap:22px 24px}
.form-t .fld input,.form-t .fld textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.85rem 1rem}
.form-t .fld input:focus,.form-t .fld textarea:focus{border-color:var(--gold)}
/* responsive */
@media(max-width:1000px){.bento{grid-template-columns:repeat(6,minmax(0,1fr))}
 .c3,.c4{grid-column:span 3}.c5,.c6,.c7,.c8,.c12{grid-column:span 6}
 .tile.tp{grid-row:span 1;min-height:0;aspect-ratio:4/5;max-height:560px}.r3,.r2{grid-row:auto}.pa.feat{min-height:260px}}
@media(max-width:640px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 .c3,.c4{grid-column:span 1}.c5,.c6,.c7,.c8,.c12{grid-column:span 2}
 .tile{padding:18px;border-radius:22px}.tile.tp{aspect-ratio:1/1;max-height:none}
 .tl .tile{min-height:0}
 .note-t{flex-direction:column;gap:.4rem}.pa.wide{flex-direction:column;align-items:flex-start}
 .tl.bento .tile,.m2{grid-column:span 2}
 .bento .tile.qr-t{grid-column:span 1}}
@media(prefers-reduced-motion:reduce){.tile,.tile::after,.tile.tp img{transition:none}.tl .tile::before{transition:none}}
.tile h3{line-height:1.12}.pa h3{margin-bottom:.35rem}
.tile p.big2,.tile p.v.big2{font:500 clamp(1.4rem,2.3vw,2.1rem)/1.15 var(--serif);color:var(--t-fg)}
.gal{gap:var(--g,14px)}.gal button{border-radius:clamp(18px,2vw,28px);border-color:rgba(255,255,255,.09)}
.gal button:nth-child(5),.gal button:nth-child(6){grid-column:span 2}
@media(max-width:800px){.gal button:nth-child(5),.gal button:nth-child(6){grid-column:span 1}}
.tile a.tel{white-space:nowrap}