/* ============================================================
   Winjit US - Industry page components
   Brief: winjit-us-insurance-page.md. Insurance is the first of four
   industry pages; these components (hero stats, value chain grid,
   logo grid, portfolio cards, mini framework) are shared by all four.
   Builds on css/landing.css for gradients, highlights, the govern
   floor, the inverted block grid, story cards and the closing band.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   PAGE RHYTHM
   Section padding now comes from the shared --section-pad token
   (styles.css) so it matches the rest of the site.
   ------------------------------------------------------------ */
.page-industry .section-head,
.page-about .section-head,
.page-stories .section-head { margin-bottom: 0; }
.page-industry .lp-deck,
.page-about .lp-deck,
.page-stories .lp-deck { font-size: clamp(16px, 1.3vw, 17.5px); }

/* ------------------------------------------------------------
   INVERTED SURFACES
   The inverted sections are black (the .lp-gov palette in
   landing.css). The impact band keeps the brand gradient, so a
   page is never one colour end to end.
   ------------------------------------------------------------ */
.in-stack { background: var(--midnight-card); border-color: var(--midnight-card-border); }
.in-stack li { border-top-color: var(--midnight-card-border); }
.in-stack__close { color: var(--grey-400); }

/* ------------------------------------------------------------
   SECTION 1 - HERO  (Aeline hero, sub-page scale)
   ------------------------------------------------------------ */
.in-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--midnight-navy); color: #fff; }
.in-hero__bg { position: absolute; inset: -10% 0 0; z-index: -1; will-change: transform; }
.in-hero__bg img { width: 100%; height: 120%; object-fit: cover; }
.in-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 14, 36, .60) 0%, rgba(2, 14, 36, .24) 26%, transparent 55%, var(--midnight-navy) 100%),
    radial-gradient(ellipse 60% 70% at 15% 40%, rgba(2, 30, 66, .55), transparent 70%),
    linear-gradient(100deg, rgba(2, 24, 54, .94) 0%, rgba(3, 53, 122, .82) 45%, rgba(3, 78, 162, .45) 78%, rgba(8, 120, 108, .40) 100%);
}
.in-hero__inner { padding: clamp(28px, 4vw, 44px) var(--gutter) clamp(56px, 7vw, 88px); }

.in-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(40px, 6vw, 76px); padding: 0; font-size: 14px; color: rgba(255, 255, 255, .72);
}
.in-crumbs a { color: rgba(255, 255, 255, .86); }
.in-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.in-crumbs li + li::before { content: "→"; margin-right: 8px; color: rgba(255, 255, 255, .5); }

.in-hero__title {
  color: #fff; font-size: clamp(38px, 5vw, 70px); font-weight: 500; line-height: 1.06;
  letter-spacing: -0.02em; max-width: 17ch; margin: 0;
  animation: in-rise 900ms var(--ease-out) both;
}
/* longer two-line headlines (PropTech, Health Tech) hold their break
   at a slightly smaller size across a wider measure */
.in-hero__title--long { font-size: clamp(32px, 4vw, 54px); max-width: 30ch; line-height: 1.12; }
.in-hero__sub {
  margin: 22px 0 0; max-width: 58ch;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .84);
  animation: in-rise 900ms var(--ease-out) 150ms both;
}
.in-hero__ctas { margin-top: 32px; animation: in-rise 900ms var(--ease-out) 280ms both; }
@keyframes in-rise { from { opacity: 0; transform: translateY(22px); } }

