/* G1-08 Batch B: page-owned CSS extracted from canonical projects/graese/index.html. Production Shared Header/Footer remain separately owned. */
:root{--ink:#0a0c0f;--muted:#666d76;--line:#dfe3e7;--soft:#f6f7f8;
  --navy:#0d3977;--dark:#0d1117;--max:1160px;}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;width:100%}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.kicker,.eyebrow{margin:0 0 13px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.eyebrow{color:#8b725f}
.kicker{color:#858c95}
.hero{padding:88px 0 82px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.75fr);gap:72px;align-items:end}
.hero h1{margin:0 0 22px;font-size:clamp(50px,5.4vw,76px);line-height:.99;letter-spacing:-.055em}
.hero p{max-width:760px;margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.hero-proof{border-top:1px solid var(--line);padding-top:21px}
.hero-proof strong{display:block;margin-bottom:8px;font-size:18px}
.hero-proof span{display:block;color:#737b85;font-size:13px;line-height:1.6}
.section{padding:92px 0;border-top:1px solid var(--line)}
.soft{background:var(--soft)}
.section-head{max-width:820px;margin-bottom:42px}
.section-head h2{margin:0 0 14px;font-size:clamp(38px,4vw,56px);line-height:1.03;letter-spacing:-.05em}
.section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.68}
.path{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.path div{padding:22px 18px 24px 0;font-size:13px;font-weight:700}
.path div+div{padding-left:18px;border-left:1px solid var(--line)}
.path small{display:block;margin-top:8px;color:#858c95;font-size:10px;font-weight:500;line-height:1.5}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.evidence-label{display:flex;justify-content:space-between;gap:18px;margin-bottom:11px;color:#7b828b;font-size:10px}
.evidence-label strong{color:#12161a;font-size:12px}
.shot{border:1px solid var(--line);background:#fff}
.shot img{width:100%;height:auto}
.caption{margin:10px 0 0;color:#747c86;font-size:11px;line-height:1.55}
.change-stack{border-top:1px solid var(--line)}
.change-row{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,.82fr) 48px minmax(0,1.46fr);gap:26px;align-items:start;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.change-area{padding-top:21px;color:#20242a;font-size:13px;line-height:1.45;font-weight:760}
.change-before,.change-after{position:relative;padding-top:21px;line-height:1.58}
.change-before{color:#747b85;font-size:14px}
.change-after{color:#191d23;font-size:18px;font-weight:700;letter-spacing:-.01em}
.change-before::before,.change-after::before{position:absolute;top:0;left:0;font-size:8px;line-height:1;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#9aa0a8}
.change-before::before{content:"Before"}
.change-after::before{content:"Buyer-ready structure"}
.change-arrow{align-self:center;position:relative;height:1px;background:#c7ccd2;margin-top:30px}
.change-arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid #6f61ff;border-right:1px solid #6f61ff;transform:translateY(-50%) rotate(45deg)}
.bottomline h2{max-width:850px;margin:0 0 18px;font-size:clamp(42px,4.4vw,62px);line-height:1;letter-spacing:-.052em}
.bottomline p{max-width:800px;margin:0;color:#515861;font-size:17px;line-height:1.67}
.case-cta{padding:88px 0 94px;background:var(--dark);color:#fff}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:72px;align-items:end}
.case-cta h2{margin:0 0 16px;font-size:clamp(42px,4.4vw,62px);line-height:1;letter-spacing:-.052em}
.case-cta p{margin:0;color:#aab2bc;font-size:15px;line-height:1.65}
.cta-side{border-top:1px solid rgba(255,255,255,.13);padding-top:22px}
.cta-side .fit-note{margin:0 0 20px;color:#8f98a4;font-size:12px;line-height:1.62}
.button{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:13px 15px;background:#5b39ff;font-size:11px;font-weight:800}
@media (max-width:900px){.wrap{width:min(100% - 36px,var(--max))}
.hero{padding-top:58px}
.hero-grid,.compare,.cta-grid{grid-template-columns:1fr}
.hero-grid{gap:38px}
.path{grid-template-columns:1fr 1fr 1fr}
.path div:nth-child(4){border-left:0}
.change-row{grid-template-columns:130px minmax(0,.88fr) 38px minmax(0,1.28fr);gap:18px}
.cta-side{border-top:1px solid rgba(255,255,255,.13);padding:22px 0 0}
.section{padding:70px 0}}
@media (max-width:560px){.wrap{width:calc(100% - 28px)}
.hero h1{font-size:43px}
.path{grid-template-columns:1fr}
.path div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
.change-row{grid-template-columns:1fr;gap:12px;padding:24px 0 26px}
.change-area{padding-top:0}
.change-before,.change-after{padding-top:19px}
.change-arrow{width:26px;margin:2px 0 0}
.section-head h2,.bottomline h2,.case-cta h2{font-size:38px}}
/* =========================================================
   GRAESE V3 — final brand calibration
   Scope: Header / container / brand color / rhythm & typography only.
   Content, section order, evidence structure and frozen P0 blocks unchanged.
   ========================================================= */
:root{--bg:#f6f6f4;
  --paper:#fff;
  --soft:#f3f4f5;
  --ink:#0b0b0d;
  --muted:#646872;
  --line:#dcdde1;
  --violet:#5a46f6;
  --dark:#0b0c0f;
  --max:1380px;}
body{background:var(--paper);color:var(--ink)}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
/* Frozen Case Study Header */
/* Current brand signals */
.kicker,.eyebrow{margin:0 0 14px;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;}
.eyebrow{color:var(--violet)}
.kicker{color:#81858d}
/* Hero stays editorial; only calibrated to the current case system */
.hero{padding:82px 0 88px;background:#f8f8f6}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(380px,.75fr);
  gap:86px;
  align-items:end;}
.hero h1{max-width:980px;
  margin:0 0 24px;
  font-size:clamp(54px,5vw,78px);
  line-height:.99;
  letter-spacing:-.058em;
  font-weight:760;}
.hero p{max-width:760px;
  color:var(--muted);
  font-size:17px;
  line-height:1.68;}
.hero-proof{border-top:1px solid var(--line);
  padding-top:22px;
  max-width:430px;
  justify-self:end;}
.hero-proof strong{color:#272a30;
  font-size:17px;
  font-weight:720;}
.hero-proof span{color:#717781;
  font-size:13px;
  line-height:1.62;}
/* Shared section rhythm / typography */
.section{padding:96px 0;border-top:1px solid var(--line)}
.soft{background:var(--soft)}
.section-head{max-width:880px;margin-bottom:44px}
.section-head h2{margin:0 0 15px;
  max-width:840px;
  font-size:clamp(42px,4.3vw,62px);
  line-height:1.03;
  letter-spacing:-.052em;
  font-weight:750;}
.section-head p{max-width:720px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;}
.path{border-color:var(--line)}
.path div{padding-top:24px;padding-bottom:26px;color:#20242a}
.path div+div{border-color:var(--line)}
.path small{color:#858c95;line-height:1.55}
.compare{gap:38px}
.evidence-label{margin-bottom:12px;color:#7f828a}
.evidence-label strong{color:#25282e;font-size:12px;font-weight:760}
.shot{border-color:var(--line);background:#fff;overflow:visible}
/* Never upscale case evidence images. Scale down only when needed. */
.shot img{width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;}
.caption{color:#777e88;font-size:11.5px;line-height:1.58}
/* Frozen What Changed structure — brand-calibration only */
.change-stack{border-color:var(--line)}
.change-row{padding:30px 0 32px;border-color:var(--line)}
.change-area{color:#20242a}
.change-before{color:#747b85}
.change-after{color:#191d23;font-weight:710}
.change-before::before,.change-after::before{color:#969da7}
.change-arrow{background:#c7ccd2}
.change-arrow::after{border-color:var(--violet)}
.bottomline{background:var(--bg)}
.bottomline h2{max-width:940px;
  font-size:clamp(46px,4.5vw,66px);
  line-height:1.01;
  letter-spacing:-.054em;
  font-weight:755;}
.bottomline p{max-width:820px;color:#515861;font-size:17px;line-height:1.68}
/* Frozen CTA structure — current case colors and spacing only */
.case-cta{padding:94px 0 100px;background:var(--dark);color:#fff}
.cta-grid{gap:72px}
.case-cta .kicker{color:#aaa1ff}
.case-cta h2{max-width:920px;
  font-size:clamp(44px,4.4vw,64px);
  line-height:1.01;
  letter-spacing:-.052em;
  font-weight:745;}
.case-cta>div>div>p:not(.kicker),.case-cta p{color:#aab2bc;line-height:1.66}
.cta-side{border-top-color:rgba(255,255,255,.11);padding-top:22px}
.cta-side .fit-note{color:#8f98a4}
.button{min-height:52px;
  padding:0 16px;
  border-radius:6px;
  background:linear-gradient(135deg,#533bff,#654fff);
  color:#fff;
  font-size:12px;
  font-weight:760;}
@media (max-width:1040px){.wrap{width:min(100% - 48px,var(--max))}
.hero-grid,.cta-grid{grid-template-columns:1fr}
.hero-grid{gap:38px}
.hero-proof{justify-self:start;max-width:640px}
.compare{gap:26px}}
@media (max-width:900px){.wrap{width:min(100% - 36px,var(--max))}
.hero{padding:64px 0 72px}
.section{padding:78px 0}}
@media (max-width:560px){.wrap{width:calc(100% - 28px)}
.hero{padding:54px 0 66px}
.hero h1{font-size:43px}
.hero p{font-size:16px}
.hero-proof{padding-top:18px}
.section{padding:72px 0 76px}
.section-head{margin-bottom:34px}
.section-head h2,.bottomline h2,.case-cta h2{font-size:38px}
.compare{grid-template-columns:1fr;gap:30px}
.change-row{padding:24px 0 26px}
.case-cta{padding:72px 0 78px}}
/* Final QA P1 — keep supporting-case metadata quiet on mobile */
@media (max-width:560px){.hero .eyebrow{font-size:9px;
    line-height:1.4;
    letter-spacing:.11em;}}
/* Final QA P1 — restore frozen kicker/eyebrow hierarchy after paragraph-rule overrides */
.hero .eyebrow,.section-head .kicker,.bottomline .kicker,.case-cta .kicker{margin:0 0 14px;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;}
.hero .eyebrow{color:var(--violet)}
.section-head .kicker,.bottomline .kicker{color:#81858d}
.case-cta .kicker{color:#aaa1ff}
@media (max-width:560px){.hero .eyebrow{font-size:9px;
    line-height:1.4;
    letter-spacing:.11em;}}