/* ==========================================================================
   HIW Engineers Page — body styles only
   Tokens, nav, and footer are loaded via shared partials.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--fb);
    background: #fff;
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── Shared section utilities ── */
.eyebrow{font-family:var(--fm);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;}
.eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--mid);}
.eyebrow--light{color:rgba(255,255,255,.28);}
.eyebrow--light::before{background:rgba(255,255,255,.25);}
.eyebrow--yellow{color:var(--yellow);}
.eyebrow--yellow::before{background:rgba(240,255,0,.4);}

.section-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;}

/* ── Buttons ── */
.btn-primary{display:inline-flex;align-items:center;gap:.65rem;background:var(--yellow);color:var(--navy);border:none;border-radius:3px;padding:1.1rem 2.5rem;font-family:var(--fm);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s,box-shadow .15s;}
.btn-primary:hover{background:#e8f500;transform:translateY(-1px);box-shadow:0 10px 32px rgba(240,255,0,.22);}
.btn-primary:active{transform:scale(.98);}
.btn-primary svg{transition:transform .2s;}
.btn-primary:hover svg{transform:translateX(3px);}
.btn-ghost-dark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fm);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:1rem 2rem;cursor:pointer;transition:all .15s;text-decoration:none;}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.4);color:#fff;}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}

@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}


/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.hero{
  background:var(--navy);min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--yellow) 25%,var(--yellow) 75%,transparent 100%);opacity:.4;}

.hero__inner{max-width:1200px;margin:0 auto;width:100%;padding:9rem 2.5rem 6rem;position:relative;z-index:1;display:grid;grid-template-columns:1fr 460px;gap:5rem;align-items:end;}
.hero__left{}
.hero__stage{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fm);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:2rem;opacity:0;animation:up .6s .1s var(--ease) forwards;}
.hero__stage::before{content:'';display:block;width:24px;height:1px;background:rgba(255,255,255,.25);flex-shrink:0;}
.hero__h1{font-family:var(--fd);font-size:clamp(3rem,5.5vw,5.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;color:#fff;margin-bottom:2rem;opacity:0;animation:up .65s .2s var(--ease) forwards;}
.hero__h1 em{font-style:italic;color:var(--yellow);}
.hero__sub{font-family:var(--fb);font-size:1.05rem;color:rgba(255,255,255,.5);line-height:1.75;max-width:520px;margin-bottom:2.75rem;opacity:0;animation:up .65s .3s var(--ease) forwards;}
.hero__sub strong{color:rgba(255,255,255,.85);font-weight:500;}
.hero__cta{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;opacity:0;animation:up .65s .4s var(--ease) forwards;}

/* Right: consequence card */
.hero__right{opacity:0;animation:up .65s .35s var(--ease) forwards;}
.consequence-card{background:rgba(255,255,255,.04);border:1px solid rgba(240,255,0,.12);border-radius:8px;overflow:hidden;}
.consequence-card__head{background:rgba(240,255,0,.08);border-bottom:1px solid rgba(240,255,0,.15);padding:1rem 1.5rem;display:flex;align-items:center;gap:.6rem;}
.consequence-card__head-label{font-family:var(--fm);font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);}
.consequence-card__head svg{color:var(--yellow);flex-shrink:0;}
.consequence-card__body{padding:1.5rem;}
.consequence-item{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 0;border-bottom:1px solid rgba(255,255,255,.06);}
.consequence-item:last-child{border-bottom:none;padding-bottom:0;}
.consequence-item__stage{font-family:var(--fm);font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);white-space:nowrap;flex-shrink:0;width:60px;padding-top:2px;}
.consequence-item__text{font-family:var(--fb);font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5;}
.consequence-item__text strong{color:rgba(255,255,255,.8);font-weight:600;}
.consequence-card__foot{background:rgba(240,255,0,.06);border-top:1px solid rgba(240,255,0,.12);padding:.875rem 1.5rem;}
.consequence-card__foot-text{font-family:var(--fm);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,255,0,.7);}