/* stat blocks - glass tiles, two numeric and two named lists */
.in-stats {
  display: grid; grid-template-columns: .8fr .8fr 1.3fr 1.1fr; gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(48px, 6vw, 80px);
}
.in-stat {
  padding: clamp(18px, 1.8vw, 24px); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  animation: in-rise 900ms var(--ease-out) both;
}
.in-stat:nth-child(1) { animation-delay: 420ms; }
.in-stat:nth-child(2) { animation-delay: 500ms; }
.in-stat:nth-child(3) { animation-delay: 580ms; }
.in-stat:nth-child(4) { animation-delay: 660ms; }
.in-stat__fig {
  font-family: var(--ff-display); font-size: clamp(34px, 3.6vw, 50px); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; color: #fff;
}
.in-stat__fig--sm { font-family: var(--ff-base); font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.in-stat__label { margin: 0; font-size: 14px; line-height: 1.4; color: #9CFFCB; }

@media (max-width: 900px) {
  .in-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .in-hero__ctas .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   SECTION 2 - VALUE CHAIN  (ValueMomentum solutions grid)
   ------------------------------------------------------------ */
.in-fn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 22px); margin-top: 34px;
}
.in-fn {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--strokes); border-radius: var(--radius-card);
  padding: 28px 26px 24px; color: inherit;
  transition: transform 250ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease;
}
.in-fn:hover, .in-fn:focus-visible {
  transform: translateY(-5px); border-color: var(--blue-hover-border); box-shadow: var(--shadow-blue-lift);
}
.in-fn__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-icon); margin-bottom: 20px;
  background: linear-gradient(135deg, var(--grad-soft-stops)); color: var(--primary);
  transition: transform 300ms var(--ease-out);
}
.in-fn__icon svg { width: 22px; height: 22px; }
.in-fn:hover .in-fn__icon { transform: rotate(-6deg) scale(1.06); }
.in-fn h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--grey-900); }
.in-fn p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--grey-600); }
.in-fn__link {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-200);
  display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--primary);
}
.in-fn__link svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 250ms var(--ease-out); }
.in-fn:hover .in-fn__link svg { transform: translateX(5px); }
@media (max-width: 1000px) { .in-fn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .in-fn-grid { gap: 12px; }
  .in-fn { padding: 20px 16px 18px; }
  .in-fn__icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .in-fn h3 { font-size: 16.5px; }
  .in-fn p { font-size: 13.5px; }
  .in-fn__link { font-size: 13px; }
}

/* ------------------------------------------------------------
   SECTION 3 - CLIENT WALL  (static grid, five across)
   ------------------------------------------------------------ */
.in-clients { padding: clamp(44px, 5vw, 64px) 0; background: #fff; border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.in-clients__label {
  text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-500); margin: 0 auto 28px; max-width: 48ch;
}
/* 1px gaps over a stroke-coloured ground draw the cell dividers, so the
   rounded outer border stays intact */
.in-logo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--strokes); border: 1px solid var(--strokes); border-radius: 18px; overflow: hidden;
}
.in-logo {
  background: #fff;
  min-height: 132px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; transition: background-color 200ms ease;
}
.in-logo:hover { background: var(--grey-50); }
.in-logo img { max-height: 34px; max-width: 80%; width: auto; filter: grayscale(1); opacity: .62; transition: filter 220ms ease, opacity 220ms ease; }
.in-logo:hover img { filter: none; opacity: 1; }
.in-logo span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--grey-500); }
.in-logo--pending b { font-size: 14px; font-weight: 600; color: var(--grey-400); padding: 8px 14px; border: 1px dashed var(--grey-300); border-radius: 10px; }
@media (max-width: 800px) {
  .in-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .in-logo { min-height: 112px; padding: 18px 10px; }
  /* five cells in three columns: the last one fills the short row */
  .in-logo:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* ------------------------------------------------------------
   SECTION 4 - PORTFOLIO  (Jim Foster featured work grid)
   ------------------------------------------------------------ */
.in-builds {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); margin-top: 36px;
  /* start, not stretch: opening one card's "What it does" must not grow its row-mates */
  align-items: start;
}
.in-build {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--strokes); border-radius: var(--radius-card); overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 28px);
  transition: opacity 500ms var(--ease-out), transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease;
}
.in-build:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(3, 40, 90, .13); border-color: var(--blue-hover-border); }
/* arriving from a value chain card: the target build pulses once */
.in-build:target { animation: in-target 1.8s var(--ease-out) 1; }
@keyframes in-target {
  0%, 35% { box-shadow: 0 0 0 4px rgba(0, 191, 120, .45), 0 24px 50px rgba(3, 40, 90, .13); border-color: var(--live-green); }
  100% { box-shadow: 0 0 0 0 rgba(0, 191, 120, 0); }
}

