/* ── ACR Labs Design System — Case Study Shared Styles ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg:#0f1419; --bg2:#141a20; --bg3:#0a0e12; --night:#050508;
  --border:rgba(245,245,245,0.1); --border-sub:rgba(245,245,245,0.05);
  --text:#f5f5f5; --text-sec:#e0e0e0; --muted:#a0a0a0; --faded:#666;
  --accent:#e63946; --accent-hv:#c1121f;
  --accent-dim:rgba(230,57,70,0.12); --accent-glow:rgba(230,57,70,0.06);
  --fd:'Fraunces',Georgia,serif; --fb:'Source Serif 4',Georgia,serif; --fm:'Space Mono',monospace;
  --r:0.5rem; --rx:0.75rem;
  --ease:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ── SIDEBAR ── */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:56px;background:var(--bg3);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;z-index:100;padding:28px 0;}
.sb-back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--r);color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s;margin-bottom:32px;flex-shrink:0;}
.sb-back:hover{color:var(--text);border-color:rgba(245,245,245,0.2);}
.sb-back svg{transition:transform .15s var(--ease);}
.sb-back:hover svg{transform:translateX(-2px);}
.sb-chapters{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;}
.sb-ch{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer;text-decoration:none;}
.sb-dot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(245,245,245,0.25);flex-shrink:0;transition:background .2s,border-color .2s,transform .2s;}
.sb-ch:hover .sb-dot{border-color:rgba(245,245,245,0.5);transform:scale(1.3);}
.sb-ch.active .sb-dot{background:var(--accent);border-color:var(--accent);transform:scale(1.15);}
.sb-ch-name{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:5px 10px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;}
.sb-ch:hover .sb-ch-name{opacity:1;}
.sb-progress-wrap{width:100%;margin-top:20px;display:flex;justify-content:center;}
.sb-progress-track{width:1px;height:48px;background:rgba(255,255,255,0.08);border-radius:1px;}
.sb-progress-fill{width:100%;background:var(--accent);border-radius:1px;height:0%;transition:height .15s;}
/* ── Sidebar label (rotated, matching lab sidebar language) ── */
.sb-label {
  font-family: var(--fm); font-size: 7.5px; letter-spacing: .22em; color: rgba(255,255,255,0.25);
  text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(180deg);
  padding: 10px 0; flex-shrink: 0; user-select: none; margin: 6px 0;
}
.sb-label em { font-style: normal; color: var(--accent); }
/* ── Sidebar next-project link ── */
.sb-next {
  margin-top: auto; padding-bottom: 6px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; text-decoration: none;
  font-family: var(--fm); font-size: 8px; letter-spacing: .12em;
  color: rgba(255,255,255,0.22); text-transform: uppercase; transition: color .15s;
  flex-shrink: 0;
}
.sb-next:hover { color: var(--accent); }
.sb-next-arrow { font-size: 12px; line-height: 1; }

/* ── LAYOUT ── */
#main{margin-left:56px;}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night);position:relative;overflow:hidden;padding:0 80px 80px;}
.hero-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--border-sub) 0,var(--border-sub) 1px,transparent 1px,transparent 200px);}
.hero-num{position:absolute;font-family:var(--fd);font-size:clamp(280px,38vw,580px);font-weight:800;line-height:1;color:rgba(245,245,245,0.018);right:-3%;bottom:-8%;pointer-events:none;letter-spacing:-0.06em;}
.hero-content{position:relative;z-index:2;max-width:900px;}
.hero-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:48px;}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.hero-label{font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;}
.hero-h{font-family:var(--fd);font-size:clamp(56px,8vw,116px);font-weight:300;line-height:.93;letter-spacing:-.035em;margin-bottom:56px;}
.hero-h em{font-style:italic;color:var(--accent);}
.hero-stats{display:flex;gap:56px;padding-top:40px;border-top:1px solid var(--border);flex-wrap:wrap;}
.hs{display:flex;flex-direction:column;gap:6px;}
.hs-n{font-family:var(--fd);font-size:clamp(36px,4.5vw,56px);font-weight:300;letter-spacing:-.025em;line-height:1;}
.hs-n span{color:var(--accent);}
.hs-l{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}

