/* ============================================================
   case-study.css - layout for /projects/<slug>/ case studies.
   Loaded AFTER styles.css. Every color here is a var() token
   (--accent, --bg-2, --stroke ...), so the palette follows
   styles.css and renders in the brand purple automatically.
   ============================================================ */
.faq-body .faq-build{
  list-style: none;
  margin-top: .7rem;
  display: grid;
  gap: .55rem;
}
.faq-body .faq-build li{
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.5;
}
.faq-body .faq-build li::before{
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.faq-body .faq-build strong{ color: var(--text); font-weight: 600; }
.cs-compare{display:grid;gap:3.5rem;max-width:760px;margin:0 auto}
.cs-compare .work-card{width:100%}
.cs-tag{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.cs-rows{max-width:920px;margin:0 auto;border-top:1px solid var(--stroke)}
.cs-row{display:grid;grid-template-columns:64px 240px 1fr;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--stroke);align-items:baseline}
.cs-row .n{font-weight:700;color:var(--accent);font-size:1.05rem}
.cs-row h3{font-size:1.08rem;font-weight:600}
.cs-row p{color:var(--text-soft);font-size:.95rem;line-height:1.6}
@media(max-width:720px){
  .cs-row{grid-template-columns:44px 1fr}
  .cs-row p{grid-column:2}
}
.cs-page .section-lead{font-size:1.1rem;max-width:640px;line-height:1.65}
.cs-page .subpage-lead{font-size:1.18rem;line-height:1.7}
.cs-page .proc-points li{font-size:1.05rem;gap:.7rem}
.cs-page .proof-stat .lab{font-size:1rem}
.cs-page .cs-tag{font-size:.88rem}
.cs-page .cs-row{grid-template-columns:72px 260px 1fr}
.cs-page .cs-row h3{font-size:1.25rem}
.cs-page .cs-row p{font-size:1.05rem;line-height:1.7}
.cs-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;max-width:var(--container);margin:0 auto 5.5rem;position:relative}
.cs-feature:last-child{margin-bottom:0}
.cs-feature-media img{width:100%;height:auto;display:block;border-radius:28px;border-top-left-radius:90px;box-shadow:var(--shadow-soft);border:1px solid var(--stroke)}
.cs-feature.flip .cs-feature-media{order:2}
.cs-feature.flip .cs-feature-media img{border-top-left-radius:28px;border-top-right-radius:90px}
.cs-feature-body{position:relative;padding-top:1rem}
.cs-feature-num{position:absolute;top:-3.5rem;right:0;font-size:clamp(6rem,11vw,9.5rem);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:2px var(--stroke);pointer-events:none;user-select:none}
.cs-feature-body h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin:.4rem 0 1rem}
.cs-feature-body>p{font-size:1.1rem;line-height:1.75;color:var(--text-soft);max-width:560px}
.cs-feature-links{display:flex;gap:1.75rem;margin-top:1.5rem;align-items:center}
.cs-feature-links .back-link{margin-bottom:0;font-size:1rem}
@media(max-width:900px){
  .cs-feature{grid-template-columns:1fr;gap:1.75rem}
  .cs-feature.flip .cs-feature-media{order:0}
  .cs-feature-num{font-size:5rem;top:-2.4rem}
}
.cs-page .showcase-grid .work-card{text-align:center}
.cs-page .showcase-grid .work-card .cs-tag{margin-bottom:1rem}
.cs-feature.flip .cs-panel{border-top-left-radius:28px;border-top-right-radius:90px}
.cs-page .faq-body{font-size:1.05rem;line-height:1.7}
.cs-page .faq-body .faq-build{gap:.7rem;margin-top:.9rem}
.cs-page .faq-body .faq-build li{line-height:1.6;padding-left:1.35rem}
.cs-page .faq-body .faq-build li::before{top:.6em;width:6px;height:6px}
.cs-page .faq-item summary span{font-size:1.08rem}
.cs-page .subpage-lead{max-width:820px;font-size:1.2rem;line-height:1.65;color:var(--text)}
.cs-page .manifesto{max-width:1000px}
.cs-page .manifesto-text,.cs-page .manifesto-text strong,.cs-page .manifesto-text .soft{color:var(--text);font-weight:500}
.cs-page .section-lead{color:var(--text)}
.cs-page .cs-feature-body>p{color:var(--text)}
.cs-page .cs-row p{color:var(--text)}
.cs-page .faq-body{color:var(--text)}
.cs-page .cs-panel .proc-points li{color:var(--text)}
.cs-spec{max-width:920px;margin:0 auto;border-top:1px solid var(--stroke)}
.cs-spec-row{display:grid;grid-template-columns:230px 1fr;gap:1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--stroke)}
.cs-spec-row dt{font-size:.86rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.cs-spec-row dd{margin:0;font-size:1.05rem;color:var(--text);line-height:1.6}
@media(max-width:720px){
  .cs-spec-row{grid-template-columns:1fr;gap:.35rem}
}
.cs-vs{max-width:1000px;margin:0 auto;border:1px solid var(--stroke);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2)}
.cs-vs-row{display:grid;grid-template-columns:1.05fr 1fr 1fr;border-top:1px solid var(--stroke)}
.cs-vs-row:first-child{border-top:0}
.cs-vs-row.head{background:var(--bg-3)}
.cs-vs-crit{padding:1rem 1.25rem;font-weight:600;font-size:1rem;color:var(--text)}
.cs-vs-cell{padding:1rem 1.25rem;font-size:1rem;color:var(--text-soft);line-height:1.55}
.cs-vs-cell.after{background:var(--accent-pale);color:var(--text);font-weight:500}
.cs-vs-row.head .cs-vs-crit,.cs-vs-row.head .cs-vs-cell{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-mute);background:none}
.cs-vs-row.head .cs-vs-cell.after{color:var(--accent)}
@media(max-width:720px){
  .cs-vs-row{grid-template-columns:1fr}
  .cs-vs-row.head{display:none}
  .cs-vs-crit{padding:1rem 1.1rem .3rem;font-size:1.05rem}
  .cs-vs-cell{padding:.3rem 1.1rem}
  .cs-vs-cell:last-child{padding-bottom:1rem}
  .cs-vs-cell.after{background:transparent}
  .cs-vs-cell.before::before{content:"Before: ";font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-right:.35rem}
  .cs-vs-cell.after::before{content:"After: ";font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-right:.35rem}
}
.cs-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem;max-width:1000px;margin:0 auto}
@media(max-width:820px){
  .cs-groups{grid-template-columns:1fr;gap:2rem}
}
.cs-group h4{font-size:1.12rem;font-weight:600;color:var(--text);margin-bottom:.35rem}
.cs-group>p{font-size:1rem;color:var(--text-soft);line-height:1.6}
.cs-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 4rem;max-width:var(--container);margin:0 auto}
.cs-flow-item{position:relative;background:var(--bg-2);border:1px solid var(--stroke);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.75rem;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.cs-flow-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.cs-flow-num{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-pale);color:var(--accent);font-weight:700;font-size:1.05rem;margin-bottom:.9rem}
.cs-flow-item h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
.cs-flow-item p{font-size:1rem;color:var(--text-soft);line-height:1.6}
.cs-flow-item.c3{grid-column:3}
.cs-flow-item.c2{grid-column:2}
.cs-flow-item.c1{grid-column:1}
.cs-flow-item::after{position:absolute;color:var(--accent);font-size:1.7rem;line-height:1;pointer-events:none}
.cs-flow-item.a-right::after{content:"\2192";right:-2.7rem;top:50%;transform:translateY(-50%)}
.cs-flow-item.a-left::after{content:"\2190";left:-2.7rem;top:50%;transform:translateY(-50%)}
.cs-flow-item.a-down::after{content:"\2193";bottom:-2.3rem;left:50%;transform:translateX(-50%)}
@media(max-width:900px){
  .cs-flow{grid-template-columns:1fr;gap:2.6rem}
  .cs-flow-item.c1,.cs-flow-item.c2,.cs-flow-item.c3{grid-column:1}
  .cs-flow-item::after{content:"\2193" !important;left:50%;right:auto;top:auto;bottom:-1.95rem;transform:translateX(-50%)}
  .cs-flow-item:last-child::after{content:none !important}
}
.cs-icon-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:2.25rem 3rem;max-width:1060px;margin:0 auto}
.cs-icon-row{display:grid;grid-template-columns:48px 1fr;gap:1.1rem;align-items:start}
.cs-icon-row .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-pale);color:var(--accent)}
.cs-icon-row .ico [data-lucide]{width:22px;height:22px;stroke-width:1.8}
.cs-icon-row h4{font-size:1.12rem;font-weight:600;margin-bottom:.3rem}
.cs-icon-row p{font-size:1rem;color:var(--text-soft);line-height:1.6}
@media(max-width:820px){
  .cs-icon-rows{grid-template-columns:1fr}
}
.cs-spec-row dt{display:flex;align-items:center;gap:.6rem}
.cs-spec-row dt [data-lucide]{width:16px;height:16px;color:var(--accent);flex:none}
.cs-page .value-grid.two{grid-template-columns:repeat(2,1fr)}
.cs-page .value-card p{font-size:1rem;color:var(--text-soft)}
@media(max-width:820px){
  .cs-page .value-grid,.cs-page .value-grid.two{grid-template-columns:1fr}
}
.cs-flow-item.r2{grid-row:2}
.cs-flow-item.r3{grid-row:3}
@media(max-width:900px){
  .cs-flow-item.r2,.cs-flow-item.r3{grid-row:auto}
}
.cs-dec{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 2.75rem;max-width:1060px;margin:0 auto}
.cs-dec-item{border-left:3px solid var(--accent);padding:.15rem 0 .15rem 1.4rem}
.cs-dec-item h4{font-size:1.15rem;font-weight:600;margin-bottom:.45rem;line-height:1.35}
.cs-dec-item p{font-size:1rem;color:var(--text-soft);line-height:1.65}
@media(max-width:820px){
  .cs-dec{grid-template-columns:1fr;gap:1.6rem}
}
.cs-note{margin-top:1.3rem;padding-left:.95rem;border-left:2px solid var(--accent);font-size:1rem;font-weight:600;color:var(--text);line-height:1.5}
.cs-vsnote{max-width:1000px;margin:1.1rem auto 0;font-size:.92rem;color:var(--text-mute);line-height:1.6}
@media (max-width: 720px){
  .cs-page .subpage-hero{padding:5.5rem var(--pad) 2.25rem}
  .cs-page .subpage-title{font-size:clamp(1.95rem,9vw,2.5rem);line-height:1.08}
  .cs-page .subpage-lead{font-size:1.02rem;line-height:1.6}
  .cs-page .display-title{font-size:clamp(1.7rem,7.4vw,2.2rem);line-height:1.12}
  .cs-page .section{padding:3rem 1.25rem}
  .cs-page .section.narrow{padding:2.5rem 1.25rem}
  .cs-page .section-head{margin-bottom:2rem}
  .cs-page .section-lead{font-size:1rem}
  .cs-page .stats-section{padding:2.75rem 1.25rem}
  .cs-page .stats-strip{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .cs-page .stat{text-align:center}
  .cs-page .stat strong{font-size:clamp(1.9rem,9vw,2.4rem)}
  .cs-page .stat strong::after{left:50%;transform:translateX(-50%)}
  .cs-page .stat span{font-size:.72rem;letter-spacing:.1em;margin-top:1rem}
  .cs-page .manifesto-text{font-size:clamp(1.25rem,5.6vw,1.6rem);line-height:1.35}
  .cs-page .proof-statbar{gap:1.5rem 1rem}
  .cs-page .proof-stat{min-width:28%}
  .cs-page .proof-stat strong{font-size:clamp(1.7rem,8vw,2.2rem)}
  .cs-page .cs-panel{padding:1.5rem;border-top-left-radius:52px}
  .cs-page .cs-feature.flip .cs-panel{border-top-left-radius:52px;border-top-right-radius:28px}
  .cs-page .cs-feature{margin-bottom:3rem}
  .cs-page .cs-feature-media img{border-top-left-radius:56px}
  .cs-page .cs-feature.flip .cs-feature-media img{border-top-left-radius:28px;border-top-right-radius:56px}
  .cs-page .cs-feature-num{font-size:4rem;top:-1.9rem;opacity:.85}
  .cs-page .cs-feature-body h3{font-size:1.4rem}
  .cs-page .cs-feature-body>p{font-size:1.02rem}
  .cs-page .cs-dec-item h4{font-size:1.08rem}
  .cs-page .cs-dec-item p{font-size:.98rem}
  .cs-page .cs-spec-row{padding:.95rem 0}
  .cs-page .cs-spec-row dd{font-size:1rem}
  .cs-page .cs-vs-crit{font-size:1rem;font-weight:700}
  .cs-page .cs-vs-cell{font-size:.98rem}
  .cs-page .faq-item summary{padding:1.1rem 1.25rem}
  .cs-page .faq-body{padding:0 1.25rem 1.2rem;font-size:1rem}
  .cs-page .cs-flow-item{padding:1.4rem}
  .cs-page .back-link{min-height:44px;align-items:center}
  .cs-page .cs-feature-links .back-link{min-height:44px}
  .cs-page .footer-col a,.cs-page .footer-bottom a,.cs-page .to-top{display:inline-flex;align-items:center;min-height:44px}
  .cs-page .footer-col ul{gap:0}
}
@media (max-width: 400px){
  .cs-page .cs-vs-crit{padding:.9rem 1rem .25rem}
  .cs-page .cs-vs-cell{padding:.25rem 1rem}
  .cs-page .cs-icon-row{grid-template-columns:42px 1fr;gap:.9rem}
  .cs-page .cs-icon-row .ico{width:42px;height:42px}
}
@media (max-width: 720px){
  .cs-page .logo{min-height:44px}
  .cs-page .menu-btn{min-width:44px;min-height:44px}
  .cs-page .btn-talk{min-height:44px}
  .cs-page .footer a{display:inline-flex;align-items:center;min-height:44px}
  .cs-page .footer-brand .footer-bio{margin-top:.25rem}
}
.cs-page .subpage-hero .back-link{display:flex;justify-content:center;width:100%;margin-bottom:1.25rem}
.cs-page .subpage-hero .cs-tag{display:block;margin-bottom:.75rem}
@media (max-width: 720px){
  .proc-points li,.faq-build li,.contact-list li,.footer-col a,.overlay-links a{font-size:.95rem}
}
.cs-compare .work-card .cs-tag{margin-bottom:0;margin-top:1.15rem}
/* ============================================================
   Shell bits that normally live in landing.css, which these
   pages do not load. Without the .no-js rule every .reveal
   element stays at opacity:0 and the page renders blank when
   JavaScript is unavailable.
   ============================================================ */
.no-js .reveal { opacity: 1 !important; transform: none !important; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--text); color: var(--bg-2); padding: .75rem 1.15rem; border-radius: 0 0 var(--radius) 0; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: inherit; }