/* screenshot in a small browser frame */
.in-build__shot { display: block; position: relative; background: #E9EEF5; border-bottom: 1px solid var(--strokes); }
.in-build__bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: #F4F6FA; border-bottom: 1px solid var(--grey-200);
}
.in-build__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-300); }
.in-build__bar i:nth-child(1) { background: #F87171; }
.in-build__bar i:nth-child(2) { background: #FBBF24; }
.in-build__bar i:nth-child(3) { background: #34D399; }
.in-build__bar em {
  flex: 1; min-width: 0; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: #fff;
  font-style: normal; font-size: 11px; color: var(--grey-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-build__shot > img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
  transition: transform 700ms var(--ease-out);
}
.in-build__shot { overflow: hidden; }
.in-build:hover .in-build__shot > img { transform: scale(1.05); }

.in-build__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.in-build__live {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #067A55;
}
.in-build__live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live-green);
  box-shadow: 0 0 0 0 rgba(0, 191, 120, .6); animation: lp-dot-pulse 2s ease-out 3;
}
.in-build h3 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--grey-900); }
.in-build__desc { min-height: 3em; margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--grey-700); }
.in-build__more { margin: 0 0 20px; border-top: 1px solid var(--grey-200); }
.in-build__more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--grey-800);
}
.in-build__more summary::-webkit-details-marker { display: none; }
.in-build__more summary:hover { color: var(--primary); }
.in-build__more summary svg { width: 16px; height: 16px; transition: transform 250ms var(--ease-out); }
.in-build__more[open] summary svg { transform: rotate(180deg); }
.in-build__more p { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: var(--grey-600); }
.in-build__cta { margin-top: auto; align-self: flex-start; padding: 11px 22px; font-size: 15px; }
.in-build__cta svg { width: 16px; height: 16px; }
.in-build__cta:hover svg { transform: translate(2px, -2px); }

@media (max-width: 1000px) { .in-builds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .in-builds { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   MINI FRAMEWORK DIAGRAM  (currently unused)
   The framework section was removed from all three industry pages
   because the pages ran long. The component is kept here, with its
   handler in js/industry.js, in case a page wants it back.
   ------------------------------------------------------------ */
.in-fw {
  margin-top: 52px; border: 1px solid var(--strokes); border-radius: var(--radius-block);
  background: linear-gradient(180deg, #fff 0%, var(--grey-50) 100%);
  padding: clamp(20px, 3vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px);
}
.in-fw__body { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.in-fw__phases { display: grid; gap: 10px; }
.in-phase {
  display: grid; gap: 10px; text-align: left; width: 100%; cursor: pointer;
  font-family: var(--ff-base); color: inherit;
  background: #fff; border: 1px solid var(--strokes); border-radius: var(--radius-tile); padding: 16px 18px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out), opacity 200ms ease;
}
.in-phase__name { font-size: 18px; font-weight: 700; color: var(--grey-900); }
.in-phase__name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--grey-500); }
.in-phase__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.in-phase__tools i {
  font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--grey-700);
  padding: 5px 11px; border-radius: var(--radius-pill); background: var(--grey-50); border: 1px solid var(--strokes);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.in-phase.is-active { border-color: var(--primary); box-shadow: 0 14px 30px rgba(3, 78, 162, .13); transform: translateX(4px); }
.in-phase.is-active .in-phase__tools i { background: var(--soft-blue); border-color: var(--blue-hover-border); color: var(--primary); }
.in-phase:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.in-fw__notes { position: relative; display: grid; }
.in-note {
  grid-area: 1 / 1; align-self: center;
  border-radius: 20px; padding: clamp(20px, 2.4vw, 30px);
  background: #fff; border: 1px solid var(--strokes);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  /* outgoing note leaves fast, before the incoming one arrives, so the
     two never overlap mid-fade */
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.in-note.is-active {
  opacity: 1; visibility: visible; transform: none; box-shadow: 0 18px 40px rgba(3, 40, 90, .08);
  transition: opacity 320ms var(--ease-out) 140ms, transform 320ms var(--ease-out) 140ms, visibility 0s linear 140ms;
}
.in-note__title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; margin: 0 0 16px; color: var(--grey-900); }
.in-note__title span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-brand); color: #fff; font-size: 13px; font-weight: 700;
}
.in-note ul { list-style: none; margin: 0; padding: 0; }
.in-note li {
  position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--grey-200);
  font-size: 15px; line-height: 1.6; color: var(--grey-600);
}
.in-note li::before {
  content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #1577D6, var(--live-green));
}
.in-note li a { font-weight: 700; color: var(--grey-900); }
.in-note li a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* a single qualifying note under the diagram */
.in-fw__note {
  max-width: 78ch; margin: 28px auto 0; text-align: center;
  font-size: 15px; line-height: 1.7; color: var(--grey-600);
}
.in-fw__floor { grid-column: 1 / -1; margin-top: 0; grid-template-columns: 210px 1fr; }
.in-fw__floor p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .92); }