/* ── SECTIONS ── */
.section{padding:160px 80px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.section.bg2{background:var(--bg2);}
.section.bg3{background:var(--bg3);}
.section.night{background:var(--night);}
.container{max-width:920px;margin:0 auto;}
.container-wide{max-width:1100px;margin:0 auto;}

/* Chapter header */
.ch-num-large{position:absolute;font-family:var(--fd);font-size:clamp(100px,14vw,180px);font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(245,245,245,0.05);right:48px;top:48px;pointer-events:none;}
.ch-super{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.ch-label{font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;}
.ch-label-m{font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.ch-divider{flex:1;max-width:48px;height:1px;background:var(--border);}
.ch-h{font-family:var(--fd);font-size:clamp(30px,4vw,50px);font-weight:400;letter-spacing:-.025em;line-height:1.1;max-width:700px;}
.ch-h em{font-style:italic;color:var(--accent);}
.ch-body{font-family:var(--fb);font-size:17px;line-height:1.85;color:var(--muted);max-width:600px;margin-top:24px;}
.ch-body strong{color:var(--text);font-weight:500;}
.ch-header{margin-bottom:80px;}

/* ── GRID LAYOUTS ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;}

/* ── CARDS ── */
.card{background:var(--bg2);padding:40px 32px;display:flex;flex-direction:column;gap:14px;transition:background .2s;}
.card:hover{background:var(--bg3);}
.card-n{font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;}
.card-title{font-family:var(--fd);font-size:20px;font-weight:400;letter-spacing:-.02em;line-height:1.2;}
.card-body{font-family:var(--fb);font-size:14px;line-height:1.75;color:var(--muted);}

/* ── STAT CARDS ── */
.stat-card{background:var(--bg2);padding:40px 32px;}
.stat-n{font-family:var(--fd);font-size:clamp(44px,5.5vw,68px);font-weight:300;letter-spacing:-.03em;line-height:1;margin-bottom:8px;}
.stat-n span{color:var(--accent);}
.stat-l{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.stat-d{font-family:var(--fb);font-size:13px;color:var(--faded);line-height:1.55;}

/* ── META TABLE ── */
.meta-table{border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;}
.meta-r{display:grid;grid-template-columns:110px 1fr;border-bottom:1px solid var(--border);}
.meta-r:last-child{border-bottom:none;}
.meta-k{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;padding:13px 18px;border-right:1px solid var(--border);display:flex;align-items:center;}
.meta-v{font-family:var(--fb);font-size:13px;color:var(--text-sec);padding:13px 18px;line-height:1.5;}

/* ── QUOTE ── */
.quote-pull{padding:56px 64px;background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--rx);position:relative;overflow:hidden;}
.qp-mark{position:absolute;font-family:var(--fd);font-size:220px;line-height:1;color:rgba(245,245,245,0.03);top:-20px;left:28px;pointer-events:none;}
.qp-text{font-family:var(--fd);font-size:clamp(18px,2.2vw,28px);font-weight:300;font-style:italic;line-height:1.45;letter-spacing:-.01em;color:var(--text);position:relative;z-index:1;margin-bottom:24px;}
.qp-src{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}

/* ── SPEC BLOCK ── */
.spec{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;}
.spec-hd{padding:11px 18px;background:var(--night);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.spec-hd span{font-family:var(--fm);font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}
.spec-badge{font-family:var(--fm);font-size:9px;letter-spacing:.1em;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(230,57,70,0.3);border-radius:3px;padding:2px 7px;}
.spec-bd{padding:18px;}
.spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-sub);gap:16px;}
.spec-row:last-child{border-bottom:none;}
.spec-k{font-family:var(--fm);font-size:10px;color:var(--muted);}
.spec-v{font-family:var(--fm);font-size:10px;color:var(--text);text-align:right;}
.spec-v.acc{color:var(--accent);}

/* ── DECISIONS ── */
.decision{display:grid;grid-template-columns:72px 1fr 1fr;gap:48px;align-items:start;padding:64px 0;border-bottom:1px solid var(--border);}
.decision:last-child{border-bottom:none;padding-bottom:0;}
.d-num{font-family:var(--fd);font-size:clamp(52px,6vw,88px);font-weight:300;color:rgba(245,245,245,0.1);line-height:1;letter-spacing:-.04em;}
.d-title{font-family:var(--fd);font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px;}
.d-body{font-family:var(--fb);font-size:15px;line-height:1.82;color:var(--muted);}
.d-body strong{color:var(--text);font-weight:500;}

/* ── FULL-BLEED ── */
.full-bleed{margin:64px -80px 0;}
.diagram-wrap{background:var(--night);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.diagram-hd{padding:14px 80px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;}
.diagram-hd-title{font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--text-sec);text-transform:uppercase;}
.diagram-badge{font-family:var(--fm);font-size:9px;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(230,57,70,0.3);border-radius:3px;padding:2px 8px;text-transform:uppercase;letter-spacing:.08em;}

/* ── TESTIMONIAL ── */
.testimonial{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rx);padding:48px 56px;margin-top:48px;}
.t-q{font-family:var(--fd);font-size:clamp(17px,2vw,24px);font-weight:300;font-style:italic;line-height:1.5;letter-spacing:-.01em;}
.t-src{text-align:right;}
.t-name{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--text);text-transform:uppercase;}
.t-role{font-family:var(--fm);font-size:9px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:4px;}