/* ══════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════ */
.problem{background:#fff;padding:8rem 2.5rem;border-bottom:1px solid var(--border);}
.problem__inner{max-width:1200px;margin:0 auto;}
.problem__header{max-width:680px;margin-bottom:4rem;}
.problem__h2{font-family:var(--fd);font-size:clamp(2.2rem,4vw,3.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;color:var(--navy);margin-bottom:1rem;}
.problem__h2 em{font-style:normal;color:var(--yellow);-webkit-text-stroke:1.5px var(--navy);}
.problem__sub{font-family:var(--fb);font-size:1rem;color:var(--mid);line-height:1.75;}

.problem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.prob-card{padding:2.5rem;border-right:1px solid var(--border);position:relative;transition:background .2s;}
.prob-card:last-child{border-right:none;}
.prob-card:hover{background:var(--bg);}
.prob-card__num{font-family:var(--fd);font-size:3.5rem;font-weight:800;color:rgba(11,26,51,.05);line-height:1;margin-bottom:.75rem;}
.prob-card__h{font-family:var(--fd);font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--navy);margin-bottom:.65rem;line-height:1.15;}
.prob-card__body{font-family:var(--fb);font-size:.875rem;color:var(--mid);line-height:1.7;}
.prob-card__body strong{color:var(--navy);font-weight:600;}
.prob-card__accent{display:block;width:32px;height:3px;background:rgba(22,163,74,.5);border-radius:2px;margin-bottom:1.25rem;}


/* ══════════════════════════════════
   INTERVENTION
══════════════════════════════════ */
.intervention{background:var(--navy);padding:8rem 2.5rem;position:relative;overflow:hidden;}
.intervention::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 15% 60%,rgba(240,255,0,.04) 0%,transparent 55%);pointer-events:none;}
.intervention__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;position:relative;z-index:1;}

.intervention__left{}
.intervention__h2{font-family:var(--fd);font-size:clamp(2.2rem,3.5vw,3.25rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;color:#fff;margin-bottom:1.5rem;}
.intervention__h2 em{font-style:normal;color:var(--yellow);}
.intervention__body{font-family:var(--fb);font-size:1rem;color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:2.5rem;}
.intervention__body strong{color:rgba(255,255,255,.85);font-weight:600;}

/* Three-step process */
.intervention__right{}
.steps{display:flex;flex-direction:column;gap:0;}
.step{display:grid;grid-template-columns:56px 1fr;gap:0;position:relative;}
.step::after{content:'';position:absolute;left:27px;top:56px;bottom:0;width:2px;background:rgba(255,255,255,.06);}
.step:last-child::after{display:none;}
.step__num-col{display:flex;flex-direction:column;align-items:center;padding-top:4px;}
.step__circle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:1rem;font-weight:800;color:rgba(255,255,255,.3);flex-shrink:0;z-index:1;transition:background .2s,border-color .2s,color .2s;}
.step:hover .step__circle{background:rgba(240,255,0,.12);border-color:rgba(240,255,0,.35);color:var(--yellow);}
.step__body{padding:0 0 2.5rem 1.5rem;}
.step__label{font-family:var(--fm);font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.4rem;}
.step__h{font-family:var(--fd);font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff;margin-bottom:.45rem;transition:color .2s;}
.step:hover .step__h{color:var(--yellow);}
.step__desc{font-family:var(--fb);font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;}
.step:last-child .step__body{padding-bottom:0;}


/* ══════════════════════════════════
   RISK SECTION — What validation surfaces
══════════════════════════════════ */
.risks{background:#fff;padding:8rem 2.5rem;border-top:1px solid var(--border);}
.risks__inner{max-width:1200px;margin:0 auto;}
.risks__header{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:4rem;}
.risks__h2{font-family:var(--fd);font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;color:var(--navy);}
.risks__h2 em{font-style:normal;color:var(--yellow);-webkit-text-stroke:1.5px var(--navy);}
.risks__sub{font-family:var(--fb);font-size:.95rem;color:var(--mid);line-height:1.75;}

.risk-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.risk-table thead tr{background:var(--bg);}
.risk-table thead th{font-family:var(--fm);font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);padding:.875rem 1.25rem;text-align:left;border-bottom:1px solid var(--border);}
.risk-table thead th:last-child{color:var(--navy);background:rgba(240,255,0,.06);border-left:2px solid rgba(240,255,0,.3);}
.risk-table tbody tr{transition:background .15s;}
.risk-table tbody tr:hover{background:var(--bg);}
.risk-table tbody td{font-family:var(--fb);font-size:.875rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);color:var(--mid);vertical-align:middle;}
.risk-table tbody tr:last-child td{border-bottom:none;}
.risk-table tbody td:first-child{font-weight:600;color:var(--navy);}
.risk-table tbody td:last-child{background:rgba(240,255,0,.03);border-left:2px solid rgba(240,255,0,.2);color:var(--navy);font-weight:500;}
.risk-x{color:rgba(220,38,38,.5);font-size:.85rem;}
.risk-y{color:#16a34a;font-size:.85rem;}


/* ══════════════════════════════════
   OUTCOMES
══════════════════════════════════ */
.outcomes{background:var(--navy);padding:8rem 2.5rem;position:relative;overflow:hidden;}
.outcomes::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 60%,rgba(240,255,0,.03) 0%,transparent 60%);pointer-events:none;}
.outcomes__inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.outcomes__h2{font-family:var(--fd);font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;color:#fff;margin-bottom:4rem;}
.outcomes__h2 em{font-style:normal;color:var(--yellow);}
.outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.07);border-radius:6px;overflow:hidden;}
.outcome-col{padding:2.5rem;border-right:1px solid rgba(255,255,255,.07);transition:background .2s;}
.outcome-col:last-child{border-right:none;}
.outcome-col:hover{background:rgba(255,255,255,.03);}
.outcome-col__num{font-family:var(--fd);font-size:.7rem;font-weight:700;color:rgba(240,255,0,.35);letter-spacing:.1em;margin-bottom:1.25rem;}
.outcome-col__h{font-family:var(--fd);font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff;line-height:1.2;margin-bottom:.65rem;}
.outcome-col__body{font-family:var(--fb);font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.65;}


