/* Simples — work index + case detail pages
   Converted 1:1 from the Claude Design handoff (design_handoff_simples_site/html/).
   Values are final: do not re-tune colours, sizes, spacing or motion timings. */

/* work */
.sp-hero{padding-top:var(--pad-y);padding-bottom:48px;display:flex;flex-direction:column;gap:24px;animation:fadeUp var(--t-base) ease both}
.sp-hero .top{display:flex;justify-content:space-between;align-items:center}
.sp-hero h1{font-size:34px;font-weight:300;line-height:1.3;letter-spacing:0.03em}
.sp-hero p{color:var(--grey-60);max-width:640px}
.sp-hero .lead{color:var(--black);font-size:20px;line-height:1.5}
@media (min-width:768px){.sp-hero{gap:28px;padding-bottom:64px}.sp-hero h1{font-size:44px}.sp-hero p{font-size:17px}.sp-hero .lead{font-size:22px}}
@media (min-width:1200px){.sp-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-bottom:120px}.sp-hero .top{grid-column:span 4;flex-direction:column;align-items:flex-start;justify-content:space-between}.sp-hero .body{grid-column:5/span 8;display:flex;flex-direction:column;gap:32px}.sp-hero h1{font-size:56px}.sp-hero .lead{font-size:24px}}
.sp-hero .body{display:contents}@media (min-width:1200px){.sp-hero .body{display:flex}}
.wk{padding-bottom:var(--pad-y);display:flex;flex-direction:column;gap:40px}
.totals{display:flex;flex-direction:column;gap:24px}
.tot{border-top:1px solid var(--black);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.tot b{font-family:var(--mono);font-weight:400;font-size:36px;line-height:1;letter-spacing:-0.02em}.tot span{font-size:13px;line-height:1.6;color:var(--grey-60)}
@media (min-width:768px){.wk{gap:48px}.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.tot b{font-size:40px}}
@media (min-width:1200px){.wk{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.totals{grid-column:span 3;display:flex;flex-direction:column;gap:40px;align-self:start;position:sticky;top:120px}.tot{padding-top:20px;gap:12px}.tot b{font-size:48px}.wk .rows{grid-column:5/span 8}}
.crow{display:grid;grid-template-columns:40px 1fr 20px;gap:6px 12px;align-items:baseline;padding:20px 0;border-top:1px solid var(--hairline)}
.crow .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em}
.crow .t{font-size:20px;line-height:1.3;letter-spacing:0.02em}
.crow .meta{grid-column:2;font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-60)}
.crow .d{grid-column:2;color:var(--grey-60)}
.crow .arr{text-align:right}
@media (min-width:768px){.crow{grid-template-columns:56px 1fr 24px;gap:8px 16px;padding:24px 0}.crow .t{font-size:22px}}
@media (min-width:1200px){.crow{grid-template-columns:56px 1fr 1fr 40px;gap:24px;padding:32px 0}.crow .head{display:flex;flex-direction:column;gap:6px}.crow .t{font-size:24px}.crow .meta{grid-column:auto}.crow .d{grid-column:auto;font-size:17px;line-height:1.7}}
.crow .head{display:contents}@media (min-width:1200px){.crow .head{display:flex}}
.stats3{display:flex;flex-direction:column;gap:24px}
.st{border-top:1px solid var(--black);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.st b{font-family:var(--mono);font-weight:400;font-size:40px;line-height:1;letter-spacing:-0.02em}.st span{font-size:13px;line-height:1.6;color:var(--grey-60)}
@media (min-width:768px){.stats3{display:grid;grid-template-columns:repeat(3,1fr)}.st b{font-size:44px}}
@media (min-width:1200px){.st{padding-top:24px;gap:20px}.st b{font-size:72px}}
.blk{padding:48px 0;display:flex;flex-direction:column;gap:20px}
.blk-h{display:flex;flex-direction:column;gap:10px}.blk-h h2{font-size:24px}
.blk-b{max-width:640px}.blk-b p{font-size:15px}
@media (min-width:768px){.blk{padding:64px 0;gap:24px}.blk-h{gap:12px}.blk-h h2{font-size:28px}.blk-b p{font-size:17px}}
@media (min-width:1200px){.blk{padding:96px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.blk-h{grid-column:span 4;gap:20px}.blk-b{grid-column:5/span 8}.blk-h h2{font-size:32px}}
.ap{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--hairline)}
.ap .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-60)}.ap span:last-child{font-size:15px;line-height:1.8}
@media (min-width:768px){.ap{grid-template-columns:40px 1fr;gap:16px;padding:16px 0}.ap span:last-child{font-size:17px}}
@media (min-width:1200px){.ap{grid-template-columns:56px 1fr;gap:24px;padding:20px 0}}
.used{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.used .link{font-size:16px}
@media (min-width:768px){.used{flex-direction:row;flex-wrap:wrap;gap:32px}.used .link{font-size:17px}}
@media (min-width:1200px){.used{gap:40px}}
.sp-cta{display:flex;flex-direction:column;gap:40px}
.sp-cta .main{display:flex;flex-direction:column;gap:20px}.sp-cta h2{font-size:30px}
.sp-cta .nxt{border-top:1px solid var(--black);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.sp-cta .nxt .t{font-size:20px;line-height:1.3;letter-spacing:0.02em}.sp-cta .nxt .d{font-size:13px;color:var(--grey-60)}
@media (min-width:768px){.sp-cta{gap:48px}.sp-cta .main{gap:24px}.sp-cta h2{font-size:40px}.sp-cta .nxt{padding-top:20px;gap:8px}.sp-cta .nxt .t{font-size:22px}}
@media (min-width:1200px){.sp-cta{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}.sp-cta .nxt{grid-column:span 4;order:-1;gap:12px;padding-top:24px}.sp-cta .nxt .t{font-size:24px}.sp-cta .main{grid-column:6/span 7;gap:28px}.sp-cta h2{font-size:48px}}
.sp-cta .cta-signal{align-self:flex-start}
.ctaonly{display:flex;flex-direction:column;gap:24px}
.ctaonly h2{font-size:30px}
@media (min-width:768px){.ctaonly{gap:28px}.ctaonly h2{font-size:40px}.ctaonly h2 br{display:none}}
@media (min-width:1200px){.ctaonly{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.ctaonly>div{grid-column:5/span 8;display:flex;flex-direction:column;gap:28px}.ctaonly h2{font-size:48px}.ctaonly h2 br{display:inline}}
.ctaonly .cta-signal{align-self:flex-start}