/* Liquif Picture — Design System */
:root{--ink:#14110e;--ink2:#211c17;--paper:#f3ede3;--card:#faf6ee;--sand:#e4d8c4;--bronze:#a97f49;--gold:#cfa96e;--mist:#857b6e;--line:rgba(20,17,14,.14);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 15px/1.7 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:auto;padding:0 28px}
.dark{background:var(--ink);color:var(--paper)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
h1{font-size:clamp(46px,7vw,92px)}h2{font-size:clamp(34px,4.6vw,58px)}h3{font-size:26px}
em{font-style:italic;color:var(--bronze)}.dark em,.hero em{color:var(--gold)}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:34px;height:1px;background:currentColor}
section{padding:120px 0}

/* Tombol */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1px solid currentColor;border-radius:99px;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:none;color:inherit;transition:.35s}
.btn:after{content:"→";transition:.35s}.btn:hover:after{transform:translateX(5px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}.btn.gold:hover{background:var(--paper);border-color:var(--paper)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}.btn.ink:hover{background:var(--bronze);border-color:var(--bronze)}
.btn.sm{padding:8px 16px;font-size:11px}.btn.sm:after{display:none}
.btn.no{color:#a9503e}
.btn.delete-btn{background:var(--bronze);border-color:var(--bronze);color:var(--paper)}
.btn.delete-btn:hover{background:var(--ink2);border-color:var(--ink2)}

/* Navigasi */
nav{position:fixed;inset:0 0 auto;z-index:30;transition:.4s;color:var(--paper)}
nav .wrap{display:flex;align-items:center;gap:30px;height:78px}
nav.s{background:rgba(20,17,14,.92);backdrop-filter:blur(14px)}
.logo{margin-right:auto;display:flex;align-items:center;gap:12px;color:var(--paper);transition:opacity .25s ease}
.logo:hover{opacity:.9}
.logo-brand{display:flex;align-items:center;justify-content:center;flex:none;color:var(--paper)}
.logo-icon{display:block;width: 80px;height:auto;color:var(--paper)}
.studio-photo-icon{display:block;width:52px;height:52px;object-fit:cover;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.logo-wordmark{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1}
.logo-script{font-family:"Segoe Print","Bradley Hand",cursive;font-size:clamp(1.6rem,1.55vw,2.8rem);font-weight:700;font-style:italic;letter-spacing:-.06em;color:var(--paper);transform:translateY(4px)}
.logo-subtitle{font-size:clamp(.45rem,.6vw,.9rem);letter-spacing:.42em;text-transform:uppercase;color:var(--paper);opacity:.9;margin-top:8px;transform:translateY(2px)}
nav .btn{white-space:nowrap}
nav .l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;transition:.25s ease}
nav .l:hover,nav .l.active{opacity:1;color:var(--gold)}

/* Foto placeholder (ganti dengan <img> asli) */
.ph{background:linear-gradient(160deg,var(--c1,#c9a46c),var(--c2,#5b4129));position:relative;overflow:hidden}
.ph:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,30%) var(--y,25%),rgba(255,240,215,.55),transparent 45%)}
.ph:after{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph.b{--c1:#8d9a8a;--c2:#2c3a33;--x:70%}.ph.c{--c1:#d8b9a0;--c2:#6b3f35;--y:60%}.ph.d{--c1:#a3a7b3;--c2:#2d3040;--x:40%;--y:70%}.ph.e{--c1:#e4cfa3;--c2:#8a6a3a}

/* Hero */
.hero{min-height:100vh;display:grid;align-items:center;padding:120px 0 70px;overflow:hidden;background:radial-gradient(900px 600px at 80% 30%,#3a2d20 0,transparent 60%),var(--ink);color:var(--paper)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero p{max-width:440px;margin:26px 0 36px;opacity:.75;font-weight:300}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.vis{position:relative;aspect-ratio:1;max-width:470px;justify-self:end;width:100%}
.blob{position:absolute;inset:0;animation:morph 14s ease-in-out infinite}
.vis .dot{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;left:-9%;bottom:6%;border:6px solid var(--ink)}
@keyframes morph{0%,100%{border-radius:58% 42% 61% 39%/44% 56% 44% 56%}50%{border-radius:40% 60% 38% 62%/58% 42% 60% 40%}}

/* Profil & galeri */
.profil .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.profil .num{font:italic 400 150px/.8 var(--serif);color:var(--sand)}
.profil p{margin-top:22px;color:#4b443b;max-width:560px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.pillars b{font:500 22px var(--serif);display:block}.pillars span{font-size:13px;color:var(--mist)}
.gal{padding-top:0}
.gal .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:20px}
.masonry{columns:4 220px;column-gap:16px}
.masonry .ph{break-inside:avoid;margin-bottom:16px;border-radius:4px;cursor:zoom-in;transition:.5s}
.masonry .ph:hover{border-radius:70px 4px 70px 4px}
.h1{height:230px}.h2{height:320px}.h3{height:420px}

/* Paket */
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.pc{border:1px solid var(--line);padding:38px 32px;border-radius:4px 4px 4px 90px;display:flex;flex-direction:column;gap:14px;transition:.4s;background:var(--card)}
.pc:hover{transform:translateY(-8px)}.pc.f{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pc .rn{font:italic 54px/1 var(--serif);color:var(--gold)}.pc .pr{font:500 32px var(--serif)}
.pc ul{list-style:none;font-size:13.5px;opacity:.8;border-top:1px solid var(--line);padding-top:14px}
.package-section-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:32px}
.package-category-filters{display:flex;justify-content:flex-end;flex:1;flex-wrap:wrap;gap:9px}
.package-category-button{padding:10px 16px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:rgba(255,255,255,.55);font:400 13px var(--sans);color:inherit;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.package-category-button:hover,.package-category-button:focus-visible{border-color:var(--bronze);outline:none}
.package-category-button.is-active{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pc li{padding:3px 0}.pc li:before{content:"— ";color:var(--bronze)}
.pc .btn{margin-top:auto;align-self:flex-start}

/* Alur & cek reservasi */
.flow{background:var(--ink2);color:var(--paper)}
.flow ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:50px 0 56px;counter-reset:s}
.flow li{border-top:1px solid rgba(255,255,255,.2);padding-top:18px;counter-increment:s;font-size:13px;opacity:.85}
.flow li:before{content:"0" counter(s);display:block;font:italic 30px var(--serif);color:var(--gold);margin-bottom:6px}
.code{display:flex;gap:12px;max-width:540px;border-bottom:1px solid var(--gold);padding-bottom:10px;align-items:center}
.code input{flex:1;background:none;border:0;color:inherit;font:300 26px var(--serif);outline:0;letter-spacing:.12em;min-width:0}

/* Testimoni */
.tq{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;margin-top:50px;align-items:start}
.tq blockquote{font:italic 400 clamp(26px,3vw,40px)/1.25 var(--serif)}
.st{color:var(--bronze);letter-spacing:4px;margin:14px 0}
.sq{border-top:1px solid var(--line);padding:22px 0;font-size:14px}.sq:first-child{border:0;padding-top:0}
.testimonial-rating{border:0;padding:0}
.testimonial-rating__legend{font-size:14px;font-weight:500;margin-bottom:8px}
.testimonial-rating__stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;width:max-content}
.testimonial-rating .testimonial-rating__input{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0}
.testimonial-rating .testimonial-rating__star{display:block;color:#c9c0b4;cursor:pointer;font-size:36px;letter-spacing:normal;line-height:1;margin:0;padding:2px;text-transform:none;transition:color .2s,transform .2s}
.testimonial-rating__input:checked~.testimonial-rating__star,.testimonial-rating__star:hover,.testimonial-rating__star:hover~.testimonial-rating__star{color:var(--gold)}
.testimonial-rating__star:hover{transform:scale(1.12)}
.testimonial-rating__input:focus-visible+.testimonial-rating__star{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}
.testimonial-rating__hint{color:var(--mist);font-size:12px;margin-top:6px}

/* Footer */
footer{background:var(--ink);color:var(--paper);padding:90px 0 36px}
footer .studio-photo-icon{width:48px;height:48px}
.fg{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:44px}
footer h4{font:500 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
footer p{opacity:.75;font-size:14px}
footer .social-link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;transition:color .2s}
footer .social-link-icon{width:16px;height:16px;flex:none}
footer .social-link:hover,footer .social-link:focus-visible{color:var(--gold)}
footer .social-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.map{min-height:200px;border-radius:4px 4px 4px 70px;--c1:#3a3f3a;--c2:#171a18;display:grid;place-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.map span{position:relative;z-index:2;opacity:.8}
.copy{margin-top:70px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;font-size:12px;opacity:.55}

/* Pop up */
.ov{position:fixed;inset:0;background:rgba(20,17,14,.62);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:60;opacity:0;pointer-events:none;transition:.35s}
.ov.on{opacity:1;pointer-events:auto}
.ov .md{justify-self:center;align-self:center}
.md{background:var(--paper);width:100%;max-width:500px;max-height:90vh;overflow:auto;border-radius:30px 30px 30px 84px;padding:38px 36px 32px;transform:translateY(24px) scale(.98);transition:.45s cubic-bezier(.2,.8,.2,1);position:relative;color:var(--ink)}
.ov.on .md{transform:none}.md.w{max-width:700px}
.md .x{position:absolute;right:22px;top:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:18px;color:var(--ink)}
.md h3{font-size:36px;margin:8px 0 22px}
.fld{margin-bottom:16px}.fld label{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.fld input,.fld select,.fld textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;font:400 16px var(--sans);color:inherit;outline:0;resize:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--bronze)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:14px;margin-bottom:20px}
.kv i{font-style:normal;color:var(--mist);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.md .acts{margin-top:22px}
.pill{display:inline-block;padding:3px 12px;border-radius:99px;font-size:11px;letter-spacing:.06em;background:var(--sand);white-space:nowrap}
.pill.ok{background:#dfe8d5;color:#3f5a35}.pill.wa{background:#f2e3c4;color:#7a5a1f}.pill.rj{background:#f0d6cd;color:#8a3d2d}
.steps{display:flex;margin:6px 0 22px}
.steps span{flex:1;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);border-top:2px solid var(--line);padding-top:8px;margin-right:6px}.steps .d{border-color:var(--bronze);color:var(--ink)}
.drop{border:1px dashed var(--bronze);border-radius:16px;padding:26px;text-align:center;color:var(--mist);font-size:13px;margin-bottom:16px}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.mg .ph{aspect-ratio:1;border-radius:10px}
.note{font-size:12px;color:var(--mist)}.hide{display:none}
.stars{font-size:30px;color:var(--bronze);cursor:pointer;letter-spacing:4px}
.code-big{font:italic 500 40px var(--serif);letter-spacing:.06em;margin:8px 0}
.rv{opacity:0;transform:translateY(26px);transition:1s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}

/* Login */
.auth{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.auth .side{padding:50px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.auth .side .blob{inset:auto -20% -28% 22%;aspect-ratio:1;opacity:.9}
.auth .side em{color:var(--gold)}
.auth q{text-shadow:0 2px 18px rgba(20,17,14,.75);font:italic 400 clamp(30px,3.4vw,46px)/1.15 var(--serif);max-width:430px;position:relative;z-index:2;quotes:none}
.auth .form{display:flex;flex-direction:column;justify-content:center;padding:60px clamp(28px,8vw,110px)}
.auth .form h2{margin:14px 0 34px}.auth .form .fld{margin-bottom:24px}
.lnk{font-size:12px;letter-spacing:.1em;color:var(--bronze);text-decoration:underline;cursor:pointer}
.err{font-size:12.5px;color:#a9503e;margin-bottom:18px}
.login-page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);min-height:100vh;background:var(--paper)}
.login-story{position:relative;display:flex;min-height:720px;overflow:hidden;background:var(--ink);color:var(--paper)}
.login-photo,.login-story:after{position:absolute;inset:0;width:100%;height:100%}
.login-photo{object-fit:cover;opacity:.5}
.login-story:after{content:"";background:linear-gradient(180deg,rgba(20,17,14,.58),rgba(20,17,14,.18) 45%,rgba(20,17,14,.82))}
.login-story-content{position:relative;z-index:1;display:flex;width:100%;flex-direction:column;justify-content:space-between;padding:clamp(32px,6vw,84px)}
.login-brand{display:flex;align-items:center;gap:14px;color:var(--paper)}
.login-brand>span:last-child{display:flex;flex-direction:column;gap:4px}
.login-brand b{font:italic 600 26px var(--serif)}
.login-brand small{font-size:9px;letter-spacing:.28em;text-transform:uppercase}
.login-kicker{font-size:10px;letter-spacing:.32em;color:var(--gold)}
.login-story-content h1{max-width:560px;margin:18px 0;font-size:clamp(48px,6vw,80px)}
.login-story-content p{max-width:390px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.8}
.login-home-link{align-self:flex-start;color:var(--paper);font-size:12px;letter-spacing:.12em}
.login-form-wrap{display:grid;place-items:center;padding:clamp(28px,6vw,88px)}
.login-card{width:min(100%,440px)}
.login-card h2{margin:14px 0 10px}
.login-intro,.login-security-note{color:var(--mist);font-size:13px}
.login-card .fld{margin:28px 0 0}
.login-card .fld label,.account-form .fld label{display:block;margin-bottom:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.login-card .fld input,.account-form .fld input{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fffdf9;color:var(--ink);font:400 14px var(--sans)}
.login-card .fld input:focus,.account-form .fld input:focus{outline:2px solid rgba(180,137,77,.35);border-color:var(--bronze)}
.login-remember{display:flex;align-items:center;gap:9px;margin:22px 0;color:var(--mist);font-size:13px}
.login-remember input{accent-color:var(--ink)}
.login-submit{width:100%;justify-content:center;margin-top:8px}
.login-error{margin:20px 0;padding:12px 14px;border:1px solid rgba(169,80,62,.25);border-radius:8px;background:rgba(169,80,62,.08);color:#a9503e;font-size:13px}
.login-security-note{margin-top:22px;text-align:center}
.account-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:22px;margin-top:28px}
.account-grid.single-account{grid-template-columns:minmax(0,1fr)}
.account-panel{padding:28px}
.account-panel h3{margin:12px 0}
.account-description{margin-bottom:22px;color:var(--mist);font-size:13px}
.account-form .fld{margin-bottom:18px}
.admin-account-form{padding:22px 0;border-top:1px solid var(--line)}
.admin-account-form h4{margin-bottom:18px}
/* Dashboard */
.dsh{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sb{background:var(--ink);color:var(--paper);padding:30px 22px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.sb .logo{margin-bottom:34px;font-size:24px;margin-right:0}
.admin-studio-logo{width:42px;height:42px;flex:none;object-fit:cover;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.admin-logo-placeholder{display:grid;width:42px;height:42px;flex:none;place-items:center;padding:4px;border:1px dashed rgba(255,255,255,.55);border-radius:50%;color:var(--paper);font:500 8px/1.1 var(--sans);text-align:center}
.sb .admin-logo-placeholder{width:52px;height:52px;font-size:9px}
.sb .m{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font:400 14px var(--sans);color:inherit;background:none;border:0;text-align:left;cursor:pointer;opacity:.65}
.sb .m .sidebar-icon{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}
.sb .m span{min-width:0}
.sb .m.on,.sb .m:hover{opacity:1;background:rgba(255,255,255,.08)}.sb .out{margin-top:auto}
.admin-profile-menu{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.admin-profile-toggle{display:flex;width:100%;align-items:center;gap:10px;padding:9px 8px;border:0;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:400 13px var(--sans)}
.admin-profile-toggle:hover,.admin-profile-toggle:focus-visible,.admin-profile-menu.is-open .admin-profile-toggle{background:rgba(255,255,255,.1);outline:none}
.admin-profile-avatar{display:grid;width:36px;height:36px;flex:none;place-items:center;border-radius:50%;background:var(--gold);color:var(--ink);font:500 13px var(--sans)}
.admin-profile-identity{display:grid;min-width:0;flex:1;gap:3px}
.admin-profile-identity strong,.admin-profile-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-profile-identity strong{font-size:12px;font-weight:500}
.admin-profile-identity small{color:rgba(255,255,255,.58);font-size:10px}
.admin-profile-chevron{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.7;transition:transform .2s}
.admin-profile-menu.is-open .admin-profile-chevron{transform:rotate(90deg)}
.admin-profile-actions{position:absolute;right:0;bottom:calc(100% + 10px);left:0;z-index:60;display:none;padding:7px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#302d2a;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.admin-profile-menu.is-open .admin-profile-actions{display:block}
.admin-profile-action{display:flex;width:100%;align-items:center;gap:11px;padding:11px 10px;border:0;border-radius:9px;background:transparent;color:var(--paper);text-decoration:none;text-align:left;cursor:pointer;font:400 12px var(--sans)}
.admin-profile-action:hover,.admin-profile-action:focus-visible{background:rgba(255,255,255,.09);outline:none}
.admin-profile-action>svg{width:18px;height:18px;flex:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.admin-profile-action>span{display:grid;gap:3px}
.admin-profile-action strong{font-weight:500}
.admin-profile-action small{color:rgba(255,255,255,.58);font-size:10px}
.admin-profile-logout{margin:5px 0 0;padding-top:5px;border-top:1px solid rgba(255,255,255,.12)}
.main{padding:40px 44px}
.profile-page{padding:44px clamp(22px,3.4vw,56px) 56px}
.profile-top h2{margin-top:12px}
.profile-intro{max-width:560px;margin-top:12px;color:var(--mist);font-size:14px}
.profile-top-note{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(250,246,238,.64)}
.profile-top-note>span{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:var(--ink);color:var(--gold);font:italic 18px var(--serif)}
.profile-top-note strong,.profile-top-note small{display:block}
.profile-top-note strong{font-size:12px;font-weight:500}
.profile-top-note small{margin-top:2px;color:var(--mist);font-size:11px}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.8fr);gap:24px;align-items:start;max-width:1440px}
.fc.profile-form{max-width:none;padding:0;overflow:hidden;border-radius:8px 8px 8px 48px;box-shadow:0 16px 42px rgba(20,17,14,.045)}
.profile-form-heading{display:flex;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line)}
.profile-form-number{display:grid;width:42px;height:42px;flex:none;place-items:center;border:1px solid rgba(169,127,73,.3);border-radius:50%;color:var(--bronze);font:italic 20px var(--serif)}
.fc.profile-form .profile-form-heading h3{margin:0;font-size:25px}
.profile-form-heading p{margin-top:4px;color:var(--mist);font-size:12px}
.profile-required{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--mist);font-size:10px;white-space:nowrap}
.profile-required i{width:7px;height:7px;border-radius:50%;background:var(--bronze)}
.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;padding:26px 28px 30px}
.profile-fields .fld{min-width:0;margin:0}
.profile-field-wide{grid-column:1/-1}
.profile-photo-preview{display:block;width:96px;height:96px;margin-top:12px;object-fit:cover;border-radius:12px;border:1px solid rgba(20,17,14,.12)}
.profile-fields .fld label{margin-bottom:7px;font-size:10px;letter-spacing:.16em}
.profile-fields .fld label span{color:var(--mist);font-size:9px;letter-spacing:.08em;text-transform:none}
.profile-fields .fld input,.profile-fields .fld textarea{min-height:46px;padding:11px 13px;border:1px solid rgba(20,17,14,.12);border-radius:10px;background:#fffdf9;font-size:14px;transition:border-color .2s,box-shadow .2s,background .2s}
.profile-fields .fld textarea{min-height:94px;resize:vertical}
.profile-fields .fld input::placeholder,.profile-fields .fld textarea::placeholder{color:#a49b8f;font-size:12px}
.profile-fields .fld input:focus,.profile-fields .fld textarea:focus{border-color:var(--bronze);background:#fff;box-shadow:0 0 0 3px rgba(169,127,73,.1)}
.profile-field-hint{display:block;margin-top:7px;color:var(--mist);font-size:11px;line-height:1.55}
.profile-fields .er{margin-top:5px}
.profile-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px 22px;border-top:1px solid var(--line);background:rgba(244,238,228,.55)}
.profile-form-footer>span{color:var(--mist);font-size:11px}
.profile-submit{flex:none;padding:12px 20px;font-size:10px}
.profile-aside{display:grid;gap:16px}
.profile-showcase{position:relative;overflow:hidden;padding:24px;border-radius:8px 8px 8px 52px;background:radial-gradient(280px 220px at 100% 0%,rgba(169,127,73,.3),transparent 75%),var(--ink);color:var(--paper);box-shadow:0 16px 42px rgba(20,17,14,.1)}
.profile-showcase:after{position:absolute;right:-50px;bottom:72px;width:210px;height:210px;border:1px solid rgba(207,169,110,.14);border-radius:50%;content:"";pointer-events:none}
.profile-showcase-top,.profile-showcase-bottom{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-size:9px;letter-spacing:.22em}
.profile-showcase-top>span:first-child{display:flex;align-items:center;gap:7px}
.profile-showcase-top i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.profile-showcase-label{opacity:.7}
.profile-monogram{display:grid;width:66px;height:66px;margin:34px 0 16px;place-items:center;border:1px solid rgba(207,169,110,.5);border-radius:50%;color:var(--gold);font:italic 34px var(--serif)}
.profile-showcase h3{position:relative;z-index:1;font-size:31px}
.profile-showcase-description{position:relative;z-index:1;margin-top:10px;color:rgba(243,237,227,.72);font-size:12px;line-height:1.7}
.profile-showcase-details{position:relative;z-index:1;display:grid;gap:15px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(243,237,227,.16)}
.profile-showcase-details span{color:var(--gold);font-size:8px;letter-spacing:.2em}
.profile-showcase-details p{margin-top:4px;color:rgba(243,237,227,.84);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.profile-showcase-bottom{position:relative;z-index:1;margin-top:24px;padding-top:16px;border-top:1px solid rgba(243,237,227,.16);font-size:8px}
.profile-aside-note{display:flex;gap:13px;padding:18px;border:1px solid var(--line);border-radius:8px 8px 8px 28px;background:rgba(250,246,238,.72)}
.profile-note-mark{display:grid;width:30px;height:30px;flex:none;place-items:center;border-radius:50%;background:#efe3d0;color:var(--bronze)}
.profile-aside-note h4{font:500 19px/1.2 var(--serif)}
.profile-aside-note p{margin-top:6px;color:var(--mist);font-size:11px;line-height:1.65}
.top{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:20px;flex-wrap:wrap}
.profile-top{align-items:center;margin-bottom:32px}
.top h2{font-size:46px}
.dashboard-feedback{padding:14px 18px;margin:-12px 0 22px;border-radius:6px;font-size:14px}
.dashboard-feedback p+p{margin-top:5px}
.dashboard-feedback.success{background:#e8f2e8;border:1px solid #bfd5bf;color:#285d32}
.dashboard-feedback.error{background:#f8e9e6;border:1px solid #e8c4bc;color:#8a3527}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kp.dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kp div{background:var(--card);border:1px solid var(--line);border-radius:4px 4px 4px 40px;padding:20px 22px}
.kp a.kp-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:4px 4px 4px 40px;padding:20px 22px;color:inherit;transition:background .2s,border-color .2s,transform .2s}
.kp a.kp-card:hover,.kp a.kp-card.active{background:#f0e7d8;border-color:var(--bronze);transform:translateY(-2px)}
.kp a.kp-card:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.kp-card small{display:block;margin-top:8px;color:var(--mist);font-size:11px;letter-spacing:.04em}
.kp.dashboard-kpis .kp-card{min-width:0;padding:16px 18px}
.kp.dashboard-kpis span{letter-spacing:.12em}
.kp.dashboard-kpis b{font-size:38px}
.kp span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}.kp b{display:block;font:500 44px/1 var(--serif);margin-top:8px}
.cols{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px 4px 4px 56px;padding:26px}
.card h3{margin-bottom:16px}
.action-btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.action-btn-group .btn{padding:7px 10px;font-size:10px;letter-spacing:.08em;white-space:nowrap}
.workflow-substatus{display:block;margin-top:7px;color:var(--mist);font-size:11px}
.workflow-instruction{margin:18px 0;padding:14px 16px;border-left:3px solid var(--bronze);background:#f0e7d8;border-radius:0 12px 12px 0}
.receipt-preview-container{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.receipt-label{display:block;margin-bottom:10px;color:var(--mist);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.receipt-preview-container a{display:block;text-align:center}
.receipt-preview-img{display:block;width:auto;max-width:100%;max-height:320px;margin:0 auto;border-radius:6px;object-fit:contain}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:640px;font-size:13.5px}
#rtab{min-width:760px}
#rtab th:last-child{text-align:left}
#rtab td[data-l="Kode"],#rtab td[data-l="Jadwal"]{white-space:nowrap}
th{font:500 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:14px 8px;border-bottom:1px solid var(--line)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;font-size:12px}
.cal span{padding:7px 0;border-radius:50%}.cal .h{color:var(--mist);font-size:10px}.cal .b{background:var(--ink);color:var(--gold)}
.cal button.cal-day{appearance:none;border:0;border-radius:50%;aspect-ratio:1/1;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background .2s,color .2s}
.cal button.cal-day:hover,.cal button.cal-day:focus-visible{background:var(--sand);outline:none}
.cal button.cal-day.b{background:var(--ink);color:var(--gold)}
.cal button.cal-day.selected{box-shadow:inset 0 0 0 2px var(--bronze)}


/* Validasi, konfirmasi, dan status */
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#a9503e}
.fld.bad .drop{border-color:#a9503e}
.er{display:block;color:#a9503e;font-size:12px;margin-top:6px}
.flow .er,.flow .err{color:#e8a08f}
.ov.top{z-index:80}
.md.shake{animation:sh .4s}
@keyframes sh{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.done>*:not(.okp):not(.x){display:none}
.okp{text-align:center;padding:8px 0}
.okp h3{margin:0 0 10px}.okp p{color:#4b443b;margin-bottom:14px}
.tick{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:28px;margin:0 auto 18px}
.rcpt{border:1px dashed var(--bronze);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--mist);margin:18px 0}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:99px;font-size:13px;opacity:0;transition:.4s;z-index:90;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.btn[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}
.row-in{display:flex;gap:12px;align-items:flex-end}.row-in input{flex:1;min-width:0}
.kc{font:500 24px var(--serif)!important;letter-spacing:.14em;text-transform:uppercase}
.fld input[type=file]{display:none}
.fld label.drop{display:block;font-size:13px;letter-spacing:0;text-transform:none;color:var(--mist);cursor:pointer;margin:0}
.lock{display:flex;gap:8px;align-items:center}
.steps .c{border-top:2px dashed var(--bronze);color:var(--ink);font-weight:500}

/* Kelola paket */
.pi{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.pi b{font:500 24px var(--serif);display:block;line-height:1.2}
.md .pi .acts{margin:0;flex-wrap:nowrap}

/* ===== Responsif: laptop · tablet · ponsel ===== */
html{-webkit-text-size-adjust:100%}
.nl{display:flex;align-items:center;gap:30px}
.mbar,.sbov,.burger{display:none}
.burger{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:18px;height:1.5px;background:currentColor;transition:.3s;display:block}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.burger.on span:nth-child(2){opacity:0}.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.main,.cols>*{min-width:0}
@media(max-width:1300px){.cols{grid-template-columns:1fr}.cal{max-width:460px}}
@media(max-width:1100px){.main{padding:34px 30px}}
@media(max-width:1024px){.pk{gap:16px}.pc{padding:30px 22px}.profil .wrap{gap:44px}.flow li{font-size:12.5px}}
@media(max-width:900px){
 section{padding:84px 0}
 .burger{display:flex}
 nav .wrap{gap:12px}
 .nl{position:fixed;top:78px;left:0;right:0;background:rgba(20,17,14,.97);backdrop-filter:blur(14px);flex-direction:column;align-items:stretch;padding:8px 28px 28px;gap:0;display:none}
 .nl.open{display:flex}
 .nl .l{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
 .nl .btn{margin-top:20px;justify-content:center}
 .hero{min-height:auto;padding:110px 0 70px}
 .hero .wrap,.profil .wrap,.tq,.auth{grid-template-columns:1fr}
 .login-page{grid-template-columns:1fr}
 .login-story{min-height:360px}
 .login-story-content{gap:54px;padding:32px}
 .login-form-wrap{padding:48px 26px}
 .account-grid{grid-template-columns:1fr}
 .hero .wrap{gap:40px}.vis{justify-self:center;max-width:380px}
 .profil .wrap{gap:10px}.profil .num{font-size:100px}
 .fg{grid-template-columns:1fr 1fr}.fg>div:last-child{grid-column:1/-1}
 .kp{grid-template-columns:1fr 1fr}
 .auth .side{min-height:260px;padding:32px}.auth .side .blob{inset:auto -30% -50% 30%}
 .auth .form{padding:48px 28px}
 .dsh{display:block}
 .mbar{display:flex;position:fixed;inset:0 0 auto;z-index:40;height:64px;align-items:center;justify-content:space-between;padding:0 18px;background:var(--ink);color:var(--paper)}
 .mbar .logo{margin:0;font-size:24px}
 .sb{position:fixed;left:0;top:0;bottom:0;width:272px;height:100%;z-index:50;transform:translateX(-102%);transition:.4s cubic-bezier(.2,.8,.2,1);overflow:auto}
 .sb.open{transform:none}
 .sbov{display:block;position:fixed;inset:0;background:rgba(20,17,14,.55);z-index:45;opacity:0;pointer-events:none;transition:.3s}.sbov.on{opacity:1;pointer-events:auto}
 .main{padding:84px 22px 40px}
}
@media(max-width:700px){
 .package-section-header{align-items:stretch}
 .package-category-filters{justify-content:flex-start}
}
@media(max-width:760px){
 .pk,.flow ol,.pillars{grid-template-columns:1fr}.flow ol{gap:0}.pillars{gap:16px}
 .flow li{padding:16px 0;display:flex;gap:16px;align-items:baseline}.flow li:before{margin:0;min-width:38px}
}
@media(max-width:640px){
 .rt,.rt tbody{display:block;min-width:0}.rt thead{display:none}
 .rt tr{display:block;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:12px}
 .rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:6px 0;text-align:right}
 .rt td:before{content:attr(data-l);font:500 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);text-align:left}
}
@media(max-width:560px){
 .package-category-filters{gap:7px}
 .package-category-button{padding:9px 13px;font-size:12px}
 .wrap{padding:0 20px}section{padding:64px 0}h2{font-size:34px}
 .r2,.fg{grid-template-columns:1fr}.kv{grid-template-columns:96px 1fr}
 .masonry{columns:2;column-gap:10px}.masonry .ph{margin-bottom:10px}.h1{height:150px}.h2{height:210px}.h3{height:270px}
 .gal .head{flex-direction:column;align-items:flex-start}
 .hero .acts .btn{flex:1;justify-content:center}
 .pc .rn{font-size:44px}.code-big{font-size:30px}.code input{font-size:20px}
 .top h2{font-size:34px}.kp b{font-size:34px}.kp div,.kp a.kp-card{padding:16px}
 .copy{flex-direction:column;gap:6px;align-items:center}
 .ov{place-items:center;padding:12px}
 .md{max-width:100%!important;border-radius:28px 28px 0 0;max-height:92vh;padding:32px 22px 28px}
 .steps span{font-size:8.5px;letter-spacing:.04em;margin-right:4px}
 .pi{flex-wrap:wrap}.auth .form h2{font-size:38px}
}
@media(max-width:420px){.logo small{display:none}}
@media(max-width:360px){.kp{grid-template-columns:1fr}}
@media(pointer:coarse){.btn.sm{padding:11px 18px}}

/* ===== Halaman bertahap (sesuai sequence) ===== */
.pg{padding:132px 0 90px;min-height:70vh}
.pg h1{font-size:clamp(40px,6vw,72px)}
.pg .lead{color:#4b443b;max-width:560px;margin:16px 0 34px}
.crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:18px}.crumb a{color:var(--bronze)}
.seq{display:flex;gap:10px;margin:0 0 34px;flex-wrap:wrap}
.seq span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border:1px solid var(--line);border-radius:99px;color:var(--mist)}.seq .on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
.fc{background:var(--card);border:1px solid var(--line);border-radius:4px 4px 4px 56px;padding:32px}
.fc h3{margin-bottom:18px}.fc.dk{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fc.done{min-height:0}
.bnr{border:1px solid var(--bronze);background:#f0e4cf;border-radius:14px;padding:14px 18px;margin-bottom:24px;font-size:14px}
.bnr b{font-family:var(--serif);font-size:26px;letter-spacing:.08em;display:block}
.det{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:8px 18px;border:1px solid var(--line);border-radius:99px;font-size:13px}.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cal2 header,.cl{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cl button{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--ink)}
.cal span.o{cursor:pointer}.cal span.o:hover{background:var(--sand)}.cal span.p{opacity:.3}
.legend{display:flex;gap:16px;font-size:12px;color:var(--mist);margin-top:12px;flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--ink)}
.mg.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.gph{position:relative}.chk{position:absolute;top:8px;left:8px;z-index:3;width:20px;height:20px;accent-color:var(--bronze)}
.gallery-placement{display:grid;gap:5px;margin-top:8px;color:var(--mist);font-size:11px}
.gallery-placement select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
.gallery-placement select:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.flt{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;align-items:end}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:22px 0}
.sum div{background:var(--card);border:1px solid var(--line);border-radius:4px 4px 4px 30px;padding:16px 20px}.sum span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}.sum b{display:block;font:500 40px/1.1 var(--serif)}
.hlt{display:flex;gap:10px;flex-wrap:wrap}
/* ===== Hamburger & navigasi responsif ===== */
.bg{display:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;flex-direction:column;gap:5px;justify-content:center;align-items:center;flex:none}
.bg i{display:block;width:18px;height:1.5px;background:currentColor;transition:.3s}
.open>.bg i:nth-child(1),.open .bg i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.open .bg i:nth-child(2){opacity:0}.open .bg i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
nav .menu{display:contents}
.mbar{display:none}.sbk{display:none}
.main{min-width:0}
@media(max-width:1024px){
 .main{padding:32px 28px}.cols,.two{grid-template-columns:1fr}.kp{grid-template-columns:repeat(2,1fr)}
 .pk{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}.flow ol{grid-template-columns:repeat(3,1fr)}
 .fg{grid-template-columns:1fr 1fr}.masonry{columns:3 200px}.det{gap:34px}
 .profile-layout{grid-template-columns:minmax(0,1.35fr) minmax(245px,.8fr);gap:18px}
 .profile-fields{padding:24px 22px;gap:18px 14px}
 .profile-form-heading{padding:22px}
}
@media(max-width:900px){
 section{padding:80px 0}.pg{padding:108px 0 70px}
 .bg{display:flex}
 nav .menu{display:none;position:fixed;inset:78px 0 auto;background:var(--ink);flex-direction:column;align-items:flex-start;padding:26px 28px 34px;gap:20px;max-height:calc(100vh - 78px);overflow:auto}
 nav.open .menu{display:flex}nav.open{background:var(--ink)}
 .hero{min-height:auto;padding:110px 0 60px}
 .hero .wrap,.profil .wrap,.tq,.auth,.det,.fg{grid-template-columns:1fr}
 .vis{justify-self:center;max-width:360px}.profil .num{font-size:100px}.profil .wrap{gap:30px}
 .auth .side{min-height:280px;padding:32px}.auth .form{padding:44px 28px}
 .dsh{grid-template-columns:1fr}
 .mbar{display:flex;position:sticky;top:0;z-index:40;background:var(--ink);color:var(--paper);padding:10px 18px;align-items:center;justify-content:space-between}
 .mbar .logo{font-size:24px}
 .sb{position:fixed;inset:0 auto 0 0;width:min(290px,84vw);height:100%;z-index:50;transform:translateX(-102%);transition:.4s;overflow:auto}.sb.open{transform:none}
 .sbk{position:fixed;inset:0;background:rgba(20,17,14,.55);z-index:45;opacity:0;pointer-events:none;transition:.3s;display:block}.sbk.on{opacity:1;pointer-events:auto}
 .main{padding:24px 18px 50px}.top h2{font-size:36px}
 .profile-page{padding:28px 22px 44px}
 .profile-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.72fr)}
 .profile-top-note{display:none}
}
@media(max-width:700px){
 .rt table,#rtab{min-width:0;display:block}.rt thead{display:none}.rt tbody{display:block}
 .rt tr{display:block;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:12px;background:var(--paper)}
 .rt td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border:0;padding:8px 0;text-align:right;overflow-wrap:anywhere}
 .rt td:before{content:attr(data-l);font:500 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);text-align:left;flex:none}
 .rt td.action-cell{align-items:flex-start;flex-direction:column}
 .action-btn-group{width:100%;justify-content:flex-start}
 .card{padding:20px 16px}
 .profile-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
 .dashboard-page .cols{grid-template-columns:minmax(0,1fr)}
 .dashboard-page .card,.report-page .card{min-width:0}
 .dashboard-page .rt,.report-page .rt{overflow:visible}
 .dashboard-page .rt table,.report-page .rt table,.dashboard-page #rtab{width:100%;min-width:0;display:block}
 .dashboard-page .rt thead,.report-page .rt thead{display:none}
 .dashboard-page .rt tbody,.report-page .rt tbody{display:block}
 .dashboard-page .rt tr,.report-page .rt tr{display:block;margin-bottom:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
 .dashboard-page .rt td,.report-page .rt td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:8px 0;border:0;text-align:right;overflow-wrap:anywhere}
 .dashboard-page .rt td:before,.report-page .rt td:before{content:attr(data-l);flex:none;color:var(--mist);font:500 10.5px var(--sans);letter-spacing:.12em;text-align:left;text-transform:uppercase}
 .dashboard-page .rt td.action-cell{align-items:flex-start;flex-direction:column}
 .dashboard-page .rt td[colspan]{display:block;text-align:left}
 .dashboard-page .rt td[colspan]:before{display:none}
 .dashboard-page .rt .action-btn-group{width:100%;justify-content:flex-start}
 .report-page .rt td[data-l="Informasi"]{display:block;text-align:left}
 .report-page .rt td[data-l="Informasi"]:before{display:none}
 .report-page .sum{grid-template-columns:repeat(2,minmax(0,1fr))}
 .report-page .sum b{font-size:clamp(22px,4vw,34px);overflow-wrap:anywhere}
}
@media(max-width:700px){
 .report-page .top{align-items:stretch}
 .report-page #download-report{width:100%;justify-content:center}
 .report-page #lform{padding:22px 18px}
 .report-page #lform .acts{display:flex;flex-wrap:wrap}
 .report-page #lform .acts .btn{flex:1;justify-content:center}
 .report-page #report-table-card{padding:14px}
 .report-page #report-table{width:100%}
 .report-page #report-table tr{display:block}
 .report-page #report-table td[data-l="Informasi"]{display:block;text-align:left}
 .report-page #report-table td[data-l="Informasi"]:before{display:none}
 .report-page .note.screen-only{margin:0 0 18px!important}
}
@media(max-width:760px){
 .profile-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
 .wrap{padding:0 20px}.pk,.flow ol,.pillars,.r2,.fg{grid-template-columns:1fr}.kp{grid-template-columns:1fr 1fr;gap:10px}.kp div,.kp a.kp-card{padding:14px}.kp b{font-size:34px}.kp span{font-size:9.5px;letter-spacing:.14em}
 .kp.dashboard-kpis{grid-template-columns:1fr 1fr}.kp.dashboard-kpis .kp-card{padding:14px}.kp.dashboard-kpis b{font-size:32px}
 .dashboard-page .main,.dashboard-page.main{padding-right:14px;padding-left:14px}
 .dashboard-page .top{align-items:stretch}
 .dashboard-page .top>.btn{width:100%;justify-content:center}
 .dashboard-page .kp.dashboard-kpis{grid-template-columns:1fr 1fr}
 .dashboard-page .kp.dashboard-kpis span{font-size:9px;letter-spacing:.08em}
 .dashboard-page .kp.dashboard-kpis small{font-size:10px}
 .dashboard-page .flt{grid-template-columns:minmax(0,1fr)}
 .report-page .sum{grid-template-columns:minmax(0,1fr)}
 .report-page .sum b{font-size:30px}
 .report-page .top h2{font-size:32px}
 .md{padding:30px 22px 26px}.fc{padding:24px 20px}.masonry{columns:2 140px}.copy{flex-direction:column;gap:8px}
 .steps span{font-size:9px;margin-right:4px}.kv{grid-template-columns:96px 1fr}h3{font-size:24px}.md h3{font-size:30px}
 .code{flex-wrap:wrap}.row-in{flex-wrap:wrap}.row-in .btn{width:100%;justify-content:center}.mg.big{grid-template-columns:repeat(2,1fr)}
 .seq span{font-size:10px;padding:6px 12px}.acts .btn{flex:1;justify-content:center}.kc{font-size:20px!important}
 .profile-page{padding:24px 16px 38px}
 .profile-top{margin-bottom:22px}
 .profile-top h2{font-size:34px}
 .profile-intro{font-size:12px}
 .profile-layout{grid-template-columns:1fr}
 .profile-form-heading{gap:11px;padding:18px 17px}
 .profile-form-number{width:36px;height:36px;font-size:17px}
 .profile-form-heading h3{font-size:22px}
 .profile-form-heading p{font-size:11px}
 .profile-required{display:none}
 .profile-fields{grid-template-columns:1fr;gap:17px;padding:20px 17px 22px}
 .profile-field-wide{grid-column:auto}
 .profile-form-footer{align-items:stretch;flex-direction:column;padding:16px 17px 19px}
 .profile-form-footer>span{text-align:center}
 .profile-submit{width:100%;justify-content:center}
 .profile-showcase{padding:22px;border-radius:8px 8px 8px 40px}
}
@media(max-width:380px){
 .dashboard-page .kp.dashboard-kpis{grid-template-columns:minmax(0,1fr)}
}

.fc .acts{margin-top:22px}
.cal span{padding:0;aspect-ratio:1/1;display:grid;place-items:center}
.cal .h{aspect-ratio:auto;padding:4px 0}
.ab{display:flex;gap:8px;justify-content:flex-end}

/* Kelola paket — kartu di HP, font mengikuti tampilan PC, tombol Edit/Hapus tetap kecil di kanan */
@media(max-width:700px){
 .bare{background:none;border:0;padding:0;border-radius:0}
 #ptab .th{display:none}
 #ptab tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;background:var(--card);border-radius:4px 4px 4px 44px;padding:20px 22px;margin-bottom:16px}
 #ptab td{display:block;padding:0;text-align:left;border:0;font:400 13.5px/1.6 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
 #ptab td:before{display:none}
 #ptab td[data-l=Harga]{text-align:right}
 #ptab td[data-l=Durasi]{grid-column:1/-1}
 #ptab td[data-l=Fasilitas]{grid-column:1/-1;margin:6px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
 #ptab td[data-l=Aksi]{grid-column:1/-1}
}
@media(max-width:560px){.top>.btn.gold{width:100%;justify-content:center}}

.masonry .ph {
    transition: background-image 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* Membuat iframe Google Maps mengikuti ukuran kotak pembungkusnya */
.map.ph iframe {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px;
    border: 0;
    pointer-events: auto;
}

.map.ph:before,
.map.ph:after {
    pointer-events: none;
}

/* Editorial photography landing hero */
.hero.hero-editorial {
    position: relative;
    min-height: min(940px, 100svh);
    padding: 126px 0 64px;
    isolation: isolate;
    background:
        radial-gradient(720px 540px at 85% 40%, rgba(120, 83, 47, .28), transparent 70%),
        linear-gradient(115deg, #15120f 0%, #17130f 55%, #21180f 100%);
}

.hero-editorial:before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
    pointer-events: none;
}

.hero-editorial .wrap {
    width: min(100%, 1380px);
    min-height: min(690px, calc(100svh - 190px));
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(36px, 6vw, 88px);
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding: 24px 0 12px;
}

.hero-copy .eyebrow {
    color: var(--gold);
}

.hero-edition {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    color: rgba(243,237,227,.55);
    font-size: 9px;
    letter-spacing: .24em;
}

.hero-edition i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold);
}

.hero-editorial .hero-copy h1 {
    max-width: 660px;
    margin-top: 17px;
    font-size: clamp(56px, 6.7vw, 94px);
    line-height: .96;
    letter-spacing: -.035em;
}

.hero-editorial .hero-copy h1 em {
    color: var(--gold);
}

.hero-editorial .hero-copy>p {
    max-width: 420px;
    margin: 23px 0 29px;
    color: rgba(243,237,227,.68);
    font-size: 14px;
    line-height: 1.85;
}

.hero-editorial .acts {
    align-items: center;
    gap: 11px;
}

.hero-editorial .acts .btn.gold {
    padding: 14px 21px;
    background: var(--gold);
    border-color: var(--gold);
    font-size: 10px;
    letter-spacing: .13em;
}

.hero-editorial .acts .btn.gold:hover {
    background: var(--paper);
    border-color: var(--paper);
}

.hero-outline {
    gap: 14px;
    border-color: rgba(243,237,227,.32);
    color: var(--paper);
    font-size: 10px;
    letter-spacing: .13em;
}

.hero-outline span {
    color: var(--gold);
    font-size: 15px;
    transition: transform .3s;
}

.hero-outline:hover span {
    transform: translate(3px,-3px);
}

.hero-footnote {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: clamp(32px, 5vh, 58px);
    color: rgba(243,237,227,.5);
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .04em;
}

.hero-footnote-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(207,169,110,.38);
    border-radius: 50%;
    color: var(--gold);
    font-size: 15px;
}

.hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: clamp(470px, 66vh, 680px);
    align-items: center;
    padding: 16px 27px 48px 18px;
}

.hero-photo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    border: 1px solid rgba(243,237,227,.16);
    border-radius: 46% 46% 7px 7px / 36% 36% 7px 7px;
    background: linear-gradient(155deg,#8b7154,#35251b 72%);
    box-shadow: 0 32px 90px rgba(0,0,0,.32);
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    animation: hero-photo-reveal 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.hero-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(16,13,10,.16),transparent 30%,transparent 53%,rgba(16,13,10,.72));
}

.hero-photo-kicker {
    position: absolute;
    inset: 24px 25px auto;
    display: flex;
    justify-content: space-between;
    color: rgba(255,250,241,.88);
    font-size: 8px;
    letter-spacing: .2em;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

.hero-photo-caption {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    display: grid;
    gap: 7px;
    color: var(--paper);
}

.hero-photo-caption span {
    color: var(--gold);
    font-size: 8px;
    letter-spacing: .2em;
}

.hero-photo-caption strong {
    font: italic 400 clamp(23px,2.4vw,34px)/1.1 var(--serif);
}

.hero-visual:before {
    position: absolute;
    z-index: -1;
    top: 2%;
    right: -3%;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(207,169,110,.24);
    border-radius: 50%;
    content: "";
}

.hero-side-index {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(243,237,227,.48);
    font-size: 8px;
    letter-spacing: .19em;
    transform: translate(38%,-50%) rotate(90deg);
}

.hero-side-index span {
    color: var(--gold);
    font-family: var(--serif);
    font-size: 15px;
}

.hero-scroll {
    position: absolute;
    right: 28px;
    bottom: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(243,237,227,.46);
    font-size: 8px;
    letter-spacing: .18em;
}

.hero-scroll span {
    width: 24px;
    height: 1px;
    background: var(--gold);
}

@keyframes hero-photo-reveal {
    from { opacity: .35; transform: scale(1.035); }
    to { opacity: 1; transform: scale(1); }
}

@media(max-width:900px) {
    .hero.hero-editorial {
        min-height: auto;
        padding: 128px 0 52px;
    }

    .hero-editorial .wrap {
        min-height: 0;
        grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
        gap: 24px;
    }

    .hero-editorial .hero-copy h1 {
        font-size: clamp(50px,7vw,76px);
    }

    .hero-editorial .hero-copy>p {
        font-size: 13px;
    }

    .hero-visual {
        min-height: 520px;
        padding-right: 20px;
    }
}

@media(max-width:680px) {
    .hero.hero-editorial {
        padding: 112px 0 40px;
    }

    .hero-editorial .wrap {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hero-copy {
        padding: 10px 0 0;
    }

    .hero-edition {
        margin-top: 25px;
    }

    .hero-editorial .hero-copy h1 {
        max-width: 520px;
        margin-top: 12px;
        font-size: clamp(51px,12vw,76px);
    }

    .hero-editorial .hero-copy>p {
        max-width: 480px;
        margin: 16px 0 21px;
        font-size: 13px;
    }

    .hero-footnote {
        display: none;
    }

    .hero-visual {
        width: min(100%,480px);
        min-height: 0;
        aspect-ratio: 1 / 1.08;
        justify-self: center;
        padding: 0 17px 30px 0;
    }

    .hero-photo-frame {
        min-height: 0;
        border-radius: 44% 44% 6px 6px / 34% 34% 6px 6px;
    }

    .hero-photo-kicker {
        inset: 18px 17px auto;
        font-size: 7px;
    }

    .hero-photo-caption {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .hero-side-index {
        right: -4px;
        font-size: 7px;
    }

    .hero-scroll {
        right: 18px;
        bottom: 0;
        font-size: 7px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-photo {
        animation: none;
    }
}

/* Full-bleed editorial photography hero */
.hero.hero-editorial {
    position: relative;
    display: grid;
    min-height: min(900px,100svh);
    align-items: center;
    padding: 130px 0 112px;
    overflow: hidden;
    isolation: isolate;
    background: #17130f;
    color: var(--paper);
}

.hero.hero-editorial:before {
    display: none;
}

.hero-background,
.hero-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-background {
    z-index: -2;
    object-fit: cover;
    object-position: center 42%;
    animation: hero-photo-reveal 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.hero-backdrop {
    z-index: -1;
    background:
        linear-gradient(90deg,rgba(20,16,12,.55),rgba(20,16,12,.3) 50%,rgba(20,16,12,.46)),
        linear-gradient(180deg,rgba(20,16,12,.28),rgba(20,16,12,.2) 32%,rgba(20,16,12,.6)),
        radial-gradient(ellipse at center,rgba(32,23,15,.08),rgba(20,16,12,.28));
}

.hero.hero-editorial .wrap {
    position: relative;
    display: grid;
    width: min(100%,1380px);
    min-height: min(580px,calc(100svh - 240px));
    grid-template-columns: minmax(0,1fr);
    align-content: center;
    justify-items: center;
    gap: 0;
    text-align: center;
}

.hero-content {
    width: min(100%,920px);
}

.hero-edition {
    justify-content: center;
    margin: 0 0 22px;
    color: rgba(255,250,241,.82);
    font-size: 9px;
    letter-spacing: .24em;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.hero-edition i {
    background: var(--gold);
}

.hero-editorial .hero-content h1 {
    max-width: 920px;
    margin: 0 auto;
    font-size: clamp(56px,8.2vw,108px);
    line-height: .94;
    letter-spacing: -.035em;
    text-shadow: 0 3px 24px rgba(0,0,0,.28);
}

.hero-editorial .hero-content h1 em {
    color: var(--gold);
}

.hero-editorial .hero-content>p {
    max-width: 570px;
    margin: 25px auto 31px;
    color: rgba(255,250,241,.85);
    font-size: 14px;
    line-height: 1.85;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.hero-editorial .hero-content .acts {
    justify-content: center;
    gap: 12px;
}

.hero-editorial .hero-content .acts .btn.gold {
    padding: 14px 23px;
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .13em;
}

.hero-editorial .hero-content .acts .btn.gold:hover {
    border-color: var(--gold);
    background: var(--gold);
}

.hero-outline {
    border-color: rgba(255,250,241,.68);
    background: rgba(20,16,12,.12);
    color: var(--paper);
    font-size: 10px;
    letter-spacing: .13em;
    backdrop-filter: blur(5px);
}

.hero-outline:hover {
    border-color: var(--paper);
    background: rgba(20,16,12,.3);
}

.hero-bottom {
    position: absolute;
    right: clamp(28px,6vw,88px);
    bottom: 30px;
    left: clamp(28px,6vw,88px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hero-bottom-note,
.hero-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,250,241,.72);
    font-size: 8px;
    letter-spacing: .18em;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.hero-bottom-note i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold);
}

.hero-scroll {
    position: static;
    gap: 11px;
}

.hero-scroll span {
    width: 30px;
    background: var(--gold);
}

@media(max-width:680px) {
    .hero.hero-editorial {
        min-height: max(720px,100svh);
        padding: 118px 0 105px;
    }

    .hero.hero-editorial .wrap {
        min-height: 470px;
    }

    .hero-background {
        object-position: 54% center;
    }

    .hero-backdrop {
        background:
            linear-gradient(180deg,rgba(20,16,12,.34),rgba(20,16,12,.25) 35%,rgba(20,16,12,.62)),
            linear-gradient(90deg,rgba(20,16,12,.3),rgba(20,16,12,.12),rgba(20,16,12,.35));
    }

    .hero-edition {
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 19px;
        font-size: 7px;
        letter-spacing: .18em;
    }

    .hero-editorial .hero-content h1 {
        font-size: clamp(48px,12vw,72px);
        line-height: .96;
    }

    .hero-editorial .hero-content>p {
        max-width: 420px;
        margin: 19px auto 25px;
        font-size: 12px;
        line-height: 1.8;
    }

    .hero-editorial .hero-content .acts {
        width: min(100%,360px);
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        margin-right: auto;
        margin-left: auto;
    }

    .hero-editorial .hero-content .acts .btn {
        width: 100%;
        min-height: 48px;
        justify-content: space-between;
        padding: 12px 15px;
        font-size: 8px;
        letter-spacing: .1em;
    }

    .hero-bottom {
        right: 22px;
        bottom: 23px;
        left: 22px;
    }

    .hero-bottom-note,
    .hero-scroll {
        gap: 7px;
        font-size: 6px;
        letter-spacing: .12em;
    }

    .hero-scroll span {
        width: 18px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-background {
        animation: none;
    }
}

/* Auto-moving studio portfolio */
.gal.gallery-showcase {
    position: relative;
    overflow: hidden;
    padding: 105px 0 32px;
    scroll-margin-top: 78px;
    background:
        radial-gradient(800px 460px at 50% 52%,rgba(128,91,53,.17),transparent 72%),
        #17130f;
    color: var(--paper);
}

.gallery-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.gallery-heading h2 {
    margin-top: 15px;
    font-size: clamp(42px,5.6vw,72px);
}

.gallery-heading h2 em {
    color: var(--gold);
}

.gallery-heading p {
    margin-top: 11px;
    color: rgba(243,237,227,.58);
    font-size: 13px;
}

.gallery-controls {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
}

.gallery-autoplay-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    color: rgba(243,237,227,.55);
    font-size: 8px;
    letter-spacing: .16em;
    white-space: nowrap;
}

.gallery-autoplay-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(207,169,110,.75);
}

.gallery-control {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(243,237,227,.25);
    border-radius: 50%;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    transition: color .2s,border-color .2s,background .2s,transform .2s;
}

.gallery-control:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    background: rgba(207,169,110,.1);
    color: var(--gold);
}

.gallery-control:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.gallery-control svg {
    width: 19px;
    height: 19px;
}

.gallery-play-control {
    width: 38px;
    height: 38px;
}

.gallery-play-control svg {
    width: 16px;
    height: 16px;
}

.gallery-play-icon,
.gallery-showcase.is-paused .gallery-pause-icon {
    display: none;
}

.gallery-showcase.is-paused .gallery-play-icon {
    display: block;
}

.gallery-marquee-stage {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
}

.gallery-marquee {
    overflow: hidden;
    width: 100%;
    height: clamp(155px,20vw,245px);
    -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image: linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

.gallery-marquee:nth-child(2) {
    height: clamp(175px,22vw,265px);
}

.gallery-track,
.gallery-run {
    display: flex;
    width: max-content;
    height: 100%;
}

.gallery-track {
    align-items: stretch;
}

.gallery-marquee.is-ready .gallery-track {
    animation: gallery-drift var(--gallery-duration,52s) linear infinite;
    will-change: transform;
}

.gallery-marquee[data-direction="reverse"].is-ready .gallery-track {
    animation-direction: reverse;
}

.gallery-run {
    flex: none;
    gap: 8px;
    padding-right: 8px;
}

.gallery-tile {
    position: relative;
    display: block;
    width: clamp(190px,24vw,340px);
    height: 100%;
    flex: none;
    overflow: hidden;
    border: 1px solid rgba(243,237,227,.16);
    background: #4b3b2b;
    color: var(--paper);
    isolation: isolate;
}

.gallery-tile:nth-child(4n+2) {
    width: clamp(165px,19vw,275px);
}

.gallery-tile:nth-child(4n+3) {
    width: clamp(210px,27vw,390px);
}

.gallery-tile:nth-child(4n+4) {
    width: clamp(180px,21vw,305px);
}

.gallery-tile:before {
    position: absolute;
    z-index: 1;
    inset: 30% 0 0;
    background: linear-gradient(180deg,transparent,rgba(17,14,11,.58));
    content: "";
    pointer-events: none;
}

.gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2,.8,.2,1),filter .4s;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
    transform: scale(1.055);
    filter: saturate(1.08);
}

.gallery-tile:focus-visible {
    z-index: 2;
    outline: 2px solid var(--gold);
    outline-offset: -4px;
}

.gallery-tile-caption {
    position: absolute;
    z-index: 2;
    right: 13px;
    bottom: 12px;
    left: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,250,241,.88);
    font-size: 7px;
    letter-spacing: .14em;
    text-shadow: 0 1px 5px rgba(0,0,0,.4);
    white-space: nowrap;
}

.gallery-tile-caption i {
    width: 3px;
    height: 3px;
    flex: none;
    border-radius: 50%;
    background: var(--gold);
}

.gallery-tile-open {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    color: white;
    font-size: 13px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .2s,transform .2s;
}

.gallery-tile:hover .gallery-tile-open,
.gallery-tile:focus-visible .gallery-tile-open {
    opacity: 1;
    transform: translateY(0);
}

.gallery-showcase:not(.is-paused) .gallery-marquee:hover .gallery-track,
.gallery-showcase:not(.is-paused) .gallery-marquee:focus-within .gallery-track {
    animation-play-state: paused;
}

.gallery-showcase.is-paused .gallery-track {
    animation-play-state: paused;
}

@keyframes gallery-drift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
}

.gallery-footer-note {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid rgba(243,237,227,.14);
    color: rgba(243,237,227,.42);
    font-size: 8px;
    letter-spacing: .18em;
}

.gallery-empty {
    display: grid;
    min-height: 205px;
    justify-items: center;
    align-content: center;
    gap: 10px;
    border: 1px solid rgba(243,237,227,.15);
    background: linear-gradient(135deg,rgba(255,255,255,.035),transparent 60%);
    text-align: center;
}

.gallery-empty-index {
    color: var(--gold);
    font-size: 8px;
    letter-spacing: .2em;
}

.gallery-empty p {
    font: italic 400 28px/1.1 var(--serif);
}

.gallery-empty>span:last-child {
    color: rgba(243,237,227,.55);
    font-size: 11px;
}

@media(max-width:760px) {
    .gal.gallery-showcase {
        padding: 72px 0 25px;
    }

    .gallery-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        margin-bottom: 25px;
    }

    .gallery-heading h2 {
        font-size: clamp(40px,9vw,58px);
    }

    .gallery-heading p {
        max-width: 380px;
        font-size: 12px;
    }

    .gallery-controls {
        width: 100%;
    }

    .gallery-autoplay-status {
        margin-right: auto;
    }

    .gallery-marquee {
        height: clamp(125px,34vw,190px);
    }

    .gallery-marquee:nth-child(2) {
        height: clamp(145px,38vw,210px);
    }

    .gallery-tile {
        width: clamp(165px,52vw,245px);
    }

    .gallery-tile:nth-child(4n+2) {
        width: clamp(145px,43vw,210px);
    }

    .gallery-tile:nth-child(4n+3) {
        width: clamp(185px,58vw,275px);
    }

    .gallery-tile:nth-child(4n+4) {
        width: clamp(155px,46vw,220px);
    }

    .gallery-footer-note {
        font-size: 7px;
        letter-spacing: .1em;
    }
}

@media(max-width:420px) {
    .gallery-control {
        width: 38px;
        height: 38px;
    }

    .gallery-autoplay-status {
        gap: 6px;
        font-size: 7px;
        letter-spacing: .1em;
    }

    .gallery-tile-caption {
        right: 9px;
        left: 9px;
        font-size: 6px;
        letter-spacing: .1em;
    }

    .gallery-footer-note {
        flex-direction: column;
        gap: 7px;
    }
}

@media(max-width:520px) {
    .acts {
        align-items: stretch;
        flex-direction: column;
    }

    .acts>.btn {
        width: 100%;
        min-height: 48px;
        flex: 0 0 auto;
        justify-content: center;
        text-align: center;
    }
}

@media(prefers-reduced-motion:reduce) {
    .gallery-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }

    .gallery-marquee.is-ready .gallery-track {
        animation: none;
    }

    .gallery-tile img {
        transition: none;
    }
}

/* Clickable selection gallery above photography packages */
.selected-gallery {
    padding: clamp(76px,9vw,112px) 0;
    background: var(--sand);
    color: var(--ink);
    scroll-margin-top: 78px;
}

.selected-gallery-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
}

.selected-gallery-heading h2 {
    margin-top: 13px;
    font-size: clamp(42px,5.5vw,68px);
}

.selected-gallery-heading p {
    max-width: 470px;
    margin-top: 10px;
    color: #6a6053;
    font-size: 13px;
}

.selected-gallery-count {
    padding-bottom: 8px;
    color: var(--bronze);
    font-size: 9px;
    letter-spacing: .18em;
    white-space: nowrap;
}

.selected-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.selected-gallery-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 10px 24px rgba(20,17,14,.08);
    isolation: isolate;
}

.selected-gallery-card:nth-child(4n+2) {
    aspect-ratio: 5 / 6;
}

.selected-gallery-card:nth-child(4n+3) {
    aspect-ratio: 4 / 5;
}

.selected-gallery-card:before {
    position: absolute;
    z-index: 1;
    inset: 45% 0 0;
    background: linear-gradient(transparent,rgba(20,17,14,.68));
    content: "";
    pointer-events: none;
}

.selected-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2,.8,.2,1),filter .4s;
}

.selected-gallery-card:hover img,
.selected-gallery-card:focus-visible img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.selected-gallery-card:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
}

.selected-gallery-caption {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: rgba(255,250,241,.92);
    font-size: 8px;
    letter-spacing: .16em;
    text-shadow: 0 1px 5px rgba(0,0,0,.4);
}

.selected-gallery-caption span:last-child {
    color: rgba(255,250,241,.68);
    font-size: 7px;
}

.selected-gallery-open {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .2s,transform .2s;
}

.selected-gallery-card:hover .selected-gallery-open,
.selected-gallery-card:focus-visible .selected-gallery-open {
    opacity: 1;
    transform: translateY(0);
}

.selected-gallery-empty {
    display: grid;
    min-height: 220px;
    justify-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(20,17,14,.15);
    background: rgba(250,246,238,.5);
    text-align: center;
}

.selected-gallery-empty p {
    font: italic 400 28px/1.1 var(--serif);
}

.selected-gallery-empty span {
    color: #6a6053;
    font-size: 12px;
}

@media(max-width:900px) {
    .selected-gallery-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media(max-width:600px) {
    .selected-gallery {
        padding: 72px 0;
    }

    .selected-gallery-heading {
        align-items: flex-start;
        margin-bottom: 26px;
    }

    .selected-gallery-heading h2 {
        font-size: clamp(42px,10vw,58px);
    }

    .selected-gallery-heading p {
        font-size: 12px;
    }

    .selected-gallery-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    .selected-gallery-caption {
        right: 9px;
        bottom: 10px;
        left: 9px;
        font-size: 7px;
    }

    .selected-gallery-open {
        top: 9px;
        right: 9px;
        width: 30px;
        height: 30px;
        opacity: 1;
        transform: none;
    }
}

/* About the studio — layered editorial story */
.profil.story-section {
    position: relative;
    overflow: hidden;
    padding: clamp(95px,12vw,160px) 0 clamp(115px,14vw,175px);
    background: var(--sand);
    color: var(--ink);
}

.story-section:before {
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    width: 1px;
    background: linear-gradient(transparent,rgba(169,127,73,.24) 20%,rgba(169,127,73,.24) 80%,transparent);
    content: "";
}

.story-section .wrap {
    grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
    gap: clamp(54px,9vw,132px);
    align-items: center;
}

.story-visual {
    position: relative;
    min-width: 0;
    min-height: clamp(470px,48vw,620px);
}

.story-photo {
    position: absolute;
    overflow: hidden;
    background: linear-gradient(145deg,#9b8060,#47362a);
}

.story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.story-photo:hover img {
    transform: scale(1.035);
}

.story-photo-primary {
    top: 0;
    left: 3%;
    width: 56%;
    height: 72%;
    border-radius: 48% 48% 2px 2px;
}

.story-photo-primary:after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent,rgba(20,17,14,.5));
    content: "";
    pointer-events: none;
}

.story-photo-secondary {
    z-index: 1;
    top: 21%;
    right: 2%;
    width: 62%;
    height: 71%;
    border: 8px solid var(--sand);
    box-shadow: 0 26px 65px rgba(20,17,14,.2);
}

.story-photo-label {
    position: absolute;
    z-index: 1;
    bottom: 18px;
    left: 18px;
    color: rgba(255,250,241,.87);
    font-size: 7px;
    letter-spacing: .19em;
}

.story-photo-script {
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 1%;
    color: var(--ink);
    font: italic 400 clamp(36px,5.5vw,68px)/1 var(--serif);
    text-shadow: 0 2px 16px rgba(243,237,227,.5);
    transform: rotate(-9deg);
}

.story-photo-index {
    position: absolute;
    top: 6%;
    right: -1%;
    color: var(--bronze);
    font-size: 8px;
    letter-spacing: .2em;
    writing-mode: vertical-rl;
}

.story-content {
    position: relative;
    z-index: 1;
    padding: 18px 0;
}

.story-content .eyebrow {
    color: var(--bronze);
}

.story-overline {
    display: block;
    margin-top: 37px;
    color: rgba(20,17,14,.68);
    font-size: 8px;
    letter-spacing: .23em;
}

.story-content h2 {
    max-width: 530px;
    margin-top: 13px;
    font-size: clamp(46px,5.2vw,68px);
    line-height: .99;
}

.story-content h2 em {
    color: var(--bronze);
}

.story-content .story-lead {
    max-width: 510px;
    margin-top: 23px;
    color: #4b443b;
    font: italic 400 20px/1.48 var(--serif);
}

.story-content .story-description {
    max-width: 500px;
    margin-top: 14px;
    color: #6a6053;
    font-size: 12px;
    line-height: 1.95;
}

.story-section .pillars {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
    margin-top: 32px;
    padding-top: 19px;
    border-color: rgba(20,17,14,.18);
}

.story-section .pillars>div {
    display: grid;
    align-content: start;
    gap: 4px;
}

.story-section .pillars .story-pillar-index {
    color: var(--bronze);
    font-size: 8px;
    letter-spacing: .14em;
}

.story-section .pillars b {
    color: var(--ink);
    font-size: 20px;
}

.story-section .pillars>div>span:last-child {
    color: #6a6053;
    font-size: 10px;
    line-height: 1.5;
}

.story-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: 26px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(169,127,73,.7);
    color: var(--bronze);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: gap .25s,color .25s;
}

.story-link:hover {
    gap: 28px;
    color: var(--ink);
}

.story-link span {
    font-size: 15px;
}

@media(max-width:900px) {
    .profil.story-section {
        padding: 90px 0 105px;
    }

    .story-section .wrap {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 44px;
    }

    .story-visual {
        min-height: 470px;
    }

    .story-content h2 {
        font-size: clamp(43px,6vw,58px);
    }

    .story-content .story-lead {
        font-size: 18px;
    }

    .story-section .pillars {
        gap: 10px;
    }
}

@media(max-width:680px) {
    .profil.story-section {
        padding: 76px 0 84px;
    }

    .story-section:before {
        display: none;
    }

    .story-section .wrap {
        grid-template-columns: 1fr;
        gap: 39px;
    }

    .story-visual {
        min-height: 0;
        aspect-ratio: 1 / .95;
        margin: 0 6px;
    }

    .story-photo-primary {
        left: 2%;
        width: 55%;
        height: 76%;
    }

    .story-photo-secondary {
        top: 18%;
        right: 1%;
        width: 62%;
        height: 74%;
        border-width: 6px;
    }

    .story-photo-script {
        bottom: 1%;
        font-size: clamp(40px,11vw,60px);
    }

    .story-photo-index {
        right: -3%;
    }

    .story-content {
        padding: 0;
    }

    .story-overline {
        margin-top: 28px;
    }

    .story-content h2 {
        max-width: 480px;
        font-size: clamp(45px,11vw,60px);
    }

    .story-content .story-lead {
        font-size: 19px;
    }

    .story-content .story-description {
        font-size: 12px;
    }

    .story-section .pillars {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 9px;
        margin-top: 25px;
        padding-top: 16px;
    }

    .story-section .pillars b {
        font-size: 17px;
    }

    .story-section .pillars>div>span:last-child {
        font-size: 9px;
    }
}

/* Reservation form */
.reservation-page {
    position: relative;
    overflow: hidden;
    padding: 132px 0 96px;
    background: linear-gradient(180deg,var(--ink) 0 80px,var(--sand) 80px 100%);
}

.reservation-page>.wrap {
    position: relative;
}

.reservation-heading {
    max-width: 800px;
    margin-bottom: 38px;
}

.reservation-heading .crumb {
    margin-bottom: 28px;
    color: rgba(243,237,227,.56);
}

.reservation-heading .crumb a {
    color: var(--gold);
}

.reservation-kicker,
.reservation-form-heading>span,
.reservation-calendar-heading>span {
    color: var(--bronze);
    font-size: 9px;
    letter-spacing: .22em;
}

.reservation-heading h1 {
    margin-top: 12px;
    color: var(--ink);
    font-size: clamp(48px,6.6vw,78px);
}

.reservation-heading .lead {
    max-width: 600px;
    margin: 15px 0 0;
    color: #6a6053;
    font-size: 14px;
    line-height: 1.8;
}

.reservation-form {
    display: grid;
    gap: 20px;
}

.reservation-session-details,
.reservation-panel {
    border: 1px solid rgba(20,17,14,.1);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 18px 48px rgba(20,17,14,.07);
}

.reservation-session-details {
    padding: clamp(22px,3vw,34px);
}

.reservation-form-heading {
    margin-bottom: 20px;
}

.reservation-form-heading h3 {
    margin: 8px 0 6px;
    color: var(--ink);
    font-size: 34px;
}

.reservation-form-heading p {
    color: var(--mist);
    font-size: 12px;
}

.reservation-field {
    min-width: 0;
    margin-bottom: 20px;
}

.reservation-form .fld label {
    margin-bottom: 7px;
    color: #766b5e;
    font-size: 9px;
    letter-spacing: .17em;
}

.reservation-form .fld input,
.reservation-form .fld select,
.reservation-form .fld textarea {
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(20,17,14,.13);
    border-radius: 9px;
    background: #fffdf9;
    color: var(--ink);
    font-size: 14px;
    transition: border-color .2s,box-shadow .2s,background .2s;
}

.reservation-form .fld select {
    cursor: pointer;
}

.reservation-form .fld textarea {
    min-height: 100px;
    resize: vertical;
}

.reservation-form .fld input::placeholder,
.reservation-form .fld textarea::placeholder {
    color: #a49b8f;
    font-size: 12px;
}

.reservation-form .fld input:focus,
.reservation-form .fld select:focus,
.reservation-form .fld textarea:focus {
    border-color: var(--bronze);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(169,127,73,.1);
}

.reservation-form .fld input[readonly] {
    background: #f0e9dd;
    color: #6a6053;
}

.consultation-option {
    margin: 5px 0 0;
    padding: 17px 18px;
    border: 1px solid rgba(169,127,73,.28);
    border-radius: 12px;
    background: #f5eee3;
}

.consultation-option label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.consultation-option input {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 3px;
    accent-color: var(--bronze);
}

.consultation-option-copy {
    display: grid;
    gap: 4px;
}

.consultation-option-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.consultation-option-copy>span {
    color: var(--mist);
    font-size: 11px;
    line-height: 1.6;
}

.consultation-details {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid rgba(20,17,14,.1);
    border-radius: 12px;
    background: #fbf8f2;
}

.consultation-details h4 {
    margin-bottom: 16px;
    color: var(--ink);
    font: 500 10px var(--sans);
    letter-spacing: .17em;
    text-transform: uppercase;
}

.consultation-details .fld:last-child {
    margin-bottom: 0;
}

.reservation-privacy {
    margin: 0 0 16px;
    color: var(--mist);
    font-size: 9px;
    line-height: 1.6;
}

.reservation-submit {
    width: 100%;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--paper);
    font-size: 10px;
    letter-spacing: .12em;
}

.reservation-submit:hover {
    border-color: var(--bronze);
    background: var(--bronze);
}

.reservation-result-actions {
    gap: 10px;
    margin-top: 24px;
}

.reservation-result-actions .btn {
    justify-content: center;
    text-align: center;
}

.reservation-booking-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);
    gap: 18px;
    align-items: stretch;
}

.reservation-panel {
    min-width: 0;
    padding: clamp(19px,2.2vw,27px);
}

.reservation-service-heading h3,
.reservation-calendar-heading h3 {
    margin: 8px 0 18px;
    color: var(--ink);
    font-size: 25px;
}

.reservation-service h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 23px;
    line-height: 1.25;
}

#sum-facilities {
    min-height: 42px;
    margin: 0 0 17px;
    color: var(--mist);
    font-size: 11px;
    line-height: 1.65;
}

