/* Fortified Technologies customer project portal */
:root{
  --steel:#D8E1E5; --navy:#001F3E; --forest:#013334; --tide:#017691; --volt:#E0F479; --charcoal:#535255;
  --white:#FFFFFF;
  --display:"Bakbak One","Outfit",Arial,sans-serif;
  --extended:"Eurostile Extended","Michroma","Outfit",Arial,sans-serif;
  --font:"Outfit",Arial,"Helvetica Neue",Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--navy);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--tide)}
a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--tide);outline-offset:2px}
p{margin:0}
h1,h2,h3{margin:0}

.wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.eb{font-family:var(--extended);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0}
.eb.small{font-size:10px}
.hd{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.xl{font-size:clamp(36px,6vw,52px);line-height:1}
h2.hd{font-size:clamp(26px,4vw,32px)}
h3.hd{font-size:21px}
.big{font-size:19px;line-height:1.6;max-width:64ch}
.muted{color:var(--charcoal)}
.small{font-size:14px}
.tide-t{color:var(--tide)}
.volt-t{color:var(--volt)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  font:700 14px var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--navy);border-radius:0;cursor:pointer;white-space:nowrap}
.btn.volt{background:var(--volt);color:var(--navy);border-color:var(--volt)}
.btn.volt:hover{background:#D3EA5C;border-color:#D3EA5C;color:var(--navy)}
.btn.soft{text-transform:none;letter-spacing:0;font-size:15px;border-radius:4px}
.btn.big{min-height:56px;padding:0 32px;font-size:16px}
.btn.navy{background:var(--navy);color:var(--volt)}
.btn.navy:hover{color:var(--white)}
.btn.ghost{background:transparent;color:var(--navy)}

/* Top bar */
.bar{background:var(--white);border-bottom:1px solid var(--steel)}
.bar-in{max-width:1240px;margin:0 auto;padding:14px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.logo{height:40px;width:auto;display:block}
.bar-label{color:var(--navy)}
.bar-right{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--navy);text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em}

/* Hero */
.hero{background:var(--navy);color:var(--steel)}
.hero-in{padding-top:40px;padding-bottom:48px;display:flex;flex-direction:column;gap:10px}
.hero-h{font-size:clamp(36px,7vw,52px);line-height:1;color:var(--steel)}
.hero-sub{font-size:19px;max-width:62ch;margin-top:6px}

/* Stage tracker */
.stages{background:var(--steel)}
.stages-in{padding-top:24px;padding-bottom:24px;display:flex;flex-wrap:wrap;gap:8px}
.stage{flex:1 1 170px;min-height:96px;display:flex;flex-direction:column;gap:6px;padding:14px 16px;
  background:var(--white);color:var(--navy);border:2px solid var(--white);text-decoration:none}
.stage:hover{border-color:var(--navy);color:var(--navy)}
.stage.on{background:var(--navy);border-color:var(--navy);color:var(--steel)}
.stage.locked{background:transparent;border:2px dashed var(--charcoal);color:var(--charcoal);cursor:not-allowed}
.stage-name{font-weight:700;font-size:16px;line-height:1.25}
.stage-lock{display:flex;align-items:center;gap:6px;font-size:13px}

/* Layout */
.main{padding-top:48px;padding-bottom:64px;display:flex;flex-direction:column;gap:56px}
.simple{padding-top:64px;padding-bottom:96px;display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:56px}
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.lead{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
.lead .big{margin-top:8px}
.note{flex:1 1 300px;background:var(--steel);padding:28px;display:flex;flex-direction:column;gap:12px}
.note .eb span{color:var(--navy)}
.sig{font-weight:700;margin-top:4px}
.block{display:flex;flex-direction:column;gap:20px}
.block-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.block-head>div{flex:1 1 420px;display:flex;flex-direction:column;gap:8px}
.block-head .muted{max-width:64ch}

/* Scope tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:var(--steel);padding:28px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.tile.dark{background:var(--navy);color:var(--steel)}
.tile.dark .eb{color:var(--volt)}
.tile-h{font-size:clamp(30px,4vw,40px);line-height:1}

/* Road ahead */
.road{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.road li{display:flex;flex-wrap:wrap;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--steel)}
.road-n{font-size:32px;line-height:1;width:40px;color:var(--tide)}
.road li>div{flex:1 1 260px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.road li b{font-size:17px}

/* Promises */
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.promises>div{border-top:4px solid var(--navy);padding-top:16px;display:flex;flex-direction:column;gap:8px;font-size:15px}

/* Survey band */
.band{background:var(--navy);color:var(--steel);padding:48px;display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.band-text{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:10px}
.band-text h2{color:var(--steel)}
.band-text p:not(.eb){font-size:17px;line-height:1.6;max-width:60ch}
.band-cta{flex:1 1 260px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.band-call{color:var(--steel);font-size:14px}
.band-call:hover{color:var(--volt)}
.meter{height:8px;background:rgba(216,225,229,.25);max-width:420px;margin-top:6px}
.meter span{display:block;height:8px;background:var(--volt)}

/* Support */
.support{background:var(--steel);padding:32px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.support>div:first-child{flex:1 1 360px;display:flex;flex-direction:column;gap:6px}
.support .eb span{color:var(--navy)}
.support h2.hd{font-size:28px}
.support-actions{display:flex;flex-wrap:wrap;gap:12px}
.support-actions .btn.ghost{text-transform:none;letter-spacing:0}

/* Stage 3: field progress */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--steel);padding:24px;display:flex;flex-direction:column;gap:8px}
.kpi.dark{background:var(--navy);color:var(--steel)}
.kpi-n{font-size:clamp(40px,5vw,52px);line-height:1}
.meter.wide{max-width:none}
.side{flex:1 1 300px;display:flex;flex-direction:column;gap:32px}
.side .note{flex:none}
.lead>.block+.block{margin-top:36px}
.sysbar{display:flex;flex-direction:column;gap:6px}
.sysbar-h{display:flex;justify-content:space-between;gap:12px}
.bar{height:10px;background:var(--steel)}
.bar span{display:block;height:10px;background:var(--navy)}
.devgroup{border-top:2px solid var(--navy)}
.devgroup-h{font-weight:700;font-size:17px;margin:12px 0 4px}
.dev{border-bottom:1px solid var(--steel)}
.dev summary{cursor:pointer;list-style:none;padding:12px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.dev summary::-webkit-details-marker{display:none}
.dev summary:hover .dev-t{color:var(--tide)}
.dev-t{flex:1 1 200px;font-weight:700}
.dev-w{font-size:14px;color:var(--charcoal)}
.dev-p{font-size:13px;font-weight:700;color:var(--tide)}
.dev-body{padding:0 0 16px;display:flex;flex-direction:column;gap:10px}
.pill{display:inline-block;padding:4px 10px;font-size:13px;font-weight:700;white-space:nowrap;background:var(--steel);color:var(--navy)}
.pill.mid{background:var(--tide);color:var(--white)}
.pill.done{background:var(--navy);color:var(--volt)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.photos a{display:block;aspect-ratio:4/3;background:var(--steel);overflow:hidden}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.recent{list-style:none;margin:0;padding:0}
.recent li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--steel);font-size:15px}
.recent li>span:first-child{flex:0 0 56px}
.preview-bar{background:var(--volt);color:var(--navy);font-weight:700;padding:12px 32px;font-size:14px}

@media (max-width:640px){
  .wrap,.bar-in{padding-left:20px;padding-right:20px}
  .band{padding:32px 24px}
  .note,.tile{padding:24px}
  .bar-in{padding-top:12px;padding-bottom:12px;flex-wrap:nowrap}
  .logo{height:auto;width:auto;max-height:32px;max-width:58vw;min-width:0;flex-shrink:1}
  .hide-sm{display:none}
  .bar-label,.phone{display:none}
  .bar-right{margin-left:auto}
  .btn.soft{padding:0 14px;font-size:14px}
  .stage{min-height:0}
}
@media print{
  .bar-right,.stages,.band-cta{display:none}
}