:root{
  --bg:#F7F3EE;--panel:#EFE8E0;--card:#FBF8F4;--ink:#1E1714;--soft:#6E625B;--champ:#A88A5C;--line:#DCD2C6;--inv-bg:#1E1714;--inv-ink:#F2EBE3;
  --display:"Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --italic:"Bodoni Moda", "Didot", Georgia, serif;
  --body:"Jost", "Futura", "Avenir Next", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141010;--panel:#1D1716;--card:#211A18;--ink:#F2EBE3;--soft:#B3A69C;--champ:#CDAE7C;--line:#352B27;--inv-bg:#EFE8E0;--inv-ink:#1E1714;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141010;--panel:#1D1716;--card:#211A18;--ink:#F2EBE3;--soft:#B3A69C;--champ:#CDAE7C;--line:#352B27;--inv-bg:#EFE8E0;--inv-ink:#1E1714;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16.5px;line-height:1.75;margin:0;letter-spacing:.01em}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:.005em}
em.it{font-family:var(--italic);font-style:italic;color:var(--champ)}
.cap{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;color:var(--soft)}
.cap.gold{color:var(--champ)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 34px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;border:1px solid var(--ink);transition:background .35s,color .35s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--champ);outline-offset:4px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .word{font-family:var(--display);font-size:23px;letter-spacing:.04em;white-space:nowrap}
.brand .sub{display:block;font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--soft);margin-top:-2px}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{text-decoration:none;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);transition:color .3s}
.navlinks a:hover{color:var(--ink)}
.navlinks .btn{padding:12px 22px;color:var(--bg)}
.navlinks .btn:hover{color:var(--ink)}
@media (max-width:900px){.navlinks a:not(.btn){display:none}}
@media (max-width:640px){.navlinks{display:none}}

/* mobile book bar */
.bookbar{display:none}
@media (max-width:640px){
  .bookbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .bookbar .btn{flex:1;padding:15px 12px}
  .bookbar .btn.line{flex:0 0 auto;padding-inline:18px}
  body{padding-bottom:84px}
}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;padding-block:72px 88px}
.hero h1{font-size:clamp(44px,6.6vw,88px);margin-top:22px}
.hero h1 .it{display:block}
.hero .lede{font-size:18.5px;color:var(--soft);max-width:30em;margin:28px 0 36px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trust{margin-top:30px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);display:flex;flex-wrap:wrap;gap:6px 14px}
.trust span+span::before{content:"·";margin-right:14px;color:var(--champ)}
.hero-photo{display:grid;gap:14px;min-width:0;margin:0}
.frame{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--panel);overflow:hidden}
.frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.7);pointer-events:none}
.caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.caption b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:44px;padding-block:44px 64px}.hero-photo{max-width:440px;width:100%}}

/* sections */
.sec{padding-block:112px}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.head h2{font-size:clamp(38px,5.4vw,68px);margin-top:20px}
.head p{color:var(--soft);max-width:30em;margin:0;justify-self:end}
@media (max-width:820px){.head{grid-template-columns:1fr;gap:18px}.head p{justify-self:start}.sec{padding-block:80px}}