@media (max-width: 960px) {
  .in-fw { grid-template-columns: 1fr; }
  .in-fw__notes { display: grid; gap: 14px; }
  /* mobile: annotations are static and all visible */
  .in-note { grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none; box-shadow: none; }
  .in-phase { cursor: default; }
  .in-phase.is-active { transform: none; box-shadow: none; border-color: var(--strokes); }
  .in-phase.is-active .in-phase__tools i { background: var(--grey-50); border-color: var(--strokes); color: var(--grey-700); }
  .in-fw__floor { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .in-fw__body { grid-template-columns: 1fr; }
  .in-fw__body .lp-fw__rail { padding: 8px; }
  .in-fw__body .lp-fw__rail span { writing-mode: horizontal-tb; transform: none; }
  .in-fw .lp-fw__inputs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   SECTION 6 - REGULATORY  (inverted, no motion beyond fade-in)
   ------------------------------------------------------------ */
.in-reg .lp-gov__grid { margin-top: 32px; }
.in-reg .lp-gov__block:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, .16); }

/* ============================================================
   Components shared by the PropTech and Health Tech pages
   ============================================================ */

/* hero eyebrow and trust line ------------------------------- */
.in-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 16px 7px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  animation: in-rise 800ms var(--ease-out) both;
}
.in-hero__eyebrow i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--secondary);
  box-shadow: 0 0 0 0 rgba(0, 237, 135, .7); animation: lp-dot-pulse 2s ease-out 3;
}
.in-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.in-hero__trust {
  margin: clamp(28px, 3vw, 40px) 0 0; max-width: 70ch;
  font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .72);
}
/* cursor drift on the stat tiles, desktop only (js/industry.js) */
.in-stats--drift .in-stat { will-change: transform; }

/* SECTION - client marks with one outcome line each ---------- */
.in-marks { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: 32px; }
.in-mark {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px;
  background: #fff; border: 1px solid var(--strokes); border-radius: 20px;
  transition: opacity 500ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease;
}
.in-mark:hover { transform: translateY(-4px); box-shadow: var(--shadow-blue-lift); border-color: var(--blue-hover-border); }
.in-mark__name {
  font-family: var(--ff-display); font-size: clamp(19px, 1.9vw, 24px); font-weight: 700;
  letter-spacing: -0.01em; color: var(--grey-900);
}
.in-mark__line { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--grey-600); }
.in-mark--pending .in-mark__name { color: var(--grey-400); font-family: var(--ff-base); font-size: 15px; font-weight: 600; }
@media (max-width: 1000px) { .in-marks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .in-marks { grid-template-columns: 1fr; } }

