:root{
  --ink:#14161a; --muted:#70757b; --line:#e6e4e1; --paper:#fff; --shade:#f6f5f3;
  --jade:#b3d3ca; --jade-deep:#2c6559; --sale:#a83c39;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif; --serif:'Bodoni Moda',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--jade-deep);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- animation primitives ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shimmer{0%{background-position:-380px 0}100%{background-position:380px 0}}
@keyframes flyBag{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.16)}}
@keyframes marquee{from{transform:none}to{transform:translateX(-50%)}}

.reveal{opacity:0}
.reveal.in{animation:rise .7s var(--ease) forwards}
.stagger>*{opacity:0}
.stagger.in>*{animation:rise .65s var(--ease) forwards}
.stagger.in>*:nth-child(1){animation-delay:.04s}
.stagger.in>*:nth-child(2){animation-delay:.1s}
.stagger.in>*:nth-child(3){animation-delay:.16s}
.stagger.in>*:nth-child(4){animation-delay:.22s}
.stagger.in>*:nth-child(5){animation-delay:.28s}
.stagger.in>*:nth-child(6){animation-delay:.34s}
.stagger.in>*:nth-child(7){animation-delay:.4s}
.stagger.in>*:nth-child(8){animation-delay:.46s}
.stagger.in>*:nth-child(n+9){animation-delay:.5s}
#app{animation:fade .45s var(--ease)}

/* ---------- utility + promo ---------- */
.util{border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.03em;color:var(--muted)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:24px}
.util-left{display:flex;gap:26px}
.util ul{display:flex;gap:26px;list-style:none}
.util a:hover{color:var(--ink)}
.promo{background:var(--jade);overflow:hidden;position:relative}
.promo-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.promo-track span{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:11px 40px;white-space:nowrap}
.promo:hover .promo-track{animation-play-state:paused}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:50;background:#fff;transition:box-shadow .3s}
.mast.stuck{box-shadow:0 1px 0 var(--line),0 6px 24px rgba(20,22,26,.05)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:92px;gap:24px;transition:height .3s var(--ease)}
.mast.stuck .wrap{height:70px}
.search{display:flex;align-items:center;gap:10px;max-width:290px;color:var(--muted);border-bottom:1px solid transparent;transition:border-color .25s}
.search:focus-within{border-color:var(--ink)}
.search input{border:0;font-family:var(--sans);font-size:15px;font-weight:300;width:100%;background:transparent;padding:6px 0}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:0}
.logo{font-family:var(--serif);font-size:29px;letter-spacing:.22em;text-indent:.22em;white-space:nowrap;text-align:center;transition:font-size .3s var(--ease)}
.mast.stuck .logo{font-size:22px}
.logo small{display:block;font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:.26em;text-indent:.26em;color:var(--ink);margin-top:7px}
.mast.stuck .logo small{font-size:14px}
.icons{display:flex;justify-content:flex-end;gap:24px;align-items:center}
.icons a,.icons button{position:relative;display:grid;place-items:center;width:26px;height:26px;background:none;border:0;cursor:pointer;transition:transform .2s}
.icons a:hover,.icons button:hover{transform:translateY(-2px)}
.count{position:absolute;top:-6px;right:-8px;background:var(--ink);color:#fff;font-size:9px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;display:grid;place-items:center;letter-spacing:0}
.count.bump{animation:pop .4s var(--ease)}
.count[hidden]{display:none}
svg{stroke:var(--ink);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none;background:none;border:0;cursor:pointer}
#flyer{position:fixed;width:70px;height:93px;z-index:90;pointer-events:none;overflow:hidden;animation:flyBag .75s var(--ease) forwards}

/* ---------- nav ---------- */
nav.main{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
nav.main ul{display:flex;list-style:none;gap:40px;height:52px;align-items:center;overflow-x:auto;scrollbar-width:none}
nav.main ul::-webkit-scrollbar{display:none}
nav.main a{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;padding:4px 0;position:relative}
nav.main a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s var(--ease)}
nav.main a:hover::after,nav.main a.on::after{right:0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;height:640px}
.hero-img{position:relative;overflow:hidden;background:var(--shade);height:100%}
.hero-img img{object-position:top center;animation:kb 14s ease-out forwards}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-txt{background:#eef4f2;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(32px,6vw,92px)}
.hero-txt>*{opacity:0;animation:rise .8s var(--ease) forwards}
.hero-txt>*:nth-child(1){animation-delay:.12s}
.hero-txt>*:nth-child(2){animation-delay:.24s}
.hero-txt>*:nth-child(3){animation-delay:.36s}
.hero-txt>*:nth-child(4){animation-delay:.48s}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--jade-deep);margin-bottom:20px}
.hero-txt h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,54px);line-height:1.12;text-transform:uppercase}
.hero-txt p{color:#4b5054;margin:20px 0 30px;max-width:44ch}
.link-u{font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:5px;align-self:flex-start;cursor:pointer;background:none;border:0;position:relative}
.link-u::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform-origin:right;transition:transform .35s var(--ease)}
.link-u:hover::after{transform:scaleX(0)}

