/* Hero layout: the firefighter and burning house are the centrepiece; the four tabs sit either side of it. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800&display=swap");

:root{
  --ember:#ff8a3d;
  --line:rgba(255,138,61,.42);
  --ink:#fff2e6;
  --muted:rgba(255,215,175,.78);
  --amber:#ffc24a;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
}
html,body{background:#120806;color:var(--ink)}
body.hero-page{min-height:100vh;overflow-x:hidden}
body.hero-page::before{display:none}
body.hero-page #bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
body.hero-page .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(5,3,2,.6) 100%),
             linear-gradient(180deg,rgba(5,3,2,.45) 0%,transparent 25%,transparent 60%,rgba(5,3,2,.7) 100%)}

.hero-head{position:relative;z-index:2;padding:26px 4vw 0;text-shadow:0 2px 22px rgba(0,0,0,.7)}
.hero-head .brand{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.42em;color:var(--ember)}
.hero-head .title{font-family:var(--display);font-weight:800;font-size:clamp(52px,8.5vw,118px);line-height:.9;text-transform:uppercase;margin-top:6px;
  background:linear-gradient(180deg,#fff6e8 0%,#ffd08a 40%,#ff7a2e 82%,#c42a0c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,90,20,.35))}
.hero-head .tagline{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.28em;color:var(--muted);margin-top:12px}
.hero-head .tagline b{color:var(--amber);font-weight:600}

.stage{position:relative;z-index:2;min-height:calc(100vh - 150px);display:grid;grid-template-columns:minmax(230px,1fr) minmax(200px,1.2fr) minmax(230px,1fr);align-items:end;gap:18px;padding:24px 4vw 150px}
.figure-space{min-height:40vh}
.tabs{display:flex;flex-direction:column;gap:14px;max-width:340px;width:100%}
.tabs-left{justify-self:start}
.tabs-right{justify-self:end}

.tab{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:baseline;padding:16px 18px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,rgba(18,9,6,.78),rgba(10,5,3,.86));border:1px solid var(--line);border-left:3px solid var(--ember);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 12px 40px rgba(0,0,0,.45);transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease}
.tab:hover{transform:translateY(-2px);border-color:#ffb36b;box-shadow:0 0 28px rgba(255,100,30,.35),0 12px 40px rgba(0,0,0,.45)}
.tab-k{grid-row:1 / span 2;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ember);opacity:.85}
.tab-t{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.06em;color:#fff4e4}
.tab-s{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--muted);line-height:1.5;margin-top:4px}
.tab.primary{background:linear-gradient(180deg,rgba(255,138,61,.28),rgba(120,25,8,.5));border-color:#ffb36b}
.tab.primary .tab-k{color:#fff4e4}

.scenario-strip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:10px 14px;background:rgba(10,5,3,.8);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:min(92vw,640px)}
.scenario-strip label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.24em;color:var(--ember);margin:0}
.scenario-strip select{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);background:rgba(6,3,2,.9);border:1px solid var(--line);padding:8px 10px;min-height:38px;max-width:100%}
.scenario-strip .summary{display:flex;gap:6px;flex-wrap:wrap}
.scenario-strip .tag{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;padding:4px 7px;border:1px solid var(--line);color:var(--amber)}

@media (max-width:760px){
  .hero-head{padding:18px 16px 0}
  .stage{grid-template-columns:1fr;align-items:end;padding:0 16px 200px;gap:10px;min-height:auto}
  .figure-space{min-height:44vh}
  .tabs{max-width:none;flex-direction:row;flex-wrap:wrap;gap:8px}
  .tabs-left,.tabs-right{justify-self:stretch}
  .tab{flex:1 1 calc(50% - 8px);grid-template-columns:1fr;padding:12px}
  .tab-k{display:none}
  .tab-t{font-size:19px}
  .tab-s{display:none}
  .scenario-strip{left:0;right:0;transform:none;margin:0 12px;bottom:12px;max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .tab{transition:none}
}

body.nogl #bg{display:none}
body.nogl{background:radial-gradient(ellipse at 50% 60%,#5a1a08 0%,#1a0804 45%,#070403 100%)}

/* TacSide brand */
.hero-head .hero-mark{height:56px;display:block;filter:drop-shadow(0 2px 14px rgba(0,0,0,.6))}
.hero-wordmark{margin:10px 0 0;line-height:0}
.hero-wordmark img{height:clamp(54px,6.5vw,104px);width:auto;display:block;filter:drop-shadow(0 3px 22px rgba(0,0,0,.7))}

/* Coming soon watermark (home page) */
.coming-soon-watermark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:clamp(64px,13vw,220px);letter-spacing:.06em;color:rgba(242,232,218,.28);transform:rotate(-14deg);white-space:nowrap;user-select:none}