/* ==========================================================================
   Case-study pages. Loaded AFTER blog.css, which supplies the design tokens,
   nav, footer, buttons, prose, cards, FAQ and reveal animations. This file
   only adds the case-study-specific building blocks so a second and third
   study is content, not new design work.
   ========================================================================== */

/* One content-column width for the WHOLE case study. Every section (text, stat
   boxes, screenshots, quotes) uses it, so nothing is wider or narrower than
   anything else. Nav and footer keep the full site width as page chrome. */
:root{--cw:920px}

/* ===== HERO ===== */
.cs-hero{position:relative;padding:52px 0 24px;overflow:hidden}
.cs-hero .glow{position:absolute;width:640px;height:640px;top:-300px;right:-180px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(46,94,78,.20),transparent 62%)}
.cs-hero .wrap{position:relative;z-index:2;max-width:var(--cw)}
/* two columns so the right side is never empty: copy left, client card right */
.cs-hero .hero-grid{display:grid;grid-template-columns:1fr 290px;gap:40px;align-items:center;margin-top:8px}
@media(max-width:720px){.cs-hero .hero-grid{grid-template-columns:1fr;gap:26px}}
.cs-hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem);margin:.2em 0 .35em;text-wrap:balance}
.cs-hero p.lead{font-size:1.12rem;color:var(--ink-soft);text-wrap:pretty}

/* client profile card, fills the hero's right column */
.client-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.client-card img.logo-mark{height:42px;width:auto;margin:0}
.client-card .cc-line{font-size:.9rem;color:var(--ink-soft);line-height:1.5;padding-top:16px;border-top:1px solid var(--line);width:100%}
.client-card .cc-visit{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--moss);display:inline-flex;align-items:center;gap:.4em}
.client-card .cc-visit:hover{color:var(--pine)}

/* at-a-glance facts under the hero: even columns with dividers */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.facts .f{display:flex;flex-direction:column;gap:3px;padding:0 24px;border-left:1px solid var(--line)}
.facts .f:first-child{padding-left:0;border-left:0}
@media(max-width:560px){.facts{grid-template-columns:1fr 1fr;gap:20px 0}
  .facts .f{padding:0 20px}.facts .f:nth-child(odd){padding-left:0;border-left:0}}
.facts .f .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.facts .f .v{font-size:1rem;font-weight:600;color:var(--ink)}

/* ===== SECTION SHELL ===== */
/* Single column width for every section, so text, stat boxes and screenshots all
   line up on the same left and right edges. */
.cs-section{padding:38px 0}
.cs-section .wrap{max-width:var(--cw)}
.cs-section h2{font-size:clamp(1.6rem,3.2vw,2.15rem);margin-bottom:.35em;text-wrap:balance}
.cs-section .sec-lead{font-size:1.06rem;color:var(--ink-soft);margin-bottom:1.5em;text-wrap:pretty}
.cs-section .eyebrow{margin-bottom:1.1em}

/* ===== HEADLINE METRIC CHIPS ===== */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:34px 0 8px}
@media(max-width:860px){.metric-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.metric-row{grid-template-columns:1fr}}
.metric{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.metric:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--moss)}
.metric .big{font-family:var(--serif);font-size:2.35rem;font-weight:600;line-height:1;color:var(--pine);letter-spacing:-.02em}
.metric .lab{margin-top:.5em;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.metric .from{margin-top:.7em;font-family:var(--mono);font-size:.72rem;color:var(--sage)}
.metric .from b{color:var(--moss)}

/* ===== BEFORE / AFTER COMPARE ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 6px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare figure{margin:0;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.compare figure .badge{display:flex;align-items:center;gap:.6em;padding:14px 18px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--line)}
.compare figure.before .badge{color:var(--sage)}
.compare figure.after .badge{color:var(--moss)}
.compare figure .badge .d{width:8px;height:8px;border-radius:50%}
.compare figure.before .badge .d{background:var(--sage)}
.compare figure.after .badge .d{background:var(--moss)}
.compare figure img{display:block;width:100%;height:auto;border-top:0}
.compare figure figcaption{padding:14px 18px;font-size:.9rem;color:var(--ink-soft);border-top:1px solid var(--line)}
.compare figure figcaption b{color:var(--ink)}

/* small note under wide media */
.media-note{font-family:var(--mono);font-size:.72rem;color:var(--sage);margin-top:14px;text-align:center}

/* ===== PAIN LIST (what hurt on WordPress) ===== */
.pain-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media(max-width:680px){.pain-list{grid-template-columns:1fr}}
.pain{display:flex;gap:14px;background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:14px;padding:20px 22px;box-shadow:var(--shadow)}
.pain .ic{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(200,152,58,.14);color:var(--gold);
  display:grid;place-items:center;margin-top:2px}
.pain h3{font-size:1.08rem;margin-bottom:.25em;color:var(--ink);font-family:var(--serif);font-weight:600}
.pain p{font-size:.94rem;color:var(--ink-soft);line-height:1.55}

/* ===== MIGRATION TIMELINE ===== */
.timeline{margin-top:26px;border-left:2px solid var(--line);padding-left:0}
.timeline .step{position:relative;padding:0 0 26px 34px}
.timeline .step:last-child{padding-bottom:0}
.timeline .step::before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:2px solid var(--moss)}
.timeline .step h3{font-size:1.1rem;color:var(--ink);margin-bottom:.2em;font-family:var(--serif);font-weight:600}
.timeline .step .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.35em}
.timeline .step p{font-size:.96rem;color:var(--ink-soft);line-height:1.6}

