/*
 * Page styles for hub — from the locked design.
 * The design decides layout in JavaScript from state.w and ships no
 * media queries; the rules below are those same breakpoints written as
 * CSS, so the page lays out correctly before any script runs.
 */

body{margin:0;background:#F4F7FA;}
  *{box-sizing:border-box;}
  a{color:#0464ad;text-decoration:none;}
  a:hover{color:#04589a;}
  input,select,textarea{font-family:'Outfit',system-ui,sans-serif;}

/* ── layout, converted from the design's JS breakpoints ── */
.hub-heroCols { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hub-heroCols { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
.hub-auditCols { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hub-auditCols { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); } }
.hub-splitCols { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hub-splitCols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.hub-formCols { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hub-formCols { grid-template-columns: 1fr 1fr; } }
.hub-clientCols { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (min-width: 520px) { .hub-clientCols { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 820px) { .hub-clientCols { grid-template-columns: repeat(5,minmax(0,1fr)); } }
.hub-processCols { grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 620px) { .hub-processCols { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1000px) { .hub-processCols { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.hub-ladderCols { grid-template-columns: 1fr; }
@media (min-width: 700px) { .hub-ladderCols { grid-template-columns: minmax(0,0.9fr) minmax(0,1.6fr); } }

.dc-only-mobile { display: none; }
@media (max-width: 1039px) { .dc-only-mobile { display: block; } .dc-only-desktop { display: none; } }
[data-dc-panel][hidden] { display: none; }


/* routing module + quote logo, from the hub design */
/* ===== Routing module — shared spec, README §"The routing module" ===== */
  .rmod__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; justify-content: start; }
.rmod__card {
    display: flex; flex-direction: column; gap: 10px; max-width: 380px;
    background: #FFFFFF; border: 1px solid #E2E9F0; border-radius: 16px;
    padding: 22px 24px; color: #0464AD;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }
.rmod__card:hover { transform: translateY(-2px); border-color: #0464AD; box-shadow: 0 10px 30px rgba(4,100,173,.09); }
.rmod__card:focus-visible { outline: 2px solid #0464AD; outline-offset: 3px; }
.rmod__name { font-size: 17.5px; font-weight: 800; color: #14232F; letter-spacing: -.3px; }
.rmod__line { font-size: 14.5px; line-height: 1.6; color: #5A6B7B; flex: 1; }
.rmod__arrow { font-size: 14px; font-weight: 700; color: #0464AD; }
/* ===== Diagram: "The chain" =====
     The homepage hero spine one level deeper. Four stages escalating in
     weight left to right; Domain Expertise as a BAND beneath, never a
     fifth node — it is not a stage, it changes how every stage is run. */
  .chain { background: #FFFFFF; border: 1px solid #E2E9F0; border-radius: 20px; padding: clamp(20px,2.6vw,32px); }
.chain__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.chain__stage { display: flex; flex-direction: column; }
.chain__node { border-radius: 14px; padding: 18px 20px; flex: 1; }
.chain__stage-label { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.chain__stage-name { font-size: clamp(17px,1.9vw,21px); font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.chain__owner { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin-top: 7px; }
/* Build and Launch light, Sell heaviest, Measure an outcome tone. */
  .chain__node--build  { background: #F7FAFD; border: 1px solid #E2E9F0; }
.chain__node--build .chain__stage-label { color: #5F7386; }
.chain__node--build .chain__stage-name { color: #14232F; }
.chain__node--build .chain__owner { color: #5A6B7B; }
.chain__node--launch { background: #EAF4FD; border: 1px solid #BBD8EF; }
.chain__node--launch .chain__stage-label { color: #0464AD; }
.chain__node--launch .chain__stage-name { color: #14232F; }
.chain__node--launch .chain__owner { color: #5A6B7B; }
.chain__node--sell   { background: #0464AD; border: 1px solid #0464AD; box-shadow: 0 14px 32px rgba(4,100,173,.22); }
.chain__node--sell .chain__stage-label { color: #D4E9FA; }   /* #BBD8EF was 4.13 on the brand blue */
.chain__node--sell .chain__stage-name { color: #FFFFFF; }
.chain__node--sell .chain__owner { color: #D4E9FA; }   /* same 4.13 as the label above */
.chain__node--measure { background: #FDF4E0; border: 1px solid #F0A500; }
.chain__node--measure .chain__stage-label { color: #8A6206; }
.chain__node--measure .chain__stage-name { color: #14232F; }
.chain__node--measure .chain__owner { color: #8A6206; }
/* Connector between stages. Horizontal arrows above 1040px. */
  .chain__arrow { display: flex; align-items: center; justify-content: center; color: #CBDCEB; padding: 10px 0 2px; }
.chain__arrow--v { display: none; }
/* The band. Full width, visually subordinate, never in the stage row. */
  .chain__band {
    margin-top: 16px; background: #F4F7FA; border: 1px dashed #CBDCEB; border-radius: 14px;
    padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  }
.chain__band-name { font-size: 15.5px; font-weight: 800; color: #14232F; }
.chain__band-note { font-size: 14px; line-height: 1.55; color: #5A6B7B; }
/* Five certification badges. The hub design asked for four columns, which
   wrapped the fifth onto a row of its own. Five across at desktop, matching the
   service and industry templates, so the proof strip reads the same everywhere. */