/*
Theme Name: Case Studio
Theme URI: https://casestudio.us
Author: QuirkWorks 3D / Tech Connext LLC
Description: Landing page theme for Case Studio, custom UV-printed phone cases. Dark, image-led, with every call to action pointing at the Case Studio designer app (set the app URL under Appearance > Customize > Case Studio).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: casestudio
*/

:root{
  --ink:#14151A;--ink-2:#1B1D24;--ink-3:#23262E;--paper:#FFFFFF;--bone:#F3F3F0;--rule:rgba(255,255,255,.10);
  --mist:rgba(255,255,255,.72);--fog:rgba(255,255,255,.48);--signal:#E4322B;--varnish:#F2C14E;
  --spec:linear-gradient(90deg,#00D18F,#00A8F0,#2438D8,#B23CFF,#FF3D9A,#FF8A00,#FFD400);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ui:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:18px;--max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:#fff;font-family:var(--ui);font-weight:400;line-height:1.55;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--fog);margin-bottom:18px}
.eyebrow i{display:inline-block;width:28px;height:2px;background:var(--spec);vertical-align:middle;margin-right:12px}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:20px}
.lead{font-size:clamp(17px,1.35vw,20px);font-weight:300;line-height:1.6;color:var(--mist);max-width:560px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:999px;font:700 15px/1 var(--ui);letter-spacing:.01em;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(0,0,0,.45)}
.btn-s{background:var(--signal);color:#fff;box-shadow:0 10px 30px rgba(228,50,43,.35)}
.btn-s:hover{background:#C9241D;transform:translateY(-1px)}
.btn-g{color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.btn-g:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.07)}
.spec-line{height:3px;background:var(--spec)}
section{position:relative}
.pad{padding:120px 0}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.on{background:rgba(20,21,26,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px}
.brand b{font-size:19px;font-weight:900;letter-spacing:-.01em}
.brand small{display:block;font:700 9px/1 var(--mono);letter-spacing:.18em;color:var(--fog);margin-top:3px}
.links{display:flex;gap:34px;font-size:14px;font-weight:700;color:var(--mist)}
.links a:hover{color:#fff}
.nav .btn{padding:12px 22px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;color:#fff;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;transition:.2s}

/* HERO */
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 80px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:url(assets/bg-marble.webp) center/cover no-repeat;opacity:.55;transform:scale(1.04)}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,21,26,.96) 0%,rgba(20,21,26,.86) 42%,rgba(20,21,26,.35) 75%,rgba(20,21,26,.55) 100%),linear-gradient(180deg,rgba(20,21,26,.4),transparent 30%,transparent 70%,var(--ink) 100%)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,96px);margin:0 0 26px}
.hero h1 em{font-style:normal;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-bottom:40px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;gap:28px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--rule)}
.hero-trust div b{display:block;font-size:17px;font-weight:900}
.hero-trust div span{font:11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fog)}
.fan{position:relative;height:640px;perspective:1400px}
.fan img{position:absolute;width:44%;height:auto;border-radius:12% / 5.6%;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 7px #0A0B0E,0 0 0 8px rgba(255,255,255,.08);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fan .a{left:0;top:80px;transform:rotate(-12deg) translateZ(-60px)}
.fan .b{left:28%;top:0;z-index:2}
.fan .c{left:56%;top:80px;transform:rotate(12deg) translateZ(-60px)}
.fan:hover .a{transform:rotate(-15deg) translate(-16px,8px)}
.fan:hover .c{transform:rotate(15deg) translate(16px,8px)}
.fan .glow{position:absolute;left:30%;top:40%;width:40%;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(178,60,255,.45),rgba(0,168,240,.2),transparent);filter:blur(30px);z-index:0}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:700 10px/1 var(--mono);letter-spacing:.3em;color:var(--fog);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(180deg,var(--fog),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* MARQUEE */
.marquee{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;overflow:hidden;background:var(--ink-2)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:mq 40s linear infinite;font:700 12px/1 var(--mono);letter-spacing:.24em;color:var(--mist)}
.marquee-track span:before{content:"✦";color:#B23CFF;margin-right:56px}
@keyframes mq{to{transform:translateX(-50%)}}

/* TEXTURE */
.tex{background:var(--ink)}
.tex-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px}
.tex-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:300px 300px;gap:14px}
.tex-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-3)}
.tex-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tex-card:hover img{transform:scale(1.06)}
.tex-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(180deg,transparent,rgba(10,11,14,.85));display:flex;justify-content:space-between;align-items:end;gap:12px}
.tex-card figcaption b{font-size:20px;font-weight:900}
.tex-card figcaption span{font:700 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog);text-align:right}
.tex-card.big{grid-row:span 2}
.tex-stat{display:flex;flex-direction:column;justify-content:center;padding:34px;border:1px solid var(--rule);border-radius:var(--r);background:linear-gradient(160deg,var(--ink-2),var(--ink))}
.tex-stat b{font-size:64px;font-weight:900;letter-spacing:-.04em;line-height:1;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.tex-stat span{font-size:15px;color:var(--mist);margin-top:12px;line-height:1.5}

/* STEPS */
.steps-sec{background:var(--bone);color:var(--ink)}
.steps-sec .eyebrow{color:#7A7C85}
.steps-sec .lead{color:#4A4D57}
.steps-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:64px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid #DDDCD6}
.step{padding:34px 26px 0 0;border-right:1px solid #DDDCD6;margin-right:26px;position:relative}
.step:last-child{border-right:0;margin-right:0}
.step .n{font:900 13px/1 var(--mono);letter-spacing:.1em;color:#7A7C85;margin-bottom:60px;display:flex;align-items:center;gap:10px}
.step .n:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--spec)}
.step h3{font-size:21px;margin-bottom:10px;letter-spacing:-.01em}
.step p{font-size:15px;color:#4A4D57;line-height:1.55}
.steps-cta{margin-top:64px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.steps-cta .btn-p{background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(20,21,26,.25)}
.steps-cta small{font:12px/1.5 var(--mono);color:#7A7C85;max-width:420px}

/* APP */
.app{background:var(--ink-2);overflow:hidden}
.app-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.phone{position:relative;width:min(360px,80vw);margin:0 auto;aspect-ratio:540/1130;border-radius:48px;background:#0A0B0E;padding:12px;box-shadow:0 60px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 2px rgba(255,255,255,.04)}
.phone:before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:34%;height:30px;background:#0A0B0E;border-radius:0 0 22px 22px;z-index:2}
.phone video,.phone img{width:100%;height:100%;object-fit:cover;border-radius:38px;background:#fff}
.phone-glow{position:absolute;inset:-20% -30%;z-index:-1;background:radial-gradient(closest-side,rgba(0,168,240,.25),rgba(178,60,255,.15),transparent);filter:blur(40px)}
.feat-list{display:grid;gap:22px;margin:40px 0 44px}
.feat{display:flex;gap:18px;align-items:flex-start}
.feat i{flex:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--rule);background:var(--ink-3);display:grid;place-items:center}
.feat i svg{width:24px;height:24px;color:#fff}
.feat b{display:block;font-size:17px;font-weight:900;margin-bottom:3px}
.feat span{font-size:14px;color:var(--mist);line-height:1.5}

/* GALLERY */
.gal-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.gal figure{text-align:center}
.gal img{width:100%;height:auto;border-radius:12% / 5.6%;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 6px #0A0B0E,0 0 0 7px rgba(255,255,255,.07);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:translateY(-10px)}
.gal figcaption{margin-top:22px}
.gal figcaption b{display:block;font-size:17px;font-weight:900}
.gal figcaption span{font:700 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}

/* ARTIST */
.artist{background:var(--ink-2)}
.artist-in{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.artist-in img{border-radius:var(--r);box-shadow:0 40px 80px rgba(0,0,0,.5)}
.quote{font-size:clamp(20px,1.8vw,24px);font-weight:300;line-height:1.5;color:var(--mist);border-left:2px solid #B23CFF;padding-left:22px;margin:28px 0 36px}

/* STORE */
.store-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.store-card{border:1px solid var(--rule);border-radius:var(--r);background:var(--ink-2);padding:36px;position:relative;overflow:hidden}
.store-card:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--spec)}
.store-tag{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:#CD040B;border-radius:4px;padding:7px 10px;margin-bottom:18px}
.store-card h3{font-size:26px;margin-bottom:10px}
.store-card p{color:var(--mist);font-size:16px}
.store-card .tel{display:inline-block;margin:10px 0 20px;font-weight:900;font-size:17px;color:#fff}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font:13px/1.5 var(--mono);color:var(--fog);margin-bottom:28px}
.hours dt{color:#fff;font-weight:700}
.store-img{border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.store-note{margin-top:24px;font-size:14px;color:var(--fog)}
.store-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* FAQ */
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq details{border-bottom:1px solid var(--rule);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:19px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:300 28px/1 var(--mono);color:var(--fog);transition:transform .25s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin-top:14px;color:var(--mist);font-size:16px;line-height:1.6;max-width:620px}
.faq a{text-decoration:underline;text-underline-offset:3px}

/* FINAL */
.final{text-align:center;padding:160px 0;overflow:hidden;isolation:isolate}
.final-bg{position:absolute;inset:0;z-index:-2;background:url(assets/bg-smoke.webp) center bottom/cover no-repeat;opacity:.95}
.final:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(20,21,26,.3) 45%,rgba(20,21,26,.55) 100%)}
.final img{width:88px;height:88px;margin:0 auto 28px;filter:drop-shadow(0 10px 30px rgba(178,60,255,.5))}
.final h2{font-size:clamp(40px,6vw,80px)}
.final .lead{margin:0 auto 44px}
.final .cta{justify-content:center}

/* FOOTER */
footer{border-top:1px solid var(--rule);padding:56px 0 36px;background:#0E0F13}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.foot h4{font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fog);margin-bottom:18px}
.foot a{display:block;font-size:15px;color:var(--mist);margin-bottom:10px}
.foot a:hover{color:#fff}
.foot p{font-size:14px;color:var(--fog);line-height:1.6;max-width:360px;margin-top:16px}
.foot-logo{width:200px}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:24px;font:12px/1.6 var(--mono);color:var(--fog)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marquee-track{animation:none}.scroll-cue i{animation:none}}

/* RESPONSIVE */
@media(max-width:1080px){.tex-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.tex-card{height:280px}.tex-card.big{grid-row:auto;grid-column:span 2;height:360px}.steps{grid-template-columns:repeat(3,1fr);gap:0 0}.step{margin-bottom:34px}.step:nth-child(3){border-right:0}.gal{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.links,.nav .btn{display:none}.burger{display:block}.nav.open .links{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;background:rgba(20,21,26,.97);padding:28px;gap:22px;border-bottom:1px solid var(--rule);font-size:18px}.hero-in,.tex-head,.steps-head,.app-in,.artist-in,.store-in,.faq-in{grid-template-columns:1fr;gap:40px}.hero{padding:120px 0 90px}.fan{height:min(520px,120vw);max-width:520px;margin:0 auto;width:100%}.pad{padding:84px 0}.steps{grid-template-columns:1fr 1fr}.step{border-right:0;margin-right:0;padding-right:0}.gal-head{flex-direction:column;align-items:flex-start;gap:20px}.final{padding:120px 0}}
@media(max-width:560px){.wrap{padding:0 20px}.hero h1{font-size:44px}.fan img{width:46%}.fan{height:min(420px,105vw)}.tex-card.big{height:300px}.tex-card{height:240px}.steps,.gal{grid-template-columns:1fr}.gal{gap:48px}.foot{grid-template-columns:1fr}.hero-trust{gap:18px}.btn{width:100%;justify-content:center}.nav .btn{width:auto}}

/* ---- inner pages (page.php / index.php) ---- */
.inner{padding:140px 0 100px;max-width:820px;margin:0 auto}
.inner h1{font-size:clamp(36px,5vw,56px);margin-bottom:28px}
.inner .entry{font-size:17px;line-height:1.7;color:var(--mist)}
.inner .entry h2{font-size:28px;margin:40px 0 14px;color:#fff}
.inner .entry h3{font-size:21px;margin:30px 0 10px;color:#fff}
.inner .entry p,.inner .entry ul,.inner .entry ol{margin-bottom:18px}
.inner .entry ul,.inner .entry ol{padding-left:22px}
.inner .entry a{text-decoration:underline;text-underline-offset:3px}
.inner .entry img{border-radius:var(--r);margin:24px 0}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}