/* Refine: a cleaner, less boxy layer over the site's styles. Loaded last on every page, so removing the one
   <link rel="stylesheet" href="/styles/refine.css"> per page puts the previous look back exactly.
   Direction: cards stay where they group clickable items (home services, Work case studies, the blog list) and get
   quieter; everything else opens up: no tile, border or shadow, separated by whitespace, hairlines and type.
   One warm band per page (the consultation request) plus the navy numbers band; the rest is white. */

site-root {
  --hair-soft: #e6ecf2;
  --card-shadow: 0 1px 2px rgb(13 36 75 / 0.04), 0 10px 28px -16px rgb(13 36 75 / 0.16);
}

/* ---------------------------------------------------------------- rhythm and section backgrounds */
site-root .section { padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
site-root .intro { margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 3rem); }

/* tinted panels become white, except the closing consultation band */
site-root .section.mist,
site-root .section.paper:not(#consultation) { background: transparent; }

/* consecutive white sections are separated by a hairline the width of the content, not a colour change */
site-root .section:not(.navy, .paper#consultation) + .section:not(.navy, .paper#consultation) { position: relative; }
site-root .section:not(.navy, .paper#consultation) + .section:not(.navy, .paper#consultation)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(var(--content-width) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  height: 1px; background: var(--hair);
}

/* ---------------------------------------------------------------- the cards that stay, quieter */
site-root .card { border-color: var(--hair-soft); box-shadow: var(--card-shadow); }
@media (prefers-reduced-motion: no-preference) {
  site-root .card.lift:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(13 36 75 / 0.05), 0 18px 36px -18px rgb(13 36 75 / 0.24); }
}

/* ---------------------------------------------------------------- home */
/* the three results under the hero: an open row of figures on a bright rule, like the case-study stats */
site-root .proof-strip { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
site-root .proof-strip a.card { background: none; border: 0; border-top: 3px solid var(--bright); border-radius: 0; box-shadow: none; padding: var(--space-2) 0 0; }
site-root .proof-strip .card.lift:hover { transform: none; box-shadow: none; }
site-root .proof-strip a:hover .num { color: var(--blue); }

/* services stay cards; the proof inside is no longer a box in a box, just a figure under a hairline */
site-root .service-grid { gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); }
site-root .service .proofs { gap: 0; }
site-root .service .proof { background: none; border-radius: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--hair); }
site-root .service .proofs .proof + .proof { margin-top: var(--space-2); }
site-root .service .proof .num { font-size: 1.25rem; }

/* why clients stay: principles keep their navy rule; quotes are open, on a hairline */
site-root .principles { margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
site-root .quotes { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
site-root .quotes li.card { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: var(--space-3) 0 0; }

/* ---------------------------------------------------------------- client logos: no tiles */
site-root .logo-groups { gap: var(--space-6); }
site-root .logo-group h3 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--hair); margin-bottom: var(--space-3); }
site-root .logos { gap: var(--space-3) var(--space-4); }
site-root .logos li { background: none; border: 0; border-radius: 0; height: 4.5rem; padding: 0.25rem 0.5rem; }
@media (max-width: 40rem) {
  site-root .logos { gap: var(--space-2) var(--space-3); }
  site-root .logos li { height: 4rem; padding: 0.25rem; }
}
site-root .probono { gap: var(--space-4); }
site-root .probono li { height: 5.5rem; }
site-root .probono img { max-height: 4.25rem; max-width: min(8.5rem, 100%); }

/* ---------------------------------------------------------------- services page */
/* the case-study proof beside each service: open, on the bright rule, still sticky */
site-root .proof-card.card { background: none; border: 0; border-top: 3px solid var(--bright); border-radius: 0; box-shadow: none; padding: var(--space-3) 0 0; gap: var(--space-1); }
site-root .proof-card .text-link { margin-top: var(--space-1); }
site-root .tiles img { border-radius: 0.5rem; }

/* website screenshots: a hairline frame is enough */
site-root .project .shot { box-shadow: none; border-color: var(--hair-soft); border-radius: 0.625rem; }

/* ---------------------------------------------------------------- about */
site-root .about-quotes .quotes { gap: 0; }
site-root .about-quotes .quotes li.card { padding: var(--space-3) 0; }
site-root .about-quotes .quotes li.card:first-child { border-top: 0; padding-top: 0; }

/* team: photo and words, no box */
site-root .team { gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gutter); }
site-root .member.card { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
site-root .member .photo { border-radius: var(--radius); }
site-root .member h3 { margin: var(--space-3) 0 0; }
site-root .member .role { margin: 0.25rem 0 var(--space-1); }
site-root .member p:last-child { margin: 0; color: var(--color-text); }

/* ---------------------------------------------------------------- case studies */
site-root .case-logo { border: 0; box-shadow: 0 1px 2px rgb(13 36 75 / 0.05); }
site-root .case-images figure { box-shadow: none; border-color: var(--hair-soft); }
site-root .case-results { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
site-root .case-results li.card { background: none; border: 0; border-top: 2px solid var(--navy); border-radius: 0; box-shadow: none; padding: var(--space-3) 0 0; }
site-root .case-services h3 { border-bottom-width: 1px; border-bottom-color: var(--hair); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }