@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/dm-sans.ttf") format("truetype"); }
:root { --ink:#17211e; --muted:#64706a; --line:#dfe4df; --lime:#d5f578; --green:#2f6654; --surface:#f6f8f4; --font:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); font-family:var(--font); line-height:1.55; background:white; } a { color:inherit; text-decoration:none; } .case-container { width:calc(100% - 112px); max-width:1280px; margin:auto; } .case-header { height:82px; border-bottom:1px solid var(--line); display:flex; align-items:center; } .case-nav { display:flex; align-items:center; justify-content:space-between; gap:28px; } .case-brand img { width:132px; display:block; } .case-back { display:inline-flex; gap:8px; align-items:center; font-size:13px; font-weight:600; } .case-back:hover { color:var(--green); } .case-hero { background:#0d1915; color:white; padding:82px 0 74px; } .case-eyebrow { display:flex; gap:9px; align-items:center; color:#d7e4da; font-size:11px; font-weight:600; letter-spacing:.04em; } .case-eyebrow b { color:var(--lime); } h1 { max-width:820px; margin:22px 0 20px; font-size:clamp(46px,6vw,82px); line-height:.98; font-weight:500; letter-spacing:-.04em; } .case-intro { max-width:610px; color:#d1dbd3; font-size:18px; } .case-stat { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #ffffff2c; margin-top:58px; } .case-stat div { min-height:125px; padding:24px 22px 0 0; border-right:1px solid #ffffff2c; } .case-stat div:not(:first-child) { padding-left:24px; } .case-stat div:last-child { border:0; } .case-stat strong { display:block; color:var(--lime); font-size:31px; font-weight:500; line-height:1.1; } .case-stat span { display:block; margin-top:8px; color:#cbd6ce; font-size:12px; } .case-section { padding:78px 0; } .case-section.alt { background:var(--surface); border-block:1px solid var(--line); } .case-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; } h2 { margin:0; font-size:38px; line-height:1.1; letter-spacing:-.02em; } .case-grid > p, .case-grid > div > p { margin:0; color:var(--muted); font-size:16px; } .case-list { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .case-list li { display:grid; grid-template-columns:54px 1fr; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); } .case-list b { color:var(--green); font-size:13px; } .case-list strong { display:block; font-size:16px; } .case-list span { color:var(--muted); font-size:14px; } .case-note { border-left:3px solid var(--lime); padding:22px 24px; background:#ecf2e8; } .case-note h3 { margin:0 0 8px; font-size:15px; } .case-note p { margin:0; color:#44564b; font-size:14px; } .case-cta { background:#17211e; color:white; padding:56px 0; } .case-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; } .case-cta h2 { font-size:30px; } .case-button { display:inline-flex; align-items:center; gap:11px; background:var(--lime); color:var(--ink); padding:14px 20px; border-radius:4px; font-size:14px; font-weight:600; white-space:nowrap; } .case-footer { padding:24px 0; color:var(--muted); font-size:11px; } .case-footer a { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px) { .case-container { width:calc(100% - 40px); } .case-header { height:70px; } .case-brand img { width:108px; } .case-hero { padding:56px 0 44px; } .case-intro { font-size:15px; } .case-stat { grid-template-columns:1fr; margin-top:34px; } .case-stat div, .case-stat div:not(:first-child) { min-height:0; padding:16px 0; border-right:0; border-bottom:1px solid #ffffff2c; } .case-stat div:last-child { border-bottom:0; } .case-section { padding:52px 0; } .case-grid { grid-template-columns:1fr; gap:28px; } h2 { font-size:30px; } .case-cta-inner { align-items:flex-start; flex-direction:column; } }