/* ===== BIG PULL QUOTE ===== */
/* Kept intentionally light so it reads as a testimonial, not another dark CTA. */
.cs-quote{margin:8px 0;border-radius:18px;color:var(--ink);padding:30px 34px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(46,94,78,.09),rgba(200,152,58,.06));
  border:1px solid var(--line);box-shadow:var(--shadow)}
.cs-quote .mark{font-family:var(--serif);font-size:3.2rem;line-height:.6;color:var(--gold);opacity:.5;height:.42em;display:block}
/* full card width, a touch smaller than before */
.cs-quote blockquote{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.42;font-weight:500;
  color:var(--ink);margin:.1em 0 1.1em;text-wrap:pretty}
.cs-quote blockquote em{color:var(--moss);font-style:italic}
.cs-quote .who{display:flex;align-items:center;gap:14px}
.cs-quote .who .av{width:56px;height:56px;border-radius:50%;background:var(--pine);color:var(--gold-soft);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.2rem;flex:none;
  object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.cs-quote .who b{display:block;color:var(--ink);font-size:1rem}
.cs-quote .who span{display:block;color:var(--ink-soft);font-size:.9rem}

/* ===== RESULTS / SEO measurement window ===== */
.seo-pending{display:flex;gap:16px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);
  border-left:3px solid var(--moss);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);margin-top:8px}
.seo-pending .ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(46,94,78,.10);color:var(--moss);display:grid;place-items:center}
.seo-pending h3{font-size:1.08rem;color:var(--ink);margin-bottom:.25em;font-family:var(--serif);font-weight:600}
.seo-pending p{font-size:.95rem;color:var(--ink-soft);line-height:1.6}

/* placeholder frame for the Search Console screenshot to drop in later */
.shot-slot{margin-top:24px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--paper-2);
  min-height:300px;display:grid;place-items:center;text-align:center;padding:40px 24px}
.shot-slot .inner{max-width:34ch}
.shot-slot .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:.8em}
.shot-slot h3{font-size:1.15rem;color:var(--ink-soft);font-family:var(--serif);font-weight:600;margin-bottom:.4em}
.shot-slot p{font-size:.9rem;color:var(--sage)}

/* ===== INDEX GRID (list of case studies) ===== */
.cs-index-hero{padding:70px 0 20px;position:relative;overflow:hidden}
.cs-index-hero .glow{position:absolute;width:620px;height:620px;top:-280px;right:-160px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(46,94,78,.18),transparent 62%)}
.cs-index-hero .wrap{position:relative;z-index:2}
.cs-index-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:.4em 0 .35em;max-width:16ch;text-wrap:balance}
.cs-index-hero p.lead{font-size:1.15rem;color:var(--ink-soft);max-width:48ch;text-wrap:pretty}
.cs-card-metrics{display:flex;gap:18px;margin:2px 0 16px;flex-wrap:wrap}
.cs-card-metrics span{font-family:var(--mono);font-size:.78rem;color:var(--moss)}
.cs-card-metrics span b{color:var(--pine)}