/* about */
.about{background:var(--panel)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.portrait{margin:0;display:grid;gap:16px;max-width:100%}
.portrait .ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.portrait .ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.7);pointer-events:none}
.portrait .sig{font-family:var(--italic);font-style:italic;font-size:24px;color:var(--champ)}
.about-copy h2{font-size:clamp(38px,5vw,62px);margin:20px 0 26px}
.about-copy p{max-width:36em;color:var(--soft);margin:0 0 18px}
.creds{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cred{padding:22px 18px 22px 0;display:grid;gap:4px;min-width:0}
.cred+.cred{padding-left:22px;border-left:1px solid var(--line)}
.cred .abbr{font-family:var(--display);font-size:28px;line-height:1}
.cred span{font-size:13px;color:var(--soft);line-height:1.5}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px}.portrait{max-width:420px;width:100%}}
@media (max-width:560px){.creds{grid-template-columns:1fr}.cred+.cred{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* menu */
.drips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:80px}
.drip{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;transition:border-color .4s,transform .4s}
.drip:hover{border-color:var(--champ);transform:translateY(-3px)}
.drip .art{position:relative;background:var(--panel);display:grid;place-items:center;padding:34px 0 26px;overflow:hidden}
.drip .art::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--champ) 30%,transparent);pointer-events:none}
.drip .art svg{width:auto;height:230px;max-width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.drip:hover .art svg{transform:translateY(-4px) rotate(-1.5deg)}
.drip .body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.drip .badge{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--champ);min-height:1.2em}
.drip .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.drip h3{font-size:clamp(28px,2.6vw,34px)}
.drip .price{font-family:var(--display);font-size:30px;font-variant-numeric:tabular-nums;white-space:nowrap}
.drip .aka{font-family:var(--italic);font-style:italic;color:var(--champ);font-size:15px;margin-top:-8px}
.drip p{margin:0;color:var(--soft);font-size:15px}
.inside{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.inside ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.inside li{font-size:12.5px;letter-spacing:.04em;padding:4px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.optnote{font-size:12px;color:var(--soft);font-style:italic}
.inside li.opt{color:var(--soft);border-style:dashed}
.drip .foot{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.drip .foot .cap{font-size:11px}
.drip .btn{padding:14px 26px}
.drip.feature .art{background:color-mix(in srgb,var(--champ) 14%,var(--panel))}
@media (max-width:1000px){.drips{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .drips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));padding-bottom:6px;scrollbar-width:none}
  .drips::-webkit-scrollbar{display:none}
  .drip{flex:0 0 84%;scroll-snap-align:center}
  .drip .art svg{height:190px}
  .swipe{display:block!important}
}
.swipe{display:none;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:-62px 0 56px}

.course{margin-bottom:64px}
.course-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.course-head h3{font-size:clamp(28px,3.4vw,38px)}
.list{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.row{padding-block:24px;border-top:1px solid var(--line);min-width:0;display:grid;gap:6px}
.row .t{display:flex;align-items:baseline;gap:14px}
.row h4{margin:0;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.15}
.row .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-6px);min-width:20px}
.row .p{font-family:var(--display);font-size:25px;font-variant-numeric:tabular-nums}
.row .aka{font-family:var(--italic);font-style:italic;color:var(--champ);font-size:15px}
.row p{margin:4px 0 6px;color:var(--soft);font-size:15px;max-width:32em}
.row .m{display:flex;gap:20px;align-items:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.row .m a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--champ);padding-bottom:2px}
@media (max-width:820px){.list{grid-template-columns:1fr}}

.unsure{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:36px;border:1px solid var(--line);background:var(--panel)}
.unsure h3{font-size:clamp(26px,3vw,34px);margin-bottom:6px}
.unsure p{margin:0;color:var(--soft)}
.unsure .acts{display:flex;flex-wrap:wrap;gap:10px}
.fine{font-size:12.5px;color:var(--soft);margin-top:20px;max-width:60em}
@media (max-width:820px){.unsure{grid-template-columns:1fr;padding:28px}}

/* experience */
.standard{background:var(--inv-bg);color:var(--inv-ink)}
.standard .cap{color:color-mix(in srgb,var(--inv-ink) 60%,transparent)}
.standard .head p{color:color-mix(in srgb,var(--inv-ink) 70%,transparent)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid color-mix(in srgb,var(--inv-ink) 22%,transparent)}
.flow div{padding:34px 28px 0 0;display:grid;gap:10px;align-content:start}
.flow div + div{padding-left:28px;border-left:1px solid color-mix(in srgb,var(--inv-ink) 22%,transparent)}
.flow .n{font-family:var(--italic);font-style:italic;font-size:22px;color:var(--champ)}
.flow h3{font-size:28px}
.flow p{margin:0;font-size:15px;color:color-mix(in srgb,var(--inv-ink) 72%,transparent)}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow div:nth-child(3){border-left:0;padding-left:0}.flow div{padding-bottom:28px}}
@media (max-width:520px){.flow{grid-template-columns:1fr}.flow div + div{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--inv-ink) 22%,transparent)}}

