/* =========================================================================
   SAZ LAND v2 — catalogue, bee & original mark, videos, price range,
   page-transition curtain. Loaded after styles.css on every page.
   ========================================================================= */

/* footer: original mark + bee signature side by side */
.footer__marks{display:flex;align-items:flex-end;gap:28px}
.footer__marks img{height:auto}
.footer__bee{width:92px}

/* header: 7 nav items — keep one line, clocks only on wide screens */
.nav{gap:24px}
.nav a{white-space:nowrap}
.clocks{display:none!important}
@media (min-width:1600px){.clocks{display:block!important}}

/* nav link to the catalogue */
.nav__cat{display:inline-flex!important;align-items:center;gap:8px}
.nav__cat img{width:22px;height:auto;transform:translateY(-1px) rotate(-6deg);transition:transform var(--d3) var(--ease)}
.nav__cat:hover img{transform:translate(3px,-3px) rotate(4deg)}
.nav__cat.active::after{transform:scaleX(1)}
.mnav__bee{width:34px;height:auto;margin-left:auto;align-self:center}

/* production video loops */
.loops{display:grid;grid-template-columns:1fr;gap:var(--gutter);margin-top:var(--gutter)}
@media (min-width:640px){.loops{grid-template-columns:repeat(3,1fr)}}
.loops figcaption{display:flex;justify-content:space-between;margin-top:12px;color:var(--steel-text)}
.ph__play--lg{width:64px;height:64px;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);transition:background var(--d1) var(--ease),color var(--d1)}
.ph__play--lg svg{width:18px;height:18px}
.ph__play--lg:hover{background:var(--ink);color:var(--chalk)}

/* family film + original mark */
.fam-video .ph__art{opacity:.7}
.fam-video__cap{display:flex;justify-content:space-between;margin-top:12px;color:var(--steel-text)}
.fam__mark{width:clamp(84px,7vw,120px);height:auto;margin-bottom:clamp(24px,3vw,40px)}
.final__mark{width:clamp(120px,13vw,200px);height:auto;margin-bottom:28px}
@media (min-width:1024px){.final__meta{justify-items:end;text-align:right}}

/* ---------- SAZ Collection teaser (Camel plate) ---------- */
.coll{background:var(--camel);color:var(--ink);padding:clamp(64px,8vw,128px) 0;overflow:hidden;margin-bottom:var(--sec)}
.coll .eyebrow{color:var(--ink)}
.coll__grid{display:grid;grid-template-columns:1fr;gap:56px var(--gutter);align-items:center}
@media (min-width:1024px){.coll__grid{grid-template-columns:7fr 5fr}}
.coll__h{margin-top:20px;font-family:var(--f-serif);font-weight:300;font-size:clamp(44px,5.6vw,92px);line-height:.98;letter-spacing:-.02em;max-width:12ch}
.coll__h em{font-style:italic}
.coll .body{margin-top:24px}
.coll .btn-row{margin-top:36px}
.coll__meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px}
.coll__art{position:relative;display:block;aspect-ratio:2/1.2;text-decoration:none;margin:24px 0}
.coll__trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.coll__trail path,.pband__trail path,.chero__trail path{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.js [data-draw]{clip-path:inset(0 100% 0 0);transition:clip-path 1600ms var(--ease) 200ms}
.js [data-draw].in{clip-path:inset(0 0 0 0)}
.coll__bee{position:absolute;right:-2%;top:-18%;width:44%;height:auto;transform:rotate(-8deg);transition:transform 900ms var(--ease)}
.coll__art:hover .coll__bee{transform:translate(10px,-8px) rotate(2deg)}
.coll__script{position:absolute;left:2%;bottom:-8%;width:46%;height:auto}
.coll__peek{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:768px){.coll__peek{grid-template-columns:repeat(6,1fr)}}
.coll .ph{background:var(--chalk)}
.coll .ph__cap{bottom:18px}
.coll .ph__art svg{width:48%}
.coll__more{display:grid;place-items:center;border:1px solid var(--ink);aspect-ratio:3/4;font-size:clamp(24px,2.4vw,36px);letter-spacing:.02em;text-decoration:none;color:var(--ink);transition:background var(--d2) var(--ease),color var(--d2)}
.coll__more:hover{background:var(--ink);color:var(--chalk)}
@media (max-width:767px){.coll__peek .ph:nth-child(n+6){display:none}}

/* ---------- Estimator price block ---------- */
.est__price{border-top:1px solid var(--ink);padding:24px 24px 4px}
.est__price-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.est__unit{margin-top:12px;font-family:var(--f-mono);font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.est__price dl{margin-top:12px}
.est__price .est__disc{padding:12px 0 20px;color:var(--ink)}
.demo-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ochre-text);border:1px dashed var(--ochre-text);padding:3px 8px;white-space:nowrap}
.demo-tag[hidden]{display:none}
.seg span{white-space:nowrap}
@media (max-width:420px){.est__unit{font-size:24px}}

