/* ==========================================================================
   SOLUTIONS SUB-PAGES — SECTION 2: SOLUTION INTRODUCTION
   Shortlist: designs 1, 2, 3, 5, 6 — rebuilt on the HOME PAGE base
   ==========================================================================
   Preview-only. Winning blocks move into styles.css; this file and its
   preview page are then deleted. Namespaced .s2vN- so nothing can reach a
   live page and parallel sessions cannot collide.

   THE BASE — index.html, not solutions.html
   ------------------------------------------------------------------------
   An earlier pass built these from .dx-item / .gw-row / .iq-card, which are
   SOLUTIONS-page components: 14px corners, violet-tinted borders and
   shadows, and elaborate hover choreography (wash wipes, lit blooms,
   sibling dimming, sheen sweeps). That is a different, louder hand than the
   home page.

   The home page is calmer, squarer and greyer. Its actual contract:

     RADIUS      var(--radius) = 4px. Media only gets 8px (.glance-media).
                 Bento tiles get none at all.
     BORDERS     neutral #c4c4c4 on cards, var(--c-line) on rules.
                 NOT family-tinted.
     SHADOWS     neutral. 0 14px 30px rgba(20,20,40,.08) on cards,
                 0 30px 60px rgba(0,0,0,.35) on media. NEVER --fam-shadow.
     HOVER       .22s and modest — border-color, translateY(-2px), and the
                 arrow nudging translateX(4px). No wipes, no blooms, no
                 sibling dimming, no sheen.
     MOTIF       the 60x60 outlined arrow box (.card-arrow), 48x48 in row
                 lists. This is the single recurring signal that something
                 is clickable.
     GRADIENT    held back. Large numerals (.g-num) and thin accent rules
                 only — never as a hover wipe.
     ROW LISTS   .svc-cards--rows: no border, no radius, just a 1px
                 var(--c-line) bottom rule; hover changes ONLY that rule's
                 colour. Nothing moves.

   The one substitution: where the home page uses var(--c-accent), the
   Solutions family uses var(--fam-700). That is the whole re-theme — the
   geometry, weights, shadows and timings are unchanged.

   RESPONSIVE — mobile-first at 390px stepping up with min-width, inverting
   styles.css's desktop-first queries. Safe: no shared selectors.
   Steps: 390 base · 561 · 761 · 941
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design
   ========================================================================== */
.s2-flag { position: sticky; top: 0; z-index: 60; background: #14141c; color: #fff; font-size: 13px; }
.s2-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 10px; }
.s2-flag b { font-weight: 700; }
.s2-flag span { color: rgba(255,255,255,.62); }

.s2-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 30px 6px; }
.s2-label .container { display: flex; flex-direction: column; gap: 7px; }
.s2-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.s2-label h2 b { color: var(--fam-700); font-weight: 800; }
.s2-label p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 78ch; }
.s2-label code { font-size: 13px; color: var(--fam-700); }

.s2-note { background: var(--fam-tint); }
.s2-note .container { padding-block: 36px; }
.s2-note h3 { font-size: 17px; margin: 0 0 9px; color: var(--c-ink); }
.s2-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 76ch; }
.s2-note p + p { margin-top: 12px; }


/* ==========================================================================
   SHARED — the home page's type and motif, family-substituted
   ========================================================================== */

/* .services-title: 700 (not 900), line-height .98, -.025em. Stepped down
   from the home page's 64px cap because §2 sits under an H1 hero. */
.s2-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
.s2-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
/* .svc-card p: 16px / 300 / 1.6 / #323232 */
.s2-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.s2-lede + .s2-lede { margin-top: 16px; }
.s2-lede b { font-weight: 600; color: var(--c-ink); }
.s2-role { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--c-body); margin: 0; }
.s2-role b { font-weight: 700; color: var(--c-ink); }

/* THE MOTIF — .card-arrow, 60x60, neutral border, 4px radius. The single
   home-page signal for "this goes somewhere". */
.s2-arrow {
  align-self: flex-end; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border: 1px solid #c4c4c4;
  border-radius: var(--radius); color: var(--fam-700);
  transition: border-color .22s var(--ease);
}
.s2-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
.s2-arrow--sm { width: 48px; height: 48px; align-self: center; }
.s2-arrow--sm svg { width: 22px; height: 20px; }

/* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px */
.s2-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--fam-700); font-weight: 700; font-size: 20px; line-height: 1.2;
}
.s2-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); }
.s2-link:hover svg { transform: translateX(4px); }

/* .g-num: gradient-clipped numerals — one of only two places the home page
   lets the gradient appear */