/* concierge */
.concierge-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.concierge-grid > div{padding:40px 32px 40px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.concierge-grid > div + div{padding-left:32px;border-left:1px solid var(--line)}
.concierge-grid h3{font-size:30px}
.concierge-grid p{margin:0;color:var(--soft);font-size:15px}
.concierge-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--soft);font-size:15px}
.concierge-grid li{display:flex;gap:12px}
.concierge-grid li::before{content:"";flex:0 0 14px;height:1px;background:var(--champ);margin-top:13px}
@media (max-width:900px){.concierge-grid{grid-template-columns:1fr}.concierge-grid > div + div{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* faq */
.faq{background:var(--panel)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.faq-grid h2{font-size:clamp(38px,5vw,62px);margin-top:20px}
.faq-grid .intro p{color:var(--soft);max-width:24em}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding-block:22px;font-family:var(--display);font-size:23px;line-height:1.25}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--body);font-weight:300;font-size:22px;color:var(--champ);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 24px;color:var(--soft);max-width:40em}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:28px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-grid > div{padding:40px 32px 40px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.contact-grid > div + div{padding-left:32px;border-left:1px solid var(--line)}
.contact-grid h3{font-size:30px}
.contact-grid p{margin:0;color:var(--soft);font-size:15px}
.contact-grid a.go{margin-top:auto;font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--champ);align-self:flex-start;padding-bottom:3px}
.contact-line{font-size:16px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.contact-line:hover{color:var(--champ)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-grid > div + div{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* closing */
.closing .wrap{padding-block:120px 100px;display:grid;justify-items:center;text-align:center;gap:26px}
.closing h2{font-size:clamp(42px,6.4vw,84px)}
.note{font-size:12.5px;color:var(--soft);max-width:46em;margin-top:24px}
footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}

/* motion: restrained, content always visible */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero .ctas,.hero .trust{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero .lede{animation-delay:.1s}.hero .ctas{animation-delay:.18s}.hero .trust{animation-delay:.26s}
  .frame img{animation:reveal 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{transform:translateY(12px)}to{transform:none}}
  @keyframes reveal{from{transform:scale(1.06)}to{transform:none}}
}

/* ---- multi-page additions ---- */
.navlinks a[aria-current="page"]{color:var(--ink)}
.mnav{display:none;position:relative}
@media (max-width:640px){.mnav{display:block}}
.mnav summary{list-style:none;cursor:pointer;font-size:11px;letter-spacing:.26em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line);font-family:var(--body);display:block}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:none}
.mnav .panel{position:absolute;right:0;top:calc(100% + 10px);background:var(--bg);border:1px solid var(--line);padding:8px 0;min-width:200px;display:grid;box-shadow:0 12px 30px rgba(30,23,20,.08)}
.mnav .panel a{padding:12px 20px;text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.mnav details{border:0}
.mnav details:last-child{border:0}
.frame video{display:block;width:100%;height:100%;object-fit:cover}
.page-hero .wrap{padding-block:72px 40px;display:grid;gap:18px}
.page-hero h1{font-size:clamp(42px,6vw,80px)}
.page-hero p{color:var(--soft);max-width:34em;margin:0;font-size:17.5px}
.more{display:flex;justify-content:center;margin-top:-40px;margin-bottom:8px}
.about-short p{max-width:34em}
.sitefoot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding-block:56px 40px;border-top:1px solid var(--line)}
.sitefoot h4{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:22px}
.sitefoot a{display:block;text-decoration:none;color:var(--soft);font-size:15px;padding:3px 0}
.sitefoot a:hover{color:var(--ink)}
.sitefoot p{margin:0;color:var(--soft);font-size:14px;max-width:26em}
@media (max-width:760px){.sitefoot .wrap{grid-template-columns:1fr 1fr}.sitefoot .wrap > div:first-child{grid-column:1/-1}}
@media (max-width:640px){
  .hero .ctas .btn.line{display:none}
  .hero .ctas .btn{width:100%}
  .hero .wrap{padding-block:28px 56px;gap:32px}
  .hero-photo{max-width:none}
  .hero .lede{margin:20px 0 26px;font-size:17px}
  .trust{font-size:11px}
  .sec{padding-block:64px}
  .page-hero .wrap{padding-block:40px 8px}
  .about-grid .portrait{max-width:300px}
}
.sitefoot{border-top:0}
.sitefoot .wrap{text-transform:none;letter-spacing:normal;font-size:inherit}
.note a{color:var(--ink)}