/* ---------- Page transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:400;background:var(--ink);color:var(--chalk);display:grid;place-items:center;visibility:hidden;clip-path:inset(100% 0 0 0);pointer-events:none;overflow:hidden}
.curtain__in{display:grid;justify-items:center;gap:22px}
.curtain__mark{width:clamp(110px,12vw,170px);height:auto}
.curtain__rule{width:min(320px,60vw);height:1px;position:relative}
.curtain__rule i{position:absolute;inset:0;background:var(--ochre);transform-origin:left}
.curtain__label{color:var(--on-loden-muted)}
.curtain__bee{position:absolute;left:0;top:0;width:64px;height:auto;opacity:0}
.curtain-leave .curtain{visibility:visible;pointer-events:all;animation:curtainIn 760ms var(--ease) forwards}
.curtain-leave .curtain__in{animation:rise 600ms var(--ease) 260ms both}
.curtain-leave .curtain__rule i{animation:drawX 700ms var(--ease) 360ms both}
.curtain-leave .curtain__bee{animation:beeFly 1100ms var(--ease) 120ms both}
.curtain-arrive .curtain{visibility:visible;clip-path:inset(0)}
.curtain-out .curtain{animation:curtainOut 900ms var(--ease) forwards}
.curtain-out .curtain__in{animation:liftOut 700ms var(--ease) forwards}
@keyframes curtainIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes curtainOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes liftOut{to{opacity:0;transform:translateY(-24px)}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes beeFly{0%{opacity:0;transform:translate(-10vw,78vh) rotate(-24deg)}20%{opacity:1}100%{opacity:1;transform:translate(78vw,14vh) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* =========================================================================
   CATALOGUE PAGE
   ========================================================================= */
.chero{padding-top:calc(var(--header-h) + clamp(32px,5vw,72px));padding-bottom:clamp(40px,5vw,72px);position:relative;overflow:hidden}
.chero .grid{row-gap:48px;align-items:center;position:relative;z-index:1}
.chero__text{grid-column:1/-1}
.chero__art{grid-column:1/-1;position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
@media (min-width:1024px){.chero__text{grid-column:1/8}.chero__art{grid-column:8/-1}}
.chero .eyebrow{color:var(--steel-text);display:flex;gap:14px;align-items:center}
.chero .eyebrow img{width:26px;height:auto}
.chero h1{margin-top:clamp(24px,3vw,40px);max-width:11ch}
.chero h1 em{font-style:italic}
.chero .lead{margin-top:28px}
.chero .btn-row{margin-top:36px}
.chero__stats{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--steel)}
@media (min-width:640px){.chero__stats{grid-template-columns:repeat(4,1fr)}}
.chero__stats div{padding:18px 16px 0 0}
.chero__stats b{display:block;font-family:var(--f-mono);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1;color:var(--ochre);white-space:nowrap}
.chero__stats span{display:block;margin-top:10px}
.chero__mark{position:absolute;left:4%;top:14%;width:50%;height:auto}
.chero__bee{position:absolute;right:-4%;top:-8%;width:34%;height:auto;animation:beeHover 6s ease-in-out infinite}
@keyframes beeHover{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(-6px,8px) rotate(-6deg)}}
.chero__trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chero__script{position:absolute;right:0;bottom:0;width:44%;height:auto}
.chero__pattern{position:absolute;top:var(--header-h);left:0;right:0;bottom:0;color:var(--camel);opacity:.22;pointer-events:none}
.chero__pattern svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.chero__bee{animation:none;transform:rotate(-10deg)}}