.s2-num {
  font-size: clamp(38px, 5vw, 70px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ==========================================================================
   DESIGN 1 — EDITORIAL SPLIT + GLANCE BAND
   The home page's .glance section, rebuilt for §2: a heading and lede in
   white, then a dark band carrying the positioning statement beside a
   media panel.
   Home contract: media at 8px radius on a NEUTRAL 0 30px 60px rgba(0,0,0,.35)
   shadow, nudged left:40px / bottom:15px out of its grid column at ≥941.
   ========================================================================== */
.s2v1-top { display: grid; gap: 20px; }
.s2v1-rail { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: baseline; }
.s2v1-rail span { font-size: 15px; font-weight: 300; line-height: 1.7; color: #323232; }
.s2v1-rail span:not(:last-child)::after { content: "·"; margin: 0 10px; color: #b7b7c2; }

/* .glance uses a symmetric padding-block (44px) and lets the media overhang
   into it via the nudge — not a flush bottom edge. Matched. */
.s2v1-band {
  margin-top: 34px; padding-block: 34px;
  background: var(--fam-grad-deep); color: #fff;
}
.s2v1-inner { display: grid; gap: 26px; }
.s2v1-band .s2-eyebrow { color: var(--fam-200); }
.s2v1-statement {
  margin: 0; font-size: 19px; font-weight: 300; line-height: 1.55;
  letter-spacing: -.01em; color: rgba(255,255,255,.86);
}
.s2v1-statement b { color: #fff; font-weight: 700; }
.s2v1-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.s2v1-band .s2-link { color: var(--fam-200); }
@media (min-width: 761px) {
  .s2v1-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: start; }
  .s2v1-statement { font-size: 21px; }
  .s2v1-media { min-height: 320px; }
}
@media (min-width: 941px) {
  .s2v1-band { padding-block: 44px; }
  /* .glance-grid: 1.15fr .85fr, 60px, centre-aligned */
  .s2v1-inner { grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
  .s2v1-statement { font-size: 24px; max-width: 44ch; }
  .s2v1-media { min-height: 380px; position: relative; left: 40px; bottom: 15px; }
}


/* ==========================================================================
   DESIGN 2 — FRAGMENT → CONVERGE
   Dark band names the fragmentation; a white .svc-card overlaps it with the
   resolution and carries the 60x60 arrow.
   Rows use the home row treatment: a 1px rule, and hover changes ONLY that
   rule's colour. Nothing slides, nothing dims.
   ========================================================================== */
.s2v2-problem { background: var(--fam-grad-deep); color: #fff; padding: 36px 0 82px; }
.s2v2-problem .s2-eyebrow { color: var(--fam-200); }
.s2v2-problem h2 { color: #fff; max-width: 18ch; }
.s2v2-list { list-style: none; margin: 24px 0 0; padding: 0; }
.s2v2-list li {
  padding: 17px 4px; font-size: 16px; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.s2v2-list li:first-child { border-top: 1px solid rgba(255,255,255,.22); }
@media (hover: hover) {
  .s2v2-list li:hover { border-bottom-color: #fff; color: #fff; }
}

/* the home .svc-card, verbatim: 4px radius, #c4c4c4 border, 31px padding,
   neutral shadow, 2px lift */
.s2v2-answer {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 26px 22px 22px; margin: -54px 0 0;
  box-shadow: 0 14px 30px rgba(20,20,40,.08);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.s2v2-answer h3 { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0 0 10px; }
.s2v2-role { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); }
@media (hover: hover) {
  .s2v2-answer:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.14); transform: translateY(-2px); }
  .s2v2-answer:hover .s2-arrow { border-color: var(--fam-700); }
  .s2v2-answer:hover .s2-arrow svg { transform: translateX(4px); }
}
.s2v2-answer:focus-within { border-color: var(--fam-700); }
@media (min-width: 761px) {
  .s2v2-problem { padding: 48px 0 94px; }
  .s2v2-answer { margin: -62px 28px 0; padding: 31px; }
}
@media (min-width: 941px) {
  .s2v2-problem { padding: 60px 0 112px; }
  .s2v2-inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 60px; align-items: start; }
  .s2v2-list { margin-top: 0; }
  .s2v2-answer {
    margin: -78px auto 0; max-width: 1000px;
    display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) auto;
    gap: 40px; align-items: center;
  }
  .s2v2-answer .s2-arrow { align-self: center; }
}


/* ==========================================================================
   DESIGN 3 — NUMBERED ROW INDEX
   The home page's .svc-cards--rows pattern: rows separated by a single
   var(--c-line) rule, a 48x48 arrow box on the right, and a hover that
   changes ONLY the bottom rule's colour and nudges the arrow. No wash, no
   numeral tick, no sibling dimming, no translate — the home list does not
   move, and neither does this.
   ========================================================================== */
.s2v3 { display: grid; gap: 28px; }
.s2v3-index { display: flex; flex-direction: column; gap: 0; }
/* home tightens this pattern below 561 to padding:18px 2px / gap:12px /
   h4:17px and KEEPS the arrow box. Matched — base is that small size, and
   the fuller spacing arrives at 761. */
.s2v3-item {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 48px;
  gap: 0 12px; align-items: center;
  padding: 18px 2px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.s2v3-item:first-child { border-top: 1px solid var(--c-line); }
.s2v3-n {
  font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.s2v3-item h4 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.s2v3-item p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 4px 0 0; }
@media (hover: hover) {
  .s2v3-item:hover { border-bottom-color: var(--fam-700); }
  .s2v3-item:hover .s2v3-n { color: var(--fam-700); }
  .s2v3-item:hover .s2-arrow { border-color: var(--fam-700); }
  .s2v3-item:hover .s2-arrow svg { transform: translateX(4px); }
}
.s2v3-item:focus-within { border-bottom-color: var(--fam-700); }
@media (min-width: 761px) {
  .s2v3-item { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 20px; padding: 22px 4px; }
  .s2v3-n { font-size: 24px; }
  .s2v3-item h4 { font-size: 20px; }
}
@media (min-width: 941px) {
  .s2v3 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .s2v3-head { position: sticky; top: 110px; }
}


/* ==========================================================================
   DESIGN 5 — MEDIA + COPY PANEL
   The home .glance split on a light ground: media panel beside the copy,
   themes below as .svc-card boxes.
   Media keeps the home treatment exactly — 8px radius, neutral shadow, and
   the left:40px / bottom:15px nudge out of its column at ≥941.
   ========================================================================== */
.s2v5 { display: grid; gap: 28px; }
.s2v5-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
/* .svc-cards: 2-up grid, 18px gap, collapsing to 1 column on small screens */
.s2v5-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
.s2v5-card {
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 22px; color: var(--c-ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.s2v5-card h4 { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.s2v5-card p { font-size: 15px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; flex: 1; }
@media (hover: hover) {
  .s2v5-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
@media (min-width: 561px) {
  .s2v5-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 761px) {
  .s2v5-media { min-height: 320px; }
  .s2v5-card { padding: 26px; }
}
@media (min-width: 941px) {
  .s2v5-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
  .s2v5-media { min-height: 400px; position: relative; right: 40px; bottom: 15px; }
  .s2v5-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
}


/* ==========================================================================
   DESIGN 6 — BEFORE / AFTER LEDGER
   Two .svc-cards--rows lists side by side. The "with" column is marked the
   way the home page marks a stat block: a dark card head with a solid 3px
   accent bottom border (.why-glance-stat), not a gradient spine.
   ========================================================================== */
.s2v6-grid { display: grid; gap: 30px; margin-top: 30px; }
.s2v6-cap {
  display: block; padding: 14px 18px 12px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
/* the muted side: a plain outlined head */
.s2v6-col--now .s2v6-cap { border: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-surface-2); }
/* the lit side: .why-glance-stat — dark fill, 3px solid accent bottom rule */
.s2v6-col--next .s2v6-cap { background: var(--c-dark); color: #fff; border-bottom: 3px solid var(--fam-700); }

.s2v6-list { list-style: none; margin: 16px 0 0; padding: 0; }
.s2v6-list li {
  padding: 15px 4px; font-size: 15.5px; line-height: 1.5;
  border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.s2v6-list li:first-child { border-top: 1px solid var(--c-line); }
.s2v6-col--now .s2v6-list li { color: var(--c-muted); font-weight: 300; }
.s2v6-col--next .s2v6-list li { color: var(--c-ink); font-weight: 400; }
@media (hover: hover) {
  .s2v6-col--next .s2v6-list li:hover { border-bottom-color: var(--fam-700); }
  .s2v6-col--now .s2v6-list li:hover { border-bottom-color: #c4c4c4; color: var(--c-body); }
}
.s2v6-close { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-line); }
@media (min-width: 761px) {
  .s2v6-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 941px) {
  .s2v6-grid { gap: 56px; margin-top: 40px; }
  .s2v6-list li { font-size: 16px; }
}


/* ==========================================================================
   REDUCED MOTION
   The home page's motion budget is already small — border colours and a 4px
   arrow nudge. This removes the two transforms and leaves colour changes,
   which arrive instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s2-arrow, .s2-arrow svg, .s2-link svg,
  .s2v2-answer, .s2v2-list li, .s2v3-item, .s2v3-n,
  .s2v5-card, .s2v6-list li { transition: none; }
  .s2v2-answer:hover, .s2v5-card:hover { transform: none; }
  .s2-arrow svg, .s2-link svg { transform: none !important; }
}