/* ==========================================================================
   Codesaur — public marketing site ("Rustig & serieus" direction)
   Palette: warm paper + deep green + amber. Bricolage Grotesque + Hanken Grotesk.
   ========================================================================== */

:root{
  --paper:#F4F1EA;
  --ink:#16181A;
  --green:#245C43;
  --green-deep:#1C4735;
  --amber:#E0A03A;
  --line:#E4DECF;
  --card:#FBFAF6;
  --muted:#5C5F5A;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(22,24,26,.05), 0 8px 28px rgba(22,24,26,.06);
  --shadow-lg:0 2px 6px rgba(22,24,26,.06), 0 22px 60px rgba(22,24,26,.10);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;letter-spacing:-.02em;line-height:1.05;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber);border-radius:2px;display:inline-block}
.eyebrow.amber{color:var(--amber)}
.eyebrow.center{justify-content:center}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#F7F5EF;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* ---- Header ---- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(244,241,234,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--green);display:grid;place-items:center;color:var(--paper);flex:none}
.brand .mark svg{width:17px;height:17px}
.nav .links{display:flex;gap:26px;margin-left:auto}
.nav .links a{font-weight:600;font-size:15px;color:var(--muted);padding:6px 2px}
.nav .links a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-weight:700;font-size:15px;border-radius:11px;padding:11px 18px;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .18s ease;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.btn-primary{background:var(--green);color:#F7F5EF}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:#fff;border-color:#d7d0bf}
.nav .btn{margin-left:0}
.hamburger{display:none}

/* ---- Hero ---- */
.hero{padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,58px);font-weight:800;max-width:15ch}
.hero h1 .accent{color:var(--green)}
.hero .sub{margin-top:20px;font-size:19px;color:var(--muted);max-width:44ch}
.points{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;max-width:520px}
.point{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:15.5px;line-height:1.35}
.point .tick{flex:none;width:22px;height:22px;border-radius:7px;background:rgba(36,92,67,.12);color:var(--green);display:grid;place-items:center;margin-top:1px}
.point .tick svg{width:13px;height:13px}
.hero-cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-cta .note{font-size:13.5px;color:var(--muted)}

