/* Studio - the small-business websites page for bhlabs.net.
   Same film palette as the reel, but a normal scrolling document:
   the reel locks scroll, this page must not. */

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;padding:0;min-height:100%;
  background:#080706;color:#f3ede1;
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:#f0b75e;color:#080706}

:root{
  --bg:#080706;--cream:#f3ede1;--muted:#9a9183;
  --line:rgba(243,237,225,0.16);--accent:#f0b75e;
  --disp:'Anton',sans-serif;--mono:'Space Mono',monospace;
}

a{color:inherit}

/* ---- shell ---- */
.wrap{width:min(1120px,92vw);margin:0 auto}

.filmtop{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(16px,4vw,40px);
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;
  background:rgba(8,7,6,0.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.filmtop a{text-decoration:none;color:var(--muted)}
.filmtop a:hover{color:var(--accent)}
.filmtop .right{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px)}

/* sound toggle, matching the one in the reel's header */
.snd{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(240,183,94,0.45);background:rgba(243,237,225,0.04);color:var(--accent);
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;cursor:pointer;
}
.snd.off{color:var(--muted);border-color:var(--line)}
.snd:hover{background:rgba(243,237,225,0.08)}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4632;animation:rec 1.4s steps(1) infinite}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.18}}

/* framed inside the reel (js/embed.js): the sheet supplies the way back
   and the sound switch, so the page's own header would only duplicate them */
.embedded .filmtop{display:none}
.embedded .hero{padding-top:clamp(64px,12vh,140px)}

/* ---- type ---- */
.kicker{font-family:var(--mono);font-size:clamp(10px,1.1vw,12px);letter-spacing:0.22em;text-transform:uppercase;color:var(--accent)}
.disp{margin:0;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:0.88;color:var(--cream)}
.lede{font-size:clamp(14px,1.5vw,18px);line-height:1.62;color:var(--muted)}
.accent{color:var(--accent)}

section{padding:clamp(52px,8vh,104px) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,11vh,132px) 0 clamp(48px,9vh,108px);
  background:radial-gradient(120% 110% at 50% 0%,#181410,#080706)}
.hero h1{font-size:clamp(42px,8.4vw,124px)}

/* ---- cards ---- */
.grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  padding:clamp(18px,2.2vw,28px);border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(243,237,225,0.045),rgba(243,237,225,0.015));
}
.card h3{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--cream)}

/* ---- stat row ---- */
.stats{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px)}
.stat b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(24px,3vw,42px);line-height:1;color:var(--accent)}
.stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted)}

/* ---- case study ---- */
.case{display:grid;grid-template-columns:0.86fr 1.14fr;gap:clamp(24px,4vw,60px);align-items:center}
.shots{position:relative}
.browser{
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0d0b08;
  box-shadow:0 40px 90px rgba(0,0,0,0.62),0 0 0 1px rgba(243,237,225,0.05);
  transform:rotate(-1.4deg);
}
.chrome{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#15110d;border-bottom:1px solid var(--line)}
.chrome i{width:9px;height:9px;border-radius:50%;background:#332c23;display:block}
.chrome .bar{flex:1;margin-left:10px;height:19px;border-radius:6px;background:#0a0806;display:flex;align-items:center;padding:0 11px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.browser img{display:block;width:100%;height:auto}
.phone{
  position:absolute;right:-3%;bottom:-11%;width:23%;min-width:104px;
  border-radius:16px;overflow:hidden;border:1px solid rgba(240,183,94,0.3);
  box-shadow:0 30px 60px rgba(0,0,0,0.72);transform:rotate(3.5deg);background:#0d0b08;
}
.phone img{display:block;width:100%;height:auto}

/* ---- gallery ---- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,22px)}
.gal figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0d0b08;
  box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{padding:11px 15px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}

/* ---- app rows (the Embers page) ---- */
.approw{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(14px,2vw,22px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(243,237,225,0.045),rgba(243,237,225,0.015))}
.approw + .approw{margin-top:clamp(10px,1.4vw,16px)}
.approw img{flex:0 0 auto;width:clamp(52px,6vw,74px);height:auto;border-radius:22.4%;
  box-shadow:0 12px 26px rgba(0,0,0,0.6)}
.approw h3{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--cream)}
.approw p{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tag{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(240,183,94,0.4);
  border-radius:999px;padding:5px 11px}
.tag.soon{color:var(--muted);border-color:var(--line)}

/* ---- steps ---- */
.step{display:flex;gap:clamp(14px,2vw,24px);align-items:flex-start;padding:clamp(16px,2.2vw,24px) 0;border-top:1px solid var(--line)}
.step:first-child{border-top:none}
.step b{flex:0 0 auto;font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:0.9;color:rgba(240,183,94,0.42);min-width:1.6em}
.step h3{margin:0 0 6px;font-size:clamp(16px,1.8vw,21px);color:var(--cream)}
.step p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:62ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:inherit}
.btn-a{background:var(--accent);color:#080706}
.btn-b{border-color:var(--line);color:var(--cream)}

footer.foot{padding:34px 0 44px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
footer.foot a{color:var(--muted);text-decoration:none}
footer.foot a:hover{color:var(--accent)}

/* ---- film grain, kept subtle so text stays readable ---- */
.fx{position:fixed;inset:0;z-index:60;pointer-events:none}
.fx .warm{position:absolute;inset:0;mix-blend-mode:soft-light;background:#7a4a1e;opacity:.09}
.fx .vig{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 45%,transparent 58%,rgba(0,0,0,0.5) 100%)}
.fx .flick{position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;opacity:.04;animation:flick 4s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:.03}50%{opacity:.08}}

@media (max-width:860px){
  .g3,.g4{grid-template-columns:1fr 1fr}
  .approw{flex-wrap:wrap}
  .tag{margin-left:0;order:3}
  .case{grid-template-columns:1fr;gap:clamp(40px,9vw,60px)}
  .browser{transform:none}
  /* keep the phone inside the viewport - overflow-x:hidden would crop it */
  .phone{right:3%;bottom:-7%;width:26%}
}
@media (max-width:560px){
  .g3,.g4{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .fx .flick,.rec{animation:none!important}
}