/* Switchboard — financial services sections.
   Loaded by index.html (the homepage), the /financial-services hub, and the six
   segment pages under it. The .segs, .caps, and .controls components defined
   here are shared across all of them, which is why the segment pages can stay
   thin: styles/segment.css only adds the sections that live nowhere else.

   Nothing here overrides site.css; these sections reuse the existing tokens
   (--bg, --cream, --ink, --muted, --line, --blue, --pad, --container) and the
   signature offset-shadow card treatment from .reslatest__card. */

/* Accent set for the concept sections' chips and icon tiles. These are the
   site's own pastels, pinned locally and deliberately explicit, because
   site.css declares --green-bg twice at :root (#caf0be at the top, then
   #d9eccf in the stat-tile token block near the bottom). The later, muted
   value wins, so var(--green-bg) can't be relied on for a vivid pastel and
   the segment chip and capability icon would otherwise disagree. Pinning
   them here keeps the two sections in step with each other. */
:root {
  --fs-blue:   #c6dbff;   /* site --blue-light   */
  --fs-indigo: #ddd4ff;
  --fs-yellow: #ffeba1;   /* site --yellow       */
  --fs-salmon: #ffbcbc;   /* site --salmon       */
  /* Insurance sat on --fs-salmon, a pure-red hue that read as a warning
     rather than a family colour. Rotated ~13 degrees toward apricot and
     desaturated slightly: same warmth, none of the alarm. Kept as its own
     token because --fs-salmon still does deliberate work on the risk and
     compliance capability tile, where reading as a caution is the point. */
  --fs-peach:  #fcccbf;
  --fs-green:  #caf0be;   /* site --green-bg, top declaration */
  --fs-pink:   #ffdff4;   /* site --pink         */
  --fs-steel:  #9cbdf3;   /* site --blue-light-2 */
}

/* ============================================================
   SEGMENTS — "Who we work with"
   Six family cards. At rest each shows a colour chip, the family name and
   a one-line descriptor; on hover (or keyboard focus) the descriptor
   cross-fades out and the list of firm types fades in over the same slot.
   The slot has a fixed min-height so nothing reflows on hover, and reading
   29 firm types at once stops being the default state.
   Touch devices get the full list permanently — see the (hover: none)
   block at the bottom of this section — because there is no hover there.
   ============================================================ */
.segs {
  background: var(--bg);
  padding: 110px var(--pad) 100px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.segs__grid {
  max-width: var(--container);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.segs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .22s var(--ease);
}
.segs__card:hover,
.segs__card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 -1px var(--ink);
}
/* Cards carry tabindex="0" so the reveal is reachable by keyboard on every
   card, including the two with no case-study link inside them. */
.segs__card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* One accent per family, declared once on the card and consumed by the
   chip, the hover tint and the type pills. --fs-accent is the family's
   pastel; --fs-tint is the same hue washed out far enough to sit behind
   it. Two values rather than one because a pill filled with the card's own
   hover tint would disappear into the card. */