/* ══════════════════════════════════
   BRIDGE — Link to providers side
══════════════════════════════════ */
.bridge{background:var(--bg);padding:8rem 2.5rem;border-top:1px solid var(--border);}
.bridge__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;}
.bridge__left{}
.bridge__h2{font-family:var(--fd);font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;color:var(--navy);margin-bottom:1.25rem;}
.bridge__h2 em{font-style:normal;color:var(--yellow);-webkit-text-stroke:1.5px var(--navy);}
.bridge__body{font-family:var(--fb);font-size:1rem;color:var(--mid);line-height:1.75;margin-bottom:2.25rem;}
.bridge__body strong{color:var(--navy);font-weight:600;}
.bridge__note{font-family:var(--fm);font-size:.58rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-top:.875rem;}
.bridge__note a{color:var(--navy);font-weight:600;text-decoration:underline;}

/* Capability signal cards */
.bridge__right{}
.cap-signals{display:flex;flex-direction:column;gap:.6rem;}
.cap-signal{background:#fff;border:1px solid var(--border);border-radius:6px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.875rem;transition:border-color .2s,box-shadow .2s;}
.cap-signal:hover{border-color:#b0b8c8;box-shadow:0 4px 16px rgba(11,26,51,.06);}
.cap-signal__icon{width:34px;height:34px;border-radius:6px;background:var(--navy);color:var(--yellow);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cap-signal__body{flex:1;min-width:0;}
.cap-signal__h{font-family:var(--fb);font-size:.875rem;font-weight:700;color:var(--navy);margin-bottom:.2rem;}
.cap-signal__sub{font-family:var(--fm);font-size:.56rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mid);}
.cap-signal__cert{font-family:var(--fm);font-size:.56rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;background:#f0f8ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:3px;padding:.18rem .5rem;flex-shrink:0;}


/* ══════════════════════════════════
   FINAL CTA
══════════════════════════════════ */
.final{background:var(--navy);padding:9rem 2.5rem;text-align:center;position:relative;overflow:hidden;}
.final::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 100%);}
.final__inner{max-width:640px;margin:0 auto;position:relative;z-index:1;}
.final__h2{font-family:var(--fd);font-size:clamp(2.5rem,5vw,5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.0;color:#fff;margin-bottom:1.25rem;}
.final__h2 em{font-style:italic;color:var(--yellow);}
.final__sub{font-family:var(--fb);font-size:1rem;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:3rem;}
.final__actions{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.final__meta{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;}
.final__meta-item{display:flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.56rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.25);}
.final__meta-item svg{color:rgba(240,255,0,.5);flex-shrink:0;}


/* ── Responsive ── */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:3rem;}
  .hero__right{display:none;}
  .intervention__inner{grid-template-columns:1fr;gap:3.5rem;}
  .risks__header{grid-template-columns:1fr;gap:2rem;}
  .bridge__inner{grid-template-columns:1fr;gap:3rem;}
  .outcomes-grid{grid-template-columns:1fr 1fr;}
  .outcome-col:nth-child(2){border-right:none;}
  .outcome-col{border-bottom:1px solid rgba(255,255,255,.07);}
  .outcome-col:last-child{border-bottom:none;}
}
@media(max-width:768px){
  .hero__inner,.section-inner{padding-left:1.5rem;padding-right:1.5rem;}
  .problem,.intervention,.risks,.outcomes,.bridge,.final{padding-left:1.5rem;padding-right:1.5rem;}
  .problem__grid{grid-template-columns:1fr;}
  .prob-card{border-right:none;border-bottom:1px solid var(--border);}
  .prob-card:last-child{border-bottom:none;}
  .outcomes-grid{grid-template-columns:1fr;}
  .outcome-col{border-right:none;}
}