/* ── LESSONS ── */
.lessons{border:1px solid var(--border);border-radius:var(--rx);overflow:hidden;}
.lesson{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border);align-items:start;}
.lesson:last-child{border-bottom:none;}
.ln{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--accent);padding-top:2px;}
.lt{font-family:var(--fb);font-size:14px;line-height:1.75;color:var(--text-sec);}
.lt strong{color:var(--text);}

/* ── NEXT PROJECT ── */
#next{padding:96px 80px;background:var(--bg2);border-bottom:1px solid var(--border);}
.next-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;}
.next-lbl{font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:14px;}
.next-title{font-family:var(--fd);font-size:clamp(32px,5vw,60px);font-weight:300;letter-spacing:-.03em;line-height:.95;}
.next-title em{font-style:italic;color:var(--accent);}
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:13px 26px;background:var(--accent);color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;border-radius:var(--r);transition:background .15s,transform .15s var(--ease);white-space:nowrap;}
.btn-primary:hover{background:var(--accent-hv);transform:translateY(-2px);}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
.rd1{transition-delay:.1s;}.rd2{transition-delay:.2s;}.rd3{transition-delay:.3s;}.rd4{transition-delay:.4s;}

/* ── SCREENSHOT SHOWCASES ── */
.screenshot-showcase {
  background: var(--night); border: 1px solid var(--border);
  border-radius: var(--rx); overflow: hidden; margin: 48px 0;
}
.screenshot-showcase img { width: 100%; display: block; }
.screenshot-caption {
  padding: 13px 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sc-label { font-family: var(--fm); font-size: 9px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.sc-badge { font-family: var(--fm); font-size: 9px; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(230,57,70,0.3); border-radius: 3px; padding: 2px 7px; letter-spacing: 0.08em; text-transform: uppercase; }

.screenshots-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--rx); overflow: hidden; margin: 48px 0;
}
.screenshots-2col .screenshot-showcase { margin: 0; border: none; border-radius: 0; }

.screenshot-fullbleed { margin: 64px -80px 0; }
.screenshot-fullbleed img { width: 100%; display: block; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.screenshot-fullbleed .screenshot-caption { padding: 13px 80px; background: var(--night); border: none; border-top: 1px solid var(--border); }

/* HTML Mockup components */
.mockup-frame {
  background: var(--night); border: 1px solid var(--border);
  border-radius: var(--rx); overflow: hidden; margin: 48px 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.mockup-titlebar {
  height: 40px; background: var(--bg3); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 7px;
}
.td { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mockup-tag { font-family: var(--fm); font-size: 9px; letter-spacing: 0.12em; color: var(--faded); text-transform: uppercase; margin-left: 8px; }
.mockup-body { padding: 24px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #sidebar{display:none;}
  #main{margin-left:0;}
  .section{padding:96px 40px;}
  .full-bleed{margin:48px -40px 0;}
  .diagram-hd{padding:14px 40px;}
  #next{padding:72px 40px;}
  #hero{padding:0 40px 64px;}
  .decision{grid-template-columns:48px 1fr;}
  .decision>:last-child{grid-column:2;}
  .two-col,.three-col,.four-col{grid-template-columns:1fr;}
  .testimonial{grid-template-columns:1fr;gap:28px;}
  .t-src{text-align:left;}
  .next-grid{grid-template-columns:1fr;gap:32px;}
}