/* ===== 1. iOS-style page transitions ===== */
@view-transition{navigation:auto}
nav{view-transition-name:site-nav}
.bookbar{view-transition-name:book-bar}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .48s cubic-bezier(.2,.7,.2,1) both}
  @keyframes vt-out{to{opacity:0;transform:translateX(-24px)}}
  @keyframes vt-in{from{opacity:0;transform:translateX(32px)}}
}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ===== 3. Liquid Glass bars ===== */
:root{--glass:color-mix(in srgb,var(--bg) 62%,transparent);--glass-edge:rgba(255,255,255,.65);--glass-shadow:0 10px 30px rgba(30,23,20,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass-edge:rgba(255,255,255,.12);--glass-shadow:0 10px 30px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--glass-edge:rgba(255,255,255,.12);--glass-shadow:0 10px 30px rgba(0,0,0,.4)}
nav{background:var(--glass);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:inset 0 -1px 0 var(--glass-edge)}
@media (max-width:640px){
  .bookbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:8px;border-radius:24px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-edge)}
  .bookbar .btn{border-radius:17px;padding:14px 12px}
  body{padding-bottom:96px}
}
.mnav .panel{background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-radius:18px;box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-edge);overflow:hidden}
.mnav summary{border-radius:14px}

/* tactile press feedback */
.btn,.drip,.mnav summary{-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn{transition:background .35s,color .35s,transform .18s}

/* ===== 2. Compact cards + bottom sheet (phones) ===== */
.drip .peek{display:none}
@media (max-width:640px){
  .drips{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;margin-inline:0;padding-inline:0}
  .drip{cursor:pointer;transition:transform .2s}
  .drip:active{transform:scale(.97)}
  .drip .art{padding:20px 0 14px}
  .drip .art svg{height:132px}
  .drip .art::after{inset:6px}
  .drip .body{padding:14px 14px 16px;gap:4px}
  .drip .badge,.drip p,.drip .inside,.drip .foot,.drip .aka{display:none}
  .drip .top{flex-direction:column;gap:2px}
  .drip h3{font-size:21px}
  .drip .price{font-size:20px;color:var(--champ)}
  .drip .peek{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:4px}
  .swipe{display:none!important}
  .more{margin-top:-48px}
}
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:640px;margin-inline:auto;max-height:88dvh;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -12px 40px rgba(30,23,20,.18),inset 0 1px 0 var(--glass-edge);transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.8,.2,1);overflow:hidden;display:flex;flex-direction:column;touch-action:none}
.sheet:not([open]){display:none}
.sheet.open{transform:translateY(0)}
.sheet::backdrop{background:rgba(20,16,16,0);transition:background .4s}
.sheet.open::backdrop{background:rgba(20,16,16,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet .grab{display:grid;place-items:center;padding:10px 0 4px;cursor:grab}
.sheet .grab span{width:40px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.sheet .x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.sheet-body{overflow-y:auto;padding:4px 24px calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;touch-action:pan-y;overscroll-behavior:contain}
.sheet-art{display:grid;place-items:center;background:var(--panel);margin:0 -24px 6px;padding:22px 0 16px}
.sheet-art svg{height:170px;width:auto}
.sheet .badge{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--champ)}
.sheet .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sheet h3{font-size:32px}
.sheet .price{font-family:var(--display);font-size:30px}
.sheet .aka{font-family:var(--italic);font-style:italic;color:var(--champ);margin-top:-8px}
.sheet p{margin:0;color:var(--soft)}
.sheet .btn{width:100%;border-radius:16px;margin-top:6px}
html.sheet-open,html.sheet-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.sheet,.sheet::backdrop{transition:none}}

/* ===== 4. Scroll reveals (Safari-native scroll-driven animations) ===== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .head,.about-grid > *,.drip,.flow > div,.concierge-grid > div,details,.unsure,.closing .wrap > *,.course,.sitefoot .wrap > div{
      animation:reveal-up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes reveal-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
    .drip{view-timeline-name:--card;view-timeline-axis:block}
    .drip .liq{animation:fill-up linear both;animation-timeline:--card;animation-range:entry 20% cover 45%}
    @keyframes fill-up{from{transform:translateY(46px)}to{transform:none}}
  }
}
@media (max-width:640px){.trust{flex-direction:column;gap:4px}.trust span+span::before{content:none}}