/* ============================================================================
   industries.css — Industries & Solutions page (2026-07 reconstruction)
   Page-scoped components on the shared token stack. Composed of:
   1) the used subset of the previous inline industries sheet (dead v1
      systems removed: ind-mast, ind-rail, ind-bento/ib-*, iwx/iwcon/iwtrace)
   2) the de-inlined component classes that replaced 146 style attributes.
   Canonical section/widget styling lives in the shared layers; this file
   holds ONLY page-level components and layout glue.
   ============================================================================ */


.page-industries .main-wrapper{position:relative;z-index:1}


/* -------------------------------------------------------------------------
   Local section utilities (kept consistent with governance.css)
   ------------------------------------------------------------------------- */
.page-industries .ind-act{
  position:relative;
  padding-block:clamp(64px, 7vw, 112px) clamp(56px, 6vw, 96px);
}

.page-industries .ind-act--sage{ background:var(--ds-surface-muted); }

/* signature ambient dot-field (hero-ambient.js) — shared with the governance hero */
.page-industries .hero-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }


/* eyebrows match the governance page: 15% smaller than the default --ds-text-label */
.page-industries .eyebrow{
  font-size: var(--ds-text-eyebrow);
}
@media (prefers-reduced-motion: reduce){

  .page-industries .ind-orb__fade{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
}
@media (max-width: 720px){

  .page-industries .ind-hero-split{ display:none; }
}

/* the animation no longer reserves space below the copy (the old wheel did) */
.page-industries .hf-heroA .gv-hero-pad{
  padding-bottom: clamp(56px, 6.4vw, 100px) !important;
}


/* =========================================================================
   4 · WORKERS-COMP WORKFLOW (centrepiece SVG)
   ========================================================================= */
.page-industries .wcw{
  margin: 0 0 clamp(40px, 4.5vw, 64px);
  background: var(--ds-surface-raised, #FFFFFF);
  border:1px solid var(--ds-border-subtle);
  border-radius:3px;
  padding:clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(30,44,36,.04), 0 18px 40px rgba(30,44,36,.06);
}

.page-industries .wcw__head{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:clamp(20px, 2vw, 28px);
  max-width:80ch;
}

.page-industries .wcw__k{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ds-font-ui);
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ds-color-copper-ink, var(--ds-color-copper));
}

.page-industries .wcw__k .d{
  width:8px; height:8px; border-radius:50%; background:var(--ds-color-copper);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ds-color-copper) 18%, transparent);
}

.page-industries .wcw__sub{
  margin:0;
  font-size:15px; line-height:1.55;
  color:var(--ds-text-secondary);
  text-wrap:pretty;
}

.page-industries .wcw__canvas{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding: 14px 0 22px;
}

.page-industries .wcw__svg{
  display:block;
  width:100%; min-width:980px;
  height:220px;
}

.page-industries .wcw__path{ stroke-linecap:round; }

.page-industries .wcw__nm{
  font-family:var(--ds-font-ui);
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  fill: var(--ds-color-green-deep);
}

.page-industries .wcw__nm.is-hitl,
.page-industries .wcw__nm.is-guard{ fill: var(--ds-color-copper-ink, var(--ds-color-copper)); }

.page-industries .wcw__lb{
  font-family:var(--ds-font-display, var(--ds-font-ui));
  font-size:13px; font-weight:600;
  fill: var(--ds-color-green-deep);
}

.page-industries .wcw__lb2{
  font-family:var(--ds-font-ui);
  font-size:10.5px; font-weight:500;
  fill: var(--ds-text-secondary);
}

.page-industries .wcw__node circle{ transition: r .25s var(--ds-ease-authority, ease); }

/* --- v2 workflow choreography (industries-spark.js) ----------------------
   An energised green "recorded" rail draws in behind the pulse, soft blooms
   halo each node as it activates, and a copper comet trails the assessor.
   All crisp SVG so it stays sharp at any width. ------------------------------ */
.page-industries .wcw__progress{
  stroke: var(--ds-color-green, #00633C);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ds-color-green-bright, #0B7A4B) 55%, transparent));
}
.page-industries .wcw__glow,
.page-industries .wcw__comet,
.page-industries .wcw__fx{ pointer-events:none; }
/* a node that has been recorded reads a touch stronger */
.page-industries .wcw__node.is-active .wcw__lb{ fill: var(--ds-color-green, #00633C); }

.page-industries .wcw__legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:14px 0 6px;
  border-top:1px solid var(--ds-border-subtle);
}

.page-industries .wcw__leg{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ds-font-ui);
  font-size:11.5px; font-weight:600;
  color:var(--ds-text-secondary);
}

.page-industries .wcw__leg-d{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  border:1.5px solid var(--ds-color-green-deep);
}

.page-industries .wcw__leg-d--n{ background: var(--ds-color-green-deep); }

.page-industries .wcw__leg-d--hitl{
  background: var(--ds-color-copper);
  border-color: var(--ds-color-copper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-copper) 18%, transparent);
}

.page-industries .wcw__leg-d--guard{
  background: var(--ds-color-copper);
  border-color: var(--ds-color-green-deep);
}

.page-industries .wcw__note{
  display:flex; align-items:flex-start; gap:10px;
  margin:18px 0 0;
  padding:14px 16px;
  width:60%; max-width:none;   /* client 2026-07-06: >=60% on desktop */
  background: color-mix(in srgb, var(--ds-color-sage) 65%, var(--ds-color-bone));
  border-radius:8px;
  font-family:var(--ds-font-ui);
  font-size:13.5px; line-height:1.55;
  color:var(--ds-color-green-deep);
}
@media(max-width:900px){ .page-industries .wcw__note{ width:100%; } }

.page-industries .wcw__note svg{ width:16px; height:16px; color:var(--ds-color-green); flex:none; margin-top:2px; }

.page-industries .wcw__note b{ font-weight:700; }


/* =========================================================================
   5 · ALSO SERVING
   ========================================================================= */
.page-industries .ind-also{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(28px, 3vw, 40px);
}
@media (max-width: 900px){
 .page-industries .ind-also{ grid-template-columns:1fr; }
}
@media (max-width: 1100px){
 .page-industries .ind-road{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .page-industries .ind-road{ grid-template-columns: 1fr; }
}


/* =========================================================================
   8 · reveal helpers
   ========================================================================= */



@media (prefers-reduced-motion: reduce){

  .page-industries .reveal{ opacity:1; transform:none; transition:none; }
}


/* small fixups: section-head copy width inside ind-act sections */
.page-industries .section-head{ max-width:62ch; margin-bottom:clamp(24px, 3vw, 40px); }

.page-industries .section-head h2{ margin:8px 0 0; }

.page-industries .section-head p{ margin-top:14px; font-size:calc(var(--ds-text-body-lg) * .85); line-height:1.55; color:var(--ds-text-secondary); }
@media (prefers-reduced-motion: no-preference){
 .page-industries .ind-hero-proof__live .d{ animation:gvBlink 2.6s ease infinite; }
}
@media (prefers-reduced-motion: no-preference){

  }

@media (max-width:920px){

  .page-industries .ind-shift__grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
}
@media (max-width:560px){

  .page-industries .ind-arc{ grid-template-columns:1fr; gap:4px; }
}


/* --- Insurers · two proof beats --- */
.page-industries .ind-beats{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px); }
@media (max-width:760px){
 .page-industries .ind-beats{ grid-template-columns:1fr; }
}