.reservation-service-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(20,17,14,.1);
    border-bottom: 1px solid rgba(20,17,14,.1);
}

.reservation-service-facts div {
    display: grid;
    gap: 5px;
}

.reservation-service-facts span {
    color: var(--mist);
    font-size: 8px;
    letter-spacing: .13em;
}

.reservation-service-facts strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

#sum-price {
    color: var(--bronze);
}

.reservation-service-datetime {
    min-height: 42px;
    margin: 15px 0;
    color: #756a5d;
    font-size: 11px;
    line-height: 1.6;
}

#sum-consultation-badge {
    display: none;
    margin: -4px 0 15px;
    color: var(--bronze);
    font-size: 10px;
}

.reservation-calendar {
    padding: clamp(19px,2.2vw,27px);
}

.reservation-calendar-heading {
    margin-bottom: 16px;
}

.reservation-calendar-nav {
    margin: 0 0 9px;
}

.reservation-calendar-nav b {
    color: var(--ink);
    font: 500 16px var(--sans);
}

.reservation-calendar-nav button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(20,17,14,.13);
    background: #fffdf9;
    transition: background .2s,border-color .2s,color .2s;
}

.reservation-calendar-nav button:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.reservation-calendar .cal {
    gap: 4px;
    margin-top: 5px;
}

