/* StratERP brand layer · v3.0 · ramp B
   Deep #143F61  Mid #186995  Core #1B97C4  Light #5ACBE3
   Ink #1C2D40  Muted #5F7388  Surface #F2F6F9 */

/* ============================================================
   StratERP brand layer  ·  v1  ·  Counterflow identity
   Load AFTER your existing theme stylesheet so these win.
   Spec source: StratERP Brand Guidelines, sections 06 and 07.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------------ */
:root{
  /* Colour — 06 */
  --st-petrol:      #1C2D40;   /* ink: wordmark, falling bars, body copy */
  --st-teal:        #1B97C4;   /* capability: rising bars, meters, numerals */
  --st-teal-lift:   #5ACBE3;   /* reversed use only, on petrol */
  --st-slate:       #6C7D90;   /* captions, secondary labels, 16px+ only */
  --st-wash:        #E4EDF8;   /* callouts, table fills, unspent meter */
  --st-paper:       #F2F6F9;   /* page and section grounds */
  --st-white:       #FFFFFF;

  /* Type — 07 */
  --st-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --st-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --st-radius: 4px;            /* the mark has no radii; keep UI restrained */
  --st-bar: 16px;              /* X — one bar width, the clear-space unit */
}

/* --- 2. Base -------------------------------------------------- */
body{
  font-family: var(--st-body);
  color: var(--st-petrol);
  background: var(--st-paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.st-display{
  font-family: var(--st-display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.08;
  color: var(--st-petrol);
  margin: 0 0 .4em;
}
h1{ font-size: clamp(38px, 5.4vw, 54px); }
h2{ font-size: clamp(26px, 3.4vw, 30px); }
h3{ font-family: var(--st-body); font-weight: 700; font-size: 18px; letter-spacing: 0; }
p{ margin: 0 0 1em; }
a{ color: var(--st-petrol); }

/* Labels: no second family — condensed uppercase does the mono's job (07) */
.st-label{
  font-family: var(--st-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--st-slate);
}

/* --- 3. Logo -------------------------------------------------- */
.st-logo{ display:block; height: 40px; width: auto; }
svg.st-logo{ height:40px; width:auto; }
svg.st-logo--footer{ height:34px; }
.st-logo--footer{ height: 34px; }
/* Clear space is 3X on all four sides, X = one bar width (04) */
.st-logo-wrap{ padding: calc(var(--st-bar) * 1.5); }

/* --- 4. Buttons ----------------------------------------------- */
/* Teal is 3.4:1 on paper and fails for label text, so the solid
   button is petrol. Teal is reserved for capability, not chrome. */
.st-btn{
  display:inline-block;
  font-family: var(--st-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--st-radius);
  border: 2px solid var(--st-petrol);
  background: var(--st-petrol);
  color: var(--st-white);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.st-btn:hover{ background:#1B4E77; border-color:#1B4E77; }
.st-btn--ghost{ background: transparent; color: var(--st-petrol); }
.st-btn--ghost:hover{ background: var(--st-wash); }
.st-btn--on-petrol{ background: var(--st-white); border-color: var(--st-white); color: var(--st-petrol); }
.st-btn:focus-visible{ outline: 3px solid var(--st-teal); outline-offset: 3px; }

/* --- 5. Header ------------------------------------------------ */
.st-header{
  background: var(--st-white);
  border-bottom: 1px solid rgba(15,46,56,.10);
  position: sticky; top: 0; z-index: 50;
}
.st-header__inner{
  max-width: 1180px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 32px;
}
.st-nav{ display:flex; gap: 26px; margin-left: auto; align-items: center; }
.st-nav a{
  font-family: var(--st-body); font-weight: 500; font-size: 15px;
  color: var(--st-petrol); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.st-nav a:hover{ border-bottom-color: var(--st-teal); }
.st-nav a[aria-current="page"]{ border-bottom-color: var(--st-teal); }
/* the button is not a nav link — restore its own colours and kill the underline */
.st-nav a.st-btn{
  color: var(--st-white);
  border: 2px solid var(--st-petrol);
  font-family: var(--st-display);
  padding: 11px 20px;
}
.st-nav a.st-btn:hover{ background:#1B4E77; border-color:#1B4E77; color: var(--st-white); }

/* --- 6. Counterflow meter (08) -------------------------------- */
/* Capability above the line in teal, administrative effort below in
   petrol, wash for the period not yet measured. */
.st-meter{ display:flex; align-items:center; gap:10px; height: 56px; }
.st-meter__col{ position:relative; flex:1; height:100%; }
.st-meter__up,
.st-meter__down{ position:absolute; left:0; right:0; }
.st-meter__up{ bottom:50%; left:14%; right:14%; background: var(--st-teal); }
.st-meter__down{ top:50%; left:14%; right:14%; background: var(--st-petrol); }
.st-meter__col--future .st-meter__up,
.st-meter__col--future .st-meter__down{ background: var(--st-wash); }
.st-meter__base{ height:3px; background: var(--st-petrol); margin-top:-1.5px; }

/* --- 7. Section rule (08) ------------------------------------- */
.st-rule{ display:flex; height:5px; overflow:hidden; }
.st-rule__gain{ background: var(--st-teal); }
.st-rule__load{ background: var(--st-petrol); }
.st-rule__rest{ background: var(--st-wash); flex:1; }

/* --- 8. Score block (08) -------------------------------------- */
.st-score__num{
  font-family: var(--st-display); font-weight: 600;
  font-size: 58px; line-height: .92; color: var(--st-teal);
}
.st-score__den{ font-size: 24px; color: var(--st-slate); font-weight: 500; }
.st-score__label{ /* petrol, per 08 */
  font-family: var(--st-display); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--st-petrol);
  display:block; margin-bottom: 10px;
}

/* --- 9. Surfaces ---------------------------------------------- */
.st-card{ background: var(--st-white); border-radius: 8px; padding: 28px; }
.st-panel{ background: var(--st-petrol); color: #C9D9EC; border-radius: 8px; padding: 32px; }
.st-panel h2, .st-panel h3{ color: var(--st-white); }
.st-panel .st-label{ color: var(--st-teal-lift); }
.st-callout{ background: var(--st-wash); border-left: 4px solid var(--st-teal); padding: 18px 22px; }

/* --- 10. Accessibility guards --------------------------------- */
/* Teal is 3.4:1 on paper. Never use it for text under 18px. */
.st-teal-text{ color: var(--st-teal); font-size: 18px; font-weight: 600; }
.st-panel .st-teal-text{ color: var(--st-teal-lift); }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }



  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .hero{padding:76px 0 64px}
  .hero h1{max-width:16ch}
  .hero p.sub{font-size:19px;color:#33465F;max-width:52ch}
  .hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  .band{padding:56px 0}
  .band--wash{background:var(--st-wash)}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .foot{background:var(--st-petrol);color:#9DAFC8;padding:52px 0 34px;margin-top:64px}
  .foot a{color:#C9D9EC;text-decoration:none;display:block;padding:4px 0;font-size:14.5px}
  .foot h4{font-family:var(--st-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    font-size:12px;color:#fff;margin:0 0 12px}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  .foot-base{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;
    display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:12px}
  .note{background:#fff;border-left:4px solid var(--st-teal);padding:14px 18px;font-size:14px;
    color:#33465F;margin:0 0 26px}
  @media(max-width:860px){.split,.grid3,.grid4,.foot-grid{grid-template-columns:1fr}}


/* --- ramp B role overrides (last wins) --- */
body{ color:#1C2D40; }
h1, h2{ color:#143F61; }
.st-panel{ background:#143F61; }
.foot{ background:#143F61; }
.btn, .btn--solid, a.btn, button.btn{ }

/* --- site additions --- */
.page-hero{padding:54px 0 12px}
.page-hero h1{font-size:clamp(34px,4.6vw,46px);margin-bottom:14px}
.page-hero p.lead{font-size:17px;color:#47586E;max-width:62ch}
.prose{max-width:70ch;margin-left:0;margin-right:auto}
.prose h2{font-size:26px;margin:34px 0 12px}
.prose p{font-size:15.5px;color:#47586E;line-height:1.72;margin-bottom:14px}
.prose ul{margin:0 0 18px 18px}
.prose li{font-size:15.5px;color:#47586E;line-height:1.72;margin-bottom:7px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 10px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:#fff;border:1px solid #D6DBE1;border-radius:8px;padding:26px}
.contact-card .who{font-size:20px;font-weight:700;color:#1C2D40;margin-bottom:2px}
.contact-card .role{font-size:14px;color:#5F7388;margin-bottom:16px}
.contact-card a.big{display:inline-block;font-size:15px;font-weight:600;color:#186995;text-decoration:none;border-bottom:1px solid #B9CEDD;padding-bottom:1px}
.contact-card a.big:hover{color:#143F61;border-color:#186995}
.muted-note{font-size:13.5px;color:#5F7388;margin-top:8px}

.foot ul{list-style:none;padding-left:0;margin:0}
.foot ul li{margin-bottom:7px}
.st-nav a.is-active{color:#143F61;font-weight:600}