/* --- Insurers · verbatim buyer pull-quote --- */
.page-industries .ind-pull{
  position:relative; margin:clamp(22px,2.6vw,32px) 0 0; padding:clamp(28px,3.2vw,42px) clamp(28px,3.4vw,48px);
  background:linear-gradient(180deg,#073d29,#03371f); border-radius:var(--ds-radius-base,3px);
  box-shadow:0 24px 50px -30px rgba(3,69,44,.5); overflow:hidden;
}

.page-industries .ind-pull__mk{
  position:absolute; top:clamp(-6px,0vw,4px); left:clamp(14px,2vw,24px);
  font-family:var(--ds-font-display,"Gantari"); font-size:clamp(80px,10vw,140px); line-height:1; color:rgba(233,166,107,.2); pointer-events:none;
}

.page-industries .ind-pull__q{
  position:relative; margin:0; max-width:48ch;
  font-family:var(--ds-font-display,"Gantari"); font-weight:500; font-style:italic; letter-spacing:-.01em;
  font-size:clamp(1.25rem,1.05rem+1vw,1.85rem); line-height:1.36; color:var(--ds-color-bone,#FFF5E9);
}

.page-industries .ind-pull__by{
  margin-top:clamp(16px,1.8vw,22px); font-family:var(--ds-font-ui); font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--ds-color-copper-light,#E9A66B);
}

.page-industries .ind-pull__by span{ display:block; font-weight:400; letter-spacing:0; color:rgba(255,245,233,.72); font-size:12px; margin-top:4px; }


/* ============================================================================
   DE-INLINED COMPONENTS (2026-07 reconstruction)
   Every rule below replaces a former inline style attribute 1:1. The class
   vocabulary follows the page convention (ind-*), BEM-ish, Webflow-friendly.
   ============================================================================ */

/* --- utilities ------------------------------------------------------------ */
.page-industries .is-muted{background:var(--ds-surface-muted)}
.page-industries .mt-lg{margin-top:clamp(40px,4.5vw,68px)}
.page-industries .mt-xl{margin-top:clamp(44px,5vw,72px)}
.page-industries .mt-md{margin-top:clamp(30px,3.4vw,44px)}
.page-industries .mt-14{margin-top:14px}
.page-industries .is-flex-none{flex:none}
.page-industries .is-delay2{animation-delay:-1.6s}
.page-industries .is-cols3{grid-template-columns:repeat(3,1fr)}
.page-industries .is-dim{color:rgba(255,245,233,.6)}
.page-industries .section-head.is-left{text-align:left;margin-inline:0;max-width:64ch}
.page-industries .section-head.is-left.is-w66{max-width:66ch}
.page-industries .ind-a{color:var(--ds-color-copper-ink);text-decoration:underline;text-underline-offset:2px}

/* --- segment two-column layout (copy | sticky instrument rail) ------------- */
.page-industries .ind-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4.5vw,72px);align-items:start;margin-top:clamp(34px,4vw,56px)}
.page-industries .ind-sticky{position:sticky;top:96px}
.page-industries p.ind-lede{color:var(--ds-text-secondary);font-size:var(--ds-text-section-desc);max-width:62ch;margin-top:clamp(12px,1.4vw,18px);line-height:1.62}

/* --- micro kickers ---------------------------------------------------------- */
.page-industries .ind-kick{font-family:var(--ds-font-ui);font-size:var(--ds-text-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-color-copper-ink);margin:0 0 clamp(6px,1vw,12px)}
.page-industries .ind-kick.is-m14{margin:0 0 14px}
.page-industries .ind-kick.is-m18{margin:0 0 clamp(14px,1.6vw,18px)}
.page-industries .ind-kick.is-m0{margin:0}
.page-industries .ind-kick.is-t12{letter-spacing:.12em}
.page-industries .ind-kick.is-pt3{padding-top:3px}

/* --- JTBD rows ("the work we are hired to do") ------------------------------ */
.page-industries .ind-jtbd-list{margin-top:clamp(6px,1vw,12px);border-bottom:1px solid var(--ds-color-ink-a10)}
/* number sits on the title's baseline; the title uses the established
   secondary card-title tier (matches .gv-evi-card__t / .gv-stat__n) instead
   of its own invented size (client 2026-07-06: max five title sizes) */
.page-industries .ind-jtbd{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,34px);align-items:baseline;padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--ds-color-ink-a10)}
.page-industries .ind-jtbd__n{font-family:var(--ds-font-ui);font-weight:700;font-size:clamp(16px,1.25vw,19px);color:var(--ds-color-copper-ink);line-height:1;font-variant-numeric:tabular-nums}
.page-industries .ind-jtbd__t{font-family:"Gantari",var(--ds-font-display),sans-serif;font-weight:500;font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em;color:var(--ds-color-green-deep);margin:0;line-height:1.2}
.page-industries .ind-jtbd__d{font-family:var(--ds-font-body);font-size:var(--ds-text-body-sm);color:var(--ds-text-secondary);line-height:1.6;margin:11px 0 0;max-width:56ch}

/* --- "how we map to your workflow" raised card ------------------------------- */
.page-industries .ind-map{background:var(--ds-surface-raised);border:1px solid var(--ds-color-ink-a10);border-radius:var(--ds-radius-base,3px);box-shadow:var(--elev-2);padding:clamp(24px,2.6vw,34px)}
.page-industries .ind-map__d{font-family:var(--ds-font-body);font-size:var(--ds-text-body-sm);color:var(--ds-text-secondary);line-height:1.55;margin:10px 0 clamp(18px,2vw,24px)}
.page-industries .ind-map__d.is-m0{margin:0}

/* --- hero: subline + segment jump nav ---------------------------------------- */
.page-industries .hero_lead.is-strong-lead{font-weight:600;color:var(--ds-color-green-deep);max-width:34ch}
.page-industries .ind-hero__sub{font-family:var(--ds-font-body);font-size:var(--ds-text-body-sm);color:var(--ds-text-secondary);line-height:1.65;max-width:62ch;margin:clamp(16px,1.8vw,22px) auto 0}
.page-industries .ind-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(22px,2.6vw,32px)}
.page-industries .ind-jump__lk{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none}
.page-industries .ind-jump__n{font-family:var(--ds-font-ui);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--ds-color-copper-ink)}
.page-industries .ind-jump__lb{font-family:var(--ds-font-ui);font-weight:600;font-size:15px;color:var(--ds-color-green-deep);border-bottom:1.5px solid color-mix(in srgb,var(--ds-color-green) 34%,transparent)}
.page-industries .ind-jump__lb.is-copper{border-bottom-color:color-mix(in srgb,var(--ds-color-copper) 40%,transparent);padding-bottom:2px}
.page-industries .ind-dot{width:6px;height:6px;border-radius:50%;background:var(--ds-color-copper);display:inline-block}

/* --- case panel additions ------------------------------------------------------- */
.page-industries .ind-case-quote{font-family:var(--ds-font-display);font-style:italic;font-size:clamp(1rem,.9rem+.4vw,1.18rem);color:rgba(255,245,233,.82);line-height:1.5;margin:clamp(18px,2vw,24px) 0 0;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(255,245,233,.16)}

