/* ============================================================
   case.css — shared styles for internal case-study pages
   Reuses brand tokens from site.css. Linked AFTER site.css.
   ============================================================ */

/* ---------- browser-chrome framed mockup (shared with projects) ---------- */
.browser{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#111;box-shadow:0 40px 90px rgba(0,0,0,.55);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.browser:hover{transform:translateY(-6px);box-shadow:0 55px 120px rgba(0,0,0,.65)}
.browser-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;display:block;opacity:.85}
.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.browser-url{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;direction:ltr;
  font-family:var(--font-wide);font-size:11.5px;letter-spacing:.04em;color:var(--cream-dim);
  background:rgba(14,14,14,.6);border:1px solid var(--line);border-radius:8px;padding:6px 14px;max-width:60%}
.browser-url svg{width:11px;height:11px;fill:var(--cream-dim);flex-shrink:0}
.browser-frame{overflow:hidden;position:relative;aspect-ratio:16/10;background:#0c0c0c}
.browser-frame img{display:block;width:100%;height:auto}

/* ---------- hero ---------- */
.cs-hero{padding-top:clamp(140px,18vh,220px);padding-bottom:clamp(30px,5vh,60px);position:relative;overflow:hidden}
.cs-hero .wrap{position:relative;z-index:3}
.cs-eyebrow{font-family:var(--font-wide);letter-spacing:.2em;text-transform:uppercase;
  font-size:12.5px;color:var(--accent,#FF6A00)}
/* line-height >=1.06 + top padding + mask room so tall 900-weight caps
   are never clipped by .reveal .word{overflow:hidden} (site.css) */
.cs-title{font-weight:900;letter-spacing:-.025em;line-height:1.06;direction:ltr;text-align:right;
  font-size:clamp(42px,8vw,100px);margin:6px 0 18px;padding-top:.12em}
.cs-title .word{padding-top:.16em;margin-top:-.16em}
.cs-tagline{font-weight:300;color:var(--cream);font-size:clamp(17px,2vw,23px);line-height:1.5;max-width:40ch;margin-bottom:34px}
.cs-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3.5vw,54px);padding:26px 0;
  border-block:1px solid var(--line)}
.cs-meta div{display:flex;flex-direction:column;gap:6px}
.cs-meta dt{font-family:var(--font-wide);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.cs-meta dd{margin:0;font-weight:700;font-size:15.5px;color:var(--cream)}
.cs-meta dd.live a{color:var(--accent,#FF6A00);text-decoration:none}
.cs-meta dd .pillx{display:inline-block;padding:3px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.cs-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.cs-tags span{font-family:var(--font-wide);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream-dim);border:1px solid var(--line);border-radius:999px;padding:7px 14px}

.cs-heroshot{margin-top:clamp(34px,5vw,64px);position:relative}
.cs-heroshot .glow{position:absolute;inset:-12% -6% auto;height:55%;z-index:-1;filter:blur(70px);opacity:.5;
  background:radial-gradient(60% 60% at 50% 20%,var(--glow,rgba(255,106,0,.4)),transparent 70%)}

/* ---------- generic content sections ---------- */
.cs-sec{padding-block:clamp(50px,8vh,110px);border-top:1px solid var(--line)}
.cs-sec .wrap{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,70px)}
.cs-sec .lbl{font-family:var(--font-wide);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;
  color:var(--accent,#FF6A00);align-self:start;position:sticky;top:120px}
.cs-lead{font-weight:300;color:var(--cream-dim);font-size:clamp(16.5px,1.7vw,20px);line-height:1.8;max-width:60ch}
.cs-lead strong{color:var(--cream);font-weight:600}

/* approach principles */
.cs-steps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.cs-step{background:var(--bg);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:10px;transition:background .4s}
.cs-step:hover{background:rgba(233,224,203,.03)}
.cs-step .n{font-family:var(--font-wide);color:var(--accent,#FF6A00);font-size:13px;letter-spacing:.16em}
.cs-step h4{font-weight:800;font-size:clamp(18px,1.9vw,23px);line-height:1.15}
.cs-step p{color:var(--cream-dim);font-weight:300;font-size:15.5px;line-height:1.65}

/* result list */
.cs-res{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.cs-res li{display:flex;gap:14px;align-items:flex-start;font-size:clamp(16px,1.6vw,19px);
  font-weight:300;color:var(--cream);line-height:1.6}
.cs-res li::before{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:9px;border-radius:50%;
  background:var(--accent,#FF6A00);box-shadow:0 0 16px var(--glow,rgba(255,106,0,.5))}

/* brand-world showcase (generated visual) */
.cs-showcase{padding-block:clamp(40px,7vh,90px);border-top:1px solid var(--line)}
.cs-photo{margin:0;position:relative}
.cs-photo img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.5)}
.cs-photo figcaption{margin-top:16px;text-align:center;font-family:var(--font-wide);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim)}

/* pager + closing */
.cs-next{padding-block:clamp(46px,7vh,100px);border-top:1px solid var(--line);text-align:center}
.cs-next .lbl{font-family:var(--font-wide);letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--cream-dim)}
.cs-next a.big{display:inline-block;margin-top:14px;font-weight:900;letter-spacing:-.02em;direction:ltr;
  font-size:clamp(30px,5vw,58px);color:var(--cream);text-decoration:none;transition:color .35s}
.cs-next a.big:hover{color:var(--accent,#FF6A00)}
.cs-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:36px}

/* overview goal */
.cs-overview .cs-goal{margin-top:26px;font-weight:600;color:var(--cream);font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;padding-inline-start:18px;border-inline-start:2px solid var(--accent,#FF6A00)}
.cs-overview .cs-goal span{display:block;font-family:var(--font-wide);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,#FF6A00);margin-bottom:7px}

/* key design decisions */
.cs-decisions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.cs-dec{background:var(--bg);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:10px;transition:background .4s}
.cs-dec:hover{background:rgba(233,224,203,.03)}
.cs-dec .n{font-family:var(--font-wide);color:var(--accent,#FF6A00);font-size:13px;letter-spacing:.16em}
.cs-dec h4{font-weight:800;font-size:clamp(17px,1.8vw,22px);line-height:1.15}
.cs-dec p{color:var(--cream-dim);font-weight:300;font-size:15px;line-height:1.65}

/* deliverables */
.cs-deliver{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.cs-deliver li{display:flex;gap:12px;align-items:center;font-size:16px;font-weight:300;color:var(--cream);
  padding:14px 0;border-bottom:1px solid var(--line)}
.cs-deliver li::before{content:"✓";color:var(--accent,#FF6A00);font-weight:800;flex:0 0 auto}

@media(max-width:820px){
  .cs-sec .wrap{grid-template-columns:1fr;gap:22px}
  .cs-sec .lbl{position:static}
  .cs-steps{grid-template-columns:1fr}
  .cs-decisions{grid-template-columns:1fr}
  .cs-deliver{grid-template-columns:1fr}
}

/* prominent "go to site" CTA */
.cs-hero-cta{margin-top:30px}
.cs-cta-big{display:inline-flex;align-items:center;gap:12px;background:var(--accent,#FF6A00);color:#0E0E0E;
  font-weight:800;font-size:clamp(16px,1.8vw,20px);padding:18px 40px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 40px -8px var(--glow,rgba(255,106,0,.6));transition:transform .3s,box-shadow .3s}
.cs-cta-big:hover{transform:translateY(-2px);box-shadow:0 16px 50px -8px var(--glow,rgba(255,106,0,.7))}
.cs-cta-big span{font-size:1.1em}
/* sticky bottom CTA bar (always accessible) */
.cs-sticky{position:fixed;inset-inline:0;bottom:0;z-index:80;display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;padding:14px 20px;background:rgba(14,14,14,.82);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cs-sticky.hidden{transform:translateY(115%)}
.cs-sticky-txt{font-weight:700;color:var(--cream);font-size:16px}
.cs-sticky .cs-cta-big{padding:13px 30px;font-size:16px}
.cs-sticky-x{all:unset;cursor:pointer;color:var(--cream-dim);font-size:22px;line-height:1;padding:4px 10px;border-radius:8px}
.cs-sticky-x:hover{background:rgba(233,224,203,.1);color:var(--cream)}
@media(max-width:600px){.cs-sticky-txt{display:none}.cs-sticky{gap:10px}}

/* --- sticky bar vs the shared .fab cluster -------------------------------
   site.css parks .fab (WhatsApp + accessibility) at fixed;bottom:26px;z-index:50.
   .cs-sticky is fixed;bottom:0;z-index:80 and ~85px tall, so it completely
   covers both buttons on every viewport — elementFromPoint resolves to the bar,
   i.e. the accessibility button is unreachable on case pages. Reserving inline
   space inside the bar is not an option at 390px (the CTA alone is 231px and the
   cluster needs 148px, so the bar would wrap), so lift the cluster above the bar
   while the bar is showing. Scoped override — the .fab rules in site.css are
   untouched. --cs-sticky-h is kept in sync by the page script (0px once the bar
   is dismissed); the 85px fallback keeps this correct with no JS. */
.cs-sticky ~ .fab{transition:transform .3s,bottom .45s cubic-bezier(.22,1,.36,1)}
.cs-sticky:not(.hidden) ~ .fab{bottom:calc(26px + var(--cs-sticky-h,85px))}
/* footer must clear the bar AND the lifted cluster (site.css's 96px only clears
   the cluster at its resting position) */
.foot{padding-bottom:calc(96px + var(--cs-sticky-h,85px))}

/* ============================================================
   Richer case-study additions (v2)
   ============================================================ */

/* dominant LIVE-site button */
.cs-cta-big.is-live{font-size:clamp(17px,2vw,22px);padding:20px 48px;
  box-shadow:0 0 0 1px var(--accent),0 16px 55px -6px var(--glow,rgba(255,106,0,.65));
  animation:csGlow 2.8s ease-in-out infinite}
.cs-cta-big.is-live:hover{transform:translateY(-3px) scale(1.02)}
@keyframes csGlow{0%,100%{box-shadow:0 0 0 1px var(--accent),0 12px 40px -8px var(--glow,rgba(255,106,0,.5))}
  50%{box-shadow:0 0 0 1px var(--accent),0 20px 70px -4px var(--glow,rgba(255,106,0,.85))}}
.cs-sticky .cs-cta-big.is-live{padding:14px 34px;font-size:16px}
@media(prefers-reduced-motion:reduce){.cs-cta-big.is-live{animation:none}}

/* brighter, larger overview lead */
.cs-lead-lg{color:var(--cream);font-weight:300;font-size:clamp(17px,1.9vw,21px);line-height:1.75}

/* alt-tinted section for rhythm variation */
.cs-sec-alt{background:rgba(233,224,203,.014)}

/* ---- huge dragging heading band (GSAP scrub) ---- */
.cs-drag{position:relative;overflow:hidden;padding-block:clamp(24px,7vh,80px);
  border-top:1px solid var(--line)}
.cs-drag-track{display:flex;justify-content:center;pointer-events:none}
.cs-drag-title{margin:0;font-weight:900;letter-spacing:-.03em;line-height:.86;white-space:nowrap;
  font-size:clamp(58px,16vw,210px);color:transparent;-webkit-text-stroke:1px var(--accent,#FF6A00);
  text-stroke:1px var(--accent,#FF6A00);opacity:.3;will-change:transform}
body[data-variant="light"] .cs-drag-title{-webkit-text-stroke-width:1.4px}

/* ---- screenshot gallery ---- */
.cs-gallery{padding-block:clamp(50px,8vh,110px);border-top:1px solid var(--line)}
.cs-gallery .lbl{font-family:var(--font-wide);letter-spacing:.16em;text-transform:uppercase;
  font-size:12.5px;color:var(--accent,#FF6A00)}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:26px;align-items:start}
.cs-gitem{margin:0}
.cs-gitem:first-child{grid-column:1 / -1}
.cs-gitem figcaption{margin-top:14px;font-family:var(--font-wide);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-dim);text-align:center}
/* dashboard/app shots read better full-width */
body[data-variant="app"] .cs-gitem{grid-column:1 / -1}

/* ---- pull quote ---- */
.cs-pull{padding-block:clamp(56px,10vh,130px);border-top:1px solid var(--line);text-align:center}
.cs-pull-q{margin:0 auto;max-width:22ch;font-weight:300;line-height:1.28;color:var(--cream);
  font-size:clamp(25px,4.4vw,54px);letter-spacing:-.01em}
.cs-pull-q::first-letter{color:var(--accent,#FF6A00)}
body[data-variant="editorial"] .cs-pull-q,
body[data-variant="dark"] .cs-pull-q{text-align:right;margin-inline:0;max-width:26ch}

/* ---- process timeline ---- */
.cs-process .cs-proc{list-style:none;margin:6px 0 0;padding:0}
.cs-proc-item{position:relative;padding:24px 0;padding-inline-start:38px;border-bottom:1px solid var(--line)}
.cs-proc-item:first-child{border-top:1px solid var(--line)}
.cs-proc-item::before{content:"";position:absolute;inset-inline-start:6px;top:30px;width:11px;height:11px;
  border-radius:50%;background:var(--accent,#FF6A00);box-shadow:0 0 16px var(--glow,rgba(255,106,0,.5))}
.cs-proc-item::after{content:"";position:absolute;inset-inline-start:11px;top:41px;bottom:-1px;width:1px;
  background:var(--line)}
.cs-proc-item:last-child::after{display:none}
.cs-proc-ph{font-family:var(--font-wide);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,#FF6A00)}
.cs-proc-item h4{font-weight:800;font-size:clamp(18px,2vw,24px);line-height:1.15;margin:8px 0 8px}
.cs-proc-item p{color:var(--cream-dim);font-weight:300;font-size:15.5px;line-height:1.7;max-width:64ch}

@media(max-width:820px){
  .cs-grid{grid-template-columns:1fr}
  .cs-gitem:first-child{grid-column:auto}
}