/* ZEE HOUSE — client case pages (shared) */
:root{
  --bg:#1c1c1e;--bg-2:#232325;--bg-3:#26261f;--deep:#0d0d0e;--ink:#f5f5f3;--ink-2:#9a9a96;--ink-3:#6a6a66;
  --line:rgba(245,245,243,0.10);--accent:#f39200;--warm:#ffcd6e;
  --sans:'Space Grotesk',sans-serif;--mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5;}
::selection{background:var(--accent);color:var(--deep);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1280px;margin:0 auto;padding:0 2.4rem;}
.tick{display:inline-block;width:20px;height:3px;background:var(--accent);transform:skewX(-26deg);vertical-align:middle;margin-right:0.7rem;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:0.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* nav (matches production.html) */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2.4rem;background:linear-gradient(180deg,rgba(13,13,14,0.85),transparent);backdrop-filter:blur(6px);}
.nav-brand{font-family:var(--mono);font-weight:700;font-size:1rem;letter-spacing:0.14em;}
.nav-brand .dot{color:var(--accent);}
.nav-links{display:flex;gap:1.9rem;align-items:center;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;}
.nav-links a{color:var(--ink-2);transition:color 0.3s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.home{color:var(--ink-3);}
.nav-links a.home:hover{color:var(--accent);}
@media(max-width:820px){.nav-links a:not(.home){display:none;}}

/* case header */
.case-wrap{padding-top:7rem;}
.section{padding:1.4rem 0 4.2rem;}
.backlink{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2.2rem;transition:color 0.3s;}
.backlink:hover{color:var(--accent);}
.case-eyebrow{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;margin-bottom:1rem;}
.case-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1.5rem;}
.case-title{font-weight:700;font-size:clamp(3rem,11vw,7rem);line-height:0.84;letter-spacing:-0.035em;}
.case-meta{display:flex;gap:0.5rem;flex-wrap:wrap;padding-bottom:0.5rem;}
.case-meta span{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:0.42rem 0.72rem;border-radius:3px;}
.case-intro{color:var(--ink-2);font-size:1.05rem;line-height:1.6;max-width:40rem;margin-top:1.5rem;}

/* subsection label */
.sub-label{display:flex;align-items:center;gap:1rem;margin:3.2rem 0 1.4rem;}
.sub-label .k{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.sub-label .x{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
.sub-label .n{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;color:var(--ink-3);}

/* video players */
.player-screen{position:relative;width:100%;background:#050506;border:1px solid var(--line);overflow:hidden;}
.tvc .player-screen{aspect-ratio:16/9;}
.short .player-screen{aspect-ratio:9/16;}
.player-cover{position:absolute;inset:0;cursor:pointer;z-index:3;outline:none;}
.player-cover .thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(0.16,1,0.3,1);}
.player:hover .player-cover .thumb{transform:scale(1.04);}
.player-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,14,0.06),rgba(13,13,14,0.5));pointer-events:none;}
.player-cover:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;}
.player-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:74px;height:74px;border-radius:50%;background:rgba(243,146,0,0.94);display:flex;align-items:center;justify-content:center;transition:transform 0.3s,box-shadow 0.3s;}
.player-play::after{content:'';margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #0d0d0e;}
.player-cover:hover .player-play,.player-cover:focus-visible .player-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 46px 6px rgba(243,146,0,0.42);}
.feature .player-play{width:82px;height:82px;}
.feature .player-play::after{border-width:15px 0 15px 24px;margin-left:6px;}
.short .player-play{width:52px;height:52px;}
.short .player-play::after{border-width:10px 0 10px 16px;margin-left:4px;}
.player-tag{position:absolute;top:0.7rem;left:0.8rem;z-index:5;font-family:var(--mono);font-size:0.56rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);background:rgba(13,13,14,0.6);padding:0.3rem 0.5rem;backdrop-filter:blur(3px);}