/* --- segment foot (per-segment CTA row) ------------------------------------------ */
.page-industries .ind-foot{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:clamp(34px,4vw,52px)}
.page-industries .ind-foot.is-tight{margin-top:clamp(30px,3.4vw,46px)}

/* ============================================================================
   RESPONSIVE (2026-07 reconstruction) — the de-inlined components above were
   authored desktop-first as inline styles with no media queries; this block
   resolves the mobile/tablet pass.
   ============================================================================ */
@media (max-width: 900px){
  /* segment copy + instrument rail: stack, instrument follows the copy */
  .page-industries .ind-cols{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .page-industries .ind-sticky{position:static}
}
@media (max-width: 560px){
  .page-industries .is-cols3{grid-template-columns:1fr}
  .page-industries .ind-jtbd{gap:16px;padding:22px 0}
  .page-industries .ind-foot{gap:14px}
  .page-industries .ind-foot .button{white-space:normal;text-align:center}
  .page-industries .ind-jump{gap:14px 20px}
}

/* =========================================================================
   8 · reveal helpers
   ========================================================================= */
.page-industries .reveal{
  opacity:0; transform:translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
.page-industries .reveal.in{ opacity:1; transform:none; }
.page-industries .reveal[data-d="1"]{ transition-delay:.08s; }
.page-industries .reveal[data-d="2"]{ transition-delay:.16s; }
.page-industries .reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .page-industries .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================================
   ELEVATION ADDITIONS (2026-07-03) — share-summary cards (the committee paste
   artefact from the journey research), the hero CTA row, and the tablet-framed
   live-UI panel (client request: platform interface on a tablet).
   ============================================================================ */
.page-industries .ind-hero__cta{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,30px)}
.page-industries .ind-tablet{margin:0 0 clamp(18px,2vw,26px)}
.page-industries .ind-tablet__frame{background:var(--ds-color-green-deep);border-radius:14px;padding:clamp(10px,1.2vw,14px);box-shadow:var(--elev-2)}
.page-industries .ind-tablet__frame img{display:block;width:100%;height:auto;border-radius:6px}
.page-industries .ind-tablet__cap{font-family:var(--ds-font-ui);font-size:var(--ds-text-meta);color:var(--ds-text-secondary);line-height:1.5;margin:10px 0 0}

/* ============================================================
   REDESIGN 2026-07 · sf flow strip, iw tracer, staggers
   ============================================================ */
.reveal[data-d="4"].in{transition-delay:.30s}
.reveal[data-d="5"].in{transition-delay:.38s}

/* sf: segment flow strip (Lyrebird-pattern information flow) */
.sf{position:relative;margin:0;width:100%}
.sf__svg{display:block;width:100%;height:auto;overflow:visible}
.sf__path{stroke:var(--ds-color-green);opacity:.30;stroke-width:1.6}
.sf__halo{fill:var(--ds-color-copper);opacity:.16}
.sf__core{fill:var(--ds-color-copper)}
.sf__nodes{position:absolute;inset:0;pointer-events:none}
.sf__node{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--ds-font-body,inherit);font-size:clamp(.62rem,.55rem + .3vw,.78rem);
  letter-spacing:.02em;font-weight:600;color:var(--ds-color-green-deep);
  background:var(--ds-color-bone);border:1px solid rgba(0,99,60,.24);border-radius:999px;
  padding:.42em .95em;box-shadow:0 1px 0 rgba(14,61,44,.05);
  transition:border-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.sf__node.is-lit{border-color:rgba(0,99,60,.55);color:var(--ds-color-green);
  box-shadow:0 3px 14px rgba(0,99,60,.14);transform:translate(-50%,-52%)}
.sf__node.is-end.is-lit{color:var(--ds-color-copper-ink);border-color:rgba(201,124,44,.55)}
.sf__fan{position:absolute;right:1.5%;top:auto;bottom:-22%;display:flex;gap:7px;pointer-events:none}
.sf__card{font-size:clamp(.56rem,.5rem + .25vw,.68rem);font-weight:600;letter-spacing:.03em;
  color:var(--ds-color-green-deep);background:#fff;border:1px solid rgba(0,99,60,.18);
  border-radius:7px;padding:.5em .8em;box-shadow:0 6px 18px rgba(14,61,44,.10);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.sf__fan.is-out .sf__card{opacity:1}
.sf__fan.is-out .sf__card:nth-child(1){transform:translateY(0) rotate(-4deg);transition-delay:.02s}
.sf__fan.is-out .sf__card:nth-child(2){transform:translateY(-4px) rotate(0deg);transition-delay:.11s}
.sf__fan.is-out .sf__card:nth-child(3){transform:translateY(0) rotate(4deg);transition-delay:.20s}
@media (max-width:719px){.sf__fan{display:none}.sf__node{font-size:.58rem;padding:.36em .7em}}

/* iw tracer: travelling dot on the trace spine */
.iw-tracer{position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--ds-color-copper);box-shadow:0 0 0 5px rgba(201,124,44,.16);
  top:0;left:0;transform:translate(18px,18px) translate(-50%,-50%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.iw-tr{transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.iw-tr.is-lit .iw-tr__dot{background:var(--ds-color-green);border-color:var(--ds-color-green)}
.iw-verify{position:relative}
.iw-verify::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(201,124,44,.45),0 6px 18px rgba(201,124,44,.14);
  opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.iw-verify.is-anchored::after{opacity:1}

/* also-serving card grid */
.page-industries .ind-also2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:900px){.page-industries .ind-also2{grid-template-columns:1fr}}



/* hero field hosts the segment-flow band (industries-hero.js). Overrides the
   governance lab-stage sizing that bleeds in via .page-governance/.gv-hero--flow. */
.page-industries .hf-heroA.gv-hero--flow .gv-hero__field{
  height:clamp(288px,29vw,340px) !important; min-height:0;
  width:min(1320px,94vw) !important; left:auto !important; transform:none !important;
  margin:clamp(-36px,-2vw,-10px) auto 0 !important;   /* pulled up close under the buttons */
  overflow:visible;
}

/* keep the terminal chips inside the viewport on small screens */
@media (max-width:719px){
  .sf__node:first-child{transform:translate(-12%,-50%)}
  .sf__node:last-child{transform:translate(-88%,-50%)}
  .sf__node.is-lit:first-child{transform:translate(-12%,-52%)}
  .sf__node.is-lit:last-child{transform:translate(-88%,-52%)}
}

/* segment footer actions wrap on small screens */
@media (max-width:719px){
  .page-industries .ind-foot{flex-wrap:wrap;row-gap:14px}
  .page-industries .ind-foot .link-arrow{white-space:normal;text-align:left}
}


/* ============================================================================
   SF v2 · hero flow strip states (merge into industries.css, AFTER the
   existing .sf rules).
   Coordinator notes:
   - The old rule `@media (max-width:719px){.sf__fan{display:none}}` in
     industries.css is superseded by the restack rules below; the selectors
     here out-specify it, but the `display:none` may be deleted for clarity.
   - Chip visibility: seg-flow.js v2 adds .is-on when a chip pops (permanent)
     and toggles .is-lit per loop pass. Reduced motion never gets the hidden
     start state (the block is opt-in behind no-preference) and JS also adds
     both classes as the settled end state.
   ============================================================================ */

/* ghost trail circles (injected by seg-flow.js) */
.page-industries .sf .sf__ghost{fill:var(--ds-color-copper)}

/* draw-in + spark/ghost/chip choreography: motion opt-in only.
   Outside this block the end state holds: path fully drawn (attribute
   dashoffset 0), chips visible, spark hidden by JS. */
@media (prefers-reduced-motion: no-preference){
  .page-industries .sf .sf__path{stroke-dasharray:1;stroke-dashoffset:1}
  .page-industries .sf.is-drawing .sf__path{
    transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1);stroke-dashoffset:0}
  .page-industries .sf.is-drawn .sf__path{stroke-dashoffset:0}

  /* chips hidden until their pop; is-lit nudge + colour come from the base
     .sf__node rules (box-shadow deliberately not transitioned) */
  .page-industries .sf .sf__node{opacity:0;
    transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),
      border-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1)}
  .page-industries .sf .sf__node.is-on{opacity:1}

  /* travelling dot + trail appear only once the loop starts */
  .page-industries .sf .sf__spark,
  .page-industries .sf .sf__ghost{opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
  .page-industries .sf.is-flowing .sf__spark{opacity:1}
  .page-industries .sf.is-flowing .sf__ghost--1{opacity:.35}
  .page-industries .sf.is-flowing .sf__ghost--2{opacity:.2}
  .page-industries .sf.is-flowing .sf__ghost--3{opacity:.1}
}

/* --- vertical variant, <=719px: spine runs top to bottom ------------------ */
@media (max-width:719px){
  .page-industries .sf--v{max-width:360px;margin-left:auto;margin-right:auto}
  .page-industries .sf--v .sf__svg{max-width:360px;margin:0 auto}
  /* nodes overlay tracks the svg box only (fan below is static flow) */
  .page-industries .sf--v .sf__nodes{inset:auto;top:0;left:0;width:100%;aspect-ratio:340/560}

  /* chips alternate sides of the spine; overrides the old horizontal
     first/last-child edge-clamp transforms */
  .page-industries .sf--v .sf__node:nth-child(odd),
  .page-industries .sf--v .sf__node.is-lit:nth-child(odd){
    transform:translate(calc(-100% - 10px),-50%)}
  .page-industries .sf--v .sf__node:nth-child(even),
  .page-industries .sf--v .sf__node.is-lit:nth-child(even){
    transform:translate(10px,-50%)}

  /* fan: restack below the strip instead of hiding
     (overrides `.sf__fan{display:none}` in industries.css) */
  .page-industries .sf .sf__fan{display:flex;position:static;right:auto;bottom:auto;
    justify-content:center;gap:8px;margin-top:14px}
  .page-industries .sf .sf__card{font-size:.56rem;padding:.42em .66em}
  .page-industries .sf .sf__fan.is-out .sf__card:nth-child(1){transform:translateY(0) rotate(-2deg)}
  .page-industries .sf .sf__fan.is-out .sf__card:nth-child(2){transform:translateY(-2px) rotate(0deg)}
  .page-industries .sf .sf__fan.is-out .sf__card:nth-child(3){transform:translateY(0) rotate(2deg)}

  /* fan no longer hangs below absolutely, trim the reserved margin */
  .page-industries .gv-hero__field .sf{margin-bottom:10px}
}


/* ============================================================================
   MOTION · I3 live audit stream / I4 consensus arming / I5 audit replay
   (stream-live.js states; coordinator merges into industries.css)
   Scoped .page-industries. Loops and sequences opt IN behind
   prefers-reduced-motion: no-preference; settled end states live outside it.
   Compositor-only: transform / opacity; shadows flash via ::after opacity.
   ============================================================================ */

/* --- I3 · live audit stream ------------------------------------------------ */
/* top fade once the stream is cycling (JS adds .is-live at the first tick) */
.page-industries .gv-stream[data-stream-live].is-live .gv-stream__rows{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 30px)}

