/* Simples — services overview
   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. */

.sec2-l{display:flex;flex-direction:column;gap:16px}@media (min-width:1200px){.sec2-l{gap:20px}}
/* services */
.sv-hero{padding-top:var(--pad-y);padding-bottom:calc(var(--pad-y)*.75);display:flex;flex-direction:column;gap:24px;animation:fadeUp var(--t-base) ease both}
.sv-hero .top{display:flex;justify-content:space-between;align-items:center}
.sv-hero h1{font-size:36px;font-weight:300;line-height:1.3;letter-spacing:0.03em}
.sv-hero p{color:var(--grey-60);max-width:640px}
@media (min-width:768px){.sv-hero{gap:32px}.sv-hero h1{font-size:44px}.sv-hero p{font-size:17px}.sv-hero h1 br{display:none}}
@media (min-width:1200px){.sv-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.sv-hero .top{grid-column:span 4;flex-direction:column;align-items:flex-start;justify-content:space-between}.sv-hero .body{grid-column:5/span 8;display:flex;flex-direction:column;gap:40px}.sv-hero h1{font-size:56px}}
.sv-hero .body{display:contents}@media (min-width:1200px){.sv-hero .body{display:flex}}
.svc{padding:48px 0;display:flex;flex-direction:column;gap:16px}
.svc h2{font-size:24px}
.svc .pos{font-size:17px;line-height:1.7;padding-bottom:8px}
.svc .kv{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--hairline)}
.svc .more{padding-top:20px;border-top:1px solid var(--hairline)}
@media (min-width:768px){.svc{padding:64px 0;gap:24px}.svc h2{font-size:28px}.svc .pos{font-size:18px;padding-bottom:16px}.svc .kv{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:20px 0}.svc .kv .label{padding-top:6px}.svc .more{padding-top:24px}}
@media (min-width:1200px){
  .svc{padding:96px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
  .svc .svc-l{grid-column:span 4;align-self:start;position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
  .svc .svc-r{grid-column:5/span 8;display:flex;flex-direction:column;max-width:720px}
  .svc h2{font-size:32px}.svc .pos{font-size:20px;padding-bottom:40px}
  .svc .kv{grid-template-columns:120px 1fr;gap:24px;padding:24px 0}.svc .more{padding-top:32px}
}
.svc-l,.svc-r{display:contents}@media (min-width:1200px){.svc-l,.svc-r{display:flex}}
.models{display:flex;flex-direction:column;border-bottom:1px solid var(--hairline)}
.model{border-top:1px solid var(--hairline);padding:20px 0;display:flex;flex-direction:column;gap:10px}
.model .hd{display:flex;justify-content:space-between;align-items:baseline}
.model .t{font-size:20px;line-height:1.3;letter-spacing:0.02em}
.model p{color:var(--grey-60)}
@media (min-width:768px){.model{padding:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}.model .hd{flex-direction:column;align-items:flex-start;gap:6px}.model .t{font-size:22px}}
@media (min-width:1200px){
  .models{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-bottom:0}
  .model{border-top:1px solid var(--black);padding:24px 32px 0 0;display:flex;flex-direction:column;gap:20px}
  .model .hd{flex-direction:row;align-items:baseline;justify-content:space-between}.model .t{font-size:24px}
}
.sv-cta{display:flex;flex-direction:column;gap:24px}
.sv-cta h2{font-size:32px}
@media (min-width:768px){.sv-cta{gap:28px}.sv-cta h2{font-size:40px}}
@media (min-width:1200px){.sv-cta{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.sv-cta>div{grid-column:5/span 8;display:flex;flex-direction:column;gap:32px}.sv-cta h2{font-size:48px}}
.sv-cta .cta-signal{align-self:flex-start}

/* ---- engagement figures (2026-09-04) ------------------------------------
   Same three glyphs as everywhere else: square = your team, circle = Simples,
   triangle = result. The rhythm is the difference: retainer loops, growth
   loops and climbs, project plays once. Hover replays / speeds up. */
.models-key{display:flex;gap:20px;color:var(--grey-60)}
.models-key i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.models-key svg{width:8px;height:8px;fill:var(--black)}
.model-fig{width:160px;height:64px}
.model-fig svg{display:block;width:100%;height:100%;overflow:visible;fill:var(--black);stroke:var(--black);stroke-width:1}
.model-fig rect,.model-fig circle,.model-fig path,.model-fig line{vector-effect:non-scaling-stroke}
.model-fig .frame,.model-fig .base,.model-fig .pad,.model-fig .rise,.model-fig .flash{fill:none}
.model-fig .sq,.model-fig .ci,.model-fig .dot,.model-fig .tri path{stroke:none}
@media (min-width:768px){.model-fig{grid-column:1/-1}}
@media (min-width:1200px){.model-fig{margin-bottom:4px}}

/* 1 · retainer — we sit inside your box; three of us, steady monthly pulse */
.fig-retainer .frame{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms cubic-bezier(.2,.7,.2,1) 300ms,stroke var(--t-fast)}
.is-in .fig-retainer .frame{stroke-dashoffset:0}
.fig-retainer .dot{transform-box:fill-box;transform-origin:center;transition:fill var(--t-fast)}
.is-in .fig-retainer .dot{animation:fig-pulse 2400ms ease-in-out infinite}
.is-in .fig-retainer .d2{animation-delay:400ms}.is-in .fig-retainer .d3{animation-delay:800ms}
.model:hover .fig-retainer .frame{stroke:var(--signal)}
.model:hover .fig-retainer .dot{fill:var(--signal);animation-duration:1200ms}
@keyframes fig-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}

/* 2 · growth partner — your square + our circle on the same floor, result climbs */
.fig-growth .rise{stroke:var(--signal);stroke-dasharray:1;stroke-dashoffset:1}
.fig-growth .tri{transform:translate(-54px,30px);opacity:0;transition:none}
.is-in .fig-growth .rise{animation:fig-rise-line 3600ms cubic-bezier(.2,.7,.2,1) infinite}
.is-in .fig-growth .tri{animation:fig-rise-tri 3600ms cubic-bezier(.2,.7,.2,1) infinite}
.model:hover .fig-growth .rise,.model:hover .fig-growth .tri{animation-duration:1800ms}
.model:hover .fig-growth .tri path{fill:var(--signal)}
@keyframes fig-rise-line{0%{stroke-dashoffset:1}35%,80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fig-rise-tri{0%{transform:translate(-54px,30px);opacity:0}8%{opacity:1}45%,80%{transform:translate(0,0);opacity:1}92%,100%{transform:translate(0,0);opacity:0}}

/* 3 · project — one result, one landing; plays once, replays on hover */
.fig-project .pad{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms cubic-bezier(.2,.7,.2,1) 200ms}
.is-in .fig-project .pad{stroke-dashoffset:0}
.fig-project .tri{transform:translateY(-34px);opacity:0}
.is-in .fig-project .tri{animation:fig-drop 900ms cubic-bezier(.2,.7,.2,1) 700ms forwards}
.fig-project .flash{stroke:var(--signal);stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.is-in .fig-project .flash{animation:fig-flash 700ms cubic-bezier(.2,.7,.2,1) 1300ms forwards}
.model:hover .fig-project .tri{animation:fig-drop-again 700ms cubic-bezier(.2,.7,.2,1) forwards}
.model:hover .fig-project .flash{animation:fig-flash 600ms cubic-bezier(.2,.7,.2,1) 450ms forwards}
.model:hover .fig-project .tri path{fill:var(--signal)}
@keyframes fig-drop{0%{transform:translateY(-34px);opacity:0}20%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes fig-drop-again{0%{transform:translateY(-34px);opacity:0}20%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes fig-flash{0%{stroke-dashoffset:1;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .model-fig *{animation:none!important;transition:none!important}
  .fig-retainer .frame,.fig-project .pad{stroke-dashoffset:0}
  .fig-growth .rise{stroke-dashoffset:0}
  .fig-growth .tri,.fig-project .tri{transform:none;opacity:1}
}