.segs__card--lending   { --fs-accent: var(--fs-blue);   --fs-tint: #eef4ff; }
.segs__card--insurance { --fs-accent: var(--fs-peach);  --fs-tint: #fff4ef; }
.segs__card--real      { --fs-accent: var(--fs-green);  --fs-tint: #f1fbec; }
.segs__card--invest    { --fs-accent: var(--fs-yellow); --fs-tint: #fffaea; }
.segs__card--payments  { --fs-accent: var(--fs-indigo); --fs-tint: #f3f0ff; }
.segs__card--payroll   { --fs-accent: var(--fs-pink);   --fs-tint: #fff4fb; }
.segs__card:hover,
.segs__card:focus-within { background: var(--fs-tint); }

/* Slightly smaller than the 42px capability tiles, which keeps the
   capabilities reading as the heavier feature of the two sections. */
.segs__chip {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1.4px solid var(--ink);
  border-radius: 10px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  background: var(--fs-accent);
}
.segs__chip svg { width: 19px; height: 19px; display: block; }

.segs__name {
  font: 500 22px/1.18 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 12px;
}
/* Fixed slot: descriptor and type list occupy the same box so the card
   never changes height between rest and hover. */
.segs__slot {
  position: relative;
  min-height: 96px;
  margin-bottom: 4px;
}
.segs__desc,
.segs__types {
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.segs__desc {
  margin: 0;
  font: 400 15.5px/23px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
}
.segs__types {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
}
/* Pills carry the family accent rather than the card's hover tint: the tint
   is a wash of the same hue, so a pill filled with it would vanish into the
   card behind it. The accent is one step stronger, which keeps the pill
   distinct from the card while still reading as the same colour. All six
   accents are pale enough that near-black text clears WCAG AA comfortably. */
.segs__types li {
  font: 400 12.5px/1 "Neue Montreal", system-ui, sans-serif;
  color: rgba(0, 0, 0, 0.82);
  background: var(--fs-accent, var(--bg));
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
}
.segs__card:hover .segs__desc,
.segs__card:focus-within .segs__desc { opacity: 0; transform: translateY(-5px); }
.segs__card:hover .segs__types,
.segs__card:focus-within .segs__types { opacity: 1; transform: none; pointer-events: auto; }

.segs__proof {
  margin-top: auto;
  align-self: flex-start;
  font: 500 14px/1.3 "Neue Montreal", system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 1px;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.segs__proof:hover { color: var(--blue); border-color: var(--blue); }
.segs__foot {
  max-width: 860px;
  margin: 40px auto 0;
  text-align: center;
  font: 400 16px/26px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
}

/* Show every firm type permanently, dropping the descriptor, whenever the
   hover reveal isn't usable or isn't needed:
     • (hover: none)      — touch devices, which can't hover at all
     • (max-width: 899px) — one full-width card with five chips isn't the
                            wall of text the reveal exists to avoid, and
                            this keeps the fallback deterministic instead
                            of trusting every device to report pointer
                            type correctly.
   Kept as one rule list so the two paths can never drift apart. */
@media (hover: none), (max-width: 899px) {
  .segs__desc { display: none; }
  .segs__slot { min-height: 0; }
  .segs__types {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .segs__card, .segs__desc, .segs__types { transition-duration: .01ms; }
  .segs__card:hover, .segs__card:focus-within { transform: none; }
  .segs__desc, .segs__types { transform: none !important; }
}

/* ============================================================
   CAPABILITIES — "The AI our clients actually put to work"
   Broad capabilities, not a workflow menu: a short claim plus four general
   bullets per card, so the section reads as expansive rather than as a list
   you either fit into or don't. Bullets stay industry-neutral on purpose —
   naming artifacts like ACORD forms or rent rolls made each card read as
   belonging to one corner of the industry.
   ============================================================ */
.caps {
  background: var(--cream);
  padding: 110px var(--pad) 110px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.caps__grid {
  max-width: var(--container);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.caps__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 30px 32px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
}
/* No hover state. These are statements of what we build, not links: a card
   that lifts under the cursor reads as a button and invites a click that
   goes nowhere. */
/* The platform capability is the largest offer, so it gets the full row.
   Across that width a stacked layout leaves the right two thirds empty, so
   it splits instead: icon + name + claim on the left, bullets on the right,
   vertically centred against each other. */
.caps__card--wide {
  grid-column: 1 / -1;
  /* White like the eight cards above it. On the cream section the warmer
     --bg read as a different kind of card rather than a wider one. */
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
/* Icon sits beside the text here rather than above it, matching the
   .controls__card pattern. Stacked, the icon became an orphan: the bullets
   opposite were centred against icon + name + claim, so their first row
   landed in the gap between the icon and the heading and lined up with
   nothing. Inline, the two columns end up close in height, so centring them
   against each other actually reads as centred. */
.caps__col {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.caps__col-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Optical nudge: pulls the cap-height of the heading level with the top of
   the icon box, which a flex-start edge alignment leaves looking low. */
.caps__col-text { padding-top: 2px; }

.caps__icon {
  /* flex: 0 0 auto matters in the wide card, where the icon is a row flex
     item beside text and would otherwise be allowed to squash. */
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 1.4px solid var(--ink);
  border-radius: 11px;
  display: grid;
  place-items: center;
}
/* One pastel per capability, drawn from the site tokens. Black strokes over
   pastel fills is the pattern used throughout the site (hero cubes, segment
   chips), so the icons stay a family while the row stops reading flat.
   Assignments lean on meaning where there is one: yellow for the insight
   glyph, salmon for the risk shield, green for the chart. */
.caps__icon--doc      { background: var(--fs-blue); }
.caps__icon--flow     { background: var(--fs-indigo); }
.caps__icon--decide   { background: var(--fs-yellow); }
.caps__icon--risk     { background: var(--fs-salmon); }
.caps__icon--report   { background: var(--fs-green); }
.caps__icon--talk     { background: var(--fs-pink); }
.caps__icon--platform { background: var(--fs-steel); }
.caps__icon svg { width: 21px; height: 21px; display: block; }
.caps__name {
  font: 500 23px/1.18 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.014em;
  margin: 2px 0 0;
  color: var(--ink);
}
/* One-liner sits in ink, bullets in muted, so the card reads
   name -> claim -> detail without needing more type sizes.
   Grid rows equalise card heights automatically, but a one-liner that
   wraps makes its whole ROW taller than the others. min-height reserves
   two lines everywhere so all seven cards match no matter what, and a
   longer line later can't desynchronise the rows. Keep these under about
   50 characters and they'll render on one line. */
.caps__body {
  font: 400 16px/23px "Neue Montreal", system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  min-height: 46px;
}
/* The wide card is a single full-row card, so there's no row to match and
   no reason to reserve the second line. */
.caps__card--wide .caps__body { min-height: 0; }
/* The bullets are the wide card's right-hand column, so they sit at its
   right edge rather than hanging in the middle of the row. */
.caps__card--wide .caps__bullets { justify-self: end; }
/* The home page's wide card carries no bullets (headline + claim only),
   so it collapses to a single column instead of reserving an empty half. */
.caps__card--solo { grid-template-columns: 1fr; }
.caps__bullets {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.caps__bullets li {
  position: relative;
  padding-left: 15px;
  font: 400 14.5px/20px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
}
.caps__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
/* Bullets sit in the wide card's right-hand column, two up. The row gap is
   wider than the in-card default so the 2x2 block carries enough vertical
   mass to sit against the taller copy column without the bottom-right
   corner reading as empty. */
/* Three bullets, not four, so the two-up grid would leave a hole in the
   bottom-right. Single column reads cleaner here and matches how the
   bullets stack in every other capability card. */
.caps__card--wide .caps__bullets {
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  margin-top: 0;
}
.caps__note {
  /* Narrow enough that the sentence breaks into two comfortable lines
     instead of one long span and a short orphan. */
  max-width: 520px;
  margin: 44px auto 0;
  text-align: center;
  font: 400 16px/26px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
}

/* ============================================================
   SERVICES — puzzle card spacing
   The two puzzle cards are fixed-height boxes: .puzzle carries
   aspect-ratio 1620/660 and each card's rounded-rect background is an SVG
   with preserveAspectRatio="meet", so the box can't grow with content
   without the shape letterboxing away from the card bounds. That means the
   badge + heading + lede + bullets + CTA stack has to fit a fixed height,
   and .puzzle__cta uses margin-top:auto, so any overflow shows up as the
   button sitting flush against the bottom border.
   Financial services copy runs slightly longer than the generic version, so
   tighten the internal rhythm to keep a real gap under both CTAs. If you
   lengthen either lede past three lines, re-check that gap.
   ============================================================ */
.puzzle__lede { margin-bottom: 16px; }
.puzzle__b .puzzle__lede { margin-bottom: 12px; }
.puzzle__bullets { margin-bottom: 18px; gap: 11px; }
.puzzle__b .puzzle__bullets { margin-bottom: 16px; }

@media (max-width: 899px) {
  /* Mobile drops the SVG shapes and the cards become normal flow blocks,
     so the fixed-height constraint disappears. Restore comfortable rhythm. */
  .puzzle__lede,
  .puzzle__b .puzzle__lede { margin-bottom: 18px; }
  .puzzle__bullets,
  .puzzle__b .puzzle__bullets { margin-bottom: 22px; gap: 14px; }
}

/* ============================================================
   METHOD — 5-beat rail (lives inside the Services section)
   ============================================================ */
.method {
  max-width: var(--container);
  margin: 72px auto 0;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.method__label {
  font: 500 11px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  display: block;
  margin-bottom: 32px;
}
.method__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.method__step { position: relative; padding-top: 22px; }
.method__step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
}
.method__step::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.method__step h3 {
  font: 500 19px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.method__step p {
  font: 400 14.5px/21px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   CONTROLS — security / how we work in your environment
   ============================================================ */
.controls {
  background: var(--bg);
  padding: 110px var(--pad) 110px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* Three across, not two-up. The fourth card (audit trail as a build
   requirement) described an output rather than how we build for the client,
   and the claim still lives in the "Risk, compliance & audit" capability
   card and the page FAQ. Three shorter cards in a row also stop the section
   reading as a wall of paragraphs. */
.controls__grid {
  max-width: var(--container);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* One pastel per card, wash on the card and the full pastel on the icon
   tile, the same two-value pattern the segment cards use. Cream cards on a
   cream section read as one grey slab; three tints give the section the
   variety the capability grid already has. Assigned by position rather than
   a modifier class so the markup stays identical across all eight pages. */
.controls__card:nth-child(1) { --ctl-tint: #eef4ff; --ctl-icon: var(--fs-blue); }
.controls__card:nth-child(2) { --ctl-tint: #f1fbec; --ctl-icon: var(--fs-green); }
.controls__card:nth-child(3) { --ctl-tint: #fffaea; --ctl-icon: var(--fs-yellow); }
.controls__card {
  display: flex;
  gap: 18px;
  padding: 30px 30px 28px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: var(--ctl-tint, var(--cream));
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.controls__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 -1px var(--ink);
}
.controls__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: 1.5px solid var(--ink);
  border-radius: 13px;
  background: var(--ctl-icon, var(--bg));
  display: grid;
  place-items: center;
}
.controls__icon svg { width: 23px; height: 23px; display: block; }
.controls__card h3 {
  font: 500 20px/1.2 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 2px 0 8px;
  color: var(--ink);
}
.controls__card p {
  font: 400 15.5px/23px "Neue Montreal", system-ui, sans-serif;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   MOBILE — ≤ 899px (stage goes fluid, JS drops the scale transform)
   ============================================================ */
/* Between the mobile stack and full width, three cards across leaves the
   text column too narrow to sit beside the icon. Stack them inside the card
   rather than dropping to two columns, which would strand the third. */
@media (min-width: 900px) and (max-width: 1180px) {
  .controls__card { flex-direction: column; gap: 14px; }
}
@media (max-width: 899px) {
  .segs, .caps, .controls { padding: 64px var(--pad) 60px; }
  .segs__grid, .caps__grid, .controls__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
  }
  .segs__card { padding: 24px 22px 22px; }
  .segs__name { font-size: 20px; }
  .segs__chip { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 13px; }
  .segs__chip svg { width: 17px; height: 17px; }
  .segs__types li { font-size: 12px; }
  .segs__foot { margin-top: 28px; font-size: 15px; line-height: 24px; }
  .caps__card { padding: 24px 22px 26px; }
  .caps__name { font-size: 21px; }
  .caps__body { font-size: 15.5px; line-height: 23px; }
  /* The grid is one column here, so the wide card is no longer wide —
     stack its bullets like every other card's. */
  /* The grid is one column here, so the wide card is no longer wide.
     Unwind the side-by-side split back to a single stack. */
  .caps__card--wide { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .caps__card--wide .caps__bullets { grid-template-columns: 1fr; gap: 8px; }
  .caps__note { margin-top: 30px; font-size: 15px; line-height: 24px; }
  .method { margin-top: 48px; padding-top: 32px; }
  .method__row { grid-template-columns: 1fr; gap: 22px; }
  .controls__card { padding: 24px 20px; gap: 14px; }
  .controls__icon { width: 38px; height: 38px; border-radius: 10px; }
  .controls__icon svg { width: 19px; height: 19px; }
}