@media (prefers-reduced-motion: no-preference){
  /* neutralise the one-time reveal stagger once the stream is cycling */
  .page-industries .gv-stream[data-stream-live].is-live .es-row{
    transition:opacity .4s cubic-bezier(0.16,1,0.3,1),transform .4s cubic-bezier(0.16,1,0.3,1);
    transition-delay:0s}
  /* new row committed above the fold line, then released to settle */
  .page-industries .gv-stream[data-stream-live].is-live .es-row.is-entering{
    opacity:0;transform:translateY(-12px);transition:none}
  /* oldest row fades, JS removes it on transitionend */
  .page-industries .gv-stream[data-stream-live].is-live .es-row.is-leaving{
    opacity:0;transition:opacity .3s cubic-bezier(0.16,1,0.3,1)}
  /* RECORDING dot pulse, 2s */
  .page-industries .gv-stream__live .d,
  .page-industries .v3-audit__live .d{
    animation:indRecPulse 2s cubic-bezier(0.16,1,0.3,1) infinite}
}
@keyframes indRecPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* --- I4 · consensus meter arming ------------------------------------------- */
.page-industries .iw-con .iw-con__fill{transform-origin:left center}
/* numbers that count up stay steady */
.page-industries .iw-con__n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: no-preference){
  /* .is-pre is JS-applied, so the bar never sticks at zero without JS */
  .page-industries .iw-con.is-pre .iw-con__fill{transform:scaleX(0)}
  .page-industries .iw-con.is-pre .iw-chip{opacity:0;transform:translateY(7px) scale(.96)}
  .page-industries .iw-con.is-armed .iw-con__fill{transform:scaleX(1);
    transition:transform 1.1s cubic-bezier(0.16,1,0.3,1)}
  .page-industries .iw-con.is-armed .iw-chip{opacity:1;transform:none;
    transition:opacity .3s cubic-bezier(0.16,1,0.3,1),transform .4s cubic-bezier(0.16,1,0.3,1)}
  .page-industries .iw-con.is-armed .iw-chip:nth-child(1){transition-delay:.45s}
  .page-industries .iw-con.is-armed .iw-chip:nth-child(2){transition-delay:.53s}
  .page-industries .iw-con.is-armed .iw-chip:nth-child(3){transition-delay:.61s}
}

/* --- I5 · audit replay ------------------------------------------------------ */
/* end states (also the reduced-motion settled state, all steps .is-done) */
.page-industries [data-audit-replay] .v3-step__node{position:relative}
.page-industries [data-audit-replay] .v3-step__node::after{content:"";position:absolute;
  inset:-5px;border-radius:50%;border:1.5px solid var(--ds-color-copper);
  opacity:0;transform:scale(.72);pointer-events:none}
.page-industries [data-audit-replay] .v3-step.is-replay .v3-step__node::after{
  opacity:1;transform:scale(1)}
.page-industries [data-audit-replay] .v3-step.is-replay .v3-step__k{
  color:var(--ds-color-copper-ink)}
.page-industries [data-audit-replay] .v3-step.is-done .v3-step__k{
  color:var(--ds-color-green-deep)}

/* anchor flash: pre-rendered ::after shadow layer, only its opacity moves */
.page-industries [data-audit-replay] .v3-audit__anchor{position:relative}
.page-industries [data-audit-replay] .v3-audit__anchor::after{content:"";position:absolute;
  inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1.5px var(--ds-color-copper),
    0 6px 20px color-mix(in srgb, var(--ds-color-copper) 30%, transparent)}
.page-industries [data-audit-replay] .v3-audit__anchor.is-flash::after{opacity:1}