/* toolbar */
#ptool-sentinel{height:1px}
.ptool{position:sticky;top:var(--header-h);z-index:50;background:var(--chalk);border-top:1px solid var(--ink);border-bottom:1px solid transparent;transition:border-color var(--d2) var(--ease)}
.ptool.stuck{border-bottom-color:var(--steel);border-top-color:transparent}
.ptool__in{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding-top:14px;padding-bottom:14px}
.pchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}
.pchips::-webkit-scrollbar{display:none}
@media (min-width:1024px){.pchips{flex:1 1 auto;margin:0;padding:0;flex-wrap:wrap}}
.pchip{flex:none;min-height:40px;padding:0 14px;border:1px solid var(--steel);font-size:13px;font-weight:500;letter-spacing:.04em;white-space:nowrap;transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1)}
.pchip span{font-family:var(--f-mono);font-size:12px;margin-left:6px;color:var(--steel-text)}
.pchip:hover{border-color:var(--ink)}
.pchip[aria-pressed="true"]{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.pchip[aria-pressed="true"] span{color:var(--on-loden-muted)}
.psearch{position:relative;flex:1 1 200px;max-width:300px}
.psearch .input{min-height:40px;padding:8px 12px 8px 38px;font-size:15px}
.psearch svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--steel-text)}
.pdens{display:none;gap:4px}
@media (min-width:1024px){.pdens{display:flex}}
.pdens button{width:40px;height:40px;border:1px solid var(--steel);display:grid;place-items:center}
.pdens button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--chalk)}
.pdens svg{width:18px;height:18px}
.pcount{color:var(--steel-text);white-space:nowrap}
@media (min-width:1280px){
  .ptool__in{flex-wrap:nowrap}
  .pchips{flex:0 1 auto;flex-wrap:nowrap}
  .psearch{margin-left:auto;flex:0 1 240px}
}

/* grid */
.pgrid{display:grid;grid-template-columns:1fr;gap:56px var(--gutter);padding:clamp(32px,4vw,56px) 0 var(--sec)}
@media (min-width:560px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pgrid{grid-template-columns:repeat(3,1fr)}.pgrid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.pgrid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1440px){.pgrid:not([data-cols]){grid-template-columns:repeat(4,1fr)}}
.pgrid__empty{grid-column:1/-1;padding:64px 0;font-family:var(--f-serif);font-size:28px}

