/* home.css — the home page only. Its distinguishing object (DESIGN-SYSTEM §6/home) is the
   stat strip. The draggable before/after slider was RETIRED 2026-09-01: a wipe slices the
   company watermark mid-word across the divider, and the pool has no watermark-free pair
   wide enough to fill it without upscaling. The proof section leads with a whole client
   composite instead (.pairs.one in site.css). */

/* ---- proof strip ---- */
.proofrow{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:space-between}
.stat b{font-family:var(--disp);font-size:2.1rem;font-weight:800;color:var(--teal-ink);
        display:block;line-height:1.1}
.stat span{font-size:.86rem;color:var(--ink-soft);display:block;max-width:16em;margin-top:4px}
.proofrow .clients{max-width:520px}
.proofrow .clients p{font-size:.94rem;color:var(--ink-soft);line-height:1.75}
.proofrow .clients p b{color:var(--teal-ink);font-weight:600}
.proofrow .foot{width:100%;font-size:.8rem;color:var(--ink-soft);opacity:.85;max-width:60em}

/* ---- services grid.  Column count is computed from the CHILD COUNT (6), never auto-fit:
   auto-fit picks columns from the WIDTH and orphans the last card at some viewport.
   6 children => 3x2 at desktop, 2x3 at tablet, 1x6 on a phone. No dead cells at any width. */
.svcgrid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
     display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.svc:hover{box-shadow:0 16px 40px rgba(11,61,56,.10);transform:translateY(-3px)}
/* 230px, not 186px. At 3 columns the card is 351px wide, so 186 gave a 1.89:1 strip -- and a
   side-by-side client composite cropped to 1.89 loses Chloey's BEFORE/AFTER lettering off the
   top. 230 makes the box 1.53:1, which is the aspect those composites actually are. */
.svc img{height:230px;object-fit:cover;width:100%}
.svc .pad{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc p{font-size:.94rem;color:var(--ink-soft);flex:1}
.svc a{font-weight:700;font-size:.9rem;text-decoration:none;color:var(--teal-deep)}
.svc a::after{content:" \2192"}
.svc a:hover{text-decoration:underline}
.svc.wide{background:var(--lime-soft);border-color:#dfe6a8}
@media(max-width:1000px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.svcgrid{grid-template-columns:1fr}}

/* ---- the three-to-five-day sequence.  3 children => 3x1, then 1x3 on a phone. ---- */
.steps{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;
       border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{padding:32px 30px 36px;background:#fff;border-left:1px solid var(--line)}
.step:first-child{border-left:0}
.step .d{font-family:var(--disp);font-weight:800;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--teal-deep);display:inline-block;
  padding:6px 12px;border-radius:6px;margin-bottom:16px}
.step h3{margin-bottom:10px}
.step p{font-size:.94rem;color:var(--ink-soft)}
@media(max-width:860px){.steps{grid-template-columns:1fr}
  .step{border-left:0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}}

/* ---- story band ---- */
.storygrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.storygrid img{border-radius:var(--radius);width:100%;height:480px;object-fit:cover}
.storygrid p{margin-top:16px;max-width:34em}
@media(max-width:900px){.storygrid{grid-template-columns:1fr;gap:30px}
  .storygrid img{height:320px}}

/* ---- reviews ---- */
.quote-card{margin-top:44px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
blockquote{background:#fff;border:1px solid var(--line);border-left:6px solid var(--lime);
  border-radius:var(--radius);padding:32px 36px;font-size:1.16rem;line-height:1.7;color:var(--ink)}
blockquote footer{margin-top:18px;font-size:.85rem;color:var(--ink-soft)}
.review-note{background:var(--mist);border-radius:var(--radius);padding:32px 36px;display:flex;
  flex-direction:column;gap:12px;justify-content:center}
.review-note b{font-family:var(--disp);font-size:1.6rem;color:var(--teal-ink)}
.review-note span{font-size:.92rem;color:var(--ink-soft)}
.review-note a{font-size:.9rem;font-weight:700}
@media(max-width:860px){.quote-card{grid-template-columns:1fr}}