@media (prefers-reduced-motion: no-preference){
  .page-industries [data-audit-replay] .v3-step__node::after{
    transition:opacity .25s cubic-bezier(0.16,1,0.3,1),transform .45s cubic-bezier(0.16,1,0.3,1)}
  .page-industries [data-audit-replay] .v3-step__k{
    transition:color .25s cubic-bezier(0.16,1,0.3,1)}
  .page-industries [data-audit-replay] .v3-audit__anchor::after{
    transition:opacity .3s cubic-bezier(0.16,1,0.3,1)}
}


/* ============================================================
   MOTION 2026-07 · B5: wcw intro choreography (charter I2),
   tablet presence (charter I6), wcw mobile polish.
   Scoped to .page-industries; coordinator merges into
   industries.css. All sequences opt-in behind
   (prefers-reduced-motion: no-preference); the settled end
   state is simply the default styles outside those blocks.
   ============================================================ */

/* --- base (all widths, all preferences) ----------------------------------- */
.page-industries .wcw__canvas{ touch-action: pan-x pan-y; }

.page-industries .ind-tablet__frame{ position: relative; overflow: hidden; }
.page-industries .ind-tablet__frame::after{
  content:"";
  position:absolute; top:-12%; bottom:-12%; left:0; width:34%;
  background:linear-gradient(105deg,
    rgba(255,245,233,0) 0%,
    rgba(255,245,233,.12) 42%,
    rgba(255,245,233,.22) 50%,
    rgba(255,245,233,.12) 58%,
    rgba(255,245,233,0) 100%);
  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
}

