/* operationscast.com — industrial / operations.
   Hi-vis safety signage: charcoal and steel, hazard stripes, condensed uppercase,
   spec-sheet tables. Reads like equipment documentation.
   Nothing shared with the other sites. */

:root{
  --coal:#16181a;
  --coal-2:#1f2327;
  --steel:#2e343a;
  --steel-2:#4a5157;
  --grey:#9aa4ad;
  --pale:#e8ecef;
  --white:#fff;
  --hazard:#ffd100;
  --hivis:#c8ff00;
  --stop:#e03c31;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--coal);
  color:var(--pale);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.62;
}

img{max-width:100%;height:auto;display:block}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:72ch}

h1,h2,h3{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  line-height:.98;
  letter-spacing:.005em;
  margin:0;
  color:var(--white);
}
h1{font-size:clamp(2.6rem,7.4vw,5rem)}
h2{font-size:clamp(2rem,4.8vw,3.3rem);margin-bottom:.75rem}
h3{font-size:1.3rem;margin-bottom:.35rem;letter-spacing:.02em}

p{margin:0 0 1.05rem;max-width:72ch}
.lead{font-size:1.18rem;color:var(--grey)}

a{color:var(--hazard)}

strong{color:var(--white);font-weight:600}

/* ---------- hazard stripe ---------- */

.hazard{
  height:14px;
  background:repeating-linear-gradient(45deg,
    var(--hazard) 0 22px,
    var(--coal) 22px 44px);
}
.hazard.thin{height:8px}

/* ---------- masthead ---------- */

.brandbar{
  display:flex;align-items:center;gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--steel);
  flex-wrap:wrap;
}
.mark{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;font-weight:700;
  font-size:1.35rem;letter-spacing:.06em;
  color:var(--white);
}
.mark b{color:var(--hazard);font-weight:700}
.brandbar .tag{
  font-size:.8rem;color:var(--grey);
  letter-spacing:.1em;text-transform:uppercase;
}

header.mast{padding:0 0 64px;background:var(--coal)}
header.mast .hero{padding-top:64px}
.kicker{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hazard);font-weight:600;margin-bottom:1.1rem;
}

/* ---------- readout ---------- */

.readout{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--steel);
  margin-top:2.4rem;
  background:var(--coal-2);
}
.readout div{
  flex:1 1 150px;
  padding:20px 22px;
  border-right:1px solid var(--steel);
}
.readout div:last-child{border-right:none}
.readout .n{
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.5rem;font-weight:700;line-height:1;
  color:var(--hazard);
}
.readout .k{
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);margin-top:.5rem;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;font-weight:700;
  font-size:1.16rem;letter-spacing:.06em;
  background:var(--hazard);color:var(--coal);
  text-decoration:none;
  padding:15px 34px;min-height:48px;
  border:2px solid var(--hazard);
}
.btn:hover,.btn:focus{background:var(--hivis);border-color:var(--hivis)}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--steel-2)}
.btn.ghost:hover,.btn.ghost:focus{border-color:var(--hazard);color:var(--hazard);background:transparent}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- sections ---------- */

section{padding:72px 0;border-top:1px solid var(--steel)}
section.lit{background:var(--coal-2)}

.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.94rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hazard);font-weight:600;margin-bottom:.85rem;
}

/* ---------- grids ---------- */

.cols{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));margin-top:36px;background:var(--steel)}
.cols > div{background:var(--coal);padding:26px}
section.lit .cols > div{background:var(--coal-2)}
.cols p{margin-bottom:0;font-size:.97rem;color:var(--grey)}
.cols h3{color:var(--hazard)}

/* ---------- spec table ---------- */