/* SECTION - impact carousel on an inverted surface ----------- */
.in-impact {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(64px, 8vw, 104px) 0 clamp(52px, 6vw, 80px);
  background: var(--grad-midnight-band);
}
.in-impact__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.in-impact h2 { color: #fff; max-width: 20ch; margin: 0; }
.in-carousel {
  display: flex; gap: clamp(16px, 1.6vw, 22px); margin-top: clamp(36px, 4vw, 48px);
  padding: 6px var(--gutter) 14px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.in-carousel::-webkit-scrollbar { display: none; }
.in-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.in-imp {
  flex: 0 0 clamp(270px, 32vw, 420px); scroll-snap-align: start;
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 250ms var(--ease-out), border-color 250ms ease;
}
.in-imp:hover { transform: translateY(-5px); border-color: rgba(140, 255, 201, .5); }
.in-imp__fig {
  font-family: var(--ff-display); font-size: clamp(38px, 4.2vw, 58px); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; color: var(--aurora-mint); margin-bottom: 14px;
}
.in-imp__claim { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #fff; }
.in-imp__ctx { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.in-imp__client {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px; font-style: italic; color: rgba(255, 255, 255, .7);
}
@media (max-width: 700px) {
  .in-impact__head { flex-direction: column; align-items: flex-start; }
  .in-imp { flex: 0 0 84vw; }
}

/* SECTION - the four decisions / four places ----------------- */
.in-dec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 22px); margin-top: 34px; }
.in-dec {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px;
  background: #fff; border: 1px solid var(--strokes); border-radius: var(--radius-card);
  transition: opacity 500ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease;
}
.in-dec:hover { transform: translateY(-5px); box-shadow: var(--shadow-blue-lift); border-color: var(--blue-hover-border); }
.in-dec__num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-bottom: 18px;
  background: var(--grad-brand); color: #fff; font-size: 13px; font-weight: 700;
}
.in-dec h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--grey-900); }
.in-dec p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--grey-600); }
.in-dec__built {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-200);
  font-size: 13.5px; line-height: 1.6; color: var(--grey-700);
}
.in-dec__built b { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
@media (max-width: 1000px) { .in-dec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .in-dec-grid { grid-template-columns: 1fr; } }

/* SECTION - situation matrix (static) ------------------------ */
.in-matrix { margin-top: 34px; border: 1px solid var(--strokes); border-radius: var(--radius-block); overflow: hidden; background: #fff; }
.in-matrix__head, .in-matrix__row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; }
.in-matrix__head > * {
  padding: 16px 24px; background: var(--grey-50); border-bottom: 1px solid var(--strokes);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500);
}
.in-matrix__row > * { padding: 18px 22px; border-bottom: 1px solid var(--grey-200); font-size: 14px; line-height: 1.55; color: var(--grey-600); }
.in-matrix__row:last-child > * { border-bottom: 0; }
.in-matrix__row > *:first-child { color: var(--grey-900); font-weight: 600; }
.in-matrix__row > *:last-child { background: var(--mint); color: var(--grey-700); }
/* client name under the third column entry */
.in-matrix__row em {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
.in-matrix__row:hover > * { background: var(--soft-blue); }
.in-matrix__row:hover > *:last-child { background: #E3F6EC; }
.in-matrix__label { display: none; }
@media (max-width: 860px) {
  /* stacked cards, labels kept as headings. No horizontal scrolling. */
  .in-matrix { border: 0; border-radius: 0; background: none; }
  .in-matrix__head { display: none; }
  .in-matrix__row {
    display: block; margin-bottom: 16px; background: #fff;
    border: 1px solid var(--strokes); border-radius: var(--radius-card); overflow: hidden;
  }
  .in-matrix__row > * { border-bottom: 1px solid var(--grey-200); padding: 18px 20px; }
  .in-matrix__row > *:last-child { border-bottom: 0; }
  .in-matrix__label {
    display: block; margin-bottom: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
  }
}

/* SECTION - systems, data and hardware (inverted, static) ---- */
.in-stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 26px); margin-top: 32px; }
.in-stack { padding: 26px 24px; border-radius: var(--radius-card); border: 1px solid var(--midnight-card-border); }
.in-stack h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aurora-mint); margin: 0 0 18px;
}
.in-stack ul { list-style: none; margin: 0; padding: 0; }
.in-stack li {
  padding: 11px 0; border-top: 1px solid var(--midnight-card-border);
  font-size: 14.5px; line-height: 1.5; color: #fff;
}
.in-stack li.is-pending { color: rgba(255, 255, 255, .5); font-style: italic; }
.in-stack__close {
  margin: clamp(28px, 3vw, 40px) auto 0; max-width: 72ch; text-align: center;
  font-size: 15.5px; line-height: 1.6;
}
@media (max-width: 1000px) { .in-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .in-stack-grid { grid-template-columns: 1fr; } }

/* SECTION - portfolio, long form ---------------------------- */
.in-port { max-width: 920px; margin: 34px auto 0; }
/* Title, tag and stack sit in a side rail, so an entry is about a
   third shorter than the same content stacked vertically. */