.reservation-weekdays {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    color: var(--mist);
    font-size: 10px;
    text-align: center;
}

.reservation-calendar .cal-day {
    display: grid;
    min-width: 0;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: transparent;
    color: var(--ink);
    font: 12px var(--sans);
    transition: background .2s,color .2s;
}

.reservation-calendar .cal-day.available {
    cursor: pointer;
}

.reservation-calendar .cal-day.available:hover,
.reservation-calendar .cal-day.available:focus-visible {
    outline: none;
    background: #ede2d1;
}

.reservation-calendar .cal-day.selected {
    background: var(--ink);
    color: var(--paper);
    font-weight: 500;
}

.reservation-calendar .cal-day.booked {
    background: transparent;
    color: #c1b9ad;
    cursor: not-allowed;
}

.reservation-date-status,
.reservation-date-error,
.reservation-time-error {
    margin: 9px 0 0;
    font-size: 10px;
    line-height: 1.5;
}

.reservation-date-status {
    color: var(--mist);
}

.reservation-date-error,
.reservation-time-error {
    color: #9a3e32;
}

.reservation-calendar .cal-day.empty {
    cursor: default;
}

.reservation-calendar .legend {
    gap: 8px 14px;
    font-size: 9px;
    line-height: 1.5;
}

.reservation-calendar .legend i {
    background: #c1b9ad;
}