/* product card */
.pc{display:flex;flex-direction:column;min-width:0}
.pc__media{position:relative}
.pc__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pc__track::-webkit-scrollbar{display:none}
.pc__slide{flex:0 0 100%;scroll-snap-align:start}
.pc__slide .ph__cap{bottom:44px;font-size:11px}
.pc__slide .ph__art svg{width:50%}
.pc__no{position:absolute;left:12px;top:12px;z-index:5;background:var(--chalk);padding:4px 8px;color:var(--ink)}
.pc__count{position:absolute;right:14px;bottom:12px;z-index:5;font-size:12px;color:var(--steel-text)}
.pc__bee{position:absolute;right:14px;top:10px;z-index:5;width:44px;height:auto;opacity:0;transform:translate(-8px,8px) rotate(-14deg);transition:opacity var(--d2) var(--ease),transform var(--d3) var(--ease);pointer-events:none}
.pc:hover .pc__bee,.pc__media--big .pc__bee{opacity:1;transform:none}
.draft .pc .pc__bee{display:none}
.pc__arr{position:absolute;top:50%;z-index:6;width:40px;height:40px;margin-top:-20px;background:var(--chalk);border:1px solid var(--ink);display:grid;place-items:center;opacity:0;transition:opacity var(--d2) var(--ease),background var(--d1),color var(--d1)}
.pc__arr svg{width:16px;height:9px}
.pc__arr--prev{left:10px}.pc__arr--next{right:10px}
.pc__media:hover .pc__arr,.pc__arr:focus-visible{opacity:1}
.pc__arr:hover{background:var(--ink);color:var(--chalk)}
@media (hover:none){.pc__arr{opacity:1;width:36px;height:36px;margin-top:-18px}}
.pc__dots{position:absolute;left:50%;bottom:16px;z-index:5;display:flex;gap:6px;transform:translateX(-50%)}
.pc__dots i{width:18px;height:2px;background:var(--ink);opacity:.25;transition:opacity var(--d2),background var(--d2)}
.pc__dots i.on{opacity:1;background:var(--ochre)}
.pc__info{padding-top:18px;display:flex;flex-direction:column;flex:1}
.pc__meta{display:flex;justify-content:space-between;gap:12px;color:var(--steel-text)}
.pc__name{margin-top:8px;font-family:var(--f-serif);font-weight:500;font-size:clamp(22px,1.7vw,26px);line-height:1.2}
.pc__name.is-empty,.pd__name.is-empty{color:var(--steel-text);font-style:italic;font-weight:400}
.pc__spec{margin-top:12px}
.pc__spec .row{padding:7px 0}
.pc__spec dt{font-size:14px;color:var(--steel-text)}
.pc__spec dd{font-size:13px}
.pc__act{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* interstitial bands */
.pband{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px)}
.pband--bee{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
@media (min-width:1024px){.pband--bee{grid-template-columns:4fr 5fr 3fr}.pband--mark{grid-template-columns:3fr 9fr}}
.pband__art{position:relative;height:150px}
.pband__bee{position:absolute;right:4%;top:-14px;width:130px;height:auto;transform:rotate(-8deg)}
.pband__trail{position:absolute;left:0;top:34px;width:84%;height:100px}
.pband__h{margin-top:12px;font-family:var(--f-serif);font-weight:300;font-size:clamp(30px,3.2vw,52px);line-height:1.05;letter-spacing:-.01em}
.pband__script{width:min(260px,70%);height:auto;justify-self:end}
.pband--mark{background:var(--ink);color:var(--chalk)}
.pband--mark .mono-up{color:var(--on-loden-muted)}
.pband__mark{width:clamp(120px,12vw,180px);height:auto}
.pband--mark .btn{margin-top:28px}

/* bottom CTA */
.cend{border-top:1px solid var(--ink);padding:var(--sec) 0 0}
.cend .grid{row-gap:32px;align-items:end}
.cend__t{grid-column:1/-1}
.cend__b{grid-column:1/-1}
@media (min-width:1024px){.cend__t{grid-column:1/8}.cend__b{grid-column:9/-1;justify-self:end}}
.cend h2 em{font-style:italic}
.cend .body{margin-top:20px}

/* detail dialog */
.pd{width:min(1280px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--ink);background:var(--chalk);color:var(--ink);overflow:hidden}
.pd[open]{display:flex;flex-direction:column;animation:pdIn 420ms var(--ease)}
@keyframes pdIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pd::backdrop{background:rgba(28,27,25,.72)}
.dlg-open{overflow:hidden}
.pd__bar{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--ink);flex:none}
.pd__bar img{width:30px;height:auto}
.pd__bar .mono-up{margin-right:auto;margin-left:8px;color:var(--steel-text)}
.pd__bar button{width:44px;height:44px;border:1px solid var(--steel);display:grid;place-items:center}
.pd__bar button:hover{border-color:var(--ink)}
.pd__bar svg{width:16px;height:10px}
.pd__body{overflow-y:auto;display:grid;grid-template-columns:1fr;gap:32px;padding:20px}
@media (min-width:900px){.pd__body{grid-template-columns:6fr 5fr;gap:48px;padding:32px}}
.pd__media .pc__slide .ph__cap{font-size:12px}
.pd__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pd__thumbs button{display:block;border:1px solid transparent;padding:0}
.pd__thumbs button:hover{border-color:var(--ink)}
.pd__thumbs .ph__cap,.pd__thumbs .todo,.pd__thumbs .cm{display:none!important}
.pd__info{align-self:start}
.pd__name{margin-top:14px;font-size:clamp(36px,3.6vw,56px)}
.pd__sku{margin-top:10px;color:var(--steel-text)}
.pd__spec{margin-top:24px}
.pd__spec dt{color:var(--steel-text);font-size:15px}
.pd__cust-h{margin-top:28px}
.pd__cta{margin-top:28px}
@media (max-width:640px){.pd{width:100vw;max-height:100dvh;height:100dvh;border:0}}