.in-entry {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--grey-200);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.in-entry:first-child { border-top: 0; padding-top: 0; }
.in-entry__parts { grid-column: 2; grid-row: 1 / span 2; }
.in-entry__head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.in-entry__head h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; margin: 0; color: var(--grey-900); }
.in-entry__tag {
  padding: 5px 13px; border-radius: var(--radius-pill); background: var(--soft-blue); border: 1px solid var(--blue-wash-border);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary);
}
.in-entry__part { padding: 0 0 14px; }
.in-entry__part:last-child { padding-bottom: 0; }
.in-entry__dt, .in-entry__fold summary {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
}
.in-entry__part > p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--grey-600); }
/* "What was built" is the longest paragraph in an entry, so its label
   doubles as the toggle and the entry reads as situation and outcome */
.in-entry__fold summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; width: fit-content;
}
.in-entry__fold summary::-webkit-details-marker { display: none; }
.in-entry__fold summary:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.in-entry__fold summary svg { width: 14px; height: 14px; transition: transform 250ms var(--ease-out); }
.in-entry__fold[open] summary svg { transform: rotate(180deg); }
.in-entry__fold > p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--grey-600); }

.in-entry__stack {
  grid-column: 1; grid-row: 2;
  margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12.5px; color: var(--grey-500);
}
.in-entry__stack b { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-400); margin-right: 4px; }
.in-entry__stack span { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--grey-50); border: 1px solid var(--strokes); color: var(--grey-600); }
@media (max-width: 820px) {
  .in-entry { grid-template-columns: 1fr; }
  .in-entry__parts, .in-entry__head, .in-entry__stack { grid-column: 1; grid-row: auto; }
  .in-entry__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; margin-bottom: 16px; }
}

/* cross-link block beneath the portfolio */
.in-crosslink {
  max-width: 920px; margin: 48px auto 0; padding: 26px 28px;
  border-radius: var(--radius-card); background: var(--soft-blue); border: 1px solid var(--blue-wash-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.in-crosslink p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--grey-700); }

/* ------------------------------------------------------------
   Insurance page only - layout pass (impeccable /layout).
   Scoped under body.page-industry--insurance so the split-panel
   functions layout and the inline regulatory icons do not affect
   the shared .in-fn / .lp-gov__block components on the other three
   industry pages, which still use the stacked-card versions above.
   ------------------------------------------------------------ */
.page-industry--insurance .in-fn-split__inner {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.page-industry--insurance .in-fn-split__head { position: sticky; top: calc(var(--header-h, 83px) + 32px); }
.page-industry--insurance .in-fn-split__head h2 { margin: 0; max-width: 12ch; }
.page-industry--insurance .in-fn-split__head p {
  margin: 14px 0 0; max-width: 38ch; font-size: 15.5px; line-height: 1.6; color: var(--grey-600);
}
.page-industry--insurance .in-fn-split__rows { display: flex; flex-direction: column; }
.page-industry--insurance .in-fn-row {
  display: flex; align-items: flex-start; gap: 20px; padding: 22px 4px;
  border-top: 1px solid var(--grey-200); text-decoration: none; transition: background 200ms ease;
}
.page-industry--insurance .in-fn-split__rows .in-fn-row:last-child { border-bottom: 1px solid var(--grey-200); }
.page-industry--insurance .in-fn-row:hover, .page-industry--insurance .in-fn-row:focus-visible { background: var(--grey-50); }
.page-industry--insurance .in-fn-row__icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; color: var(--primary); }
.page-industry--insurance .in-fn-row__icon svg { width: 100%; height: 100%; }
.page-industry--insurance .in-fn-row__body h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--grey-900); }
.page-industry--insurance .in-fn-row__body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--grey-600); }
.page-industry--insurance .in-fn-row__link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--primary);
}
.page-industry--insurance .in-fn-row__link svg { width: 15px; height: 15px; transition: transform 250ms var(--ease-out); }
.page-industry--insurance .in-fn-row:hover .in-fn-row__link svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .page-industry--insurance .in-fn-split__inner { grid-template-columns: 1fr; }
  .page-industry--insurance .in-fn-split__head { position: static; }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .in-hero__title, .in-hero__sub, .in-hero__ctas, .in-stat { animation: none !important; }
  .in-hero__bg { transform: none !important; }
  .in-build:target { animation: none; }
  .in-build__live i, .in-hero__eyebrow i { animation: none; }
  .in-note, .in-phase { transition: none !important; }
}