.reservation-availability-date {
    min-height: 20px;
    margin: 0 0 3px;
    color: #756a5d;
    font-size: 12px;
}

.reservation-slot-note {
    margin: 0 0 14px;
    color: var(--mist);
    font-size: 9px;
}

.reservation-time-slots {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    max-height: 465px;
    overflow-y: auto;
    padding: 1px 3px 1px 0;
}

.reservation-time-slot {
    min-height: 43px;
    border: 1px solid rgba(20,17,14,.12);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: 12px var(--sans);
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s;
}

.reservation-time-slot:hover,
.reservation-time-slot:focus-visible {
    border-color: var(--ink);
    outline: none;
}

.reservation-time-slot.selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.reservation-time-slot:disabled {
    border-color: transparent;
    background: #e7e5e8;
    color: #aaa7ae;
    cursor: not-allowed;
}

.reservation-slot-placeholder {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px 12px;
    border-radius: 9px;
    background: #f5f1eb;
    color: var(--mist);
    font-size: 11px;
    line-height: 1.6;
}

.reservation-service .reservation-field {
    margin-bottom: 13px;
}

.reservation-service .reservation-field label {
    font-size: 8px;
}

.reservation-service .reservation-field input {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 12px;
}

.reservation-map-hint,
.reservation-map-error {
    margin: 0 0 8px;
    color: var(--mist);
    font-size: 10px;
    line-height: 1.6;
}