/* Fake screenshot (hero) */
.shot{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.shot .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#F2EFE7}
.shot .bar .dot{width:10px;height:10px;border-radius:50%;background:#D8D2C2}
.shot .bar .addr{margin-left:10px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.shot .body{padding:16px}
.mini-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mini-head .t{font-family:"Bricolage Grotesque";font-weight:700;font-size:15px}
.mini-pill{font-size:11px;font-weight:700;color:var(--green);background:rgba(36,92,67,.1);padding:4px 9px;border-radius:20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px}
.kpi .l{font-size:11px;color:var(--muted);font-weight:600}
.kpi .v{font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;margin-top:3px}
.kpi .v small{font-size:12px;color:var(--green);font-weight:700;margin-left:4px}
.bars{display:flex;align-items:flex-end;gap:8px;height:74px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px}
.bars span{flex:1;background:linear-gradient(var(--green),#3a7d5f);border-radius:5px 5px 3px 3px;opacity:.9}
.rows{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.rowln{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12.5px}
.rowln .nm{font-weight:600}
.tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.tag.ok{background:rgba(36,92,67,.12);color:var(--green)}
.tag.wait{background:rgba(224,160,58,.18);color:#9a6a12}

/* ---- Price gap ---- */
.pricegap{padding:22px 0 8px}
.pg-card{
  background:var(--ink);color:#EDEAE1;border-radius:22px;padding:40px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;box-shadow:var(--shadow-lg)
}
.pg-card h2{color:#fff;font-size:clamp(24px,3.2vw,32px);font-weight:700;max-width:16ch}
.pg-card .lead{margin-top:14px;color:#B9B6AC;font-size:16.5px;max-width:40ch}
.pg-compare{display:grid;gap:14px}
.pg-row{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px 18px}
.pg-row .lbl{font-size:13px;font-weight:600;color:#9C9A90;letter-spacing:.02em}
.pg-row .amt{font-family:"Bricolage Grotesque";font-weight:800;font-size:30px;margin-top:2px;line-height:1}
.pg-row.them .amt{color:#8b8880;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(224,160,58,.6)}
.pg-row.us{background:rgba(36,92,67,.28);border-color:rgba(58,125,95,.5)}
.pg-row.us .amt{color:#7FD3AB}
.pg-row .sub2{font-size:12.5px;color:#9C9A90;margin-top:4px}

/* ---- Section shell ---- */
section{scroll-margin-top:80px}
.sec-pad{padding:64px 0}
.sec-head{max-width:60ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-top:14px}
.sec-head p{margin-top:12px;color:var(--muted);font-size:18px}

/* ---- Project explorer ---- */
.tabs{
  display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.tab{
  flex:none;scroll-snap-align:start;
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-weight:700;font-size:14.5px;color:var(--muted);cursor:pointer;
  font-family:inherit;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
@media (prefers-reduced-motion:reduce){.tab{transition:none}}
.tab .idx{font-size:11.5px;font-weight:800;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#EAE5D7;color:var(--muted)}
.tab:hover{color:var(--ink);border-color:#d7d0bf}
.tab[aria-selected="true"]{background:var(--green);color:#F7F5EF;border-color:var(--green)}
.tab[aria-selected="true"] .idx{background:rgba(255,255,255,.22);color:#fff}

.panel-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-top:8px
}
.panel{display:grid;grid-template-columns:1.25fr 1fr}
.panel[hidden]{display:none}
.panel-shot{background:#EDEAE1;padding:26px;border-right:1px solid var(--line)}
.panel-info{padding:30px}
.panel-info .kicker{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.panel-info h3{font-size:26px;font-weight:800;margin-top:8px;max-width:18ch}
.datasheet{margin-top:22px;border-top:1px solid var(--line)}
.ds-row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.ds-row dt{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.ds-row dd{margin:0;font-size:15px;font-weight:500}
.ds-row.price dd{font-family:"Bricolage Grotesque";font-weight:800;font-size:22px;color:var(--green)}
.ds-row.price dd small{font-size:12.5px;color:var(--muted);font-weight:600;font-family:"Hanken Grotesk";margin-left:6px}
.tiers{display:flex;flex-direction:column;gap:8px}
.tier{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tier .tl{font-family:"Hanken Grotesk";font-size:13.5px;font-weight:600;color:var(--muted)}
.tier .tb{font-family:"Bricolage Grotesque";font-weight:800;font-size:17px;color:var(--green);white-space:nowrap}
.panel-cta{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--green);font-size:15.5px}
.link-arrow svg{width:16px;height:16px;transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.link-arrow svg{transition:none}}
.disclaimer{margin-top:18px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.disclaimer svg{width:15px;height:15px;flex:none;color:var(--amber)}

/* generic app screenshot chrome inside panel */
.app{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 10px 30px rgba(22,24,26,.10)}
.app-top{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);background:#F5F2EA}
.app-top .d{width:9px;height:9px;border-radius:50%;background:#D8D2C2}
.app-top .ttl{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.app-main{padding:15px}
.a-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a-h b{font-family:"Bricolage Grotesque";font-size:14px}
.a-btn{font-size:10.5px;font-weight:700;color:#fff;background:var(--green);padding:5px 10px;border-radius:7px}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.a-cell{background:#F7F5EF;border:1px solid var(--line);border-radius:9px;padding:10px}
.a-cell .cl{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.a-cell .cv{font-family:"Bricolage Grotesque";font-weight:800;font-size:17px;margin-top:3px}
.a-cell .cv.pos{color:var(--green)}
.a-cell .cv.neg{color:#B0563C}
.a-list{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.a-item{display:flex;align-items:center;justify-content:space-between;background:#F7F5EF;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px}
.a-item .l{display:flex;align-items:center;gap:8px;font-weight:600}
.a-swatch{width:8px;height:22px;border-radius:3px;background:var(--green)}
.a-swatch.am{background:var(--amber)}
.a-swatch.gy{background:#C7C0B0}
.mini-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.mini-tag.ok{background:rgba(36,92,67,.12);color:var(--green)}
.mini-tag.due{background:rgba(224,160,58,.2);color:#8a5f10}
.mini-tag.mut{background:#EAE5D7;color:var(--muted)}
/* shift-planning screenshot */
.trust{display:flex;gap:2px;height:8px;border-radius:5px;overflow:hidden;margin-top:11px}
.ts{border-radius:2px}
.ts.hi{background:var(--green)}
.ts.md{background:var(--amber)}
.ts.lo{background:#C7C0B0}
.trust-lg{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:10.5px;font-weight:600;color:var(--muted)}
.tdot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.tdot.hi{background:var(--green)}
.tdot.md{background:var(--amber)}
.tdot.lo{background:#C7C0B0}
.app.phone{max-width:196px;margin:0 auto}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}
.day{font-size:10px;font-weight:700;text-align:center;padding:7px 0;border-radius:7px;background:#F7F5EF;border:1px solid var(--line);color:var(--muted)}
.day.on{background:rgba(36,92,67,.12);color:var(--green);border-color:rgba(36,92,67,.25)}
.notif{display:flex;align-items:center;gap:9px;margin-top:11px;background:rgba(36,92,67,.08);border:1px solid rgba(36,92,67,.22);border-radius:9px;padding:9px 10px}
.notif .ic{flex:none;width:24px;height:24px;border-radius:7px;background:var(--green);color:#F7F5EF;display:grid;place-items:center}
.notif .ic svg{width:13px;height:13px}
.notif .tx{font-size:11.5px;font-weight:700}
.notif .tx small{display:block;font-weight:500;color:var(--muted);font-size:10px}
/* system-coupling schema screenshot */
.schema{background:#F7F5EF;border:1px solid var(--line);border-radius:11px;padding:12px 10px;margin-top:2px}
.schema svg{display:block;width:100%;height:auto}

/* transport-order screenshot */
.pipe{display:flex;align-items:center;gap:0;margin-bottom:13px}
.pnode{flex:none;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:20px;background:#EAE5D7;color:var(--muted);border:1px solid var(--line)}
.pnode.done{background:rgba(36,92,67,.12);color:var(--green);border-color:rgba(36,92,67,.25)}
.pnode.now{background:var(--green);color:#F7F5EF;border-color:var(--green)}
.pwire{flex:1;height:2px;min-width:10px;background:repeating-linear-gradient(90deg,#C7C0B0 0 5px,transparent 5px 9px)}
.pwire.done{background:var(--green);opacity:.5}
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.rpt{position:relative;background:#F7F5EF;border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.rpt .rlbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rpt .rplace{font-size:11.5px;font-weight:700}
.rpt .rflag{position:absolute;top:9px;right:10px;font-size:9px;font-weight:800;color:var(--green);background:rgba(36,92,67,.1);padding:1px 5px;border-radius:5px}
.rarrow{color:#B7AF9C;display:grid;place-items:center}
.rarrow svg{width:18px;height:18px}
.rarrow.sm svg{width:15px;height:15px}
.marge{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:2px}
.mcell{background:#F7F5EF;border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:1px}
.mcell.to{background:rgba(36,92,67,.08);border-color:rgba(36,92,67,.22)}
.mcell .ml{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mcell .mv{font-family:"Bricolage Grotesque";font-weight:800;font-size:17px}
.mcell .mv.pos{color:var(--green)}
.mcell small{font-size:10px;color:var(--muted);font-weight:600}
.shots2{display:flex;flex-direction:column;gap:14px}
.btable{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.brow{display:grid;grid-template-columns:1.3fr 1.5fr .6fr auto;gap:8px;align-items:center;padding:7px 10px;font-size:11px;background:#fff;border-top:1px solid var(--line)}
.brow:first-child{border-top:none}
.brow.bhead{background:#F5F2EA;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.brow .bk{font-weight:700}
.brow .brt{color:var(--muted);font-weight:600}
.brow .bm{font-family:"Bricolage Grotesque";font-weight:800;text-align:right}
.brow .bm.pos{color:var(--green)}
.brow .bm.neg{color:#B0563C}
.brow .mini-tag{justify-self:end}

/* tablet inspection screenshot */
.note-adm{display:flex;align-items:flex-start;gap:8px;background:rgba(224,160,58,.14);border:1px solid rgba(224,160,58,.4);border-radius:9px;padding:9px 11px;margin-bottom:12px;font-size:11px;font-weight:600;color:#8a5f10;line-height:1.35}
.note-adm .ic{flex:none;color:#c78a1f;margin-top:1px}
.note-adm .ic svg{width:15px;height:15px}
.chk{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ci{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:#F7F5EF;color:var(--muted)}
.ci::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ci.ok{color:var(--green);border-color:rgba(36,92,67,.25);background:rgba(36,92,67,.08)}
.ci.due{color:#8a5f10;border-color:rgba(224,160,58,.4);background:rgba(224,160,58,.16)}
.dmg{display:flex;align-items:center;gap:10px;margin-top:11px;background:#F7F5EF;border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.dmg-photo{flex:none;width:38px;height:38px;border-radius:7px;background:rgba(176,86,60,.12);color:#B0563C;border:1px solid rgba(176,86,60,.25);display:grid;place-items:center}
.dmg-photo svg{width:18px;height:18px}
.dmg-tx{flex:1;font-size:11.5px;font-weight:700}
.dmg-tx small{display:block;font-weight:500;color:var(--muted);font-size:10px}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .n{font-family:"Bricolage Grotesque";font-weight:800;font-size:15px;color:var(--paper);background:var(--green);width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.step h3{font-size:18px;font-weight:700;margin-top:16px}
.step p{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* ---- About ---- */
.about{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center}
.about-portrait{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#EDEAE1;aspect-ratio:4/5}
.about-portrait img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(26px,3.4vw,36px);font-weight:800}
.about .quote{font-family:"Bricolage Grotesque";font-weight:600;font-size:22px;color:var(--green);margin:16px 0;line-height:1.2}
.about p{color:var(--muted);font-size:16.5px;margin-top:12px;max-width:52ch}
.about .credo{font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;color:var(--green);margin-top:22px;line-height:1.2;max-width:none}
.sign{margin-top:20px;font-family:"Bricolage Grotesque";font-weight:700;font-size:20px;color:var(--ink)}
.sign small{display:block;font-family:"Hanken Grotesk";font-weight:600;font-size:13px;color:var(--muted);letter-spacing:.02em}

/* ---- Contact ---- */
.contact{text-align:center;max-width:640px;margin:0 auto}
.contact h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin-top:14px}
.contact p{margin-top:14px;color:var(--muted);font-size:18px}
.contact .row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Detail page (/werk/<slug>/) ---- */
.detail-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--green);margin-bottom:22px}
.detail-back:hover{color:var(--green-deep)}
.detail-head{max-width:60ch;margin-bottom:26px}
.detail-head h1{font-size:clamp(28px,4vw,44px);font-weight:800;margin-top:12px}
.detail .mockup-note{margin-top:12px;color:var(--muted);font-size:15px}
.detail-panel{margin-top:0}
.detail-cta{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.detail-cta p{font-family:"Bricolage Grotesque";font-weight:700;font-size:20px}

/* ---- Client link (real project) ---- */
.client-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-weight:700;font-size:15px;color:var(--green)}
.client-link svg{width:14px;height:14px}
.client-link:hover{color:var(--green-deep)}

/* ---- Case-study page (real project) ---- */
.case-head{max-width:64ch}
.case-head h1{font-size:clamp(28px,4vw,44px);font-weight:800;margin-top:12px}
.case-lead{margin-top:14px;color:var(--muted);font-size:18px;max-width:56ch}
.case-meta{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.case-meta .cm{font-size:14px;font-weight:700;color:var(--ink)}
.case-meta .client-link{margin-top:0}
.case .detail-panel{margin-top:28px}
.case-body{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:34px 48px}
.case-block.wide{grid-column:1 / -1}
.case-block h2{font-size:22px;font-weight:800;margin-bottom:10px}
.case-block p{color:var(--muted);font-size:16px;max-width:56ch}
.case-feats{margin-top:14px;display:flex;flex-direction:column;gap:12px;list-style:none}
.case-feats li{position:relative;padding-left:26px;color:var(--muted);font-size:15.5px;max-width:60ch}
.case-feats li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:4px;background:rgba(36,92,67,.16);border:1px solid rgba(36,92,67,.32)}
.case-feats li b{color:var(--ink);font-weight:700}

/* ---- Footer ---- */
footer.site{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .brand{color:var(--ink)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}

/* ---- Responsive ---- */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .pg-card{grid-template-columns:1fr;padding:30px;gap:26px}
  .panel{grid-template-columns:1fr}
  .panel-shot{border-right:none;border-bottom:1px solid var(--line)}
  .case-body{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:26px}
  .about-portrait{max-width:240px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav .links{display:none}
  .nav .btn.cta-desktop{display:none}
  .hamburger{display:inline-flex;margin-left:auto}
  .points{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ds-row{grid-template-columns:110px 1fr;gap:12px}
  .hero{padding:40px 0 24px}
  .sec-pad{padding:48px 0}
  .pg-card{padding:24px}
  .panel-info,.panel-shot{padding:22px}
}