.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px}
table.spec{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
table.spec caption{
  text-align:left;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);padding-bottom:.9rem;
}
table.spec th,table.spec td{
  text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--steel);vertical-align:top;
}
table.spec thead th{
  background:var(--steel);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
table.spec tbody th{color:var(--white);font-weight:600;width:36%}
table.spec td{color:var(--grey)}
table.spec .hi{color:var(--hazard);font-weight:600;white-space:nowrap}

/* ---------- steps ---------- */

ol.steps{counter-reset:s;list-style:none;padding:0;margin:36px 0 0;display:grid;gap:2px;background:var(--steel)}
ol.steps li{
  counter-increment:s;position:relative;
  background:var(--coal);padding:26px 26px 26px 92px;
}
section.lit ol.steps li{background:var(--coal-2)}
ol.steps li::before{
  content:"0" counter(s);
  position:absolute;left:26px;top:24px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.5rem;font-weight:700;line-height:1;
  color:var(--steel-2);
}
ol.steps p{margin-bottom:0;color:var(--grey)}

/* ---------- image slots ----------
   ::after carries the photo so it paints over the caption. No file, no 404. */

.slot{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:var(--coal-2);
  border:1px solid var(--steel);
  min-height:240px;margin:32px 0;
}
/* Placeholder art: hazard hatching over an engineering grid, with a faint
   plan-view circle. Covered entirely by ::after once a real file lands. */
.slot::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 74% 50%,
      transparent 0 58px, rgba(255,209,0,.16) 58px 60px, transparent 60px),
    repeating-linear-gradient(45deg,
      rgba(255,209,0,.10) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(0deg, rgba(154,164,173,.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(154,164,173,.09) 0 1px, transparent 1px 26px);
}
.bleed::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,209,0,.09) 0 20px, transparent 20px 40px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 30px);
}
.slot::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;background-position:center;
}
.slot.tall{min-height:380px}

.bleed{position:relative;min-height:320px;display:grid;place-items:center;background:var(--coal)}
.bleed::after{
  content:"";position:absolute;inset:0;
  background-image:
    /* Scrim first so headline contrast survives whatever photo lands here.
       Without it the opacity has to stay so low the photo may as well not
       be there. */
    linear-gradient(to right, rgba(10,11,12,.88) 0%, rgba(10,11,12,.55) 45%, rgba(10,11,12,.78) 100%),
    var(--img);
  background-size:cover;background-position:center;
  opacity:.92;
}
.bleed .inner{position:relative;z-index:1;text-align:center;padding:60px 24px;max-width:62ch}
.bleed p{color:var(--pale);margin-left:auto;margin-right:auto}

/* ---------- callout ---------- */

.callout{
  border:1px solid var(--steel);
  border-left:6px solid var(--hazard);
  background:var(--coal-2);
  padding:28px 30px;margin:34px 0;
}
section.lit .callout{background:var(--coal)}
.callout h3{color:var(--white)}
.callout p:last-child{margin-bottom:0}

.notice{
  border:1px solid var(--steel);
  border-left:6px solid var(--stop);
  background:var(--coal-2);
  padding:24px 28px;margin:32px 0;
}
section.lit .notice{background:var(--coal)}
.notice .hd{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stop);font-weight:700;margin-bottom:.6rem;
}
.notice p{font-size:.96rem;color:var(--grey)}
.notice p:last-child{margin-bottom:0}

/* ---------- tour tiles ---------- */

.tiles{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:32px;background:var(--steel)}
.tiles span{
  background:var(--coal);padding:18px 20px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:1.1rem;color:var(--pale);
}
section.lit .tiles span{background:var(--coal-2)}

/* ---------- footnote ---------- */

.footnote{
  font-size:.87rem;color:var(--steel-2);
  border-top:1px solid var(--steel);
  padding-top:20px;margin-top:36px;max-width:76ch;
}
.footnote a{color:var(--grey)}

/* ---------- cta ---------- */

.cta{text-align:center;padding:80px 0}
.cta p{margin-left:auto;margin-right:auto;max-width:54ch}
.cta .btnrow{justify-content:center}

/* ---------- footer ---------- */

footer{background:#0d0f10;color:var(--steel-2);padding:44px 0 58px;font-size:.9rem}
footer a{color:var(--hazard)}
footer p{max-width:74ch}
footer .fine{font-size:.83rem;margin-top:1.4rem;color:#5a6167}

@media (max-width:640px){
  section{padding:52px 0}
  header.mast{padding-bottom:48px}
  header.mast .hero{padding-top:44px}
  .btn{width:100%;text-align:center}
  .readout div{flex-basis:50%;border-bottom:1px solid var(--steel)}
  ol.steps li{padding:74px 22px 24px}
  ol.steps li::before{left:22px;top:20px}
}