.player-cap{position:absolute;bottom:0.9rem;left:1rem;right:1rem;z-index:5;}
.player-cap .t{display:block;font-weight:600;font-size:1rem;letter-spacing:-0.01em;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,0.75);}
.feature .player-cap .t{font-size:1.25rem;}
.player-cap .s{display:block;font-family:var(--mono);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);margin-top:0.15rem;text-shadow:0 1px 4px rgba(0,0,0,0.8);}

.tvc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
@media(max-width:820px){.tvc-grid{grid-template-columns:1fr;}}
.feature{max-width:1040px;}

/* shorts rail */
.rail-sprk{height:12px;background-image:radial-gradient(circle 3px,var(--bg) 3px,transparent 3.1px);background-position:9px center;background-size:24px 12px;background-repeat:repeat-x;opacity:0.45;}
.rail-wrap{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0.9rem 0.2rem;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail .player{flex:0 0 auto;width:clamp(148px,44vw,204px);scroll-snap-align:start;}
.rail-hint{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);margin-top:0.4rem;}
.rail-hint .arr{color:var(--accent);animation:nudge 1.8s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr);gap:0.7rem;}}
.ptile{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:#0d0d0e;cursor:pointer;padding:0;}
.ptile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(0.16,1,0.3,1);}
.ptile:hover img,.ptile:focus-visible img{transform:scale(1.05);}
.ptile::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow 0.3s;pointer-events:none;}
.ptile:hover::after,.ptile:focus-visible::after{box-shadow:inset 0 0 0 2px var(--accent);}
.ptile:focus-visible{outline:none;}
.ptag{position:absolute;top:0.6rem;left:0.7rem;font-family:var(--mono);font-size:0.54rem;letter-spacing:0.16em;color:var(--accent);background:rgba(13,13,14,0.6);padding:0.26rem 0.46rem;opacity:0;transition:opacity 0.3s;backdrop-filter:blur(3px);}
.ptile:hover .ptag,.ptile:focus-visible .ptag{opacity:1;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,8,9,0.94);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:3.6rem 1.2rem;}
.lb.on{display:flex;}
.lb-img{max-width:100%;max-height:85vh;object-fit:contain;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.lb-close{position:absolute;top:1rem;right:1.3rem;background:none;border:none;color:var(--ink-2);font-size:2.1rem;line-height:1;cursor:pointer;font-family:var(--sans);transition:color 0.3s;}
.lb-close:hover,.lb-close:focus-visible{color:var(--accent);outline:none;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(13,13,14,0.5);border:1px solid var(--line);color:var(--ink);width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.3s,border-color 0.3s,color 0.3s;}
.lb-nav:hover,.lb-nav:focus-visible{background:rgba(243,146,0,0.92);border-color:var(--accent);color:#0d0d0e;outline:none;}
.lb-prev{left:1.2rem;}.lb-next{right:1.2rem;}
.lb-cap{position:absolute;bottom:1.05rem;left:0;right:0;display:flex;justify-content:center;gap:1.2rem;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.lb-cap span:first-child{color:var(--accent);}
@media(max-width:560px){.lb-nav{width:40px;height:40px;font-size:1.3rem;}.lb-prev{left:0.5rem;}.lb-next{right:0.5rem;}}

/* footer (matches production.html) */
.footer{border-top:1px solid var(--line);padding:3rem 0;margin-top:2rem;}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;}
.footer .f-brand{font-family:var(--mono);font-weight:700;letter-spacing:0.1em;}
.footer .f-brand .dot{color:var(--accent);}
.footer-links{display:flex;gap:1.4rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;}
.footer-links a{color:var(--ink-2);transition:color 0.3s;}
.footer-links a:hover{color:var(--accent);}
.footer .f-copy{font-family:var(--mono);font-size:0.62rem;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase;margin-top:1.6rem;}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;}.player .thumb,.ptile img{transition:none;}.rail-hint .arr{animation:none;}html{scroll-behavior:auto;}}