.reservation-map-hint a {
    color: #9a6b27;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.reservation-map-error {
    display: block;
    color: #9a3e32;
}

.reservation-map-link {
    display: inline-block;
    margin-top: 8px;
    color: #9a6b27;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media(max-width:1100px) {
    .reservation-booking-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .reservation-service {
        grid-column: 1 / -1;
    }
}

@media(max-width:760px) {
    .reservation-page {
        padding: 112px 0 72px;
    }

    .reservation-heading {
        margin-bottom: 26px;
    }

    .reservation-heading .crumb {
        margin-bottom: 22px;
    }

    .reservation-heading h1 {
        font-size: clamp(44px,11vw,64px);
    }

    .reservation-heading .lead {
        font-size: 12px;
    }

    .reservation-booking-grid {
        grid-template-columns: 1fr;
    }

    .reservation-form-heading h3 {
        font-size: 30px;
    }

    .reservation-service {
        grid-column: auto;
    }
}

@media(max-width:520px) {
    .reservation-page>.wrap {
        padding: 0 18px;
    }

    .reservation-form .r2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reservation-form .acts,
    .reservation-submit {
        width: 100%;
        justify-content: center;
    }

    .reservation-result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .reservation-result-actions .btn {
        width: 100%;
        padding: 12px 18px;
        letter-spacing: .1em;
    }

    .reservation-panel {
        padding: 20px 17px;
    }
}

@media(max-width:420px) {
    nav .wrap {
        gap: 10px;
        padding-right: 16px;
        padding-left: 16px;
    }

    nav .logo {
        min-width: 0;
        gap: 8px;
    }

    nav .logo-wordmark {
        min-width: 0;
    }

    nav .logo-script {
        font-size: clamp(1.25rem,6vw,1.55rem);
    }

    .hero-bottom {
        justify-content: center;
    }

    .hero-bottom-note {
        display: none;
    }

    .hero-scroll {
        font-size: 7px;
    }

    .story-section .pillars {
        grid-template-columns: minmax(0,1fr);
        gap: 14px;
    }

    .story-section .pillars>div {
        grid-template-columns: 30px minmax(0,1fr);
        align-items: baseline;
        column-gap: 8px;
    }

    .story-section .pillars .story-pillar-index {
        grid-row: span 2;
    }

    .story-section .pillars>div>span:last-child {
        grid-column: 2;
    }

    .pk .pc {
        min-width: 0;
        padding-right: 18px;
        padding-left: 18px;
        overflow-wrap: anywhere;
    }
}