/* --- I2 · wcw intro: canvas wipe + left-to-right node sweep --------------- */
@media (prefers-reduced-motion: no-preference){
  .page-industries .wcw.reveal .wcw__canvas{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.16,1,0.3,1);
  }
  .page-industries .wcw.reveal.in .wcw__canvas{ clip-path: inset(0 0 0 0); }

  /* Node pops. A CSS transform REPLACES the SVG transform attribute, so each
     node's translate(x,y) is restated here (matches IND-04 markup). Labels
     are children of the g, so they fade and pop on the same delays. */
  .page-industries .wcw.reveal .wcw__svg g.wcw__node{
    transform-box: fill-box;
    transform-origin: center;
    opacity:0;
    transition:
      transform .45s cubic-bezier(0.16,1,0.3,1),
      opacity .45s cubic-bezier(0.16,1,0.3,1);
  }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node{ opacity:1; }

  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(1){ transform:translate(60px,110px)   scale(.5); transition-delay:.15s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(2){ transform:translate(214px,110px)  scale(.5); transition-delay:.29s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(3){ transform:translate(368px,110px)  scale(.5); transition-delay:.44s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(4){ transform:translate(522px,110px)  scale(.5); transition-delay:.58s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(5){ transform:translate(676px,110px)  scale(.5); transition-delay:.72s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(6){ transform:translate(830px,110px)  scale(.5); transition-delay:.86s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(7){ transform:translate(984px,110px)  scale(.5); transition-delay:1.01s; }
  .page-industries .wcw.reveal .wcw__svg g.wcw__node:nth-of-type(8){ transform:translate(1140px,110px) scale(.5); transition-delay:1.15s; }

  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(1){ transform:translate(60px,110px)   scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(2){ transform:translate(214px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(3){ transform:translate(368px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(4){ transform:translate(522px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(5){ transform:translate(676px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(6){ transform:translate(830px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(7){ transform:translate(984px,110px)  scale(1); }
  .page-industries .wcw.reveal.in .wcw__svg g.wcw__node:nth-of-type(8){ transform:translate(1140px,110px) scale(1); }

  /* fling recovery: reveal.js flags .in-instant when the figure was already
     scrolled past -> settle without motion */
  .page-industries .wcw.reveal.in-instant .wcw__canvas,
  .page-industries .wcw.reveal.in-instant .wcw__svg g.wcw__node{ transition:none; }
}

/* --- wcw mobile: edge fades on the horizontal scroller + one-time nudge ---- */
@media (max-width: 719px){
  .page-industries .wcw__canvas{
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference){
  .page-industries .wcw.reveal.in .wcw__svg{
    animation: wcw-nudge .8s ease-in-out 1.4s 2;
  }
  @keyframes wcw-nudge{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(-14px); }
  }
}

/* --- I6 · tablet presence: one-time sheen sweep + ambient float ------------ */
@media (prefers-reduced-motion: no-preference){
  .page-industries .ind-tablet.reveal.in .ind-tablet__frame::after{
    animation: ind-sheen .9s cubic-bezier(0.16,1,0.3,1) .3s 1;
  }
  @keyframes ind-sheen{
    from{ transform:translateX(-130%); opacity:1; }
    to{   transform:translateX(340%);  opacity:1; }
  }
  .page-industries .ind-tablet.reveal.in .ind-tablet__frame{
    animation: ind-float 7s ease-in-out infinite alternate;
  }
  @keyframes ind-float{
    from{ transform:translateY(0); }
    to{   transform:translateY(-4px); }
  }
}

/* Note: .ind-sticky already drops to position:static under 900px in
   industries.css (responsive block) — intentionally not duplicated here. */

/* ============================================================
   HERO DATA-STREAM (three.js) — hero-stream.js WebGL layer
   Sits between the 2D ambient field and the content. When the
   GL current mounts it hides #hero-ambient; on mobile / reduced
   motion / no-WebGL it never mounts and the SVG flow strip owns
   the motion.
   ============================================================ */
.page-industries .hf-hero-section{ position:relative; }
.page-industries .hero-gl{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.1s ease;
}
.page-industries .hero-gl.is-on{ opacity:1; }
.page-industries .hero-gl canvas{ display:block; width:100%; height:100%; }
/* keep hero content above the current */
.page-industries .hf-hero-section .padding-global{ position:relative; z-index:1; }


/* ============================================================
   VISUAL QA FIXES (2026-07-04) — accent words, dark legibility,
   takeaway callout, hero chip family, flow-strip strength
   ============================================================ */
/* 1 · h2 accent word: copper italic (had NO rule -> rendered plain green) */
.page-industries .heading-style-h2 .ed-accent{ font-style:italic; font-weight:500; color:var(--ds-color-copper); letter-spacing:0; padding-right:.04em; }
.page-industries .section_govern .heading-style-h2 .ed-accent,
.page-industries .section_cta .heading-style-h2 .ed-accent{ color:var(--ds-color-copper-light); }
/* 2 · hero accent: isolate the italic run from the hero's negative tracking */
.page-industries .hero_title .accent{ letter-spacing:0; padding-right:.05em; }
/* 3 · dark-section disclaimers: bone .78, upright (were olive on green, ~1.4:1) */
.page-industries .section_govern .placeholder-note,
.page-industries .section_cta .placeholder-note,
.page-industries .v3-case .placeholder-note{ color:rgba(255,245,233,.78); font-style:normal; }
.page-industries .section_govern .gv-stream__note{ color:rgba(255,245,233,.78); font-style:normal; }
/* 4 · focus ring on non-govern dark panels -> copper-light (5.36:1) */
.page-industries .v3-case :focus-visible,
.page-industries .ind-pull :focus-visible{ outline-color:var(--ds-color-copper-light); }
/* 5 · v3-takeaway -> a real labelled callout (was lone icon + bold sentence) */
.page-industries .v3-takeaway{ background:var(--ds-surface-raised); border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-base); padding:clamp(16px,1.9vw,22px); box-shadow:var(--ds-shadow); border-top-width:1px; }
.page-industries .section_govern .v3-takeaway,
.page-industries .v3-takeaway.on-dark{ background:rgba(255,245,233,.05); border-color:rgba(255,245,233,.18); box-shadow:none; padding:clamp(16px,1.9vw,22px); }
.page-industries .v3-takeaway svg{ width:24px; height:24px; margin-top:1px; }
/* 6 · hero eyebrow: square corners (site-wide hero eyebrow rule). The hero
   anchor chips are now the governance reassurance trio (Clinically governed /
   ERP integration ready / Australian residency) as plain <li> chips, so they
   inherit the identical .page-governance .gv-chip styling — no override needed. */
.page-industries .hero_kick{ border-radius:2px; }
/* 7 · flow-strip fallback presence (three.js current carries desktop) */
.page-industries .sf__path{ opacity:.5; stroke-width:2; }

/* segments-overview per-card link spacing (reused Home cards) */
.page-industries .ind-seg__lk{margin-top:clamp(16px,1.8vw,22px)}


/* ============================================================================
   HERO SEGMENT-FLOW BAND (industries-hero.js)
   The industries counterpart to the governance lab band: intake -> agent quorum
   -> Sophia Guard lock -> segment core (switcher) -> per-segment outcomes.
   Canvas draws the current + nodes + core; crisp DOM carries the swapping
   outcome cards and the segment caption. Many rules must out-specify the
   governance .gv-hero--flow lab styles that bleed in via the shared body class.
   ============================================================================ */

/* the band itself fills the (now fixed-height) field; canvas is drawn behind
   the DOM outcome cards */
.page-industries .ind-hero__field .ind-flow{ position:relative; overflow:visible; }
.page-industries .ind-hero__field .ind-flow canvas{ position:absolute; inset:0; }
/* no top-blur here (the band sits below the copy, not behind it) */
.page-industries .ind-hero__blur{ display:none !important; }

/* three swapping outcome cards — override the governance icon-square .lab-dest */
.page-industries .ind-out{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.page-industries .ind-out .ind-out__card{
  position:absolute; left:-200px; top:50%;
  width:auto; height:auto;
  transform:translate(-19px,-50%);
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 7px;
  background:var(--ds-surface-raised);
  border:1px solid var(--ds-border-strong);
  border-radius:2px;
  box-shadow:var(--ds-shadow);
  filter:none;
  white-space:nowrap;
  transition:opacity .3s ease, filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* ghost swap: blur + fade OUT, then blur + fade IN as the segment changes */
.page-industries .ind-out .ind-out__card.is-swapping{ opacity:0; filter:blur(8px); }
.page-industries .ind-out__ic{
  width:24px; height:24px; flex:none;
  display:grid; place-items:center;
  color:var(--ds-color-green);
}
.page-industries .ind-out__ic svg{ width:22px; height:22px; display:block; overflow:visible; }
.page-industries .ind-out__t{
  font-family:var(--ds-font-ui); font-weight:700; font-size:12.5px;
  letter-spacing:0; color:var(--ds-color-green-deep); line-height:1;
}
/* green "governed" arrival pulse (not the governance copper ack) */
.page-industries .ind-out .ind-out__card.is-ack{
  animation:none;
  border-color:rgba(11,122,75,.65);
  box-shadow:0 0 0 3px rgba(11,122,75,.16), var(--ds-shadow);
}

/* segment caption / switcher — pulled UP into the band's empty lower-centre
   (under the core), matching the governance hero's tight caption spacing */
.page-industries .hf-heroA.gv-hero--flow .ind-cap{
  position:relative !important; z-index:3;
  margin:clamp(-58px,-3vw,-24px) auto 0 !important;
  transform:none !important; left:auto !important; bottom:auto !important;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center;
}
.page-industries .ind-cap .lab-cap__lead{
  font-family:var(--ds-font-ui); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ds-color-copper-ink);
}
.page-industries .ind-cap .lab-cap__state{
  font-family:var(--ds-font-display); font-weight:500;
  font-size:clamp(1.2rem,1.02rem+0.72vw,1.55rem); letter-spacing:-.01em; line-height:1.08;
  color:var(--ds-color-green-deep);
  transition:opacity .24s ease, transform .24s ease;
}
.page-industries .ind-cap .lab-cap__state.is-swapping{ opacity:0; transform:translateY(5px); }

/* tablet: slightly tighter outcome label */
@media (max-width:860px){
  .page-industries .ind-out__t{ font-size:11.5px; }
}

/* ---- MOBILE (<=719px): VERTICAL flow, full content-grid width ----
   industries-hero.js rotates the pipeline: data enters at the TOP, decides at
   the core, then drops to three outcome tiles in a row (icon over a small
   label). The band spans the full content column; the segment caption and the
   governance reassurance chips carry the wording. */
@media (max-width:719px){
  .page-industries .hf-heroA.gv-hero--flow .gv-hero__field{
    width:100% !important; height:clamp(416px,104vw,496px) !important;   /* shorter: quorum+guard dropped */
    margin:clamp(8px,2.6vw,18px) auto 0 !important;
  }
  /* vertical flow ends in a row of tiles; the caption sits BELOW the band */
  /* the segment name belongs to the outcome cards — keep it close to them; the
     value-anchor chips sit ~30px lower so they read as their own, separate group */
  .page-industries .hf-heroA.gv-hero--flow .ind-cap{ margin:clamp(0px,0.8vw,6px) auto 0 !important; }
  .page-industries .hf-heroA.gv-hero--flow .gv-hero__anchors{ margin-top:30px !important; }
  /* outcome cards: a centred icon-over-label column, laid into a bottom row by JS.
     Labels reserve two lines so a wrapped tile never sits taller than the others. */
  .page-industries .ind-flow--v .ind-out .ind-out__card{
    transform:translate(-50%,-20px);
    flex-direction:column; gap:5px;
    padding:8px 6px 7px; width:auto;
    white-space:normal; text-align:center;
  }
  .page-industries .ind-flow--v .ind-out__ic{ width:26px; height:26px; }
  .page-industries .ind-flow--v .ind-out__ic svg{ width:24px; height:24px; }
  .page-industries .ind-flow--v .ind-out__t{
    display:flex; align-items:center; justify-content:center;
    min-height:2.3em; font-size:10.5px; line-height:1.15; font-weight:700;
    letter-spacing:0; color:var(--ds-color-green-deep);
  }
}

/* reduced motion: the JS settles to a complete, readable static frame; nothing
   else to do here beyond letting transitions collapse */

/* ============================================================================
   #category bento: drop the stat + standalone image cells (client feedback
   2026-07-06), move the clinician photo inside the feature card instead, as a
   right-edge accent capped at 35% of the card's width and blended into the
   green ground with a gradient so the rest of the card stays plain for the
   copy. id-scoped: #capabilities (Governance) and the components.html
   styleguide reuse the same .bento/.b-feat/.b-stat/.b-img classes unchanged.
   ============================================================================ */
#category .bento{ grid-template-areas:"feat feat cap1 cap2" "feat feat cap3 cap4"; }
@media(max-width:900px){
  #category .bento{ grid-template-areas:"feat feat" "cap1 cap2" "cap3 cap4"; }
}
@media(max-width:560px){
  #category .bento{ grid-template-areas:"feat" "cap1" "cap2" "cap3" "cap4"; }
}
#category .b-feat{ overflow:hidden; }
#category .b-feat__media{
  position:absolute; top:0; right:0; bottom:0; width:35%;
  z-index:0; overflow:hidden;
}
#category .b-feat__media image-slot{ width:100%; height:100%; display:block; }
#category .b-feat__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--ds-color-green-deep) 0%, transparent 55%);
  pointer-events:none;
}
#category .b-feat > .tag, #category .b-feat > h3,
#category .b-feat > p, #category .b-feat > .lk{
  position:relative; z-index:1; max-width:64%;
}
@media(max-width:560px){
  /* mobile: image drops below the copy, full width, no fade needed */
  #category .b-feat__media{
    position:static; width:100%; height:200px; order:5; margin-top:16px;
  }
  #category .b-feat__media::after{ display:none; }
  #category .b-feat > .tag, #category .b-feat > h3,
  #category .b-feat > p, #category .b-feat > .lk{ max-width:none; }
}

/* ============================================================================
   SEGMENT / GOVERN-GRID + GP LAYOUT CORRECTIONS (client feedback 2026-07-06)
   ============================================================================ */

/* #gp: the Botaniqal deployment card is independent, full-width content. It
   sits below the two-column jtbd/tablet block, separated by an inter-section
   gap; the stat tiles then follow beneath it, and the CTA row last. */
/* gap above the Botaniqal card = ~1x .padding-section-large (client asked to
   halve the earlier 2x value). Stat tiles follow beneath it. */
#gp .v3-case{ margin-top:clamp(56px,7vw,112px); }
#gp .pf-stats{ margin-top:clamp(30px,3.6vw,50px); }
/* the GP proof tiles reuse the home page's four Botaniqal figures -> 4-up */
#gp .pf-stats.is-cols4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ #gp .pf-stats.is-cols4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ #gp .pf-stats.is-cols4{ grid-template-columns:1fr; } }

/* #services / #proof: same treatment as home #governance-entry — the section
   header moves into the grid's LEFT column, the widget sits in the RIGHT
   column, and the evidence checklist is pulled out into a full-width 3-col
   row below (titles are real h4s with the check inline). */
#services .v3-govern-grid{ align-items:start; }
/* #proof's widget is the tall audit-pack mock; it keeps the wider column
   (mirrored from home, now on the right) while the header takes the narrower. */
#proof .v3-govern-grid{ align-items:start; grid-template-columns:.85fr 1.15fr; }
#services .v3-evidence,
#proof .v3-evidence{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px); margin:clamp(28px,3.4vw,48px) 0 0;
}
#services .v3-evidence .e,
#proof .v3-evidence .e{ border-top:none; padding:0; display:flex; flex-direction:column; gap:8px; }
#services .v3-evidence .e__head,
#proof .v3-evidence .e__head{ display:flex; align-items:center; gap:14px; }
#services .v3-evidence .e h4,
#proof .v3-evidence .e h4{ margin:0; }
#services .v3-evidence .e > span,
#proof .v3-evidence .e > span{ padding-left:40px; }
@media(max-width:980px){
  /* keep the id-scoped #proof override collapsing with the base grid */
  #proof .v3-govern-grid{ grid-template-columns:1fr; }
}
@media(max-width:720px){
  #services .v3-evidence,
  #proof .v3-evidence{ grid-template-columns:1fr; }
}

/* ============================================================================
   INSURERS · image connected to the trace widget (client feedback 2026-07-06)
   plat-care.jpg sits flush on top of the iw-trace widget, fading to the
   signature green at its lower edge so image + widget read as one unit.
   ============================================================================ */
#insurers .ins-media{
  position:relative; margin:0; line-height:0; overflow:hidden;
  border-radius:var(--ds-radius-base,3px) var(--ds-radius-base,3px) 0 0;
}
/* +30% taller, focal point pinned to the top of the frame (client 2026-07-06) */
#insurers .ins-media img{
  width:100%; height:clamp(195px,22vw,270px); object-fit:cover; object-position:50% 0%; display:block;
}
#insurers .ins-media__fade{
  position:absolute; left:0; right:0; bottom:0; height:54%; pointer-events:none;
  background:linear-gradient(to top, var(--ds-color-green-deep) 3%, rgba(3,69,44,.5) 42%, transparent 100%);
}
/* weld the widget to the image: flush top, square top corners */
#insurers .ins-media + .iw-trace{
  margin-top:0; border-top-left-radius:0; border-top-right-radius:0;
}

/* ============================================================================
   INSURERS · quote redesigned as a CTA panel (client feedback 2026-07-06)
   Modelled on governance-draft's .gv-indcta--duo: quote left, buttons right,
   signature dot-shader ground (CSS, since gv-shaders.js is not on this page).
   ============================================================================ */
.page-industries .ind-pull--cta{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,3vw,52px);
  padding:clamp(28px,3vw,46px) clamp(28px,3.4vw,54px);
  isolation:isolate;
}
.page-industries .ind-pull--cta .ind-pull__shader{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:var(--ds-color-green-deep);
  background-image:
    radial-gradient(circle at center, rgba(233,166,107,.26) 1.1px, transparent 1.7px),
    linear-gradient(rgba(255,245,233,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,245,233,.045) 1px, transparent 1px),
    radial-gradient(120% 130% at 88% 0%, rgba(11,122,75,.52) 0%, transparent 55%),
    radial-gradient(120% 120% at 4% 108%, rgba(2,42,28,.92) 0%, transparent 60%);
  background-size:26px 26px,26px 26px,26px 26px,100% 100%,100% 100%;
  -webkit-mask-image:radial-gradient(150% 130% at 72% 0%, #000 44%, rgba(0,0,0,.5) 100%);
          mask-image:radial-gradient(150% 130% at 72% 0%, #000 44%, rgba(0,0,0,.5) 100%);
}
.page-industries .ind-pull--cta .ind-pull__quote,
.page-industries .ind-pull--cta .ind-pull__actions{ position:relative; z-index:1; }
.page-industries .ind-pull--cta .ind-pull__mk{
  position:static; display:block; font-size:clamp(52px,5.5vw,78px); line-height:.55;
  color:rgba(233,166,107,.44); margin:0 0 4px;
}
.page-industries .ind-pull--cta .ind-pull__q{ max-width:44ch; }
.page-industries .ind-pull--cta .ind-pull__actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  justify-self:end; width:100%; max-width:320px;
}
.page-industries .ipa-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ds-font-ui); font-weight:700; font-size:14px; letter-spacing:.01em;
  border-radius:3px; padding:12px 22px; text-decoration:none; white-space:nowrap;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-industries .ipa-btn svg{ width:15px; height:9px; transition:transform .25s ease; }
.page-industries .ipa-btn--primary{ background:var(--ds-color-bone,#FFF5E9); color:var(--ds-color-green-deep); }
.page-industries .ipa-btn--primary:hover{ background:#fff; transform:translateY(-1px); }
.page-industries .ipa-btn--ghost{
  background:transparent; color:rgba(255,245,233,.94);
  box-shadow:inset 0 0 0 1px rgba(255,245,233,.34);
}
.page-industries .ipa-btn--ghost:hover{ background:rgba(255,245,233,.10); box-shadow:inset 0 0 0 1px rgba(255,245,233,.6); }
.page-industries .ipa-btn--ghost:hover svg{ transform:translateX(3px); }
@media(max-width:760px){
  .page-industries .ind-pull--cta{ grid-template-columns:1fr; gap:clamp(20px,4vw,28px); }
  .page-industries .ind-pull--cta .ind-pull__actions{ justify-self:stretch; max-width:none; }
}

/* ============================================================================
   POLISH ROUND (client feedback 2026-07-06, second pass)
   ============================================================================ */

/* --- trace widget: each row's secondary text reveals only when the tracer
   reaches that row (is-seq armed by seg-flow.js so no-JS keeps text visible) */
[data-iw-trace].is-seq .iw-tr__sub{opacity:0;transform:translateX(6px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
[data-iw-trace].is-seq .iw-tr.is-reach .iw-tr__sub{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-iw-trace].is-seq .iw-tr__sub{opacity:1!important;transform:none!important}
}

/* --- wcw note: bold claim on its own row, detail on the second row --- */
.page-industries .wcw__note-tx b{display:block;margin-bottom:3px}

/* --- wcw vertical rail (industries-spark.js adds .is-vertical on mobile) --- */
.page-industries .wcw__svg.is-vertical{min-width:0;height:auto}

/* --- also-serving cards: breathe between title / description / link --- */
#also-serving .gv-scard__t{margin-bottom:20px}
#also-serving .gv-scard__d{margin-bottom:20px}

/* --- languages note redesigned: taller card, dual counter-scrolling flag
   belts on the right, masked into the card's top and bottom edges --- */
.page-industries .ind-langs{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:clamp(24px,4vw,64px);
  margin-top:clamp(26px,3vw,40px);
  background:var(--ds-surface-raised); border:1px solid var(--ds-border-subtle);
  border-radius:4px; box-shadow:var(--elev-1);
  padding:clamp(30px,3.4vw,48px); min-height:264px; overflow:hidden;
}
.page-industries .ind-langs__tx{display:flex; align-items:flex-start; gap:clamp(14px,1.6vw,20px); max-width:62ch}
.page-industries .ind-langs__ic{width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px); flex:none}
.page-industries .ind-langs__tx p{margin:0; font-size:var(--ds-text-body-sm); line-height:1.7; color:var(--ds-text-secondary)}
.page-industries .ind-langs__tx b{color:var(--ds-color-green-deep)}
.page-industries .ind-langs__flags{
  position:relative; width:168px; align-self:stretch;
  margin:calc(clamp(30px,3.4vw,48px) * -1) 0;   /* bleed to the card edges */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
}
/* the columns are absolutely positioned so the endless belts never drive the
   card's height — the text column and min-height own the card size */
.page-industries .ind-langs__col{position:absolute; top:0; bottom:0; left:0;
  width:calc(50% - 8px); overflow:hidden}
.page-industries .ind-langs__col--down{left:auto; right:0}
.page-industries .ind-langs__belt{display:flex; flex-direction:column; will-change:transform}
@media(prefers-reduced-motion:no-preference){
  .page-industries .ind-langs__belt{animation:indLangsUp 30s linear infinite}
  .page-industries .ind-langs__col--down .ind-langs__belt{animation-name:indLangsDown}
}
.page-industries .ind-langs__run{display:flex; flex-direction:column; gap:14px; padding-bottom:14px}
.page-industries .ind-langs__flag{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:4px; box-shadow:0 1px 3px rgba(3,69,44,.22);
  outline:1px solid rgba(3,69,44,.10); outline-offset:-1px}
@keyframes indLangsUp{to{transform:translateY(-50%)}}
@keyframes indLangsDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes indLangsLeft{to{transform:translateX(-50%)}}
/* mobile: the belt drops below the copy and scrolls horizontally instead */
@media(max-width:680px){
  .page-industries .ind-langs{grid-template-columns:1fr; min-height:0; row-gap:18px}
  .page-industries .ind-langs__flags{
    width:auto; align-self:auto; height:56px; margin:4px 0 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  }
  .page-industries .ind-langs__col{position:absolute; inset:0; width:auto}
  .page-industries .ind-langs__col--down{display:none}
  .page-industries .ind-langs__belt{flex-direction:row; height:100%; width:max-content;
    animation-name:indLangsLeft; animation-duration:24s}
  .page-industries .ind-langs__run{flex-direction:row; height:100%; gap:12px;
    padding-bottom:0; padding-right:12px}
  .page-industries .ind-langs__flag{width:auto; height:100%}
}

/* --- roadmap footer: the two posture notes move onto the signature deep-
   green panel ground (they sat sage-on-sage before), columns top-aligned --- */
#roadmap .plat-foot{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  gap:clamp(20px,3vw,48px);
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ds-color-green-deep); border:none; border-radius:4px;
  padding:clamp(24px,2.8vw,40px) clamp(26px,3vw,48px);
  box-shadow:0 12px 36px rgba(3,69,44,.14);
}
#roadmap .plat-foot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at center, rgba(233,166,107,.22) 1.1px, transparent 1.7px),
    radial-gradient(120% 130% at 88% 0%, rgba(11,122,75,.5) 0%, transparent 55%),
    radial-gradient(120% 120% at 4% 108%, rgba(2,42,28,.9) 0%, transparent 60%);
  background-size:26px 26px,100% 100%,100% 100%;
  -webkit-mask-image:radial-gradient(150% 130% at 72% 0%, #000 44%, rgba(0,0,0,.5) 100%);
          mask-image:radial-gradient(150% 130% at 72% 0%, #000 44%, rgba(0,0,0,.5) 100%);
}
#roadmap .plat-foot__note{
  position:relative; z-index:1; margin:0; max-width:none;
  color:rgba(255,245,233,.88); font-size:var(--ds-text-body-sm); line-height:1.62;
}
@media(max-width:760px){ #roadmap .plat-foot{ grid-template-columns:1fr; } }


/* ADD 2026-07-09 · ind-tablet DEVICE variant (GP clinics right column) — a
   self-contained portrait phone mockup with its own studio background: drop the
   green box + shimmer sweep, centre it at a phone-realistic width, soft float. */
.page-industries .ind-tablet--device .ind-tablet__frame{
  background:transparent; box-shadow:none; padding:0; overflow:visible; border-radius:0;
}
.page-industries .ind-tablet--device .ind-tablet__frame::after{ display:none; }
.page-industries .ind-tablet--device .ind-tablet__frame img{
  width:clamp(360px,44vw,600px); height:auto; max-width:100%; margin:0 auto;
  border-radius:20px; box-shadow:0 30px 60px -28px rgba(3,49,31,.34);
}

/* ADD 2026-07-09 · device variant — caption spacing + full-width on stacked layouts */
.page-industries .ind-tablet--device .ind-tablet__cap{ margin-top:clamp(16px,2.2vw,24px); }
@media(max-width:900px){
  /* tablet + mobile: the columns stack, so let the phone fill the full column
     width (fills the empty sides, grows taller) instead of the centred cap */
  .page-industries .ind-tablet--device .ind-tablet__frame img{ width:100%; max-width:100%; }
  .page-industries .ind-tablet--device .ind-tablet__cap{ margin-top:clamp(18px,3.5vw,28px); }
}