/* ---------- sections ---------- */
section{padding:76px 0}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:16px}
.head h1,.head h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.14em;text-transform:uppercase}
.head .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer}
.head .meta:hover{color:var(--ink)}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--shade);display:flex;align-items:flex-end;padding:28px}
.cat img{position:absolute;inset:0;transition:transform .8s var(--ease);filter:brightness(.86)}
.cat:hover img{transform:scale(1.07)}
.cat span{position:relative;color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.cat b{display:block;font-weight:300;font-size:11px;opacity:.75;letter-spacing:.12em;margin-top:5px}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 22px}
.card{position:relative;padding-bottom:30px;display:block}
.card .shot{transform-style:preserve-3d;transition:transform .35s var(--ease)}
@media(hover:hover){.card:hover .shot{transform:perspective(800px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) scale3d(1.015,1.015,1.015)}}
.shot{aspect-ratio:3/4;background:var(--shade);position:relative;overflow:hidden;margin-bottom:14px}
.card img{transition:transform .8s var(--ease)}
.card:hover img{transform:scale(1.05)}
.quick{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);padding:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;transform:translateY(100%);transition:transform .35s var(--ease);cursor:pointer;border:0;width:100%}
.card:hover .quick,.card:focus-within .quick{transform:none}
.tag{position:absolute;top:12px;left:12px;background:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px}
.tag.off{background:var(--ink);color:#fff}
.wish{position:absolute;top:10px;right:10px;width:32px;height:32px;background:#fff;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;opacity:0;transform:scale(.8);transition:.25s var(--ease)}
.card:hover .wish,.card:focus-within .wish,.wish.on{opacity:1;transform:none}
.wish.on svg{fill:var(--sale);stroke:var(--sale)}
.wish:active{transform:scale(.85)}
.brand{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.name{font-size:14.5px;line-height:1.4;margin-bottom:9px;display:block}
.price{font-size:14px;letter-spacing:.02em}
.price s{color:var(--muted);margin-left:8px;font-size:12.5px}
.price em{font-style:normal;color:var(--sale)}

/* skeleton */
.skel{aspect-ratio:3/4;background:linear-gradient(90deg,#f2f1ef 25%,#e9e7e4 50%,#f2f1ef 75%);background-size:760px 100%;animation:shimmer 1.4s infinite linear}

/* ---------- filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.chip{border:1px solid var(--line);background:#fff;padding:9px 18px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
select.chip{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;padding:32px 0 84px}
.pdp-img{background:var(--shade);overflow:hidden;position:relative}
.pdp-img img{transition:transform .5s var(--ease)}
.pdp-img.zoom img{transform:scale(1.7);cursor:zoom-out}
.pdp-img:not(.zoom) img{cursor:zoom-in}
.pdp-info h1{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.18;margin:8px 0 14px}
.pdp .price{font-size:21px;margin-bottom:20px}
.pdp p.desc{color:#4b5054;margin-bottom:26px;max-width:52ch}
.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;display:block}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.size{min-width:54px;padding:12px 8px;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer;transition:.2s var(--ease)}
.size:hover:not(.out){border-color:var(--ink);transform:translateY(-2px)}
.size.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.size.out{color:#c7c7c7;border-style:dashed;cursor:not-allowed;text-decoration:line-through}
.stock-note{font-size:12px;color:var(--sale);min-height:20px;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 32px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;width:100%;position:relative;overflow:hidden;transition:.25s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.16);transform:translateX(-101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.985)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--shade)}
.btn.wa{background:#1faa54;border-color:#1faa54}
.btn.wa:hover{background:#188f45}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:10px;margin-bottom:30px}
.btn-row .btn{width:auto;flex:1}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{padding:18px 0;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:16px;transition:transform .3s var(--ease)}
.acc details[open] summary::after{content:'–'}
.acc .body{padding-bottom:20px;color:#4b5054;font-size:14px;animation:fade .35s var(--ease)}
.acc ul{padding-left:18px;display:grid;gap:6px}

/* ---------- cart / checkout ---------- */
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start;padding-bottom:84px}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);animation:rise .5s var(--ease)}
.line .thumb{aspect-ratio:3/4;background:var(--shade);overflow:hidden}
.qty{display:inline-flex;border:1px solid var(--line);margin-top:12px}
.qty button{width:34px;height:34px;background:#fff;border:0;cursor:pointer;font-size:15px;transition:background .2s}
.qty button:hover{background:var(--shade)}
.qty span{width:38px;display:grid;place-items:center;font-size:14px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.rm{background:none;border:0;font-size:12px;letter-spacing:.08em;color:var(--muted);cursor:pointer;text-decoration:underline;margin-top:12px;padding:0}
.rm:hover{color:var(--ink)}
.summary{background:var(--shade);padding:32px;position:sticky;top:112px}
.summary h3{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;gap:16px}
.row.total{border-top:1px solid var(--line);margin-top:14px;padding-top:16px;font-size:17px}
.ship-note{font-size:12px;color:var(--jade-deep);margin:10px 0 4px}
.bar{height:2px;background:#dedbd7;margin:8px 0 18px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--jade-deep);transition:width .6s var(--ease)}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);padding:13px 14px;font-family:var(--sans);font-size:15px;font-weight:300;background:#fff;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field.bad input,.field.bad textarea{border-color:var(--sale)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.error{background:#fdf1f0;color:var(--sale);padding:12px 14px;font-size:13px;margin-bottom:18px;animation:rise .35s var(--ease)}
.ok{background:#eef4f2;color:var(--jade-deep);padding:14px 16px;font-size:13.5px;margin-bottom:18px}
.note{background:var(--shade);padding:16px 18px;font-size:13.5px;color:#4b5054;margin-bottom:24px;border-left:2px solid var(--jade-deep)}

/* ---------- toast / drawer ---------- */
#toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:14px 24px;font-size:13px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:95;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.scrim{position:fixed;inset:0;background:rgba(20,22,26,.4);opacity:0;pointer-events:none;transition:.3s;z-index:70;backdrop-filter:blur(2px)}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,100%);background:#fff;transform:translateX(100%);transition:transform .38s var(--ease);z-index:80;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.drawer h3{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.drawer .body{flex:1;overflow-y:auto;padding:0 24px}
.drawer footer{padding:24px;border-top:1px solid var(--line)}
.x{background:none;border:0;cursor:pointer;font-size:24px;line-height:1;color:var(--muted);transition:transform .2s}
.x:hover{transform:rotate(90deg)}

/* ---------- panels / services ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{min-height:330px;padding:48px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--shade);transition:background .35s}
.panel.b{background:#eef4f2}
.panel:hover{background:#efedea}
.panel.b:hover{background:#e7efec}
.panel h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.panel p{color:#4b5054;max-width:36ch;margin-bottom:22px}
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}
.svc h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:7px}
.svc p{font-size:13px;color:var(--muted)}

/* ---------- founder ---------- */
.founder{background:var(--shade);margin-top:76px}
.founder .inner{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding:76px 0}
.founder-img{aspect-ratio:3/4;overflow:hidden;background:#e8e6e3;max-width:440px}
.founder-img img{transition:transform 1s var(--ease)}
.founder:hover .founder-img img{transform:scale(1.04)}
.founder h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.2;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px}
.founder .role{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--jade-deep)}
.founder p{color:#4b5054;margin-bottom:16px;max-width:52ch}
.founder .sig{font-family:var(--serif);font-size:22px;margin-top:22px}
.facts{display:flex;gap:44px;flex-wrap:wrap;margin:28px 0 6px;padding-top:24px;border-top:1px solid #ddd9d5}
.facts div b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1}
.facts div span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}

/* ---------- 3D intro ---------- */
#intro{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 50% 42%,#26292e 0%,#17191c 48%,#0b0c0e 100%);display:flex;align-items:center;justify-content:center;perspective:1400px;overflow:hidden}
#intro::before{content:'';position:absolute;inset:-10%;background:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.5) 0,transparent 60%),
    radial-gradient(1px 1px at 82% 15%,rgba(255,255,255,.35) 0,transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 78%,rgba(255,255,255,.4) 0,transparent 60%),
    radial-gradient(1px 1px at 24% 82%,rgba(255,255,255,.3) 0,transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 60%,rgba(255,255,255,.35) 0,transparent 60%),
    radial-gradient(1px 1px at 45% 90%,rgba(255,255,255,.25) 0,transparent 60%);
  opacity:0;animation:fade 1.5s ease .4s forwards}
#intro::after{content:'';position:absolute;top:0;bottom:0;width:36%;
  background:linear-gradient(100deg,transparent 0%,rgba(179,211,202,.14) 45%,rgba(255,255,255,.06) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-12deg);z-index:3;animation:introSheen 1.7s ease .55s forwards}
@keyframes introSheen{to{transform:translateX(320%) skewX(-12deg)}}
#intro.gone{display:none}
.intro-scene{position:relative;z-index:5;transform-style:preserve-3d}
.intro-face{display:flex;flex-direction:column;align-items:center;transform:rotateY(-95deg) translateZ(40px);opacity:0;animation:introIn 1.1s cubic-bezier(.2,.8,.2,1) .25s forwards}
.intro-word{font-family:var(--serif);color:#fff;font-size:clamp(30px,6vw,60px);letter-spacing:.24em;text-indent:.24em;white-space:nowrap;text-shadow:0 2px 40px rgba(179,211,202,.35),0 1px 0 rgba(255,255,255,.08)}
.intro-rule{display:block;width:0;height:1px;background:var(--jade);margin:20px 0;animation:introRule .7s ease-out 1.15s forwards}
.intro-sub{font-family:var(--sans);color:#fff;font-weight:500;font-size:clamp(13px,1.6vw,18px);letter-spacing:.34em;text-indent:.34em;opacity:0;animation:fade .6s ease-out 1.5s forwards}
@keyframes introIn{
  0%{transform:rotateY(-95deg) translateZ(40px);opacity:0}
  55%{opacity:1}
  100%{transform:rotateY(0deg) translateZ(0);opacity:1}
}
@keyframes introRule{to{width:min(46vw,340px)}}
.intro-panel{position:fixed;top:0;bottom:0;width:51%;background:#111316;z-index:1;animation:none}
.intro-panel-l{left:0;box-shadow:inset -1px 0 0 rgba(179,211,202,.25)}
.intro-panel-r{right:0;box-shadow:inset 1px 0 0 rgba(179,211,202,.25)}
#intro.leaving .intro-panel-l{animation:panelL .75s cubic-bezier(.65,0,.2,1) forwards}
#intro.leaving .intro-panel-r{animation:panelR .75s cubic-bezier(.65,0,.2,1) forwards}
#intro.leaving .intro-scene{animation:introOut .5s ease forwards}
@keyframes panelL{to{transform:translateX(-100%)}}
@keyframes panelR{to{transform:translateX(100%)}}
@keyframes introOut{to{opacity:0;transform:scale(1.06)}}
#introSkip{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:6;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 20px;cursor:pointer;opacity:0;animation:fade .5s ease 1.7s forwards;transition:border-color .2s}
#introSkip:hover{border-color:#fff}
@media(prefers-reduced-motion:reduce){
  #intro{display:none}
}
@media(max-width:520px){
  .intro-word{font-size:26px}
  #introSkip{bottom:20px}
}

/* ---------- misc ---------- */
.empty{padding:84px 0;text-align:center;color:var(--muted)}
.empty h2{font-family:var(--serif);font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.back{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:8px;align-items:center;padding:26px 0 4px;background:none;border:0;cursor:pointer;transition:gap .25s}
.back:hover{color:var(--ink);gap:12px}
.wa-float{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#1faa54;display:grid;place-items:center;z-index:60;box-shadow:0 6px 22px rgba(31,170,84,.36);transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{stroke:#fff;stroke-width:1.6}

/* ---------- admin ---------- */
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:12px 10px;border-bottom:1px solid var(--ink)}
.admin-table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr{transition:background .2s}
.admin-table tbody tr:hover{background:var(--shade)}
.admin-table .th{width:52px;aspect-ratio:3/4;background:var(--shade);overflow:hidden}
.pill{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line)}
.pill.live{background:var(--jade);border-color:var(--jade)}
.pill.draft{color:var(--muted)}
.mini{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--ink);background:#fff;cursor:pointer;transition:.2s}
.mini:hover{background:var(--ink);color:#fff}
.mini.danger{border-color:var(--sale);color:var(--sale);margin-left:6px}
.mini.danger:hover{background:var(--sale);color:#fff}
.warn{font-size:12px;color:var(--sale)}
.add-box{border:1px solid var(--ink);padding:24px 28px 28px}
.add-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.add-head h2{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.12em;text-transform:uppercase}
#addForm{margin-top:24px;animation:rise .4s var(--ease)}
.add-grid{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
.drop{display:grid;place-items:center;aspect-ratio:3/4;background:var(--shade);border:1px dashed #c7c7c7;cursor:pointer;text-align:center;color:var(--muted);font-size:13px;padding:16px;overflow:hidden;position:relative;transition:.25s}
.drop:hover{border-color:var(--ink);background:#f1efec}
.drop small{color:#a9a9a9}
.drop img{position:absolute;inset:0}

/* ---------- footer ---------- */
footer.site{padding:66px 0 40px;font-size:13px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:44px}
.fgrid h5{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.fgrid ul{list-style:none;display:grid;gap:9px;color:var(--muted)}
.fgrid a{transition:color .2s,padding-left .25s}
.fgrid a:hover{color:var(--ink);padding-left:4px}
.sub{display:flex;border-bottom:1px solid var(--ink);max-width:320px;margin-top:14px}
.sub input{flex:1;border:0;padding:9px 0;font-family:var(--sans);font-size:14px;font-weight:300;background:transparent}
.sub input:focus{outline:0}
.sub button{border:0;background:transparent;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.legal{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:12px;flex-wrap:wrap}

@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .svcs{grid-template-columns:repeat(2,1fr);gap:28px}
  .fgrid{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr 1fr;gap:34px}
  .two{grid-template-columns:1fr;gap:32px}
  .summary{position:static}
}
@media(max-width:760px){
  .wrap{padding:0 18px}
  .util-left span:nth-child(n+2){display:none}
  .util ul{gap:16px}
  .mast .wrap{grid-template-columns:auto 1fr auto;height:70px}
  .search{display:none}
  .menu-btn{display:grid;place-items:center;width:24px;height:24px}
  .logo{font-size:19px}
  .icons{gap:16px}
  .hero{grid-template-columns:1fr;height:auto}
  .hero-img{aspect-ratio:4/5;height:auto}
  .hero-txt{padding:40px 20px 48px}
  section{padding:48px 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px 12px}
  .cats{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr;gap:24px}
  .split{grid-template-columns:1fr}
  .panel{padding:32px;min-height:250px}
  .fgrid{grid-template-columns:1fr;gap:30px}
  .two-col{grid-template-columns:1fr}
  .line{grid-template-columns:78px 1fr}
  .line .end{grid-column:2}
  .add-grid{grid-template-columns:1fr}
  .add-box{padding:20px}
  .founder{margin-top:48px}
  .founder .inner{grid-template-columns:1fr;padding:48px 0;gap:28px}
  .founder-img{max-width:100%}
  .facts{gap:28px}
  .wa-float{right:16px;bottom:16px;width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger>*,.hero-txt>*{opacity:1!important}
}