/* Case Studies — hub + detail page styles (extends style.css / theme.css) */

/* ---- Hero visual: scrollable phone mockup of the live site ---- */
.case-hero-visual{position:relative;width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;isolation:isolate}
.case-hero-visual:before{content:"";position:absolute;top:36px;left:50%;width:320px;height:320px;max-width:80vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(124,255,60,.22),transparent 70%);filter:blur(6px);z-index:-1}
.case-hero-phone{position:relative;width:278px;max-width:calc(100vw - 48px);padding:9px 8px 13px;background:linear-gradient(155deg,#20261f 0%,#0b0e0c 55%,#060907 100%);border-radius:38px;border:1px solid rgba(124,255,60,.28);box-shadow:0 45px 100px rgba(0,0,0,.55),0 0 60px rgba(124,255,60,.1),inset 0 1.5px 0 rgba(255,255,255,.08);box-sizing:border-box}
.case-hero-phone:before{content:"";position:absolute;top:92px;left:-2px;width:3px;height:52px;background:#161a17;border-radius:2px 0 0 2px}
.case-hero-phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:74px;height:16px;border-radius:12px;background:#050706;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.case-hero-phone-screen{position:relative;height:560px;border-radius:29px;overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior:contain;touch-action:pan-y}
.case-hero-phone-screen::-webkit-scrollbar{display:none}
.case-hero-phone-screen img{display:block;width:100%;min-width:100%;max-width:100%;height:auto;margin:0;padding:0;vertical-align:top;animation:none!important;transform:none!important}
.case-hero-phone-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:104px;height:4px;border-radius:4px;background:rgba(255,255,255,.55);z-index:2}
.case-hero-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#8a8f8c;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.case-hero-scroll-hint svg{width:14px;height:14px;fill:none;stroke:var(--green-neon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:case-scroll-bounce 1.6s ease-in-out infinite}
@keyframes case-scroll-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:600px){.case-hero-phone{width:240px}.case-hero-phone-screen{height:420px}}
@media(prefers-reduced-motion:reduce){.case-hero-scroll-hint svg{animation:none}}

/* Isolate the case-study hero from the homepage's own hero fine-tuning hacks.
   Reusing .hero/.hero-visual for shared base styling also pulls in unconditional
   (non-media-gated) rules written specifically for the homepage's transparent-PNG
   phone image — a negative margin-left and skewed column ratios that visibly
   shift our phone mockup off-center. Reset those unconditionally, at every width. */
.case-hero.hero .hero-grid,
.case-hero .service-hero-grid{
  grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr)!important;
  gap:clamp(45px,5vw,88px)!important;
  width:min(1500px,calc(100% - 80px))!important;
}
.case-hero .case-hero-visual{
  margin-left:0!important;
  justify-content:center!important;
  align-self:center!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Below this, force a single, centered column — the base grid's 360px-minimum
   second column is still too wide for the phone mockup on tablets/phones. */
@media(max-width:1024px){
  .case-hero.hero .hero-grid,
  .case-hero .service-hero-grid{grid-template-columns:1fr!important;width:min(600px,calc(100% - 40px))!important;text-align:center;gap:32px!important;align-items:start!important}
  .case-hero .hero-actions{justify-content:center}
  .case-hero .case-hero-meta{justify-content:center}
}

/* Pin content to the top instead of floating in a tall, near-full-height hero
   section — less dead space above the title, phone sits right after it. */
@media(max-width:1024px){
  .case-hero.service-hero{min-height:auto!important;padding:110px 0 56px!important}
  .case-hero .service-breadcrumb{margin-bottom:14px!important}
  .case-hero-badge{margin-bottom:12px}
}
@media(max-width:600px){
  .case-hero.service-hero{padding:82px 0 40px!important}
  .case-hero .service-breadcrumb{margin-bottom:10px!important;font-size:11px}
  .case-hero-badge{margin-bottom:10px}
  .case-hero h1{margin-top:0}
  .case-hero .hero-intro{margin-top:10px}
}
/* The homepage's entrance animation on .hero-copy>* (opacity 0 -> 1, staggered by
   nth-child) was leaving the title/paragraph/buttons stuck invisible on this page.
   Force them permanently visible instead of depending on that animation firing. */
.case-hero-copy,
.case-hero-copy>*{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}

/* REAL root cause of "title/description/buttons missing" on phones: at
   max-width:760px, style.css turns .service-hero-copy into `display:contents`
   and reassigns `order` to its individual children (h1, .hero-intro,
   .hero-actions) so it can interleave them with .service-hero-visual on the
   service pages. Our extra elements (breadcrumb, badge, .case-hero-meta) and
   our visual wrapper (.case-hero-visual, not .service-hero-visual) never get
   an order value, so they default to order:0 and jump AHEAD of h1/intro/
   actions — the phone mockup renders first and pushes the title, description
   and buttons far down the page, out of the viewport. Force the wrapper back
   to a normal block so its children stay in plain DOM order (badge, title,
   description, buttons, meta) ABOVE the phone, exactly as written. */
.case-hero .service-hero-copy{
  display:block!important;
}
.case-hero-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 14px;border:1px solid rgba(124,255,60,.3);border-radius:999px;background:rgba(124,255,60,.08);color:var(--green-neon);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.case-hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;list-style:none;padding:0}
.case-hero-meta li{display:flex;align-items:center;gap:8px;color:#c4cac6;font-size:13px}
.case-hero-meta li b{color:var(--green-neon)}

/* The sections below the hero (stats, before/after compare, "what didn't
   exist before", the new-pages showcase, final CTA) use the site's scroll
   reveal system — they stay opacity:0 until an IntersectionObserver decides
   they're far enough into the viewport, which on a very tall grid (the
   compare rows especially) can mean scrolling deep into the section before
   anything shows. On this page that read as huge blank gaps. Skip the
   scroll-triggered fade for this page's sections and show them immediately;
   scoped to .case-study-page so the shared .included-grid/.project-grid/
   .service-final-cta-inner classes keep their normal reveal on service pages. */
.case-study-page .case-compare-heading,
.case-study-page .case-compare-carousel,
.case-study-page .case-compare-card,
.case-study-page .case-compare-card>*,
.case-study-page .case-stats-grid,
.case-study-page .case-stats-grid>*,
.case-study-page .case-challenge-card,
.case-study-page .case-challenge-card>*,
.case-hub-heading,
.case-hub-grid,
.case-hub-grid>*{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* ---- Stat strip ---- */
.case-stats{position:relative;padding:64px 0;border-top:1px solid rgba(124,255,60,.08);background:#050706}
.case-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.case-stat-card{padding:28px 22px;text-align:center;background:var(--bg-card-dark);border:1px solid rgba(124,255,60,.23);border-radius:16px;box-shadow:0 18px 50px rgba(6,20,8,.12)}
.case-stat-card strong{display:block;font-family:var(--font-display);font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--green-neon);text-shadow:0 0 22px rgba(124,255,60,.22);letter-spacing:-.03em}
.case-stat-card span{display:block;margin-top:10px;color:#aab0ac;font-size:12.5px;line-height:1.45}
html[data-theme="light"] .case-stats{background:var(--bg-light)}
html[data-theme="light"] .case-stat-card{background:#fff;border-color:rgba(7,135,38,.18);box-shadow:0 18px 42px rgba(9,38,16,.08)}
html[data-theme="light"] .case-stat-card strong{color:#16852b;text-shadow:none}
html[data-theme="light"] .case-stat-card span{color:#5f6962}

/* ---- Before / After compare rows ---- */
.case-compare{position:relative;padding:110px 0 120px;overflow:hidden;border-top:1px solid rgba(124,255,60,.08);background:linear-gradient(110deg,#050706 0%,#07120a 100%)}
.case-compare-heading{max-width:720px;margin:0 auto 60px;text-align:center}
.case-compare-heading h2{margin:0;font-family:var(--font-display);font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.03em;color:var(--white)}
.case-compare-heading h2 span{color:var(--green-neon);text-shadow:0 0 22px rgba(124,255,60,.18)}
.case-compare-heading p{margin:14px 0 0;color:var(--grey-muted);font-size:15px}
/* ---- Card carousel: one before/after "card" at a time, arrows on the side ---- */
.case-compare-carousel{position:relative;max-width:820px;margin:0 auto}
.case-compare-viewport{overflow:hidden;border-radius:20px}
.case-compare-track{display:flex;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.case-compare-card{flex:0 0 100%;width:100%;box-sizing:border-box;background:var(--bg-card-dark);border:1px solid rgba(124,255,60,.16);border-radius:20px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.3)}
.case-compare-card .case-compare-slider,.case-compare-card .case-compare-static{border-radius:0;border:0;border-bottom:1px solid rgba(124,255,60,.14);box-shadow:none}
.case-compare-copy{padding:22px 24px 26px}
.case-compare-copy h3{margin:0 0 8px;font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;color:var(--white)}
.case-compare-copy p{margin:0;color:var(--grey-muted);font-size:13.5px;line-height:1.65}

/* Interactive before/after slider: two full-bleed images stacked, the "before"
   one clipped at --pos so the "after" image shows through on the right. Drag
   the handle (or the slider itself) to move --pos; see script.js. */
.case-compare-slider{position:relative;width:100%;height:280px;overflow:hidden;background:var(--bg-card-dark);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:pan-y;--pos:50%}
.case-compare-slider:focus-visible{outline:2px solid var(--green-neon);outline-offset:-3px}
.case-compare-static{position:relative;width:100%;height:280px;overflow:hidden;background:var(--bg-card-dark)}
.case-compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;margin:0;pointer-events:none;transform-origin:top left}
.case-compare-img-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.case-compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);transform:translateX(-50%);width:3px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.4);pointer-events:none;z-index:2}
.case-compare-handle-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--green-neon);display:grid;place-items:center;color:#071006;box-shadow:0 8px 24px rgba(0,0,0,.42),0 0 0 4px rgba(5,5,5,.55)}
.case-compare-handle-grip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.case-compare-tag{position:absolute;z-index:3;top:14px;padding:6px 13px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.case-compare-tag-before{left:14px;background:rgba(10,12,11,.72);color:#d9dfdc;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.case-compare-tag-after{right:14px;background:rgba(124,255,60,.16);color:var(--green-neon);border:1px solid rgba(124,255,60,.35);box-shadow:0 0 16px rgba(124,255,60,.14)}
.case-compare-retired-note{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px 18px;text-align:center;background:linear-gradient(to top,rgba(5,7,6,.92),transparent)}
.case-compare-retired-note strong{display:block;margin-bottom:3px;color:#e7ebe8;font-family:var(--font-display);font-size:15px}
.case-compare-retired-note span{color:#c4cac6;font-size:12.5px;line-height:1.5}

/* On phones the arrows sit fully above the card, clear of the image, with
   breathing room on both sides. From tablet width up they go back to the
   original layout: vertically centered beside the image, overlaid on the
   card edges up to 1180px, then pushed outside where the shell has room. */
.case-compare-nav{position:absolute;top:-46px;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(124,255,60,.35);background:rgba(5,7,6,.82);color:var(--green-neon);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.4);cursor:pointer;transition:.2s;padding:0}
.case-compare-nav:hover:not(:disabled){background:rgba(124,255,60,.16)}
.case-compare-nav:disabled{opacity:.28;cursor:default}
.case-compare-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.case-compare-nav-prev{left:12px}
.case-compare-nav-next{right:12px}

.case-compare-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.case-compare-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(124,255,60,.4);background:transparent;padding:0;cursor:pointer;transition:.2s}
.case-compare-dot.is-active{background:var(--green-neon);border-color:var(--green-neon);box-shadow:0 0 10px rgba(124,255,60,.5)}

html[data-theme="light"] .case-compare{background:var(--bg-light)}
html[data-theme="light"] .case-compare-heading h2{color:var(--text-dark)}
html[data-theme="light"] .case-compare-copy h3{color:var(--text-dark)}
html[data-theme="light"] .case-compare-card{background:#eef3ee;border-color:rgba(7,135,38,.16)}
html[data-theme="light"] .case-compare-tag-before{background:rgba(255,255,255,.85);color:#333;border-color:rgba(0,0,0,.08)}
html[data-theme="light"] .case-compare-nav{background:rgba(255,255,255,.9);color:#16852b;border-color:rgba(7,135,38,.3)}

@media(max-width:639px){
  .case-compare-heading{margin-bottom:88px}
  /* On phone widths the arrows sat far apart near the card edges. Pull them
     together as a close pair centered above the card. */
  .case-compare-nav-prev{left:calc(50% - 50px);right:auto}
  .case-compare-nav-next{left:calc(50% + 8px);right:auto}
}
@media(min-width:640px){
  .case-compare-slider,.case-compare-static{height:340px}
  .case-compare-nav{top:170px}
}
@media(min-width:1025px){
  .case-compare-carousel{max-width:900px}
  .case-compare-slider,.case-compare-static{height:400px}
  .case-compare-nav{top:200px}
}
@media(min-width:1180px){
  .case-compare-nav-prev{left:-58px}
  .case-compare-nav-next{right:-58px}
}
@media(min-width:1400px){
  .case-compare-slider,.case-compare-static{height:460px}
  .case-compare-nav{top:230px}
}

/* ---- Case study hub grid (case-studies.html) ---- */
.case-hub-hero{padding:150px 0 60px}
.case-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.case-hub-card{grid-column:span 1}
.case-hub-card.is-placeholder{display:flex;min-height:100%;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 24px;text-align:center;background:linear-gradient(145deg,rgba(15,20,17,.98),rgba(8,11,9,.98));border:1px dashed rgba(124,255,60,.28);border-radius:18px;color:#8a8f8c;font-size:13px}
.case-hub-card.is-placeholder strong{color:#d9dfdc;font-family:var(--font-display);font-size:16px}
html[data-theme="light"] .case-hub-card.is-placeholder{background:#fff;border-color:rgba(7,135,38,.25);color:#5f6962}

@media(max-width:900px){
  .case-stats-grid{grid-template-columns:repeat(2,1fr)}
  .case-hub-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .case-stats-grid{grid-template-columns:1fr 1fr;gap:12px}
  .case-stat-card{padding:20px 14px}
  .case-compare{padding:76px 0 84px}
  .case-hub-hero{padding:120px 0 40px}
}

/* ---- Auto-scrolling row for "Where the Old Site Fell Short" / "What We
   Built" — a single horizontal row per section, each moving in the opposite
   direction. Driven by script.js (requestAnimationFrame), which pauses only
   on an actual press/hold or drag, never on plain hover. ---- */
.included-marquee{overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.included-marquee.is-dragging{cursor:grabbing}
.included-track{display:flex;gap:22px;width:max-content;will-change:transform}
.included-track .included-card{flex:0 0 300px;width:300px;min-height:230px}
@media(max-width:600px){
  .included-track{gap:16px}
  .included-track .included-card{flex:0 0 250px;width:250px;min-height:210px;padding:24px}
}
@media(prefers-reduced-motion:reduce){
  .included-marquee{cursor:default}
}

/* ---- Small transparency note under the process timeline: real outcome
   numbers aren't in yet since the site only just launched. ---- */
.case-process-note{max-width:560px;margin:36px auto 0;text-align:center;color:#7c8580;font-size:12.5px;font-style:italic;line-height:1.6}
html[data-theme="light"] .case-process-note{color:#7a8179}

/* ---- Challenges we faced (tongue-in-cheek, single card) ---- */
.case-challenge-card{max-width:620px;margin:0 auto;text-align:center;padding:44px 36px;background:var(--bg-card-dark);border:1px solid rgba(124,255,60,.23);border-radius:16px;box-shadow:0 18px 50px rgba(6,20,8,.12)}
.case-challenge-card .service-icon{margin:0 auto 18px}
.case-challenge-card p{margin:0;color:var(--white);font-size:18px;line-height:1.6;font-weight:700;font-family:var(--font-display);letter-spacing:-.01em}
html[data-theme="light"] .case-challenge-card{background:#fff;border-color:rgba(7,135,38,.18);color:var(--text-dark)}
html[data-theme="light"] .case-challenge-card p{color:var(--text-dark)}

/* ---- Final CTA: proper "premium card" treatment on this page, with a
   cursor-tracked spotlight, a hover lift, and a slow idle glow so it feels
   alive even before anyone touches it. --spot-x/--spot-y are set by
   script.js on pointermove; they default to a fixed point so the card still
   looks intentional on touch devices that never fire pointermove. ---- */
.case-study-page .service-final-cta-inner{opacity:1!important}
.case-final-cta .service-final-cta-inner{
  position:relative;padding:60px 52px;overflow:hidden;
  background:linear-gradient(155deg,rgba(17,22,19,.92) 0%,rgba(7,12,9,.96) 100%);
  border:1px solid rgba(124,255,60,.22);border-radius:26px;
  box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 70px rgba(124,255,60,.08),inset 0 1px 0 rgba(255,255,255,.05);
  --spot-x:50%;--spot-y:15%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.case-final-cta .service-final-cta-inner:hover{
  transform:translateY(-6px);
  border-color:rgba(124,255,60,.4);
  box-shadow:0 44px 110px rgba(0,0,0,.48),0 0 90px rgba(124,255,60,.15),inset 0 1px 0 rgba(255,255,255,.07);
}
.case-final-cta .service-final-cta-inner:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(480px circle at var(--spot-x) var(--spot-y),rgba(124,255,60,.18),transparent 62%);
  opacity:0;transition:opacity .5s ease;
}
.case-final-cta .service-final-cta-inner:hover:before{opacity:1}
.case-final-cta .service-final-cta-inner:after{
  content:"";position:absolute;left:50%;top:-46px;width:360px;height:210px;z-index:0;pointer-events:none;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(124,255,60,.22),transparent 70%);
  filter:blur(22px);animation:case-final-breathe 4.6s ease-in-out infinite;
}
@keyframes case-final-breathe{0%,100%{opacity:.45;transform:translateX(-50%) scale(.92)}50%{opacity:.9;transform:translateX(-50%) scale(1.06)}}
.case-final-cta .service-final-cta-inner>*{position:relative;z-index:1}
.case-final-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:7px 16px;border:1px solid rgba(124,255,60,.32);border-radius:999px;background:rgba(124,255,60,.09);color:var(--green-neon);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.case-final-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:30px 0 0;padding:0}
.case-final-chips li{padding:8px 16px;border:1px solid rgba(124,255,60,.2);border-radius:999px;background:rgba(124,255,60,.04);color:#c4cac6;font-size:12px;font-weight:600;transition:.25s cubic-bezier(.2,.8,.2,1);cursor:default}
.case-final-chips li:hover{border-color:rgba(124,255,60,.55);background:rgba(124,255,60,.12);color:var(--green-neon);transform:translateY(-2px)}
html[data-theme="light"] .case-final-cta .service-final-cta-inner{background:linear-gradient(155deg,#fff 0%,#f2f8f2 100%);border-color:rgba(7,135,38,.18);box-shadow:0 26px 60px rgba(9,38,16,.1)}
html[data-theme="light"] .case-final-cta .service-final-cta-inner:hover{box-shadow:0 32px 74px rgba(9,38,16,.14);border-color:rgba(7,135,38,.32)}
html[data-theme="light"] .case-final-badge{background:rgba(7,135,38,.08);border-color:rgba(7,135,38,.28);color:#16852b}
html[data-theme="light"] .case-final-chips li{color:#3a453d;border-color:rgba(7,135,38,.22);background:rgba(7,135,38,.04)}
html[data-theme="light"] .case-final-chips li:hover{border-color:rgba(7,135,38,.4);background:rgba(7,135,38,.1)}
@media(prefers-reduced-motion:reduce){
  .case-final-cta .service-final-cta-inner:after{animation:none}
}
@media(max-width:700px){
  .case-final-cta .service-final-cta-inner{padding:44px 26px;border-radius:20px}
  .case-final-chips{gap:8px}
  .case-final-chips li{font-size:11px;padding:7px 13px}
}