/* ============================================================
   BFW STEAM DESIGN SYSTEM
   The 212 story made visual. 211 is hot. 212 boils. One degree.
   Dark charcoal base, boiling-water video header behind a dark
   scrim, gold accent held, heat gradient (amber to orange to
   white-hot) as the temperature-rising motif.
   This is the ENGINE ROOM look for the coaching / agent side.
   Public client website never inherits this.
   ============================================================ */

:root{
  --steam-base:#0d0d10;     /* near-black charcoal base */
  --steam-base2:#141418;    /* raised charcoal (cards) */
  --steam-base3:#1b1b21;    /* card hover / rails */
  --steam-ink:#f3f1ea;      /* primary text on dark */
  --steam-mut:#b8b4ab;      /* muted text on dark */
  --steam-mut2:#8a877f;     /* fainter text */
  --steam-line:#2a2a31;     /* hairline borders */
  --steam-gold:#C8922F;     /* brand gold (held) */
  --steam-gold2:#e0c178;    /* light gold */
  /* heat gradient: amber -> orange -> white-hot */
  --heat-amber:#E8B84B;
  --heat-orange:#FF6A13;
  --heat-hot:#FFF3D6;
  --heat:linear-gradient(90deg,var(--heat-amber) 0%,var(--heat-orange) 62%,var(--heat-hot) 100%);
  --heat-v:linear-gradient(0deg,var(--heat-amber) 0%,var(--heat-orange) 62%,var(--heat-hot) 100%);
}

/* ---------- Boiling-water video header ---------- */
.steam-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--steam-base)}
.steam-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6) contrast(1.06)}
/* dark scrim keeps text crisp over the boil */
.steam-hero .steam-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(13,13,16,.28),rgba(13,13,16,.9));z-index:1}
/* thin heat line along the bottom edge of the header */
.steam-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--heat);z-index:2}
.steam-hero .steam-inner{position:relative;z-index:3;padding:34px 24px}
.steam-hero .steam-kicker{display:inline-block;border:1px solid var(--steam-gold);color:var(--steam-gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;border-radius:30px;padding:6px 15px;margin-bottom:14px}
.steam-hero h1{color:#fff;font-weight:700;line-height:1.02;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.steam-hero h1 b,.steam-hero h1 .gold{color:var(--steam-gold)}
.steam-hero .steam-tag{color:#e7e4dc;max-width:540px;margin:12px auto 0;font-weight:500}

/* ---------- Heat accent helpers ---------- */
.heat-bar{background:var(--heat)}
.heat-text{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   212 THERMOMETER
   A reusable element that visually heats from 211 toward a boil.
   Set the fill with: element.style.setProperty('--pct','0..100')
   or add class .is-boiling when it hits 212.
   Horizontal by default. Add .steam-therm--v for the vertical tube.
   ============================================================ */
.steam-therm{background:linear-gradient(160deg,var(--steam-base3),var(--steam-base2));border:1px solid var(--steam-line);border-radius:16px;padding:18px 20px;color:var(--steam-ink);text-align:center}
.steam-therm .therm-read{font-weight:800;font-size:40px;line-height:1;color:#fff;margin:2px 0 2px}
.steam-therm .therm-read .deg{color:var(--steam-gold)}
.steam-therm .therm-state{font-size:12.5px;color:var(--steam-mut);font-weight:600;margin-bottom:12px}
.steam-therm .therm-track{height:16px;border-radius:30px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.steam-therm .therm-fill{height:100%;width:calc(var(--pct,0) * 1%);background:var(--heat);border-radius:30px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.steam-therm .therm-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--steam-mut2);font-weight:700;margin-top:7px}
.steam-therm .therm-scale .boil{color:var(--steam-gold)}
/* the boil: a soft glow once the water hits 212 */
.steam-therm.is-boiling .therm-fill{box-shadow:0 0 14px 2px rgba(255,106,19,.55)}
.steam-therm.is-boiling .therm-read .deg{color:var(--heat-orange)}

/* vertical tube variant */
.steam-therm--v{display:inline-flex;flex-direction:column;align-items:center;padding:16px 16px 14px}
.steam-therm--v .therm-track{width:16px;height:180px;display:inline-block}
.steam-therm--v .therm-fill{position:absolute;bottom:0;left:0;right:0;width:100%;height:calc(var(--pct,0) * 1%);background:var(--heat-v)}
.steam-therm--v .therm-track{position:relative}